/*
 * Cores da marca aplicadas à loja — tema bwebstore.
 *
 * O Bagisto compila a paleta direto no CSS (o `navyBlue` #060C3B aparece em
 * títulos, botões, badges e bordas), sem variáveis. Recompilar o Tailwind
 * exigiria editar o tailwind.config.js dentro de packages/Webkul, que se perde
 * a cada composer update, e rodar o build do pacote a cada troca de cor.
 *
 * Em vez disso, redefinimos aqui apenas as classes que produzem aquela cor,
 * apontando para as custom properties da marca. Carregado depois do bundle do
 * Bagisto, então vence por ordem, sem precisar de !important.
 *
 * Levantamento que originou esta lista: as cinco classes abaixo respondem por
 * toda a presença da cor do fornecedor na home, na listagem de categoria, na
 * página de produto e no carrinho.
 */

/*
 * Cor de texto padrão.
 *
 * O tema não define cor no body, então o texto herda o preto puro do navegador
 * enquanto cabeçalho e rodapé usam o tom da marca. Dois pretos diferentes na
 * mesma tela dão a impressão de que as fontes mudam de peso entre as áreas.
 */
body {
    color: var(--brand-text);
}

/* textos e títulos — tom escuro da marca, não o azul de ação */
.text-navyBlue,
.peer:checked ~ .peer-checked\:text-navyBlue,
.text-zinc-900,
.hover\:text-zinc-900:hover {
    color: var(--brand-text);
}

/*
 * Neutros de apoio. O tema usa dois cinzas do Tailwind (zinc-500 e zinc-600)
 * que não conversam com o cinza da marca já aplicado no cabeçalho e no rodapé.
 */
.text-zinc-500,
.text-zinc-600,
.max-md\:text-zinc-500,
.max-sm\:text-zinc-500 {
    color: var(--brand-text-muted);
}

/*
 * A aba ativa da página de produto força preto puro com !important — o único
 * ponto da loja que ainda escapava do tom da marca. Precisa do mesmo peso para
 * ser sobrescrito.
 */
.\!text-black {
    color: var(--brand-text) !important;
}

/* selos e destaques sólidos */
.bg-navyBlue,
.peer:checked ~ .peer-checked\:bg-navyBlue {
    background-color: var(--brand-primary);
}

.border-navyBlue,
.hover\:border-navyBlue:hover,
.focus\:border-navyBlue:focus {
    border-color: var(--brand-primary);
}

.focus\:ring-navyBlue:focus {
    --tw-ring-color: var(--brand-primary);
}

/* --------------------------------------------------------------- tipografia
 *
 * O tema do Bagisto usa DM Serif Display nos títulos de seção, o que destoa do
 * Poppins usado no resto da loja. Apontar para a custom property deixa a
 * escolha no .env, por cliente.
 */
.font-dmserif {
    font-family: var(--brand-font-heading);
}

/* ------------------------------------------------------- banner da home
 *
 * O template do carrossel traz `aspect-[2.743/1]` fixo — a proporção de uma
 * arte 1920x700 — em três pontos. Como é classe utilitária arbitrária, trocar a
 * altura pelo painel não adianta: o slide continua sendo forçado naquela forma.
 * Aqui ela passa a seguir a variável da marca, configurável por cliente.
 *
 * O object-fit vem junto porque o padrão é `fill`: uma arte de proporção
 * diferente apareceria esticada, e com `cover` ela é recortada, o que é bem
 * menos perceptível quando o cliente sobe uma imagem fora do tamanho pedido.
 */
.aspect-\[2\.743\/1\] {
    aspect-ratio: var(--brand-hero-ratio);
    object-fit: cover;
}

/* ------------------------------------------------- títulos das seções da home
 *
 * Os blocos vêm do seeder com tamanhos fixos e generosos (70px com entrelinha
 * de 90px, 50px com 75px), pensados para telas largas: em notebook ocupam boa
 * parte da dobra e no celular quebram em muitas linhas.
 *
 * clamp() define mínimo, valor proporcional à largura e máximo, então o título
 * acompanha a tela sem media query. A entrelinha passa a ser proporcional ao
 * tamanho (unidade sem medida), em vez de um valor fixo que vira exagero
 * quando a fonte diminui.
 *
 * O seletor começa em `body` de propósito: o CSS dos blocos é injetado num
 * <style> dentro do body, depois desta folha, então empatar em especificidade
 * faria o valor original vencer por ordem.
 */

/*
 * Dois degraus apenas: título de seção e título de bloco. O tema original usava
 * três tamanhos grandes muito próximos entre si (70px, 60px, 50px), diferença
 * que o olho registra como desalinho sem identificar a causa.
 */
body .top-collection-header,
body .section-title h2,
body .inline-col-wrapper .inline-col-content-wrapper .inline-col-title {
    font-size: var(--brand-fs-hero);
    line-height: 1.15;
}

body .collection-card-wrapper .single-collection-card .overlay-text,
.font-dmserif,
.text-3xl {
    font-size: var(--brand-fs-xxl);
    line-height: 1.25;
}

/* --------------------------------------------------- página de produto
 *
 * As descrições vinham em 18px com entrelinha de 28px (1.75) e as abas em 20px,
 * enquanto o corpo da loja usa 16px. Texto de leitura maior que o restante do
 * site passa a impressão de que a página usa outra fonte.
 *
 * Os seletores combinam duas condições para superar as classes utilitárias de
 * origem sem precisar de !important.
 */
p.text-lg {
    font-size: var(--brand-fs-base);
    line-height: 1.6;
}

.cursor-pointer.text-xl {
    font-size: var(--brand-fs-base);
}

/*
 * Rótulos das opções ("Cor", "Tamanho") vinham em 20px, tamanho de subtítulo
 * para o que é apenas o nome de um campo.
 */
h2.text-xl {
    font-size: var(--brand-fs-base);
}

/*
 * O preço da página de produto fica de fora de propósito. A classe .final-price
 * é a mesma usada nos cartões da listagem, onde o tamanho vem do container —
 * uniformizá-la aqui aumentaria o preço em todas as vitrines. Destaque maior no
 * preço, na página do produto, também é proposital.
 */

/* ------------------------------------------------------------------ botões */

/* ação principal: "Ver Coleções", "Finalizar compra" */
.primary-button {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
    transition: background-color .15s ease, border-color .15s ease;
}

.primary-button:hover {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

/* ação secundária, contornada: "Adicionar ao Carrinho" */
.secondary-button {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    transition: background-color .15s ease, color .15s ease;
}

.secondary-button:hover {
    background-color: var(--brand-primary);
    color: var(--brand-on-primary);
}