/*
 * Camada de estilo baseada no PDF de referência final ("Allnutrax Home
 * Finalizada OK"): tipografia limpa e discreta (sem caixa alta em título de
 * seção), ícones outline finos, botões em pílula, cards claros. A única
 * exceção é o bloco de frase de impacto "IT'S ALL, ALLNUTRAX", que usa uma
 * fonte condensada/itálica grande como destaque único da página.
 *
 * Este arquivo é carregado DEPOIS do style.css original do tema (não o
 * substitui), então é fácil de desativar: basta remover o enqueue em
 * functions.php (busque por "nutrax-nike-style").
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --nx-black: #111111;
    --nx-white: #ffffff;
    --nx-accent: #007456;
    --nx-gold: #c9974f;
}


/* ==========================================================================
   Tipografia dos títulos de seção: negrito, tamanho grande, SEM caixa alta
   ========================================================================== */

.home-produtos-listagem1-titulo,
.home-produtos-listagem2-titulo,
.home-depoimentos-reclameaqui-titulo,
.home-depoimentos-especialistas .home-produtos-listagem1-titulo,
.home-recomendados-titulo,
.home-listagem-posts .titulo {
    font-family: 'Inter', sans-serif;
    text-transform: none;
    font-weight: 800;
    letter-spacing: -0.6px;
    font-size: clamp(24px, 3.4vw, 36px);
    margin-bottom: 22px !important;
}

.home-banner-a .titulo {
    font-family: 'Inter', sans-serif;
    text-transform: none;
    font-weight: 600;
    font-size: 26px;
    letter-spacing: normal;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

body, p, a, span, div {
    -webkit-font-smoothing: antialiased;
}

/* Fundo levemente fora do branco puro: faz os cards brancos com sombra
   (cupom, depoimentos, especialistas, IT'S ALLNUTRAX) se destacarem em vez
   de se misturarem com o fundo da página. */
body {
    background: #faf9f7 !important;
}


/* ==========================================================================
   Botões: pílula preta, texto branco, discretos (sem caixa alta forçada)
   ========================================================================== */

.home-produtos-listagem1 .item .botao,
.home-produtos-listagem2 .item .botao,
.pack-button,
.pack2-button,
.home-banner-a .botao a,
.home-banner-b .botao,
.slide .botao,
.listagem-categoria .item .botao,
.comparativo-produto .botao {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px !important;
    letter-spacing: 0.2px;
    border-radius: 999px !important;
    background: var(--nx-black) !important;
    color: var(--nx-white) !important;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.home-produtos-listagem1 .item .botao *,
.home-produtos-listagem2 .item .botao *,
.pack-button *,
.pack2-button *,
.home-banner-a .botao a *,
.home-banner-b .botao *,
.slide .botao *,
.listagem-categoria .item .botao *,
.comparativo-produto .botao * {
    color: var(--nx-white) !important;
}

/* style.css original tem ".home-banner-b .botao i { color:#000 }" que é
   mais específico (seletor de tipo) que o "*" acima (universal) - por isso
   precisa ser sobrescrito explicitamente aqui, mesma pegadinha de sempre. */
.home-banner-b .botao i {
    color: var(--nx-white) !important;
}

.home-produtos-listagem1 .item .botao:hover,
.home-produtos-listagem2 .item .botao:hover,
.pack-button:hover,
.pack2-button:hover,
.home-banner-a .botao a:hover,
.home-banner-b .botao:hover,
.listagem-categoria .item .botao:hover {
    background: var(--nx-accent) !important;
}

.slide .tag {
    border-radius: 999px !important;
    padding: 6px 16px !important;
}


/* ==========================================================================
   Menu de categorias do topo: texto normal (sem caixa alta)
   ========================================================================== */

#topo-menu-categorias li a {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.1px;
}

/* traçado só aparece no item ativo/selecionado ou no hover (comportamento
   original do tema) - antes essa regra deixava a borda visível em todos */


/* ==========================================================================
   Ícones outline finos (substituem os antigos ícones sólidos do Font
   Awesome no cabeçalho e na barra de frete/desconto)
   ========================================================================== */

.icon-thin {
    vertical-align: middle;
    color: inherit;
}

#topo-icones-menu svg.icon-thin {
    color: #111;
}


/* ==========================================================================
   Cards de produto: imagem mais "editorial", leve zoom no hover
   ========================================================================== */

.home-produtos-listagem1 .item .imagem {
    background: #f5f5f5;
    overflow: hidden;
}

.home-produtos-listagem1 .item .imagem img {
    transition: transform 0.3s ease;
}

.home-produtos-listagem1 .item:hover .imagem img {
    transform: scale(1.05);
}

.home-produtos-listagem1 .nome {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.home-produtos-listagem1 .item .infos .valores .valor-pix {
    font-weight: 700;
}


/* ==========================================================================
   "Quem usa, recomenda": nome/preço ficam sobre a foto, com degradê escuro
   embaixo pra garantir leitura. Botão preto com texto BRANCO (o tema tem uma
   regra global "* { color:#000 !important }" que sobrescreve os filhos do
   botão se a gente não mirar neles também - por isso o seletor com "*").
   ========================================================================== */

/* o carrossel tem overflow-y:hidden (pra não vazar scrollbar horizontal),
   o que corta o topo do card quando ele sobe no hover - esse padding cria
   espaço de sobra pro efeito, e a margin negativa compensa pra não empurrar
   a fileira visualmente pra baixo */
.home-produtos-listagem2 {
    padding-top: 10px;
    margin-top: -10px;
}

.home-produtos-listagem2 .item {
    transition: transform .25s ease, box-shadow .25s ease;
}

.home-produtos-listagem2 .item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

.home-produtos-listagem2 .item .grupo {
    background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.75) 35%,
            rgba(0, 0, 0, 0.35) 70%,
            rgba(0, 0, 0, 0) 100%
    ) !important;
    padding: 14px !important;
    padding-top: 60px !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.home-produtos-listagem2 .item .grupo .infos .linha1 .nome {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: var(--nx-white) !important;
}

.home-produtos-listagem2 .item .grupo .infos .valores .valor-normal {
    color: var(--nx-white) !important;
}

.home-produtos-listagem2 .item .botao {
    background: var(--nx-white) !important;
    color: var(--nx-black) !important;
}

.home-produtos-listagem2 .item .botao * {
    color: var(--nx-black) !important;
}

.home-produtos-listagem2 .item .botao i {
    color: var(--nx-black) !important;
}

.home-produtos-listagem2 .item .botao:hover,
.home-produtos-listagem2 .item .botao:hover * {
    color: var(--nx-white) !important;
}


/* ==========================================================================
   Especialistas: bloco único grande (citação em destaque), não grade de
   cards pequenos - como no PDF de referência.
   ========================================================================== */

/* o fundo cinza sai da seção inteira e vira um card específico atrás de
   cada especialista, com cantos arredondados - como na referência */
.home-depoimentos-especialistas {
    background: transparent !important;
}

/* no mobile os cards ficam empilhados (um embaixo do outro); no desktop
   ficam lado a lado */
.home-depoimentos-especialistas .row {
    flex-direction: column !important;
    align-items: center;
}

.home-depoimentos-especialistas .row > .col-12.col-md-4 {
    width: 100%;
    max-width: 640px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 32px !important;
    background: var(--nx-white);
    border: 1px solid #ececec;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 28px;
    padding: 44px 36px !important;
}

@media (min-width: 768px) {
    .home-depoimentos-especialistas .row {
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 24px;
    }

    .home-depoimentos-especialistas .row > .col-12.col-md-4 {
        flex: 1 1 0;
        max-width: none;
        width: auto;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Cabeçalho de cada card: selo dourado à esquerda + foto à direita, lado a
   lado - como marcado na referência (dentro do card, não mais fora dele) */
.especialista-cabecalho {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.especialista-selo {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2px;
    color: var(--nx-gold) !important;
    text-align: left;
}

.home-depoimentos-especialistas .foto {
    width: 76px;
    height: 76px;
    border-radius: 999px;
    background-size: cover;
    background-position: center;
    margin: 0 !important;
    flex-shrink: 0;
}

.home-depoimentos-especialistas .depoimento {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: normal !important;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.3px;
    color: var(--nx-black);
    text-align: left;
    quotes: none;
}

.home-depoimentos-especialistas .dados {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    margin-top: 12px;
    color: #555 !important;
    text-align: left;
}


/* ==========================================================================
   Packs: compre mais, pague menos - 3 cards de combo com preço, itens e
   botão que já adiciona tudo no carrinho.
   ========================================================================== */

.home-packs-titulo {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
    margin-bottom: 8px;
}

.home-packs-titulo::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--nx-accent);
    margin: 16px auto 0 auto;
    border-radius: 3px;
}

.home-packs-grid {
    display: flex;
    align-items: stretch;
    gap: 24px;
    margin-top: 32px;
    flex-wrap: wrap;
    justify-content: center;
}

.home-pack-card {
    flex: 1 1 300px;
    max-width: 360px;
    position: relative;
    background: #fff;
    border: 1.5px solid #e2e2e2;
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
}

.home-pack-card.home-pack-destaque {
    border-color: var(--nx-accent);
    border-width: 2px;
    box-shadow: 0 8px 24px rgba(0, 116, 86, 0.12);
}

.pack-selo {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--nx-accent);
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.pack-tag {
    display: inline-block;
    background: #eaf1fb;
    color: #2a5ba0;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.pack-nome {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: var(--nx-black);
    margin-bottom: 16px;
}

.pack-itens {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

.pack-itens li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}

.pack-itens li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--nx-accent);
    font-weight: 700;
}

.pack-precos {
    margin-bottom: 18px;
}

.pack-preco-antigo {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
}

.pack-preco-atual {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: var(--nx-black);
}

.pack-economia {
    display: inline-block;
    margin-top: 8px;
    background: #e6f5f0;
    color: var(--nx-accent);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 999px;
}

.pack-botao {
    display: block;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 13px;
    border-radius: 999px;
    border: 1.5px solid var(--nx-black);
    background: #fff;
    color: var(--nx-black) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.home-pack-card.home-pack-destaque .pack-botao {
    background: var(--nx-accent);
    border-color: var(--nx-accent);
    color: #fff !important;
}

.pack-botao:hover {
    background: var(--nx-black);
    border-color: var(--nx-black);
    color: #fff !important;
}

.home-pack-card.home-pack-destaque .pack-botao:hover {
    background: var(--nx-black);
    border-color: var(--nx-black);
}

@media (max-width: 1024px) {
    /* nunca empilha/quebra - vira carrossel horizontal, cada pack ocupa
       quase a tela toda e "corre pro lado" se não couber. Deixa uma
       "espiadinha" do próximo card + respiro no final pra ficar claro que
       dá pra arrastar, em vez de parecer cortado. Vale pra mobile E tablet
       (até 1024px), que também não tem espaço pra 3 cards lado a lado. */
    .home-packs-grid {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        /* pan-x + pan-y (nao so pan-x): deixa o navegador reconhecer tanto o
           arrasto horizontal do carrossel quanto o scroll vertical normal da
           pagina quando o dedo/cursor esta em cima dos packs - com só pan-x
           o scroll vertical ficava bloqueado nessa área. */
        touch-action: pan-x pan-y !important;
        scrollbar-width: none;
        justify-content: flex-start !important;
        align-items: stretch;
        gap: 14px;
        padding-right: 28px;
        /* overflow-x:auto some navegadores tratam overflow-y como "auto"
           também, cortando o selo "Mais vendido" que fica -14px acima do
           card - esse respiro em cima evita o corte */
        padding-top: 20px;
        margin-top: -20px;
        scroll-snap-type: x proximity;
    }

    .home-pack-card {
        flex: 0 0 78%;
        max-width: 78%;
        width: auto;
        scroll-snap-align: start;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .home-pack-card {
        flex: 0 0 42%;
        max-width: 42%;
    }
}


/* ==========================================================================
   Frase de impacto única da página: "IT'S ALL, ALLNUTRAX"
   ========================================================================== */

.home-slogan-impacto {
    font-family: 'Archivo Black', 'Inter', sans-serif;
    font-style: italic;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 64px;
    line-height: 0.95;
    letter-spacing: -1px;
    color: var(--nx-black);
    text-align: left;
    margin: 10px 0;
}

.home-slogan-impacto::after {
    content: '';
    display: block;
    width: 42px;
    height: 2px;
    background: var(--nx-gold);
    margin-top: 20px;
}

@media (max-width: 767px) {
    .home-slogan-impacto {
        font-size: 40px;
    }
}

/* Card único cinza com cantos arredondados, envolvendo o slogan + cashback
   (esquerda) e o texto + newsletter (direita), com divisória vertical no
   meio - como na referência. */
.home-slogan-card {
    background: var(--nx-white);
    border: 1px solid #ececec;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 48px;
}

.home-slogan-row {
    display: flex !important;
    align-items: stretch;
    flex-wrap: wrap;
}

.home-slogan-coluna-esquerda {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-right: 32px;
}

.home-slogan-cashback {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
    text-decoration: none !important;
}

.home-slogan-cashback,
.home-slogan-cashback * {
    color: var(--nx-black) !important;
}

.home-slogan-cashback-icone {
    flex-shrink: 0;
    color: var(--nx-gold) !important;
}

.home-slogan-cashback-icone svg,
.home-slogan-cashback-icone svg * {
    color: var(--nx-gold) !important;
}

.home-slogan-cashback-texto {
    display: block;
}

.home-slogan-cashback b {
    display: block;
    font-family: 'Archivo Black', 'Inter', sans-serif;
    font-style: italic;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 21px;
    letter-spacing: -0.2px;
    margin-bottom: 4px;
}

.home-slogan-coluna-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 32px;
    border-left: 1px solid rgba(201, 151, 79, 0.4);
}

.home-slogan-newsletter-titulo {
    align-self: stretch;
    text-align: left !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px !important;
    color: var(--nx-black) !important;
    margin-top: 30px;
    margin-bottom: 10px;
}

.home-slogan-texto {
    align-self: stretch;
}

.home-slogan-coluna-texto #form-rodape-newsletter {
    align-self: stretch;
    width: 100%;
}

.home-slogan-coluna-texto .rodape-newsletter-input {
    width: 100%;
}

.home-slogan-texto {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: #555 !important;
    margin-bottom: 22px;
}

.home-slogan-texto strong {
    font-weight: 700;
    color: var(--nx-black) !important;
}

.home-slogan-botao,
.home-slogan-botao * {
    color: var(--nx-white) !important;
}

.home-slogan-botao {
    display: inline-block;
    background: var(--nx-black) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2px;
    padding: 13px 26px;
    border-radius: 999px;
    text-decoration: none !important;
    text-align: center;
    transition: opacity 0.2s ease;
}

.home-slogan-botao:hover {
    opacity: 0.85;
}

@media (max-width: 767px) {
    .home-slogan-card {
        padding: 28px 22px;
        border-radius: 16px;
    }

    .home-slogan-coluna-esquerda {
        padding-right: 0;
    }

    .home-slogan-coluna-texto {
        padding-left: 0;
        border-left: none;
        margin-top: 28px;
        padding-top: 28px;
        border-top: 1px solid rgba(201, 151, 79, 0.4);
    }

    .home-slogan-cashback {
        margin-top: 22px;
    }
}


/* ==========================================================================
   Barra "10% OFF / Frete grátis / Faltam Rx para frete grátis": 3 colunas
   com divisórias, ícones finos e texto em duas linhas - como na referência.
   ========================================================================== */

.home-infos-frete {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
}

.home-infos-frete .info {
    display: flex !important;
    align-items: center;
    gap: 12px !important;
    flex: 0 0 auto;
    padding: 0 34px;
    position: relative;
}

.home-infos-frete .info:first-child {
    padding-left: 0;
}

.home-infos-frete .info:last-child {
    padding-right: 0;
}

.home-infos-frete .info:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 34px;
    background: rgba(255, 255, 255, 0.18);
}

.home-infos-frete .info .icone svg {
    display: block;
    flex-shrink: 0;
    width: 21px;
    height: 21px;
}

.home-infos-frete .info .icone svg,
.home-infos-frete .info .icone svg * {
    color: #fff !important;
}

.home-infos-frete .info .texto,
.home-infos-frete .info .texto * {
    font-size: 13px !important;
    text-align: left;
}

.home-infos-frete .info .texto .titulo {
    font-family: 'Inter', sans-serif;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #fff !important;
}

.home-infos-frete .info .texto .titulo span {
    font-weight: 400 !important;
    opacity: 0.85;
}

.home-infos-frete .info .texto .subtitulo {
    font-weight: 400 !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-top: 2px;
}

.home-infos-frete .info .texto .subtitulo a {
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: underline !important;
}

.home-infos-frete .info .select select {
    font-size: 12px;
    padding: 2px 4px;
}

@media (max-width: 767px) {
    /* continua em UMA linha só no mobile (não empilha) - encolhe tudo pra
       caber e permite rolagem horizontal se precisar */
    .home-infos-frete-envolve {
        padding: 14px 12px !important;
    }

    .home-infos-frete {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x !important;
        scrollbar-width: none;
        justify-content: flex-start !important;
    }

    .home-infos-frete .info {
        flex: 0 0 auto;
        gap: 8px !important;
        padding: 0 10px;
        white-space: nowrap;
    }

    .home-infos-frete .info:first-child {
        padding-left: 0;
    }

    .home-infos-frete .info .icone svg {
        width: 20px;
        height: 20px;
    }

    .home-infos-frete .info .texto .titulo {
        font-size: 12px !important;
    }

    .home-infos-frete .info .texto .subtitulo {
        font-size: 10px !important;
    }

    .home-infos-frete .info .select select {
        width: 52px;
    }
}


/* ==========================================================================
   "Recomendados para você": 4 cards de categoria com degradê preto e seta
   circular, como na referência - fica entre o banner principal e a faixa
   de 10% OFF / frete grátis.
   ========================================================================== */

.home-recomendados-grid {
    display: flex;
    gap: 16px;
}

.home-recomendados-card {
    position: relative;
    display: block;
    flex: 1 1 0;
    aspect-ratio: 3 / 5;
    border-radius: 14px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home-recomendados-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 18px;
    background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.4) 40%,
            rgba(0, 0, 0, 0) 70%
    );
}

.home-recomendados-nome,
.home-recomendados-nome * {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    color: var(--nx-white) !important;
}

.home-recomendados-legenda,
.home-recomendados-legenda * {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-top: 4px;
}

.home-recomendados-seta,
.home-recomendados-seta * {
    color: var(--nx-black) !important;
}

.home-recomendados-seta {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--nx-white) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .home-recomendados-grid {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 12px;
    }

    .home-recomendados-card {
        flex: 0 0 62%;
        aspect-ratio: 3 / 4;
    }

    .home-recomendados-nome,
    .home-recomendados-nome * {
        font-size: 17px;
    }
}


/* ==========================================================================
   Mais espaço em branco entre seções da home
   ========================================================================== */

.home-produtos-listagem1-titulo,
.home-produtos-listagem2-titulo {
    margin-top: 10px;
}

.home-slider {
    gap: 28px;
}


/* ==========================================================================
   Banner principal (hero): título + subtítulo + botão incorporados na
   imagem, como na referência. Desktop = bloco centralizado verticalmente
   à esquerda, subtítulo/botão empilhados. Mobile = bloco encostado embaixo,
   subtítulo/botão lado a lado. Cor do texto (.slide-texto-claro/-escuro)
   é definida por banner via ACF, conforme a imagem for escura ou clara.
   ========================================================================== */

.slide-img-blur {
    display: none;
    z-index: 1;
}

.slide-blur-tint {
    display: none;
    z-index: 2;
}

.slide-img-sharp {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
}

.slide-conteudo {
    position: absolute;
    top: 50%;
    left: 6.5%;
    right: 6.5%;
    transform: translateY(-50%);
    max-width: 300px;
    z-index: 5;
    text-align: left;
    pointer-events: none;
}

/* alguns banners pedem o texto do lado direito no desktop (ex: quando a
   composição da foto tem espaço livre à direita) - no mobile o texto
   sempre fica embaixo, então essa regra não entra em conflito */
@media (min-width: 768px) {
    .slide-texto-pos-direita .slide-conteudo {
        left: auto;
        right: 6.5%;
        text-align: right;
    }

    .slide-texto-pos-direita .slide-rodape {
        align-items: flex-end;
    }
}

.slide-conteudo * {
    pointer-events: auto;
}

.slide-tag {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.slide-titulo {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1.12;
    letter-spacing: -0.3px;
    margin-bottom: 14px;
}

.slide-rodape {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.slide-subtitulo {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    max-width: 360px;
}

.slide-botao,
.slide-botao * {
    color: var(--nx-white) !important;
}

.slide-botao {
    display: inline-block;
    background: var(--nx-black) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.2px;
    padding: 16px 36px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.slide-botao:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
}

/* imagem escura (texto claro) -> botão fica branco, senão some no fundo escuro */
.slide-texto-claro .slide-botao,
.slide-texto-claro .slide-botao * {
    background: var(--nx-white) !important;
    color: var(--nx-black) !important;
}

/* imagem escura -> texto claro (branco) */
.slide-texto-claro .slide-titulo,
.slide-texto-claro .slide-titulo *,
.slide-texto-claro .slide-subtitulo,
.slide-texto-claro .slide-subtitulo * {
    color: var(--nx-white) !important;
}

.slide-texto-claro .slide-subtitulo {
    opacity: 0.92;
}

/* imagem clara -> texto escuro (preto) */
.slide-texto-escuro .slide-titulo,
.slide-texto-escuro .slide-titulo *,
.slide-texto-escuro .slide-subtitulo,
.slide-texto-escuro .slide-subtitulo * {
    color: var(--nx-black) !important;
}

.slide-texto-escuro .slide-subtitulo {
    opacity: 0.75;
}

@media (max-width: 767px) {
    /* No mobile o banner ganha altura extra e ganha um "sub-banner" - uma
       versão desfocada/ampliada da própria imagem preenchendo a parte de
       baixo - pra garantir que o texto sempre fique legível, não importa a
       cor da foto original. Texto empilhado na vertical (título, subtítulo,
       botão), como na referência. */
    .slider {
        height: 500px !important;
        border-radius: 16px !important;
    }

    .slide-img-sharp {
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        height: 62%;
        background-position: center top;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
    }

    .slide-img-blur {
        display: block;
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: blur(35px) saturate(1.2);
        transform: scale(1.3);
    }

    .slide-blur-tint {
        display: block;
        position: absolute;
        inset: 0;
    }

    .slide-texto-claro .slide-blur-tint {
        background: rgba(0, 0, 0, 0.22);
    }

    .slide-texto-escuro .slide-blur-tint {
        background: rgba(255, 255, 255, 0.4);
    }

    .slide-conteudo {
        top: 60%;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 18px 22px 44px;
        transform: none;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .slide-titulo {
        font-size: 23px;
        line-height: 1.15;
        margin-bottom: 10px;
    }

    .slide-rodape {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        width: 100%;
    }

    .slide-subtitulo {
        font-size: 13px;
        max-width: none;
    }

    .slide-botao {
        padding: 13px 26px;
        font-size: 13px;
    }
}


/* ==========================================================================
   Navegação do slider (setas + bolinhas juntas, numa linha só, embaixo
   do banner) - como na referência.
   ========================================================================== */

.slider-nav {
    position: absolute !important;
    bottom: 18px;
    left: 50% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 10;
    background: transparent;
    padding: 4px;
}

.slider-nav .arrow {
    position: static !important;
    width: auto;
    height: auto;
    background: transparent !important;
    color: var(--nx-white) !important;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    transform: none;
}

.slider-nav .arrow:hover {
    opacity: 0.7;
    background: transparent !important;
}

.slider-nav .dots {
    position: static !important;
    left: auto;
    bottom: auto;
    transform: none !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.slider-nav .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent !important;
    border: 1.4px solid var(--nx-white);
    transition: 0.25s;
}

.slider-nav .dot.active {
    width: 9px;
    height: 9px;
    background: var(--nx-white) !important;
    border-color: var(--nx-white);
    transform: none;
}

@media (max-width: 767px) {
    .slider-nav {
        bottom: 12px;
        gap: 12px;
        padding: 6px 12px;
    }
}


/* ==========================================================================
   Faixas de selo/confiança (ANVISA, Reclame Aqui, entrega, compra segura,
   6x sem juros, suporte WhatsApp etc.): nunca podem quebrar linha, mesmo
   no mobile - viram um carrossel horizontal de rolagem em vez de empilhar.
   ========================================================================== */

@media (max-width: 820px) {
    .barra-cta-a,
    .barra-cta-b {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x !important;
        scrollbar-width: none;
        justify-content: flex-start !important;
        gap: 22px !important;
    }

    .barra-cta-a-item,
    .barra-cta-b-item {
        flex: 0 0 auto !important;
        white-space: nowrap;
    }
}


/* ==========================================================================
   Recuo lateral: várias seções da home ganham um respiro à esquerda (e a
   frase de impacto + cashback, dos dois lados), pra não ficar tudo colado
   na borda do container - como na referência.
   ========================================================================== */

.home-recomendados-titulo,
.home-recomendados-grid,
.home-produtos-listagem1-titulo,
.home-produtos-listagem1,
.home-produtos-listagem2-titulo,
.home-produtos-listagem2,
.home-listagem-posts > .col-12,
.home-packs-titulo,
.home-packs-grid {
    padding-left: 24px !important;
}



@media (min-width: 768px) and (max-width: 991px) {
    .home-recomendados-titulo,
    .home-recomendados-grid,
    .home-produtos-listagem1-titulo,
    .home-produtos-listagem1,
    .home-produtos-listagem2-titulo,
    .home-produtos-listagem2,
    .home-listagem-posts > .col-12,
    .home-packs-titulo,
    .home-packs-grid {
        padding-left: 48px !important;
    }


}

@media (min-width: 992px) {
    .home-recomendados-titulo,
    .home-recomendados-grid,
    .home-produtos-listagem1-titulo,
    .home-produtos-listagem1,
    .home-produtos-listagem2-titulo,
    .home-produtos-listagem2,
    .home-listagem-posts > .col-12,
    .home-packs-titulo,
    .home-packs-grid {
        padding-left: 96px !important;
    }


}


/* ==========================================================================
   Menu de categorias do topo: mesmo recuo à esquerda das outras seções
   ========================================================================== */

#topo-menu-categorias {
    padding-left: 24px !important;
}

@media (min-width: 768px) and (max-width: 991px) {
    #topo-menu-categorias {
        padding-left: 48px !important;
    }
}

@media (min-width: 992px) {
    #topo-menu-categorias {
        padding-left: 96px !important;
    }
}


/* ==========================================================================
   Faixa "Frete grátis para todo o Brasil + cupom de 10% OFF": fundo escuro,
   ícones finos em dourado, 2 colunas com divisória - como na referência.
   ========================================================================== */

.shipping-banner {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: linear-gradient(135deg, #1c1712 0%, #0c0a08 100%) !important;
    border: none !important;
    border-radius: 12px;
    padding: 18px 28px;
    color: var(--nx-white);
    text-align: left;
}

.shipping-banner-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.shipping-banner-icone,
.shipping-banner-icone svg,
.shipping-banner-icone svg * {
    color: var(--nx-gold) !important;
    flex-shrink: 0;
}

.shipping-banner-divisor {
    width: 1px;
    height: 38px;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

.shipping-banner-titulo,
.shipping-banner-titulo * {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.3px;
    color: var(--nx-white) !important;
    line-height: 1.3;
}

.shipping-banner-titulo span:not(.shipping-banner-destaque) {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75) !important;
}

.shipping-banner-destaque {
    color: var(--nx-gold) !important;
    font-weight: 800;
}

.shipping-banner-subtitulo {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55) !important;
    margin-top: 2px;
}

@media (max-width: 767px) {
    .shipping-banner {
        gap: 14px;
        padding: 16px 14px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .shipping-banner-item {
        gap: 10px;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .shipping-banner-icone svg {
        width: 26px;
        height: 22px;
    }

    .shipping-banner-titulo,
    .shipping-banner-titulo * {
        font-size: 13px;
    }

    .shipping-banner-subtitulo {
        font-size: 10px;
    }
}


/* ==========================================================================
   Cards "Qualidade que inspira": texto alinhado à esquerda, Inter Semibold,
   como na referência (antes estava centralizado e com pesos errados).
   ========================================================================== */

.home-banner-c .infos {
    text-align: left !important;
    align-items: flex-start;
    padding: 22px 26px !important;
    min-height: 0 !important;
}

.home-banner-c .infos .titulo {
    font-family: 'Inter', sans-serif;
    font-weight: 600 !important;
    font-size: 19px;
    color: #AE8631 !important;
    margin-bottom: 12px;
}

.home-banner-c .infos .subtitulo {
    font-family: 'Inter', sans-serif;
    font-weight: 600 !important;
    font-size: 17px;
    line-height: 1.35;
    color: var(--nx-black) !important;
}

.home-banner-c-botao,
.home-banner-c-botao * {
    color: var(--nx-white) !important;
}

.home-banner-c-botao {
    display: inline-block;
    background: var(--nx-black) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 22px;
    border-radius: 999px;
    text-decoration: none !important;
    margin-top: 16px;
    transition: opacity 0.2s ease;
}

.home-banner-c-botao:hover {
    opacity: 0.85;
}

@media (max-width: 767px) {
    .home-banner-c .infos {
        padding: 22px 20px !important;
    }

    .home-banner-c .infos .titulo {
        font-size: 16px;
    }

    .home-banner-c .infos .subtitulo {
        font-size: 14px;
    }
}


/* ==========================================================================
   Depoimentos "O que os clientes falam sobre nós" (Reclame Aqui): texto
   alinhado à esquerda, aspas em destaque, como na referência.
   ========================================================================== */

.depoimento-reclameaqui {
    text-align: left !important;
    border-left: none !important;
    padding: 24px 22px !important;
    background: var(--nx-white) !important;
    border: 1px solid #ececec !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.depoimento-reclameaqui .aspas-esquerda,
.depoimento-reclameaqui .aspas-direita {
    text-align: left !important;
}

.depoimento-reclameaqui .aspas-esquerda i,
.depoimento-reclameaqui .aspas-direita i {
    font-size: 26px !important;
    color: #b3b4b8 !important;
    opacity: 1 !important;
}

.depoimento-reclameaqui .aspas-direita {
    text-align: right !important;
    margin-top: 10px;
}

.depoimento-reclameaqui .texto {
    font-family: 'Inter', sans-serif;
    font-style: normal !important;
    font-weight: 400 !important;
    color: #6b6c70 !important;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 8px;
}

.depoimento-reclameaqui .nome {
    font-family: 'Inter', sans-serif;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
    font-size: 14px;
    margin-top: 14px;
}

.depoimento-reclameaqui .data {
    font-family: 'Inter', sans-serif;
    font-weight: 400 !important;
    color: #9a9ba0 !important;
    margin-top: 2px;
}

.depoimento-reclameaqui .nota {
    margin-top: 8px;
}


/* ==========================================================================
   Banner "Experimente seu próximo nível" (It's Booster): agora usa o mesmo
   padrão responsivo do .home-banner-b (imagem em <img>, sem cortar em
   nenhuma tela) + botão de adicionar ao carrinho.
   ========================================================================== */

.links-banner-a-nova {
    margin-top: 18px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.links-banner-a-nova a {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--nx-black) !important;
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    transition: border-color 0.2s ease;
}

.links-banner-a-nova a:hover {
    border-color: var(--nx-black);
}


/* ==========================================================================
   Logo do rodapé: estava grande demais (200px) - reduzida ~30%.
   ========================================================================== */

.rodape-logo img {
    max-width: 140px !important;
}


/* ==========================================================================
   Espaço reservado pro vídeo de apresentação (enquanto não tem o link do
   YouTube configurado, mostra um placeholder no lugar certo do layout).
   ========================================================================== */

.video-placeholder {
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: 12px;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.15)), var(--thumb-video-bg, linear-gradient(135deg, #1c1c1c 0%, #2c2c2c 100%));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.video-placeholder-play {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nx-white) !important;
}

.video-placeholder-texto {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* no desktop o vídeo (ou o placeholder "Vídeo em breve") ocupava a largura
   inteira do container, ficando enorme - reduzido pela metade e centralizado.
   No mobile continua largura cheia. */
@media (min-width: 992px) {
    .video-apresentacao {
        max-width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}


/* ==========================================================================
   Banner "Experimente seu próximo nível": título com degradê escuro por
   cima da foto pra garantir leitura (a foto em si não tem texto), botão de
   carrinho no lado esquerdo (em vez do direito, padrão do .home-banner-b).
   ========================================================================== */

.home-banner-b-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 40px;
    background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.68) 0%,
            rgba(0, 0, 0, 0.4) 38%,
            rgba(0, 0, 0, 0) 68%
    );
    border-radius: 12px;
    pointer-events: none;
}

.home-banner-b-titulo,
.home-banner-b-titulo * {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.3px;
    color: var(--nx-white) !important;
    max-width: 360px;
}

.home-banner-b-texto-esquerda .botao {
    left: 20px;
    right: auto !important;
}

@media (max-width: 767px) {
    .home-banner-b-overlay {
        padding: 0 22px;
    }

    .home-banner-b-titulo,
    .home-banner-b-titulo * {
        font-size: 22px;
        max-width: 220px;
    }

    .home-banner-b-texto-esquerda .botao {
        left: 14px;
        bottom: 14px;
        font-size: 12px;
        padding: 8px 14px;
    }
}


/* ==========================================================================
   1) Banner principal (slider) em largura total na versão desktop/HD,
   sem margens do container - "de fora a fora".
   ========================================================================== */

@media (min-width: 992px) {
    .row.mb-2.mt-2:has(> .col-12 > .slider) {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        max-width: 100vw;
    }

    .row.mb-2.mt-2:has(> .col-12 > .slider) .slider {
        border-radius: 0;
    }
}


/* ==========================================================================
   2) Barra ANVISA/Reclame Aqui/Entrega/Compra segura: 4 cards com borda,
   ícone verde circular + título + subtítulo - como na referência. Tamanho
   flui com clamp() (encolhe proporcional, sem pular entre breakpoints) e,
   se não couber, roda pro lado em vez de quebrar linha.
   ========================================================================== */

.barra-cta-a {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: clamp(10px, 1.8vw, 24px) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x !important;
    scrollbar-width: none;
    padding: 4px 2px;
}

.barra-cta-a-item {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    flex: 1 1 0;
    min-width: 220px;
    gap: clamp(10px, 1.6vw, 16px);
    border: 1.5px solid #ececec;
    border-radius: clamp(10px, 1.6vw, 16px);
    padding: clamp(12px, 2vw, 20px) clamp(12px, 2vw, 22px);
    background: var(--nx-white);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.045);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.barra-cta-a-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
}

.barra-cta-a-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(40px, 5.2vw, 54px);
    height: clamp(40px, 5.2vw, 54px);
    border-radius: 999px;
    background: var(--nx-black) !important;
    border: none;
    color: var(--nx-white) !important;
}

.barra-cta-a-icone svg {
    width: clamp(18px, 2.6vw, 26px) !important;
    height: clamp(18px, 2.6vw, 26px) !important;
    color: var(--nx-white) !important;
    stroke: var(--nx-white) !important;
    stroke-width: 2.4px !important;
}

.barra-cta-a-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.barra-cta-a-titulo {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(13px, 1.6vw, 16px);
    color: var(--nx-black) !important;
    white-space: normal;
}

.barra-cta-a-subtitulo {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(11px, 1.3vw, 13px);
    line-height: 1.35;
    color: #777 !important;
    white-space: normal;
}

@media (max-width: 767px) {
    .barra-cta-a-item {
        min-width: 82%;
        flex: 0 0 auto;
    }
}


/* ==========================================================================
   3) e 4) Faixas "10% OFF / Frete grátis" e "Frete grátis + cupom": tamanho
   único que encolhe de forma proporcional/fluida com a tela (clamp), em
   vez de pular entre tamanhos fixos por breakpoint.
   ========================================================================== */

.home-infos-frete .info .texto .titulo {
    font-size: clamp(11px, 2.6vw, 14px) !important;
}

.home-infos-frete .info .texto .subtitulo {
    font-size: clamp(9px, 2.1vw, 12px) !important;
}

.home-infos-frete .info .icone svg {
    width: clamp(16px, 4vw, 21px) !important;
    height: clamp(16px, 4vw, 21px) !important;
}

.shipping-banner-titulo,
.shipping-banner-titulo * {
    font-size: clamp(11px, 2.6vw, 15px) !important;
}

.shipping-banner-subtitulo {
    font-size: clamp(9px, 2vw, 11px) !important;
}

.shipping-banner-icone svg {
    width: clamp(20px, 5vw, 32px) !important;
    height: clamp(17px, 4.3vw, 26px) !important;
}


/* ==========================================================================
   5) Banner "Experimente seu próximo nível": botão no lado esquerdo e um
   pouco mais alto.
   ========================================================================== */

.home-banner-b .botao {
    left: 5%;
    right: auto !important;
    bottom: 28%;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

@media (max-width: 767px) {
    .home-banner-b .botao {
        left: 14px;
        bottom: 40px;
    }
}


/* ==========================================================================
   6) Especialistas: título de seção "Recomendado por especialistas" acima
   dos dois cards + foto dos profissionais maior.
   ========================================================================== */

.home-depoimentos-especialistas-titulo {
    font-family: 'Inter', sans-serif;
    text-transform: none;
    font-weight: 800;
    letter-spacing: -0.6px;
    font-size: clamp(24px, 3.4vw, 36px);
    margin-bottom: 22px;
}

.home-depoimentos-especialistas .foto {
    width: 116px !important;
    height: 116px !important;
}


/* ==========================================================================
   7) Barra "IT'S ALL, ALLNUTRAX": conteúdo centralizado + moeda Cashback
   All Points ao lado do texto.
   ========================================================================== */

.home-slogan-card {
    text-align: center;
}

.home-slogan-row {
    justify-content: center;
}

.home-slogan-coluna-esquerda {
    align-items: center;
}

.home-slogan-coluna-texto {
    align-items: center;
    text-align: center;
}

.home-slogan-impacto::after {
    margin-left: auto;
    margin-right: auto;
}

.home-slogan-cashback {
    justify-content: center;
}

.home-slogan-cashback-moeda {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    object-fit: contain;
}

@media (max-width: 767px) {
    .home-slogan-coluna-esquerda,
    .home-slogan-coluna-texto {
        align-items: center;
    }
}


/* ==========================================================================
   Banner "qualidade e performance": escurece a foto inteira de forma
   uniforme (não é degradê, é a mesma opacidade em toda a imagem) pra
   garantir contraste com o texto branco em qualquer ponto da foto.
   ========================================================================== */

.home-banner-a {
    position: relative;
}

.home-banner-a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 5px;
}

.home-banner-a > * {
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   "IT'S ALL, ALLNUTRAX": reforço da centralização (o texto de cada
   elemento também precisa de text-align:center, não só o container).
   ========================================================================== */

.home-slogan-impacto,
.home-slogan-cashback,
.home-slogan-cashback-texto,
.home-slogan-cashback b {
    text-align: center !important;
}

.home-slogan-cashback {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
}


/* ==========================================================================
   Logo do rodapé: reforço - reduz 30% (200px base -> 140px), com
   especificidade/ordem à prova de qualquer outra regra.
   ========================================================================== */

footer .rodape-logo img,
.rodape-logo img {
    max-width: 140px !important;
    width: 140px !important;
    height: auto !important;
}


/* ==========================================================================
   ÚLTIMA PALAVRA sobre a centralização do "IT'S ALL, ALLNUTRAX": zera
   qualquer padding assimétrico que pudesse empurrar o conteúdo pra um
   lado e centraliza cada coluna de forma independente do flexbox pai,
   usando margin:auto num bloco interno.
   ========================================================================== */

.home-slogan-row {
    gap: 0 !important;
}

.home-slogan-coluna-esquerda {
    padding-right: 0 !important;
    padding-left: 0 !important;
    align-items: center !important;
}

.home-slogan-coluna-texto {
    padding-left: 24px !important;
    padding-right: 0 !important;
    align-items: center !important;
}

.home-slogan-impacto,
.home-slogan-cashback {
    width: 100%;
    text-align: center !important;
}

.home-slogan-impacto {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-slogan-impacto::after {
    margin-left: auto !important;
    margin-right: auto !important;
}

.home-slogan-impacto-logo {
    width: 100%;
    max-width: 260px;
    height: auto;
}

@media (max-width: 767px) {
    .home-slogan-impacto-logo {
        max-width: 200px;
    }
}

.home-slogan-texto,
.home-slogan-newsletter-titulo,
#form-rodape-newsletter {
    width: 100%;
    text-align: center !important;
    align-self: center !important;
}

.home-slogan-botao {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==========================================================================
   Logo do cabeçalho: reduzida 30% (170px -> 119px). "a logo que está na
   imagem" = a do topo, a única visível nos prints que foram mandados.
   ========================================================================== */

#logo-topo {
    max-width: 119px !important;
}


/* ==========================================================================
   Barra "Adicione R$ X para ter frete grátis": fundo verde, mensagem em
   branco direto no fundo (sem pílula cinza), seletor de estado claro -
   como na referência.
   ========================================================================== */

#topo-infos-frete-gratis-envolve {
    background: var(--nx-accent) !important;
}

#topo-infos-frete-gratis-valor-restante {
    background: transparent !important;
    color: var(--nx-white) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

#topo-infos-frete-gratis-valor-restante * {
    color: var(--nx-white) !important;
}

#topo-infos-frete-gratis select {
    background-color: var(--nx-white) !important;
    color: var(--nx-black) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    font-weight: 500;
}

#topo-infos-frete-gratis select option {
    background-color: var(--nx-white) !important;
    color: var(--nx-black) !important;
}

/* No mobile a mensagem + o select de estado (agora com nome completo, tipo
   "Santa Catarina") quebravam pra uma segunda linha, o que empurrava e
   sobrepunha a faixa preta logo abaixo (que tem posição calculada supondo
   que essa barra verde tem só uma linha de altura). Força tudo numa linha
   só, cortando o texto da mensagem com "..." se precisar, em vez de quebrar. */
@media (max-width: 767px) {
    #topo-infos-frete-gratis {
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    #topo-infos-frete-gratis-valor-restante {
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60vw;
    }

    #topo-infos-frete-gratis select {
        font-size: 11px !important;
        padding: 3px 4px !important;
        max-width: 32vw;
        flex-shrink: 0;
    }
}


/* ==========================================================================
   Parcelamento (6x sem juros) + desconto no Pix: textos curtos e fixos,
   acima do preço - simplificado pra não poluir o card (como na referência).
   ========================================================================== */

.parcelamento,
.desconto-pix {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.4;
    color: #888 !important;
}

.parcelamento {
    margin-top: 2px;
}

.desconto-pix {
    color: var(--nx-accent) !important;
    font-weight: 500;
}


/* ==========================================================================
   Ícone de vídeo (play) no canto da foto do especialista, além da foto.
   ========================================================================== */

.especialista-foto-link {
    position: relative;
    display: inline-block;
}

.especialista-video-icone {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 32px;
    height: 22px;
    border-radius: 6px;
    background: #ff0000 !important;
    border: 2px solid var(--nx-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.especialista-video-icone,
.especialista-video-icone svg {
    color: var(--nx-white) !important;
}


/* ==========================================================================
   ".infos" dos cards de produto era flex-direction:row (preço + nota lado
   a lado) - agora com parcelamento/pix precisa empilhar em coluna.
   ========================================================================== */

.home-produtos-listagem1 .item .infos {
    flex-direction: column !important;
    align-items: flex-start !important;
}


/* ==========================================================================
   Kits "Ganho de massa" (no lugar de "Qualidade que inspira"): lista de
   itens + preço total + botão Comprar, com foto ao lado - como na
   referência. Produtos/preços são de exemplo por enquanto.
   ========================================================================== */

.home-kit-card {
    display: flex;
    align-items: stretch;
    background: #f1f1f1;
    border-radius: 12px;
    overflow: hidden;
    min-height: 180px;
}

.home-kit-infos {
    flex: 1.4;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
}

.home-kit-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--nx-black) !important;
    margin-bottom: 14px;
}

.home-kit-titulo svg {
    color: var(--nx-accent) !important;
    flex-shrink: 0;
}

.home-kit-itens {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.home-kit-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

.home-kit-item span:first-child {
    color: #555 !important;
}

.home-kit-item span:last-child {
    color: var(--nx-black) !important;
    font-weight: 500;
    white-space: nowrap;
}

.home-kit-rodape {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.home-kit-botao,
.home-kit-botao * {
    color: var(--nx-white) !important;
}

.home-kit-botao {
    display: inline-block;
    background: var(--nx-black) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: 999px;
    text-decoration: none !important;
    transition: background .2s ease;
}

.home-kit-botao:hover {
    background: var(--nx-accent) !important;
}

.home-kit-total {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--nx-accent) !important;
}

.home-kit-imagem {
    flex: 1;
    position: relative;
    min-width: 0;
}

.home-kit-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .home-kit-card {
        flex-direction: column;
    }

    .home-kit-imagem {
        height: 160px;
    }

    .home-kit-infos {
        padding: 18px;
    }
}


/* ==========================================================================
   Melhorias de conversão/polimento visual na home (site2):
   - Selo "Mais vendido" no 1º produto de cada carrossel (baseado em dado
     real de mais visualizado/vendido, não é número inventado).
   - Hover mais suave e premium nos cards de produto e categorias.
   ========================================================================== */

.home-produtos-listagem1 .item {
    position: relative;
}

/* itens do carrossel "Mais vendidos" herdavam white-space:nowrap do
   carrossel (.home-slider), então nomes de produto longos (ex: "Whey
   Protein 900g Doce de Leite") forçavam aquele card específico a ficar
   mais largo que os outros, e sem nada empurrando o botão pro rodapé, ele
   ficava em alturas diferentes de card pra card. Trava a largura, permite
   o nome quebrar linha, e ancora o botão sempre no final do card. */
.home-produtos-listagem1 .item {
    display: flex;
    flex-direction: column;
    width: 240px;
    flex-shrink: 0;
}

.home-produtos-listagem1 .nome,
.home-produtos-listagem1 .item .infos,
.home-produtos-listagem1 .item .infos * {
    white-space: normal;
}

.home-produtos-listagem1 .item > a:last-child {
    margin-top: auto;
}

.selo-mais-vendido {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--nx-black) !important;
    color: var(--nx-white) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.2px;
    padding: 5px 12px;
    border-radius: 999px;
}

.selo-desconto {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: var(--nx-gold) !important;
    color: var(--nx-white) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2px;
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(201, 151, 79, 0.35);
}

/* Só nas páginas de categoria/loja: o selo de desconto vai pro lado
   esquerdo pra não ficar colado no coração de favoritos (que fica à
   direita). Na home o selo continua do jeito que está. */
.listagem-categoria .selo-desconto {
    left: 10px;
    right: auto;
}

/* Selo nativo do WooCommerce (blocos padrão tipo "Novo na loja" do
   carrinho vazio) - mesma cara do selo "-X% OFF" customizado do resto do
   site, já que o texto vem do filtro woocommerce_sale_flash. */
.wc-block-grid__product-onsale .onsale,
.wc-block-grid__product-onsale span[aria-hidden="true"],
span.onsale {
    position: static;
    display: inline-block;
    background: var(--nx-gold) !important;
    color: var(--nx-white) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2px;
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(201, 151, 79, 0.35);
}

.wc-block-grid__product-onsale {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

/* A foto do produto nesse bloco nativo do WooCommerce vem com
   object-fit:fill por padrão, que estica/distorce a imagem pra preencher
   a caixa em vez de manter a proporção - "efeito zoom" estranho no
   carrinho vazio ("Novo na loja"). Troca pra contain, igual usado no
   resto do site. */
.wc-block-grid__product-image img {
    object-fit: contain !important;
}

.home-produtos-listagem1 .item .imagem {
    transition: box-shadow 0.25s ease;
}

.home-produtos-listagem1 .item:hover .imagem {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.home-produtos-listagem1 .item .botao,
.home-recomendados-card,
.home-kit-card,
.home-banner-c,
.pack-button,
.home-slogan-botao,
.home-banner-c-botao,
.home-kit-botao {
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.home-recomendados-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
}

.home-produtos-listagem1 .item .botao:hover {
    transform: translateY(-1px);
}

/* ==========================================================================
   Caixa de cupom de desconto: estava cinza-genérico e sem destaque no meio
   de uma home preto/dourado. Redesenhada em estilo "ticket premium" para
   parecer uma oferta de verdade, com feedback visual claro ao copiar.
   ========================================================================== */

.home-cupom-desconto {
    background: var(--nx-white) !important;
    border: 1px solid #ececec !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 16px !important;
    padding: 26px 34px !important;
    max-width: 480px;
}

.home-cupom-desconto .texto {
    font-family: 'Inter', sans-serif;
    color: var(--nx-black) !important;
    font-size: 16px !important;
    letter-spacing: 0.2px;
}

.home-cupom-desconto .texto b {
    color: var(--nx-black) !important;
    font-size: 19px;
}

.home-cupom-desconto .cupom {
    margin-top: 14px !important;
    border: 1.5px dashed var(--nx-gold) !important;
    border-radius: 999px !important;
    background: rgba(201, 151, 79, 0.06);
    align-items: center;
    transition: transform 0.2s ease, background 0.2s ease;
}

.home-cupom-desconto .cupom:hover {
    background: rgba(201, 151, 79, 0.14);
    transform: translateY(-1px);
}

.home-cupom-desconto .cupom .codigo {
    font-family: 'Inter', sans-serif;
    color: var(--nx-black) !important;
    border-right: 1.5px dashed var(--nx-gold) !important;
    letter-spacing: 1px;
    padding: 12px 18px !important;
}

.home-cupom-desconto .cupom .icone {
    color: var(--nx-black) !important;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   Card "IT'S ALL, ALLNUTRAX" / Cashback: logo e moeda lado a lado, frase de
   chamada, divisor e texto do Cashback - layout igual à referência do
   Anderson (antes a moeda ficava embaixo do logo, empilhada).
   ========================================================================== */

.home-slogan-topo {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 14px;
}

.home-slogan-topo .home-slogan-impacto-logo {
    width: auto;
    max-width: 150px;
}

.home-slogan-topo .home-slogan-cashback-moeda {
    width: 96px !important;
    height: 96px !important;
}

.home-slogan-cta-texto {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #8a8a8a !important;
    text-align: center;
}

.home-slogan-divisor {
    width: 42px;
    height: 2px;
    background: var(--nx-gold);
    margin: 14px auto;
}

@media (max-width: 767px) {
    .home-slogan-topo .home-slogan-impacto-logo {
        max-width: 110px;
    }

    .home-slogan-topo .home-slogan-cashback-moeda {
        width: 74px !important;
        height: 74px !important;
    }
}


/* ==========================================================================
   PÁGINA DE PRODUTO
   ========================================================================== */

/* Imagem principal: sempre quadrada com o produto centralizado, não importa
   o formato/proporção do arquivo original (resolve PNG "gigante" esticado).
   Centralização via position:absolute + transform, ignorando de propósito
   a estrutura interna do carrossel do Bootstrap (float/margin negativa),
   que impedia a centralização vertical funcionar mesmo com flexbox. */
#detalhes-produto .produto-galeria-img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: zoom-in;
}

#detalhes-produto .produto-galeria-img img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    margin: 0 !important;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
}

/* Zoom tipo lupa ao passar o mouse sobre a imagem do produto */
.produto-zoom-lens {
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25);
    background-repeat: no-repeat;
    background-color: var(--nx-white);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 5;
}

.produto-zoom-lens.ativo {
    opacity: 1;
}

@media (max-width: 767px) {
    .produto-zoom-lens {
        display: none;
    }
}


/* Seletor "Leve mais, pague menos" (1 / 3 / 6 unidades) */
.produto-quantidade-tiers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0;
}

.produto-quantidade-titulo {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--nx-black) !important;
    margin-bottom: 2px;
}

.tier-opcao {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid #e3e3e3;
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
    background: var(--nx-white);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tier-opcao:hover {
    border-color: #c9c9c9;
}

.tier-opcao:has(.tier-radio-input:checked) {
    border-color: var(--nx-black);
    background: #fafafa;
}

.tier-opcao.tier-destaque {
    border-color: var(--nx-gold);
}

.tier-opcao.tier-destaque:has(.tier-radio-input:checked) {
    border-color: var(--nx-black);
}

.tier-radio-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.tier-radio-visual {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1.5px solid #b8b8b8;
    position: relative;
}

.tier-radio-input:checked ~ .tier-radio-visual {
    border-color: var(--nx-black);
}

.tier-radio-input:checked ~ .tier-radio-visual::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 999px;
    background: var(--nx-black);
}

.tier-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
}

.tier-qtd {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--nx-black) !important;
}

.tier-economia {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--nx-accent) !important;
}

.tier-preco {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.tier-preco-unitario {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #888 !important;
}

.tier-preco-total {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--nx-black) !important;
}

.tier-selo {
    position: absolute;
    top: -10px;
    right: 16px;
    background: var(--nx-accent) !important;
    color: var(--nx-white) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.2px;
    padding: 3px 10px;
    border-radius: 999px;
}

/* Fileira única de confiança: Seguro / Entrega / Originais | Frete / 3x sem
   juros | Google / Loja Protegida / Site Blindado / Reembolso / Reclame
   Aqui - ícones outline pretos (exceto Google e Loja Protegida, que ficam
   coloridos), com divisores finos entre os grupos. Inspirado na referência
   que o Anderson mandou. */
.produto-trust-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--nx-white);
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
}

.produto-trust-strip::-webkit-scrollbar {
    display: none;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.trust-item svg {
    flex-shrink: 0;
    width: 15px !important;
    height: 15px !important;
    color: var(--nx-black) !important;
}

.trust-item span {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 10px;
    line-height: 1.2;
    color: #333 !important;
    white-space: nowrap;
}

.trust-item-logo-google {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.trust-item-logo-ra {
    height: 15px;
    width: auto;
    flex-shrink: 0;
}

.trust-divisor {
    width: 1px;
    align-self: stretch;
    background: #e3e3e3;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .produto-trust-strip {
        justify-content: flex-start;
        padding: 16px 14px;
        gap: 18px;
    }
}


/* Aviso nutricional obrigatório: discreto, acima da descrição */
.produto-aviso-nutricional {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-style: italic;
    color: #8a8a8a;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    padding: 12px 10px;
}

.produto-aviso-nutricional i {
    color: #b8b8b8;
    font-size: 13px;
}

/* Descrição do produto: ocupa toda a largura da tela (edge-to-edge), sem
   título, quebrando fora do .container - como pedido. */
.produto-descricao-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: var(--nx-white);
    padding: 44px clamp(20px, 6vw, 90px);
}

.produto-descricao-conteudo {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #444 !important;
    max-width: 1100px;
    margin: 0 auto;
}

.produto-descricao-vazio {
    color: #999 !important;
    font-style: italic;
}


/* Menu de categorias do topo (aparece na home e na página de produto): tinha
   uma borda branca visível o tempo todo antes do hover - agora fica sem
   borda no estado normal e só aparece (preta) no hover/item ativo. */
#topo-menu-categorias li {
    border: 1px solid transparent !important;
}

#topo-menu-categorias li:hover,
#topo-menu-categorias .li-selecionado {
    border: 1px solid #424242 !important;
}


/* Imagem do produto: centralizar de verdade nos dois eixos (horizontal E
   vertical) dentro do quadro branco. A coluna da imagem estica pra
   acompanhar a altura da coluna de preço/compra (mais alta, com os vários
   blocos novos), e sem isso o carrossel do Bootstrap fica "grudado" no
   topo em vez de ficar no centro do espaço disponível. */
/* A coluna da imagem NÃO deve esticar pra acompanhar a altura da coluna de
   preço/compra (que ficou bem mais alta com os blocos novos) - o quadro da
   foto precisa continuar sendo um quadrado de verdade, do tamanho da sua
   própria largura, mesmo que sobre espaço vazio do lado. */
#detalhes-produto > .row > .col-md-6:has(.produto-galeria) {
    align-self: flex-start !important;
}

#detalhes-produto .produto-galeria {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
    position: relative !important;
}

/* .produto-galeria-img usa position:absolute pra se centralizar (veja
   acima), mas o Bootstrap deixa ".carousel-item" com position:relative -
   isso faz o "ponto de referência" da centralização ser o carousel-item
   (que sem altura própria colapsa pra 0px) em vez do quadro branco. Solução:
   fazer carousel/carousel-inner/carousel-item herdarem 100% da altura do
   quadro quadrado, virando o mesmo tamanho dele - aí não importa em qual
   desses elementos o navegador "ancora" a centralização, o resultado visual
   é sempre centralizado dentro do quadro. */
#detalhes-produto .produto-galeria .carousel,
#detalhes-produto .produto-galeria .carousel-inner,
#detalhes-produto .produto-galeria .carousel-item {
    height: 100% !important;
    width: 100%;
}

/* Bootstrap usa transform .6s ease-in-out por padrao no slide do
   carrossel - fica lento/flutuante depois de um arrasto rapido. Deixa
   mais curto e com curva de desaceleracao (sem "ease-in" no comeco). */
#detalhes-produto .produto-galeria .carousel-item {
    transition: transform .28s cubic-bezier(.22,.61,.36,1) !important;
}


/* ==========================================================================
   Refino visual inspirado em referência premium (Essential Nutrition): os
   badges "Mais vendido"/"Frete grátis" usavam verde-menta/creme genéricos,
   sem relação com a identidade preto/dourado da marca. Trocados por um
   selo discreto (borda fina + fundo quase branco), mais parecido com o
   "Nova embalagem" da referência - menos gritado, mais elegante.
   ========================================================================== */
#detalhes-produto .produto-badge {
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    border: 1px solid #e3e3e3;
}

#detalhes-produto .badge-green {
    background: var(--nx-white) !important;
    color: var(--nx-black) !important;
    border-color: var(--nx-black);
}

#detalhes-produto .badge-beige {
    background: var(--nx-white) !important;
    color: #8a6a2f !important;
    border-color: var(--nx-gold);
}

/* Selo "Premium Quality Certified" na imagem: menor e mais encostado no
   canto, só na versão mobile (no desktop fica como está). */
@media (max-width: 767px) {
    #detalhes-produto .produto-galeria-selo {
        top: 8px;
        left: 8px;
        width: 52px;
        height: 52px;
    }
}


/* ==========================================================================
   Grid de categoria/loja: mesmo acabamento premium dos carrosséis da home
   (selo de desconto real, cantos arredondados na imagem), com o espaço
   otimizado pra um grid de várias colunas (card um pouco mais compacto que
   o do carrossel da home, que é pensado pra rolar na horizontal).
   ========================================================================== */
.listagem-categoria .item .imagem {
    background: #f4f4f4 !important;
    border-radius: 12px;
    height: 260px !important;
    padding: 16px !important;
}

.listagem-categoria .item .imagem img {
    max-width: 160px !important;
    max-height: 220px !important;
    transition: transform 0.3s ease;
}

.listagem-categoria .item:hover .imagem img {
    transform: scale(1.04);
}

.listagem-categoria .nome {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    line-height: 1.3;
    min-height: 38px;
}

.listagem-categoria .item .infos .valores .valor-pix {
    font-family: 'Inter', sans-serif;
    font-size: 18px !important;
}

.listagem-categoria .item .infos .valores .valor-cartao {
    font-family: 'Inter', sans-serif;
}

.listagem-categoria .item .botao {
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.listagem-categoria .item .botao:hover {
    transform: translateY(-1px);
    background: var(--nx-accent) !important;
}


/* ==========================================================================
   Cards de avaliação: tipografia mais editorial/refinada, inspirada na
   referência (estrelas pretas em vez de amarelas, data no canto oposto das
   estrelas, nome em destaque, texto do comentário com mais respiro entre
   linhas) - sem avatar genérico, que não agregava nada.
   ========================================================================== */
#detalhes-produto .avaliacoes-estrelas i,
#detalhes-produto .avaliacao-stars i {
    color: var(--nx-black) !important;
}

#detalhes-produto .avaliacao-card {
    padding: 22px 20px !important;
}

#detalhes-produto .avaliacao-topo {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px !important;
}

#detalhes-produto .avaliacao-stars {
    font-size: 13px !important;
    margin-bottom: 0 !important;
}

#detalhes-produto .avaliacao-data {
    font-family: 'Inter', sans-serif;
    font-size: 12px !important;
    color: #999 !important;
    white-space: nowrap;
}

#detalhes-produto .avaliacao-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.1px;
    color: var(--nx-black) !important;
    margin: 0 0 10px !important;
}

#detalhes-produto .avaliacao-card p {
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #555 !important;
}

/* style.css original tinha ".avaliacao-card{display:flex;align-items:center}"
   no mobile pensado pro layout antigo (avatar + texto lado a lado). Como o
   card não tem mais avatar, isso empurrava estrelas/nome/texto pra uma
   linha só, espremidos. Volta pro empilhamento vertical normal. */
@media (max-width: 767.9px) {
    #detalhes-produto .avaliacao-card {
        display: block !important;
    }

    #detalhes-produto .avaliacao-card p {
        margin-left: 0 !important;
        margin-top: 0 !important;
        text-align: left !important;
    }
}


/* ==========================================================================
   Carrinho e Checkout: indicador de etapas em formato de aba/seta
   ========================================================================== */

.nx-etapas-compra {
    display: flex;
    width: 100%;
    margin: 0 0 30px;
    padding: 0;
}

.nx-etapa {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 46px;
    background: #c7c7c7;
    position: relative;
}

.nx-etapa:not(:first-child) {
    margin-left: -16px;
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
}

.nx-etapa:not(:last-child) {
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}

.nx-etapa:not(:first-child):not(:last-child) {
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
}

.nx-etapa.is-concluida {
    background: #d8d8d8;
}

.nx-etapa.is-ativa {
    background: #f2f2f2;
}

.nx-etapa.is-futura {
    background: #bcbcbc;
}

.nx-etapa-numero {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #9a9a9a;
    color: var(--nx-white) !important;
    font-family: 'Inter', sans-serif;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nx-etapa.is-ativa .nx-etapa-numero {
    background: var(--nx-black);
}

.nx-etapa-nome {
    font-family: 'Inter', sans-serif;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6e6e6e !important;
    white-space: nowrap;
}

.nx-etapa.is-ativa .nx-etapa-nome {
    color: var(--nx-black) !important;
    font-weight: 800 !important;
}

@media (max-width: 575.9px) {
    .nx-etapa-nome {
        display: none;
    }
    .nx-etapa.is-ativa .nx-etapa-nome {
        display: block;
    }
}

/* ==========================================================================
   Carrinho e Checkout: título da página
   ========================================================================== */

.woocommerce-cart .conteudo > h1,
.woocommerce-checkout .conteudo > h1 {
    display: none;
}

/* ==========================================================================
   Carrinho: aviso de estoque (estilo Nike)
   ========================================================================== */

.wc-block-components-notice-banner.is-info,
.wc-block-store-notices .wc-block-components-notice-banner {
    background: #f5f5f5 !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px !important;
    color: var(--nx-black) !important;
}

/* ==========================================================================
   Carrinho: grid único de 2 colunas pra página inteira

   Antes cada metade do carrinho (lista+order bump / rodapé com prazo,cupom
   e resumo) era um grid separado, empilhado um embaixo do outro. Isso
   deixava a coluna direita (oferta + resumo + botão) presa lá embaixo,
   longe da lista, e sem jeito de ficar "grudada" perto do topo.

   Agora tudo isso vira UM grid só: os blocos-wrapper do WooCommerce
   (wc-block-cart__main, wc-block-cart__sidebar, o bloco de totais e o
   bloco de resumo nativo) viram display:contents (não desenham caixa
   própria, só deixam os filhos reais virarem itens diretos desse grid
   único) - a mesma técnica já usada em outros pontos deste arquivo pra
   não conflitar com o React do WooCommerce. Cada pedaço de conteúdo real
   (lista de produtos, order bump, prazo de entrega, cupom, resumo, botão)
   recebe coluna/linha explícita logo abaixo.
   ========================================================================== */

.wc-block-components-sidebar-layout.wc-block-cart {
    display: grid !important;
    grid-template-columns: 1fr;
    column-gap: 32px;
    row-gap: 0;
    align-items: start;
    position: relative;
}

/* Spinner que cobre a área do carrinho enquanto o React troca o conteúdo
   depois de remover um produto ou mexer na oferta exclusiva - evita que a
   área fique em branco por um instante (ver posicionarColunaDireitaCarrinho
   e mostrarOverlayCarregando em nutrax-checkout-core.php). */
.nx-overlay-carregando {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 30;
}

.nx-overlay-carregando-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #e5e5e5;
    border-top-color: var(--nx-accent, #007456);
    border-radius: 50%;
    animation: nx-overlay-girar 0.7s linear infinite;
}

@keyframes nx-overlay-girar {
    to {
        transform: rotate(360deg);
    }
}

.wc-block-cart .wc-block-cart__main,
.wc-block-cart .wc-block-cart__sidebar,
.wc-block-cart .wp-block-woocommerce-cart-totals-block,
.wc-block-cart .wp-block-woocommerce-cart-order-summary-totals-block {
    display: contents;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

@media (min-width: 992px) {
    /* 3 colunas: prazo de entrega (largura fixa, do tamanho do cartão) |
       cupom de desconto (preenche o espaço em branco ao lado do prazo) |
       coluna direita fixa (oferta/resumo/finalizar compra). A lista de
       produtos, no topo, ocupa as duas primeiras juntas (largura cheia). */
    .wc-block-components-sidebar-layout.wc-block-cart {
        grid-template-columns: 370px 1fr 380px;
    }
}

.wc-block-cart .wp-block-woocommerce-product-collection {
    display: none !important;
}

/* ==========================================================================
   Carrinho CLÁSSICO ([woocommerce_cart]) - ver plano de migração Blocks ->
   clássico. As regras acima (.wc-block-*, .wp-block-woocommerce-*) são do
   carrinho antigo em Blocks e ficam inertes assim que a página passa a
   usar o shortcode (nenhum desses seletores existe mais no HTML) - só serão
   removidas depois de confirmar que o carrinho clássico está estável.
   ========================================================================== */

/* O cart.js nativo cobre a lista de produtos e o resumo com uma sobreposição
   BRANCA (blockUI) toda vez que algo é atualizado via AJAX (quantidade,
   cupom, remover item). Antes travava num valor quase invisível (0.12) só
   pra evitar o "clarão" - mas isso deixava a troca de conteúdo por baixo
   (o replaceWith do form/totais) visível durante a atualização. Agora fica
   bem mais opaca E com um spinner (::after) - esconde de propósito
   qualquer solavanco visual da troca de HTML por baixo, mesma linguagem
   visual do spinner usado na transição pro checkout da Yampi. */
.blockOverlay {
    background-color: #fff !important;
    opacity: 0.85 !important;
}

.blockOverlay::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 4px solid rgba(0, 0, 0, 0.15);
    border-top-color: #000;
    border-radius: 50%;
    animation: nx-cart-carregando-girar 0.8s linear infinite;
}

@keyframes nx-cart-carregando-girar {
    to {
        transform: rotate(360deg);
    }
}

.nx-cart-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 32px;
    row-gap: 24px;
    align-items: start;
    position: relative;
}

.nx-cart-grid .woocommerce-cart-form,
.nx-cart-grid .cart-collaterals {
    display: contents;
}

/* o CSS padrão do WooCommerce (woocommerce-layout.css) tem
   ".cart-collaterals .cart_totals { float:right; width:48% }" pensado pro
   layout clássico de 2 colunas com float - isso prendia a coluna direita
   numa largura pequena mesmo com grid-column:3 definido (grid só controla
   a "faixa"/track, não o item se ele já tem width/float próprios). Anula
   aqui pra a coluna direita ocupar a largura real da 3ª faixa do grid. */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
    float: none !important;
    width: 100% !important;
}

@media (min-width: 992px) {
    .nx-cart-grid {
        grid-template-columns: 370px 1fr 380px;
    }

    table.woocommerce-cart-form__contents {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    #nx-frete-anchor,
    .woo-better-parent-container {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
    }

    .nx-cart-left-actions {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }

    .cart_totals {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: start;
    }
}

@media (max-width: 991.9px) {
    /* uma coluna só: lista, prazo de entrega, cupom, depois oferta+resumo+
       finalizar compra (essas três vêm juntas dentro de .cart_totals, sem
       como separar em linhas diferentes sem duplicar a div) */
    table.woocommerce-cart-form__contents {
        grid-column: 1;
        grid-row: 1;
    }

    #nx-frete-anchor,
    .woo-better-parent-container {
        grid-column: 1;
        grid-row: 2;
    }

    .nx-cart-left-actions {
        grid-column: 1;
        grid-row: 3;
        margin-top: 20px;
    }

    .cart_totals {
        grid-column: 1;
        grid-row: 4;
        margin-top: 20px;
    }
}

/* botão nativo "Update cart" - some da tela, mas continua no DOM (o
   cart.js precisa dele pra habilitar/desabilitar sozinho); o clique
   automático depois de mudar quantidade é feito em
   nutrax_carrinho_interacoes_script() */
.nx-update-cart-oculto {
    display: none !important;
}

/* tabela nativa de totais (subtotal/cupom/frete/total): mantida no DOM
   (cálculo real de frete depende dela existir), escondida visualmente - o
   resumo customizado é o que aparece. O link nativo de remover cupom
   também é reproduzido dentro do resumo (wc_cart_totals_coupon_html), então
   esconder essa tabela inteira via display:none não perde nenhuma função. */
.nx-totals-nativa-oculta {
    display: none !important;
}

/* ==========================================================================
   Carrinho clássico: tabela de produtos
   ========================================================================== */

table.woocommerce-cart-form__contents {
    width: 100%;
    border-collapse: collapse;
    border: none !important;
}

table.woocommerce-cart-form__contents thead {
    border-bottom: 1.5px solid var(--nx-black) !important;
}

/* precisa da MESMA grade de colunas da linha do produto (tbody tr.cart_item
   logo abaixo) - sem isso o cabeçalho usa o layout padrão de tabela (cada
   th do tamanho do próprio conteúdo) e os rótulos "Quantidade"/"Valor
   total" ficam em posições diferentes dos valores reais nas linhas */
table.woocommerce-cart-form__contents thead tr {
    display: grid;
    grid-template-columns: 64px 1fr 150px 170px 28px;
    column-gap: 20px;
}

table.woocommerce-cart-form__contents thead th {
    padding-bottom: 12px !important;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #8c8c8c;
    text-align: left;
}

table.woocommerce-cart-form__contents thead th.product-price,
table.woocommerce-cart-form__contents thead th.product-thumbnail,
table.woocommerce-cart-form__contents thead th.product-remove {
    display: none;
}

table.woocommerce-cart-form__contents thead th.product-name {
    grid-column: 2;
}

table.woocommerce-cart-form__contents thead th.product-quantity {
    grid-column: 3;
}

table.woocommerce-cart-form__contents thead th.product-subtotal {
    grid-column: 4;
    text-align: right;
}

table.woocommerce-cart-form__contents tbody tr.cart_item {
    display: grid;
    grid-template-columns: 64px 1fr 150px 170px 28px;
    column-gap: 20px;
    align-items: start;
    border-bottom: 1px solid #eee !important;
    padding: 16px 0;
}

table.woocommerce-cart-form__contents td {
    border: none !important;
    padding: 0 !important;
}

td.product-thumbnail {
    grid-column: 1;
    grid-row: 1;
}

td.product-thumbnail a,
td.product-thumbnail img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px !important;
    height: 64px !important;
    border-radius: 10px !important;
    border: 1px solid #eee;
    object-fit: contain;
}

td.product-name {
    grid-column: 2;
    grid-row: 1;
    padding-left: 18px !important;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: var(--nx-black) !important;
}

td.product-name a {
    color: var(--nx-black) !important;
    text-decoration: none !important;
}

td.product-price {
    grid-column: 2;
    grid-row: 2;
    padding-left: 18px !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px !important;
}

td.product-price del {
    color: #999 !important;
    text-decoration: line-through !important;
    font-weight: 500 !important;
    margin-right: 6px;
}

td.product-price ins {
    color: var(--nx-black) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.woocommerce-cart-form__cart-item .wc-item-meta,
.woocommerce-cart-form__cart-item .product-name > *:not(a) {
    grid-column: 2;
    padding-left: 18px !important;
    font-size: 12.5px !important;
    color: #888 !important;
}

td.product-quantity {
    grid-column: 3;
    grid-row: 1;
}

td.product-quantity .quantity {
    display: inline-flex;
}

td.product-quantity .qty {
    width: 64px;
    height: 38px;
    border: 1.5px solid #e2e2e2 !important;
    border-radius: 999px !important;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
}

td.product-subtotal {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    text-align: right;
    font-family: 'Inter', sans-serif;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
}

/* Botões "-"/"+" do campo de quantidade - inseridos via JS (ver
   nutrax_carrinho_interacoes_script), escondidos por padrão (desktop já
   tem as setinhas nativas do campo numérico) e só aparecem no mobile,
   onde o campo numérico não tem nenhum controle visível sem abrir o
   teclado. */
.nx-qty-btn {
    display: none;
}

td.product-remove {
    grid-column: 5;
    grid-row: 1;
    justify-self: end;
}

td.product-remove a.remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #999 !important;
    font-size: 22px;
    line-height: 1;
    text-decoration: none !important;
    border-radius: 50%;
}

td.product-remove a.remove:hover {
    color: var(--nx-black) !important;
    background: #f5f5f5;
}

@media (max-width: 767.9px) {
    /* o woocommerce-smallscreen.css (nativo) desenha "Produto:", "Preço:"
       etc via ::before com content:attr(data-title) - o layout em grid
       abaixo já organiza tudo visualmente, então esses rótulos ficam
       redundantes/feios. Anula sem remover o atributo (mantém acessível
       pra leitor de tela via data-title, só não desenha visualmente). */
    table.woocommerce-cart-form__contents tr td::before {
        content: none !important;
    }

    table.woocommerce-cart-form__contents tr td {
        display: block !important;
        text-align: left !important;
        background: transparent !important;
    }

    /* Quantidade, valor total e remover ficavam cada um em sua própria linha
       (empilhados abaixo da imagem, que parava de "acompanhar" na linha 4) -
       visualmente desalinhado/"deformado". Agora os três dividem a MESMA
       linha (2 colunas extras só pra eles: quantidade | valor | remover),
       igual ao padrão comum de carrinho mobile - compacto e alinhado. */
    table.woocommerce-cart-form__contents tbody tr.cart_item {
        display: grid !important;
        grid-template-columns: 70px 1fr auto auto;
        column-gap: 14px;
        row-gap: 8px;
        align-items: center;
        padding: 16px 0;
    }

    td.product-thumbnail {
        grid-column: 1;
        grid-row: 1 / 5;
        align-self: start;
    }

    td.product-name,
    td.product-price,
    .woocommerce-cart-form__cart-item .wc-item-meta {
        grid-column: 2 / 5;
    }

    td.product-name { grid-row: 1; align-self: start; }
    td.product-price { grid-row: 2; align-self: start; padding-left: 0 !important; }
    .woocommerce-cart-form__cart-item .wc-item-meta { grid-row: 3; align-self: start; }

    td.product-quantity {
        grid-column: 2;
        grid-row: 4;
        justify-self: start;
    }

    td.product-quantity .quantity {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    td.product-quantity .qty {
        width: 40px;
        padding: 0 !important;
    }

    .nx-qty-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        border: 1.5px solid #e2e2e2;
        border-radius: 50%;
        background: #fff;
        color: var(--nx-black);
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
        padding: 0;
    }

    .nx-qty-btn:active {
        background: #f5f5f5;
    }

    td.product-subtotal {
        grid-column: 3;
        grid-row: 4;
        justify-self: end;
        text-align: right;
    }

    td.product-remove {
        grid-column: 4;
        grid-row: 4;
        justify-self: end;
    }
}

/* ==========================================================================
   Carrinho clássico: cupom de desconto (ao lado do "Prazo de entrega")
   ========================================================================== */

.nx-cart-left-actions {
    width: 100%;
}

.nx-cart-left-actions .coupon {
    display: block;
}

.nx-cart-left-actions .coupon::before {
    content: 'Cupom de desconto';
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--nx-black) !important;
    margin-bottom: 12px;
}

.nx-cart-left-actions .coupon label {
    display: none;
}

.nx-cart-left-actions .coupon #coupon_code {
    width: 100%;
    height: 44px;
    border-radius: 10px !important;
    border: 1.5px solid #e2e2e2 !important;
    padding: 0 14px;
    font-family: 'Inter', sans-serif;
    margin-bottom: 10px;
}

.nx-cart-left-actions .coupon #coupon_code:focus {
    border-color: var(--nx-black) !important;
    outline: none;
}

.nx-cart-left-actions .coupon button[name="apply_coupon"] {
    width: 100%;
    height: 44px;
    border-radius: 999px !important;
    background: var(--nx-black) !important;
    color: var(--nx-white) !important;
    border: none !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
}

.nx-cart-left-actions .coupon button[name="apply_coupon"]:hover {
    background: var(--nx-accent) !important;
}

/* ==========================================================================
   Carrinho clássico: resumo, cupom aplicado e botão finalizar compra
   ========================================================================== */

.nx-resumo-linha-cupom .woocommerce-remove-coupon {
    margin-left: 6px;
    color: #999 !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}

.cart_totals .wc-proceed-to-checkout {
    margin-top: 16px;
}

/* ==========================================================================
   Carrinho clássico: mensagens de erro/aviso (cupom inválido etc.)
   ========================================================================== */

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    list-style: none;
    background: #f5f5f5 !important;
    border: none !important;
    border-radius: 10px !important;
    /* padding-left maior de propósito: o WooCommerce desenha um ícone
       (fonte "WooCommerce", ::before) posicionado em absolute dentro dessa
       caixa - com pouco espaço à esquerda ele fica em cima do começo do
       texto ("Faltam" virava "🚚ltam"). O padding original do WooCommerce
       reserva esse espaço (3.5em) - aqui só ajustamos pro tamanho da nossa
       caixa, sem tirar o espaço do ícone. */
    padding: 14px 18px 14px 46px !important;
    margin: 0 0 16px !important;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px !important;
    color: var(--nx-black) !important;
}

.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
    top: 50% !important;
    left: 18px !important;
    transform: translateY(-50%);
    font-size: 16px !important;
}

.woocommerce-error {
    background: #fdeceb !important;
    color: #c0392b !important;
}

/* ==========================================================================
   Carrinho clássico: vitrine "Você pode se interessar por..." (carrinho vazio)
   ========================================================================== */

.nx-cart-vazio-vitrine {
    margin-top: 32px;
}

.nx-cart-vazio-vitrine-titulo {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--nx-black) !important;
    margin-bottom: 16px;
}

/* ==========================================================================
   Carrinho: tabela de produtos (Produtos | Quantidade | Valor total)
   ========================================================================== */

.wc-block-cart-items {
    border: none !important;
    display: block !important;
}

/* Força grid em todas as larguras (o bloco nativo alterna entre table/grid
   conforme a largura do container, o que quebrava o alinhamento das colunas) */
.wc-block-cart-items__header,
.wc-block-cart-items__row {
    display: grid !important;
    grid-template-columns: 64px 1fr 150px 170px 28px;
    column-gap: 20px;
    align-items: start;
    width: 100%;
}

.wc-block-cart-items__header {
    border-bottom: 1.5px solid var(--nx-black) !important;
    padding-bottom: 12px !important;
}

.wc-block-cart-items__header-image,
.wc-block-cart-items__header-product,
.wc-block-cart-items__header-total {
    display: block !important;
}

.wc-block-cart-items__header-image span,
.wc-block-cart-items__header-product span,
.wc-block-cart-items__header-total span {
    display: none !important;
}

.wc-block-cart-items__header-image::before,
.wc-block-cart-items__header-product::before,
.wc-block-cart-items__header-total::before,
.wc-block-cart-items__header-quantidade::before {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #8c8c8c;
}

.wc-block-cart-items__header-product {
    grid-column: 2;
    visibility: visible !important;
    padding-left: 18px !important;
}

.wc-block-cart-items__header-product::before {
    content: 'Produtos';
}

.wc-block-cart-items__header::after {
    content: 'Quantidade';
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #8c8c8c;
    line-height: 1;
}

.wc-block-cart-items__header-total {
    grid-column: 4;
    width: auto !important;
    justify-self: end;
}

.wc-block-cart-items__header-total::before {
    content: 'Valor total';
}

.wc-block-cart-items__row {
    border-bottom: 1px solid #eee !important;
    padding: 16px 0 !important;
}

.wc-block-cart-item__image {
    grid-column: 1;
    grid-row: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 64px !important;
    height: 64px !important;
}

.wc-block-cart-item__image > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
}

.wc-block-cart-item__image img {
    border-radius: 10px !important;
    border: 1px solid #eee;
    flex-shrink: 0 !important;
}

.wc-block-cart-item__product,
.wc-block-cart-item__wrap,
.wc-block-cart-item__quantity {
    display: contents !important;
}

.wc-block-components-product-name {
    grid-column: 2;
    grid-row: 1;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: var(--nx-black) !important;
    text-decoration: none !important;
}

.wc-block-cart-items__row .wc-block-components-product-name {
    margin-left: 18px !important;
}

.wc-block-cart-item__prices {
    grid-column: 2;
    grid-row: 2;
    margin-left: 18px !important;
}

.wc-block-cart-item__product .wc-block-components-product-metadata,
.wc-block-cart-item__product .wc-block-components-product-metadata__description {
    grid-column: 2;
    grid-row: 3;
    margin-left: 18px !important;
    font-size: 12.5px !important;
    color: #888 !important;
}

.wc-block-components-quantity-selector {
    grid-column: 3;
    grid-row: 1;
}

.wc-block-cart-item__remove-link {
    grid-column: 5;
    grid-row: 1;
    justify-self: end;
    color: #999 !important;
}

.wc-block-cart-item__remove-link svg {
    width: 18px;
    height: 18px;
}

.wc-block-cart-item__remove-link:hover {
    color: var(--nx-black) !important;
}

.wc-block-cart-item__total {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    align-self: start !important;
    text-align: right;
    height: auto !important;
    padding: 0 !important;
    border: none !important;
}

.wc-block-components-product-price .wc-block-components-formatted-money-amount,
.wc-block-cart-item__total .wc-block-components-formatted-money-amount {
    font-family: 'Inter', sans-serif;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
}

/* ==========================================================================
   Carrinho e Checkout: seletor de quantidade (pílula com - / +)
   ========================================================================== */

.wc-block-components-quantity-selector {
    border: 1.5px solid #e2e2e2 !important;
    border-radius: 999px !important;
    overflow: hidden;
    height: 38px !important;
}

.wc-block-components-quantity-selector__button {
    color: var(--nx-black) !important;
    font-weight: 700 !important;
}

.wc-block-components-quantity-selector__input {
    font-family: 'Inter', sans-serif;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
}

/* ==========================================================================
   Carrinho: order bump (oferta adicional) - posição real definida junto
   com o resto do grid único, no bloco "Carrinho: grid único de 2 colunas"
   mais acima e no bloco de posicionamento por coluna logo abaixo.
   ========================================================================== */

.nx-order-bump {
    display: block;
    width: 100%;
    margin-bottom: 16px;
}

.nx-order-bump-inner {
    position: relative;
    background: #fff;
    border: 1.5px solid var(--nx-accent);
    border-radius: 14px;
    padding: 16px 16px 14px;
}

.nx-order-bump-badge {
    display: inline-block;
    background: var(--nx-accent);
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.nx-order-bump-content {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.nx-order-bump-content img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #eee;
    flex-shrink: 0;
}

.nx-order-bump-info {
    min-width: 0;
}

.nx-order-bump-titulo {
    font-family: 'Inter', sans-serif;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
    margin: 0 0 4px !important;
    line-height: 1.3;
}

.nx-order-bump-preco {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 !important;
    font-family: 'Inter', sans-serif;
}

.nx-order-bump-de {
    font-size: 12px !important;
    color: #999 !important;
    text-decoration: line-through !important;
    font-weight: 500 !important;
}

.nx-order-bump-por {
    font-size: 15px !important;
    color: var(--nx-black) !important;
    font-weight: 800 !important;
}

.nx-order-bump-pct {
    font-size: 11px !important;
    color: var(--nx-accent) !important;
    font-weight: 800 !important;
}

.nx-order-bump-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border-radius: 999px;
    border: 1.5px solid var(--nx-black) !important;
    background: #fff !important;
    color: var(--nx-black) !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.nx-order-bump-btn:hover {
    background: var(--nx-black) !important;
    color: #fff !important;
}

.nx-order-bump-btn--ativo {
    background: var(--nx-accent) !important;
    border-color: var(--nx-accent) !important;
    color: #fff !important;
}

.nx-order-bump-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ==========================================================================
   [REMOVIDO] Posicionamento do carrinho em Blocks (position:absolute via
   JS, seletores .wp-block-woocommerce-*) - substituído pelo grid do
   carrinho clássico (.nx-cart-grid, mais acima). Removido de vez (não só
   deixado inerte) porque a regra ".nx-resumo-custom { position:absolute }"
   reaproveitava o MESMO nome de classe do resumo novo e quebrava o layout
   dele mesmo com o Blocks fora do ar - ver plano de migração.
   ========================================================================== */

/* linhas nativas do resumo (Total de produtos, Frete/seletor de método de
   entrega que só aparece depois que o CEP é calculado): escondidas,
   substituídas pelo resumo detalhado (Valor dos produtos / Descontos /
   Desconto Pix / Frete / Total) montado via JS em
   nutrax_carrinho_resumo_customizado(). Usa seletor descendente (não só
   filho direto) porque o seletor de frete nasce um nível mais fundo
   (dentro de wp-block-woocommerce-cart-order-summary-totals-block) e
   ficava sem placement nenhum no grid, sobrepondo o resumo custom. */
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-wrapper:not(.wp-block-woocommerce-cart-order-summary-coupon-form-block) {
    display: none !important;
}

.nx-resumo-titulo {
    font-family: 'Inter', sans-serif;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--nx-black) !important;
    margin: 0 0 6px !important;
}

.nx-resumo-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px !important;
    color: #555 !important;
}

.nx-resumo-linha span:last-child:not(.nx-resumo-verde) {
    font-weight: 700 !important;
    color: var(--nx-black) !important;
}

.nx-resumo-verde {
    color: var(--nx-accent) !important;
    font-weight: 700 !important;
}

.nx-resumo-gratis {
    color: var(--nx-accent) !important;
    font-weight: 700 !important;
}

.nx-resumo-total-linha {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-top: 1.5px solid var(--nx-black) !important;
    margin-top: 8px;
    padding-top: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--nx-black) !important;
}

.nx-resumo-total-valores {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.nx-resumo-total-final {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--nx-black) !important;
}

.nx-resumo-total-secundario {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #999 !important;
}

/* estes blocos ficam na posicao natural do DOM, nunca sao movidos via JS --
   so posicionados por CSS Grid (ver posições reais lá em cima, no bloco
   com @media min-width:992px), pra nao conflitar com o React do
   WooCommerce Blocks que os gerencia */

.woo-better-parent-container::before {
    content: 'Prazo de entrega';
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--nx-black) !important;
    margin-bottom: 12px;
}

.wp-block-woocommerce-cart-order-summary-coupon-form-block::before {
    content: 'Cupom de desconto';
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--nx-black) !important;
    margin-bottom: 12px;
}


/* widget de CEP do plugin woo-better-shipping-calculator: usa estilo inline próprio, sobrescreve com !important */
.woo-better-input-current-style {
    border-radius: 10px !important;
    border: 1.5px solid #e2e2e2 !important;
    background: var(--nx-white) !important;
    color: var(--nx-black) !important;
    height: 44px !important;
}

/* ícones do plugin vêm com filtro CSS azul (blue-icon); força tom neutro/preto */
.woo-better-icon-current-style,
.woo-better-icon.blue-icon,
img.blue-icon {
    filter: brightness(0) saturate(100%) opacity(0.55) !important;
}

.woo-better-button-current-style {
    border-radius: 999px !important;
    background: var(--nx-black) !important;
    color: var(--nx-white) !important;
    border: none !important;
    font-weight: 700 !important;
}

.woo-better-link-current-style {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px !important;
    color: #999 !important;
}

.woo-better-current-postcode-text,
.woo-better-cart-name,
.woo-better-cart-quantity {
    font-family: 'Inter', sans-serif;
    color: var(--nx-black) !important;
}

.woo-better-change-postcode-button {
    color: var(--nx-black) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

.woo-better-info-block {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 14px;
    margin-top: 10px;
}

/* ==========================================================================
   Carrinho e Checkout: cupom de desconto e campos de texto
   ========================================================================== */

.wc-block-components-totals-coupon__input input,
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-shipping-calculator-address input {
    border-radius: 10px !important;
    border: 1.5px solid #e2e2e2 !important;
}

.wc-block-components-totals-coupon__input input:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus {
    border-color: var(--nx-black) !important;
    box-shadow: none !important;
}

.wc-block-components-totals-coupon__button,
.wc-block-components-shipping-calculator-address button {
    border-radius: 999px !important;
    background: var(--nx-black) !important;
    color: var(--nx-white) !important;
    border: none !important;
    font-weight: 700 !important;
    text-transform: none;
}

.wc-block-components-totals-coupon__button:hover:not(:disabled) {
    background: var(--nx-accent) !important;
}

.wc-block-components-panel .wc-block-components-panel__button {
    font-family: 'Inter', sans-serif;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
}

.wc-block-components-totals-shipping .wc-block-components-panel {
    border: none !important;
}

/* ==========================================================================
   Carrinho e Checkout: linhas de totais (subtotal, frete, total)
   ========================================================================== */

.wc-block-components-totals-item {
    padding: 18px 0 !important;
}

.wc-block-components-totals-item__label {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #555 !important;
}

.wc-block-components-totals-item__value {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
}

.wc-block-components-totals-footer-item {
    border-top: 1.5px solid var(--nx-black) !important;
    padding-top: 26px !important;
    padding-bottom: 4px !important;
    margin-top: 16px !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--nx-black) !important;
}

.wc-block-components-totals-item__value .wc-block-components-formatted-money-amount {
    font-weight: inherit !important;
}

/* ==========================================================================
   Carrinho e Checkout: botões pretos de ação principal (pílula)
   ========================================================================== */

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-proceed-to-checkout a.checkout-button {
    background: var(--nx-black) !important;
    color: var(--nx-white) !important;
    border-radius: 999px !important;
    border: none !important;
    font-family: 'Inter', sans-serif;
    font-size: 15px !important;
    font-weight: 700 !important;
    height: 52px !important;
    text-transform: none;
    letter-spacing: 0.2px;
    transition: background .2s ease;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
    background: var(--nx-accent) !important;
    color: var(--nx-white) !important;
}

/* ==========================================================================
   Checkout: coluna única, fina e centralizada (etapas em cima, resumo
   embaixo) - mesma proporção do mobile, também no desktop
   ========================================================================== */

.wc-block-components-sidebar-layout.wc-block-checkout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 24px;
    max-width: 560px;
    margin: 0 auto;
}

.wc-block-checkout__main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    order: 1;
}

.wc-block-checkout__sidebar {
    width: 100% !important;
    max-width: 100% !important;
    order: 2;
    position: static;
}

.wc-block-checkout__sidebar {
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 26px 24px !important;
}

.wc-block-components-checkout-order-summary__title {
    display: none !important;
}

/* o resumo do checkout tem 2 variantes no DOM ao mesmo tempo (uma normal,
   que fica dentro do sidebar, e uma "fill-wrapper" colapsável que o
   WooCommerce pode inserir fora do sidebar, direto no fluxo da coluna
   principal). Qual delas recebe dados reais varia conforme a largura do
   container, e por isso o critério de qual esconder é decidido via JS em
   nutrax_checkout_resumo_variante_correta() (esconde a vazia e move a
   populada pra dentro do sidebar). Aqui, independente de onde a variante
   viva no DOM, escondemos só o título/botão dela (redundante com nosso
   "Produtos"/"Resumo") e forçamos o conteúdo a ficar sempre aberto -
   por isso o seletor NÃO é restrito a .wc-block-checkout__sidebar. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-step__heading {
    height: 0;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    border: none !important;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content {
    display: block !important;
}

.wp-block-woocommerce-checkout-order-summary-coupon-form-block {
    display: none !important;
}

.wp-block-woocommerce-checkout-order-summary-cart-items-block::before {
    content: 'Produtos';
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--nx-black) !important;
    margin-bottom: 22px;
}

.wp-block-woocommerce-checkout-order-summary-cart-items-block {
    border-bottom: 1px solid #ececec;
    padding-bottom: 28px;
    margin-bottom: 28px;
}

.wp-block-woocommerce-checkout-order-summary-totals-block::before {
    content: 'Resumo';
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--nx-black) !important;
    margin-top: 28px;
    margin-bottom: 20px;
}

/* Checkout (desktop): linhas de separação do Resumo mais espaçadas e
   recuadas das bordas, em vez de tocar de ponta a ponta - só no desktop,
   já que no mobile a largura já é naturalmente mais justa */
@media (min-width: 992px) {
    .wp-block-woocommerce-checkout-order-summary-cart-items-block {
        margin-left: 18px;
        margin-right: 18px;
        padding-bottom: 34px;
        margin-bottom: 34px;
    }

    .wp-block-woocommerce-checkout-order-summary-cart-items-block::before {
        margin-bottom: 26px;
    }

    .wp-block-woocommerce-checkout-order-summary-totals-block {
        margin-left: 18px;
        margin-right: 18px;
    }

    .wp-block-woocommerce-checkout-order-summary-totals-block::before {
        margin-bottom: 24px;
    }

    .wc-block-components-totals-item {
        padding: 14px 0 !important;
    }

    .wc-block-components-totals-footer-item {
        width: auto !important;
        padding-top: 30px !important;
        margin-top: 18px !important;
        margin-left: 18px !important;
        margin-right: 18px !important;
    }
}

.wc-block-components-order-summary-item {
    align-items: flex-start !important;
}

.wc-block-components-order-summary-item__image {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
}

.wc-block-components-order-summary-item__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

.wc-block-components-order-summary-item__total-price {
    flex: 0 0 auto !important;
    max-width: 100px !important;
}

.wc-block-components-order-summary-item__description {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
    white-space: normal !important;
    max-width: 100% !important;
}

/* ==========================================================================
   Checkout: passos numerados (cartão único em foco)
   ========================================================================== */

.wc-block-components-checkout-step {
    border: 1px solid #ececec !important;
    padding: 24px 22px !important;
    background: #fafafa !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
}

.wc-block-components-checkout-step:first-child {
    margin-top: 0 !important;
}

.wc-block-components-checkout-step__heading-container {
    align-items: center;
}

.wc-block-components-checkout-step__title {
    font-family: 'Inter', sans-serif;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--nx-black) !important;
}

.wc-block-components-checkout-step__description {
    font-size: 13px !important;
    color: #888 !important;
}

.wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__heading-content::before {
    background: var(--nx-black) !important;
    color: var(--nx-white) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 700 !important;
}

/* ==========================================================================
   Checkout: identificação — entrar/criar conta ou continuar sem conta
   ========================================================================== */

.wc-block-checkout__login-prompt,
.wc-block-checkout__guest-checkout-notice {
    background: var(--nx-white);
    border: none;
    border-radius: 10px;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px !important;
    color: #666 !important;
    line-height: 1.6;
}

.wc-block-checkout__login-prompt a,
.wc-block-checkout__guest-checkout-notice a {
    color: var(--nx-black) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   Checkout: opções de frete e pagamento (radio em cartão)
   ========================================================================== */

.wc-block-checkout__shipping-method-option,
.wc-block-components-radio-control__option {
    border: 1.5px solid #e2e2e2 !important;
    border-radius: 12px !important;
    padding: 14px 16px 14px 44px !important;
    margin-bottom: 10px !important;
    background: var(--nx-white);
    transition: border-color .2s ease;
}

.wc-block-checkout__shipping-method-option--selected,
.wc-block-components-radio-control__option[aria-checked="true"],
.wc-block-components-radio-control__option.is-active {
    border-color: var(--nx-black) !important;
}

.wc-block-components-radio-control__input:checked {
    background-color: var(--nx-black) !important;
    border-color: var(--nx-black) !important;
}

.wc-block-components-radio-control__label {
    font-family: 'Inter', sans-serif;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
    font-size: 13.5px !important;
}

/* ==========================================================================
   Checkout: termos
   ========================================================================== */

.wc-block-checkout__terms {
    font-size: 12.5px !important;
    color: #777 !important;
}

.wc-block-checkout__terms a {
    color: var(--nx-black) !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   Gaveta lateral "Adicionado ao carrinho" (estilo Nike)
   ========================================================================== */

.nx-cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 99998;
}

.nx-cart-drawer-overlay.is-ativo {
    opacity: 1;
    pointer-events: auto;
}

.nx-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 92vw;
    height: 100%;
    background: var(--nx-white);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
    z-index: 99999;
    padding: 26px 24px;
    transform: translateX(100%);
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
}

.nx-cart-drawer.is-ativo {
    transform: translateX(0);
}

.nx-cart-drawer-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.nx-cart-drawer-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
}

.nx-cart-drawer-titulo svg {
    width: 19px;
    height: 19px;
    color: var(--nx-accent) !important;
    flex-shrink: 0;
}

.nx-cart-drawer-fechar {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
}

.nx-cart-drawer-fechar svg {
    width: 18px;
    height: 18px;
    color: var(--nx-black) !important;
}

.nx-cart-drawer-item {
    display: flex;
    gap: 14px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid #eee;
}

.nx-cart-drawer-item img {
    width: 78px;
    height: 78px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid #eee;
    flex-shrink: 0;
}

.nx-cart-drawer-item-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nx-cart-drawer-item-nome {
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
    line-height: 1.3;
}

.nx-cart-drawer-item-info span {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px !important;
    color: #888 !important;
}

.nx-cart-drawer-item-preco {
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
    margin-top: 4px;
}

.nx-cart-drawer-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    background: var(--nx-black);
    color: var(--nx-white) !important;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background .2s ease;
}

.nx-cart-drawer-botao:hover {
    background: var(--nx-accent);
    color: var(--nx-white) !important;
}

/* ==========================================================================
   Carrinho e Checkout: responsivo mobile
   ========================================================================== */

@media (max-width: 767.9px) {
    .wc-block-cart-items__header {
        display: none !important;
    }

    .wc-block-cart-items__row {
        grid-template-columns: 70px 1fr !important;
        row-gap: 10px;
    }

    .wc-block-cart-item__image {
        grid-column: 1;
        grid-row: 1 / 4;
        align-self: start;
    }

    .wc-block-components-product-name,
    .wc-block-cart-item__prices,
    .wc-block-cart-item__product .wc-block-components-product-metadata {
        grid-column: 2;
    }

    .wc-block-components-product-name {
        grid-row: 1;
    }

    .wc-block-cart-item__prices {
        grid-row: 2;
    }

    .wc-block-cart-item__product .wc-block-components-product-metadata {
        grid-row: 3;
    }

    .wc-block-components-quantity-selector {
        grid-column: 2;
        grid-row: 4;
        justify-self: start;
    }

    .wc-block-cart-item__total {
        grid-column: 2;
        grid-row: 5 !important;
        justify-self: start;
        text-align: left;
    }

    .wc-block-cart-item__remove-link {
        grid-column: 2;
        grid-row: 6;
        justify-self: start;
    }
}

/* [REMOVIDO] Empilhamento mobile do carrinho em Blocks - mesmo motivo do
   bloco desktop acima (reaproveitava .nx-order-bump/.nx-resumo-custom/
   .woo-better-parent-container e entrava em conflito com o carrinho
   clássico nesses mesmos nomes de classe). Substituído pelas regras mobile
   de .nx-cart-grid mais acima. */

@media (max-width: 991.9px) {
    .nx-cart-drawer {
        width: 100%;
        max-width: 100vw;
    }
}

/* ==========================================================================
   Carrinho e Checkout: remover o menu de categorias do topo (não faz sentido
   durante a compra, igual referência Nike que só mostra logo/busca/ícones)
   ========================================================================== */

body.woocommerce-cart #topo-menu-categorias,
body.woocommerce-checkout #topo-menu-categorias {
    display: none !important;
}

/* imagem inteira e centralizada (não cortada): ver regras de
   .wc-block-cart-item__image mais acima, na seção da tabela de produtos */
.wc-block-cart-item__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* ==========================================================================
   Carrinho: selo "Economize" em verde (resto da listagem em preto e branco)
   ========================================================================== */

.wc-block-components-sale-badge {
    background: transparent !important;
    color: var(--nx-accent) !important;
    font-weight: 600 !important;
    padding: 2px 0 !important;
}

/* ==========================================================================
   Checkout: tela de escolha "Entrar ou criar conta" / "Continuar sem conta"
   ========================================================================== */

.nx-ident-gate {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nx-ident-gate-desc {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px !important;
    color: #666 !important;
    line-height: 1.6;
    margin: 0 !important;
}

.nx-ident-gate-btn-entrar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--nx-black);
    color: var(--nx-white) !important;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background .2s ease;
}

.nx-ident-gate-btn-entrar:hover {
    background: var(--nx-accent);
}

.nx-ident-gate-btn-visitante {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--nx-white);
    color: var(--nx-black) !important;
    border: 1.5px solid var(--nx-black);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.nx-ident-gate-btn-visitante:hover {
    background: var(--nx-black);
    color: var(--nx-white) !important;
}

/* botão "Continuar para..." inserido no fim de cada etapa do fluxo progressivo */
.nx-etapa-continuar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    margin-top: 18px;
    background: var(--nx-black);
    color: var(--nx-white) !important;
    border: none;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background .2s ease;
}

.nx-etapa-continuar:hover {
    background: var(--nx-accent);
}

/* etapas de endereço/pagamento começam escondidas (fluxo progressivo) e
   entram com uma transição suave quando reveladas via JS */
.wc-block-checkout__billing-fields,
.wc-block-checkout__payment-method {
    transition: opacity .35s ease;
}

/* Visibilidade das etapas do fluxo progressivo do checkout: controlada só
   por classe na raiz (.wp-block-woocommerce-checkout), nunca por
   style.display direto nos blocos do WooCommerce -- esses blocos são
   recriados pelo React a cada atualização, e um display setado direto
   neles se perde nessa recriação. Usando a classe na raiz como gatilho,
   a regra CSS continua valendo mesmo que o conteúdo interno seja
   recriado, porque a raiz em si nunca é substituída. */
.wp-block-woocommerce-checkout.nx-etapa-gate .wc-block-checkout__contact-fields .wc-block-components-checkout-step__content,
.wp-block-woocommerce-checkout.nx-etapa-gate .wc-block-checkout__billing-fields,
.wp-block-woocommerce-checkout.nx-etapa-gate .wc-block-checkout__payment-method {
    display: none !important;
}

.wp-block-woocommerce-checkout.nx-etapa-contato .wc-block-checkout__billing-fields,
.wp-block-woocommerce-checkout.nx-etapa-contato .wc-block-checkout__payment-method {
    display: none !important;
}

.wp-block-woocommerce-checkout.nx-etapa-endereco .wc-block-checkout__payment-method {
    display: none !important;
}

.wp-block-woocommerce-checkout.nx-etapa-pagamento .wc-block-checkout__billing-fields {
    display: none !important;
}

/* ==========================================================================
   Checkout: cartões de forma de pagamento (Cartão / Pix / Boleto)
   ========================================================================== */

/* esconde só a linha clicável do rádio nativo (bolinha + ícone + nome) de
   cada opção de pagamento - NUNCA o .wc-block-components-radio-control
   inteiro nem o .wc-block-components-radio-control-accordion-content, que é
   onde fica o formulário de verdade de cada gateway (ex: os campos seguros
   de número/validade/cvv do cartão do Mercado Pago). Feito via CSS (não
   JS/display:none no elemento pai) pra sobreviver a qualquer re-render do
   React sem precisar rodar script de novo. */
.wc-block-checkout__payment-method .wc-block-components-radio-control__option {
    display: none !important;
}

/* endereço único: o cliente só preenche um endereço (o de entrega), sem
   opção de ter um endereço de cobrança separado - a caixinha "usar o mesmo
   endereço para cobrança" fica sempre marcada e escondida (o JS garante o
   estado marcado, veja nutrax_checkout_endereco_unico) */
.wc-block-checkout__use-address-for-billing {
    display: none !important;
}

.nx-pagamento-opcoes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nx-pagamento-opcoes--travado {
    opacity: .55;
    pointer-events: none;
    cursor: wait;
}

.nx-pagamento-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1.5px solid #e2e2e2;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.nx-pagamento-card:hover {
    border-color: #ccc;
}

.nx-pagamento-card--ativo {
    border-color: var(--nx-black) !important;
    background: #fafafa;
}

.nx-pagamento-radio {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    border: 1.5px solid #ccc;
    position: relative;
    transition: border-color .2s ease;
}

.nx-pagamento-card--ativo .nx-pagamento-radio {
    border-color: var(--nx-black);
}

.nx-pagamento-card--ativo .nx-pagamento-radio::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--nx-black);
}

.nx-pagamento-conteudo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.nx-pagamento-label {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nx-pagamento-label .fa-pix {
    color: #3d3d3d;
}

.nx-pagamento-icones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    color: #666;
}

/* ==========================================================================
   Tela de "pague com Pix" / "pagamento aprovado" (order-received)
   ========================================================================== */

.nx-pix-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 8px 4px 40px;
}

.nx-pix-titulo {
    font-family: 'Inter', sans-serif;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--nx-black) !important;
    text-align: center;
    margin: 0 0 10px !important;
}

.nx-pix-pedido-numero {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px !important;
    color: #666 !important;
    text-align: center;
    margin: 0 0 24px !important;
}

.nx-pix-qr-bloco {
    background: #f7f7f5;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    margin-bottom: 16px;
}

.nx-pix-expira-label {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px !important;
    color: #555 !important;
    margin: 0 0 10px !important;
}

.nx-pix-timer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1.5px solid #f0a04b;
    color: #c8681c !important;
    border-radius: 999px;
    padding: 8px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px !important;
    font-weight: 700 !important;
}

.nx-pix-timer-icone {
    font-size: 15px;
}

.nx-pix-confirmacao-nota {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px !important;
    color: #777 !important;
    margin: 10px 0 0 !important;
}

.nx-pix-qr-card {
    background: var(--nx-white);
    border-radius: 14px;
    padding: 22px;
    margin-top: 18px;
}

.nx-pix-qr-titulo {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
    margin: 0 0 16px !important;
}

.nx-pix-qr-img {
    width: 220px;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0 auto;
    display: block;
}

.nx-pix-qr-total {
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    color: #555 !important;
    margin: 18px 0 0 !important;
}

.nx-pix-qr-total strong {
    color: var(--nx-black) !important;
    font-weight: 800 !important;
}

.nx-pix-copia-card {
    background: var(--nx-white);
    border-radius: 14px;
    padding: 22px;
    margin-top: 12px;
}

.nx-pix-copia-titulo {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
    margin: 0 0 14px !important;
}

.nx-pix-copia-input {
    width: 100%;
    resize: none;
    height: 64px;
    border: 1.5px solid #e2e2e2;
    border-radius: 10px;
    padding: 10px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 12px !important;
    color: #666 !important;
    background: #fafafa;
    margin-bottom: 14px;
}

.nx-pix-secundario-card,
.nx-pix-resumo-card,
.nx-pix-itens-card,
.nx-pix-endereco-card {
    background: #f7f7f5;
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 16px;
}

.nx-pix-secundario-titulo,
.nx-pix-resumo-titulo,
.nx-pix-itens-titulo,
.nx-pix-endereco-titulo {
    font-family: 'Inter', sans-serif;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--nx-black) !important;
    margin: 0 0 6px !important;
}

.nx-pix-secundario-texto {
    font-family: 'Inter', sans-serif;
    font-size: 13px !important;
    color: #777 !important;
    margin: 0 0 16px !important;
}

.nx-pix-acoes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.nx-pix-acoes-final {
    margin-top: 4px;
}

.nx-pix-btn {
    flex: 1;
    min-width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
    padding: 0 16px;
}

.nx-pix-btn-preto {
    background: var(--nx-black);
    border: none;
    color: var(--nx-white) !important;
}

.nx-pix-btn-preto:hover {
    background: var(--nx-accent);
}

.nx-pix-btn-outline {
    background: var(--nx-white);
    border: 1.5px solid #ddd;
    color: var(--nx-black) !important;
}

.nx-pix-btn-outline:hover {
    border-color: var(--nx-black);
}

.nx-pix-accordion {
    border-top: 1px solid #eee;
    margin-bottom: 16px;
}

.nx-pix-accordion-cabecalho {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    border-bottom: 1px solid #eee;
    padding: 16px 2px;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
    cursor: pointer;
    text-align: left;
}

.nx-pix-accordion-seta {
    transition: transform .2s ease;
    color: #999;
}

.nx-pix-accordion-cabecalho[aria-expanded="true"] .nx-pix-accordion-seta {
    transform: rotate(180deg);
}

.nx-pix-accordion-corpo {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
}

.nx-pix-accordion-corpo p {
    font-family: 'Inter', sans-serif;
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.6;
    padding: 4px 2px 16px;
    margin: 0 !important;
}

.nx-pix-resumo-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px !important;
    color: #555 !important;
}

.nx-pix-resumo-linha span:last-child {
    font-weight: 700 !important;
    color: var(--nx-black) !important;
}

.nx-pix-resumo-verde {
    color: var(--nx-accent) !important;
}

.nx-pix-resumo-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1.5px solid var(--nx-black);
    margin-top: 8px;
    padding-top: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--nx-black) !important;
}

.nx-pix-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
}

.nx-pix-item:not(:last-child) {
    border-bottom: 1px solid #eee;
}

.nx-pix-item-img img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--nx-white);
}

.nx-pix-item-nome {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
    margin: 0 0 4px !important;
}

.nx-pix-item-qtd {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px !important;
    color: #888 !important;
    margin: 0 !important;
}

.nx-pix-endereco-linha {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px !important;
    color: #555 !important;
    margin: 0 0 4px !important;
}

/* estado "pagamento aprovado" */
.nx-pix-aprovado {
    text-align: center;
    padding-top: 40px;
}

.nx-pix-aprovado-icone {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--nx-accent);
    color: var(--nx-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.nx-pix-aprovado-titulo {
    font-family: 'Inter', sans-serif;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--nx-black) !important;
    margin: 0 0 10px !important;
}

.nx-pix-aprovado-texto {
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    color: #666 !important;
    max-width: 380px;
    margin: 0 auto 26px !important;
    line-height: 1.6;
}

.nx-pix-aprovado .nx-pix-acoes {
    max-width: 380px;
    margin: 0 auto;
}

@media (max-width: 575.9px) {
    .nx-pix-acoes {
        flex-direction: column;
    }

    .nx-pix-btn {
        width: 100%;
    }
}

.nx-pagamento-aviso {
    margin: 10px 0 0 !important;
    padding: 12px 14px;
    background: #fff6e5;
    border: 1px solid #f0d9a6;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px !important;
    color: #7a5c00 !important;
    line-height: 1.4;
}

/* ==========================================================================
   Formulário de cartão de crédito do Mercado Pago (checkout): mesma
   linguagem visual da caixa de "Endereço de cobrança" -- caixa clara,
   cantos arredondados, campos consistentes com o resto do checkout.
   ========================================================================== */

/* O CSS do proprio plugin do Mercado Pago usa seletores encadeados com
   varios IDs (ex.: "#mp-checkout-custom-root #mp-custom-checkout-form-container
   .mp-checkout-custom-card-form .mp-checkout-custom-card-input"), entao um
   simples "#mp-checkout-custom-root .algo" nosso perde a briga de
   especificidade. Repetir o mesmo ID varias vezes no seletor (valido em CSS)
   multiplica o peso de ID sem depender de conhecer toda a estrutura interna
   deles -- garante que a nossa regra ganhe independente da ordem de
   carregamento das folhas de estilo. */

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-checkout-custom-container.mp-checkout-custom-container {
    background: #f7f7f5 !important;
    border-radius: 16px !important;
    padding: 22px !important;
    margin-top: 12px !important;
    display: block !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-checkout-custom-card-flags.mp-checkout-custom-card-flags {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    opacity: .8;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-checkout-custom-card-flags img {
    height: 22px !important;
    width: auto !important;
}

/* aviso "Modo Teste": mesmo tom do timer de expiracao do Pix, pra ficar
   consistente visualmente com o resto do checkout */
#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-test-mode-card.mp-test-mode-card {
    background: #fff6e5 !important;
    border: 1px solid #f0d9a6 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin-bottom: 16px !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-test-mode-badge {
    background: #c8681c !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-test-mode-title,
#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-test-mode-description {
    font-family: 'Inter', sans-serif !important;
    color: #7a5c00 !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-test-mode-title {
    font-size: 13px !important;
    font-weight: 700 !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-test-mode-description {
    font-size: 12px !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-test-mode-link {
    color: #7a5c00 !important;
    text-decoration: underline !important;
}

/* botão "pague com um toque" (carteira/cartões salvos): mantido, mas
   discreto -- o foco principal é o formulário manual abaixo */
#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-wallet-button-container-wrapper.mp-wallet-button-container-wrapper {
    background: var(--nx-white) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-wallet-button-title span {
    font-family: 'Inter', sans-serif !important;
    font-size: 12.5px !important;
    color: #666 !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-privacy-policy-footer span,
#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-privacy-policy-footer a {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    color: #999 !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-checkout-custom-card-form.mp-checkout-custom-card-form {
    background: var(--nx-white) !important;
    border-radius: 14px !important;
    padding: 22px !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-checkout-custom-card-row.mp-checkout-custom-card-row {
    margin-bottom: 16px !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-checkout-custom-card-row.mp-checkout-custom-card-row:last-child {
    margin-bottom: 0 !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-checkout-custom-dual-column-row.mp-checkout-custom-dual-column-row {
    display: flex !important;
    gap: 14px !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-checkout-custom-card-column.mp-checkout-custom-card-column {
    flex: 1 !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-input-label.mp-input-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--nx-black) !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
}

/* essa classe cobre tanto os wrappers dos iframes seguros (numero,
   validade, cvv) quanto o input comum (nome do titular) -- estilizando
   ela dá aparência uniforme pros dois tipos de campo */
#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-checkout-custom-card-input.mp-checkout-custom-card-input {
    border: 1.5px solid #e2e2e2 !important;
    border-radius: 10px !important;
    height: 48px !important;
    background: var(--nx-white) !important;
    box-sizing: border-box !important;
    transition: border-color .2s ease;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-checkout-custom-card-input.mp-checkout-custom-card-input:focus-within {
    border-color: var(--nx-black) !important;
}

/* Os campos de numero/validade/cvv sao iframes seguros injetados pelo
   proprio JS do Mercado Pago, sem width/height explicitos -- por padrao
   ficam com display:inline e width:auto, o que colapsa pra 0x0 (invisiveis
   e impossiveis de clicar). O wrapper .mp-checkout-custom-card-input acima
   ja tem height:48px, entao aqui so precisamos fazer o iframe herdar esse
   espaço. */
#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-checkout-custom-card-input.mp-checkout-custom-card-input iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root input.mp-checkout-custom-card-input.mp-checkout-custom-card-input {
    width: 100% !important;
    padding: 0 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: var(--nx-black) !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-custom-checkout-select-input.mp-custom-checkout-select-input,
#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root #form-checkout__identificationType,
#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root #form-checkout__identificationNumber,
#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root #form-checkout__issuer {
    width: 100% !important;
    height: 48px !important;
    border: 1.5px solid #e2e2e2 !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: var(--nx-black) !important;
    background: var(--nx-white) !important;
    box-sizing: border-box !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-checkout-custom-installments-select-container.mp-checkout-custom-installments-select-container {
    margin-top: 16px !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-helper-message.mp-helper-message {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-helper-message.error {
    color: #cc1818 !important;
}

#mp-checkout-custom-root#mp-checkout-custom-root#mp-checkout-custom-root .mp-helper-message.info {
    color: #888 !important;
}

/* ==========================================================================
   Tela de "pague com boleto" (order-received) -- reaproveita as classes
   .nx-pix-* ja existentes pra manter a mesma linguagem visual da tela do Pix
   ========================================================================== */

.nx-boleto-valor {
    border-color: var(--nx-accent) !important;
    color: var(--nx-accent) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    padding: 10px 24px !important;
}

.nx-boleto-iframe {
    width: 100%;
    height: 640px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    margin-bottom: 18px;
}

.nx-boleto-btn-baixar {
    max-width: 320px;
    margin: 0 auto;
}

@media (max-width: 575.9px) {
    .nx-boleto-iframe {
        height: 420px;
    }
}

/* Pool de imagens-fonte das landings (usado pelo JS p/ trocar a foto nas abas) — nunca visível */
#wpImgSource{display:none !important;}

/* --- Botão flutuante da galeria em produto ESGOTADO (avise-me) ---
   Antes: círculo 32px preto com texto preto vazando (invisível).
   Agora: pílula escura com texto BRANCO legível + sino. */
#detalhes-produto .produto-galeria-add-carrinho.nx-avise-btn{
    width:auto !important; height:auto !important;
    padding:8px 14px !important; border-radius:999px !important;
    font-size:11.5px !important; font-weight:700 !important;
    color:#fff !important; white-space:nowrap !important;
    background:#0f172a !important; line-height:1 !important;
    display:inline-flex !important; align-items:center !important; gap:6px;
    box-shadow:0 6px 18px rgba(0,0,0,.35);
}
#detalhes-produto .produto-galeria-add-carrinho.nx-avise-btn::before{
    content:"\1F514"; font-size:12px;
}
/* reforça o ícone de carrinho BRANCO (produtos em estoque) */
#detalhes-produto .produto-galeria-add-carrinho i{ color:#fff !important; }

/* --- Pools de imagens-fonte de TODAS as landings de produto ---
   (whey usa #wpImgSource, creatine usa <div aria-hidden> com data-flavor, etc.)
   São fontes que o JS usa pra trocar a foto — nunca devem aparecer.
   Regra geral: qualquer aria-hidden dentro da descrição do produto fica escondido. */
#descricao-produto [aria-hidden="true"],
.ic-root [aria-hidden="true"],
.wp-root [aria-hidden="true"]{ display:none !important; }

/* Hero "D3 + K2 MK7 — a combinação perfeita": texto centralizado (pedido do cliente) */
#anx-d3k2-nutrax .anx-closing-inner{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
#anx-d3k2-nutrax .anx-closing-inner > *{ margin-left:auto !important; margin-right:auto !important; }

/* ==========================================================================
   Legibilidade do texto por banner (pedido do cliente).
   Scrim entre a imagem nítida (z-index 3) e o conteúdo (z-index 5).
   Banner 849 (It's Creatine): sombra à esquerda p/ o texto branco destacar.
   Banner 857 (Bem-estar/cápsulas): brilho branco à direita p/ o texto grafite.
   ========================================================================== */
.slide-id-849 > a::before,
.slide-id-857 > a::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
}
/* Creatine — texto claro à esquerda: escurece a esquerda */
.slide-id-849 > a::before{
    background:linear-gradient(90deg,
        rgba(0,0,0,.58) 0%,
        rgba(0,0,0,.34) 30%,
        rgba(0,0,0,0) 58%);
}
/* Bem-estar — texto grafite à direita: brilho branco SÓ atrás do texto,
   estreito, para não avançar sobre os potes no centro. */
.slide-id-857 > a::before{
    background:linear-gradient(270deg,
        rgba(255,255,255,.85) 0%,
        rgba(255,255,255,.55) 14%,
        rgba(255,255,255,0) 30%);
}
/* No mobile o texto vai pra baixo/centro — scrim suave de baixo p/ cima */
@media (max-width:767px){
    .slide-id-849 > a::before{
        background:linear-gradient(0deg,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.15) 45%,
            rgba(0,0,0,0) 70%);
    }
    .slide-id-857 > a::before{
        background:linear-gradient(0deg,
            rgba(255,255,255,.85) 0%,
            rgba(255,255,255,.35) 45%,
            rgba(255,255,255,0) 70%);
    }
}

/* Selo de kit no item da gaveta/carrinho (Packs Inteligentes) */
.nxg-item-kit{display:inline-flex;align-items:center;gap:4px;margin:2px 0 4px;font-size:11px;font-weight:700;color:#15803d;background:#e7f6ec;border:1px solid #bfe6cc;border-radius:999px;padding:2px 9px;line-height:1.3;}
.nxg-item-kit b{font-weight:800;}