/*
 * Tema Vitrine — folha de estilo da plataforma.
 *
 * Carregada depois do CSS do Bagisto e antes do bloco de cores da loja. As tres
 * camadas na ordem: Bagisto, tema, loja. Por isso nada aqui precisa de
 * !important, e a escolha do lojista sempre vence a nossa.
 *
 * ---------------------------------------------------------------------------
 * Onde a cor entra, e onde nao entra
 *
 * O azul forte vai na faixa de servico, na barra de categorias, no banner e no
 * rodape — blocos que sao NOSSOS, e onde nao ha risco de deixar ilegivel um
 * texto do Bagisto.
 *
 * O cabecalho e AZUL, no formato da Madeira Madeira: faixa fina clara em cima,
 * cabecalho colorido com busca e icones, barra de departamentos branca embaixo.
 *
 * Isso so ficou seguro depois que o menu de categorias saiu do cabecalho: era
 * dele que vinham os menus suspensos que ficariam branco no branco. Os que
 * sobraram — carrinho e conta — sao paineis `absolute`/`fixed`, e recebem cor
 * escura de volta explicitamente logo abaixo.
 *
 * O vermelho e acento, nunca fundo de area grande: selo de desconto, marca do
 * titulo de secao, sublinhado da categoria ativa, linha do rodape. Vermelho em
 * area grande cansa a vista e briga com a foto do produto.
 */

:root {
    --tema-marca: #071673;
    --tema-marca-clara: #16257f;
    --tema-marca-escura: #040d4d;
    --tema-sobre-marca: #ffffff;
    --tema-destaque: #9a0808;
    --tema-destaque-clara: #c11414;

    --tema-tinta: #12141a;
    --tema-tinta-media: #444a58;
    --tema-suave: #6b7280;
    --tema-borda: #e4e7ef;
    --tema-borda-forte: #cfd4e2;
    --tema-superficie: #ffffff;
    --tema-neutro: #f5f6fa;

    --tema-raio: 14px;
    --tema-raio-pequeno: 10px;
    --tema-raio-pilula: 999px;

    --tema-sombra: 0 1px 2px rgba(16, 24, 40, .05);
    --tema-sombra-media: 0 4px 14px -6px rgba(16, 24, 40, .16);
    --tema-sombra-alta: 0 16px 34px -14px rgba(16, 24, 40, .3);

    --tema-largura: 1320px;
}

/* ===========================================================================
 * 1. Base
 * ======================================================================== */

body {
    background: var(--tema-superficie);
    color: var(--tema-tinta);
    -webkit-font-smoothing: antialiased;
}

/*
 * O tema padrao titula em serifa (font-dmserif), e e o que mais faz a loja
 * parecer um modelo de demonstracao. Titulo de secao de e-commerce brasileiro e
 * curto, pesado e apertado.
 */
.font-dmserif,
h1.font-dmserif,
h2.font-dmserif,
h3.font-dmserif {
    font-family: inherit;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--tema-tinta);
}

h2.font-dmserif { font-size: 1.375rem; line-height: 1.15; }

@media (min-width: 768px) { h2.font-dmserif { font-size: 1.625rem; } }
@media (min-width: 1180px) { h2.font-dmserif { font-size: 1.75rem; } }

/* O rodape do Bagisto titula a newsletter em italico serifado. Nao combina. */
footer .italic { font-style: normal; font-family: inherit; letter-spacing: -0.02em; }

/* ===========================================================================
 * 2. Faixa de servico
 * ======================================================================== */

.tema-topo {
    background: var(--tema-superficie);
    color: var(--tema-tinta-media);
    border-bottom: 1px solid var(--tema-borda);
}

.tema-topo__interno {
    max-width: var(--tema-largura);
    margin: 0 auto;
    padding: .5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
    flex-wrap: wrap;
    font-size: .78125rem;
    font-weight: 500;
}

.tema-topo__aviso {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.tema-topo__aviso svg { flex: none; color: var(--tema-destaque); }

/*
 * Some no celular: naquela largura a faixa rouba a primeira dobra da busca e do
 * produto. As mesmas informacoes voltam na faixa de vantagens.
 */
@media (max-width: 1023px) { .tema-topo { display: none; } }

/* ===========================================================================
 * 3. Cabecalho e busca
 * ======================================================================== */

/*
 * A faixa do logotipo tem cor propria.
 *
 * Por padrao ela e a cor da marca. A loja que tem logotipo de letra escura
 * troca para branco em Aparencia, porque sobre a marca aquele logotipo some — e
 * repintar logotipo de cliente nao e opcao. Ver CoresDaLoja::fundoDoCabecalho.
 *
 * Texto e icone acompanham por `--tema-sobre-cabecalho`, calculado pelo
 * contraste no servidor: escolher a faixa branca nao pode obrigar o lojista a
 * escolher tambem a cor da letra.
 */
header.sticky {
    background: var(--tema-cabecalho, var(--tema-marca));
    color: var(--tema-sobre-cabecalho, var(--tema-sobre-marca));
    box-shadow: var(--tema-sombra-media);
    border-bottom: 0;
}

/*
 * Tudo que e texto direto do cabecalho acompanha a faixa...
 */
header.sticky a,
header.sticky p,
header.sticky span,
header.sticky button { color: var(--tema-sobre-cabecalho, var(--tema-sobre-marca)); }

/*
 * ...MENOS o que estiver dentro de um painel suspenso.
 *
 * O carrinho e a conta abrem paineis `absolute` / `fixed` com fundo branco. Sem
 * esta excecao eles ficariam brancos no branco — o cliente clicaria no carrinho
 * e veria uma caixa vazia. E o mesmo motivo pelo qual o cabecalho so pode ser
 * colorido depois que o menu de categorias saiu dele.
 */
header.sticky .absolute,
header.sticky .fixed,
header.sticky .absolute a,
header.sticky .absolute p,
header.sticky .absolute span,
header.sticky .absolute button,
header.sticky .fixed a,
header.sticky .fixed p,
header.sticky .fixed span,
header.sticky .fixed button { color: var(--tema-tinta); }

header.sticky input { color: var(--tema-tinta); }

/*
 * Rotulo sob cada icone, no formato das lojas grandes: icone sozinho obriga o
 * visitante a adivinhar, e "Entrar" e "Carrinho" sao justamente os dois cliques
 * que a loja mais precisa que aconteca.
 *
 * O texto vem de variavel CSS gerada por `trans()` no servidor — assim a regra
 * do projeto continua valendo (toda string visivel passa por traducao) sem
 * precisar copiar o cabecalho do Bagisto para dentro do tema.
 *
 * O glifo do icone e desenhado no `::before` da propria classe; empilhar em
 * coluna poe o rotulo embaixo dele sem tocar no HTML.
 */
header.sticky .icon-compare,
header.sticky .icon-cart,
header.sticky .icon-users {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    line-height: 1;
}

header.sticky .icon-compare::after { content: var(--rotulo-comparar, "Comparar"); }
header.sticky .icon-cart::after { content: var(--rotulo-carrinho, "Carrinho"); }
header.sticky .icon-users::after { content: var(--rotulo-entrar, "Entrar"); }

header.sticky .icon-compare::after,
header.sticky .icon-cart::after,
header.sticky .icon-users::after {
    font-family: inherit;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tema-sobre-cabecalho, var(--tema-sobre-marca));
}

/* Dentro dos paineis o icone volta a ser so icone. */
header.sticky .absolute .icon-cart::after,
header.sticky .fixed .icon-cart::after,
header.sticky .absolute .icon-users::after,
header.sticky .fixed .icon-users::after { content: none; }

header.sticky .min-h-\[78px\] { border-bottom: 0; }

/*
 * Alinha o cabecalho com a barra de categorias e com o resto da pagina.
 *
 * A linha do cabecalho usa `px-[60px]` na largura inteira da tela, enquanto a
 * barra de categorias e o conteudo sao centralizados em 1320px. Em monitor
 * largo o logotipo fica colado na borda e a primeira categoria comeca bem mais
 * para dentro — os dois deveriam nascer na mesma vertical.
 */
header.sticky .max-lg\:hidden > div {
    max-width: var(--tema-largura);
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/*
 * O logotipo tem espaco fixo de 131px no tema padrao — largura de um logotipo
 * pequeno. Nome de loja escrito por extenso nao cabe ali e sai minusculo.
 */
header.sticky img[alt] {
    height: 46px;
    width: auto;
    max-width: 300px;
}

@media (max-width: 1023px) {
    /*
     * `header.sticky` e nao `header`: a regra acima tem especificidade maior
     * (elemento + classe), e uma versao so com `header` aqui nunca venceria —
     * ficaria no arquivo parecendo que faz algo.
     */
    header.sticky img[alt] { height: 40px; max-width: 200px; }
}

/*
 * ATENCAO ao seletor destas tres regras.
 *
 * O cabecalho do Bagisto tem DOIS blocos: um de desktop (`max-lg:hidden`) e um
 * de celular (`lg:hidden`), e os dois usam `.flex.w-full.justify-between` na
 * linha principal. Um seletor sem o prefixo do bloco de desktop alcanca tambem
 * o do celular — e o `div:first-child > div` de la e o botao de menu.
 *
 * Escondi o menu do celular por alguns minutos hoje sem perceber, porque a
 * janela de teste estava larga demais para a regra valer.
 */

/*
 * O menu de categorias do cabecalho sai.
 *
 * Ele repete exatamente a barra de categorias que o tema poe logo abaixo — as
 * mesmas categorias, duas vezes, uma em cima da outra. Fica o de baixo, que e
 * mais largo, rola no celular e destaca a categoria aberta.
 *
 * O espaco liberado vai todo para a busca.
 */
header .max-lg\:hidden .flex.w-full.justify-between > div:first-child > div { display: none; }

/*
 * A busca vai para o meio e cresce.
 *
 * No tema padrao ela e uma caixinha de 240px encostada na direita, do mesmo
 * tamanho de um botao secundario — e e a ferramenta mais usada da loja inteira.
 * Aqui o grupo da direita passa a ocupar o espaco livre e a busca cresce dentro
 * dele, deixando os icones na ponta.
 */
header .max-lg\:hidden .flex.w-full.justify-between > div:last-child {
    flex: 1;
    justify-content: flex-end;
    gap: 2.5rem;
}

header .max-lg\:hidden .flex.w-full.justify-between > div:last-child > .relative.w-full {
    flex: 1;
    max-width: 780px;
    margin: 0 auto;
}

/*
 * A busca precisa de contorno quando a faixa e branca.
 *
 * Sobre a cor da marca o campo claro se destaca sozinho e a borda atrapalha.
 * Sobre branco ele desaparece: fica um campo branco num fundo branco, e o
 * visitante nao acha onde pesquisar. O servidor decide qual dos dois casos e.
 */
header input[type="text"],
header input[type="search"] {
    border: 2px solid var(--tema-borda-busca, transparent);
    border-radius: var(--tema-raio-pilula);
    background: var(--tema-superficie);
    padding-top: .8rem;
    padding-bottom: .8rem;
    font-size: .875rem;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

header input[type="text"]:focus,
header input[type="search"]:focus {
    background: var(--tema-superficie);
    border-color: var(--tema-destaque);
    box-shadow: 0 0 0 4px var(--tema-brilho-busca, rgba(255, 255, 255, .28));
    outline: none;
}

/* ===========================================================================
 * 4. Barra de categorias
 *
 * Branca, como a barra de departamentos da Madeira Madeira: o bloco de cor
 * forte ja e o cabecalho logo acima, e duas faixas coloridas seguidas pesam a
 * primeira dobra e roubam atencao do produto. A categoria aberta se marca com um
 * sublinhado vermelho.
 * ======================================================================== */

.tema-categorias {
    background: var(--tema-superficie);
    /* A mesma linha vermelha que fecha o rodape, para as duas pontas rimarem. */
    border-bottom: 3px solid var(--tema-destaque);
    position: relative;
    z-index: 9;
}

.tema-categorias__trilho {
    max-width: var(--tema-largura);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: stretch;
    gap: .15rem;

    /*
     * Sem rolagem no desktop, de proposito.
     *
     * `overflow-x: auto` tambem recorta na VERTICAL — e o painel "Todas as
     * categorias" abre justamente para baixo. Com a rolagem ligada aqui, o
     * painel existia, ficava visivel para o navegador e mesmo assim nao aparecia
     * na tela: estava sendo cortado pela propria barra.
     *
     * A rolagem horizontal so faz falta no celular, e la o painel nao abre.
     */
    overflow: visible;
}

.tema-categorias__item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    padding: .8rem 1rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--tema-tinta-media);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}

.tema-categorias__item:hover {
    color: var(--tema-marca);
    border-bottom-color: var(--tema-destaque);
}

.tema-categorias__item--inicio { color: var(--tema-marca); }

/* ---------------------------------------------------------------------------
 * Subcategorias ao passar o mouse
 *
 * Quem esta no computador ve as filhas sem precisar clicar, que e o que as
 * lojas grandes fazem. Hover E foco pelo teclado, sem JavaScript.
 * ------------------------------------------------------------------------ */

.tema-categorias__ramo { position: relative; display: flex; }

.tema-categorias__ramo .tema-categorias__item { gap: .3rem; }

.tema-categorias__seta { opacity: .55; transition: transform .15s ease; }

.tema-categorias__ramo:hover .tema-categorias__seta,
.tema-categorias__ramo:focus-within .tema-categorias__seta { transform: rotate(180deg); opacity: 1; }

.tema-categorias__filhas {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    padding: .5rem 0;
    background: var(--tema-superficie);
    border: 1px solid var(--tema-borda);
    border-top: 3px solid var(--tema-destaque);
    border-radius: 0 0 var(--tema-raio-pequeno) var(--tema-raio-pequeno);
    box-shadow: var(--tema-sombra-alta);

    /* Escondido por visibility para o conteudo seguir existindo no leitor de tela. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.tema-categorias__ramo:hover .tema-categorias__filhas,
.tema-categorias__ramo:focus-within .tema-categorias__filhas {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.tema-categorias__filhas a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: .5rem 1rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--tema-tinta-media);
    white-space: nowrap;
}

.tema-categorias__filhas a:hover { background: var(--tema-neutro); color: var(--tema-marca); }

.tema-categorias__filhas a svg { flex: none; opacity: .4; }

/* ---------------------------------------------------------------------------
 * Terceiro nivel: abre para o LADO
 *
 * A arvore desta loja tem QUARTO > Guarda Roupa > Casal. Parar no segundo nivel
 * obriga quem quer um guarda-roupa de casal a abrir a pagina de Guarda Roupa e
 * filtrar de novo — dois cliques para o que cabia em um.
 * ------------------------------------------------------------------------ */

.tema-categorias__galho { position: relative; }

.tema-categorias__galho:hover > a { background: var(--tema-neutro); color: var(--tema-marca); }

.tema-categorias__galho:hover > a svg { opacity: 1; }

.tema-categorias__netas {
    position: absolute;
    top: -.5rem;
    left: 100%;
    z-index: 31;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    padding: .5rem 0;
    background: var(--tema-superficie);
    border: 1px solid var(--tema-borda);
    border-top: 3px solid var(--tema-destaque);
    border-radius: 0 var(--tema-raio-pequeno) var(--tema-raio-pequeno) var(--tema-raio-pequeno);
    box-shadow: var(--tema-sombra-alta);

    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.tema-categorias__galho:hover > .tema-categorias__netas,
.tema-categorias__galho:focus-within > .tema-categorias__netas {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/*
 * Perto da borda direita o terceiro nivel abriria para fora da tela. Nas duas
 * ultimas categorias da barra ele passa a abrir para a esquerda.
 */
.tema-categorias__ramo:nth-last-child(-n+2) .tema-categorias__netas {
    left: auto;
    right: 100%;
    border-radius: var(--tema-raio-pequeno) 0 var(--tema-raio-pequeno) var(--tema-raio-pequeno);
}

@media (max-width: 767px) {
    /* No celular nao ha hover, e o botao de todas as categorias ja cobre. */
    .tema-categorias__filhas { display: none; }
    .tema-categorias__seta { display: none; }
}

/* ---------------------------------------------------------------------------
 * Quatro produtos por linha
 *
 * O Bagisto usa tres. Numa tela de notebook sobra respiro nas laterais e cabe
 * mais um sem apertar — e um produto a mais por linha e uma linha a menos de
 * rolagem em cada tela.
 * ------------------------------------------------------------------------ */

@media (min-width: 1180px) {
    .grid.grid-cols-3.gap-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}

/* ---------------------------------------------------------------------------
 * Subcategorias na coluna de filtros
 * ------------------------------------------------------------------------ */

.tema-filtro-cat {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--tema-borda);
}

.tema-filtro-cat__voltar {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--tema-marca);
    margin-bottom: .75rem;
}

.tema-filtro-cat__voltar:hover { text-decoration: underline; }

.tema-filtro-cat__titulo {
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--tema-suave);
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--tema-borda);
    margin-bottom: .55rem;
}

.tema-filtro-cat__lista { display: grid; gap: .1rem; }

.tema-filtro-cat__lista a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem;
    border-radius: var(--tema-raio-pequeno);
    font-size: .875rem;
    color: var(--tema-tinta-media);
}

.tema-filtro-cat__lista a:hover { background: var(--tema-neutro); color: var(--tema-marca); }

.tema-filtro-cat__lista span {
    font-size: .75rem;
    color: var(--tema-suave);
    background: var(--tema-neutro);
    border-radius: 999px;
    padding: .05rem .45rem;
}

/* ---------------------------------------------------------------------------
 * "Todas as categorias" — o menu que abre a arvore inteira
 *
 * Abre no hover e no foco pelo teclado, sem JavaScript. Menu que depende de JS
 * aparece depois do resto da pagina e some se o script falhar — e este e o
 * caminho principal de quem chega sabendo o que quer.
 * ------------------------------------------------------------------------ */

.tema-categorias__todas { position: relative; display: flex; }

.tema-categorias__item--todas {
    background: var(--tema-marca);
    color: var(--tema-sobre-marca);
    border-bottom-color: transparent;
    font: inherit;
    cursor: pointer;
    border-radius: 0;
    padding: .8rem 1.05rem;
    margin-bottom: -3px;
}

.tema-categorias__item--todas:hover {
    background: var(--tema-marca-clara);
    color: var(--tema-sobre-marca);
    border-bottom-color: transparent;
}

.tema-categorias__painel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 300px;
    max-width: min(920px, 92vw);
    background: var(--tema-superficie);
    border: 1px solid var(--tema-borda);
    border-top: 3px solid var(--tema-destaque);
    border-radius: 0 0 var(--tema-raio) var(--tema-raio);
    box-shadow: var(--tema-sombra-alta);
    padding: 1.25rem 1.5rem;

    /*
     * Escondido por `visibility`, e nao por `display: none`: assim o conteudo
     * continua no fluxo para leitores de tela e a transicao funciona.
     */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.tema-categorias__todas:hover .tema-categorias__painel,
.tema-categorias__todas:focus-within .tema-categorias__painel,
[data-menu-categorias] .tema-categorias__painel {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.tema-categorias__painel-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.25rem 2rem;
}

.tema-categorias__grupo-titulo {
    display: block;
    font-size: .875rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--tema-tinta);
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--tema-borda);
    margin-bottom: .5rem;
}

.tema-categorias__grupo-titulo:hover { color: var(--tema-marca); }

.tema-categorias__grupo-lista { display: grid; gap: .35rem; }

.tema-categorias__grupo-lista a {
    font-size: .8125rem;
    color: var(--tema-tinta-media);
}

.tema-categorias__grupo-lista a:hover { color: var(--tema-marca); }

@media (max-width: 767px) {
    .tema-categorias__trilho {
        padding: 0 .5rem;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .tema-categorias__trilho::-webkit-scrollbar { display: none; }

    .tema-categorias__item { padding: .7rem .7rem; font-size: .75rem; scroll-snap-align: start; }

    /*
     * No celular o painel abre no toque, e nao no hover.
     *
     * Antes ele nao abria de jeito nenhum e o Bagisto punha um segundo
     * hamburguer ao lado do logotipo — dois botoes identicos na mesma tela,
     * sendo que o unico que funcionava era o do cabecalho. Agora sobra um so, o
     * daqui, que abre a arvore inteira de categorias.
     */
    .tema-categorias__item--todas { padding: .7rem .8rem; }

    .tema-categorias__painel {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        max-width: none;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        padding: 1rem 1.25rem 1.5rem;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * O hamburguer do Bagisto sai. Conta e carrinho continuam nos icones a
     * direita, entao nada fica inalcancavel — some so a duplicata.
     */
    header.sticky .icon-hamburger { display: none; }
}

/* ===========================================================================
 * 5. Faixa de destaque da home
 * ======================================================================== */

.tema-destaque {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(154, 8, 8, .55) 0%, rgba(154, 8, 8, 0) 55%),
        linear-gradient(120deg, var(--tema-marca-escura) 0%, var(--tema-marca) 55%, var(--tema-marca-clara) 100%);
    color: #fff;
}

.tema-destaque__interno {
    max-width: var(--tema-largura);
    margin: 0 auto;
    padding: 3rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.tema-destaque__texto { max-width: 640px; }

.tema-destaque__selo {
    display: inline-block;
    background: var(--tema-destaque);
    color: #fff;
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .08em;
    padding: .35rem .8rem;
    border-radius: var(--tema-raio-pilula);
    box-shadow: var(--tema-sombra-media);
}

.tema-destaque__titulo {
    margin: .9rem 0 .45rem;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.tema-destaque__linha {
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, .82);
    max-width: 46ch;
}

.tema-destaque__botao {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    background: #fff;
    color: var(--tema-marca);
    font-weight: 800;
    font-size: .9375rem;
    letter-spacing: -0.01em;
    padding: .85rem 1.6rem;
    border-radius: var(--tema-raio-pilula);
    box-shadow: var(--tema-sombra-alta);
    transition: transform .15s ease, background .15s ease;
}

.tema-destaque__botao:hover { transform: translateY(-2px); background: #f2f4ff; }

.tema-destaque__marca { color: rgba(255, 255, 255, .16); flex: none; }

@media (max-width: 1023px) {
    .tema-destaque__interno { padding: 2rem 1.25rem; }
    .tema-destaque__titulo { font-size: 1.75rem; }
    .tema-destaque__linha { font-size: .9375rem; }
    .tema-destaque__marca { display: none; }
}

/* ===========================================================================
 * 5b. Banner do lojista
 *
 * Colado na barra de categorias, sem respiro: banner de loja grande comeca onde
 * o menu termina. Qualquer folga ali empurra o banner para baixo da dobra em
 * notebook, que e a tela mais comum.
 * ======================================================================== */

main > div:first-child > .overflow-hidden,
main v-carousel,
main [class*="carousel"]:first-child { margin-top: 0; }

main > div:first-child { margin-top: 0; padding-top: 0; }

/* ===========================================================================
 * 5c. Trilha da pagina do produto
 * ======================================================================== */

.tema-trilha {
    max-width: var(--tema-largura);
    margin: 1.25rem auto 0;
    padding: 0 1.5rem;
}

.tema-trilha__lista {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    font-size: .8125rem;
    color: var(--tema-suave);
}

.tema-trilha__lista a { color: var(--tema-tinta-media); font-weight: 500; }

.tema-trilha__lista a:hover { color: var(--tema-marca); text-decoration: underline; }

.tema-trilha__seta { display: inline-flex; color: var(--tema-borda-forte); }

.tema-trilha__atual {
    color: var(--tema-suave);
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * A trilha do Bagisto sai: ela mostra apenas "Pagina Inicial > produto", e as
 * duas juntas seriam a mesma informacao duas vezes, uma delas pela metade.
 *
 * O seletor mira o container exato dela — `div.mt-[34px]` dentro do
 * `div.flex.justify-center.px-7`, que so existe na pagina do produto. A versao
 * anterior usava irmao adjacente e `:has()`, e nao pegava: a nossa trilha e o
 * bloco dele nao sao irmaos, sao ramos diferentes da pagina.
 */
.flex.justify-center.px-7 > .mt-\[34px\] { display: none; }

@media (max-width: 767px) {
    .tema-trilha { padding: 0 1rem; margin-top: .9rem; }
    .tema-trilha__lista { font-size: .75rem; }
}

/* ===========================================================================
 * 5d. Consulta de frete na pagina do produto
 * ======================================================================== */

.tema-frete {
    margin: 1.1rem 0 0;
    padding: .9rem 1rem 1rem;
    border: 1px solid var(--tema-borda);
    border-radius: var(--tema-raio-pequeno);
    background: var(--tema-neutro);
    max-width: 470px;
}

.tema-frete__topo {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--tema-tinta);
    font-size: .875rem;
    margin-bottom: .6rem;
}

.tema-frete__topo svg { color: var(--tema-marca); flex: none; }

.tema-frete__forma { display: flex; gap: .5rem; }

.tema-frete__forma input {
    flex: 1;
    min-width: 0;
    padding: .65rem .85rem;
    border: 1px solid var(--tema-borda-forte);
    border-radius: var(--tema-raio-pequeno);
    background: var(--tema-superficie);
    font: inherit;
    font-size: .9375rem;
    color: var(--tema-tinta);
}

.tema-frete__forma input:focus {
    outline: none;
    border-color: var(--tema-marca);
    box-shadow: 0 0 0 3px rgba(7, 22, 115, .1);
}

.tema-frete__forma button {
    flex: none;
    padding: .65rem 1.15rem;
    border-radius: var(--tema-raio-pequeno);
    background: var(--tema-marca);
    color: var(--tema-sobre-marca);
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    border: 0;
}

.tema-frete__forma button:hover { background: var(--tema-marca-clara); }

.tema-frete__saida {
    margin-top: .7rem;
    font-size: .875rem;
    color: var(--tema-suave);
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.tema-frete__saida--erro { color: var(--tema-destaque); }

.tema-frete__valor {
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--tema-tinta);
}

/* Frete gratis usa o mesmo verde do Pix: e a convencao de "voce economiza". */
.tema-frete__valor--gratis { color: var(--loja-cor-pix, #0f7a3d); text-transform: uppercase; }

.tema-frete__detalhe { font-size: .8125rem; color: var(--tema-suave); }

.tema-frete__ajuda {
    display: inline-block;
    margin-top: .55rem;
    font-size: .75rem;
    color: var(--tema-marca);
    text-decoration: underline;
}

@media (max-width: 767px) {
    .tema-frete { max-width: none; }
}

/* ===========================================================================
 * 6. Titulo de secao
 * ======================================================================== */

.container.mt-20 { margin-top: 3rem; }

@media (max-width: 768px) { .container.mt-20 { margin-top: 1.75rem; } }

/*
 * Uma marca curta em vermelho antes do titulo. Custa tres linhas de CSS e
 * transforma "mais um texto na pagina" em "inicio de uma secao".
 */
.container.mt-20 > .flex.justify-between h2.font-dmserif {
    position: relative;
    padding-left: .8rem;
}

.container.mt-20 > .flex.justify-between h2.font-dmserif::before {
    content: "";
    position: absolute;
    left: 0;
    top: .08em;
    bottom: .08em;
    width: 5px;
    border-radius: 999px;
    background: var(--tema-destaque);
}

/* ===========================================================================
 * 7. Cartao de produto
 *
 * Tudo por CSS: nenhuma view do Bagisto e copiada, entao o upgrade dele
 * continua chegando aqui inteiro.
 * ======================================================================== */

.group.w-full.rounded-md {
    background: var(--tema-superficie);
    border: 1px solid var(--tema-borda);
    border-radius: var(--tema-raio);
    overflow: hidden;
    box-shadow: var(--tema-sombra);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
    display: flex;
    flex-direction: column;
}

.group.w-full.rounded-md:hover {
    box-shadow: var(--tema-sombra-alta);
    border-color: var(--tema-borda-forte);
    transform: translateY(-3px);
}

.group.w-full.rounded-md .bg-zinc-100 { background: var(--tema-neutro); }

.group.w-full.rounded-md .relative.max-h-\[300px\] {
    padding: .5rem;
    background: var(--tema-superficie);
}

/*
 * O preco e o botao param de se esconder.
 *
 * O tema padrao empurra o bloco de informacao para baixo (-mt-9 + translate-y-9)
 * e so o traz no hover, com o botao em opacity:0. Quem entra pelo celular — que
 * e a maioria — nunca passa o mouse: ve a foto, ve o nome, e o botao de comprar
 * nunca aparece.
 */
.group.w-full.rounded-md > .grid.content-start {
    margin-top: 0;
    transform: none;
    padding: .25rem 1rem 1.1rem;
    gap: .5rem;
    max-width: 100%;
    flex: 1;
}

.group.w-full.rounded-md .action-items.flex.items-center { opacity: 1; }

.group.w-full.rounded-md .action-items.flex.items-center .secondary-button {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    background: var(--tema-marca);
    border-color: var(--tema-marca);
    color: var(--tema-sobre-marca);
    border-radius: var(--tema-raio-pequeno);
    padding: .7rem .5rem;
    /* Menor e mais apertado para "ADICIONAR AO CARRINHO" caber numa linha so. */
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

.group.w-full.rounded-md .action-items.flex.items-center .secondary-button:hover {
    background: var(--tema-marca-clara);
    border-color: var(--tema-marca-clara);
    color: var(--tema-sobre-marca);
}

/*
 * O selo "Venda" sai: diz o que o "-42% OFF" ja diz dois centimetros ao lado, e
 * com menos informacao. O "Novo" fica — aquele o preco nao conta.
 */
.action-items > p.bg-red-600 { display: none; }

.action-items > p.bg-navyBlue {
    background: var(--tema-marca);
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .25rem .6rem;
    box-shadow: var(--tema-sombra-media);
}

.group.w-full.rounded-md > .grid.content-start > p.break-words {
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--tema-tinta-media);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
    margin: 0;
}

/* ===========================================================================
 * 8. Preco
 * ======================================================================== */

.preco-br { gap: .1rem; }

.preco-br__de { font-size: .75rem; }

.preco-br__selo {
    background: var(--loja-cor-selo, var(--tema-destaque));
    font-size: .6875rem;
    font-weight: 800;
    padding: .1rem .45rem;
}

.preco-br__por {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--tema-tinta);
}

.preco-br__pix { font-size: .8125rem; font-weight: 700; }

.preco-br__parcelas { font-size: .78125rem; color: var(--tema-suave); }

/* ===========================================================================
 * 9. Faixa de vantagens
 * ======================================================================== */

.tema-vantagens {
    background: var(--tema-neutro);
    border-top: 1px solid var(--tema-borda);
    margin-top: 3.5rem;
    padding: 2rem 1.5rem;
}

.tema-vantagens__grade {
    max-width: var(--tema-largura);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
}

.tema-vantagens__item { display: flex; align-items: center; gap: .85rem; }

.tema-vantagens__icone {
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--tema-raio-pequeno);
    background: var(--tema-marca);
    color: #fff;
    box-shadow: var(--tema-sombra-media);
}

.tema-vantagens__texto { display: flex; flex-direction: column; line-height: 1.3; }

.tema-vantagens__texto strong {
    font-size: .875rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--tema-tinta);
}

.tema-vantagens__texto span { font-size: .8125rem; color: var(--tema-suave); }

@media (max-width: 767px) {
    .tema-vantagens { padding: 1.5rem 1rem; margin-top: 2.5rem; }
    .tema-vantagens__grade { grid-template-columns: 1fr 1fr; gap: 1rem .75rem; }
    .tema-vantagens__icone { width: 38px; height: 38px; }
    .tema-vantagens__texto strong { font-size: .8125rem; }
    .tema-vantagens__texto span { display: none; }
}

/* ===========================================================================
 * 10. Rodape
 *
 * O padrao do Bagisto e bege (`bg-lightOrange`), que nao pertence a paleta de
 * loja nenhuma e faz a pagina terminar num tom de rascunho. Escuro fecha a
 * pagina e devolve o azul da marca.
 * ======================================================================== */

footer.bg-lightOrange {
    background: var(--tema-marca-escura);
    color: rgba(255, 255, 255, .78);
    border-top: 4px solid var(--tema-destaque);
    margin-top: 0;
}

footer.bg-lightOrange a { color: rgba(255, 255, 255, .78); transition: color .15s ease; }
footer.bg-lightOrange a:hover { color: #fff; }

footer.bg-lightOrange p,
footer.bg-lightOrange span,
footer.bg-lightOrange li { color: rgba(255, 255, 255, .78); }

footer.bg-lightOrange .text-navyBlue,
footer.bg-lightOrange h1,
footer.bg-lightOrange h2,
footer.bg-lightOrange h3 { color: #fff; }

/*
 * O rodape do Bagisto poe os links a esquerda e a newsletter a direita, com um
 * vao enorme no meio numa tela larga. Limitar a largura junta os dois blocos.
 */
footer.bg-lightOrange > div:first-child {
    max-width: var(--tema-largura);
    margin: 0 auto;
    width: 100%;
}

footer.bg-lightOrange ul { gap: .9rem; }

/* O bloco do copyright ganha uma divisoria em vez de encostar nos links. */
footer.bg-lightOrange > div:last-child {
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .8125rem;
    max-width: none;
    background: rgba(0, 0, 0, .18);
}

footer.bg-lightOrange > div:last-child p { color: rgba(255, 255, 255, .6); }

/* A caixa de e-mail precisa de fundo claro para o texto digitado aparecer. */
footer.bg-lightOrange input {
    background: rgba(255, 255, 255, .95);
    border-color: transparent;
    color: var(--tema-tinta);
    border-radius: var(--tema-raio-pequeno);
}

footer.bg-lightOrange button {
    background: var(--tema-destaque);
    color: #fff;
    font-weight: 700;
    border-color: var(--tema-destaque);
    border-radius: var(--tema-raio-pequeno);
}

footer.bg-lightOrange button:hover { background: var(--tema-destaque-clara); border-color: var(--tema-destaque-clara); }

/* O acordeao do rodape no celular tambem e bege por padrao. */
footer.bg-lightOrange .bg-\[\#F1EADF\] { background: rgba(255, 255, 255, .07); color: #fff; }
footer.bg-lightOrange .\!border-\[\#e9decc\] { border-color: rgba(255, 255, 255, .16); }

/* ===========================================================================
 * 11. Botoes gerais
 * ======================================================================== */

.primary-button {
    background-color: var(--tema-marca);
    border-color: var(--tema-marca);
    color: var(--tema-sobre-marca);
    border-radius: var(--tema-raio-pequeno);
    padding: .85rem 1.75rem;
    font-weight: 700;
}

.primary-button:hover {
    background-color: var(--tema-marca-clara);
    border-color: var(--tema-marca-clara);
    opacity: 1;
}

.secondary-button {
    border-color: var(--tema-borda-forte);
    color: var(--tema-tinta);
    border-radius: var(--tema-raio-pequeno);
    padding: .7rem 1.25rem;
    font-weight: 600;
}

.secondary-button:hover {
    background-color: var(--tema-neutro);
    border-color: var(--tema-marca);
    color: var(--tema-marca);
}

/*
 * O Bagisto usa `.secondary-button` — o de CONTORNO — no botao mais importante
 * da loja, o de comprar da pagina de produto. O visitante chega decidido e
 * encontra um botao branco, com menos peso que o menu ao lado.
 */
button.secondary-button.w-full.max-w-full {
    background: var(--tema-marca);
    border-color: var(--tema-marca);
    color: var(--tema-sobre-marca);
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
}

button.secondary-button.w-full.max-w-full:hover {
    background: var(--tema-marca-clara);
    border-color: var(--tema-marca-clara);
    color: var(--tema-sobre-marca);
}

@media (max-width: 639px) {
    /*
     * O Bagisto encolhe esse botao no celular com `!important`
     * (`max-sm:!w-auto`), e so outro `!important` vence. E dos poucos lugares
     * onde ele se justifica: o botao de comprar precisa da largura da tela
     * justamente onde a maior parte das vendas acontece.
     */
    .mt-8.flex button.secondary-button {
        width: 100% !important;
        max-width: none !important;
        padding: .9rem 1rem !important;
    }
}

/* ===========================================================================
 * 12. Celular
 *
 * A maior parte do trafego de e-commerce popular no Brasil entra por aqui, entao
 * estas regras nao sao um ajuste de fim de arquivo — sao metade do tema.
 * ======================================================================== */

@media (max-width: 767px) {
    .group.w-full.rounded-md { border-radius: var(--tema-raio-pequeno); }

    .group.w-full.rounded-md > .grid.content-start { padding: .25rem .65rem .8rem; gap: .35rem; }

    .group.w-full.rounded-md > .grid.content-start > p.break-words {
        font-size: .8125rem;
        min-height: 2.4em;
    }

    .preco-br__por { font-size: 1.125rem; }
    .preco-br__pix { font-size: .75rem; }
    .preco-br__parcelas { font-size: .6875rem; }

    /*
     * No celular o botao de comprar sai do cartao da grade: com a largura de
     * meia tela ele empurra preco e nome para fora, e o dedo abre o produto
     * batendo no cartao inteiro. Na pagina do produto o botao continua la.
     */
    .group.w-full.rounded-md .action-items.flex.items-center { display: none; }
}