/* ==========================================================
   SERVAUX - HEADER BASE
   Arquivo: 00-header-base.css
   ========================================================== */


/* ==========================================================
   1. CONFIGURAÇÕES GERAIS DO HEADER
   ========================================================== */

/* Permite que menus, dropdowns e busca em tempo real ultrapassem os containers do Elementor */
.elementor-location-header,
.elementor-location-header .elementor-section,
.elementor-location-header .elementor-container,
.elementor-location-header .elementor-widget-wrap,
.elementor-location-header .elementor-widget-shortcode,
.elementor-location-header .elementor-widget-search-form,
.elementor-location-header .elementor-widget-html,
.elementor-location-header [data-elementor-type="header"],
[data-elementor-type="header"],
[data-elementor-type="header"] .elementor-section,
[data-elementor-type="header"] .elementor-container,
[data-elementor-type="header"] .elementor-widget-wrap,
[data-elementor-type="header"] .elementor-widget-shortcode,
[data-elementor-type="header"] .elementor-widget-search-form,
[data-elementor-type="header"] .elementor-widget-html {
    overflow: visible !important;
}


/* ==========================================================
   2. TRANSIÇÃO DE NAVEGAÇÃO DO HEADER
   ========================================================== */

/*
   Evita flash visual do cabeçalho quando o usuário clica em links sensíveis:
   - Logo / Home
   - Minha Conta
   - Favoritos / Lista de Desejos
   - Links rápidos do header
*/
body.servaux-header-navigation-loading .elementor-location-header,
body.servaux-header-navigation-loading [data-elementor-type="header"],
body.servaux-header-navigation-loading header.site-header,
body.servaux-header-navigation-loading .site-header,
body.servaux-logo-home-loading .elementor-location-header,
body.servaux-logo-home-loading [data-elementor-type="header"],
body.servaux-logo-home-loading header.site-header,
body.servaux-logo-home-loading .site-header {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.12s ease, visibility 0.12s ease !important;
}


/* ==========================================================
   3. LINKS RÁPIDOS DO HEADER
   ========================================================== */

.servaux-header-quick-links {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    margin-left: 14px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease !important;
}

.servaux-header-quick-links a {
    display: inline-flex !important;
    align-items: center !important;
    color: #111111 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    transition: color 0.2s ease !important;
}

.servaux-header-quick-links a:hover {
    color: #0099ff !important;
}

.servaux-header-quick-links .servaux-header-link-destaque {
    color: #0099ff !important;
    font-weight: 700 !important;
}


/* ==========================================================
   4. DELAY / ANTI-FLASH DOS LINKS RÁPIDOS
   ========================================================== */

/* Antes do header estar pronto, mantém os links rápidos escondidos */
body:not(.servaux-header-ready) .servaux-header-quick-links {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-2px) !important;
    pointer-events: none !important;
}

/* Garante que os links internos também não pisquem antes da hora */
body:not(.servaux-header-ready) .servaux-header-quick-links a {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Quando o header estiver pronto, libera os links rápidos */
body.servaux-header-ready .servaux-header-quick-links {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

body.servaux-header-ready .servaux-header-quick-links a {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Durante navegação, esconde junto com o restante do header */
body.servaux-header-navigation-loading .servaux-header-quick-links,
body.servaux-logo-home-loading .servaux-header-quick-links {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-2px) !important;
    pointer-events: none !important;
    transition: opacity 0.12s ease, visibility 0.12s ease !important;
}


/* ==========================================================
   5. RESPONSIVO
   ========================================================== */

/* Esconde em tablet/mobile para não apertar o header */
@media (max-width: 1024px) {
    .servaux-header-quick-links {
        display: none !important;
    }
}
/* ==========================================================
   SERVAUX - CAMADA DO MINI-CARRINHO
   Adicionar no final de: 00-header-base.css
   ========================================================== */

/*
   Mantém o painel lateral e sua camada escura acima de todos
   os componentes do cabeçalho, inclusive o campo de pesquisa.
*/
.elementor-menu-cart__container,
.elementor-menu-cart__container.elementor-lightbox {
    z-index: 2147483000 !important;
}

.elementor-menu-cart__container .elementor-menu-cart__main {
    z-index: 2147483001 !important;
}

/*
   Quando o painel estiver aberto, impede que busca, resultados
   e lupa criem uma camada própria acima do backdrop.
*/
body:has(.elementor-menu-cart__container[aria-hidden="false"])
.elementor-location-header .servaux-search,
body:has(.elementor-menu-cart__container[aria-hidden="false"])
.elementor-location-header .servaux-search-form,
body:has(.elementor-menu-cart__container[aria-hidden="false"])
.elementor-location-header .servaux-live-search,
body:has(.elementor-menu-cart__container[aria-hidden="false"])
.elementor-location-header .servaux-live-search-results,
body:has(.elementor-menu-cart__container[aria-hidden="false"])
.elementor-location-header .elementor-widget-search-form {
    z-index: 1 !important;
}

/* Compatibilidade com versões que usam a classe de estado aberto. */
body:has(.elementor-menu-cart__container.elementor-menu-cart--shown)
.elementor-location-header .servaux-search,
body:has(.elementor-menu-cart__container.elementor-menu-cart--shown)
.elementor-location-header .servaux-search-form,
body:has(.elementor-menu-cart__container.elementor-menu-cart--shown)
.elementor-location-header .servaux-live-search,
body:has(.elementor-menu-cart__container.elementor-menu-cart--shown)
.elementor-location-header .servaux-live-search-results,
body:has(.elementor-menu-cart__container.elementor-menu-cart--shown)
.elementor-location-header .elementor-widget-search-form {
    z-index: 1 !important;
}
/* ==========================================================
   SERVAUX - DELAY DE CATEGORIAS E BUSCA DO HEADER
   Adicionar no final de: 00-header-base.css
   ========================================================== */

/*
   Mantém o espaço físico dos elementos no header, mas esconde
   Categorias e Busca até a página estar visualmente estabilizada.
*/
body:not(.servaux-header-controls-ready)
.elementor-location-header .servaux-header-cats,
body:not(.servaux-header-controls-ready)
.elementor-location-header .servaux-search,
body:not(.servaux-header-controls-ready)
.elementor-location-header .servaux-live-search-wrap,
body:not(.servaux-header-controls-ready)
.elementor-location-header .elementor-widget-search-form {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-3px) !important;
    pointer-events: none !important;
}

/* Entrada suave após o atraso controlado pelo PHP/JavaScript. */
body.servaux-header-controls-ready
.elementor-location-header .servaux-header-cats,
body.servaux-header-controls-ready
.elementor-location-header .servaux-search,
body.servaux-header-controls-ready
.elementor-location-header .servaux-live-search-wrap,
body.servaux-header-controls-ready
.elementor-location-header .elementor-widget-search-form {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition:
        opacity 0.20s ease,
        transform 0.20s ease,
        visibility 0s linear 0s !important;
}

/*
   Mantém os dois controles escondidos durante transições de
   navegação já usadas pelo header da Servaux.
*/
body.servaux-header-navigation-loading
.elementor-location-header .servaux-header-cats,
body.servaux-header-navigation-loading
.elementor-location-header .servaux-search,
body.servaux-header-navigation-loading
.elementor-location-header .servaux-live-search-wrap,
body.servaux-header-navigation-loading
.elementor-location-header .elementor-widget-search-form,
body.servaux-logo-home-loading
.elementor-location-header .servaux-header-cats,
body.servaux-logo-home-loading
.elementor-location-header .servaux-search,
body.servaux-logo-home-loading
.elementor-location-header .servaux-live-search-wrap,
body.servaux-logo-home-loading
.elementor-location-header .elementor-widget-search-form {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-3px) !important;
    pointer-events: none !important;
    transition:
        opacity 0.12s ease,
        transform 0.12s ease,
        visibility 0s linear 0.12s !important;
}

/* Respeita preferência por movimento reduzido. */
@media (prefers-reduced-motion: reduce) {
    body.servaux-header-controls-ready
    .elementor-location-header .servaux-header-cats,
    body.servaux-header-controls-ready
    .elementor-location-header .servaux-search,
    body.servaux-header-controls-ready
    .elementor-location-header .servaux-live-search-wrap,
    body.servaux-header-controls-ready
    .elementor-location-header .elementor-widget-search-form {
        transition: none !important;
        transform: none !important;
    }
}

/* ==========================================================
   6. RESPONSIVIDADE FINAL DO HEADER
   Baseada nas classes aplicadas no Elementor
   ========================================================== */

/* Estrutura base */
.servaux-header-layout {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.servaux-header-logo,
.servaux-header-menu,
.servaux-header-search-wrap,
.servaux-header-actions {
    min-width: 0 !important;
}

.servaux-header-search-wrap,
.servaux-header-search-wrap .servaux-search,
.servaux-header-search-wrap .servaux-live-search-wrap,
.servaux-header-search-wrap form,
.servaux-header-search-wrap .elementor-search-form {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}


/* ==========================================================
   6.1 NOTEBOOK / TABLET HORIZONTAL
   ========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    .servaux-header-layout {
        display: grid !important;
        grid-template-columns:
            145px
            120px
            minmax(260px, 1fr)
            112px !important;
        grid-template-rows: 52px !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 12px !important;
        min-height: 72px !important;
        margin: 0 !important;
        padding: 10px 20px !important;
    }

    .servaux-header-logo {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 145px !important;
        min-width: 145px !important;
        max-width: 145px !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-self: start !important;
        align-self: center !important;
    }

    .servaux-header-logo .elementor-widget-container,
    .servaux-header-logo a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 145px !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .servaux-header-logo img {
        display: block !important;
        width: 145px !important;
        min-width: 145px !important;
        max-width: 145px !important;
        height: 46px !important;
        max-height: 46px !important;
        margin: 0 !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    .servaux-header-menu {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .servaux-header-search-wrap {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .servaux-header-actions {
        grid-column: 4 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 9px !important;
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .servaux-header-actions > .elementor-element {
        flex: 0 0 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        margin: 0 !important;
    }

    .servaux-header-quick-links-widget,
    .servaux-header-quick-links {
        display: none !important;
    }
}


/* ==========================================================
   6.2 MOBILE
   Linha 1: logo centralizada
   Linha 2: categorias | busca | ações
   ========================================================== */

@media (max-width: 767px) {
    .servaux-header-layout {
        display: grid !important;
        grid-template-columns:
            32px
            minmax(0, 1fr)
            92px !important;
        grid-template-rows: 46px 42px !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 8px 6px !important;
        width: 100% !important;
        min-height: 108px !important;
        margin: 0 !important;
        padding: 8px 10px 10px !important;
    }

    .servaux-header-logo {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-self: stretch !important;
        align-self: center !important;
        text-align: center !important;
        overflow: visible !important;
    }

    .servaux-header-logo .elementor-widget-container,
    .servaux-header-logo a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .servaux-header-logo img {
        display: block !important;
        width: 138px !important;
        min-width: 138px !important;
        max-width: 138px !important;
        height: 42px !important;
        max-height: 42px !important;
        margin: 0 auto !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    .servaux-header-menu {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .servaux-header-search-wrap {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .servaux-header-actions {
        grid-column: 3 !important;
        grid-row: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px !important;
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .servaux-header-actions > .elementor-element {
        display: block !important;
        flex: 0 0 28px !important;
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .servaux-header-actions .elementor-icon,
    .servaux-header-actions .elementor-menu-cart__toggle .elementor-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .servaux-header-actions svg,
    .servaux-header-actions i {
        width: 25px !important;
        height: 25px !important;
        max-width: 25px !important;
        max-height: 25px !important;
        font-size: 25px !important;
    }

    .servaux-header-quick-links-widget,
    .servaux-header-quick-links {
        display: none !important;
    }
}


/* ==========================================================
   6.3 MOBILE COMPACTO
   ========================================================== */

@media (max-width: 420px) {
    .servaux-header-layout {
        grid-template-columns:
            30px
            minmax(0, 1fr)
            88px !important;
        gap: 8px 5px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .servaux-header-logo img {
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
    }

    .servaux-header-menu {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
    }

    .servaux-header-actions {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        gap: 2px !important;
    }
}

/* ==========================================================
   7. AJUSTES FINAIS DE RESPONSIVIDADE DO HEADER
   Corrige logo no mobile e espaçamento no tablet
   ========================================================== */

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

@media (min-width: 768px) and (max-width: 1024px) {
    .servaux-header-layout {
        grid-template-columns:
            132px
            108px
            minmax(0, 1fr)
            100px !important;
        gap: 10px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .servaux-header-logo {
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
    }

    .servaux-header-logo > .elementor-element,
    .servaux-header-logo .elementor-widget-image,
    .servaux-header-logo .elementor-widget-container,
    .servaux-header-logo a {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .servaux-header-logo img {
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        height: 44px !important;
        max-height: 44px !important;
    }

    .servaux-header-menu {
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
    }

    .servaux-header-actions {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        gap: 5px !important;
        padding-right: 2px !important;
    }

    .servaux-header-actions > .elementor-element,
    .servaux-header-actions > .elementor-widget-icon,
    .servaux-header-actions > .elementor-widget-woocommerce-menu-cart {
        flex: 0 0 28px !important;
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .servaux-header-actions .elementor-icon,
    .servaux-header-actions .elementor-menu-cart__toggle,
    .servaux-header-actions .elementor-menu-cart__toggle .elementor-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


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

@media (max-width: 767px) {
    /*
       Neutraliza largura, deslocamento e posicionamento herdados
       do widget Imagem do Elementor.
    */
    .servaux-header-logo {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        overflow: visible !important;
    }

    .servaux-header-logo > .elementor-element,
    .servaux-header-logo .elementor-widget-image {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        flex: none !important;
    }

    .servaux-header-logo .elementor-widget-container,
    .servaux-header-logo a {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .servaux-header-logo img {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        display: block !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        height: auto !important;
        max-height: 42px !important;
        margin: 0 auto !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

@media (max-width: 420px) {
    .servaux-header-logo img {
        width: 126px !important;
        min-width: 126px !important;
        max-width: 126px !important;
    }
}
/* ==========================================================
   SERVAUX - HEADER FLUIDO EM DESKTOP E ZOOM
   Corrige 125%, 150% e 175% sem alterar desktop largo,
   tablet ou mobile.
   ========================================================== */

@media (min-width: 1025px) and (max-width: 1600px) {

    /* Contêiner principal do header */
    .servaux-header-layout {
        display: grid !important;
        grid-template-columns:
            clamp(115px, 8vw, 150px)
            auto
            minmax(260px, 1fr)
            clamp(108px, 8vw, 132px) !important;

        align-items: center !important;
        justify-content: stretch !important;

        gap: clamp(10px, 1.2vw, 22px) !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 8px clamp(14px, 1.5vw, 28px) !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Neutraliza larguras mínimas herdadas do Elementor */
    .servaux-header-layout > .elementor-element,
    .servaux-header-layout > .e-con,
    .servaux-header-layout > div {
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* ======================================================
       LOGO
       ====================================================== */

    .servaux-header-logo {
        grid-column: 1 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 150px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .servaux-header-logo .elementor-widget-image,
    .servaux-header-logo .elementor-widget-container,
    .servaux-header-logo a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 150px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .servaux-header-logo img {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 145px !important;
        height: auto !important;
        max-height: 46px !important;

        margin: 0 !important;

        object-fit: contain !important;
        object-position: left center !important;
    }

    /* ======================================================
       CATEGORIAS E LINKS RÁPIDOS
       ====================================================== */

    .servaux-header-menu {
        grid-column: 2 !important;

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

        align-items: center !important;
        justify-content: flex-start !important;

        gap: clamp(10px, 1vw, 18px) !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
        overflow: visible !important;
    }

    .servaux-header-menu > .elementor-element {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        flex: 0 1 auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .servaux-header-cats,
    .servaux-header-cats-button {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .servaux-header-cats-button {
        gap: 7px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        white-space: nowrap !important;
    }

    .servaux-header-quick-links-widget,
    .servaux-header-quick-links {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;

        gap: clamp(8px, 0.8vw, 14px) !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
    }

    .servaux-header-quick-links a {
        font-size: clamp(12px, 0.78vw, 14px) !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    /* ======================================================
       BUSCA
       ====================================================== */

    .servaux-header-search-wrap {
        grid-column: 3 !important;

        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    .servaux-header-search-wrap .servaux-search,
    .servaux-header-search-wrap .servaux-live-search-wrap,
    .servaux-header-search-wrap form,
    .servaux-header-search-wrap .elementor-search-form {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
    }

    .servaux-header-search-wrap input[type="search"],
    .servaux-header-search-wrap .elementor-search-form__input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* ======================================================
       ÍCONES DE CONTA, FAVORITOS E CARRINHO
       ====================================================== */

    .servaux-header-actions {
        grid-column: 4 !important;

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

        align-items: center !important;
        justify-content: flex-end !important;

        gap: clamp(5px, 0.6vw, 10px) !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 132px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    .servaux-header-actions > .elementor-element,
    .servaux-header-actions > .elementor-widget-icon,
    .servaux-header-actions > .elementor-widget-woocommerce-menu-cart {
        flex: 0 0 clamp(28px, 2.2vw, 34px) !important;

        width: clamp(28px, 2.2vw, 34px) !important;
        min-width: 28px !important;
        max-width: 34px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .servaux-header-actions .elementor-icon,
    .servaux-header-actions .elementor-menu-cart__toggle {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 34px !important;
    }
}


/* ==========================================================
   DESKTOP INTERMEDIÁRIO / ZOOM DE 125%
   Reduz os links sem removê-los.
   ========================================================== */

@media (min-width: 1321px) and (max-width: 1600px) {

    .servaux-header-layout {
        grid-template-columns:
            120px
            auto
            minmax(280px, 1fr)
            112px !important;

        gap: 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .servaux-header-logo img {
        max-width: 120px !important;
    }

    .servaux-header-menu {
        gap: 10px !important;
    }

    .servaux-header-quick-links {
        gap: 9px !important;
    }

    .servaux-header-quick-links a {
        font-size: 12px !important;
    }

    .servaux-header-actions {
        gap: 5px !important;
        max-width: 112px !important;
    }
}


/* ==========================================================
   DESKTOP COMPACTO / ZOOM DE 150% E 175%
   Oculta apenas os atalhos Ofertas, Mais vendidos e Novidades.
   ========================================================== */

@media (min-width: 1025px) and (max-width: 1320px) {

    .servaux-header-layout {
        grid-template-columns:
            122px
            132px
            minmax(220px, 1fr)
            118px !important;

        gap: 10px !important;

        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .servaux-header-logo {
        max-width: 122px !important;
    }

    .servaux-header-logo img {
        max-width: 122px !important;
    }

    .servaux-header-menu {
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;

        gap: 0 !important;
    }

    .servaux-header-quick-links-widget,
    .servaux-header-quick-links {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;

        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        pointer-events: none !important;
    }

    .servaux-header-actions {
        width: 118px !important;
        min-width: 118px !important;
        max-width: 118px !important;

        gap: 5px !important;
    }
}
/* ==========================================================
   SERVAUX - CORREÇÃO DO ÍCONE DO CARRINHO EM ZOOM
   Corrige 125%, 150% e 175%.
   ========================================================== */

@media (min-width: 1025px) and (max-width: 1600px) {

    /*
     * Reserva espaço real para os três ícones.
     */
    .servaux-header-layout {
        grid-template-columns:
            clamp(118px, 8vw, 130px)
            auto
            minmax(190px, 1fr)
            136px !important;
    }

    .servaux-header-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: 136px !important;
        min-width: 136px !important;
        max-width: 136px !important;

        gap: 6px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .servaux-header-actions > .elementor-element,
    .servaux-header-actions > .elementor-widget-icon,
    .servaux-header-actions > .elementor-widget-woocommerce-menu-cart {
        position: relative !important;

        flex: 0 0 36px !important;

        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;

        height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    /*
     * Normaliza especificamente o widget do carrinho WooCommerce.
     */
    .servaux-header-actions .elementor-widget-woocommerce-menu-cart,
    .servaux-header-actions .elementor-menu-cart__wrapper,
    .servaux-header-actions .elementor-menu-cart__toggle {
        position: relative !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;

        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    .servaux-header-actions .elementor-menu-cart__toggle .elementor-button,
    .servaux-header-actions .elementor-menu-cart__toggle_button {
        position: relative !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;

        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: none !important;
        background: transparent !important;
        overflow: visible !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .servaux-header-actions .elementor-menu-cart__toggle .elementor-button-icon,
    .servaux-header-actions .elementor-menu-cart__toggle svg {
        display: block !important;

        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;

        height: 30px !important;
        max-height: 30px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        transform: none !important;
    }

    /*
     * Mantém a bolinha com a quantidade visível.
     */
    .servaux-header-actions .elementor-button-icon-qty,
    .servaux-header-actions .elementor-menu-cart__toggle .elementor-button-icon-qty {
        z-index: 5 !important;
        overflow: visible !important;
    }
}


/* Faixa compacta de 150% e 175% */
@media (min-width: 1025px) and (max-width: 1320px) {

    .servaux-header-layout {
        grid-template-columns:
            118px
            126px
            minmax(180px, 1fr)
            136px !important;
    }

    .servaux-header-menu {
        width: 126px !important;
        min-width: 126px !important;
        max-width: 126px !important;
    }
}