body {
    font-family: "Open Sans", sans-serif;
}

.loading__spinner {
    color: #234A94;
}

.site-header__logo img {
    height: 40px;
}

.site-header__cart i {
    color: #5a5a5a;
}

.site-header__cart i:hover {
    color: #4871bf;
}

.site-header__search .search__button {
    color: #5a5a5a;
}

.site-header__phone-title {
    color: #5a5a5a;
}

.site-header__cart .indicator__value {
    background-color: #234A94;
    color: #fff;
}

.filter-badge--promo {
    background: #DCFCE7;
    color: #15803D;
    font-weight: 700;
    font-size: 12px;
}

.footer-contacts__text img {
    height: 40px;
}

.footer-apps__text img {
    width: 120px;
}

.nav-panel {
    background: #234A94;
    color: #FFF;
}

.block-brands__slider .owl-nav i, .block-products-carousel__slider .owl-nav i {
    color: #234A94;
}

.block-products-carousel__column .product-card__name {
    min-height: 55px;
}

.block-products-carousel__column .product-card__prices {
    min-height: 35px;
    margin-bottom: 10px;
}

.block-products-carousel__column .product-card__buttons {
    margin-top: 0px;
}

.product-card {
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    margin: 10px;
}

.product-card:hover {
    border-color: #BFBDBD;
}

.product-card__prices {
    min-height: 15px;
}

.product-card__price,
.product-card__new-price,
.product__price,
.product__new-price {
    color: #234A94;
    font-weight: 700;
    font-size: 1.15em;
}

.top-button {
    color: #5a5a5a;
}

@media (max-width: 991px) {
    .indicator__value {
        background: #234A94;
        color: #FFF;
    }
}

.page-header__container {
    padding-top: 20px !important;
}

.page-header__back {
    margin-top: 20px !important;
    display: inline-block;
}

.page-header__back .btn {
    background: none !important;
    border-color: transparent !important;
    color: #5a5a5a !important;
    padding: .375rem;
    font-weight: 500;
}

.input-check__input:checked ~ .input-check__box {
    background: #234A94;
}

.block-slideshow .owl-carousel .owl-dot {
    background: #234A94;
}

.block-slideshow .owl-carousel .owl-dot.active {
    background: #FF8E00;
}

.block-header__arrow {
    background: transparent;
    color: #234A94;
}

.block-header__arrow:hover {
    background: #f7f7f7;
    color: #1a3870;
}

.block-header__arrow:active {
    background: transparent;
    color: #234A94;
}

.block-header__arrow:focus {
    background: #f7f7f7;
    color: #234A94;
}

.filter__arrow {
    color: #5a5a5a;
}

.site-newsletter {
    background: #234A94;
}

.site-newslettertitle {
    color: #FFFFFF;
}

.footer-linkstitle {
    color: #5a5a5a;
}

.footer-contactstitle {
    color: #5a5a5a;
}

.service-bartitle:hover {
    color: #234A94;
}

.footer-newslettertitle {
    color: #5a5a5a;
}

.footer-paymenttitle {
    color: #5a5a5a;
}

.footer-sealstitle {
    color: #5a5a5a;
}

.footer-appstitle {
    color: #5a5a5a;
}

.megamenu__links--level--1 .megamenu__item a {
    font-size: 14px;
    white-space: nowrap;
    margin-right: 15px;
}

.footer-seals__text img {
    width: 50%!important;
}

.block-headertitle {
    color: #5a5a5a;
}

.page-headertitle {
    color: #5a5a5a;
}

.product__name {
    color: #234A94;
}

.container__products-carousel-grid {
    margin-top: 30px;
}

.product-tabs__item {
    color: #234A94;
}

.product-tabs__item:hover {
    color: #234A94;
}

.product-tabs__item--active {
    border-bottom-color: #234A94;
}

.block-products-carousel[data-layout=grid-5] .product-card .product-card__actions {
    padding: 15px 15px 15px;
}

[dir=ltr] .nav-panel__nav-links {
    margin-right: 0px;
    height: 46px;
}

.nav-links__list {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
}
.nav-links__item:last-child .nav-links__item-link {
    background-color: #ff820d;
    margin-left: 10px;
    color: #fff;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .nav-links__item-link {
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
    }
}

@media (min-width: 1200px) {
    .nav-links__item-link {
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
    }
}

.nav-links__item--has-submenu .nav-links__item-body {
    padding-right: 15px!important;
}

.nav-links__item-body .fa-chevron-down {
    display: none;
}

.megamenu__links--level--1 > .megamenu__item > a {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    padding-right: 20px;
}

.megamenu__links--level--1 > .megamenu__item > a:hover {
    color: #234A94;
}

.megamenu__links--level--1 > .megamenu__item > a:active {
    color: #234A94;
}

.megamenu__links--level--1 > .megamenu__item > a:focus {
    color: #234A94;
}

.nav-links__item {
    margin-left: 2px;
    margin-right: 2px;
}

.topbar-message {
    background: #22C55E;
    color: #FFF;
    min-height: 40px;
    padding: 10px;
}

.topbar-message .fa-shipping-fast {
    font-size: 20px;
}

/* Faixa "Frete Grátis" menor no mobile — no celular ela fica
   proporcionalmente grande demais, ocupando espaço à toa no topo */
@media (max-width: 767px) {
    .topbar-message {
        min-height: 26px;
        padding: 6px 10px;
        font-size: 12px;
    }

    .topbar-message .fa-shipping-fast {
        font-size: 14px;
    }
}

.topbar-app {
    background: #e1e1e1;
    color: #333333;
    min-height: 40px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 0px;
    padding-right: 0px;
}

.topbar-app img {
    background: #FFF;
    padding: 7px;
    box-shadow: 1px 1px 3px #606061;
    -webkit-box-shadow: 1px 1px 3px #606061;
    -moz-box-shadow: 1px 1px 3px #606061;
    border-radius: 10px;
    height: 48px;
}

.topbar-app .btn {
    font-weight: 500;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #606061;
    -webkit-box-shadow: 1px 1px 3px #606061;
    -moz-box-shadow: 1px 1px 3px #606061;
}
.site-newsletter__title {
    color: #fff;
}

#modal-location .btn {
    background: #234A94;
    color: #fff;
    padding: 10px;
}

.mobile-header__logo img {
    max-height: 36px;
    max-width: 160px;
}

/* Cabeçalho mobile mais limpo: fica só a logo (acima da busca), sem o
   menu ☰, sem o ícone de orçamento/listas e sem o ícone de carrinho no
   topo — o carrinho já está na barra fixa debaixo da tela (Início/
   Categorias/Carrinho/Menu), então não precisa duplicar aqui. O ☰
   escondido não quebra nada: os botões "Categorias"/"Menu" da barra de
   baixo continuam funcionando, porque eles clicam nesse botão por trás
   via JS (.click() funciona mesmo com o elemento escondido) — só o
   ícone visual que some. O ícone de orçamento (.site-header__cart,
   confirmado via inspecionar elemento) some do mesmo jeito — nada no
   site depende dele visualmente aparecer no topo. */
@media (max-width: 767px) {
    .mobile-header__menu-button,
    .indicator__button--cart,
    .site-header__cart {
        display: none !important;
    }
}

html .form-control {
    border-radius: 10px;
}
html .btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
html .btn:not(.pv-cart-added) {
    background: #234A94;
    border-color: #234A94;
    color: #FFFFFF;
}

/* Alinha ícone + texto pelo centro via flexbox nos dois estados do botão
   de adicionar ao carrinho — evita depender de ajuste manual de vertical-align,
   que varia conforme o formato do ícone (carrinho x check) */
html .product-card__addtocart {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
}
html .service-bar {
    margin-top: 0;
}
html .site-newsletter__input {
    border-radius: 50px;
}
html .block-banner__image {
    border-radius: 12px;
    overflow: hidden;
}
html .product-gallery__featured {
    border-radius: 12px;
}
html #show_hide_password .input-group-text {
    border-radius: 0 50px 50px 0;
}
html .card {
    border-radius: 12px;
}
/* Barra de busca estilo app (2026-09-23): retângulo com cantos
   arredondados (12px), fundo cinza quente claro, SEM borda, lupa à
   ESQUERDA e placeholder "Procure o produto que você precisa"
   (texto trocado via script no Footer).
   O print do celular mostrou que a regra antiga não pegava no mobile:
   a borda cinza vem de .search__border (div separada que o tema
   desenha por cima) e o mobile usa .mobile-header__search, não só
   .site-header__search. Por isso as regras abaixo miram as classes
   internas da busca (.search__body/.search__form, .search__border,
   .search__input, .search__button) em qualquer um dos dois headers.
   A lupa vai pra esquerda só com "order: -1" — o botão continua o
   mesmo, clicável e enviando a busca normalmente. */
.site-header__search .search,
.mobile-header__search .search,
.mobile-header__search {
    border-radius: 12px;
    border: none !important;
}
.site-header__search .search__border,
.mobile-header__search .search__border {
    display: none !important;
}
.site-header__search .search__body,
.site-header__search .search__form,
.mobile-header__search .search__body,
.mobile-header__search .search__form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    min-height: 48px;
    background: #F1EFEA !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden;
}
.site-header__search .search__button,
.mobile-header__search .search__button {
    order: -1;
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #6B6B6B !important;
    width: auto !important;
    height: auto !important;
    padding: 0 6px 0 14px !important;
    font-size: 18px !important;
}
.site-header__search .search__button svg,
.site-header__search .search__button i,
.mobile-header__search .search__button svg,
.mobile-header__search .search__button i {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
}
.site-header__search .search__input,
.mobile-header__search .search__input {
    flex: 1;
    min-width: 0;
    height: 48px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
    font-size: 15px !important;
    color: #333;
    padding: 0 12px 0 6px !important;
}
.site-header__search .search__input::placeholder,
.mobile-header__search .search__input::placeholder {
    color: #8A8A8A;
    opacity: 1;
}
html .account-nav {
    border-radius: 12px;
}
html .footer-seals__text img {
    width: 50%
}
html .site-newslettercontainer {
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
}

/* FIM  */

/* Substitui o texto do botão de login/cadastro no card de produto por "Ver preço" */
.product-card__login {
    font-size: 0 !important;
    text-decoration: none;
}
.product-card__login::before {
    content: "Ver preço";
    font-size: 16px;
    font-weight: 500;
    display: block;
}

/* Mesma substituição, agora na página de detalhe do produto (confirmado via inspecionar elemento) */
a.btn.btn-light[href*="/entrar"] {
    font-size: 0 !important;
    text-decoration: none;
}
a.btn.btn-light[href*="/entrar"]::before {
    content: "Ver preço";
    font-size: 16px;
    font-weight: 500;
    display: block;
}

/* Botão "Ver preço" ocupa a largura toda do card, igual ao "Adicionar ao
   Carrinho" — antes ficava no tamanho do texto, bem menor que o botão azul
   que os usuários logados veem no mesmo lugar */
.product-card__login,
a.btn.btn-light[href*="/entrar"] {
    display: block !important;
    width: 100%;
    text-align: center;
    padding: 10px 16px !important;
}

/* Hover explícito do botão principal — evita cores fora de padrão vindas do tema base (ex: verde) */
html .btn:not(.pv-cart-added):hover,
html .btn:not(.pv-cart-added):focus {
    background: #1a3870;
    border-color: #1a3870;
    color: #FFFFFF;
}

/* Botão "Adicionado" — verde sólido, sem misturar com o azul padrão.
   A classe .pv-cart-added é aplicada via script (Integrações > Scripts > Footer),
   que detecta quando o texto do botão vira "Adicionado" (o tema usa a mesma
   classe .btn-success o tempo todo, então não dá pra diferenciar só por CSS).
   Nome da classe prefixado com "pv-" para não colidir com nenhuma classe
   genérica já usada em outro lugar do tema. Layout do ícone+texto travado
   em linha única (evita o ícone "quebrar" para cima do texto). */
html .btn.pv-cart-added {
    background: #16A34A;
    border-color: #16A34A;
    color: #FFFFFF;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

html .btn.pv-cart-added:hover,
html .btn.pv-cart-added:focus {
    background: #128A3E;
    border-color: #128A3E;
    color: #FFFFFF;
}

/* Altura mínima consistente do card de produto, para não desalinhar a grade
   quando cards logados (com preço) e deslogados (com "Ver preço") aparecem juntos */
.product-card {
    display: flex;
    flex-direction: column;
    min-height: 420px;
}
.product-card__login {
    margin-top: auto;
}

@media (max-width: 767px) {
    .product-card {
        min-height: 360px;
    }
}

/* Estados de foco visíveis para navegação por teclado (acessibilidade) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
.product-card:focus-within {
    outline: 2px solid #234A94;
    outline-offset: 2px;
}

/* Área de toque maior para os botões de quantidade (+/-) no mobile,
   seguindo o mínimo recomendado de 44x44px para evitar erro de toque */
@media (max-width: 767px) {
    .product-card__quantity button,
    .product-card__quantity .btn,
    .quantity__button,
    .quantity-selector button,
    .input-number__button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================================
   NOVOS AJUSTES — comparativo aprovado (hierarquia preço/CTA)
   ============================================================ */

/* "Total a Pagar" no resumo do carrinho — mesmo peso/cor da PDP */
table.checkout__totals strong {
    color: #234A94;
    font-size: 1.3em;
}

/* Faixa de pedido mínimo — recolorida pra fora do amarelo padrão Bootstrap,
   sem mudar texto/lógica (as duas mensagens continuam aparecendo como hoje) */
.alert.alert-warning {
    background: #FFF4E5;
    border: 1px solid #FFD8A8;
    color: #a15c00;
    font-weight: 600;
}

/* Botão secundário (.btn-light) vira outline — distingue do CTA principal.
   Exclui o botão "Ver preço" (.product-card__login e o link /entrar acima),
   que já tem estilo próprio definido nesse arquivo */
html .btn-light:not(.product-card__login):not([href*="/entrar"]) {
    background: #fff !important;
    color: #234A94 !important;
    border: 1.5px solid #234A94 !important;
    font-weight: 600 !important;
    border-radius: 10px;
}

html .btn-light:not(.product-card__login):not([href*="/entrar"]):hover,
html .btn-light:not(.product-card__login):not([href*="/entrar"]):focus {
    background: #f0f4fb !important;
    color: #1a3870 !important;
}

/* Título "Produtos Relacionados" (e outros blocos que usam esse componente) */
.block-header__title {
    color: #234A94;
}

/* ============================================================
   Selo de desconto — pílula verde clara, estilo "-33%"
   ============================================================ */

/* Sobrescreve a cor inline (style="background-color: ...") que vem
   definida por produto/promoção no admin — sem o !important não dá
   pra vencer o style inline no HTML. Texto vira só "-X%" via script
   (Integrações > Scripts > Footer). */
.product-card__badge {
    background-color: #DCFCE7 !important;
    color: #15803D !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ============================================================
   Hierarquia dos botões do carrinho — "Salvar como Rascunho" e
   "Limpar Carrinho" (baseado nas classes reais confirmadas via inspecionar)
   ============================================================ */

/* "Salvar como Rascunho" vira ação secundária (outline), pra não competir
   visualmente com "Finalizar Pedido" — mesmo padrão do .btn-light usado
   em outros lugares do site */
button[data-click="salvarCarrinhoRascunho"] {
    background: #fff !important;
    color: #234A94 !important;
    border: 1.5px solid #234A94 !important;
    font-weight: 600 !important;
}

button[data-click="salvarCarrinhoRascunho"]:hover,
button[data-click="salvarCarrinhoRascunho"]:focus {
    background: #f0f4fb !important;
    color: #1a3870 !important;
}

/* "Limpar Carrinho" é ação destrutiva (apaga o carrinho inteiro) — tira do
   padrão azul sólido dos outros botões e deixa como link vermelho discreto,
   reduzindo o risco de clique acidental */
.cart__reset-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ba1a1a !important;
    font-weight: 500 !important;
}

.cart__reset-button:hover,
.cart__reset-button:focus {
    background: #FEF2F2 !important;
    color: #991b1b !important;
}

/* ============================================================
   Botão "Enviar" da newsletter do rodapé — já era um botão navy
   sólido, mas ficava "invisível" porque o fundo da barra também é
   navy (mesma cor). Classe confirmada via inspecionar elemento:
   .site-newsletter__button
   ============================================================ */
.site-newsletter__button.btn {
    background: #fff !important;
    color: #234A94 !important;
    border: none !important;
    padding: 10px 24px !important;
    font-weight: 700 !important;
}

.site-newsletter__button.btn:hover,
.site-newsletter__button.btn:focus {
    background: #f0f4fb !important;
    color: #1a3870 !important;
}

/* ============================================================
   Checkboxes nativos do navegador (ex: seleção de itens no
   carrinho) ganham a cor da marca em vez do cinza padrão
   ============================================================ */
input[type="checkbox"] {
    accent-color: #234A94;
}

/* ============================================================
   Remove a mensagem duplicada de pedido mínimo no carrinho —
   quando aparecem as duas juntas ("Pedido mínimo de R$ X" e
   "Pedido mínimo para esse prazo de pagamento é de R$ X", ambas
   com a mesma classe .alert.alert-warning, uma logo abaixo da
   outra), a segunda é escondida e fica só a primeira, evitando
   repetir a mesma informação duas vezes seguidas
   ============================================================ */
.alert.alert-warning + .alert.alert-warning {
    display: none !important;
}

/* ============================================================
   Remove o carrossel de marcas (Santher, Unilever, Cepêra,
   Predilecta, Gomes da Costa, Pepsico...) que aparece na home,
   junto com as setas de navegação dele
   ============================================================ */
.block-brands {
    display: none !important;
}

/* ============================================================
   Barra fixa de compra na página de produto (mobile) — box de
   QUANTIDADE (−/+) à esquerda + um único botão à direita com
   "Adicionar" de um lado e o PREÇO do outro lado (mesmo botão),
   numa barra colada embaixo da tela, sempre visível.

   REESCRITO (2026-09-18): a versão original MOVIA (appendChild) o
   preço, a quantidade e o botão originais pra dentro dessa barra —
   isso tirava esses elementos do lugar onde o JS do tema esperava
   encontrá-los e travou a loja (botão parava de responder). Essa
   versão não move nada: o botão real dentro de
   .product__actions-item--addtocart continua exatamente no lugar de
   sempre no HTML — só fica escondido visualmente
   (.pv-hidden-for-buybar). O contador da barra edita o  de
   quantidade real por trás (dispara os mesmos eventos que o
   navegador dispara quando alguém digita) e o botão "Adicionar"
   aciona um .click() no botão original por trás (script em
   Integrações > Scripts > Footer) — quem processa a quantidade e o
   "adicionar ao carrinho" continua sendo o mesmo fluxo de sempre. O
   preço mostrado no botão é uma cópia de texto de
   .product__price/.product__new-price, sincronizada a cada mudança.
   ============================================================ */
.pv-hidden-for-buybar {
    display: none !important;
}

@media (max-width: 767px) {
    #pv-sticky-buybar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 72px;
        z-index: 999;
        display: flex;
        align-items: center;
        gap: 10px;
        background: #fff;
        padding: 10px 12px;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
    }

    .pv-sticky-buybar__qty {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        border: 1.5px solid #E6E6E6;
        border-radius: 14px;
        padding: 3px;
    }

    /* 44x44 — mesmo mínimo de área de toque já usado nos outros botões
       de quantidade do site (ver regra .product-card__quantity button
       etc. mais acima neste arquivo). Com ~78% do tráfego vindo de
       celular (360 a 432px de largura), vale manter o padrão aqui
       também — ainda cabe tranquilo dentro da barra nessas larguras. */
    .pv-sticky-buybar__qty-btn {
        width: 44px;
        height: 44px;
        border: none;
        background: transparent;
        color: #333;
        font-size: 19px;
        font-weight: 500;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pv-sticky-buybar__qty-btn:active {
        color: #234A94;
    }

    .pv-sticky-buybar__qty-val {
        min-width: 18px;
        text-align: center;
        font-size: 15px;
        font-weight: 700;
        color: #333;
    }

    /* Botão único: rótulo de um lado, preço do outro, mesma cor de
       fundo/estado do botão de adicionar padrão do site (.btn e
       .btn.pv-cart-added, já definidos mais acima neste arquivo).
       white-space: nowrap no rótulo E no preço (não só no botão) é o
       que impede o "R$ 39,68" de quebrar linha entre o "R$" e o
       valor — sem isso, o texto quebra assim que o botão fica
       apertado, mesmo com nowrap só no container. */
    #pv-sticky-buybar .pv-sticky-buybar__btn {
        flex: 1;
        min-width: 0;
        width: 100%;
        margin: 0 !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 13px 16px;
        border-radius: 14px;
    }

    .pv-sticky-buybar__btn-label {
        font-size: 15px;
        font-weight: 700;
        white-space: nowrap;
    }

    .pv-sticky-buybar__btn-price {
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ============================================================
   Preço logo abaixo do nome do produto (mobile) — pra ficar
   visível assim que a página abre, sem precisar rolar. AINDA
   PRECISA DAS CLASSES REAIS: pra reordenar via CSS eu preciso saber
   a classe do título e do bloco onde o preço está hoje (confirmar
   via inspecionar elemento, igual foi feito com as outras classes
   deste arquivo). Assim que eu tiver isso eu termino essa regra —
   por enquanto ela não faz nada.
   ============================================================ */

/* ============================================================
   Barra de navegação fixa embaixo da tela (mobile), estilo
   Shopee: Início / Categorias / Carrinho / Menu, sempre visível
   em qualquer página do site. "Categorias" e "Menu" abrem o
   mesmo menu (☰) que já existe no topo — o site não tem um menu
   só de categorias separado do menu de conta, então os dois
   atalhos abrem o mesmo painel. Confirmado via inspecionar
   elemento: botão do menu = .mobile-header__menu-button, link do
   carrinho = .indicator__button--cart. Montada via script — ver
   Integrações > Scripts > Footer. Esse CSS só cuida da aparência.
   ============================================================ */
@media (max-width: 767px) {
    #pv-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        height: 72px;
        display: flex;
        background: #fff;
        border-top: 1px solid #F0F0F0;
        box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.06);
    }

    .pv-bottom-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: #4a4a4a;
        background: none;
        border: none;
        text-decoration: none;
        font-size: 11px;
        font-weight: 500;
        padding: 0;
    }

    /* Estilo do item ativo mais parecido com o Mercado Livre: ícone
       fica azul e um pouco mais "grosso" (efeito parecido com ícone
       preenchido, sem precisar redesenhar o SVG) e o texto fica em
       negrito — os itens inativos continuam finos e neutros. */
    .pv-bottom-nav__item--active {
        color: #234A94;
        font-weight: 700;
    }
    .pv-bottom-nav__item--active .pv-bottom-nav__icon-wrap svg {
        stroke-width: 3.2;
    }

    .pv-bottom-nav__icon-wrap {
        position: relative;
        display: flex;
    }

    /* Selo com a quantidade de itens do carrinho, espelhando o
       número que já aparece no ícone do carrinho no topo do site */
    .pv-bottom-nav__badge {
        display: none;
        position: absolute;
        top: -4px;
        right: -8px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: #234A94;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    /* Espaço no final de toda página pra essa barra fixa não tampar
       o conteúdo. Nas páginas de produto, a barra de compra
       (#pv-sticky-buybar) empilha por cima dela, então precisa de
       mais espaço extra ainda (classe adicionada via script) */
    body {
        padding-bottom: 82px;
    }

    body.pv-has-buybar {
        padding-bottom: 162px;
    }
}

/* ============================================================
   Esconde o botão flutuante do WhatsApp no mobile — ele fica
   fixo no canto da tela e, com a barra de compra/navegação nova
   ocupando a parte de baixo, passou a cobrir o texto dos botões.
   Confirmado via inspecionar elemento: a.btn-whatsapp.btn-whatsapp-right
   (diferente dos ícones de compartilhar do título do produto, que
   são outro elemento e continuam aparecendo normalmente). Some só
   no mobile — no desktop ele continua exatamente como está hoje.
   ============================================================ */
@media (max-width: 767px) {
    a.btn-whatsapp.btn-whatsapp-right {
        display: none !important;
    }
}

/* ============================================================
   NOVO (2026-09-23) — Header mobile: "Entrar | Criar conta".
   O link "Criar conta" e o separador são inseridos via script
   (Integrações > Scripts > Footer) logo depois do "Entrar" que já
   existe — nada do tema é movido ou escondido.
   ============================================================ */
.pv-auth {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.pv-auth-sep {
    color: #234A94;
    opacity: .4;
    margin: 0 6px;
}
.pv-auth-criar {
    color: #234A94 !important;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

/* ============================================================
   NOVO (2026-09-23) — Modal do "Ver preço": em vez de ir direto
   pro login, abre um painel com "Entrar" e "Criar conta".
   z-index acima da barra fixa de baixo (#pv-bottom-nav = 1000).
   Montado via script (Integrações > Scripts > Footer).
   ============================================================ */
#pv-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,.5);
    display: none;
    align-items: flex-end;
    justify-content: center;
}
#pv-auth-modal.pv-open {
    display: flex;
}
.pv-auth-modal__box {
    background: #fff;
    width: 100%;
    max-width: 420px;
    border-radius: 16px 16px 0 0;
    padding: 28px 16px 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pv-auth-modal__close {
    position: absolute;
    top: 6px;
    right: 10px;
    border: 0;
    background: none;
    font-size: 30px;
    color: #999;
    line-height: 1;
}
.pv-auth-modal__title {
    font-size: 17px;
    font-weight: 700;
    color: #234A94;
    text-align: center;
    margin: 0 0 6px;
}
.pv-auth-modal__btn {
    display: block;
    text-align: center;
    padding: 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none !important;
}
.pv-auth-modal__btn--entrar {
    border: 1.5px solid #234A94;
    color: #234A94 !important;
    background: #fff;
}
.pv-auth-modal__btn--criar {
    background: #234A94;
    color: #fff !important;
}
@media (min-width: 768px) {
    #pv-auth-modal {
        align-items: center;
    }
    .pv-auth-modal__box {
        border-radius: 16px;
    }
}

/* ============================================================
   NOVO (2026-09-23) — CARA DE APP NO MOBILE
   Objetivo: o cliente sentir que está num app, não num site
   adaptado. Tudo só no mobile (até 767px); desktop fica igual.
   Classes confirmadas via inspecionar: faixa verde = .topbar-message,
   barra cinza da localização = .topbar (botão
   .topbar-dropdown__btn que abre #modal-location), carrossel =
   .block-slideshow (Owl Carousel). A linha "Entregar em ... / Frete
   grátis" e a fileira de categorias são montadas via script
   (Integrações > Scripts > Footer).
   ============================================================ */
@media (max-width: 767px) {

    /* 1. Fonte e toque de app ------------------------------------ */
    body {
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", sans-serif;
        -webkit-text-size-adjust: 100%;
    }
    a, button, .btn, input, [role="button"] {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    a, button, .btn, #pv-bottom-nav, .pv-cats {
        -webkit-user-select: none;
        user-select: none;
    }
    .btn:active,
    .pv-cat:active,
    .pv-loc-row:active {
        transform: scale(0.97);
        transition: transform .08s ease;
    }

    /* 2. Some as faixas de site (verde e cinza) ------------------- */
    /* O conteúdo delas volta como uma linha compacta abaixo da busca
       (#pv-loc-row), montada pelo script. O botão original da
       localização continua no HTML, só escondido — a linha nova
       clica nele por trás, então o modal de região funciona igual. */
    /* CORRIGIDO: a barra cinza (.topbar) só some para quem NÃO está
       logado. Logado, ela carrega o seletor de cliente/CNPJ, a forma de
       pagamento (PIX etc.) e o menu da conta (Meus pedidos, Títulos,
       Alterar cliente, Sair) — por isso fica, mas compacta (bloco 7).
       A classe .pv-guest é colocada no <html> pelo script do Footer
       quando o header NÃO tem .mobile-header--logged. */
    .topbar-message,
    .pv-guest .topbar {
        display: none !important;
    }

    /* 3. Header único, fixo e sem sombra ------------------------- */
    .mobile-header {
        position: sticky;
        top: 0;
        z-index: 900;
        background: #fff;
    }
    .mobile-header,
    .mobile-header__panel,
    .mobile-header__body {
        box-shadow: none !important;
        border-bottom: none !important;
        background: #fff !important;
    }
    .mobile-header__logo img {
        max-height: 26px;
        max-width: 140px;
    }

    /* "Entrar | Criar conta": mesmo peso, mesma cor, sem sublinhado */
    .pv-auth a,
    .pv-auth .pv-auth-criar {
        color: #234A94 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
    }
    .pv-auth a i,
    .pv-auth a svg {
        display: none !important;
    }
    .pv-auth-sep {
        margin: 0 5px;
        opacity: .35;
    }

    /* Linha "Entregar em Rio de Janeiro ⌄" + selo "Frete grátis" */
    #pv-loc-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 0 16px 14px;
        margin-top: -2px;
        background: #fff;
    }
    .pv-loc-row {
        display: flex;
        align-items: center;
        gap: 5px;
        min-width: 0;
        border: none;
        background: none;
        padding: 0;
        color: #333;
        font-size: 14px;
        font-weight: 400;
    }
    .pv-loc-row b {
        font-weight: 600;
        color: #222;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pv-frete-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        flex-shrink: 0;
        background: #E3F7E8;
        color: #1E7B3A;
        border-radius: 999px;
        padding: 4px 11px;
        font-size: 13px;
        font-weight: 500;
    }

    /* 4. Fileira de categorias (ícones redondos, rola pro lado) --- */
    .pv-cats {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px 16px 16px;
        margin: 0;
        background: #fff;
    }
    .pv-cats::-webkit-scrollbar {
        display: none;
    }
    .pv-cat {
        flex-shrink: 0;
        width: 76px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-decoration: none !important;
    }
    .pv-cat__icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #EDF1F8;
        color: #234A94;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .pv-cat__icon svg {
        width: 28px;
        height: 28px;
    }
    .pv-cat__label {
        font-size: 13px;
        font-weight: 400;
        color: #222;
        text-align: center;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* 5. Carrossel como card de app: sem setas, cantos arredondados,
          PONTA DO PRÓXIMO BANNER aparecendo à direita (convite pra
          arrastar), indicador discreto.
          Como funciona a "ponta": a área do carrossel fica 40px mais
          estreita à direita e o Owl deixa de cortar o que passa da
          borda (.owl-stage-outer overflow visível) — o próximo slide
          aparece nesse espaço. O corte final é feito pelo
          .block-slideshow inteiro, pra não criar rolagem lateral na
          página. Nenhuma configuração do Owl é alterada. */
    .block-slideshow .owl-nav,
    .block-slideshow .owl-prev,
    .block-slideshow .owl-next,
    .block-slideshow__arrow {
        display: none !important;
    }
    .block-slideshow {
        overflow: hidden;
        margin-bottom: 8px;
    }
    .block-slideshow .container {
        padding-left: 0;
        padding-right: 0;
        max-width: none;
    }
    .block-slideshow__body {
        margin: 0 40px 0 16px !important;
        border-radius: 0;
        overflow: visible !important;
    }
    .block-slideshow .owl-stage-outer {
        overflow: visible !important;
    }
    .block-slideshow .owl-item {
        padding-right: 10px;
        box-sizing: border-box;
    }
    .block-slideshow__slide,
    .block-slideshow .owl-item > a,
    .block-slideshow .owl-item img {
        border-radius: 16px;
        overflow: hidden;
        display: block;
    }
    .block-slideshow .owl-carousel .owl-dots {
        display: flex;
        justify-content: center;
        gap: 5px;
        margin-top: 12px;
    }
    .block-slideshow .owl-carousel .owl-dot {
        width: 6px !important;
        height: 6px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        border: none !important;
        padding: 0 !important;
        background: #C9D3E8 !important;
    }
    .block-slideshow .owl-carousel .owl-dot.active {
        width: 18px !important;
        background: #234A94 !important;
    }

    /* 6. Títulos de seção no padrão de app (grande, escuro) ------- */
    .block-header__title {
        font-size: 19px;
        font-weight: 600;
        color: #111;
    }
}


/* ============================================================
   NOVO (2026-09-23) — CARA DE APP, PARTE 2 (mobile até 767px)
   Classes lidas direto do site (inspeção feita logado):
   - busca mobile: .mobile-header__search-form / -input / -button
     (o microfone é .voice-btn; a lupa é o último botão do form)
   - lista: .products-view__layout-grid > .products-list__body >
     .products-list__item > .product-card (.product-card__image,
     __badges-list, __name, __rating-legend, __prices, __new-price,
     __buttons > .row > .col-12 com .input-number e __addtocart)
   - carrinho E checkout são a MESMA página (/carrinho): tabela de
     pagamento, .cart-table--product, botões, cards Cliente/Endereço/
     Entrega (.freight-methods) e card Cupom/Resumo
     (.checkout__totals, .cart__order-button)
   ============================================================ */
@media (max-width: 767px) {

    /* 7. Barra da conta (logado): compacta, estilo chips ---------- */
    .topbar {
        background: #fff !important;
        border-bottom: 1px solid #F1F1F1;
        font-size: 13px;
    }
    .topbar .topbar-dropdown__btn {
        background: #F1EFEA;
        border-radius: 999px;
        padding: 4px 12px !important;
        height: auto;
        margin: 6px 4px;
        font-size: 12px;
        font-weight: 500;
        color: #333;
    }

    /* 8. Busca do header mobile (classes reais) ------------------- */
    .mobile-header__search-form {
        display: flex !important;
        align-items: center;
        height: 44px;
        background: #F1EFEA !important;
        border: none !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        overflow: hidden;
        padding: 0 4px;
    }
    .mobile-header__search-input {
        flex: 1;
        min-width: 0;
        height: 44px;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none;
        font-size: 15px !important;
        color: #222;
        padding: 0 6px !important;
    }
    .mobile-header__search-input::placeholder {
        color: #8A8A8A;
        opacity: 1;
    }
    .mobile-header__search-button {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #6B6B6B !important;
        width: 36px;
        height: 44px;
        font-size: 17px;
    }
    /* lupa à esquerda, microfone à direita (padrão de app) */
    .mobile-header__search-form > .mobile-header__search-button:not(.voice-btn) {
        order: -1;
    }
    .mobile-header__search-form > .voice-btn {
        order: 5;
    }

    /* 9. Títulos e navegação de página ---------------------------- */
    .page-header__breadcrumb,
    .page-header__back {
        display: none !important;
    }
    .page-header__container {
        padding-top: 8px !important;
    }
    .page-header__title h1,
    .page-header__title {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #111 !important;
        text-align: left !important;
        text-transform: none;
        margin-bottom: 4px;
    }
    .view-options__layout,
    .view-options__divider {
        display: none !important;
    }
    .view-options__filters-button {
        border-radius: 999px !important;
        background: #F1EFEA !important;
        border: none !important;
        color: #222 !important;
        height: 34px;
        padding: 0 14px !important;
        font-size: 13px;
    }

    /* 10. Grade de produtos: 2 colunas justas --------------------- */
    .products-view__layout-grid .products-list__body {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -4px !important;
    }
    .products-view__layout-grid .products-list__item {
        width: calc(50% - 8px) !important;
        max-width: none !important;
        margin: 4px !important;
        display: flex;
    }

    /* 11. Card de produto estilo app ------------------------------ */
    .product-card {
        width: 100%;
        margin: 0 !important;
        min-height: 0 !important;
        padding: 8px !important;
        border: 1px solid #EEF0F3 !important;
        border-radius: 14px !important;
        background: #fff;
        position: relative;
        box-shadow: none !important;
    }
    .block-products-carousel .product-card {
        margin: 4px !important;
    }
    .product-card__image {
        background: #fff;
        border: 1px solid #F2F3F5;
        border-radius: 10px;
        padding: 10px !important;
        margin-bottom: 8px !important;
    }
    .product-card__image img {
        max-height: 120px;
        object-fit: contain;
    }
    .product-card__badges-list {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 2;
    }
    .product-card__info {
        text-align: left !important;
        padding: 0 2px !important;
    }
    .product-card__name,
    .product-card__name a {
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        color: #222 !important;
        text-transform: none;
    }
    .product-card__name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 34px;
        margin-bottom: 2px;
    }
    .product-card__rating-legend {
        font-size: 11px !important;
        color: #8A8A8A !important;
        margin: 0 !important;
        text-align: left !important;
    }
    .product-card__actions {
        padding: 6px 2px 0 !important;
    }
    .product-card__prices {
        text-align: left !important;
        min-height: 0 !important;
        margin: 4px 0 8px !important;
    }
    .product-card__new-price,
    .product-card__price {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #234A94 !important;
        text-align: left !important;
    }
    .product-card__old-price {
        font-size: 11px !important;
        color: #999 !important;
    }

    /* Quantidade + adicionar lado a lado: contador à esquerda,
       botão quadrado só com ícone à direita (texto "Adicionar ao
       carrinho" some visualmente, o botão é o mesmo). */
    .product-card__buttons .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 6px;
        margin: 0 !important;
    }
    .product-card__buttons .row > [class*="col-"] {
        flex: 1 1 auto;
        max-width: none !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .product-card__buttons .row > [class*="col-"]:last-child {
        flex: 0 0 44px;
    }
    .product-card .input-number {
        width: 100%;
    }
    .product-card .input-number__input {
        height: 40px !important;
        border: 1px solid #E3E3E3 !important;
        border-radius: 12px !important;
        background: #fff !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #222 !important;
        text-align: center;
        box-shadow: none !important;
    }
    .product-card .input-number__add,
    .product-card .input-number__sub {
        width: 30px !important;
    }
    .product-card__addtocart {
        width: 44px !important;
        height: 40px !important;
        min-width: 44px;
        padding: 0 !important;
        border-radius: 12px !important;
        font-size: 0 !important;
        white-space: nowrap;
    }
    .product-card__addtocart svg {
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
    }

    /* "Ver preço" (deslogado): contorno azul, estilo app */
    .product-card__login {
        background: #fff !important;
        border: 1.5px solid #234A94 !important;
        color: #234A94 !important;
        border-radius: 12px !important;
        height: 40px;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .product-card__login::before {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    /* 12. CARRINHO / CHECKOUT (/carrinho) ------------------------- */
    .container__cart-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .container__cart-container .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .container__cart-container__split-title {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #111;
        margin: 8px 0 !important;
    }

    /* Assistente de pedido: vira um card discreto */
    .caw-container {
        border: 1px solid #EEF0F3 !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        overflow: hidden;
    }

    /* Barra de progresso do pedido mínimo (montada pelo script);
       as duas faixas amarelas de "Pedido mínimo" somem quando ela
       aparece (.pv-minbar-on no alerta original) */
    .alert-warning__mensagens.pv-minbar-on {
        display: none !important;
    }
    #pv-minbar {
        background: #FFF4E5;
        border-radius: 12px;
        padding: 12px 14px;
        margin: 4px 0 12px;
    }
    #pv-minbar.pv-minbar--ok {
        background: #E3F7E8;
    }
    .pv-minbar__txt {
        font-size: 13px;
        color: #8A4B00;
    }
    .pv-minbar--ok .pv-minbar__txt {
        color: #1E7B3A;
    }
    .pv-minbar__txt b {
        font-weight: 700;
    }
    .pv-minbar__track {
        height: 6px;
        background: #FFE0B8;
        border-radius: 3px;
        margin-top: 8px;
        overflow: hidden;
    }
    .pv-minbar--ok .pv-minbar__track {
        background: #BFE8CB;
    }
    .pv-minbar__fill {
        height: 100%;
        background: #F7941D;
        border-radius: 3px;
    }
    .pv-minbar--ok .pv-minbar__fill {
        background: #16A34A;
    }

    /* Forma e prazo de pagamento: selects grandes com rótulo em cima */
    .container__cart-container .cart-table:not(.cart-table--product) thead {
        display: none;
    }
    .container__cart-container .cart-table:not(.cart-table--product),
    .container__cart-container .cart-table:not(.cart-table--product) tbody,
    .container__cart-container .cart-table:not(.cart-table--product) tr,
    .container__cart-container .cart-table:not(.cart-table--product) td {
        display: block !important;
        width: 100% !important;
        border: none !important;
        padding: 0 !important;
    }
    .container__cart-container .cart-table:not(.cart-table--product) td {
        margin-bottom: 10px;
    }
    .container__cart-container .cart-table:not(.cart-table--product) td::before {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #666;
        margin-bottom: 4px;
    }
    .container__cart-container .cart-table:not(.cart-table--product) td:nth-child(1)::before {
        content: "Forma de pagamento";
    }
    .container__cart-container .cart-table:not(.cart-table--product) td:nth-child(2)::before {
        content: "Prazo de pagamento";
    }
    .container__cart-container select.form-control {
        height: 46px !important;
        border-radius: 12px !important;
        border: 1px solid #E3E3E3 !important;
        font-size: 15px !important;
        background-color: #fff;
    }

    /* Itens do carrinho: cada linha vira um card compacto
       [✓][foto] Nome ........................ [lixeira]
                 R$ unitário
                 [ − 2 + ]              R$ subtotal          */
    .cart-table--product thead,
    .cart-table--product .cart-table__head {
        display: none !important;
    }
    .cart-table--product,
    .cart-table--product tbody {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }
    .cart-table--product .cart-table__body > tr.cart-table__row {
        display: grid !important;
        grid-template-columns: 22px 60px minmax(0, 1fr) auto;
        grid-template-areas:
        "sel img prod rem"
        "sel img unit unit"
        ".   .   qty  tot";
        column-gap: 10px;
        row-gap: 4px;
        align-items: center;
        padding: 12px 0 !important;
        border: none !important;
        border-bottom: 1px solid #F1F1F1 !important;
    }
    .cart-table--product .cart-table__body > tr > td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
        width: auto !important;
        text-align: left !important;
    }
    .cart-table--product .cart-table__column--select {
        grid-area: sel;
        align-self: start;
        padding-top: 18px !important;
    }
    .cart-table--product .cart-table__column--image {
        grid-area: img;
        align-self: start;
    }
    .cart-table--product .cart-table__column--product {
        grid-area: prod;
    }
    .cart-table--product .cart-table__column--remove {
        grid-area: rem;
        align-self: start;
        color: #BA1A1A;
        font-size: 16px;
    }
    .cart-table--product .cart-table__column--price {
        grid-area: unit;
        font-size: 12px;
        color: #888;
    }
    .cart-table--product .cart-table__column--quantity {
        grid-area: qty;
    }
    .cart-table--product .cart-table__column--total {
        grid-area: tot;
        text-align: right !important;
        font-weight: 700;
        color: #234A94;
        font-size: 15px;
    }
    .cart-table--product .cart-table__column--image img {
        width: 60px !important;
        height: 60px !important;
        object-fit: contain;
        background: #fff;
        border: 1px solid #F2F3F5;
        border-radius: 10px;
        padding: 4px;
    }
    .cart-table__product-name {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #222 !important;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .cart-table--product .cart-table__column--product br {
        display: none;
    }
    .cart-table__column--product--pack {
        display: block;
        font-size: 11px;
        color: #8A8A8A;
        margin-top: 2px;
    }
    .cart-table--product .input-number {
        width: 116px;
    }
    .cart-table--product .input-number__input {
        height: 36px !important;
        border-radius: 999px !important;
        border: 1px solid #E3E3E3 !important;
        font-weight: 600 !important;
        text-align: center;
    }
    /* Linha de resumo (Itens / Qtd total / valor) */
    .cart-table--product tr.pv-sum-row {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        background: #F7F8FA;
        border-radius: 12px;
        padding: 10px 12px !important;
        margin-top: 8px;
        border: none !important;
    }
    .cart-table--product .cart-table__column--summary-empty {
        display: none !important;
    }

    /* Botões de ação: some Importar/Imprimir (uso de desktop);
       Limpar vira link vermelho; Atualizar vira contorno */
    .container__cart-container form a.btn.btn-xs {
        display: none !important;
    }
    .cart__update-button {
        background: #fff !important;
        color: #234A94 !important;
        border: 1.5px solid #234A94 !important;
        border-radius: 12px !important;
        height: 40px;
    }

    /* Cards Cliente/Endereço/Entrega e Cupom/Resumo */
    .container__cart-container .card {
        border: 1px solid #EEF0F3 !important;
        border-radius: 16px !important;
        box-shadow: none !important;
        margin-bottom: 12px;
    }
    .container__cart-container .card-body {
        padding: 16px !important;
    }
    .container__cart-container .card h5 {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #111;
        margin: 14px 0 6px !important;
    }
    .container__cart-container .card h5:first-child {
        margin-top: 0 !important;
    }

    /* Opções de entrega como cards de seleção */
    .freight-methods__list {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none;
    }
    .freight-methods__item {
        border: 1.5px solid #E6E6E6;
        border-radius: 12px;
        padding: 12px !important;
        margin-bottom: 8px;
    }
    .freight-methods__item.pv-freight-on {
        border-color: #234A94;
        background: #F3F6FC;
    }

    /* Resumo */
    .checkout__totals th, .checkout__totals td {
        font-size: 14px;
        padding: 6px 0 !important;
        border: none !important;
    }
    .checkout__totals td {
        text-align: right;
    }

    /* Finalizar pedido grande; rascunho vira link secundário */
    .cart__order-button.btn-success {
        height: 52px;
        border-radius: 14px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        background: #234A94 !important;
        border-color: #234A94 !important;
    }
    button[data-click="salvarCarrinhoRascunho"] {
        background: transparent !important;
        border: none !important;
        color: #234A94 !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        text-decoration: none;
    }

    /* Barra fixa "Total · Finalizar pedido" (montada pelo script,
       aciona o botão real). Some quando o botão real está na tela. */
    #pv-cart-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 72px;
        z-index: 999;
        background: #fff;
        padding: 10px 12px;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .10);
        transition: transform .2s ease;
        will-change: transform;
    }
    #pv-cart-bar.pv-hide {
        transform: translateY(120%);
        pointer-events: none;
    }
    #pv-cart-bar.pv-cart-bar--bloqueado button {
        background: #8C9CC2;
    }
    #pv-cart-bar button {
        width: 100%;
        height: 50px;
        border: none;
        border-radius: 14px;
        background: #234A94;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 18px;
        font-size: 15px;
        font-weight: 700;
    }
}


/* ============================================================
   AJUSTES após teste no site real (2026-09-23), num celular de
   390px simulado, logado. O CSS do tema vem de outro domínio e
   algumas regras dele vencem as nossas (ex.: botão de adicionar
   com largura mínima de 150px, foto com altura mínima de 240px,
   rótulos "Unidade:/Quantidade:/Subtotal" no carrinho). Por isso
   estas regras usam "html body" na frente, pra ganhar prioridade.
   ============================================================ */
@media (max-width: 767px) {
    html, body {
        overflow-x: clip;
    }

    /* sem rolagem lateral; não quebra o header fixo */
    html body .mobile-header__search {
        box-shadow: none !important;
    }

    /* Card de produto */
    html body .product-card .product-card__image {
        min-height: 0 !important;
        height: 132px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    html body .product-card .product-card__image a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    html body .product-card .product-card__image img {
        max-height: 112px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    html body .product-card .product-card__info {
        min-height: 0 !important;
        flex-grow: 0 !important;
    }
    html body .product-card .product-card__buttons {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    html body .product-card .product-card__buttons .row {
        width: 100% !important;
    }
    html body .product-card .product-card__buttons .row > [class*="col-"] {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    html body .product-card .product-card__buttons .row > [class*="col-"]:last-child {
        flex: 0 0 44px !important;
        max-width: 44px !important;
    }
    html body .product-card .product-card__buttons .product-card__addtocart {
        min-width: 44px !important;
        max-width: 44px !important;
        width: 44px !important;
    }
    html body .product-card .input-number {
        width: 100% !important;
        min-width: 0 !important;
    }
    /* "Adicionar à Lista" vira link discreto, sem caixa */
    html body .product-card .product-card__actions .product-card__addtolist.btn {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #6B6B6B !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        padding: 6px 0 0 !important;
        width: auto !important;
    }

    /* Botão "Filtros": tira a caixa branca interna do tema */
    html body .view-options__filters-button .filters-button,
    html body .filters-button * {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Carrinho: sem os rótulos do tema dentro das células e sem
       vazar pra direita */
    html body .cart-table--product td::before {
        display: none !important;
        content: none !important;
    }
    html body .container__cart-container .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    html body .container__cart-container .row > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (max-width: 767px) {
    /* Carrossel: corta o slide ANTERIOR (que aparecia na borda
       esquerda por causa do loop) e mantém a ponta do PRÓXIMO. */
    .block-slideshow .owl-stage-outer {
        clip-path: inset(-20px -100vw -20px 0);
    }
    /* Carrinho: preço unitário alinhado à esquerda, junto do nome */
    html body .cart-table--product .cart-table__column--price,
    html body .cart-table--product .cart-table__column--price * {
        text-align: left !important;
    }
}

/* ============================================================
   DESEMPENHO (2026-09-23) — rolagem mais fluida no celular
   - removido mix-blend-mode das fotos (era o efeito mais pesado:
     o navegador recompunha cada foto a cada quadro da rolagem)
   - removidas animações de largura (forçam recalcular layout)
   - trocado :has() por classes colocadas pelo script
   - barras fixas (menu de baixo, compra, carrinho) em camada própria da GPU
   - fileira de categorias e carrossel com rolagem contida
   ============================================================ */
@media (max-width: 767px) {
    /* (o header não entra aqui de propósito: transform nele poderia
       deslocar menus e sugestões de busca que abrem por cima) */
    #pv-bottom-nav,
    #pv-sticky-buybar,
    #pv-cart-bar {
        transform: translateZ(0);
        backface-visibility: hidden;
    }
    .pv-cats {
        overscroll-behavior-x: contain;
        contain: content;
    }
    .product-card {
        contain: layout paint;
    }
}

/* ============================================================
   NOVO (2026-09-23) — CARREGAMENTO E TRANSIÇÃO DE PÁGINAS
   1) Transição entre páginas estilo app (View Transitions): a
      página atual some rápido e a nova entra com um leve deslize.
      Header e menu de baixo ficam parados (não "piscam") porque
      têm nome próprio na transição. Navegadores que não suportam
      (iPhone com iOS abaixo de 18.2) simplesmente trocam de página
      como hoje — nada quebra.
   2) Barra de progresso fina no topo assim que o cliente toca num
      link (montada pelo script), pra resposta ser imediata.
   3) content-visibility: o navegador só desenha produtos e rodapé
      quando chegam perto da tela — a página aparece mais rápido.
   Quem ativou "reduzir movimento" no celular não vê animação.
   ============================================================ */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    /* AJUSTE: transição encurtada (antes 0,14s + 0,22s). Sem animar a
       saída; a nova página entra só com um fade de 0,12s. */
    ::view-transition-old(root) {
        animation: none;
    }
    ::view-transition-new(root) {
        animation: pv-page-in .12s ease-out both;
    }

    .mobile-header {
        view-transition-name: pv-header;
    }
    #pv-bottom-nav {
        view-transition-name: pv-nav;
    }
    ::view-transition-group(pv-header),
    ::view-transition-group(pv-nav) {
        animation-duration: 0s;
    }
}
@keyframes pv-page-out {
    to {
        opacity: 0;
    }
}
@keyframes pv-page-in {
    from {
        opacity: .4;
    }
    to {
        opacity: 1;
    }
}

#pv-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 100000;
    pointer-events: none;
    background: #234A94;
    transform-origin: 0 50%;
    transform: scaleX(0);
    opacity: 0;
}
#pv-progress.pv-on {
    opacity: 1;
    animation: pv-progress 2.4s cubic-bezier(.1, .6, .2, 1) forwards;
}
@keyframes pv-progress {
    0% {
        transform: scaleX(0);
    }
    40% {
        transform: scaleX(.55);
    }
    100% {
        transform: scaleX(.9);
    }
}

@media (max-width: 767px) {
    .products-view__layout-grid .products-list__item {
        content-visibility: auto;
        contain-intrinsic-size: auto 330px;
    }
    .site-footer {
        content-visibility: auto;
        contain-intrinsic-size: auto 900px;
    }
}

/* Barra fixa da página de produto, cliente NÃO logado: "Ver preço"
   centralizado ocupando a barra toda (sem contador e sem preço). O
   toque abre o painel "Entrar / Criar conta". */
@media (max-width: 767px) {
    #pv-sticky-buybar .pv-sticky-buybar__btn.pv-sticky-buybar__btn--verpreco {
        justify-content: center;
    }
    #pv-sticky-buybar .pv-sticky-buybar__btn--verpreco .pv-sticky-buybar__btn-price {
        display: none;
    }
}

/* ============================================================
   NOVO (2026-09-23) — MELHORIAS PARA O COMPUTADOR (768px ou mais)
   Classes lidas do site no computador: header = header.site__header
   (.site-header: barra de cima + logo/busca/carrinho + menu azul
   .nav-panel); produto = .product__name, .product__features (lista
   de códigos), .product__actions, .product-gallery__featured.
   Nada é movido; só visual.
   ============================================================ */

/* Barra de pedido mínimo do carrinho: vale em qualquer tela */
@media (min-width: 768px) {
    .alert-warning__mensagens.pv-minbar-on {
        display: none !important;
    }
    #pv-minbar {
        background: #FFF4E5;
        border-radius: 12px;
        padding: 14px 18px;
        margin: 4px 0 16px;
        max-width: 640px;
    }
    #pv-minbar.pv-minbar--ok {
        background: #E3F7E8;
    }
    .pv-minbar__txt {
        font-size: 14px;
        color: #8A4B00;
    }
    .pv-minbar--ok .pv-minbar__txt {
        color: #1E7B3A;
    }
    .pv-minbar__txt b {
        font-weight: 700;
    }
    .pv-minbar__track {
        height: 6px;
        background: #FFE0B8;
        border-radius: 3px;
        margin-top: 8px;
        overflow: hidden;
    }
    .pv-minbar--ok .pv-minbar__track {
        background: #BFE8CB;
    }
    .pv-minbar__fill {
        height: 100%;
        background: #F7941D;
        border-radius: 3px;
    }
    .pv-minbar--ok .pv-minbar__fill {
        background: #16A34A;
    }
}

@media (min-width: 992px) {

    /* 1. Header fixo: ao rolar, some só a barra fina de cima e
          ficam sempre à mão a busca, o carrinho e o menu azul */
    header.site__header {
        position: sticky;
        top: -40px;
        /* altura da barra "Rio de Janeiro / Entrar..." */
        z-index: 900;
        background: #fff;
        box-shadow: 0 1px 0 #EEF0F3;
    }
    .topbar a {
        transition: color .15s ease;
    }
    .topbar a:hover {
        color: #234A94 !important;
    }

    /* Menu azul: sublinhado laranja no item sob o mouse */
    .nav-links__item-link {
        position: relative;
    }
    .nav-links__item-link::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 6px;
        height: 2px;
        border-radius: 2px;
        background: #FF8E00;
        transform: scaleX(0);
        transition: transform .18s ease;
    }
    .nav-links__item-link:hover::after {
        transform: scaleX(1);
    }
    .nav-links__item:last-child .nav-links__item-link::after {
        display: none;
    }

    /* 2. Cards de produto: mais limpos e com resposta ao mouse */
    .product-card {
        min-height: 0 !important;
        border: 1px solid #EEF0F3 !important;
        border-radius: 14px !important;
        padding: 12px !important;
        box-shadow: none;
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .product-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(20, 40, 90, .10);
        border-color: #DCE3F0 !important;
    }
    html body .product-card .product-card__image {
        height: 170px !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px !important;
    }
    html body .product-card .product-card__image img {
        max-height: 150px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain;
        transition: transform .25s ease;
    }
    .product-card:hover .product-card__image img {
        transform: scale(1.04);
    }
    html body .product-card .product-card__info {
        min-height: 0 !important;
    }
    .product-card__name,
    .product-card__name a {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        color: #222 !important;
    }
    .product-card__name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 36px;
    }
    .product-card__rating-legend {
        font-size: 11px !important;
        color: #8A8A8A !important;
    }
    .product-card__new-price,
    .product-card__price {
        font-size: 18px !important;
        font-weight: 700 !important;
    }
    /* "Ver preço" e "Adicionar": largura toda, altura confortável */
    .product-card__login,
    .product-card__addtocart {
        height: 42px;
        border-radius: 10px !important;
    }
    .product-card__login {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
    }

    /* 3. Lista de produtos: menu lateral mais legível */
    .widget-filters__item a,
    .block-sidebar a {
        border-radius: 8px;
        transition: background .15s ease, color .15s ease;
    }
    .block-sidebar a:hover {
        background: #F3F6FC;
        color: #234A94 !important;
    }
    .page-header__title h1 {
        font-size: 26px;
        font-weight: 700;
        color: #111;
        text-transform: none;
    }

    /* 4. Página do produto */
    .product-gallery__featured {
        border: 1px solid #EEF0F3 !important;
        border-radius: 16px !important;
    }
    .product__name {
        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 1.25;
        color: #111 !important;
        margin-bottom: 10px;
    }
    .product-share {
        transform: scale(.85);
        transform-origin: left center;
        opacity: .85;
    }
    /* Lista de códigos vira uma ficha técnica em 2 colunas */
    .product__features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 20px;
        background: #F7F8FA;
        border-radius: 12px;
        padding: 14px 18px !important;
        margin: 14px 0 18px !important;
        list-style: none;
        font-size: 13px;
        color: #555;
    }
    .product__features li {
        padding: 3px 0;
        border-bottom: 1px dashed #E3E6EC;
    }
    .product__features li:empty {
        display: none;
    }
    .product__features--embalagem-nome,
    .product__features--marca {
        font-weight: 600;
        color: #222;
    }
    /* Botão principal grande */
    .product__actions .btn,
    .product__actions a.btn {
        min-width: 280px;
        height: 52px;
        font-size: 16px !important;
        border-radius: 12px !important;
    }
    .product__actions a.btn.btn-light[href*="/entrar"]::before {
        font-size: 16px;
        font-weight: 700;
    }

    /* 5. Carrinho no computador */
    .container__cart-container .card {
        border: 1px solid #EEF0F3 !important;
        border-radius: 16px !important;
        box-shadow: none !important;
    }
    .cart-table--product .cart-table__row {
        transition: background .15s ease;
    }
    .cart-table--product .cart-table__body .cart-table__row:hover {
        background: #FAFBFD;
    }
    .cart__order-button.btn-success {
        height: 54px;
        border-radius: 14px !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        background: #234A94 !important;
        border-color: #234A94 !important;
    }
    .freight-methods__item {
        border: 1.5px solid #E6E6E6;
        border-radius: 12px;
        padding: 12px !important;
        margin-bottom: 8px;
        list-style: none;
    }
    .freight-methods__item.pv-freight-on {
        border-color: #234A94;
        background: #F3F6FC;
    }
}

/* Transição de páginas também no computador (mesma do celular) */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
    ::view-transition-old(root) {
        animation: none;
    }
    ::view-transition-new(root) {
        animation: pv-page-in .12s ease-out both;
    }
    header.site__header {
        view-transition-name: pv-header-desk;
    }
    ::view-transition-group(pv-header-desk) {
        animation-duration: 0s;
    }
}
@media (max-width: 767px) {
    /* "Entrar | Criar conta" sempre como texto simples, mesmo que o
       "Entrar" do tema seja um botão (.btn) */
    html body .pv-auth a,
    html body .pv-auth button {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        height: auto !important;
        min-width: 0 !important;
        color: #234A94 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
    }
    html body .pv-auth {
        gap: 0;
    }
}

/* ============================================================
   AJUSTES a partir dos prints no iPhone, logado (2026-09-23)
   ============================================================ */

/* BUG: na página de produto, o botão original de adicionar deveria
   ficar escondido (a barra fixa de baixo faz esse papel), mas uma
   regra antiga (html .product-card__addtocart { display: inline-flex
   !important }) ganhava da regra de esconder — aparecia um quadrado
   verde solto na página. Esta vence as duas. */
html body .pv-hidden-for-buybar,
html body .product-card__addtocart.pv-hidden-for-buybar {
    display: none !important;
}

@media (max-width: 767px) {
    /* Quantidade da página de produto também fica só na barra fixa
       (o campo original continua na página, invisível, e é ele que a
       barra atualiza por trás). */
    body.pv-has-buybar .product__quantity {
        display: none !important;
    }

    /* Carrosséis de produto: sem setas no celular (passa com o dedo);
       as setas ficavam por cima do nome do produto */
    .block-products-carousel .owl-nav,
    .block-products-carousel__slider .owl-nav,
    .block-products-carousel .owl-prev,
    .block-products-carousel .owl-next {
        display: none !important;
    }

    /* Faixa "Baixe já o APP": mais baixa, pra não roubar a tela */
    .topbar-app {
        min-height: 0 !important;
        padding: 6px 0 !important;
    }
    .topbar-app img {
        height: 32px !important;
        padding: 4px !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }
    .topbar-app .btn {
        font-size: 13px !important;
        padding: 6px 12px !important;
        box-shadow: none !important;
    }

    /* Página de produto no celular */
    .product__name {
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        color: #111 !important;
        margin-bottom: 8px !important;
    }
    /* Ficha técnica compacta, em card cinza */
    .product__features {
        background: #F7F8FA;
        border-radius: 12px;
        padding: 10px 14px !important;
        margin: 10px 0 14px !important;
        list-style: none;
    }
    .product__features li {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
        color: #666 !important;
        padding: 1px 0 !important;
    }
    .product__features li:empty {
        display: none;
    }
    .product__features--embalagem-nome,
    .product__features--marca,
    .product__features--codigo {
        color: #222 !important;
        font-weight: 600;
    }
    .product__price,
    .product__new-price {
        font-size: 26px !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 767px) {
    /* Home: os blocos de 3 e 4 banners pequenos (Ofertas da Semana,
       Seja Atendido, Os Mais Vendidos...) viram uma fileira que passa
       com o dedo, em vez de empilhar banner por banner. Economiza
       várias telas de rolagem antes dos produtos. */
    .container__banner-3x .block-banner.row,
    .container__banner-4x .block-banner.row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        gap: 10px;
        margin: 8px -15px !important;
        padding: 0 16px;
    }
    .container__banner-3x .block-banner.row::-webkit-scrollbar,
    .container__banner-4x .block-banner.row::-webkit-scrollbar {
        display: none;
    }
    .container__banner-3x .block-banner.row > [class*="col-"],
    .container__banner-4x .block-banner.row > [class*="col-"] {
        flex: 0 0 82% !important;
        max-width: 82% !important;
        padding: 0 !important;
        margin: 0 !important;
        scroll-snap-align: center;
    }
    /* Espaçamento uniforme entre os blocos da home */
    .site__body .block-banner.mt-4 {
        margin-top: 12px !important;
    }
    .site__body .block-banner.mb-4 {
        margin-bottom: 12px !important;
    }
}