/*
 * RobloxPets – Header · Styles
 *
 * Scoped under .rbp-header-root. Values come from design-handoff/global-colors.md
 * and design-handoff/design-reference.html (V1 Refined).
 *
 * Fixed layout: main header pins to top:0. Subheader pins below it at
 * a measured offset that matches the rendered
 * main header height. If that height ever changes, update these constants.
 */

.rbp-header-root {
    --rbp-bg:          #050E1B;
    --rbp-bg-elev:     rgba(255,255,255,0.04);
    --rbp-bg-elev-2:   rgba(255,255,255,0.06);
    --rbp-line:        rgba(255,255,255,0.07);
    --rbp-line-strong: rgba(255,255,255,0.12);
    --rbp-text:        #E7ECFF;
    --rbp-text-dim:    #8A95B8;
    --rbp-text-mute:   #5A6488;
    --rbp-accent:      #3B82F6;
    --rbp-accent-glow: rgba(59,130,246,0.45);
    --rbp-success:     oklch(0.76 0.17 155);

    --rbp-grad-logo:    linear-gradient(135deg, #3B82F6, oklch(0.65 0.22 265));
    --rbp-grad-accent:  linear-gradient(135deg, #3B82F6, oklch(0.62 0.22 265));
    --rbp-grad-support: linear-gradient(135deg, oklch(0.35 0.15 250), oklch(0.3 0.16 255));
    --rbp-grad-discord: linear-gradient(135deg, oklch(0.5 0.18 275), oklch(0.42 0.2 280));

    --rbp-h-main-d: 88px;
    --rbp-h-main-m: 64px;

    position: relative;
    font-family: 'Chivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--rbp-text);
    -webkit-font-smoothing: antialiased;
}

/* Hide any Breakdance-rendered header once this module is active.
   Breakdance's HeaderBuilder renders under a handful of class patterns
   depending on the site's builder version — we cover every variant seen
   in the wild, plus a JS sweep in header.js for anything else that lives
   before .rbp-header-root. Paired with wp_add_inline_style() for belt-
   and-braces coverage if the main sheet fails to load. */
body.rbp-header-active .breakdance-header,
body.rbp-header-active .bde-header-builder,
body.rbp-header-active .breakdance .bde-header-builder,
body.rbp-header-active .breakdance-subheader,
body.rbp-header-active .bde-section[data-template-type="header"],
body.rbp-header-active section[data-template-type="header"],
body.rbp-header-active [data-bde-template="header"],
body.rbp-header-active [class*="breakdance-header"],
body.rbp-header-active [class*="bde-header-builder"],
body.rbp-header-active [data-rbp-hide-breakdance="1"] {
    display: none !important;
}

/* Reset common browser button defaults scoped to our header only. */
.rbp-header-root button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
    padding: 0;
}
.rbp-header-root a { text-decoration: none; color: inherit; }
.rbp-header-root *, .rbp-header-root *::before, .rbp-header-root *::after { box-sizing: border-box; }

/* ────────────────────────────────────────────────────────────────────────
   MAIN HEADER
   ──────────────────────────────────────────────────────────────────────── */

.rbp-main {
    position: fixed;
    top: 0;
    z-index: 40;
    background: var(--rbp-bg);
    border-bottom: 1px solid var(--rbp-line);
}

/* Default to desktop; mobile row is shown under 1024px via media query.
   Three zones: left + actions hug their content (auto), search column
   takes ALL remaining space so it scales with the viewport. The
   element itself is capped at 920px so the bar doesn't get absurdly
   wide on 4K monitors; below that cap it stretches edge-to-edge of
   its column, so the search visibly grows from ~480px on a 1280
   laptop to ~920px on a 1920 desktop. */
.rbp-main__desktop {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto;
    align-items: center;
    column-gap: clamp(14px, 1.4vw, 24px);
    padding: 18px 32px;
    height: var(--rbp-h-main-d);
}
.rbp-main__desktop > .rbp-main__left {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: max-content;
}
.rbp-main__desktop > .rbp-search {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 100%;
    min-width: 0;
    max-width: 920px;
    overflow: hidden;
    transform: none;
    margin: 0;
}
.rbp-main__desktop > .rbp-main__actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-width: max-content;
}

.rbp-main__mobile { display: none; }

/* Logo */
.rbp-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: #fff;
    flex-shrink: 0;
}
.rbp-logo__mark {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--rbp-grad-logo);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 6px 16px -6px var(--rbp-accent-glow);
    position: relative; overflow: hidden;
    flex-shrink: 0;
}
.rbp-logo__mark::after {
    content:''; position: absolute; inset: 1px; border-radius: 9px;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.3), transparent 55%);
    pointer-events: none;
}
.rbp-logo__mark svg { position: relative; z-index: 1; }
.rbp-logo__text {
    display: flex; flex-direction: column; line-height: 1;
}
.rbp-logo__text small {
    font-size: 9px; letter-spacing: 0.18em; color: var(--rbp-accent);
    font-weight: 600; text-transform: uppercase;
    margin-top: 2px;
}

/* Desktop game switcher */
.rbp-game-switcher {
    position: relative;
    z-index: 45;
    align-self: center;
    flex-shrink: 0;
}
.rbp-game-switcher__trigger {
    min-width: 174px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 17px;
    border-radius: 999px;
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.58);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 0 22px -13px var(--rbp-accent-glow);
}
.rbp-game-switcher__trigger::-webkit-details-marker { display: none; }
.rbp-game-switcher__trigger::marker { content: ''; }
.rbp-game-switcher__trigger:hover,
.rbp-game-switcher[open] .rbp-game-switcher__trigger {
    background: rgba(59,130,246,0.1);
    border-color: var(--rbp-accent);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 0 24px -12px var(--rbp-accent-glow);
}
.rbp-game-switcher__trigger-ico {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    color: var(--rbp-accent);
}
.rbp-game-switcher__trigger-ico .rbp-ico {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 18px;
}
.rbp-game-switcher__chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rbp-accent);
    transition: transform 0.15s ease;
}
.rbp-game-switcher[open] .rbp-game-switcher__chev { transform: rotate(180deg); }
.rbp-game-switcher__menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 270px;
    padding: 10px;
    display: grid;
    gap: 6px;
    border-radius: 16px;
    background: linear-gradient(180deg, #08182c, #061121);
    border: 1px solid rgba(59,130,246,0.7);
    box-shadow: 0 20px 48px -18px rgba(0,0,0,0.82), 0 0 34px -15px var(--rbp-accent-glow);
}
.rbp-game-switcher__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border-radius: 10px;
    color: var(--rbp-text);
    font-size: 13px;
    font-weight: 700;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rbp-game-switcher__item:hover,
.rbp-game-switcher__item:focus {
    background: rgba(59,130,246,0.18);
    border-color: rgba(59,130,246,0.52);
    color: #fff;
}
.rbp-game-switcher__item.is-active {
    background: rgba(59,130,246,0.18);
    border-color: rgba(59,130,246,0.55);
    color: #fff;
    box-shadow: inset 0 0 18px -14px var(--rbp-accent-glow);
}
.rbp-game-switcher__ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    color: var(--rbp-accent);
    background: rgba(59,130,246,0.14);
    border: 1px solid rgba(59,130,246,0.22);
}
/* Search — AWS ships its own form; we override it scoped under .rbp-search.
   Own magnifier SVG is drawn via ::before on the wrapper so the icon
   position is predictable regardless of AWS's internal markup. AWS's
   default submit button is hidden (pressing Enter still submits). */
/* WooPayments native multi-currency switcher, wrapped in header chrome. */
.rbp-currency-switcher {
    position: relative;
    z-index: 45;
    flex-shrink: 0;
}
.rbp-currency-switcher__trigger {
    width: 96px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--rbp-line-strong);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    list-style: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.rbp-currency-switcher__trigger::-webkit-details-marker { display: none; }
.rbp-currency-switcher__trigger::marker { content: ''; }
.rbp-currency-switcher__trigger:hover,
.rbp-currency-switcher[open] .rbp-currency-switcher__trigger {
    background: rgba(59,130,246,0.09);
    border-color: rgba(59,130,246,0.62);
    box-shadow: 0 0 22px -14px var(--rbp-accent-glow);
}
.rbp-currency-switcher__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rbp-accent);
}
.rbp-currency-switcher__ico .rbp-ico {
    width: 16px;
    height: 16px;
}
.rbp-currency-switcher__flag {
    font-size: 13px;
    line-height: 1;
}
.rbp-currency-switcher--desktop .rbp-currency-switcher__flag {
    display: inline-flex;
}
.rbp-currency-switcher__label {
    max-width: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rbp-currency-switcher__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: min(372px, calc(100vw - 32px));
    padding: 14px;
    display: grid;
    gap: 9px;
    border-radius: 16px;
    background: linear-gradient(180deg, #08182c, #061121);
    border: 1px solid rgba(59,130,246,0.72);
    box-shadow: 0 22px 52px -20px rgba(0,0,0,0.84), 0 0 34px -15px var(--rbp-accent-glow);
}
.rbp-currency-switcher--mobile .rbp-currency-switcher__panel {
    left: auto;
    right: 0;
}
.rbp-currency-switcher__title {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}
.rbp-currency-switcher__hint {
    color: var(--rbp-text-dim);
    font-size: 12px;
    line-height: 1.45;
}
.rbp-currency-switcher__native,
.rbp-currency-switcher__native form,
.rbp-currency-switcher__native p {
    display: grid;
    gap: 10px;
    margin: 0;
}
.rbp-currency-switcher__native label {
    color: var(--rbp-text-dim);
    font-size: 12px;
    font-weight: 700;
}
.rbp-currency-switcher__search {
    position: relative;
}
.rbp-currency-switcher__search .rbp-ico {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    color: var(--rbp-accent);
    pointer-events: none;
}
.rbp-currency-switcher__search input {
    width: 100%;
    height: 42px;
    padding: 0 12px 0 36px;
    border-radius: 12px;
    border: 1px solid rgba(111,167,255,0.24);
    background: rgba(255,255,255,0.045);
    color: var(--rbp-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.rbp-currency-switcher__search input::placeholder {
    color: var(--rbp-text-mute);
    opacity: 1;
}
.rbp-currency-switcher__search input:focus {
    border-color: rgba(59,130,246,0.76);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}
.rbp-currency-switcher__list {
    max-height: 248px;
    display: grid;
    gap: 6px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(111,167,255,0.65) rgba(255,255,255,0.06);
}
.rbp-currency-switcher__option {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: rgba(255,255,255,0.025);
    color: var(--rbp-text);
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.rbp-currency-switcher__option:hover,
.rbp-currency-switcher__option:focus-visible {
    outline: none;
    background: rgba(59,130,246,0.15);
    border-color: rgba(111,167,255,0.42);
    transform: translateX(1px);
}
.rbp-currency-switcher__option.is-active {
    background: rgba(59,130,246,0.22);
    border-color: rgba(111,167,255,0.58);
    box-shadow: inset 0 0 18px -14px var(--rbp-accent-glow);
}
.rbp-currency-switcher__option[hidden] {
    display: none;
}
.rbp-currency-switcher__option-flag {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 17px;
    line-height: 1;
}
.rbp-currency-switcher__option-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.rbp-currency-switcher__option-code {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}
.rbp-currency-switcher__option-name {
    color: var(--rbp-text-dim);
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rbp-search {
    position: relative;
    height: 46px;
    width: 100%;
}
.rbp-search::before {
    content: '';
    position: absolute;
    left: 14px; top: 50%;
    width: 16px; height: 16px;
    transform: translateY(-50%);
    background-color: var(--rbp-accent);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='7' cy='7' r='5' fill='none' stroke='black' stroke-width='1.5'/><path d='m11 11 3 3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='7' cy='7' r='5' fill='none' stroke='black' stroke-width='1.5'/><path d='m11 11 3 3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>") center/contain no-repeat;
    z-index: 2;
    pointer-events: none;
}

.rbp-search .aws-container,
.rbp-search .aws-search-form,
.rbp-search form {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
}

.rbp-search input[type="text"],
.rbp-search input[type="search"],
.rbp-search .aws-search-field {
    width: 100% !important;
    height: 46px !important;
    background: var(--rbp-bg-elev) !important;
    border: 1px solid var(--rbp-line) !important;
    border-radius: 12px !important;
    padding: 0 58px 0 40px !important;
    color: var(--rbp-text) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    line-height: 44px !important;
}
.rbp-search input::placeholder,
.rbp-search .aws-search-field::placeholder {
    color: var(--rbp-text-mute) !important;
    opacity: 1 !important;
}
.rbp-search input:focus,
.rbp-search .aws-search-field:focus {
    outline: none !important;
    border-color: var(--rbp-accent) !important;
    box-shadow: 0 0 0 3px var(--rbp-accent-glow) !important;
}

/* Hide AWS's default submit-button icon — our own magnifier on the left
   replaces its visual role; Enter still submits. */
.rbp-search .aws-search-form .aws-form-btn,
.rbp-search .aws-form-btn,
.rbp-search .aws-search-btn,
.rbp-search .aws-search-btn_icon {
    display: none !important;
}

.rbp-search .aws-search-result {
    border-radius: 10px !important;
    margin-top: 6px !important;
    border: 1px solid var(--rbp-line-strong) !important;
    background: var(--rbp-bg) !important;
    box-shadow: 0 12px 40px -12px rgba(0,0,0,0.6) !important;
    color: var(--rbp-text) !important;
}
.rbp-search__kbd {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--rbp-text-mute);
    font-family: 'Chivo', monospace;
    padding: 3px 6px;
    border-radius: 5px;
    border: 1px solid var(--rbp-line);
    background: rgba(255,255,255,0.02);
    pointer-events: none;
    line-height: 1;
    z-index: 2;
}

/* Actions (right side of desktop) */
.rbp-main__actions {
    display: flex; align-items: center; gap: 14px;
    flex-shrink: 0;
}
.rbp-help-menu {
    position: relative;
    z-index: 45;
    flex-shrink: 0;
}
.rbp-help-menu__trigger {
    height: 42px;
    min-width: 112px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 15px;
    border-radius: 10px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--rbp-line-strong);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    list-style: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.rbp-help-menu__trigger::-webkit-details-marker { display: none; }
.rbp-help-menu__trigger::marker { content: ''; }
.rbp-help-menu__trigger .rbp-ico { width: 16px; height: 16px; color: var(--rbp-accent); }
.rbp-help-menu__trigger:hover,
.rbp-help-menu[open] .rbp-help-menu__trigger {
    background: rgba(59,130,246,0.09);
    border-color: rgba(59,130,246,0.65);
    box-shadow: 0 0 22px -14px var(--rbp-accent-glow);
}
.rbp-help-menu__chev {
    display: inline-flex;
    color: var(--rbp-accent);
    transition: transform 0.15s ease;
}
.rbp-help-menu[open] .rbp-help-menu__chev { transform: rotate(180deg); }
.rbp-help-menu__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 260px;
    padding: 10px;
    display: grid;
    gap: 6px;
    border-radius: 16px;
    background: linear-gradient(180deg, #08182c, #061121);
    border: 1px solid rgba(59,130,246,0.72);
    box-shadow: 0 22px 52px -20px rgba(0,0,0,0.84), 0 0 34px -15px var(--rbp-accent-glow);
}
.rbp-help-menu__item {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    color: var(--rbp-text);
    font-size: 13px;
    font-weight: 700;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.rbp-help-menu__item:hover,
.rbp-help-menu__item:focus {
    background: rgba(59,130,246,0.18);
    border-color: rgba(59,130,246,0.48);
    color: #fff;
}
.rbp-help-menu__ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    color: var(--rbp-accent);
    background: rgba(59,130,246,0.15);
    border: 1px solid rgba(59,130,246,0.25);
}
.rbp-help-menu__ico .rbp-ico { width: 18px; height: 18px; }
/* Refer & Earn: a value item, tinted green so it reads as "earn credit" and stands out. */
.rbp-help-menu__item--accent .rbp-help-menu__ico { color: #34d399; background: rgba(52,211,153,0.14); border-color: rgba(52,211,153,0.32); }

/* The [rp_roblox_header_profile] shortcode renders its own pill with
   avatar, name, handle and outline. Passing through with a bare wrapper
   avoids the double outline + double background seen when we wrapped it.
   The shortcode's default 62px height was tuned for the old Breakdance
   header; override it down here so the pill fits our 64px row (≈36px of
   vertical content space after padding). */
.rbp-account-chip {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.rbp-account-chip > * {
    display: inline-flex;
    align-items: center;
}
.rbp-account-chip .rp-rb-headprofile {
    height: 40px;
    padding: 0 12px;
    gap: 8px;
}
.rbp-account-chip .rp-rb-headavatar {
    width: 28px; height: 28px; flex: 0 0 28px;
}
.rbp-account-chip .rp-rb-headdisplay { font-size: 13px; max-width: 140px; }
.rbp-account-chip .rp-rb-headuser    { font-size: 11px; }
.rbp-account-chip .rp-rb-headprofile::after {
    font-size: 16px;
    margin-left: 2px;
}

/* Verify-email notice: constructed like the other header glass controls
   (help/game/currency triggers) — 42px, 10px radius, dark glass, white-line
   border — so it belongs in the header. The warning is carried by a single
   contained amber accent (the envelope icon) rather than a flat amber pill. */
.rbp-email-verify-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 7px 0 10px;
    border: 1px solid var(--rbp-line-strong);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 24px -16px rgba(245, 196, 81, 0.7);
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.rbp-email-verify-chip:hover {
    border-color: rgba(245, 196, 81, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 26px -13px rgba(245, 196, 81, 0.85);
}

/* Amber envelope in a soft tinted tile — the one, contained pop of warning
   colour. Also the only visible marker once the label collapses on laptops. */
.rbp-email-verify-chip__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 7px;
    color: #f7c65a;
    background: rgba(245, 196, 81, 0.14);
    box-shadow: inset 0 0 0 1px rgba(245, 196, 81, 0.22);
}
.rbp-email-verify-chip__ico svg {
    width: 15px;
    height: 15px;
    animation: rbp-verify-pulse 2.8s ease-in-out infinite;
}
@keyframes rbp-verify-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
    .rbp-email-verify-chip__ico svg { animation: none; }
}

.rbp-email-verify-chip__text {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    color: #eaf0ff;
}

.rbp-email-verify-chip__form {
    display: inline-flex;
    margin: 0;
}

/* Resend: on-brand blue ghost action (secondary), tying the notice back to
   the site's primary accent without competing with the amber marker. */
.rbp-email-verify-chip button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(59, 130, 246, 0.32);
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.12);
    color: #cfe0ff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rbp-email-verify-chip button:hover,
.rbp-email-verify-chip button:focus-visible {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.55);
    color: #fff;
}

/* Same pass for the mobile drawer; there the pill sits alone in a column,
   so a bit more breathing room is fine. */
.rbp-mobile-drawer__account .rp-rb-headprofile {
    height: 48px;
    padding: 0 14px;
}
.rbp-mobile-drawer__account .rp-rb-headavatar {
    width: 32px; height: 32px; flex: 0 0 32px;
}
/* Keep the wallet + profile pills side by side. The cluster <span> has no layout
   of its own, so it flowed inline and wrapped (stacking the two pills) once the
   wallet widened to 2+ digits / a longer currency. Give it a nowrap flex row and
   let the profile pill shrink instead of the whole cluster wrapping. */
.rbp-mobile-drawer__account { align-items: center; }
.rbp-mobile-drawer__account .rp-rb-headcluster {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: nowrap; width: 100%; min-width: 0;
}
.rbp-mobile-drawer__account .rp-rb-headwallet { flex: 0 0 auto; }
.rbp-mobile-drawer__account .rp-rb-headprofile { flex: 1 1 auto; min-width: 0; }
.rbp-mobile-drawer__account .rp-rb-names { overflow: hidden; }
.rbp-mobile-drawer__account .rp-rb-names > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rbp-mobile-drawer > .rbp-email-verify-chip {
    width: 100%;
    height: auto;
    min-height: 52px;
    margin: -2px 0 4px;
    padding: 10px 10px 10px 12px;
    border-radius: 14px;
}
/* Icon + label group on the left, Resend pushed to the right edge. */
.rbp-mobile-drawer > .rbp-email-verify-chip .rbp-email-verify-chip__form {
    margin-left: auto;
}
.rbp-mobile-drawer > .rbp-email-verify-chip .rbp-email-verify-chip__text {
    display: inline-block;
}
.rbp-mobile-drawer > .rbp-email-verify-chip button {
    min-height: 34px;
    padding: 0 16px;
}

.rbp-mobile-drawer > .rbp-currency-switcher {
    width: 100%;
}

.rbp-mobile-drawer > .rbp-currency-switcher .rbp-currency-switcher__trigger {
    width: 100%;
    min-height: 46px;
    justify-content: space-between;
    border-radius: 14px;
    padding: 0 13px;
}

.rbp-mobile-drawer > .rbp-currency-switcher .rbp-currency-switcher__panel {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.rbp-account-auth { display: inline-flex; align-items: center; gap: 8px; }
.rbp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 13px; font-weight: 600;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.rbp-btn--ghost {
    background: transparent;
    border: 1px solid var(--rbp-line-strong);
    color: var(--rbp-text-dim);
}
.rbp-btn--ghost:hover { color: #fff; border-color: var(--rbp-accent); }
.rbp-btn--accent {
    background: var(--rbp-grad-accent);
    color: #fff;
    box-shadow: 0 6px 16px -6px var(--rbp-accent-glow);
}
.rbp-btn--accent:hover { box-shadow: 0 8px 20px -6px var(--rbp-accent-glow); }

.rbp-bell-wrap {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--rbp-bg-elev-2);
    border: 1px solid var(--rbp-line);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--rbp-text-dim);
}
.rbp-bell-wrap > * { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; }

/* ────────────────────────────────────────────────────────────────────────
   SUBHEADER (desktop)
   ──────────────────────────────────────────────────────────────────────── */

.rbp-sub {
    position: fixed;
    top: var(--rbp-h-main-d);
    z-index: 39;
    display: flex; align-items: center; gap: 24px;
    padding: 12px 28px;
    background: var(--rbp-bg);
    border-bottom: 1px solid var(--rbp-line);
}

.rbp-game-chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 14px 6px 6px;
    background: var(--rbp-bg-elev-2);
    border: 1px solid var(--rbp-line);
    border-radius: 999px;
    flex-shrink: 0;
}
.rbp-game-chip__ico {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a2345, #0a1026);
    display: flex; align-items: center; justify-content: center;
    color: var(--rbp-accent);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.rbp-game-chip__text {
    display: flex; flex-direction: column;
    line-height: 1.2;
    white-space: nowrap;
}
.rbp-game-chip__name { font-size: 13px; font-weight: 600; color: var(--rbp-text); }
.rbp-game-chip__sub {
    font-size: 10px; color: var(--rbp-text-mute); font-weight: 500;
    letter-spacing: 0.05em; text-transform: uppercase;
    margin-top: 2px;
}
@media (min-width: 1024px) {
    .rbp-game-switcher__ico svg,
    .rbp-game-chip__ico svg {
        display: none;
    }
    .rbp-game-switcher__ico,
    .rbp-game-chip__ico {
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        overflow: hidden;
    }
    .rbp-game-chip__ico {
        border-radius: 8px;
        background-color: #0a1730;
    }
    .rbp-game-switcher__item[href*="pet-simulator-99"] .rbp-game-switcher__ico,
    .rbp-sub[data-game="pet-simulator-99"] .rbp-game-chip__ico {
        background-image: url("/wp-content/uploads/2026/01/PS99Icon.webp");
    }
    .rbp-game-switcher__item[href*="steal-a-brainrot"] .rbp-game-switcher__ico,
    .rbp-sub[data-game="steal-a-brainrot"] .rbp-game-chip__ico {
        background-image: url("/wp-content/uploads/2025/11/StealABrainrot.webp");
    }
    .rbp-game-switcher__item[href*="murder-mystery-2"] .rbp-game-switcher__ico,
    .rbp-sub[data-game="murder-mystery-2"] .rbp-game-chip__ico {
        background-image: url("/wp-content/uploads/2026/01/MM2Icon.webp");
    }
    .rbp-game-switcher__item[href*="grow-a-garden-2"] .rbp-game-switcher__ico,
    .rbp-sub[data-game="grow-a-garden-2"] .rbp-game-chip__ico {
        background-image: url("/wp-content/uploads/2026/07/GrowAGarden2Icon.webp");
        /* This icon art is framed tighter than the others, so cover crops it into
           a "zoomed" look — contain shows the full icon. */
        background-size: contain;
    }
}
.rbp-cats {
    display: flex; align-items: center; gap: 2px;
    flex: 1;
    justify-content: center;
}
.rbp-cat {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    font-size: 13px; font-weight: 500;
    color: var(--rbp-text-dim);
    border-radius: 8px;
    position: relative;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.rbp-cat:hover { color: var(--rbp-text); }
.rbp-cat__ico {
    width: 18px; height: 18px;
    min-width: 18px;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 18px;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.rbp-cat__ico .rbp-ico {
    width: 18px;
    height: 18px;
    min-width: 18px;
    display: block;
    flex: 0 0 18px;
}
.rbp-cat:hover .rbp-cat__ico { opacity: 1; }

.rbp-cat.is-active { color: #fff; font-weight: 600; }
.rbp-cat.is-active .rbp-cat__ico { color: var(--rbp-accent); opacity: 1; }
.rbp-cat.is-active::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: -13px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--rbp-accent), transparent);
    box-shadow: 0 0 12px var(--rbp-accent-glow);
}

.rbp-sub__extras {
    display: flex; align-items: center; gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
}
.rbp-pill {
    height: 38px;
    min-height: 38px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 12px; font-weight: 800;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}
.rbp-pill:hover { filter: brightness(1.12); transform: translateY(-1px); }
.rbp-pill .rbp-ico { width: 16px; height: 16px; min-width: 16px; flex: 0 0 16px; display: block; }
.rbp-pill--support {
    background: linear-gradient(135deg, #1D4ED8, #2563EB);
    box-shadow: 0 10px 24px -12px rgba(37,99,235,0.95), 0 0 20px -15px rgba(96,165,250,0.9);
}
.rbp-pill--discord {
    background: linear-gradient(135deg, #4F46E5, #6D5DF6);
    box-shadow: 0 10px 24px -12px rgba(99,102,241,0.95), 0 0 20px -15px rgba(129,140,248,0.95);
}
.rbp-pill--discord .rbp-ico { width: 18px; height: 18px; min-width: 18px; flex: 0 0 18px; aspect-ratio: 1 / 1; display: block; }
.rbp-pill--discord svg { width: 18px !important; height: 18px !important; }
.rbp-pill__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--rbp-success);
    box-shadow: 0 0 8px var(--rbp-success);
    animation: rbp-pulse 2s infinite;
}
@keyframes rbp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.25); }
}

/* ────────────────────────────────────────────────────────────────────────
   SCROLLED STATE
   ──────────────────────────────────────────────────────────────────────── */

.rbp-header-root.rbp-is-scrolled .rbp-main {
    box-shadow: 0 6px 16px -10px rgba(0,0,0,0.6);
}
.rbp-header-root.rbp-is-scrolled .rbp-sub {
    box-shadow: 0 6px 16px -10px rgba(0,0,0,0.6);
}

/* Compact "Filter" control surfaced in the sticky game subheader during browse
   mode. Hidden on desktop (the in-page browse bar owns filtering there); shown
   on mobile so the control lives in the header, not engraved in the page. Opens
   the existing filter+sort drawer via a JS bridge in game-category-page.js. */
.rbp-sub__filter {
    display: none;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--rbp-line);
    background: rgba(255, 255, 255, 0.04);
    color: #e7ebf2;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: border-color .14s, background .14s, color .14s;
}
.rbp-sub__filter:hover,
.rbp-sub__filter.is-active { border-color: var(--rbp-accent, #3b82f6); color: #fff; }
.rbp-sub__filter-ico { width: 16px; height: 16px; flex: 0 0 16px; }
.rbp-sub__filter-count {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--rbp-accent, #3b82f6);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    font-style: normal;
    line-height: 1;
}

/* ────────────────────────────────────────────────────────────────────────
   MOBILE (<1024px)
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    .rbp-main__desktop { display: none; }

    .rbp-main__mobile {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        height: var(--rbp-h-main-m);
    }

    .rbp-menu-trigger,
    .rbp-search-trigger {
        width: 36px; height: 36px;
        border-radius: 10px;
        background: var(--rbp-bg-elev-2);
        border: 1px solid var(--rbp-line);
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--rbp-accent);
        flex-shrink: 0;
    }

    .rbp-logo--compact {
        flex: 1;
        font-size: 15px;
        gap: 8px;
        min-width: 0;
    }
    .rbp-logo--compact .rbp-logo__mark {
        width: 32px; height: 32px;
        border-radius: 9px;
    }
    .rbp-logo--compact .rbp-logo__text small { font-size: 8px; }

    .rbp-bell-wrap--compact {
        width: 36px; height: 36px;
    }

    /* Subheader — sticky at the mobile header height. */
    .rbp-main__mobile .rbp-currency-switcher {
        display: inline-flex;
        flex: 0 0 auto;
        z-index: 66;
    }

    .rbp-main__mobile .rbp-currency-switcher__trigger {
        width: 88px;
        height: 36px;
        padding-inline: 8px;
        gap: 5px;
        border-radius: 12px;
    }

    .rbp-main__mobile .rbp-currency-switcher__ico .rbp-ico {
        width: 15px;
        height: 15px;
    }

    .rbp-main__mobile .rbp-currency-switcher__flag {
        font-size: 12px;
    }

    .rbp-main__mobile .rbp-currency-switcher__label {
        max-width: 40px;
        font-size: 12px;
    }

    .rbp-main__mobile .rbp-currency-switcher__panel {
        position: fixed;
        top: calc(var(--rbp-fixed-main-h, 58px) + 8px);
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        width: auto;
        max-width: 420px;
        max-height: min(70svh, calc(100svh - var(--rbp-fixed-main-h, 58px) - 96px));
        margin-inline: auto;
        overflow: hidden;
    }

    .rbp-main__mobile .rbp-currency-switcher__list {
        max-height: min(268px, calc(100svh - var(--rbp-fixed-main-h, 58px) - 246px));
    }

    .rbp-sub {
        top: var(--rbp-h-main-m);
        padding: 10px 14px;
        gap: 12px;
        flex-wrap: wrap;
    }

    /* Row 1: the "Now browsing" chip + the pinned Filter button share the top
       row so Filter is ALWAYS visible (never scrolls away). The chip flexes to
       fill the row and shrinks/ellipsises to make room for Filter; when there
       is no Filter (landing mode) it spans the full row on its own. */
    .rbp-game-chip {
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
    }
    .rbp-game-chip__text {
        min-width: 0;
    }
    .rbp-game-chip__name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .rbp-sub__filter {
        display: inline-flex;
        order: 2;
        flex: 0 0 auto;
        align-self: stretch; /* match the "Now browsing" chip height on row 1 */
        height: auto;
        min-height: 40px;
        padding: 0 14px;
    }
    /* Row 2: full-width scrollable category chips (own horizontal scroll). */
    .rbp-cats {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        justify-content: flex-start;
        gap: 6px;
        padding-bottom: 2px;
    }
    .rbp-cats::-webkit-scrollbar { display: none; }

    .rbp-cat {
        flex-shrink: 0;
        border-radius: 999px;
        padding: 8px 12px;
        background: var(--rbp-bg-elev-2);
        border: 1px solid var(--rbp-line);
        font-size: 12px;
        font-weight: 600;
    }
    .rbp-cat__ico,
    .rbp-cat__ico .rbp-ico {
        width: 16px;
        height: 16px;
        min-width: 16px;
        flex-basis: 16px;
    }
    .rbp-cat.is-active::after { display: none; }
    .rbp-cat.is-active {
        background: linear-gradient(135deg, oklch(0.35 0.15 250), oklch(0.3 0.16 255));
        border-color: transparent;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 6px 16px -6px var(--rbp-accent-glow);
        color: #fff;
    }

    .rbp-sub__extras {
        display: none; /* extras are reachable via the subheader drawer; collapse to keep cats row clean */
    }
}

/* ────────────────────────────────────────────────────────────────────────
   MOBILE DRAWER + SEARCH OVERLAY
   Rendered for all breakpoints in the DOM but only shown when a trigger
   opens them (.is-open class added by JS). Overlay + drawer/search live
   inside .rbp-header-root so they inherit the font + tokens.
   ──────────────────────────────────────────────────────────────────────── */

.rbp-mobile-overlay {
    position: fixed; inset: 0;
    background: rgba(5, 14, 27, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 60;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease;
}
.rbp-mobile-overlay.is-open { opacity: 1; pointer-events: auto; }

.rbp-mobile-drawer {
    position: fixed;
    top: 0; left: 0;
    height: 100vh; height: 100svh;
    width: min(320px, 88vw);
    background: var(--rbp-bg);
    border-right: 1px solid var(--rbp-line);
    z-index: 61;
    padding: 16px 16px 32px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    display: flex; flex-direction: column; gap: 18px;
}
.rbp-mobile-drawer.is-open { transform: translateX(0); }
.rbp-mobile-drawer[hidden] { display: flex; } /* keep visible-to-JS even when hidden attr is set; transform hides it */

.rbp-mobile-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rbp-line);
}
.rbp-mobile-drawer__title {
    font-size: 14px; font-weight: 600; color: var(--rbp-text);
}
.rbp-mobile-drawer__close,
.rbp-mobile-search__close {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--rbp-bg-elev-2);
    border: 1px solid var(--rbp-line);
    color: var(--rbp-text-dim);
    font-size: 20px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}

.rbp-mobile-drawer__account,
.rbp-mobile-drawer__auth {
    display: flex; gap: 8px;
}
.rbp-mobile-drawer__auth .rbp-btn { flex: 1; }

.rbp-mobile-drawer__section {
    display: flex; flex-direction: column; gap: 4px;
}
.rbp-mobile-drawer__label {
    font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
    color: var(--rbp-text-mute); text-transform: uppercase;
    padding: 0 4px 6px;
}
.rbp-mobile-drawer__link {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px; font-weight: 500;
    color: var(--rbp-text);
    background: transparent;
    transition: background 0.15s ease;
}
.rbp-mobile-drawer__link:hover,
.rbp-mobile-drawer__link:focus { background: var(--rbp-bg-elev-2); }
.rbp-mobile-drawer__link-ico {
    width: 24px; height: 24px; border-radius: 6px;
    background: var(--rbp-bg-elev-2);
    border: 1px solid var(--rbp-line);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--rbp-accent);
    flex-shrink: 0;
}

.rbp-mobile-search {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: var(--rbp-bg);
    border-bottom: 1px solid var(--rbp-line);
    padding: 12px 14px;
    z-index: 62;
    transform: translateY(-100%);
    transition: transform 0.22s ease;
}
.rbp-mobile-search.is-open { transform: translateY(0); }
.rbp-mobile-search[hidden] { display: block; }

.rbp-mobile-search__inner {
    position: relative;
    display: flex; align-items: center; gap: 8px;
}
.rbp-mobile-search__inner .aws-container,
.rbp-mobile-search__inner .aws-search-form,
.rbp-mobile-search__inner form {
    flex: 1;
    position: relative;
    margin: 0;
}
.rbp-mobile-search__inner input[type="text"],
.rbp-mobile-search__inner input[type="search"],
.rbp-mobile-search__inner .aws-search-field {
    width: 100% !important;
    height: 42px !important;
    background: var(--rbp-bg-elev) !important;
    border: 1px solid var(--rbp-line) !important;
    border-radius: 10px !important;
    padding: 0 14px 0 14px !important;
    color: var(--rbp-text) !important;
    font-family: inherit !important;
    font-size: 14px !important;
}

/* Keep drawer + search overlay desktop-invisible — triggers are hidden
   there, but belt-and-braces in case the class leaks. */
@media (min-width: 1024px) {
    .rbp-mobile-overlay,
    .rbp-mobile-drawer,
    .rbp-mobile-search { display: none !important; }
}
/* PASS 3 mobile app shell polish. Desktop selectors above remain authoritative. */
.rbp-mobile-bottom { display: none; }

@media (max-width: 1023px) {
    body.rbp-header-active {
        /* Published so floating widgets (chat bubble, etc.) can lift clear
           of the mobile bottom nav. Folds in the nav's height, its bottom
           gap, and the iOS safe-area inset. */
        --rbp-bottom-nav-reserve: calc(82px + env(safe-area-inset-bottom));
        padding-bottom: var(--rbp-bottom-nav-reserve);
    }

    .rbp-main__mobile {
        height: 58px;
        padding: 7px 10px;
        gap: 7px;
    }

    .rbp-menu-trigger,
    .rbp-search-trigger,
    .rbp-bell-wrap--compact {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 10px;
        color: var(--rbp-accent);
        background: rgba(59,130,246,0.08);
        border-color: rgba(59,130,246,0.22);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
    }

    .rbp-menu-trigger .rbp-ico,
    .rbp-search-trigger .rbp-ico,
    .rbp-bell-wrap--compact svg {
        width: 17px;
        height: 17px;
    }

    .rbp-main__mobile .rbp-currency-switcher__trigger {
        width: 88px;
        height: 34px;
        padding-inline: 7px;
        background: rgba(59,130,246,0.08);
        border-color: rgba(59,130,246,0.22);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
    }

    .rbp-bell-wrap--compact,
    .rbp-bell-wrap--compact * {
        color: var(--rbp-accent) !important;
    }

    .rbp-logo--compact {
        flex: 1 1 auto;
        min-width: 0;
        gap: 7px;
        font-size: 14px;
        line-height: 1;
    }

    .rbp-logo--compact .rbp-logo__mark {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    .rbp-logo--compact .rbp-logo__mark svg {
        width: 18px;
        height: 18px;
    }

    .rbp-logo--compact .rbp-logo__text small {
        font-size: 7px;
        margin-top: 2px;
    }

    .rbp-sub {
        top: 58px;
    }

    .rbp-sub[data-game="pet-simulator-99"] .rbp-game-chip__ico,
    .rbp-sub[data-game="steal-a-brainrot"] .rbp-game-chip__ico,
    .rbp-sub[data-game="murder-mystery-2"] .rbp-game-chip__ico,
    .rbp-mobile-drawer__link[href*="pet-simulator-99"] .rbp-mobile-drawer__link-ico,
    .rbp-mobile-drawer__link[href*="steal-a-brainrot"] .rbp-mobile-drawer__link-ico,
    .rbp-mobile-drawer__link[href*="murder-mystery-2"] .rbp-mobile-drawer__link-ico {
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-color: rgba(59,130,246,0.36);
        overflow: hidden;
    }

    .rbp-sub[data-game="pet-simulator-99"] .rbp-game-chip__ico,
    .rbp-mobile-drawer__link[href*="pet-simulator-99"] .rbp-mobile-drawer__link-ico {
        background-image: url("/wp-content/uploads/2026/01/PS99Icon.webp");
    }

    .rbp-sub[data-game="steal-a-brainrot"] .rbp-game-chip__ico,
    .rbp-mobile-drawer__link[href*="steal-a-brainrot"] .rbp-mobile-drawer__link-ico {
        background-image: url("/wp-content/uploads/2025/11/StealABrainrot.webp");
    }

    .rbp-sub[data-game="murder-mystery-2"] .rbp-game-chip__ico,
    .rbp-mobile-drawer__link[href*="murder-mystery-2"] .rbp-mobile-drawer__link-ico {
        background-image: url("/wp-content/uploads/2026/01/MM2Icon.webp");
    }

    .rbp-sub[data-game="grow-a-garden-2"] .rbp-game-chip__ico,
    .rbp-mobile-drawer__link[href*="grow-a-garden-2"] .rbp-mobile-drawer__link-ico {
        background-image: url("/wp-content/uploads/2026/07/GrowAGarden2Icon.webp");
        background-size: contain; /* tighter-framed art — show the whole icon, not a crop */
    }

    .rbp-sub[data-game="pet-simulator-99"] .rbp-game-chip__ico svg,
    .rbp-sub[data-game="steal-a-brainrot"] .rbp-game-chip__ico svg,
    .rbp-sub[data-game="murder-mystery-2"] .rbp-game-chip__ico svg,
    .rbp-sub[data-game="grow-a-garden-2"] .rbp-game-chip__ico svg,
    .rbp-mobile-drawer__link[href*="pet-simulator-99"] .rbp-mobile-drawer__link-ico svg,
    .rbp-mobile-drawer__link[href*="steal-a-brainrot"] .rbp-mobile-drawer__link-ico svg,
    .rbp-mobile-drawer__link[href*="murder-mystery-2"] .rbp-mobile-drawer__link-ico svg,
    .rbp-mobile-drawer__link[href*="grow-a-garden-2"] .rbp-mobile-drawer__link-ico svg {
        display: none;
    }

    .rbp-mobile-overlay {
        background: rgba(3, 10, 22, 0.68);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
    }

    .rbp-mobile-drawer {
        width: min(340px, 90vw);
        padding: 14px 14px calc(96px + env(safe-area-inset-bottom));
        gap: 16px;
        background:
            radial-gradient(circle at 86% 3%, rgba(59,130,246,0.18), transparent 27%),
            linear-gradient(180deg, #061222 0%, #050e1b 100%);
        border-right-color: rgba(59,130,246,0.2);
        box-shadow: 24px 0 54px -28px rgba(0,0,0,0.95), 0 0 32px -22px var(--rbp-accent-glow);
    }

    .rbp-mobile-drawer__head {
        min-height: 42px;
        padding-bottom: 12px;
    }

    .rbp-mobile-drawer__title {
        font-size: 15px;
        font-weight: 800;
    }

    .rbp-mobile-drawer__close,
    .rbp-mobile-search__close {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        color: #fff;
        background: rgba(59,130,246,0.08);
        border-color: rgba(59,130,246,0.25);
    }

    .rbp-mobile-drawer__account,
    .rbp-mobile-drawer__auth {
        padding: 10px;
        border-radius: 14px;
        background: rgba(255,255,255,0.035);
        border: 1px solid rgba(255,255,255,0.08);
    }

    .rbp-mobile-drawer__section {
        gap: 6px;
    }

    .rbp-mobile-drawer__label {
        padding: 2px 4px 5px;
        color: var(--rbp-text-dim);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.12em;
    }

    .rbp-mobile-drawer__link {
        min-height: 44px;
        gap: 12px;
        padding: 8px 10px;
        border-radius: 12px;
        border: 1px solid transparent;
        font-size: 14px;
        font-weight: 750;
        color: #fff;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
    }

    .rbp-mobile-drawer__link:hover,
    .rbp-mobile-drawer__link:focus {
        background: rgba(59,130,246,0.13);
        border-color: rgba(59,130,246,0.35);
        transform: translateX(1px);
        outline: none;
    }

    .rbp-mobile-drawer__link-ico {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        border-radius: 9px;
        background: rgba(59,130,246,0.12);
        border-color: rgba(59,130,246,0.24);
        color: var(--rbp-accent);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
    }

    .rbp-mobile-drawer__link-ico .rbp-ico {
        width: 17px;
        height: 17px;
    }

    .rbp-mobile-search {
        padding: 10px 12px;
        background: linear-gradient(180deg, #061222, #050e1b);
        border-bottom-color: rgba(59,130,246,0.18);
        box-shadow: 0 18px 42px -28px rgba(0,0,0,0.95);
    }

    .rbp-mobile-search__inner input[type="text"],
    .rbp-mobile-search__inner input[type="search"],
    .rbp-mobile-search__inner .aws-search-field {
        height: 40px !important;
        border-radius: 11px !important;
        border-color: rgba(59,130,246,0.22) !important;
        background: rgba(255,255,255,0.045) !important;
    }

    .rbp-mobile-bottom {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        z-index: 55;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: end;
        min-height: 62px;
        padding: 7px 8px 8px;
        border-radius: 18px;
        background: rgba(8, 20, 39, 0.94);
        border: 1px solid rgba(59,130,246,0.2);
        box-shadow: 0 18px 46px -22px rgba(0,0,0,0.95), 0 0 28px -20px var(--rbp-accent-glow);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .rbp-mobile-bottom__item,
    .rbp-mobile-bottom__cart {
        appearance: none;
        border: 0;
        font-family: inherit;
        cursor: pointer;
        color: var(--rbp-text-dim);
        text-decoration: none;
    }

    .rbp-mobile-bottom__item {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        height: 50px;
        padding: 5px 2px;
        border-radius: 12px;
        background: transparent;
        font-size: 10px;
        font-weight: 700;
        transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    }

    .rbp-mobile-bottom__item .rbp-ico,
    .rbp-mobile-bottom__item svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    .rbp-mobile-bottom__item:hover,
    .rbp-mobile-bottom__item:focus,
    .rbp-mobile-bottom__item.is-active {
        color: var(--rbp-accent);
        background: rgba(59,130,246,0.08);
        outline: none;
    }

    .rbp-mobile-bottom__item:active,
    .rbp-mobile-bottom__cart:active {
        transform: translateY(1px) scale(0.98);
    }

    .rbp-mobile-bottom__cart {
        position: relative;
        justify-self: center;
        width: 58px;
        height: 58px;
        margin-top: -20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(59,130,246,0.08);
        border: 1px solid rgba(59,130,246,0.22);
        color: var(--rbp-text-dim);
        font-size: 0;
        font-weight: 800;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
        transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
    }

    .rbp-mobile-bottom__cart.has-items {
        background: linear-gradient(135deg, #3B82F6 0%, #2563EB 60%);
        border-color: rgba(255,255,255,0.18);
        color: #fff;
        box-shadow: 0 6px 16px rgba(59,130,246,0.28), 0 0 28px -14px var(--rbp-accent-glow);
    }

    .rbp-mobile-bottom__cart-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
    }

    .rbp-mobile-bottom__cart .rbp-ico,
    .rbp-mobile-bottom__cart svg {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
    }

    .rbp-mobile-bottom__cart-count {
        position: absolute;
        top: -2px;
        right: -2px;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: #EF4444;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        line-height: 20px;
        text-align: center;
        border: 2px solid rgba(8, 20, 39, 0.94);
        box-shadow: 0 4px 10px -4px rgba(239,68,68,0.75);
        pointer-events: none;
        transform: scale(1);
        transition: transform 0.15s ease, opacity 0.15s ease;
    }
    .rbp-mobile-bottom__cart-count[aria-hidden="true"] {
        opacity: 0;
        transform: scale(0.6);
    }

    /* CheckoutWC remains a fallback only. The RobloxPets sidecart owns cart
       triggers when it is available; the CFW floating bubble is hidden on
       mobile so it cannot compete with the bottom nav. */
    #cfw-side-cart-floating-button {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .rbp-mobile-bottom { display: none !important; }
}
/* FIXED HEADER STACK: reliable across transformed/overflow layout contexts. */
.rbp-header-root {
    --rbp-fixed-main-h: var(--rbp-h-main-d);
    --rbp-fixed-sub-h: 58px;
    height: calc(var(--rbp-fixed-main-h) + var(--rbp-fixed-sub-h));
    min-height: calc(var(--rbp-fixed-main-h) + var(--rbp-fixed-sub-h));
}

.rbp-header-root:not([data-page="game"]) {
    --rbp-fixed-sub-h: 0px;
}

body.rbp-header-active {
    scroll-padding-top: calc(var(--rbp-fixed-main-h, 88px) + var(--rbp-fixed-sub-h, 58px));
}

.rbp-main {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    background: rgba(5, 14, 27, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateZ(0);
}

.rbp-main::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: -140px;
    height: 140px;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(8, 19, 37, 0.98) 0%, rgba(5, 14, 27, 0.97) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.045) inset;
}

.rbp-main > * {
    position: relative;
    z-index: 1;
}

.rbp-sub {
    position: fixed;
    top: var(--rbp-fixed-main-h);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99;
    background: rgba(5, 14, 27, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateZ(0);
}

.rbp-mobile-overlay { z-index: 120; }
.rbp-mobile-drawer { z-index: 121; }
.rbp-mobile-search { z-index: 122; }
.rbp-mobile-bottom { z-index: 105; }

@media (max-width: 1023px) {
    .rbp-header-root {
        --rbp-fixed-main-h: 58px;
        --rbp-fixed-sub-h: 110px;
        height: calc(var(--rbp-fixed-main-h) + var(--rbp-fixed-sub-h));
        min-height: calc(var(--rbp-fixed-main-h) + var(--rbp-fixed-sub-h));
    }

    .rbp-header-root:not([data-page="game"]) {
        --rbp-fixed-sub-h: 0px;
    }

    body.rbp-header-active {
        scroll-padding-top: calc(var(--rbp-fixed-main-h, 58px) + var(--rbp-fixed-sub-h, 110px));
    }

    .rbp-main {
        top: 0;
        z-index: 100;
    }

    .rbp-sub {
        top: var(--rbp-fixed-main-h);
        z-index: 99;
    }

    .rbp-mobile-bottom { z-index: 105; }
}

/* ────────────────────────────────────────────────────────────────────────
   PASS 4 · PREMIUM POLISH
   Final visual refinement against design-handoff/design-reference.html
   (Refined · Elevated · Condensed). Appends only — earlier rules win on
   ties so source order here matters. No structural changes.
   ──────────────────────────────────────────────────────────────────────── */

/* Main header: subtle top-down gradient + hair-line inset highlight at the
   top and a soft bottom separator. Keeps the fixed/blurred stack intact. */
.rbp-header-root .rbp-main {
    background:
        linear-gradient(180deg, rgba(8, 19, 37, 0.96) 0%, rgba(5, 14, 27, 0.97) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 1px 0 rgba(0, 0, 0, 0.4),
        0 10px 28px -22px rgba(0, 0, 0, 0.9);
}

/* Subheader sits a half-step down in tone from the main row so the two
   layers read as distinct tiers rather than one flat band. */
.rbp-header-root .rbp-sub {
    background:
        linear-gradient(180deg, rgba(7, 15, 29, 0.96) 0%, rgba(5, 12, 24, 0.97) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 10px 24px -22px rgba(0, 0, 0, 0.85);
}
.rbp-header-root.rbp-is-scrolled .rbp-main {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 1px 0 rgba(0, 0, 0, 0.45),
        0 14px 32px -22px rgba(0, 0, 0, 0.95);
}
.rbp-header-root.rbp-is-scrolled .rbp-sub {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 14px 32px -22px rgba(0, 0, 0, 0.9);
}

/* Category navigation — stronger hierarchy between active / inactive.
   Inactive dimmed further, active lit with a two-stop underline glow that
   reads at the same weight as the Elevated mockup. */
.rbp-header-root .rbp-cat {
    color: var(--rbp-text-mute);
    font-weight: 600;
}
.rbp-header-root .rbp-cat .rbp-cat__ico { opacity: 0.55; }
.rbp-header-root .rbp-cat:hover {
    color: var(--rbp-text);
}
.rbp-header-root .rbp-cat:hover .rbp-cat__ico { opacity: 0.85; }
.rbp-header-root .rbp-cat.is-active {
    color: #fff;
    font-weight: 700;
}
.rbp-header-root .rbp-cat.is-active .rbp-cat__ico {
    color: var(--rbp-accent);
    opacity: 1;
    filter: drop-shadow(0 0 6px var(--rbp-accent-glow));
}
.rbp-header-root .rbp-cat.is-active::after {
    left: 12px;
    right: 12px;
    bottom: -13px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--rbp-accent) 50%, transparent);
    box-shadow:
        0 0 10px var(--rbp-accent-glow),
        0 0 22px -2px var(--rbp-accent-glow);
}

/* Game chip (subheader) — soft gradient + inset highlight to lift off the
   row slightly without breaking its pill shape. */
.rbp-header-root .rbp-game-chip {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 6px 16px -12px rgba(0, 0, 0, 0.7);
}
.rbp-header-root .rbp-game-chip__name { letter-spacing: -0.005em; }

/* Game switcher trigger — same premium glass as the rest, softer glow. */
.rbp-header-root .rbp-game-switcher__trigger {
    background:
        linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.06));
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 24px -14px var(--rbp-accent-glow);
}
.rbp-header-root .rbp-game-switcher__trigger:hover,
.rbp-header-root .rbp-game-switcher[open] .rbp-game-switcher__trigger {
    background:
        linear-gradient(180deg, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0.08));
    border-color: var(--rbp-accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 28px -10px var(--rbp-accent-glow);
}

/* Search bar — inset depth so the surface reads as pressed into the header
   rather than a flat input, and a wider two-stop focus halo. */
.rbp-header-root .rbp-search input[type="text"],
.rbp-header-root .rbp-search input[type="search"],
.rbp-header-root .rbp-search .aws-search-field {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.04)) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.015) !important;
}
.rbp-header-root .rbp-search input:focus,
.rbp-header-root .rbp-search .aws-search-field:focus {
    border-color: rgba(59, 130, 246, 0.7) !important;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.25),
        0 0 0 3px rgba(59, 130, 246, 0.22),
        0 0 22px -8px var(--rbp-accent-glow) !important;
}
.rbp-header-root .rbp-search__kbd {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Pill buttons (Support · Discord). Re-align to the design-ref tokens that
   were defined but not actually used on these pills, then add a top inset
   highlight + tighter shadow so they read as "premium product UI". */
.rbp-header-root .rbp-pill {
    height: 40px;
    min-height: 40px;
    padding: 0 18px;
    font-weight: 700;
    letter-spacing: 0.005em;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    transition: filter 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.rbp-header-root .rbp-pill:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.rbp-header-root .rbp-pill--support {
    background: var(--rbp-grad-support);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 8px 22px -12px rgba(37, 99, 235, 0.75),
        0 0 18px -14px rgba(96, 165, 250, 0.9);
}
.rbp-header-root .rbp-pill--discord {
    background: var(--rbp-grad-discord);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 8px 22px -12px rgba(99, 102, 241, 0.75),
        0 0 18px -14px rgba(129, 140, 248, 0.9);
}
.rbp-header-root .rbp-pill .rbp-ico {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}
/* Discord icon was slightly heavier than Support's chat glyph; align both
   to the same 16px slot so the button interiors balance. */
.rbp-header-root .rbp-pill--discord .rbp-ico {
    width: 16px;
    height: 16px;
    min-width: 16px;
    flex: 0 0 16px;
    margin-top: 0;
}
.rbp-header-root .rbp-pill--discord svg {
    width: 16px !important;
    height: 16px !important;
    display: block;
}

/* Right-side actions: tighten gap slightly so the zone reads as a single
   cluster instead of three independent chips. */
.rbp-header-root .rbp-main__actions { gap: 10px; }
.rbp-header-root .rbp-sub__extras { gap: 8px; }

/* Bell wrap — match the glass treatment of the other chrome elements. */
/* Compact desktop / laptop band. The header stays desktop-like here, but
   labels and decorative affordances yield before controls collide. */
@media (max-width: 1500px) and (min-width: 1024px) {
    .rbp-main__desktop {
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        column-gap: 12px;
        padding-inline: 24px;
    }

    .rbp-main__left {
        gap: 10px;
    }

    .rbp-game-switcher__trigger {
        min-width: 156px;
        padding-inline: 14px;
    }

    .rbp-currency-switcher__trigger {
        width: 88px;
        height: 40px;
        padding-inline: 9px;
    }

    .rbp-currency-switcher__label {
        display: inline-block;
        max-width: 38px;
    }

    .rbp-search__kbd {
        display: none;
    }

    .rbp-search input[type="text"],
    .rbp-search input[type="search"],
    .rbp-search .aws-search-field {
        padding-right: 18px !important;
    }

    .rbp-header-root .rbp-main__actions {
        gap: 8px;
    }

    .rbp-help-menu__trigger {
        min-width: 44px;
        width: 44px;
        padding-inline: 0;
        gap: 0;
    }

    .rbp-help-menu__trigger > span:not(.rbp-help-menu__chev):not(:first-child),
    .rbp-help-menu__chev {
        display: none;
    }

    .rbp-email-verify-chip {
        gap: 7px;
        height: 40px;
        padding: 0 6px 0 8px;
    }

    .rbp-email-verify-chip__ico {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    .rbp-email-verify-chip__text {
        max-width: 78px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rbp-email-verify-chip button {
        min-height: 28px;
        padding-inline: 10px;
    }

    .rbp-account-chip .rp-rb-headprofile {
        max-width: 210px;
        padding-inline: 10px;
    }

    .rbp-account-chip .rp-rb-headdisplay {
        max-width: 118px;
    }
}

@media (max-width: 1240px) and (min-width: 1024px) {
    .rbp-main__desktop {
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        padding-inline: 18px;
    }

    .rbp-main__left {
        gap: 8px;
    }

    .rbp-logo__mark {
        width: 34px;
        height: 34px;
    }

    .rbp-logo__text {
        font-size: 15px;
    }

    .rbp-game-switcher__trigger {
        min-width: 132px;
        height: 42px;
        padding-inline: 12px;
        font-size: 13px;
    }

    .rbp-game-switcher__label {
        max-width: 82px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rbp-currency-switcher__trigger {
        width: 82px;
        padding-inline: 8px;
    }

    .rbp-currency-switcher__label {
        display: inline-block;
        max-width: 34px;
    }

    .rbp-email-verify-chip__text,
    .rbp-account-chip .rp-rb-headuser {
        display: none;
    }

    .rbp-account-chip .rp-rb-headprofile {
        max-width: 170px;
    }
}

@media (max-width: 1120px) and (min-width: 1024px) {
    .rbp-main__desktop {
        column-gap: 8px;
        padding-inline: 12px;
    }

    .rbp-main__left {
        gap: 6px;
    }

    .rbp-logo__text {
        display: none;
    }

    .rbp-game-switcher__trigger {
        min-width: 126px;
        padding-inline: 10px;
    }

    .rbp-currency-switcher__trigger {
        width: 78px;
    }

    .rbp-main__desktop > .rbp-search {
        max-width: 150px;
    }

    .rbp-search input[type="text"],
    .rbp-search input[type="search"],
    .rbp-search .aws-search-field {
        padding-left: 36px !important;
        padding-right: 10px !important;
    }

    .rbp-search input::placeholder,
    .rbp-search .aws-search-field::placeholder {
        color: transparent !important;
    }

    .rbp-email-verify-chip {
        padding-inline: 8px;
    }

    .rbp-email-verify-chip button {
        padding-inline: 8px;
    }

    .rbp-account-chip .rp-rb-headprofile {
        max-width: 56px;
        padding-inline: 7px;
        gap: 0;
    }

    .rbp-account-chip .rp-rb-headdisplay,
    .rbp-account-chip .rp-rb-headuser,
    .rbp-account-chip .rp-rb-headprofile::after {
        display: none;
    }
}

.rbp-header-root .rbp-bell-wrap {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 6px 16px -12px rgba(0, 0, 0, 0.7);
}

/* ── Mobile polish ──────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    /* Mobile header tier — subtle vertical gradient mirrors desktop. */
    .rbp-header-root .rbp-main {
        background:
            linear-gradient(180deg, rgba(8, 19, 37, 0.96) 0%, rgba(5, 14, 27, 0.97) 100%);
    }

    /* Bottom nav shell — inner highlight at the top edge, tighter padding
       so icons sit clearly above the floor. */
    .rbp-mobile-bottom {
        background:
            linear-gradient(180deg, rgba(12, 24, 46, 0.96) 0%, rgba(6, 14, 28, 0.96) 100%);
        border-color: rgba(59, 130, 246, 0.24);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.055),
            0 22px 50px -24px rgba(0, 0, 0, 0.95),
            0 0 32px -22px var(--rbp-accent-glow);
    }

    /* Inactive nav items dimmer; active state gets a soft accent wash
       plus a dot under the icon for clear hierarchy. */
    .rbp-mobile-bottom__item {
        color: var(--rbp-text-mute);
    }
    .rbp-mobile-bottom__item .rbp-ico,
    .rbp-mobile-bottom__item svg {
        opacity: 0.78;
        transition: opacity 0.18s ease, filter 0.18s ease;
    }
    .rbp-mobile-bottom__item.is-active,
    .rbp-mobile-bottom__item:hover,
    .rbp-mobile-bottom__item:focus {
        color: var(--rbp-accent);
        background: rgba(59, 130, 246, 0.1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }
    .rbp-mobile-bottom__item.is-active .rbp-ico,
    .rbp-mobile-bottom__item.is-active svg {
        opacity: 1;
        filter: drop-shadow(0 0 6px var(--rbp-accent-glow));
    }

    /* Centre cart pops more cleanly. Empty state keeps the refined dark
       finish; has-items intensifies the gradient + ring + lift. */
    .rbp-mobile-bottom__cart {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
        border-color: rgba(59, 130, 246, 0.28);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 10px 22px -14px rgba(0, 0, 0, 0.9);
    }
    .rbp-mobile-bottom__cart.has-items {
        background: linear-gradient(135deg, #3B82F6 0%, #2563EB 60%);
        border-color: rgba(255, 255, 255, 0.22);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.28),
            0 12px 26px -10px rgba(59, 130, 246, 0.55),
            0 0 26px -10px var(--rbp-accent-glow);
    }
    .rbp-mobile-bottom__cart-count {
        border-color: rgba(6, 14, 28, 0.96);
        box-shadow: 0 4px 12px -4px rgba(239, 68, 68, 0.9);
    }

    /* Menu / search / bell triggers — unify the glass treatment. */
    .rbp-header-root .rbp-menu-trigger,
    .rbp-header-root .rbp-search-trigger,
    .rbp-header-root .rbp-bell-wrap--compact {
        background:
            linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.05));
        border-color: rgba(59, 130, 246, 0.3);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 6px 14px -10px rgba(0, 0, 0, 0.8);
    }

    /* Mobile category pills (horizontal scroll in subheader) — stronger
       active state aligned with desktop treatment. */
    .rbp-header-root .rbp-cat {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    }
    .rbp-header-root .rbp-cat.is-active {
        background: linear-gradient(135deg, oklch(0.38 0.16 250), oklch(0.32 0.17 255));
        border-color: rgba(59, 130, 246, 0.5);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            0 6px 16px -8px var(--rbp-accent-glow);
    }
    /* Desktop-style underline not used on mobile pills — disable it so the
       pill fill carries the active signal cleanly. */
    .rbp-header-root .rbp-cat.is-active::after { display: none; }
}

/* ────────────────────────────────────────────────────────────────────────
   PASS 5 · MICRO POLISH
   Emphasis tuning only — no structural changes. Weighting targets:
   deeper main-header panel feel, stronger search authority, brighter
   active tab, unified game-context rhythm, premium Support/Discord
   pills, and luxury dropdown elevation.
   ──────────────────────────────────────────────────────────────────────── */

/* Main header — richer panel feel. Tri-layer: deep base, subtle inner
   warm-up, hair-line top highlight, and a soft drop shadow beneath so
   the bar reads as a control surface sitting above the page. */
.rbp-header-root .rbp-main {
    background:
        linear-gradient(180deg, rgba(10, 22, 42, 0.88) 0%, rgba(6, 15, 30, 0.94) 58%, rgba(4, 11, 22, 0.96) 100%),
        radial-gradient(120% 180% at 50% -60%, rgba(59, 130, 246, 0.07), transparent 60%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45),
        0 14px 36px -22px rgba(0, 0, 0, 0.95);
}
.rbp-header-root .rbp-sub {
    background:
        linear-gradient(180deg, rgba(8, 18, 35, 0.94) 0%, rgba(5, 12, 24, 0.96) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 16px 36px -24px rgba(0, 0, 0, 0.95);
}
.rbp-header-root.rbp-is-scrolled .rbp-main {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 18px 42px -22px rgba(0, 0, 0, 1);
}

/* Search authority — deeper inset, calm idle halo, stronger focus glow.
   Size stays locked. */
.rbp-header-root .rbp-search input[type="text"],
.rbp-header-root .rbp-search input[type="search"],
.rbp-header-root .rbp-search .aws-search-field {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(255, 255, 255, 0.025) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 0 0 1px rgba(59, 130, 246, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.02) !important;
}
.rbp-header-root .rbp-search input:hover,
.rbp-header-root .rbp-search .aws-search-field:hover {
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 0 0 1px rgba(59, 130, 246, 0.08) !important;
}
.rbp-header-root .rbp-search input:focus,
.rbp-header-root .rbp-search .aws-search-field:focus {
    border-color: rgba(59, 130, 246, 0.75) !important;
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.32),
        0 0 0 3px rgba(59, 130, 246, 0.28),
        0 0 32px -8px var(--rbp-accent-glow),
        0 0 0 1px rgba(59, 130, 246, 0.4) !important;
}
.rbp-header-root .rbp-search::before { background-color: #6FA7FF; }

/* Active tab emphasis — same glyph sizes, richer glow + brighter text.
   Underline builds in three overlapping halos for depth without neon. */
.rbp-header-root .rbp-cat.is-active {
    color: #FFFFFF;
    text-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
}
.rbp-header-root .rbp-cat.is-active .rbp-cat__ico {
    color: #8FB8FF;
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.75));
}
.rbp-header-root .rbp-cat.is-active::after {
    left: 10px;
    right: 10px;
    bottom: -13px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent 4%, rgba(59, 130, 246, 0.55) 25%, #6FA7FF 50%, rgba(59, 130, 246, 0.55) 75%, transparent 96%);
    box-shadow:
        0 0 8px rgba(59, 130, 246, 0.85),
        0 0 18px rgba(59, 130, 246, 0.55),
        0 0 32px -4px rgba(59, 130, 246, 0.5);
}

/* Game context rhythm — Select Game trigger and Active Game chip now
   share the same glass: accent-tinted fill, matching inner highlight,
   and the same shape of shadow so the two read as one system. */
.rbp-header-root .rbp-game-switcher__trigger {
    min-height: 44px;
    background:
        linear-gradient(180deg, rgba(59, 130, 246, 0.16) 0%, rgba(59, 130, 246, 0.07) 100%);
    border-color: rgba(111, 167, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 0 24px -12px rgba(59, 130, 246, 0.55),
        0 6px 16px -14px rgba(0, 0, 0, 0.7);
}
.rbp-header-root .rbp-game-switcher__trigger:hover,
.rbp-header-root .rbp-game-switcher[open] .rbp-game-switcher__trigger {
    background:
        linear-gradient(180deg, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-color: #6FA7FF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 0 32px -8px rgba(59, 130, 246, 0.7),
        0 8px 20px -14px rgba(0, 0, 0, 0.75);
}
.rbp-header-root .rbp-game-chip {
    padding: 6px 16px 6px 6px;
    background:
        linear-gradient(180deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.04) 100%);
    border-color: rgba(111, 167, 255, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 0 20px -14px rgba(59, 130, 246, 0.5),
        0 6px 16px -14px rgba(0, 0, 0, 0.7);
}
.rbp-header-root .rbp-game-chip__ico {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 16px -6px rgba(59, 130, 246, 0.5);
}
.rbp-header-root .rbp-game-chip__name {
    color: #FFFFFF;
    font-weight: 700;
}
.rbp-header-root .rbp-game-chip__sub {
    color: #8FB8FF;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Support / Discord — premium pill finish. Richer contrast in the
   gradient, crisp top highlight, disciplined shadow that sits under the
   button (not leaking out). */
.rbp-header-root .rbp-pill {
    height: 42px;
    min-height: 42px;
    padding: 0 20px;
    font-weight: 750;
    border: 1px solid rgba(255, 255, 255, 0.1);
    letter-spacing: 0.01em;
}
.rbp-header-root .rbp-pill--support {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 40%),
        linear-gradient(135deg, oklch(0.42 0.16 250), oklch(0.3 0.16 258));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 10px 22px -14px rgba(37, 99, 235, 0.85),
        0 1px 0 rgba(255, 255, 255, 0.04);
}
.rbp-header-root .rbp-pill--support:hover {
    filter: brightness(1.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 14px 28px -12px rgba(37, 99, 235, 0.9),
        0 0 26px -12px rgba(96, 165, 250, 0.7);
}
.rbp-header-root .rbp-pill--discord {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 40%),
        linear-gradient(135deg, oklch(0.58 0.2 275), oklch(0.44 0.2 282));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 10px 22px -14px rgba(99, 102, 241, 0.85),
        0 1px 0 rgba(255, 255, 255, 0.04);
}
.rbp-header-root .rbp-pill--discord:hover {
    filter: brightness(1.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 14px 28px -12px rgba(99, 102, 241, 0.9),
        0 0 26px -12px rgba(129, 140, 248, 0.7);
}

/* Need help trigger — match the glass weight of the pills beside it. */
.rbp-header-root .rbp-help-menu__trigger {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 6px 16px -12px rgba(0, 0, 0, 0.7);
}
.rbp-header-root .rbp-help-menu__trigger:hover,
.rbp-header-root .rbp-help-menu[open] .rbp-help-menu__trigger {
    background:
        linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.04));
    border-color: rgba(111, 167, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 10px 26px -14px var(--rbp-accent-glow);
}

/* Dropdown luxury — game switcher menu + help menu panel share the same
   premium elevation. Richer base gradient, softer edge lighting, crisper
   hover rows, more generous interior rhythm. */
.rbp-header-root .rbp-game-switcher__menu,
.rbp-header-root .rbp-help-menu__panel {
    padding: 12px;
    background:
        radial-gradient(120% 140% at 50% -40%, rgba(59, 130, 246, 0.16), transparent 55%),
        linear-gradient(180deg, #0B1B34 0%, #061121 100%);
    border: 1px solid rgba(111, 167, 255, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 28px 64px -22px rgba(0, 0, 0, 0.88),
        0 0 42px -18px var(--rbp-accent-glow);
}
.rbp-header-root .rbp-game-switcher__menu { min-width: 278px; }
.rbp-header-root .rbp-help-menu__panel    { width: 272px; }

.rbp-header-root .rbp-game-switcher__item,
.rbp-header-root .rbp-help-menu__item {
    padding: 11px 13px;
    border-radius: 11px;
    border: 1px solid transparent;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}
.rbp-header-root .rbp-game-switcher__item:hover,
.rbp-header-root .rbp-game-switcher__item:focus-visible,
.rbp-header-root .rbp-help-menu__item:hover,
.rbp-header-root .rbp-help-menu__item:focus-visible {
    background:
        linear-gradient(180deg, rgba(59, 130, 246, 0.22), rgba(59, 130, 246, 0.1));
    border-color: rgba(111, 167, 255, 0.48);
    color: #FFFFFF;
    transform: translateX(1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 18px -14px rgba(59, 130, 246, 0.7);
}
.rbp-header-root .rbp-game-switcher__item.is-active {
    background:
        linear-gradient(180deg, rgba(59, 130, 246, 0.26), rgba(59, 130, 246, 0.12));
    border-color: rgba(111, 167, 255, 0.55);
    color: #FFFFFF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 24px -14px var(--rbp-accent-glow);
}
.rbp-header-root .rbp-game-switcher__ico,
.rbp-header-root .rbp-help-menu__ico {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 14px -6px rgba(59, 130, 246, 0.4);
}

/* ────────────────────────────────────────────────────────────────────────
   PASS 6 · FINAL CLEANUP
   Targeted fixes only — no structural changes, no redesign.
   Addresses: brand-mark image swap, search input top-edge seam, active
   category underline edge artifacts, AWS mobile submit-icon leak.
   ──────────────────────────────────────────────────────────────────────── */

/* Brand mark — now rendered as an <img> (HeaderIcon.webp) instead of the
   old smiley SVG. Fills the existing gradient tile so the premium glow +
   ::after highlight stay on top of the icon for the same visual weight. */
.rbp-header-root .rbp-logo__mark .rbp-logo__img {
    position: relative;
    z-index: 1;
    width: 78%;
    height: 78%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}
/* Compact (mobile) logo mark is smaller — let the image fill a touch more
   of it so the figure doesn't read as floating inside the tile. */
.rbp-header-root .rbp-logo--compact .rbp-logo__mark .rbp-logo__img {
    width: 82%;
    height: 82%;
}

/* Search input — remove the perceived dark seam at the top edge of the
   field. The previous pass used a heavy black→white gradient + strong
   inset shadow which read as a dark strip at the top of the bar. Soften
   both while keeping the "pressed into the surface" depth. */
.rbp-header-root .rbp-search input[type="text"],
.rbp-header-root .rbp-search input[type="search"],
.rbp-header-root .rbp-search .aws-search-field {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.045) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.015),
        0 1px 0 rgba(255, 255, 255, 0.02) !important;
}
.rbp-header-root .rbp-search input:hover,
.rbp-header-root .rbp-search .aws-search-field:hover {
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025),
        0 0 0 1px rgba(59, 130, 246, 0.08) !important;
}
.rbp-header-root .rbp-search input:focus,
.rbp-header-root .rbp-search .aws-search-field:focus {
    border-color: rgba(59, 130, 246, 0.75) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 3px rgba(59, 130, 246, 0.26),
        0 0 28px -10px var(--rbp-accent-glow),
        0 0 0 1px rgba(59, 130, 246, 0.35) !important;
}

/* Active category underline — previous gradient faded to `transparent`
   which sat on a dark header and read as black flecks on the far ends.
   Switch to an explicit accent-toned fade on both sides and use a
   single soft halo shadow so the glow stays centered without visible
   dark bookends. */
.rbp-header-root .rbp-cat.is-active::after {
    left: 14px;
    right: 14px;
    bottom: -13px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(59, 130, 246, 0) 0%,
        rgba(111, 167, 255, 0.9) 50%,
        rgba(59, 130, 246, 0) 100%
    );
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.55);
    filter: none;
}

/* Mobile search overlay — suppress the Advanced Woo Search submit icon
   that rendered as an unstyled white square next to the close button.
   Pressing Enter (or tapping a result) still submits, matching the
   desktop search behaviour which already hides the same element. */
.rbp-mobile-search__inner .aws-search-form .aws-form-btn,
.rbp-mobile-search__inner .aws-form-btn,
.rbp-mobile-search__inner .aws-search-btn,
.rbp-mobile-search__inner .aws-search-btn_icon,
.rbp-mobile-search__inner .aws-form-submit,
.rbp-mobile-search__inner button[type="submit"],
.rbp-mobile-search__inner input[type="submit"] {
    display: none !important;
}

/* Add a leading magnifier glyph at the left of the mobile search row so
   the field still reads as a search affordance without the plugin's
   native submit button. Mounted on .rbp-mobile-search__inner (the
   flex row that wraps both the AWS form and the close button) so it
   sits at a predictable x-offset regardless of the AWS internal markup. */
.rbp-mobile-search__inner { position: relative; }
.rbp-mobile-search__inner::before {
    content: '';
    position: absolute;
    left: 12px; top: 50%;
    width: 15px; height: 15px;
    transform: translateY(-50%);
    background-color: #6FA7FF;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='7' cy='7' r='5' fill='none' stroke='black' stroke-width='1.5'/><path d='m11 11 3 3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='7' cy='7' r='5' fill='none' stroke='black' stroke-width='1.5'/><path d='m11 11 3 3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>") center/contain no-repeat;
    z-index: 2;
    pointer-events: none;
}
.rbp-mobile-search__inner input[type="text"],
.rbp-mobile-search__inner input[type="search"],
.rbp-mobile-search__inner .aws-search-field {
    padding-left: 34px !important;
}

/* ────────────────────────────────────────────────────────────────────────
   PASS 7 · FINISHING TOUCHES
   Final polish: punched-out cart ring, centered scalable count badge,
   bare (glow-only) brand mark.
   ──────────────────────────────────────────────────────────────────────── */

/* Brand mark — drop the filled blue tile and let the icon breathe.
   The ::after highlight overlay, rounded fill, and hard inner shadow
   all came from the tile treatment; with the tile gone we just want a
   soft ambient glow around the icon itself. The image expands to fill
   the old tile footprint so the optical size roughly matches the
   previous boxed logo. */
.rbp-header-root .rbp-logo__mark {
    background: transparent !important;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.rbp-header-root .rbp-logo__mark::after { display: none; }
.rbp-header-root .rbp-logo__mark .rbp-logo__img {
    width: 100%;
    height: 100%;
    filter:
        drop-shadow(0 0 10px rgba(59, 130, 246, 0.32))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* ── Mobile bottom-nav cart · pass-7 polish ─────────────────────────── */
@media (max-width: 1023px) {
    /* Notched bottom nav — only the nav's outline gets the notch.
       The interior fill, backdrop blur, and drop shadow stay on the
       nav element itself so the background remains solid behind the
       cart (no "missing chunk" in the middle). The border is moved
       to a ::before pseudo so we can mask that one layer for the
       bump without affecting the fill or the nav items. */
    .rbp-header-root .rbp-mobile-bottom {
        --rbp-cart-bump-r: 37px;
        overflow: visible;
        isolation: isolate;
        /* Hide the original border — the notched version lives on
           ::before. Background, backdrop-filter, and box-shadow from
           the earlier passes stay intact so the nav surface is
           unbroken across the middle. */
        border-color: transparent !important;
    }
    .rbp-header-root .rbp-mobile-bottom::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        /* Border + top-edge highlight redrawn here so the mask only
           affects the outline, not the fill. Colour + weight match
           the original nav border (Pass 4 used 0.24 alpha). */
        border: 1px solid rgba(59, 130, 246, 0.28);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
        -webkit-mask:
            radial-gradient(
                circle var(--rbp-cart-bump-r) at 50% 0,
                transparent calc(var(--rbp-cart-bump-r) - 1px),
                #000 var(--rbp-cart-bump-r)
            );
        mask:
            radial-gradient(
                circle var(--rbp-cart-bump-r) at 50% 0,
                transparent calc(var(--rbp-cart-bump-r) - 1px),
                #000 var(--rbp-cart-bump-r)
            );
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        pointer-events: none;
    }

    /* Cart — lifted into the notch. align-self:end keeps the bottom
       of the button flush with the nav floor; margin-top lifts the
       visible circle so its centre lines up with the notch arc.
       z-index is bumped above the ::before notch layer so the
       button's own fill always wins over the masked-out region. */
    .rbp-header-root .rbp-mobile-bottom__cart {
        align-self: end;
        margin-top: -26px;
        overflow: visible;
        z-index: 2;
        /* Opaque solid fill wins against page content showing through
           the notch. background-color is set explicitly so it beats
           any earlier shorthand that may have cleared it. The
           gradient on top adds subtle vertical depth without
           touching the alpha. */
        background-color: #0A1528 !important;
        background-image:
            radial-gradient(
                circle at 50% 42%,
                rgba(255, 255, 255, 0.06),
                rgba(255, 255, 255, 0) 60%
            ),
            linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.18) 100%) !important;
    }

    /* has-items state restores the accent gradient on top of the
       forced dark fill from the base rule above. Higher specificity
       + !important ensures the blue wins when the cart is populated. */
    .rbp-header-root .rbp-mobile-bottom__cart.has-items {
        background-color: #2563EB !important;
        background-image:
            linear-gradient(135deg, #3B82F6 0%, #2563EB 60%) !important;
    }

    /* Ring — fills the notch arc and extends it around the full
       circle, so the nav border and cart ring read as one line
       flowing up, around, and back down. 1px weight + colour
       matched to the nav border keep the transition seamless. */
    .rbp-header-root .rbp-mobile-bottom__cart::before {
        content: '';
        position: absolute;
        inset: -7px;
        border-radius: 50%;
        border: 1px solid rgba(111, 167, 255, 0.32);
        pointer-events: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, inset 0.2s ease;
    }
    .rbp-header-root .rbp-mobile-bottom__cart.has-items::before {
        border-color: rgba(111, 167, 255, 0.6);
        box-shadow:
            0 0 16px -2px rgba(59, 130, 246, 0.55),
            inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    }
    .rbp-header-root .rbp-mobile-bottom__cart:hover::before,
    .rbp-header-root .rbp-mobile-bottom__cart:focus-visible::before {
        inset: -8px;
        border-color: rgba(111, 167, 255, 0.75);
    }

    /* Count badge — true centering + comfortable scaling for 2- and
       3-digit values. inline-flex + center alignment removes the old
       line-height + text-align pairing, which only worked reliably at
       one digit. Font tightens slightly so "999" still fits without
       breaking the pill shape. */
    .rbp-header-root .rbp-mobile-bottom__cart-count {
        top: -3px;
        right: -3px;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        font-size: 11px;
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
        text-align: center;
    }
    /* Tighten further once the label hits two+ digits so the pill stays
       neat; CSS can't count characters, but min-width already forces a
       wider pill once the content overflows a single digit, and the
       padding keeps the gutters balanced at any width. */
    .rbp-header-root .rbp-mobile-bottom__cart-count:not([aria-hidden="true"]) {
        transform: scale(1);
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * RobloxPets Tickets v2 — page-scoped Support Center offset
 *
 * Scope:  body:has(#rpt2-root) — only fires on pages that actually
 *         render the v2 Support Center root (full-page route via
 *         render-v2.php :: rp_ticket_v2_render_fullpage AND the
 *         shortcode-on-theme-page render path). No other route sees
 *         these rules.
 *
 * Problem: .rbp-header-root reserves
 *          height: calc(var(--rbp-fixed-main-h) + var(--rbp-fixed-sub-h))
 *          (88px on desktop, 58px mobile) so theme content doesn't
 *          slide under the fixed .rbp-main bar. On /support-v2/ the
 *          page-builder/theme wrappers between .rbp-header-root and
 *          <main> also inject their own top padding/margin, and the
 *          dashboard then renders far below the visible header with
 *          a noticeable empty band above the "Support Center" title.
 *
 * Fix:    Move the fixed-header reservation onto <body> for v2 pages
 *         only (preserves the visual offset for the fixed .rbp-main
 *         bar — it's position:fixed and unaffected) and collapse the
 *         layout-only wrapper + any inherited top padding on the
 *         page-builder <main> wrapper. Net effect: the dashboard now
 *         sits directly under the fixed header with normal breathing
 *         room from .rpt2-subheader's own padding.
 *
 * Why not patch tickets-v2.css: the spacer originates in this module
 * (header.css :: 1230–1239), so the override belongs alongside the
 * source rule. Keeps the dashboard layer (tickets-v2.css) free of
 * header-system overrides and lets future header-spacer changes in
 * this file see the v2 carve-out in one place.
 * ──────────────────────────────────────────────────────────────── */
body:has(#rpt2-root) {
    padding-top: 0;
}
body:has(#rpt2-root) .rbp-header-root {
    height: var(--rbp-fixed-main-h, var(--rbp-h-main-d, 88px));
    min-height: var(--rbp-fixed-main-h, var(--rbp-h-main-d, 88px));
}
body:has(#rpt2-root) > main,
body:has(#rpt2-root) #rpt2-main {
    margin-top: 0;
    padding-top: 0;
}

@media (max-width: 1023px) {
    body:has(#rpt2-root) {
        padding-top: 0;
    }
}

@media (max-width: 359px) {
    .rbp-main__mobile {
        gap: 6px;
        padding-inline: 8px;
    }

    .rbp-logo--compact {
        flex: 1 1 auto;
    }

    .rbp-logo--compact .rbp-logo__text {
        display: none;
    }

    .rbp-main__mobile .rbp-currency-switcher__trigger {
        width: 86px;
    }

    .rbp-main__mobile .rbp-currency-switcher__label {
        max-width: 38px;
    }
}

/* Fixed header offset ownership
   The header itself is fixed/translucent, so an empty in-flow
   .rbp-header-root spacer reads as a dark bar before the page content.
   Collapse that spacer and let the first real content surface carry the
   header-stack offset; its own background then fills the space naturally. */
.rbp-header-root {
    height: 0 !important;
    min-height: 0 !important;
}

.rbp-header-root + .bde-section,
.rbp-header-root + .rpt2-app {
    padding-top: calc(var(--rbp-fixed-main-h, var(--rbp-h-main-d, 88px)) + var(--rbp-fixed-sub-h, 0px)) !important;
}

.rbp-header-root + .rbp-htc {
    padding-top: calc(var(--rbp-fixed-main-h, var(--rbp-h-main-d, 88px)) + var(--rbp-fixed-sub-h, 0px) + clamp(18px, 2.6vw, 40px)) !important;
}

.rbp-header-root + .rp-order-track {
    padding-top: calc(var(--rbp-fixed-main-h, var(--rbp-h-main-d, 88px)) + var(--rbp-fixed-sub-h, 0px) + clamp(24px, 3.3vw, 52px)) !important;
}

.rbp-header-root + .rp-delivery-portal {
    padding-top: calc(var(--rbp-fixed-main-h, var(--rbp-h-main-d, 88px)) + var(--rbp-fixed-sub-h, 0px) + clamp(24px, 3.4vw, 52px)) !important;
}

.rbp-header-root + .rbp-wheel-spin-template {
    padding-top: calc(var(--rbp-fixed-main-h, var(--rbp-h-main-d, 88px)) + var(--rbp-fixed-sub-h, 0px) + 28px) !important;
}

@media (max-width: 760px) {
    .rbp-header-root + .rbp-htc {
        padding-top: calc(var(--rbp-fixed-main-h, var(--rbp-h-main-m, 64px)) + var(--rbp-fixed-sub-h, 0px) + 14px) !important;
    }

    .rbp-header-root + .rp-order-track {
        padding-top: calc(var(--rbp-fixed-main-h, var(--rbp-h-main-m, 64px)) + var(--rbp-fixed-sub-h, 0px) + 16px) !important;
    }

    .rbp-header-root + .rp-delivery-portal {
        padding-top: calc(var(--rbp-fixed-main-h, var(--rbp-h-main-m, 64px)) + var(--rbp-fixed-sub-h, 0px) + 16px) !important;
    }

    .rbp-header-root + .rbp-wheel-spin-template {
        padding-top: calc(var(--rbp-fixed-main-h, var(--rbp-h-main-m, 64px)) + var(--rbp-fixed-sub-h, 0px) + 18px) !important;
    }
}

/* ────────────────────────────────────────────────────────────────────────
   PASS 8 · A11Y + UX REFINEMENT
   Targeted additions: skip link, reduced-motion guard, cart pop,
   currency flag emoji rendering, details panel fade, microcopy width
   clamps. No structural changes.
   ──────────────────────────────────────────────────────────────────────── */

/* Currency flags now render as real flag images (flag-icons sprite, .fi span)
   instead of emoji — Windows/Chromium can't render regional-indicator flag emoji
   and fell back to "GB"/"US" letters. Size + crisp them here; the inline globe
   fallback (.rbp-flag--globe) covers any currency without a mapped country. */
.fi.rbp-flag {
    width: 20px;
    height: 15px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    background-size: cover;
    background-position: center;
    line-height: 1;
}
.rbp-flag--globe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.65);
}
.rbp-flag--globe svg { width: 16px; height: 16px; }

/* Details panels (game switcher, help, currency) - fade their bodies in
   when [open]. <details> doesn't animate its own toggle, but adding a
   keyframe on the content fixes the visual snap without breaking the
   native disclosure semantics. */
@keyframes rbp-details-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.rbp-header-root .rbp-game-switcher[open] .rbp-game-switcher__menu,
.rbp-header-root .rbp-help-menu[open] .rbp-help-menu__panel,
.rbp-header-root .rbp-currency-switcher[open] .rbp-currency-switcher__panel {
    animation: rbp-details-in 0.16s ease-out both;
    transform-origin: top left;
}
.rbp-header-root .rbp-help-menu[open] .rbp-help-menu__panel,
.rbp-header-root .rbp-currency-switcher--mobile[open] .rbp-currency-switcher__panel {
    transform-origin: top right;
}

/* Help menu width safety - on narrow desktop laptops the fixed 272px
   panel could clip the right edge if the trigger sits very close to
   it. Cap to viewport with a small gutter. */
.rbp-header-root .rbp-help-menu__panel {
    width: min(272px, calc(100vw - 32px));
}

/* Cart count pop animation (triggered by JS class toggle in
   setupCartCountSync) - brief overshoot scale so an add-to-cart elsewhere
   on the page registers visibly in the bottom nav. */
@keyframes rbp-cart-count-pop {
    0%   { transform: scale(1);   }
    35%  { transform: scale(1.32); }
    70%  { transform: scale(0.94); }
    100% { transform: scale(1);   }
}
.rbp-header-root .rbp-mobile-bottom__cart-count.rbp-cart-count-pop {
    animation: rbp-cart-count-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Mobile: subheader category pills reward hover with a slight border
   glow. The desktop active state is a glowing underline; the mobile
   pill gets its own pressed-look hover so the row doesn't feel inert
   under touch hold. */
@media (max-width: 1023px) {
    .rbp-header-root .rbp-cat:hover,
    .rbp-header-root .rbp-cat:focus-visible {
        background: rgba(59, 130, 246, 0.1);
        border-color: rgba(59, 130, 246, 0.36);
        outline: none;
    }
}

/* ────────────────────────────────────────────────────────────────────────
   PASS 9 · LAPTOP-BAND SEARCH SCALING
   The default grid (above) lets search absorb leftover space, so the
   bar already grows on wide screens and shrinks on narrow ones. These
   bands relax label widths progressively as the viewport tightens, so
   the chrome doesn't push search below comfortable widths when the
   email-verify chip is showing on a logged-in laptop.
   ──────────────────────────────────────────────────────────────────────── */

/* Wide-laptop band (~1500-1640): typical 15"/16" laptops at default
   scaling. Pre-emptively trim the email-verify chip text and the
   account @handle; the existing 1500 breakpoint already drops "Need
   help?" to icon-only, and these two labels are the next biggest
   space sinks once the verify chip is shown. */
@media (max-width: 1640px) and (min-width: 1241px) {
    .rbp-header-root .rbp-email-verify-chip__text {
        display: none;
    }
    .rbp-header-root .rbp-account-chip .rp-rb-headuser {
        display: none;
    }
    .rbp-header-root .rbp-account-chip .rp-rb-headprofile {
        max-width: 196px;
        padding-inline: 10px;
    }
    .rbp-header-root .rbp-account-chip .rp-rb-headdisplay {
        max-width: 118px;
    }
    .rbp-header-root .rbp-game-switcher__label {
        max-width: 102px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Mid-laptop band (~1240-1400): chrome is already trim from the band
   above and the existing 1500 breakpoint; shave the game-switcher,
   currency switcher, and account chip down further so search keeps
   ~330-380px on a typical 1366 laptop. */
@media (max-width: 1400px) and (min-width: 1241px) {
    .rbp-header-root .rbp-game-switcher__trigger {
        min-width: 140px;
    }
    .rbp-header-root .rbp-currency-switcher__trigger {
        width: 84px;
    }
    .rbp-header-root .rbp-account-chip .rp-rb-headprofile {
        max-width: 172px;
    }
    .rbp-header-root .rbp-main__actions {
        gap: 7px;
    }
    .rbp-header-root .rbp-main__left {
        gap: 9px;
    }
}

/* Reduced-motion: disable the pulse, chevron rotations, hover lifts and
   any keyframe-driven decoration. We keep functional state transitions
   (open/close) but strip the eye-candy. */
@media (prefers-reduced-motion: reduce) {
    .rbp-header-root *,
    .rbp-header-root *::before,
    .rbp-header-root *::after,
    .rbp-skip-link {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .rbp-header-root .rbp-pill__dot { animation: none !important; }
    .rbp-header-root .rbp-game-switcher[open] .rbp-game-switcher__chev,
    .rbp-header-root .rbp-help-menu[open] .rbp-help-menu__chev {
        transform: none !important;
    }
    .rbp-header-root .rbp-pill:hover,
    .rbp-header-root .rbp-btn:hover,
    .rbp-header-root .rbp-cat:hover,
    .rbp-header-root .rbp-mobile-drawer__link:hover,
    .rbp-header-root .rbp-mobile-bottom__item:active,
    .rbp-header-root .rbp-mobile-bottom__cart:active {
        transform: none !important;
    }
}

/* ────────────────────────────────────────────────────────────────────────
   PASS 10 · BRAND MARK ENLARGEMENT
   icons.php now ships an inline SVG smiley (vector, fills its viewBox
   edge-to-edge - no transparent canvas padding around the glyph) so we
   can size the mark up to ~2x the original 38px without the visible
   icon reading small inside it. Pass 7's overflow: visible + drop-
   shadow halo + transparent tile still apply; align-items: center on
   .rbp-logo keeps the mark vertically aligned with ROBLOX/PETS.

   When a tightly-cropped brand PNG becomes available, swapping the
   logo_face icon back to the <img> markup will render at these same
   mark sizes without any further changes here.
   ──────────────────────────────────────────────────────────────────── */
.rbp-header-root .rbp-logo__mark {
    width: 46px;
    height: 46px;
}

@media (max-width: 1240px) and (min-width: 1024px) {
    .rbp-header-root .rbp-logo__mark {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 1023px) {
    .rbp-header-root .rbp-logo--compact .rbp-logo__mark {
        width: 38px;
        height: 38px;
    }
}

/* ────────────────────────────────────────────────────────────────────────
   PASS 11 · EVOLVE TOWARD NEWER DESIGN LANGUAGE
   Aligns the header system with the newer RobloxPets visual standard set
   by Support V2, the Account Dashboard, How-To-Claim, Weekly Giveaway,
   and the revamped Login. Goals: calmer blue tints, unified glass on
   chrome controls, refined dropdown panels (less neon, more cohesion),
   subtler subheader pills, and a more grouped/premium mobile drawer.
   No structural rewrites - markup gains only small additive labels for
   help-menu grouping. All earlier passes remain authoritative on ties.
   ──────────────────────────────────────────────────────────────────── */

.rbp-header-root {
    --rbp-line-blue:        rgba(123, 166, 255, .14);
    --rbp-line-blue-strong: rgba(123, 166, 255, .26);
    --rbp-glass-bg:
        radial-gradient(circle at 100% 0%, rgba(67, 136, 255, .06), transparent 55%),
        linear-gradient(180deg, rgba(13, 22, 44, .82), rgba(8, 13, 27, .78));
    --rbp-panel-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        0 14px 36px -10px rgba(0, 0, 0, .58);
}

/* ── Top-bar surface: calmer blue-tinted hairline + softer drop ── */
.rbp-header-root .rbp-main {
    border-bottom: 1px solid rgba(123, 166, 255, .08);
}
.rbp-header-root .rbp-sub {
    border-bottom: 1px solid rgba(123, 166, 255, .07);
}

/* ── Chrome controls: unified glass on help / currency / bell ── */
.rbp-header-root .rbp-help-menu__trigger,
.rbp-header-root .rbp-currency-switcher__trigger,
.rbp-header-root .rbp-bell-wrap {
    background:
        linear-gradient(180deg, rgba(123, 166, 255, .07), rgba(123, 166, 255, .025));
    border-color: var(--rbp-line-blue);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        0 6px 14px -10px rgba(0, 0, 0, .55);
}
.rbp-header-root .rbp-help-menu__trigger:hover,
.rbp-header-root .rbp-currency-switcher__trigger:hover,
.rbp-header-root .rbp-help-menu[open] .rbp-help-menu__trigger,
.rbp-header-root .rbp-currency-switcher[open] .rbp-currency-switcher__trigger {
    background:
        linear-gradient(180deg, rgba(67, 136, 255, .12), rgba(67, 136, 255, .04));
    border-color: var(--rbp-line-blue-strong);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 10px 22px -14px rgba(59, 130, 246, .42);
}

/* ── Game switcher trigger: stays the primary control, but the tint
      and glow drop a step so it doesn't outshout everything else. ── */
.rbp-header-root .rbp-game-switcher__trigger {
    background:
        linear-gradient(180deg, rgba(67, 136, 255, .14) 0%, rgba(67, 136, 255, .055) 100%);
    border-color: rgba(123, 166, 255, .45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        inset 0 -1px 0 rgba(0, 0, 0, .24),
        0 0 22px -16px rgba(59, 130, 246, .45),
        0 6px 14px -14px rgba(0, 0, 0, .6);
}
.rbp-header-root .rbp-game-switcher__trigger:hover,
.rbp-header-root .rbp-game-switcher[open] .rbp-game-switcher__trigger {
    background:
        linear-gradient(180deg, rgba(67, 136, 255, .18) 0%, rgba(67, 136, 255, .08) 100%);
    border-color: #6FA7FF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .09),
        inset 0 -1px 0 rgba(0, 0, 0, .26),
        0 0 28px -12px rgba(59, 130, 246, .55),
        0 8px 18px -14px rgba(0, 0, 0, .7);
}

/* ── Dropdown panels: align with Account Dashboard / Support V2 glass.
      Calmer blue-tinted border, radial corner glow, softer drop shadow,
      and a touch more interior padding so rows breathe. ── */
.rbp-header-root .rbp-game-switcher__menu,
.rbp-header-root .rbp-help-menu__panel,
.rbp-header-root .rbp-currency-switcher__panel {
    border-radius: 16px;
    border: 1px solid var(--rbp-line-blue-strong);
    background:
        radial-gradient(circle at 100% 0%, rgba(67, 136, 255, .12), transparent 55%),
        linear-gradient(180deg, rgba(13, 22, 44, .98), rgba(7, 13, 27, .98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 24px 56px -22px rgba(0, 0, 0, .82);
}

.rbp-header-root .rbp-game-switcher__item,
.rbp-header-root .rbp-help-menu__item {
    background: rgba(11, 20, 40, .35);
}
.rbp-header-root .rbp-game-switcher__item:hover,
.rbp-header-root .rbp-game-switcher__item:focus-visible,
.rbp-header-root .rbp-help-menu__item:hover,
.rbp-header-root .rbp-help-menu__item:focus-visible {
    background:
        linear-gradient(180deg, rgba(67, 136, 255, .16), rgba(67, 136, 255, .06));
    border-color: rgba(123, 166, 255, .4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
}

/* Game switcher: active item gets a tiny check-rail on the left so the
   "now browsing" affordance reads even with the dropdown closed. */
.rbp-header-root .rbp-game-switcher__item {
    position: relative;
    padding-left: 16px;
}
.rbp-header-root .rbp-game-switcher__item.is-active {
    background:
        linear-gradient(180deg, rgba(67, 136, 255, .2), rgba(67, 136, 255, .08));
    border-color: rgba(123, 166, 255, .5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 0 22px -14px rgba(59, 130, 246, .55);
}
.rbp-header-root .rbp-game-switcher__item.is-active::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(180deg, #60A5FA, #3B82F6);
    box-shadow: 0 0 10px rgba(59, 130, 246, .55);
}

/* Help menu: group eyebrow label between sections, mirroring the
   Account Dashboard sidebar 'Quick actions' divider. */
.rbp-header-root .rbp-help-menu__group-label {
    display: block;
    padding: 4px 10px 6px;
    color: #6f80a4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.rbp-header-root .rbp-help-menu__group-label--sep {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(123, 166, 255, .08);
}

/* ── Currency switcher panel: refined search row + option rhythm ── */
.rbp-header-root .rbp-currency-switcher__search input {
    border-color: var(--rbp-line-blue);
    background: rgba(8, 16, 32, .52);
}
.rbp-header-root .rbp-currency-switcher__search input:focus {
    border-color: rgba(92, 200, 255, .55);
    box-shadow: 0 0 0 3px rgba(92, 200, 255, .14);
}
.rbp-header-root .rbp-currency-switcher__option {
    background: rgba(11, 20, 40, .42);
    border: 1px solid transparent;
}
.rbp-header-root .rbp-currency-switcher__option:hover,
.rbp-header-root .rbp-currency-switcher__option:focus-visible {
    background:
        linear-gradient(180deg, rgba(67, 136, 255, .16), rgba(67, 136, 255, .05));
    border-color: rgba(123, 166, 255, .4);
}
.rbp-header-root .rbp-currency-switcher__option.is-active {
    background:
        linear-gradient(180deg, rgba(67, 136, 255, .22), rgba(67, 136, 255, .08));
    border-color: rgba(123, 166, 255, .5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ── Subheader: tighter rhythm + calmer pill finish ── */
.rbp-header-root .rbp-sub__extras { gap: 8px; }
.rbp-header-root .rbp-pill {
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0;
    border-color: rgba(123, 166, 255, .14);
}
.rbp-header-root .rbp-pill--support {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 38%),
        linear-gradient(135deg, #1E40AF, #1D4ED8);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 8px 18px -14px rgba(29, 78, 216, .72);
}
.rbp-header-root .rbp-pill--support:hover {
    filter: brightness(1.07);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 12px 22px -12px rgba(29, 78, 216, .82);
}
.rbp-header-root .rbp-pill--discord {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 38%),
        linear-gradient(135deg, #5865F2, #4752C4);
    border-color: rgba(123, 166, 255, .14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 8px 18px -14px rgba(79, 70, 229, .72);
}
.rbp-header-root .rbp-pill--discord:hover {
    filter: brightness(1.07);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 12px 22px -12px rgba(79, 70, 229, .82);
}
.rbp-header-root .rbp-pill__dot {
    width: 6px;
    height: 6px;
    background: #34D399;
    box-shadow: 0 0 8px rgba(52, 211, 153, .85);
}

/* ── Game chip: align with the calmer system ── */
.rbp-header-root .rbp-game-chip {
    background:
        linear-gradient(180deg, rgba(67, 136, 255, .1) 0%, rgba(67, 136, 255, .03) 100%);
    border-color: rgba(123, 166, 255, .26);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 6px 14px -14px rgba(0, 0, 0, .65);
}
.rbp-header-root .rbp-game-chip__sub {
    color: #8FB8FF;
    letter-spacing: .14em;
    font-size: 9.5px;
}

/* ── Logged-out auth buttons: align primary/ghost to dashboard tokens ── */
.rbp-header-root .rbp-btn {
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 750;
}
.rbp-header-root .rbp-btn--ghost {
    border-color: var(--rbp-line-blue);
    background: rgba(11, 20, 40, .5);
    color: #dbe5fa;
}
.rbp-header-root .rbp-btn--ghost:hover {
    border-color: var(--rbp-line-blue-strong);
    background: rgba(20, 34, 64, .7);
    color: #fff;
}
.rbp-header-root .rbp-btn--accent {
    background: linear-gradient(180deg, #5BB7FF, #3B82F6);
    border: 1px solid rgba(123, 166, 255, .55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 8px 20px -10px rgba(59, 130, 246, .55);
}
.rbp-header-root .rbp-btn--accent:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 10px 22px -10px rgba(59, 130, 246, .65);
}

/* ── Mobile drawer: premium navigation hub treatment ── */
@media (max-width: 1023px) {
    /* Drawer head: brand lockup voice over the previous plain "Menu" word.
       Markup stays the same; we just upgrade the styling. */
    .rbp-header-root .rbp-mobile-drawer__head {
        padding: 4px 4px 14px;
        border-bottom-color: rgba(123, 166, 255, .08);
    }
    .rbp-header-root .rbp-mobile-drawer__title {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: #7e8fb1;
    }

    /* Account / Auth card: glassy navy card that mirrors the dashboard
       sidebar's Support Ready card. */
    .rbp-header-root .rbp-mobile-drawer__account,
    .rbp-header-root .rbp-mobile-drawer__auth {
        padding: 12px;
        border-radius: 14px;
        border: 1px solid var(--rbp-line-blue);
        background:
            radial-gradient(circle at 100% 0%, rgba(67, 136, 255, .08), transparent 60%),
            linear-gradient(180deg, rgba(11, 20, 40, .68), rgba(7, 13, 27, .68));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    }

    /* Section eyebrow labels: align with dashboard sidebar voice. */
    .rbp-header-root .rbp-mobile-drawer__section { gap: 4px; }
    .rbp-header-root .rbp-mobile-drawer__label {
        padding: 0 12px 6px;
        font-size: 10px;
        letter-spacing: .18em;
        color: #5b6a89;
    }

    /* Section dividers between Games / Help / Rewards / Legal so the
       hub reads as grouped panels rather than one long list. */
    .rbp-header-root .rbp-mobile-drawer__section + .rbp-mobile-drawer__section {
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px solid rgba(123, 166, 255, .07);
    }

    /* Link rows: tighter, calmer hover, subtle blue tint on active. */
    .rbp-header-root .rbp-mobile-drawer__link {
        min-height: 42px;
        padding: 9px 12px;
        border-radius: 11px;
        background: rgba(11, 20, 40, .32);
        border: 1px solid rgba(123, 166, 255, .07);
        font-weight: 700;
    }
    .rbp-header-root .rbp-mobile-drawer__link:hover,
    .rbp-header-root .rbp-mobile-drawer__link:focus {
        background:
            linear-gradient(180deg, rgba(67, 136, 255, .14), rgba(67, 136, 255, .04));
        border-color: rgba(123, 166, 255, .32);
        transform: translateX(1px);
    }
    .rbp-header-root .rbp-mobile-drawer__link-ico {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 10px;
        background: rgba(67, 136, 255, .1);
        border-color: var(--rbp-line-blue);
    }

    /* Legal section: match the tab look of the other sections (consistent with
       the desktop help-menu), just a touch calmer in weight/colour. */
    .rbp-header-root .rbp-mobile-drawer__section--legal .rbp-mobile-drawer__link {
        min-height: 38px;
        font-weight: 650;
        color: #c2cee8;
    }
    .rbp-header-root .rbp-mobile-drawer__section--legal .rbp-mobile-drawer__link-ico {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        background: rgba(123, 166, 255, .06);
        border-color: rgba(123, 166, 255, .08);
    }

    /* Drawer body: deeper blue glow at the top corner to anchor the
       brand zone, calmer base navy. */
    .rbp-header-root .rbp-mobile-drawer {
        background:
            radial-gradient(420px 280px at 90% -5%, rgba(67, 136, 255, .14), transparent 60%),
            linear-gradient(180deg, #06121F 0%, #050E1B 100%);
        border-right-color: rgba(123, 166, 255, .14);
    }

    /* Mobile bottom-nav: calmer inactive treatment so the active item
       reads more clearly without bumping the glow up further. */
    .rbp-header-root .rbp-mobile-bottom {
        border-color: rgba(123, 166, 255, .2);
    }
    .rbp-header-root .rbp-mobile-bottom__item .rbp-ico,
    .rbp-header-root .rbp-mobile-bottom__item svg {
        opacity: 0.72;
    }
    .rbp-header-root .rbp-mobile-bottom__item.is-active,
    .rbp-header-root .rbp-mobile-bottom__item.is-active .rbp-ico,
    .rbp-header-root .rbp-mobile-bottom__item.is-active svg {
        opacity: 1;
    }

    /* Subheader category pills (mobile): align with the calmer system. */
    .rbp-header-root .rbp-cat {
        background: rgba(11, 20, 40, .42);
        border-color: var(--rbp-line-blue);
    }
    .rbp-header-root .rbp-cat.is-active {
        background:
            linear-gradient(135deg, rgba(67, 136, 255, .26), rgba(37, 99, 235, .18));
        border-color: rgba(123, 166, 255, .42);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .1),
            0 6px 14px -10px rgba(59, 130, 246, .42);
    }
}

/* ── Email-verify chip: matches the header glass-control system; the amber
      lives only in the contained icon tile + a soft halo (see base rule). ── */
.rbp-header-root .rbp-email-verify-chip {
    border-color: var(--rbp-line-strong);
    background: rgba(255, 255, 255, 0.03);
}

/* ── Game-switcher chevron + help-menu chevron: calmer tint to match
      the new control glass ── */
.rbp-header-root .rbp-game-switcher__chev,
.rbp-header-root .rbp-help-menu__chev {
    color: #8FB8FF;
}

/* ── Sub-pixel polish: pull the help menu trigger label to a slightly
      smaller, tighter weight so it sits in the same hierarchy band as
      the surrounding chrome instead of reading as primary CTA. ── */
.rbp-header-root .rbp-help-menu__trigger {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0;
}
.rbp-header-root .rbp-help-menu__trigger .rbp-ico {
    color: #8FB8FF;
}

/* ════════════════════════════════════════════════════════════════════════
   PLUGIN-OWNED HEADER SEARCH  (replaces Advanced Woo Search)
   modules/header/search.php → rbp_header_render_search()
   The base input styling is inherited from the existing
   `.rbp-search input[type="search"]` and
   `.rbp-mobile-search__inner input[type="search"]` rules above; this block
   only adds the form wrapper, the typeahead panel, and its rows.
   ════════════════════════════════════════════════════════════════════════ */

/* The desktop grid cell clips overflow to protect the track width; the old
   AWS form needed that. Our panel is absolutely positioned (out of flow) so
   it can't widen the track — allow it to escape the cell vertically. */
.rbp-main__desktop > .rbp-search { overflow: visible; }

.rbp-search__form {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
}

/* Mobile overlay form takes the available row width next to the close btn. */
.rbp-mobile-search__inner .rbp-search__form {
    flex: 1;
    height: auto;
}

/* Typeahead panel — shared base. */
.rbp-search__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 80;
    max-height: min(70vh, 460px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--rbp-line-strong);
    background: #07142a;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.2),
        0 22px 48px -12px rgba(0, 0, 0, 0.65);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.rbp-search__panel[hidden] { display: none; }

/* Drop-in animation matched to the rest of the header chrome. */
.rbp-search__panel.is-open {
    animation: rbpSearchDrop 0.16s ease-out;
}
@keyframes rbpSearchDrop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .rbp-search__panel.is-open { animation: none; }
}

/* Result row. */
.rbp-search__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--rbp-text);
    text-align: left;
    transition: background 0.12s ease;
}
.rbp-search__item:hover,
.rbp-search__item.is-active {
    background: rgba(59, 130, 246, 0.12);
}
.rbp-search__item + .rbp-search__item { margin-top: 2px; }

.rbp-search__thumb {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    object-fit: cover;
    background: var(--rbp-bg-elev-2);
    border: 1px solid var(--rbp-line);
}

.rbp-search__body {
    flex: 1 1 auto;
    min-width: 0;
}
.rbp-search__title {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--rbp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rbp-search__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}
.rbp-search__price {
    font-size: 12.5px;
    font-weight: 800;
    color: #8FB8FF;
    white-space: nowrap;
}
.rbp-search__context {
    font-size: 11px;
    font-weight: 600;
    color: var(--rbp-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rbp-search__stock {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    color: #FCA5A5;
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.3);
}

/* Empty / loading / error states. */
.rbp-search__status {
    padding: 14px 12px;
    font-size: 13px;
    color: var(--rbp-text-dim);
    text-align: center;
}
.rbp-search__status--error { color: #FCA5A5; }

/* "View all results" footer. */
.rbp-search__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    padding: 11px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #93C5FD;
    background: rgba(59, 130, 246, 0.08);
    transition: background 0.15s ease, color 0.15s ease;
}
.rbp-search__more:hover,
.rbp-search__more.is-active {
    background: rgba(59, 130, 246, 0.16);
    color: #fff;
}

/* Mobile overlay: anchor the panel to the overlay inner so it spans the
   full width below the input rather than tracking the narrowed form. */
.rbp-mobile-search__inner { position: relative; }
.rbp-mobile-search__inner .rbp-search__panel {
    top: calc(100% + 10px);
    max-height: min(70vh, 70dvh);
}

/* ============================================================================
   Wallet pill + header de-bloat (laptops).
   Appended last so it wins the cascade over the earlier desktop tiers, which
   re-set the game-switcher trigger width at each breakpoint.
   - The new wallet pill (.rp-rb-headwallet) lives in the account cluster.
   - To make room on laptop-width desktops, the "Select Game" switcher collapses
     to an icon+chevron button (the label hides; it stays a working dropdown).
   ========================================================================== */
@media (max-width: 1500px) and (min-width: 1024px) {
    /* De-bloat: game switcher becomes a compact icon button */
    .rbp-game-switcher__label { display: none; }
    .rbp-game-switcher__trigger {
        min-width: 0;
        width: 46px;
        padding-inline: 0;
        gap: 0;
        justify-content: center;
    }
}

@media (max-width: 1120px) and (min-width: 1024px) {
    /* Tightest desktop tier: the profile chip is already avatar-only here, so the
       wallet collapses to an icon-only button too (balance still 1 tap away). */
    .rbp-account-chip .rp-rb-headwallet__amt { display: none; }
    .rbp-account-chip .rp-rb-headwallet {
        width: 44px;
        padding-inline: 0;
        justify-content: center;
        gap: 0;
    }
}