/* Critical public-header rules are kept separate from the hashed Vite bundle. */
[x-cloak] { display: none !important; }

.rpg-navbar__left { display: flex; flex-shrink: 0; align-items: center; flex-direction: row; gap: 1.1rem; align-self: center; }
.rpg-header-category-button { display: flex; width: 13rem; min-height: 2.5rem; align-items: center; gap: .58rem; border: 1px solid rgb(var(--brand-dark)); border-radius: 18px; background: linear-gradient(135deg, rgb(var(--brand-light)) 0%, rgb(var(--brand-dark)) 100%); padding: .58rem .75rem; color: #fff; font-family: var(--font-body); font-size: .72rem; font-weight: 800; text-align: left; cursor: pointer; box-shadow: 0 14px 30px rgb(var(--brand) / 0.26); }
.rpg-header-category-button svg { display: block; width: .95rem !important; height: .95rem !important; flex: 0 0 .95rem; color: #fff; }
.rpg-header-category-button b { margin-left: auto; color: #fff; font-size: .9rem; font-weight: 500; }
.rpg-header-category-button:hover,
.rpg-header-category-button:focus-visible { border-color: rgb(var(--brand-dark)); background: linear-gradient(135deg, rgb(var(--brand-light)) 0%, rgb(var(--brand-dark)) 100%); color: #fff; outline: none; }
.rpg-mobile-toggle { display: none !important; }
.rpg-mobile-toggle svg { display: block; width: 1.2rem !important; height: 1.2rem !important; flex: 0 0 1.2rem; }
.storefront-category-drawer { position: fixed; z-index: 120; inset: 0; display: flex; align-items: stretch; justify-content: flex-start; }
.storefront-category-drawer__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(9, 13, 18, .62); cursor: pointer; }
.storefront-category-drawer__panel { position: relative; display: flex; width: min(25rem, calc(100% - 2rem)); height: 100%; flex-direction: column; overflow: hidden; background: #fff; box-shadow: 20px 0 50px rgba(0, 0, 0, .22); }
.storefront-category-drawer__panel--enter,
.storefront-category-drawer__panel--leave { transition: transform 280ms ease; }
.storefront-category-drawer__panel--enter-start,
.storefront-category-drawer__panel--leave-end { transform: translateX(-100%); }
.storefront-category-drawer__panel--enter-end,
.storefront-category-drawer__panel--leave-start { transform: translateX(0); }
.storefront-category-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #31363b; background: #202428; padding: 1.35rem 1.3rem 1.25rem; color: #fff; }
.storefront-category-drawer__eyebrow { display: block; margin-bottom: .35rem; color: #ef203c; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.storefront-category-drawer__header h2 { margin: 0; color: #fff; font-family: var(--font-display); font-size: 1.55rem; }
.storefront-category-drawer__close { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: transparent; color: #fff; font-size: 1.55rem; line-height: 1; cursor: pointer; }
.storefront-category-drawer__list { overflow-y: auto; padding: .45rem .85rem 1.3rem; }
.storefront-category-drawer__list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #eee; padding: .95rem .45rem; color: #26384a; font-size: .8rem; line-height: 1.3; text-decoration: none; }
.storefront-category-drawer__list a b { color: #ef203c; font-size: .95rem; font-weight: 500; }
.storefront-category-drawer__empty { padding: 1rem .45rem; color: #757575; font-size: .8rem; }

@media (max-width: 1199px) {
    .rpg-navbar__left { gap: 0; }
    .rpg-header-category-button { display: none !important; }
    .rpg-mobile-toggle { display: inline-flex !important; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; }
}

/* Keep the category shortcut available on tablet and compact landscape headers. */
@media (min-width: 400px) and (max-width: 1199px) {
    .rpg-navbar__left {
        gap: clamp(.45rem, 1.8vw, 1rem);
        min-width: 0;
    }

    .rpg-header-category-button {
        display: flex !important;
        width: clamp(9.5rem, 28vw, 13rem);
        min-width: 0;
        padding-inline: clamp(.58rem, 1.7vw, .75rem);
        font-size: clamp(.61rem, 1.35vw, .72rem);
        white-space: nowrap;
    }

    /* Match the bundle's tablet rule while leaving Alpine's inline x-show state in control. */
    .rpg-navbar__left > .storefront-category-drawer {
        display: flex;
    }

    .rpg-brand__text {
        font-size: clamp(1.25rem, 2.7vw, 1.85rem);
        white-space: nowrap;
    }
}

@media (min-width: 1200px) { .rpg-mobile-menu { display: none !important; } }