/* =========================================================================
   VIVA_HEADER_PREMIUM_V1
   Cabeçalho premium unificado - desktop + mobile
   ========================================================================= */

.vf-premium-topbar {
    width: 100%;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 18px;

    background: #365650;
    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: .15em;
    text-align: center;
    text-transform: uppercase;
}


/* HEADER PRINCIPAL */

.vf-site-header {
    background: #c7e6e0 !important;
}

.vf-header-main {
    box-sizing: border-box;
}

.vf-brand img {
    object-fit: contain;
}

.vf-site-search {
    box-shadow: none !important;
}

.vf-header-actions a,
.vf-header-actions button {
    transition: opacity .18s ease;
}

.vf-header-actions a:hover,
.vf-header-actions button:hover {
    opacity: .72;
}

.vf-header-actions svg {
    stroke-width: 1.35 !important;
}


/* NAVEGAÇÃO */

.vf-main-nav {
    background: #fbf3f0 !important;

    border-top: 1px solid rgba(48, 56, 55, .08) !important;
    border-bottom: 1px solid rgba(48, 56, 55, .09) !important;
}

.vf-main-nav .vf-width {
    scrollbar-width: none;
}

.vf-main-nav .vf-width::-webkit-scrollbar {
    display: none;
}

.vf-main-nav a {
    color: #303837 !important;
    text-decoration: none;
    transition: opacity .18s ease;
}

.vf-main-nav a:hover {
    opacity: .58;
}


/* =========================================================================
   DESKTOP
   ========================================================================= */

@media (min-width: 1001px) {

    .vf-header-main {
        min-height: 86px !important;

        grid-template-columns:
            122px
            minmax(390px, 1fr)
            auto !important;

        gap: 32px !important;

        padding-top: 8px;
        padding-bottom: 8px;
    }

    .vf-brand img {
        width: 92px !important;
        height: 64px !important;
    }

    .vf-site-search {
        width: 100%;
        max-width: 680px;
        justify-self: center;

        height: 44px !important;

        border-radius: 9px !important;
        overflow: hidden;
    }

    .vf-site-search input {
        height: 44px;

        padding-left: 18px;
        padding-right: 14px;

        font-size: 14px;
    }

    .vf-site-search button {
        width: 48px !important;
        height: 44px !important;
    }

    .vf-site-search svg {
        width: 23px !important;
        height: 23px !important;
    }

    .vf-header-actions {
        gap: 26px !important;
    }

    .vf-header-actions a,
    .vf-header-actions button {
        min-width: 54px;
        gap: 3px !important;
    }

    .vf-header-actions svg {
        width: 27px !important;
        height: 27px !important;
    }

    .vf-header-actions small {
        font-size: 10px !important;
        line-height: 1.15;
        letter-spacing: .01em;
    }

    .vf-header-actions b {
        font-size: 10px !important;
        right: -4px !important;
        top: -4px !important;
    }

    .vf-main-nav {
        overflow: hidden;
    }

    .vf-main-nav .vf-width {
        width: min(95vw, 1480px) !important;

        min-height: 46px !important;

        display: flex !important;
        flex-wrap: nowrap !important;

        align-items: center;
        justify-content: center;

        gap: clamp(18px, 1.9vw, 34px) !important;

        overflow-x: auto;
        overflow-y: hidden;

        white-space: nowrap;
    }

    .vf-main-nav a,
    .vf-nav-account {
        flex: 0 0 auto;

        padding: 15px 0 !important;

        font-size: 11px !important;
        font-weight: 500;
        line-height: 1;

        letter-spacing: .045em !important;

        text-transform: uppercase;
    }
}


/* =========================================================================
   TABLET
   ========================================================================= */

@media (min-width: 721px) and (max-width: 1000px) {

    .vf-header-main {
        min-height: 88px !important;

        grid-template-columns:
            92px
            minmax(0, 1fr)
            182px !important;

        gap: 16px !important;
    }

    .vf-brand img {
        width: 78px !important;
        height: 60px !important;
    }

    .vf-site-search {
        height: 43px !important;
    }

    .vf-header-actions {
        gap: 14px !important;
    }

    .vf-header-actions svg {
        width: 25px !important;
        height: 25px !important;
    }

    .vf-header-actions small {
        font-size: 10px !important;
    }

    .vf-main-nav .vf-width {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;

        overflow-x: auto;
        white-space: nowrap;
    }
}


/* =========================================================================
   MOBILE
   ========================================================================= */

@media (max-width: 720px) {

    .vf-premium-topbar {
        height: 27px;

        padding: 0 12px;

        font-size: 8.5px;
        letter-spacing: .11em;
    }

    .vf-header-main {
        min-height: 118px !important;

        grid-template-columns:
            46px
            1fr
            54px !important;

        grid-template-rows:
            65px
            45px !important;

        gap: 0 !important;

        padding-top: 0;
        padding-bottom: 8px;
    }

    .vf-menu-toggle {
        font-size: 22px !important;
        padding: 0 !important;
    }

    .vf-brand img {
        width: 64px !important;
        height: 58px !important;
    }

    .vf-header-actions {
        gap: 0 !important;
    }

    .vf-header-actions .vf-cart-action {
        min-width: 48px;
    }

    .vf-header-actions .vf-cart-action svg {
        width: 27px !important;
        height: 27px !important;
    }

    .vf-header-actions b {
        font-size: 9px !important;
        right: 0 !important;
        top: -5px !important;
    }

    .vf-site-search {
        height: 42px !important;

        margin: 0 0 3px !important;

        border-radius: 9px !important;
    }

    .vf-site-search input {
        height: 42px;

        padding: 0 14px !important;

        font-size: 13px;
    }

    .vf-site-search button {
        width: 46px !important;
        height: 42px !important;
    }

    .vf-site-search svg {
        width: 23px !important;
        height: 23px !important;
    }

    .vf-main-nav .vf-width {
        width: 100% !important;
    }
}
/* =========================================================================
   VIVA_HEADER_REFINEMENT_V2
   Ajuste final: logo com maior presença + topbar mobile sem quebra
   ========================================================================= */

@media (min-width: 1001px) {

    .vf-brand img {
        width: 108px !important;
        height: 72px !important;
        max-width: none !important;
    }
}

@media (min-width: 721px) and (max-width: 1000px) {

    .vf-brand img {
        width: 88px !important;
        height: 66px !important;
        max-width: none !important;
    }
}

@media (max-width: 720px) {

    .vf-premium-topbar {
        white-space: nowrap;
        overflow: hidden;
        font-size: 0;
    }

    .vf-premium-topbar::after {
        content: "VIVA FITNESS · ENVIO PARA TODO O BRASIL";

        display: block;

        font-family: Arial, Helvetica, sans-serif;
        font-size: 8.5px;
        font-weight: 700;
        line-height: 1;

        letter-spacing: .10em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .vf-brand img {
        width: 74px !important;
        height: 64px !important;
        max-width: none !important;
    }
}