/* Fontes servidas do próprio site (19/09/2026, Fase A de segurança/LGPD).
Antes vinham de fonts.googleapis.com / fonts.gstatic.com: o navegador de
TODA visitante conectava no Google (entregando o IP dela) antes mesmo do
banner de cookies, e o site dependia de um terceiro pra desenhar o texto.
São as mesmas famílias, agora em assets/fonts/ — Montserrat (texto) e
Playfair Display (títulos), ambas com licença aberta (SIL OFL). Só o
subconjunto "latin", que cobre todo o português (acentos, cedilha, til).
Cada arquivo é uma fonte variável: um único .woff2 atende todos os pesos
declarados. Se um dia trocar um arquivo, mude também o nome dele — o cache
é de 1 ano (ver .htaccess). */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/montserrat-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url('../fonts/playfair-display-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 500 600;
font-display: swap;
src: url('../fonts/playfair-display-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*
* estilo.css — folha de estilo única da loja OXUAI.
*
* Paleta extraída das logos que a lojista enviou em 01/09/2026 (fundo creme
* e dourado em degradê, do bronze escuro ao dourado claro). Se a marca
* ganhar um manual de marca mais formal depois, com códigos de cor
* oficiais, é só trocar os valores aqui em cima — o resto do site todo usa
* essas variáveis, não cor "chumbada" espalhada pelos arquivos.
*/
:root {
/* Fundo e superfícies */
--cor-fundo: #EBE7E4; /* mesmo tom de fundo das logos */
--cor-fundo-clara: #F7F5F2; /* cards e blocos de conteúdo, mais clara que o fundo geral */
--cor-branco: #FFFFFF;
/* Texto */
--cor-texto: #2E2A26; /* quase preto, tom quente (não preto puro) */
--cor-texto-suave: #6B6560; /* legendas, texto secundário */
/* Dourado da marca (degradê extraído das logos) */
--cor-dourado-escuro: #8D5A1B;
--cor-dourado: #A6712D; /* uso sólido: preço, botão, links em destaque */
--cor-dourado-claro: #D9B36B;
--cor-dourado-brilho: #F4D78D; /* só pra detalhe pequeno/brilho, nunca texto grande */
--degrade-dourado: linear-gradient(135deg, var(--cor-dourado-escuro), var(--cor-dourado) 55%, var(--cor-dourado-brilho));
/* Bordas e divisores */
--cor-borda: #DDD6CB;
/* Estados */
--cor-sucesso: #4B7A51;
--cor-erro: #A64B3B;
--cor-aviso-fundo: #F4E9D6;
/* Tipografia */
--fonte-base: 'Montserrat', system-ui, -apple-system, sans-serif;
/* Fonte de destaque pros títulos (06/09/2026): uma serifada elegante,
de traço fino/grosso, que conversa com o traçado manuscrito e dourado
da logo da marca — a Montserrat (sem serifa, mais neutra) continua
sendo usada no corpo do texto, menus e botões, seguindo a prática
comum de e-commerce de moda de combinar 2 fontes: uma de destaque
(títulos) e uma de trabalho (leitura/interface). */
--fonte-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
/* Espaçamento (escala simples, múltiplos de 4px) */
--esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px;
--esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px;
--raio: 10px;
--raio-pequeno: 6px;
--sombra: 0 2px 12px rgba(46, 42, 38, 0.08);
--sombra-forte: 0 8px 28px rgba(46, 42, 38, 0.14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--fonte-base);
background: var(--cor-fundo);
color: var(--cor-texto);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 var(--esp-3); font-family: var(--fonte-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
p { margin: 0 0 var(--esp-3); }
button { font-family: inherit; cursor: pointer; }
.container {
max-width: 1180px;
margin: 0 auto;
padding: 0 var(--esp-4);
}
/* ------------------------------- Cabeçalho ------------------------------- */
.cabecalho {
background: var(--cor-branco);
border-bottom: 1px solid var(--cor-borda);
position: sticky;
top: 0;
z-index: 50;
}
.cabecalho .container {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--esp-3);
padding-bottom: var(--esp-3);
gap: var(--esp-4);
}
.cabecalho .logo img { height: 32px; width: auto; } /* altura de logo comum em headers de e-commerce de moda (28–40px) */
.cabecalho .acoes { display: flex; align-items: center; gap: var(--esp-4); }
.cabecalho .busca-mobile,
.cabecalho .menu-mobile { display: none; }
/* Busca sempre visível (desktop) — campo + botão de lupa colados, no
espaço entre a logo e os ícones da direita (07/09/2026). */
.cabecalho .busca-cabecalho {
display: flex;
flex: 1;
max-width: 420px;
margin: 0 var(--esp-5);
}
.cabecalho .busca-cabecalho input[type=search] {
flex: 1;
min-width: 0;
padding: 9px 14px;
border-radius: var(--raio-pequeno) 0 0 var(--raio-pequeno);
border: 1px solid var(--cor-borda);
border-right: none;
background: var(--cor-fundo-clara);
font-family: inherit;
font-size: 13px;
color: var(--cor-texto);
}
.cabecalho .busca-cabecalho button {
display: flex;
align-items: center;
justify-content: center;
padding: 9px 16px;
border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
border: 1px solid var(--cor-borda);
background: var(--cor-fundo-clara);
color: var(--cor-texto); /* 11/09/2026: ícone de lupa (SVG) na cor da marca, no lugar do emoji 🔍 padrão do sistema */
}
.cabecalho .busca-cabecalho button:hover { color: var(--cor-dourado); }
/* Busca expandida do celular — mesma barra, some/aparece com [hidden]
(mesmo padrão do menu mobile, ver .nav-mobile mais abaixo). */
.busca-mobile-expandida { display: none; padding: var(--esp-3) var(--esp-4); gap: var(--esp-2); border-top: 1px solid var(--cor-borda); }
.busca-mobile-expandida input[type=search] {
flex: 1;
padding: 10px 14px;
border-radius: var(--raio-pequeno);
border: 1px solid var(--cor-borda);
font-family: inherit;
/* 16px, não 14px (Fase A da auditoria mobile, 14/09/2026): abaixo de
16px o Safari do iPhone dá zoom automático ao tocar no campo — mesma
regra que .campo-formulario já segue no checkout. */
font-size: 16px;
}
.busca-mobile-expandida button {
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
border-radius: var(--raio-pequeno);
border: 1px solid var(--cor-borda);
background: var(--cor-fundo-clara);
color: var(--cor-texto);
}
/* Barra de categorias — segunda linha do cabeçalho. Fundo trocado em
14/09/2026 (pedido da lojista: o preto/quase-preto de antes, var(--cor-texto),
estava "muito pro preto", sem relação com a marca) pro dourado escuro do
design system — branco continua com ótimo contraste em cima dele (~5,8:1,
WCAG). Referência: menu da Stril Brand que a lojista mandou (Home, Ver
Tudo, categorias uma a uma, Sale no fim). */
.cabecalho .nav-desktop {
display: flex;
align-items: center;
justify-content: center; /* 14/09/2026 (pedido da lojista): menu centralizado, antes ficava alinhado à esquerda */
flex-wrap: wrap;
/* Nunca "overflow-x: auto" aqui: como o dropdown do "Ver Tudo" é
posicionado abaixo desta barra (position: absolute), um scroll
horizontal nela cortaria o dropdown pela metade (a regra do CSS: definir
um eixo de overflow diferente de "visible" faz o outro eixo também
deixar de ser "visible"). Categoria demais simplesmente quebra pra uma
segunda linha (flex-wrap: wrap) em vez de cortar. */
gap: var(--esp-2) var(--esp-5);
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
background: var(--cor-dourado-escuro);
color: #fff;
padding: var(--esp-1) var(--esp-4);
}
.cabecalho .nav-desktop a { display: inline-block; padding: var(--esp-3) 0; }
.cabecalho .nav-desktop a:hover { opacity: 0.8; }
.cabecalho .nav-desktop .link-sale { color: var(--cor-dourado-brilho); font-weight: 700; }
.item-ver-tudo { position: relative; }
.botao-ver-tudo {
background: none;
border: none;
color: inherit;
font-family: inherit;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
padding: var(--esp-3) 0;
display: flex;
align-items: center;
gap: 4px;
}
.botao-ver-tudo::after { content: '▾'; font-size: 9px; }
.dropdown-categorias {
position: absolute;
top: 100%;
left: 0;
margin-top: 1px;
background: var(--cor-branco);
border: 1px solid var(--cor-borda);
border-radius: 0 0 var(--raio-pequeno) var(--raio-pequeno);
box-shadow: var(--sombra-forte);
min-width: 200px;
padding: var(--esp-2) 0;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 0.15s ease, transform 0.15s ease;
z-index: 60;
}
.dropdown-categorias a {
padding: var(--esp-2) var(--esp-4) !important;
font-size: 13px;
text-transform: none;
letter-spacing: normal;
color: var(--cor-texto);
}
.dropdown-categorias a:hover { background: var(--cor-fundo-clara); opacity: 1; }
.item-ver-tudo:hover .dropdown-categorias,
.item-ver-tudo:focus-within .dropdown-categorias,
.item-ver-tudo.aberto .dropdown-categorias {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (max-width: 780px) {
.cabecalho .busca-cabecalho { display: none; }
.cabecalho .nav-desktop { display: none; }
.busca-mobile-expandida:not([hidden]) { display: flex; }
/* 12/09/2026: "inline-flex" (não "block") pra manter o ícone (lupa ou
hambúrguer) centralizado dentro do botão — ver .cabecalho .acoes
button.menu-mobile mais abaixo, que cuida do resto do estilo desse
botão mas não pode mais definir o "display" (ver comentário lá). */
.cabecalho .menu-mobile { display: inline-flex; }
.cabecalho .logo img { height: 26px; }
}
/* --------------------------------- Botões --------------------------------- */
.botao {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--esp-2);
padding: 13px 28px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid transparent;
transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.botao-primario {
background: var(--degrade-dourado);
color: #fff;
box-shadow: var(--sombra);
}
.botao-primario:hover { transform: translateY(-1px); box-shadow: var(--sombra-forte); }
.botao-secundario {
background: transparent;
border-color: var(--cor-texto);
color: var(--cor-texto);
}
.botao-secundario:hover { background: var(--cor-texto); color: #fff; }
.botao:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
/* --------------------------------- Selos/badges --------------------------------- */
.selo {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.selo-urgencia { background: #F4E4C9; color: #8A5A12; }
.selo-esgotado { background: #ECE7E2; color: var(--cor-texto-suave); }
.selo-novo { background: var(--cor-texto); color: #fff; }
.selo-sale { background: var(--cor-erro); color: #fff; } /* 07/09/2026, página Sale do menu */
/* Preço original riscado + preço promocional em destaque (07/09/2026,
página Sale do menu — mesmo padrão visual usado por lojas grandes: preço
"de" pequeno e riscado, preço "por" grande e na cor de alerta). */
.preco-de-riscado { font-size: 12px; color: var(--cor-texto-suave); text-decoration: line-through; }
.cartao-produto .preco.preco-promocional,
.opcoes-produto .preco-grande.preco-promocional { color: var(--cor-erro); }
/* --------------------------------- Vitrine/Hero --------------------------------- */
.hero {
background: var(--cor-fundo-clara);
padding: var(--esp-8) 0;
text-align: center;
}
.hero .subtitulo {
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cor-dourado);
margin-bottom: var(--esp-3);
}
.hero h1 {
font-size: clamp(32px, 6vw, 58px);
font-weight: 600;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* Palavra de destaque dentro do título (itálico + dourado), pra ecoar o
traçado manuscrito da logo sem usar uma fonte de script inteira (que
pesa a leitura em títulos grandes). */
.hero h1 em, .hero-conteudo h1 em {
font-style: italic;
font-weight: 500;
color: var(--cor-dourado-escuro);
}
.hero-conteudo h1 em { color: var(--cor-dourado-brilho); }
.hero p.descricao {
max-width: 520px;
margin: 0 auto var(--esp-5);
color: var(--cor-texto-suave);
/* Mesma família de destaque do título (itálico, mais leve), pra soar
como uma continuação do H1 em vez de um texto de corpo qualquer —
igual estilo do "autenticamente você" logo acima. */
font-family: var(--fonte-display);
font-style: italic;
font-weight: 500;
font-size: clamp(17px, 2.4vw, 21px);
line-height: 1.45;
}
.slogan-marca {
font-style: italic;
font-weight: 500;
font-size: clamp(15px, 1.8vw, 19px);
color: var(--cor-dourado);
margin-bottom: var(--esp-4);
}
.hero-conteudo .slogan-marca { color: var(--cor-dourado-brilho); }
/* --------------------------------- Hero com foto (banner único ou carrossel) --------------------------------- */
.hero-com-foto { padding: 0; }
/* 11/09/2026: antes o carrossel tinha uma altura fixa em tela (62vh no
celular, 68vh no desktop) e a foto era cortada (object-fit: cover) pra
preencher essa altura — funcionava bem com fotos de modelo em retrato,
mas cortava banners prontos com texto desenhado perto da borda. Trocado
por uma altura calculada a partir da largura (aspect-ratio), na mesma
proporção dos banners atuais (851x315), pra caber a imagem inteira, sem
cortar nada, em qualquer largura de tela (celular ou desktop). Se um
banner futuro vier numa proporção diferente, o `object-fit: contain`
abaixo garante que ele aparece inteiro do mesmo jeito (só sobra uma
faixinha da cor de fundo dos dois lados ou em cima/embaixo, em vez de
cortar ou esticar a imagem). */
.hero-carrossel {
position: relative;
overflow: hidden;
width: 100%;
max-width: 1900px; /* 11/09/2026: trava a largura em telas de desktop muito grandes (ultrawide, TV como monitor etc.) — sem isso, o banner (foto de 1800px de largura) precisava esticar além do tamanho real dela pra preencher a tela toda, o que deixa a imagem borrada. Até 1900px de tela, continua ocupando 100% da largura, igual antes. */
margin: 0 auto;
aspect-ratio: 851 / 315;
background: var(--cor-fundo-clara);
}
/* 12/09/2026: no celular, a caixa do carrossel vira vertical (proporção
4:5, igual à foto vertical que a lojista mandou — ver 'arquivo_mobile'
em hero_fotos.php), em vez da mesma proporção larga do desktop. Isso é
o que faz o banner ocupar mais da metade da tela no celular (antes
ficava bem curto). Acima de 700px de largura de tela (tablet/desktop),
volta pra proporção larga de sempre. */
@media (max-width: 699px) {
.hero-carrossel { aspect-ratio: 4 / 5; }
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.8s ease;
pointer-events: none; /* 07/09/2026: só o slide "ativo" (visível) deve poder ser clicado — sem isso, o slide seguinte (invisível, esperando a vez) ficava por cima capturando o clique */
}
.hero-slide.ativo { opacity: 1; pointer-events: auto; }
.hero-slide img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; display: block; } /* 11/09/2026: trocado de "cover" (cortava) pra "contain" (mostra a imagem inteira, sem cortar nenhuma borda) — ver comentário em .hero-carrossel acima */
.hero-slide picture { display: block; width: 100%; height: 100%; } /* 11/09/2026: quando o banner tem foto diferente pro celular (ver arquivo_mobile em hero_fotos.php), a vem dentro de uma — sem isso, o (inline por padrão) bagunçava a altura do slide */
.hero-slide a { display: block; width: 100%; height: 100%; } /* 07/09/2026: banner clicável (foto com link cadastrado em hero_fotos.php) */
/* Carrossel de "Linhas" (14/09/2026, Fase C do plano inspirado na Stril
Brand; redesenhado no mesmo dia — a versão original era um slide único
full-bleed, foto enorme demais na tela). Agora é o mesmo cartão visual
dos 3 cards de subcategoria (.banner-vitrine, ver mais abaixo), só numa
fileira que rola de lado — reaproveita a rolagem-com-setas que
Novidades/Mais compradas já usam (.carrossel-horizontal-wrap/
.carrossel-horizontal, JS em iniciarCarrosseisHorizontais). Cabem 4
linhas lado a lado no desktop antes de precisar rolar/clicar na seta
(ver breakpoints em .banner-vitrine-linha, mais abaixo). */
.carrossel-linhas {
justify-content: center; /* centraliza quando não enche a fileira toda (1 a 4 linhas). Passou de 4 e precisou rolar, o navegador troca sozinho pro alinhamento padrão (começo), sem precisar de JS pra decidir isso — comportamento normal de flexbox com conteúdo maior que o container. */
}
/* 11/09/2026: o degradê escuro que ficava por cima da foto (só existia pra
garantir que o texto branco sobreposto, ".hero-conteudo" logo abaixo,
ficasse legível em qualquer imagem) e o próprio ".hero-conteudo" ficaram
SEM USO no momento — os banners atuais já vêm com texto e botão prontos,
desenhados na própria imagem, então nada fica sobreposto por cima deles.
Mantidos aqui comentados, sem aplicar em nada, caso um dia a loja volte a
usar fotos "cruas" (sem texto) no hero, precisando desse texto por cima
de novo — nesse caso, é só voltar a incluir a div ".hero-conteudo" no
index.php (ver comentário lá) e descomentar as regras abaixo.
.hero-carrossel::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(46,42,38,0.15) 0%, rgba(46,42,38,0.55) 100%);
z-index: 1;
pointer-events: none;
}
.hero-conteudo {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
padding-bottom: var(--esp-7);
text-align: left;
pointer-events: none;
}
.hero-conteudo a { pointer-events: auto; }
.hero-conteudo .subtitulo { color: var(--cor-dourado-brilho); }
.hero-conteudo h1 { color: var(--cor-branco); }
.hero-conteudo p.descricao { color: rgba(255,255,255,0.92); text-shadow: 0 1px 10px rgba(0,0,0,0.3); }
.hero-conteudo h1 { margin-left: 0; margin-right: 0; text-shadow: 0 2px 16px rgba(0,0,0,0.25); }
.hero-conteudo p.descricao { margin-left: 0; max-width: 480px; }
*/
.hero-seta {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.85);
color: var(--cor-texto);
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.hero-seta:hover { background: var(--cor-branco); }
.hero-seta-anterior { left: var(--esp-4); }
.hero-seta-proxima { right: var(--esp-4); }
/* 16/09/2026 (pedido da lojista): as setas agora aparecem também no
celular — antes só existiam no desktop ("display:none" abaixo de
640px), deixando quem estava no celular sem jeito nenhum de passar o
banner manualmente além de esperar a troca automática. Um pouco
menores nessa largura de tela pra sobrar mais espaço de foto. */
@media (max-width: 640px) {
.hero-seta { width: 34px; height: 34px; font-size: 19px; }
.hero-seta-anterior { left: var(--esp-3); }
.hero-seta-proxima { right: var(--esp-3); }
}
.hero-pontos {
position: absolute;
z-index: 3;
bottom: var(--esp-4);
right: var(--esp-4);
display: flex;
gap: var(--esp-2);
}
.hero-ponto {
width: 9px;
height: 9px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.5);
cursor: pointer;
padding: 0;
}
.hero-ponto.ativo { background: var(--cor-branco); }
/* --------------------------------- Grade de produtos --------------------------------- */
.grade-produtos {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--esp-4);
}
@media (min-width: 640px) { .grade-produtos { grid-template-columns: repeat(3, 1fr); gap: var(--esp-5); } }
@media (min-width: 980px) { .grade-produtos { grid-template-columns: repeat(4, 1fr); } }
.cartao-produto {
position: relative; /* 23/09/2026: âncora do botão de compra rápida (ver mais abaixo) */
background: var(--cor-branco);
border-radius: var(--raio);
overflow: hidden;
box-shadow: var(--sombra);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cartao-produto:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); }
.cartao-produto .foto { aspect-ratio: 4 / 5; background: var(--cor-fundo-clara); overflow: hidden; position: relative; }
.cartao-produto .foto img { width: 100%; height: 100%; object-fit: cover; }
.cartao-produto .selo { position: absolute; top: var(--esp-2); left: var(--esp-2); z-index: 2; } /* 23/09/2026: acima da 2ª foto de hover, senão o selo Sale ficaria coberto */
.cartao-produto .info { padding: var(--esp-3) var(--esp-3) var(--esp-4); }
.cartao-produto .categoria { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cor-texto-suave); }
.cartao-produto .nome { font-size: 15px; font-weight: 600; margin: 2px 0 6px; }
.cartao-produto .preco { color: var(--cor-dourado-escuro); font-weight: 700; font-size: 16px; }
.cartao-produto .avaliacao { font-size: 12px; color: var(--cor-texto-suave); margin-top: 2px; }
.cartao-produto .cores { display: flex; gap: 4px; margin-top: var(--esp-2); }
.cartao-produto .cor-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); }
/* 07/09/2026: o card deixou de ser um único (pra caber o botão "Comprar"
sem link aninhado dentro de link, que é inválido em HTML) — agora
".cartao-produto" é um