/* Ajustes que o Tailwind nao cobre. A cor da marca vem do painel via --marca. */

[x-cloak] { display: none !important; }

.btn-marca {
    background: var(--marca);
    color: #fff;
}
.btn-marca:hover { filter: brightness(0.92); }
.btn-marca:disabled { opacity: .5; cursor: not-allowed; filter: none; }

.texto-marca { color: var(--marca); }
.borda-marca { border-color: var(--marca); }

/* ---------------------------------------------------------------- topo ---
   Duas faixas: em cima logo, busca e as acoes (atendimento, conta, carrinho);
   embaixo as categorias, num tom mais escuro. As cores saem de --topo e
   --topo-baixo, que o layout calcula a partir da marca ou da cor cravada no
   painel. Os pares --topo-texto / --topo-baixo-texto acompanham para o menu
   nao sumir num fundo escuro. */

.barra-topo {
    background: var(--topo);
    box-shadow: 0 1px 3px rgb(15 23 42 / .12);
}

.faixa-categorias {
    background: var(--topo-baixo);
    color: var(--topo-baixo-texto);
}

.titulo-topo { color: var(--topo-texto); }

/* Loja com muitas categorias: a faixa rola e o ultimo item vai sumindo em vez
   de ser cortado no meio. A classe so entra quando ha transbordo de verdade --
   quem decide e o Alpine no header, senao o degrade apagaria a ultima
   categoria mesmo com espaco de sobra. */
.rolagem-topo {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
}

.acao-topo {
    color: var(--topo-texto);
    transition: background-color .15s, color .15s;
}
.acao-topo:hover { background: var(--topo-hover); }

/* Botao de categoria da faixa de baixo: icone a esquerda, texto a direita. */
.item-topo {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    white-space: nowrap;
    border-radius: .625rem;
    padding: .4375rem .5rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--topo-baixo-texto);
    transition: background-color .15s, color .15s;
}
.item-topo:hover { background: var(--topo-baixo-hover); }

@media (min-width: 1280px) {
    .item-topo { padding: .4375rem .6875rem; }
}
.item-topo-ativo {
    background: rgb(255 255 255 / .18);
    box-shadow: inset 0 -2px 0 currentColor;
}
.item-topo-ativo:hover { background: rgb(255 255 255 / .26); }

/* Acao do topo com icone em cima e rotulo embaixo (atendimento, conta, carrinho). */
.acao-empilhada {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .0625rem;
    border-radius: .625rem;
    padding: .25rem .5rem;
    line-height: 1.1;
    color: var(--topo-texto);
    transition: background-color .15s;
}
.acao-empilhada:hover { background: var(--topo-hover); }
.acao-empilhada span { font-size: .625rem; font-weight: 600; white-space: nowrap; }

/* Entrar / avatar: precisa da borda que o cliente pediu. */
.botao-conta {
    border-color: currentColor;
    color: var(--topo-texto);
}
.botao-conta:hover { background: var(--topo-hover); }

.item-conta {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    color: #334155;
    transition: background-color .15s;
}
.item-conta:hover { background: #f8fafc; }

/* ------------------------------------------------------ gaveta do celular */

.item-gaveta {
    display: flex;
    align-items: center;
    gap: .75rem;
    border-radius: .75rem;
    padding: .625rem .75rem;
    font-size: .875rem;
    font-weight: 600;
    color: #334155;
    transition: background-color .15s, color .15s;
}
.item-gaveta:hover { background: #f1f5f9; }
.item-gaveta-ativo {
    background: var(--marca-suave);
    color: var(--marca-escura);
}

/* ------------------------------------------------- area do cliente ------ */

.campo-conta {
    display: block;
    width: 100%;
    border-radius: .75rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: .625rem .875rem;
    font-size: .875rem;
    color: #0f172a;
    outline: none;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.campo-conta::placeholder { color: #94a3b8; }
.campo-conta:focus {
    background: #fff;
    border-color: var(--marca);
    box-shadow: 0 0 0 3px var(--marca-borda);
}
.campo-conta-erro { border-color: #fda4af; background: #fff1f2; }

.aba-conta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: .625rem .875rem;
    font-size: .875rem;
    font-weight: 600;
    color: #64748b;
    transition: color .15s, border-color .15s;
}
.aba-conta:hover { color: #0f172a; }
.aba-conta-ativa {
    border-bottom-color: var(--marca);
    color: var(--marca-escura);
}

/* --------------------------------------------------------- vitrine ------
   Duas colunas no celular e ate quatro no desktop. O numero de colunas vem do
   --colunas que a grade calcula: com tres produtos ficam tres colunas
   centralizadas, em vez de quatro com uma vaga sobrando na direita. */

.grade-produtos {
    display: grid;
    justify-content: center;
    gap: .75rem;
    grid-template-columns: repeat(min(2, var(--colunas, 2)), minmax(0, 1fr));
}

@media (min-width: 640px) {
    .grade-produtos { gap: 1rem; }
}

@media (min-width: 1024px) {
    .grade-produtos {
        grid-template-columns: repeat(var(--colunas, 4), minmax(0, 18.5rem));
    }
}

/* Borda, cantos e cor do preco vem do painel: sao os tres pontos que o lojista
   costuma querer mexer sem abrir codigo. */

.card-produto {
    border: var(--card-borda);
    border-radius: var(--card-raio);
}

.preco-produto { color: var(--preco); }

/* ------------------------------------------------------------ whatsapp --- */

.botao-whatsapp {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 30;
    display: grid;
    height: 3.25rem;
    width: 3.25rem;
    place-items: center;
    border-radius: 9999px;
    background: #25d366;
    color: #fff;
    box-shadow: 0 8px 20px rgb(37 211 102 / .35);
    transition: transform .15s, box-shadow .15s;
}
.botao-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgb(37 211 102 / .45);
}

@media (min-width: 640px) {
    .botao-whatsapp { right: 1.5rem; bottom: 1.5rem; height: 3.5rem; width: 3.5rem; }
}

/* Faixa horizontal de miniaturas / produtos, sem barra de rolagem visivel. */
.rolagem-limpa {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.rolagem-limpa::-webkit-scrollbar { display: none; }

/* Setas da galeria do produto. Ficam sobre a foto, entao precisam de contraste
   proprio: a imagem pode ser clara ou escura. */
.seta-galeria {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: grid;
    height: 2.5rem;
    width: 2.5rem;
    transform: translateY(-50%);
    place-items: center;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .85);
    color: #0f172a;
    box-shadow: 0 1px 6px rgba(15, 23, 42, .18);
    backdrop-filter: blur(4px);
    transition: background-color .15s, transform .15s;
}
.seta-galeria:hover { background: #fff; }
.seta-galeria:active { transform: translateY(-50%) scale(.94); }

/* Descricao do produto: o texto vem do painel, entao estilizamos aqui. */
.conteudo p { margin-bottom: 1rem; }
.conteudo ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }
.conteudo ol { list-style: decimal; padding-left: 1.25rem; margin-bottom: 1rem; }
.conteudo li { margin-bottom: .25rem; }
.conteudo strong { font-weight: 600; color: #0f172a; }
.conteudo a { color: var(--marca); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}