/*
 * Camada de estilo baseada no PDF de referência final ("All Nutrax 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, ALL NUTRAX", 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 ALL NUTRAX) 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-promocional {
    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-black) !important;
    color: var(--nx-white) !important;
}

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

/* style.css original tem ".home-produtos-listagem2 .item .botao i { color:#000 }"
   que é mais específico que o "*" acima (seletor de tipo > universal), então
   precisa ser sobrescrito explicitamente aqui. */
.home-produtos-listagem2 .item .botao i {
    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;
    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: 767px) {
    /* 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. */
    .home-packs-grid {
        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;
        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;
    }
}


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

.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 42%;
        aspect-ratio: 3 / 4.6;
    }

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


/* ==========================================================================
   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;
    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%;
}

@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, ALL NUTRAX": 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, ALL NUTRAX": 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, ALL NUTRAX": 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;
}

.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, ALL NUTRAX" / 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%;
}


/* ==========================================================================
   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 .info-parcelamento1,
.listagem-categoria .info-parcelamento2 {
    font-family: 'Inter', sans-serif;
}

.listagem-categoria .info-parcelamento2 {
    color: var(--nx-accent) !important;
    font-weight: 600;
}

.listagem-categoria .item .infos .valores .valor-promocional {
    font-family: 'Inter', sans-serif;
    font-size: 19px !important;
    color: var(--nx-black) !important;
}

.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: layout principal empilhado (tabela em cima, rodapé de 3 colunas embaixo)
   ========================================================================== */

.wc-block-components-sidebar-layout.wc-block-cart {
    display: block !important;
}

.wc-block-cart .wc-block-cart__main,
.wc-block-cart .wc-block-cart__sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

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

/* ==========================================================================
   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 ao lado da lista de produtos)
   ========================================================================== */

.wp-block-woocommerce-cart-items-block {
    position: relative;
}

@media (min-width: 992px) {
    /* o cartão do order bump é position:absolute (não empurra a altura do
       bloco de itens), então com poucos itens no carrinho ele pode ficar
       mais alto que a lista de produtos e encostar no Resumo logo abaixo -
       essa altura mínima garante espaço pra ele sempre caber */
    .wp-block-woocommerce-cart-items-block {
        min-height: 210px;
    }
}

.nx-order-bump {
    position: absolute;
    top: 0;
    right: 0;
    width: calc((100% - 88px) / 3);
}

.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 {
    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;
    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;
}

@media (max-width: 991.9px) {
    .nx-order-bump {
        position: static;
        width: 100%;
        margin-top: 16px;
    }
}

/* ==========================================================================
   Carrinho: rodapé em 3 colunas (Prazo de entrega | Cupom de desconto | Resumo)
   ========================================================================== */

.wp-block-woocommerce-cart-totals-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 44px;
    row-gap: 8px;
    align-items: start;
    border-top: 1px solid #eee;
    margin-top: 8px;
    padding-top: 28px;
}

.wp-block-woocommerce-cart-order-summary-block {
    display: contents;
}

/* título nativo "Total no carrinho": escondido, cada coluna ganha seu próprio rótulo abaixo */
.wp-block-woocommerce-cart-order-summary-heading-block {
    display: none !important;
}

/* título "Resumo" agora nasce dentro do proprio .nx-resumo-custom (JS), pra
   ficar sempre colado nas linhas dele, em vez de disputar a altura da row 1
   com a caixa de CEP/cupom (que e bem mais alta e empurrava tudo pra baixo) */

.woo-better-parent-container {
    grid-column: 1;
    grid-row: 1;
}

/* .coupon-form-block também carrega a classe genérica .wc-block-components-totals-wrapper,
   então precisa de mais especificidade que a regra genérica logo abaixo para não cair na coluna 3 */
.wp-block-woocommerce-cart-order-summary-block > .wp-block-woocommerce-cart-order-summary-coupon-form-block.wc-block-components-totals-wrapper {
    grid-column: 2;
    grid-row: 1;
}

/* linha nativa "Total de produtos": escondida, substituída pelo resumo
   detalhado (Valor dos produtos / Descontos / Desconto Pix / Frete / Total)
   montado via JS em nutrax_carrinho_resumo_customizado() */
.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-custom {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
}

.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;
}

.wc-block-cart__payment-options {
    grid-column: 3;
}

.wp-block-woocommerce-proceed-to-checkout-block {
    grid-column: 3;
    margin-top: 16px;
}

.wp-block-woocommerce-cart-accepted-payment-methods-block {
    grid-column: 3;
    margin-top: 12px;
}

.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 !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;
    }
}

@media (max-width: 991.9px) {
    .wp-block-woocommerce-cart-totals-block {
        grid-template-columns: 1fr 1fr;
    }

    .nx-resumo-custom,
    .wc-block-cart__payment-options,
    .wp-block-woocommerce-proceed-to-checkout-block,
    .wp-block-woocommerce-cart-accepted-payment-methods-block {
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: start;
    }

    .woo-better-parent-container {
        grid-column: 1;
        grid-row: 1;
    }

    .wp-block-woocommerce-cart-order-summary-block > .wp-block-woocommerce-cart-order-summary-coupon-form-block.wc-block-components-totals-wrapper {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 575.9px) {
    .wp-block-woocommerce-cart-totals-block {
        grid-template-columns: 1fr !important;
    }

    /* empilhado numa coluna só, nessa ordem: Prazo de entrega, Cupom de
       desconto, Resumo, Finalizar compra - !important porque essas mesmas
       classes já ganham grid-column/grid-row em @media (max-width:991.9px)
       (2 colunas), que por algum motivo o cascata não deixava essa regra,
       mesmo vindo depois no arquivo, sobrescrever de forma confiável */
    .woo-better-parent-container {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .wp-block-woocommerce-cart-order-summary-block > .wp-block-woocommerce-cart-order-summary-coupon-form-block.wc-block-components-totals-wrapper {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .nx-resumo-custom {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .wc-block-cart__payment-options,
    .wp-block-woocommerce-proceed-to-checkout-block,
    .wp-block-woocommerce-cart-accepted-payment-methods-block {
        grid-column: 1 !important;
        grid-row: 4 !important;
    }

    .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;
}

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

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

.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;
}

.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;
}