/*
 * Compact single-row header redesign - site-wide. Overrides the theme's
 * default tall (140px logo) header in favor of a slim bar: text logo instead
 * of the image, smaller nav type, and a "Go to online store" button on the
 * right. Pairs with sticky-header-fix.css (which keeps this always pinned
 * to the top rather than hiding/revealing on scroll).
 */

body.btMenuHorizontal .mainHeader {
    background: #191919;
    /* The theme uses a "boxed" page layout - .mainHeader itself gets
       max-width:1200px + margin:auto so it's centered like page content,
       same as .gutter .port below. A persistent header bar should span the
       full browser width instead, even while the actual page content below
       it stays boxed. */
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

body.btMenuHorizontal .btLogoArea .port {
    display: flex;
    align-items: center;
    padding: 10px 30px;
    min-height: 0;
    /* The background bar (.mainHeader, above) goes full browser width, but
       the actual logo/nav/button content stays centered in a max-width row
       within it - otherwise it hugs the left edge with a growing empty gap
       on wide screens instead of sitting centered like the rest of the
       page's (boxed) content. */
    max-width: 1260px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Original image logo hidden outright - header-redesign.js inserts an
   independent .rvsa-text-logo-wrap sibling instead of trying to restyle the
   theme's own .logo/span/a markup, which collapses to a 0x0 box under this
   header's existing CSS for reasons not worth chasing down. */
body.btMenuHorizontal .btLogoArea .logo.rvsa-logo-hidden {
    display: none !important;
}

.rvsa-text-logo-wrap {
    flex: 0 0 auto;
    display: block;
    margin-right: 28px;
    text-decoration: none;
}

.rvsa-text-logo {
    display: block;
    width: 108px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .02em;
    color: #fff;
    text-transform: uppercase;
}

body.btMenuHorizontal .menuPort {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.btMenuHorizontal .menuPort .topBarInMenu {
    flex: 0 0 auto;
    margin-right: 20px;
}

body.btMenuHorizontal .menuPort nav {
    flex: 1 1 auto;
}

body.btMenuHorizontal .menuPort nav > ul > li > a {
    line-height: 1 !important;
    padding: 8px 14px !important;
    font-size: 13px;
    color: #fff;
}

body.btMenuHorizontal .menuPort nav > ul {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Was a hardcoded height: 140px, tied to the old image logo's height. */
body.btMenuHorizontal .topBarInMenu {
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 20px;
    align-items: center;
}

body.btMenuHorizontal .btSearch .bt_bb_icon_holder {
    color: #fff;
}

/* The LOGIN item isn't in the target design - "Go to online store" replaces it */
body.btMenuHorizontal .menuPort nav > ul > li.rvsa-hide-nav-item {
    display: none !important;
}

.rvsa-store-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #e49f37;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 24px;
}

.rvsa-store-btn:hover {
    opacity: .92;
    color: #fff !important;
}