.topbar.rr-brand-header,
body.auth-page .topbar.rr-brand-header {
    height: 68px;
    padding: 0 clamp(1rem, 4vw, 3.5rem);
    background: rgba(13, 25, 43, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(17, 32, 53, 0.14);
    backdrop-filter: blur(14px);
    top: 0;
    left: 0;
    margin: 0;
    align-items: center;
    box-sizing: border-box;
    grid-template-rows: minmax(0, 1fr);
}

.rr-brand-header .topbar-left {
    display: flex;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}

.rr-brand-header .topbar-left > a {
    display: flex;
    align-items: center;
}

.rr-brand-header .site-wordmark {
    display: block;
    width: 220px;
    height: auto;
    max-width: min(220px, 48vw);
    object-fit: contain;
}

@media (max-width: 767px) {
    .topbar.rr-brand-header,
    body.auth-page .topbar.rr-brand-header { height: 60px; padding: 0 0.6rem; }
    .rr-brand-header .site-wordmark { max-width: min(160px, calc(100vw - 175px)); }
    .topbar.rr-brand-header.auth-topbar .site-wordmark { max-width: min(160px, calc(100vw - 175px)); }
}

@media (max-width: 767px) {
    .topbar.rr-brand-header,
    body.auth-page .topbar.rr-brand-header {
        height: 108px;
        flex-wrap: wrap;
        align-content: space-between;
        gap: 4px 8px;
        padding: 4px 10px 10px;
    }

    .rr-brand-header .topbar-left { flex: 1 1 auto; height: 54px; }
    .rr-brand-header .topbar-right { flex: 0 0 auto; height: 54px; }
    .rr-brand-header > .rr-site-search {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        max-width: none;
        height: 33px;
        margin: 0;
    }

    body.home-page,
    body.auth-page,
    body.dashboard-page { padding-top: 108px !important; }
}

.topbar.rr-brand-header.rr-account-header .topbar-right{display:flex;align-items:center;gap:16px}
.topbar.rr-brand-header.rr-account-header #cart-icon-wrapper,.topbar.rr-brand-header.rr-account-header .rr-sign-out{position:relative;display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;min-width:42px;min-height:42px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none;cursor:pointer;text-decoration:none;color:#fff}
.topbar.rr-brand-header.rr-account-header .rr-sign-out{color:#ef4444}
.topbar.rr-brand-header.rr-account-header .topbar-right i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0;font-size:20px;line-height:1;color:inherit}
.topbar.rr-brand-header.rr-account-header .rr-account-avatar{display:block;box-sizing:border-box;flex:0 0 40px;width:40px;height:40px;max-width:40px;border:2px solid #2563eb;border-radius:50%;object-fit:cover;cursor:pointer}
.topbar.rr-brand-header.rr-account-header .cart-count-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#ef4444;color:#fff;font:700 10px/16px Inter,Arial,sans-serif;text-align:center}
.topbar.rr-brand-header.rr-account-header .cart-count-badge[hidden]{display:none}
@media(max-width:767px){
    .topbar.rr-brand-header.rr-account-header .site-wordmark{max-width:min(160px,calc(100vw - 175px))}
    .topbar.rr-brand-header.rr-account-header .topbar-right{gap:7px}
    .topbar.rr-brand-header.rr-account-header #cart-icon-wrapper,.topbar.rr-brand-header.rr-account-header .rr-sign-out{flex-basis:38px;width:38px;height:38px;min-width:38px;min-height:38px}
    .topbar.rr-brand-header.rr-account-header .rr-account-avatar{flex-basis:28px;width:28px;height:28px;max-width:28px}
    .topbar.rr-brand-header.rr-account-header .topbar-right i{width:20px;height:20px;font-size:20px}
}
