/* Páginas que usam a topbar institucional (todas as páginas da loja): no desktop elas têm
   o próprio cabeçalho (.site-header-bar) e o shell da loja fica escondido; no
   mobile é o contrário — vale o cabeçalho mobile padrão do site e a topbar
   some. O shell continua no DOM nas duas larguras porque o modal de CEP, o
   drawer e o carrinho vivem dentro dele. */

@media (min-width: 769px) {
    .site-header-shell { display: none !important; }
}

@media (max-width: 768px) {
    .site-header-bar { display: none !important; }
}


/* Fundo do site: branco no topo virando azul-claro. Fica no elemento raiz para
   valer mesmo quando a página pinta o próprio body; os containers principais
   ficam transparentes para o degradê aparecer. */
html {
    min-height: 100%;
    background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 45%, #dfeaff 100%) no-repeat fixed;
    background-size: cover;
}
body { background: transparent !important; }
body > main,
body > .login-content,
body > .profile-page,
body > .product-page,
body > .catalog-page-wrap { background: transparent !important; }


/* As faixas da home eram brancas sólidas e cortavam o degradê do fundo em
   blocos. Deixamos as seções transparentes: o card branco continua sendo o do
   produto/categoria, não a faixa inteira. */
body .home-trust-bar,
body .departments-section,
body .products-section,
body .category-section {
    background: transparent !important;
}
/* Exceção: a faixa de marcas fica branca (as logos precisam de fundo sólido). */
body .brands-section { background: #fff !important; border-radius: 12px; }


/* Setas dos carrosséis sem o círculo/contorno branco: só o ícone. */
body .carousel-nav-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text, #1a1a1a);
}
body .carousel-nav-btn:hover {
    background: transparent !important;
    color: #000;
}

/* Barra de categorias sem as linhas externas. */
.site-navbar {
    border-top: none !important;
    border-bottom: none !important;
    background: transparent !important;
}


/* Cards: sem o seletor de quantidade e sem o botão COMPRAR — a compra acontece
   na página do produto. O aviso de estoque continua visível. */
body .product-card .card-bottom-row .cart-qty,
body .product-card .card-bottom-row .btn-buy-now:not(.btn-notify-stock) {
    display: none !important;
}
body .product-card .card-bottom-row:not(.contact-us-bottom-row):has(> .cart-qty) {
    display: none !important;
}

/* Botões do site sem a animação de escala no hover. */
.btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled),
.btn-submit:hover:not(:disabled),
.btn-login:hover:not(:disabled),
.btn-register:hover:not(:disabled),
.btn-buy-now:hover:not(:disabled),
.btn-add-cart:hover:not(:disabled),
.cart-checkout-btn:hover:not(:disabled),
.ch-btn-primary:hover:not(:disabled),
.dropdown-btn-primary:hover:not(:disabled),
.home-ver-todos-produtos-btn:hover:not(:disabled),
.ver-todos-btn:hover:not(:disabled),
.newsletter-form button:hover:not(:disabled),
.pml-btn:hover:not(:disabled),
.pml-btn-primary:hover:not(:disabled) {
    transform: none !important;
}

/* Botão primário do checkout: azul fixo, sem troca de cor no hover. */
body .ch-btn-primary,
body .ch-btn-primary:hover:not(:disabled),
body .ch-btn-primary:focus,
body .ch-btn-primary:active {
    background: #3483FA !important;
    color: #fff !important;
    border-color: #3483FA !important;
}
body .ch-btn-primary:disabled { background: #ccc !important; border-color: #ccc !important; }

/* COMPRAR da página do produto: texto preto com o contorno na mesma cor. */
body .product-summary-card .btn-buy-now:not(.btn-notify-stock),
body #buyNowBtn:not(.btn-notify-stock) {
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
    -webkit-text-stroke: 0.4px #1a1a1a;
    background: #fff !important;
    border: 1px solid #1a1a1a !important;
}


/* =====================================================================
   MOBILE (<=768px) — só aqui. O desktop não é tocado por nenhuma regra
   deste bloco.
   ===================================================================== */
@media (max-width: 768px) {
    /* --- Cabeçalho mobile: claro, com a tipografia dos títulos do site --- */
    html body .mobile-compact-header {
        background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%) !important;
        border-bottom: 1px solid #e5e5e5 !important;
        font-family: var(--ap-display, 'Bricolage Grotesque', sans-serif) !important;
    }
    .mobile-compact-header,
    .mobile-compact-header .mobile-compact-header__cep,
    .mobile-compact-header .mobile-compact-header__cep-label,
    .mobile-compact-header .mobile-compact-header__cep-value,
    .mobile-compact-header .mobile-compact-header__menu-btn,
    .mobile-compact-header .mobile-compact-header__account {
        color: #1a1a1a !important;
        -webkit-text-fill-color: #1a1a1a !important;
    }
    .mobile-compact-header .mobile-compact-header__cep-label { opacity: .7; }
    .mobile-compact-header .mobile-compact-header__menu-btn i,
    .mobile-compact-header .mobile-compact-header__account-icon { color: #1a1a1a !important; }
    .mobile-compact-header .mobile-compact-header__cep-pin { color: #f5c518 !important; -webkit-text-fill-color: #f5c518 !important; }

    /* Logo do cabeçalho mobile. Centralizada por flex — nada de position
       absolute: o header é `position: static !important` (site-mobile-header.css),
       então um filho absoluto ancorava fora da barra e a logo vazava para o
       conteúdo. */
    html body .mobile-compact-header__center {
        /* home-mobile-fluid.css centralizava por absolute+transform; com o header
           em `position: static !important` isso jogava a logo para fora da barra.
           Aqui zeramos os resíduos e centralizamos por flex, igual em todas as páginas. */
        position: static !important;
        top: auto !important; left: auto !important; right: auto !important;
        transform: none !important;
        flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
        min-width: 0; height: auto; overflow: hidden;
        /* a home jogava o center para `order: 0` (logo à esquerda); fixamos a
           mesma ordem em todas as páginas: menu, CEP, logo, ações */
        order: 3 !important;
    }
    /* Sobra do cabeçalho antigo de duas linhas: o slot com a logo grande e o
       header desktop continuavam no DOM e apareciam como um segundo bloco de
       cabeçalho no celular (a regra que os escondia vivia no home-desktop-fluid.css,
       que não é mais carregado por nenhuma página). A logo do mobile é a do
       header compacto. */
    html body .home-header-logo-slot,
    html body .header-brand--dual-row,
    html body .header-content--desktop { display: none !important; }
    html body .home-header-chrome,
    html body .home-header-chrome__stack,
    html body .home-header-dual-row,
    html body .home-header-dual-row__body,
    html body .home-header-dual-row__body > header.header,
    html body .home-header-dual-row__body > header.header > .container {
        display: block !important;
        margin: 0 !important; padding: 0 !important;
        max-width: none !important; width: 100% !important;
        min-height: 0 !important;
    }

    /* Ícone da conta (cabeçalho e menu lateral) em branco sobre o círculo escuro. */
    html body .mobile-drawer-account-card__icon,
    html body .mobile-drawer-account-card__icon i {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    /* O menu da conta ficava atrás da barra de busca (z-index 10060 contra
       10210/10250 da busca no catálogo). */
    html body .mobile-compact-header__user-menu,
    html body .mobile-compact-header__account-wrap { z-index: 10400 !important; }
    html body .search-bar-mobile .search-dropdown { z-index: 10150 !important; }
    html body .mobile-compact-header { z-index: 10300; position: relative; }

    html body .mobile-compact-header__menu { order: 1 !important; }
    html body .mobile-compact-header__cep { order: 2 !important; }
    html body .mobile-compact-header__end { order: 4 !important; }
    html body .mobile-compact-header__logo { pointer-events: auto; flex: 0 0 auto; }
    html body .mobile-compact-header__logo img {
        height: 40px !important; max-height: 40px !important;
        width: auto !important; max-width: 120px !important;
        object-fit: contain !important;
    }

    /* --- Menu lateral: design e fonte do site (mesma da tela de login) --- */
    .mobile-drawer {
        font-family: var(--ap-display, 'Bricolage Grotesque', sans-serif) !important;
    }
    .mobile-drawer-header {
        background: #fff !important;
        color: #1a1a1a !important;
        border-bottom: 1px solid #e5e5e5 !important;
    }
    .mobile-drawer-title { color: #1a1a1a !important; font-weight: 700; letter-spacing: -.02em; }
    .mobile-drawer-header .mobile-drawer-close,
    .mobile-drawer-header .mobile-drawer-close i { color: #1a1a1a !important; }
    .mobile-drawer-account-card {
        border-color: #e5e5e5 !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }
    .mobile-drawer-account-card__icon { background: #1a1a1a !important; }
    .mobile-drawer-link,
    .mobile-drawer-nav a,
    .mobile-drawer-section-title {
        font-family: var(--ap-display, 'Bricolage Grotesque', sans-serif) !important;
        letter-spacing: -.01em;
    }

    /* --- Cards de categoria com altura fixa, independentemente do texto --- */
    .department-card {
        height: 156px !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box;
    }
    .department-name {
        /* nome completo: sem corte em 2 linhas, com espaço reservado para
           três linhas — assim os cards seguem todos do mesmo tamanho */
        display: block !important;
        -webkit-line-clamp: none !important;
        overflow: visible !important;
        min-height: 3.6em;
        line-height: 1.2;
    }

    /* --- Produtos: carrossel horizontal, 2 visíveis por vez --- */
    .products-section .products-carousel-wrapper,
    .category-section .products-carousel-wrapper {
        --carousel-visible: 2;
        --carousel-gap: 0.5rem;
        overflow: hidden;
    }
    .products-section .products-carousel,
    .category-section .products-carousel {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: var(--carousel-gap) !important;
    }
    .products-section .products-carousel .product-card,
    .category-section .products-carousel .product-card {
        flex: 0 0 calc((100cqi - var(--carousel-gap)) / 2) !important;
        width: calc((100cqi - var(--carousel-gap)) / 2) !important;
        max-width: calc((100cqi - var(--carousel-gap)) / 2) !important;
        scroll-snap-align: start;
        /* mesma altura para todos: quem estica é o flex do carrossel, não uma
           altura fixa (height:100% em item de flex-row vira auto e não igualava). */
        align-self: stretch !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .products-section .products-carousel .product-card .product-info,
    .category-section .products-carousel .product-card .product-info {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
    }
    /* preço e ações encostam na base: o nome pode ter 1, 2 ou 3 linhas sem
       desalinhar os cards vizinhos */
    .products-section .products-carousel .product-card .product-prices,
    .category-section .products-carousel .product-card .product-prices {
        margin-top: auto !important;
    }
    .products-section .products-carousel,
    .category-section .products-carousel { align-items: stretch !important; }

    /* Nome completo (sem cortar em 2 linhas), com espaço reservado para que
       todos os cards fiquem do mesmo tamanho. */
    .product-card .product-name {
        display: block !important;
        -webkit-line-clamp: none !important;
        overflow: visible !important;
        min-height: 3.9em;
        line-height: 1.3;
    }

    /* As setas voltam: é assim que se passa de um par de produtos para o outro. */
    .products-carousel-wrapper > .carousel-nav-btn {
        display: flex !important;
        width: 30px; height: 30px;
        opacity: .85;
    }
}


@media (max-width: 768px) {
    /* Barra de busca do mobile: o campo já existe no shell (#headerMobileSearch,
       com dropdown de sugestões ligado em site-store-header-core.js) e estava
       oculto. Fica logo abaixo do cabeçalho, que é onde o usuário procura. */
    html body #headerMobileSearch,
    html body .search-bar-mobile {
        display: block !important;
        /* abaixo do cabeçalho e dos seus menus (o catálogo dava 10210 à busca,
           que passava por cima do menu da conta) */
        z-index: 10100 !important;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 12px 10px !important;
        background: transparent !important;
        border-bottom: 1px solid #e5e5e5;
    }
    html body .search-bar-mobile .search-input-wrapper {
        display: flex; align-items: center; gap: 8px;
        width: 100%; box-sizing: border-box;
        padding: 0 10px;
        background: #fff;
        border: 1px solid var(--border, #e5e5e5) !important;
        border-radius: 10px !important;
        position: relative;
    }
    html body .search-bar-mobile input {
        flex: 1 1 auto; min-width: 0;
        height: 40px; border: 0; outline: 0; background: transparent;
        font-family: var(--ap-display, 'Bricolage Grotesque', sans-serif);
        font-size: 14px; color: #1a1a1a;
    }
    html body .search-bar-mobile input::placeholder { color: #888; }
    html body .search-bar-mobile .search-btn-mobile {
        flex: 0 0 auto; width: 32px; height: 32px;
        border: 0; background: transparent; color: #1a1a1a;
        display: flex; align-items: center; justify-content: center; cursor: pointer;
    }
}


/* A faixa de marcas encostava na borda do container, enquanto os carrosséis de
   produto recuam 24px de cada lado (espaço das setas, que ficam fora do
   conteúdo). Alinhamos as logos à mesma coluna do conteúdo. */
@media (min-width: 769px) {
    body .brands-section {
        padding-left: 32px !important;
        padding-right: 32px !important;
        box-sizing: border-box;
    }
}


/* ===== Controle de áudio dos vídeos (home, seção de vídeo e /meulogin) =====
   Barra de volume vertical, sem fundo, no canto inferior direito do vídeo.
   Fica aqui porque este CSS é carregado em todas as páginas. */
.home-hero-audio,
.video-audio-ctl {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 3;
}
.home-hero-audio-btn,
.video-audio-btn {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: none;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    transition: transform .15s ease;
}
.home-hero-audio-btn:hover,
.video-audio-btn:hover { transform: scale(1.08); }
.home-hero-audio-btn:focus-visible,
.video-audio-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.home-hero-audio-vol,
.video-audio-vol {
    /* range na vertical: o volume sobe para cima, acima do botão */
    writing-mode: vertical-lr;
    direction: rtl;
    width: 4px;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    accent-color: #fff;
    cursor: pointer;
    transition: height .2s ease, opacity .2s ease;
}
.home-hero-audio:hover .home-hero-audio-vol,
.home-hero-audio:focus-within .home-hero-audio-vol,
.home-hero-audio.is-on .home-hero-audio-vol,
.video-audio-ctl:hover .video-audio-vol,
.video-audio-ctl:focus-within .video-audio-vol,
.video-audio-ctl.is-on .video-audio-vol { height: 84px; opacity: 1; }

@media (max-width: 768px) {
    .home-hero-audio, .video-audio-ctl { right: 10px; bottom: 10px; }
    .home-hero-audio.is-on .home-hero-audio-vol,
    .video-audio-ctl.is-on .video-audio-vol { height: 66px; }
}




/* O controle é posicionado em relação ao contêiner do vídeo. */
.login-aside,
.home-hero-video-wrap,
.home-video-section .home-hero-aside { position: relative; }
.home-hero-video-wrap { display: block; line-height: 0; }