/*
* Tema `atacado` ("Aço") — material de construção, ferragem, autopeças.
*
* **Este arquivo é a folha de estilo INTEIRA do tema.** O `style.css` do
* clássico não carrega junto (ver views/partials/theme-assets.php): não há
* herança, não há regra pra vencer, não há especificidade a contornar.
*
* ## A linguagem, em uma frase
*
* Loja grande de balcão: masthead em três bandas (anúncio na cor da marca,
* bloco escuro com logotipo e utilitários de duas linhas, busca larga
* permanente), barra branca de categorias, e daí pra baixo TUDO é painel
* branco de fio 1px sobre um fundo claro e morno — vitrine, filtro, ficha
* de produto, carrinho, conta. O preço é o elemento mais forte de qualquer
* tela e usa a cor da loja; ao lado dele mora sempre a disponibilidade,
* com um ponto colorido. Tipografia Nunito Sans, canto de 4px, ícone de
* traço desenhado no próprio tema.
*
* ## Onde a cor do lojista aparece
*
* A paleta é white-label (`company_preferences`, injetada em runtime por
* `core/ThemeColors.js`). Aqui ela ocupa: a faixa de anúncio inteira, o
* botão da busca, o preço, todo CTA, o selo de promoção, o estado ativo do
* filtro e o passo ativo do checkout. O masthead e o rodapé usam a
* secundária escura. Tema que usa a cor da loja só no botão de comprar é
* um tema cinza com um botão colorido — e loja nenhuma se reconhece nele.
*
* ## O que este arquivo NÃO é
*
* Não é uma variação do `moda`. Aquele tema é branco, sem moldura, com a
* foto mandando e a cor quase ausente; este é o oposto em quase toda
* decisão — moldura em tudo, densidade alta, cor no preço, foto contida em
* fundo branco, informação de estoque à mostra. Os dois compartilham
* dados, JS e contrato de DOM; o desenho não tem uma linha em comum.
*
* Sumário
* 00. Reset
* 01. Tokens
* 02. Tipografia e utilitários
* 03. Botões, campos e controles
* 04. Masthead (anúncio, balcão, busca, categorias, mini-carrinho)
* 05. Menu do celular
* 06. Banner
* 07. Seções da home
* 08. Célula de catálogo
* 09. Página de produto
* 10. Listagem e filtro
* 11. Carrinho
* 12. Checkout
* 13. Conta
* 13b. Entrar / criar conta
* 13c. Informações da empresa
* 14. Rodapé, garantias e barra inferior
* 15. Componentes compartilhados (toast, modal, skeleton)
* 16. Movimento
*/
/* =================================================
* 00. Reset
* ================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { -webkit-text-size-adjust: 100%; }
img,
picture,
video,
svg { max-width: 100%; display: block; }
button,
input,
select,
textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
/* Todo ícone do tema é SVG de traço escrito nos partials — uma folha só
decide espessura e ponta, e nenhum deles depende de fonte de ícone. */
svg {
width: 1em;
height: 1em;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
flex: none;
}
/* =================================================
* 01. Tokens
* ================================================= */
:root {
/* Fundo claro e morno com painel branco por cima. É a gramática de
caixas da referência: cada peça de conteúdo é um cartão, e o fundo
existe para separá-los. */
--bg: #f5f2f0;
--card: #ffffff;
--bg-sunk: #ebe7e4;
--ink: #1c1a19;
--ink-soft: #4a4644;
--ink-mute: #6b6663;
--line: #e4dfdb;
--line-strong: #cec7c1;
/* Paleta da LOJA (ThemeColors.js). Primária = anúncio, preço e ação;
secundária escura = balcão e rodapé. */
--primary-color: #1c1a19;
--secondary-color: #1c1a19;
--secondary-dark-color: #2b2422;
--on-brand: #ffffff;
/* A cor da marca como TEXTO. O lojista escolhe qualquer primária, e
uma primária clara sobre painel branco reprova contraste — o preço,
que é o texto mais importante da loja, não pode depender de sorte.
Botão e selo (fundo cheio, texto `--on-primary` que o ThemeColors
calcula) seguem na primária crua. */
--brand-text: color-mix(in srgb, var(--primary-color) 74%, #000);
--ok: #1a7f4b;
--low: #a35b00;
--err: #b32d2d;
--font: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--step--1: .8125rem;
--step-0: .9375rem;
--step-1: 1.0625rem;
--step-2: clamp(1.25rem, 1.8vw, 1.5rem);
--step-3: clamp(1.5rem, 3vw, 2rem);
--step-4: clamp(2rem, 4.6vw, 3.25rem);
--r: 4px;
--r-lg: 6px;
--gap: 1rem;
--gap-2: 1.5rem;
--gap-3: 2.25rem;
--gap-4: 3rem;
--shell: 1440px;
--pad: 1rem;
--ease: cubic-bezier(.2, .6, .2, 1);
--fast: .16s var(--ease);
--slow: .4s var(--ease);
--z-header: 50;
--z-drawer: 90;
--z-overlay: 80;
}
@media (min-width: 768px) {
:root { --pad: 2rem; }
}
/* =================================================
* 02. Tipografia e utilitários
* ================================================= */
body {
font-family: var(--font);
font-size: var(--step-0);
line-height: 1.5;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font);
font-weight: 800;
line-height: 1.15;
letter-spacing: -.01em;
text-wrap: balance;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); font-weight: 700; }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }
.mini-text { font-size: var(--step--1); color: var(--ink-mute); }
.at-shell,
.container {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: var(--pad);
}
/* Contrato de JS compartilhado: sem `.hidden` tudo que o JS "esconde"
aparece — o aviso de frete abre a página como faixa solta. */
.hidden,
.at-hidden { display: none !important; }
.mobile-hide { display: none; }
.desktop-hide { display: block; }
/* Blindagem (§6.7 do playbook): regra de área de toque com duas classes
vence o utilitário de uma e traz o elemento de volta na largura errada.
Esconder tem que ganhar sempre. */
@media (max-width: 921px) {
.mobile-hide { display: none !important; }
}
@media (min-width: 922px) {
.mobile-hide { display: block; }
.desktop-hide { display: none !important; }
}
/* Medidas do Swiper — sem elas os slides ficam lado a lado. */
.swiper { overflow: hidden; }
.swiper-wrapper { display: flex; }
.swiper-slide { flex: 0 0 100%; width: 100%; }
.flexitem { display: flex; align-items: center; }
.flexcol { display: flex; flex-direction: column; }
.flexcenter { display: flex; align-items: center; justify-content: center; }
.flexwrap { display: flex; flex-wrap: wrap; }
.object-cover { overflow: hidden; }
/* O `` inline entre a caixa e a foto quebra a corrente do height:100%
e a imagem sai no tamanho natural (§6.18). */
.object-cover a { display: block; width: 100%; height: 100%; }
.object-cover img { width: 100%; height: 100%; object-fit: cover; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--brand-text);
outline-offset: 2px;
}
/* O painel branco — a peça mais repetida do tema. */
.at-panel {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 1.25rem;
}
@media (min-width: 768px) {
.at-panel { padding: 1.5rem; }
}
.at-panel--flush { padding: 0; overflow: hidden; }
/* Aviso de frete grátis (JS compartilhado alterna `.hidden`). */
.notification {
background: var(--card);
border-bottom: 1px solid var(--line);
text-align: center;
}
.notification-content { padding: .6rem var(--pad); }
.notification-title {
display: inline-flex;
align-items: center;
gap: .5em;
font-size: var(--step--1);
font-weight: 700;
}
.notification progress,
.notification #progress { display: none; }
/* Ponto colorido de disponibilidade — a assinatura de informação do tema.
Aparece no card, na ficha do produto e na conta. */
.at-stock {
display: inline-flex;
align-items: center;
gap: .45em;
font-size: var(--step--1);
font-weight: 600;
}
.at-stock::before {
content: '';
width: 7px;
height: 7px;
border-radius: 999px;
background: currentColor;
flex: none;
}
.at-stock--ok { color: var(--ok); }
.at-stock--low { color: var(--low); }
.at-stock--out { color: var(--ink-mute); }
/* =================================================
* 03. Botões, campos e controles
* ================================================= */
.at-btn,
.primary-button,
.secondary-button,
.light-button,
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
font-family: var(--font);
font-size: var(--step-0);
font-weight: 700;
line-height: 1.2;
padding: .75em 1.4em;
border: 1px solid var(--primary-color);
border-radius: var(--r);
background: var(--primary-color);
color: var(--on-primary, #fff);
cursor: pointer;
white-space: nowrap;
transition: filter var(--fast), background-color var(--fast), color var(--fast), border-color var(--fast);
}
.at-btn:hover,
.primary-button:hover,
.btn:hover { filter: brightness(1.1); }
.at-btn svg { font-size: 1.15em; }
.at-btn--lg { padding: .9em 1.8em; font-size: var(--step-1); }
.at-btn--block,
.at-btn--wide { width: 100%; }
/* Escuro: o segundo botão do par (a referência usa o par laranja+escuro
em toda ação dupla — carrinho/checkout, adicionar/ver). */
.at-btn--dark {
background: var(--secondary-dark-color);
border-color: var(--secondary-dark-color);
color: var(--on-brand);
}
.at-btn--dark:hover { filter: brightness(1.25); }
/* `.btn-secondary`/`.btn-sm` vêm do JS da conta ("Ver detalhes"); sem
tratamento herdam o primário e cada linha da lista vira um bloco cheio
na cor da marca. */
.at-btn--ghost,
.secondary-button,
.light-button,
.btn-secondary {
background: transparent;
color: var(--ink);
border-color: var(--line-strong);
filter: none;
}
.at-btn--ghost:hover,
.secondary-button:hover,
.light-button:hover,
.btn-secondary:hover {
background: var(--ink);
border-color: var(--ink);
color: #fff;
filter: none;
}
.btn-sm { min-height: 36px; padding: 0 1em; font-size: var(--step--1); }
.at-btn:disabled,
.primary-button:disabled,
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
input[type="text"],
input[type="email"],
input[type="mail"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
select,
textarea {
width: 100%;
padding: .7em .85em;
background: var(--card);
border: 1px solid var(--line-strong);
border-radius: var(--r);
font-size: var(--step-0);
transition: border-color var(--fast), box-shadow var(--fast);
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--brand-text);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
outline: none;
}
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
label {
display: block;
font-size: var(--step--1);
font-weight: 700;
color: var(--ink-soft);
margin-bottom: .35em;
}
/* Stepper de quantidade — card, ficha de produto e carrinho. A ordem
(menos, input, mais) é contrato de PurchaseButton.js. */
.qty-control,
.purchase-quantity {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--line-strong);
border-radius: var(--r);
background: var(--card);
overflow: hidden;
}
.qty-control button,
.purchase-quantity-btn {
width: 2.4em;
min-width: 34px;
font-size: var(--step-1);
font-weight: 700;
color: var(--ink-soft);
transition: background-color var(--fast), color var(--fast);
}
.qty-control button:hover,
.purchase-quantity-btn:hover { background: var(--bg); color: var(--brand-text); }
.qty-control input,
.purchase-quantity-input {
width: 3em;
border: 0;
border-radius: 0;
text-align: center;
padding: .5em 0;
background: none;
font-weight: 700;
-moz-appearance: textfield;
}
.qty-control input:focus,
.purchase-quantity-input:focus { border: 0; box-shadow: none; }
.purchase-quantity-input::-webkit-outer-spin-button,
.purchase-quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Selo. Sólido, canto pequeno, caixa alta miúda. */
.at-tag {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 800;
letter-spacing: .02em;
padding: .35em .55em;
border-radius: var(--r);
background: var(--primary-color);
color: var(--on-primary, #fff);
white-space: nowrap;
}
.at-tag--sale { background: var(--err); color: #fff; }
.at-tag--ship { background: var(--ok); color: #fff; }
.at-tag--cash { background: var(--secondary-dark-color); color: var(--on-brand); }
/* =================================================
* 04. Masthead
* ================================================= */
/* --- Banda 1: anúncio ESCURO com a frase na cor da marca e o bloco de
newsletter sólido colado na borda direita — é exatamente a primeira
faixa da referência (fundo quase preto, texto laranja, botão laranja).
O escuro vem da secundária da loja afundada em preto, então a faixa
continua white-label; a frase usa a primária CLAREADA, porque primária
escura sumiria sobre preto. --- */
.at-announce {
background: color-mix(in srgb, var(--secondary-dark-color) 45%, #000);
color: #fff;
}
.at-announce .container { padding-right: 0; }
.at-announce .wrapper {
display: flex;
align-items: stretch;
gap: 1.25rem;
min-height: 40px;
}
.at-announce__msg {
display: flex;
align-items: center;
font-size: var(--step--1);
font-weight: 700;
color: color-mix(in srgb, var(--primary-color) 62%, #fff);
}
.at-announce__links {
display: none;
margin-left: auto;
gap: 1.25rem;
}
.at-announce__links a {
display: inline-flex;
align-items: center;
min-height: 38px;
font-size: var(--step--1);
font-weight: 600;
color: rgba(255, 255, 255, .85);
}
.at-announce__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.at-announce__cta {
display: none;
align-items: center;
gap: .5em;
padding: 0 1.2rem;
background: var(--primary-color);
color: var(--on-primary, #fff);
font-size: var(--step--1);
font-weight: 700;
transition: filter var(--fast);
}
.at-announce__cta:hover { filter: brightness(1.1); }
.at-announce__cta svg { font-size: 1.1rem; }
@media (min-width: 922px) {
.at-announce__links { display: flex; }
.at-announce__cta { display: inline-flex; }
}
/* --- Banda 2: o balcão — a LINHA ÚNICA da referência:
logo | busca larga | favoritos | conta | carrinho. --- */
.at-mast {
background: var(--secondary-dark-color);
color: var(--on-brand);
}
.at-mast .container {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--gap);
min-height: 60px;
}
@media (min-width: 922px) {
.at-mast .container {
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 2rem;
min-height: 82px;
}
}
.at-mast__search { min-width: 0; }
@media (min-width: 922px) {
.at-mast__search { display: flex; justify-content: center; }
.at-mast__search .at-search { width: min(100%, 720px); }
}
.at-mast .trigger { display: none; }
@media (max-width: 921px) {
.at-mast .trigger {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
margin-left: -10px;
font-size: 1.5rem;
color: var(--on-brand);
}
}
.at-mast__logo { justify-self: center; }
@media (min-width: 922px) {
.at-mast__logo { justify-self: start; }
}
.at-mast__logo img { max-height: 40px; width: auto; }
.at-mast__logo .logo-text {
font-size: var(--step-2);
font-weight: 800;
color: var(--on-brand);
}
.at-mast__tools {
display: flex;
align-items: center;
justify-content: flex-end;
gap: .35rem;
}
@media (min-width: 922px) {
.at-mast__tools { gap: 1.5rem; }
}
.at-mast__icon {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
font-size: 1.4rem;
color: var(--on-brand);
}
/* Utilitário de duas linhas — "Olá, Miguel / Minha conta". É o que faz o
balcão parecer atendimento, e não barra de ícones de app. */
.at-mast__util {
display: inline-flex;
align-items: center;
gap: .6rem;
min-height: 44px;
padding: 0 .35rem;
color: var(--on-brand);
}
.at-mast__util:hover { opacity: .85; }
.at-mast__util-ico { position: relative; display: inline-flex; font-size: 1.5rem; }
.at-mast__util-txt {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.2;
text-align: left;
}
.at-mast__util-txt small { font-size: 11px; opacity: .72; }
.at-mast__util-txt strong { font-size: var(--step--1); font-weight: 700; }
.at-mast__count,
.item-number {
position: absolute;
top: -5px;
right: -8px;
min-width: 18px;
height: 18px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
line-height: 1;
background: var(--primary-color);
color: var(--on-primary, #fff);
border-radius: 999px;
}
.iscart { position: relative; }
/* A busca composta da referência: campo branco à esquerda, o seletor de
departamentos como segmento branco separado por um fio, e o botão
quadrado na cor da marca fechando à direita. O painel de departamentos
são `` puros abertos por hover/foco — sem JS e sem gatilho morto. */
.at-dept { position: relative; display: flex; }
.at-dept__btn {
display: inline-flex;
align-items: center;
gap: .45em;
height: 100%;
padding: 0 1rem;
background: var(--card);
border-left: 1px solid var(--line);
color: var(--ink-soft);
font-size: var(--step--1);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: color var(--fast);
}
.at-dept:hover .at-dept__btn,
.at-dept:focus-within .at-dept__btn { color: var(--ink); }
.at-dept__chev { transition: transform var(--fast); }
.at-dept:hover .at-dept__chev { transform: rotate(180deg); }
.at-dept__panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
left: auto;
min-width: 260px;
max-height: 70vh;
overflow-y: auto;
padding: .35rem 0;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: 0 18px 32px -20px rgba(0, 0, 0, .45);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
z-index: calc(var(--z-header) + 4);
}
.at-dept:hover .at-dept__panel,
.at-dept:focus-within .at-dept__panel { opacity: 1; visibility: visible; transform: none; }
.at-dept__panel a {
display: flex;
align-items: center;
min-height: 38px;
padding: 0 1.1rem;
color: var(--ink);
font-size: var(--step-0);
}
.at-dept__panel a:hover { background: var(--bg); color: var(--brand-text); }
.at-dept__all { font-weight: 700; color: var(--brand-text) !important; border-top: 1px solid var(--line); }
/* Sem `overflow: hidden` aqui, de propósito. Ele arredondava a pílula de
um jeito barato, mas este form é o ancestral posicionado de DOIS
painéis que abrem para fora: o de Departamentos (`.at-dept__panel`) e o
histórico de busca (`.select-box-menu`, montado por
shared/HeaderSearch.js). Os dois são `position: absolute; top: 100%` —
com o recorte no pai, saíam da tela inteiros e o botão parecia morto.
O canto agora é responsabilidade das pontas: a primeira e a última
célula da linha. */
.at-search {
display: flex;
align-items: stretch;
flex: 1;
min-width: 0;
height: 46px;
border-radius: var(--r);
}
.at-search input[type="search"] {
flex: 1;
min-width: 0;
border: 0;
border-radius: var(--r) 0 0 var(--r);
padding: 0 1rem;
font-size: var(--step-0);
}
.at-search input[type="search"]:focus { box-shadow: none; }
.at-search button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
flex: none;
border-radius: 0 var(--r) var(--r) 0;
background: var(--primary-color);
color: var(--on-primary, #fff);
font-size: 1.35rem;
transition: filter var(--fast);
}
.at-search button:hover { filter: brightness(1.1); }
/* --- Banda 4: barra branca de categorias --- */
.at-navbar {
position: sticky;
top: 0;
z-index: var(--z-header);
background: var(--card);
border-bottom: 1px solid var(--line);
box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}
.at-nav {
display: flex;
align-items: center;
gap: 1.5rem;
}
.at-nav > li > a {
display: inline-flex;
align-items: center;
gap: .3em;
min-height: 48px;
font-size: var(--step-0);
font-weight: 700;
color: var(--ink);
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: color var(--fast), border-color var(--fast);
}
.at-nav > li > a:hover { color: var(--brand-text); border-bottom-color: var(--primary-color); }
.at-nav .icon-small { display: inline-flex; font-size: 1.1rem; }
.at-nav__sale { color: var(--brand-text) !important; }
/* Mega-menu de largura total. Ancorado na BARRA (sticky conta como
posicionado); o `li` fica estático de propósito — com `position:
relative` nele o painel mediria a largura do item e o texto vazaria
pra fora do fundo branco (§6.15). */
.at-mega {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--card);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
box-shadow: 0 16px 28px -22px rgba(0, 0, 0, .4);
}
@media (min-width: 922px) {
.at-nav .at-mega {
display: block;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
pointer-events: none;
transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.at-nav > li:hover .at-mega,
.at-nav > li:focus-within .at-mega {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
}
}
.at-mega .container {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-2);
padding-block: 1.5rem;
}
@media (min-width: 1100px) {
.at-mega .container { grid-template-columns: minmax(0, 1fr) 280px; }
}
.at-mega__cols {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: .1rem 1.5rem;
align-content: start;
}
.at-mega__link {
display: inline-flex;
align-items: center;
min-height: 34px;
color: var(--ink-soft);
font-size: var(--step-0);
}
.at-mega__link:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
/* O cartão de imagem à direita — a peça que impede o mega de virar uma
parede de links. */
.at-mega__card {
position: relative;
display: block;
aspect-ratio: 16 / 10;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--bg-sunk);
}
.at-mega__card img { width: 100%; height: 100%; object-fit: cover; }
.at-mega__card-body {
position: absolute;
inset: auto 0 0 0;
display: flex;
flex-direction: column;
gap: .1rem;
padding: 2rem .9rem .9rem;
background: linear-gradient(to top, rgba(15, 12, 11, .82), transparent);
color: #fff;
}
.at-mega__card-body strong { font-size: var(--step-1); font-weight: 800; }
.at-mega__card-body span { font-size: var(--step--1); opacity: .85; }
/* --- Mini-carrinho --- */
.mini-cart {
position: absolute;
top: calc(100% + 14px);
right: 0;
width: min(390px, calc(100vw - 2rem));
background: var(--card);
color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .5);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
z-index: calc(var(--z-header) + 5);
text-align: left;
overflow: hidden;
}
.mini-cart.show { opacity: 1; visibility: visible; transform: none; }
/* No celular o popup ancorado no masthead não serve: o gatilho da BARRA
INFERIOR fica a uma página de distância do cabeçalho, e o popup abria
fora da tela. Vira folha fixa colada acima da barra, subindo. */
@media (max-width: 921px) {
.mini-cart {
position: fixed;
top: auto;
right: .5rem;
left: .5rem;
bottom: calc(64px + .5rem);
width: auto;
transform: translateY(10px);
z-index: calc(var(--z-drawer) + 2);
}
.mini-cart .cart-body { max-height: 38vh; }
}
.mini-cart .cart-head {
padding: .85rem 1.1rem;
background: var(--bg);
border-bottom: 1px solid var(--line);
font-size: var(--step--1);
font-weight: 700;
}
.mini-cart .cart-body { max-height: 46vh; overflow-y: auto; }
.mini-cart .products.mini li {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: .8rem;
align-items: center;
padding: .9rem 1.1rem;
}
.mini-cart .products.mini li + li { border-top: 1px solid var(--line); }
.mini-cart .thumbnail {
aspect-ratio: 1 / 1;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
}
.mini-cart .thumbnail a { display: block; width: 100%; height: 100%; }
.mini-cart .thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.mini-cart .item-content p { font-size: var(--step--1); line-height: 1.35; }
/* O título do item media 18px de altura — a linha do texto. `block` com
respiro dobra a área clicável sem quebrar a quebra de linha (a auditoria
de alvo de toque pegou os dois links em toda página). */
.mini-cart .item-content p a { display: block; padding-block: 4px; }
.mini-cart .price {
display: flex;
gap: .5rem;
margin-top: .2rem;
font-size: var(--step--1);
font-weight: 800;
color: var(--brand-text);
}
.mini-cart .item-remove { color: var(--ink-mute); font-size: 1.15rem; }
.mini-cart .item-remove:hover { color: var(--err); }
.mini-cart .cart-footer { padding: 1rem 1.1rem; border-top: 1px solid var(--line); background: var(--bg); }
.mini-cart .subtotal { display: flex; justify-content: space-between; margin-bottom: .9rem; font-weight: 700; }
.mini-cart .subtotal strong { font-size: var(--step-1); color: var(--brand-text); }
.mini-cart .actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mini-cart .actions a { width: 100%; padding-inline: .5em; }
.item-remove,
.item-remove-grid {
min-width: 34px;
min-height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* --- Painel de busca do celular --- */
.search-bottom {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: calc(var(--z-drawer) + 5);
background: var(--secondary-dark-color);
padding: .9rem 0 1rem;
opacity: 0;
visibility: hidden;
transform: translateY(-14px);
transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
}
.showsearch .search-bottom { opacity: 1; visibility: visible; transform: none; }
.search-bottom .search {
display: flex;
align-items: stretch;
max-width: 720px;
margin-inline: auto;
}
.search-bottom input[type="search"] {
flex: 1;
min-width: 0;
border: 0;
border-radius: var(--r) 0 0 var(--r);
padding: .7em .9em;
}
.search-bottom input[type="search"]:focus { box-shadow: none; }
.search-bottom button[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
flex: none;
background: var(--primary-color);
color: var(--on-primary, #fff);
border-radius: 0 var(--r) var(--r) 0;
font-size: 1.3rem;
}
.search-bottom .search-close {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
font-size: 1.3rem;
color: var(--on-brand);
}
/* Nas páginas de busca, o JS do tema move o painel pra dentro do
cabeçalho da listagem e põe `--inline`: vira barra visível da página,
com o termo na tela — SÓ no celular. No desktop o campo do masthead já
mostra o termo, e a barra duplicaria a busca. (Este bloco se perdeu na
reescrita do tema e a barra sumiu do celular; recolocado.) */
.search-bottom--inline {
position: static;
opacity: 1;
visibility: visible;
transform: none;
background: none;
padding: 0 1.25rem .9rem;
}
.search-bottom--inline .container { padding: 0; }
.search-bottom--inline .search { max-width: 560px; margin: 0; }
.search-bottom--inline .icon-large,
.search-bottom--inline input[type="search"] { border: 1px solid var(--line-strong); border-right: 0; }
.search-bottom--inline input[type="search"] { border-radius: var(--r) 0 0 var(--r); padding: .65em .9em; }
.search-bottom--inline button[type="submit"] { border-radius: 0 var(--r) var(--r) 0; }
.search-bottom--inline .search-close { display: none; }
@media (min-width: 922px) {
.search-bottom--inline { display: none; }
}
/* Histórico de buscas (`HeaderSearch.attachHistoryDropdown`). Sem estas
regras os botões do histórico fluem INLINE dentro do form. */
.search-select-box { position: relative; }
.select-box-menu {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--card);
color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .45);
overflow: hidden;
z-index: 40;
}
.search-select-box-open .select-box-menu { display: block; }
.select-box-option {
display: flex;
align-items: center;
gap: .6rem;
width: 100%;
padding: .65rem 1rem;
text-align: left;
font-size: var(--step-0);
transition: background-color var(--fast);
}
.select-box-option:hover { background: var(--bg); }
.select-box-option .option-icon { color: var(--ink-mute); }
.select-box-option .option-body { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-box-footer {
display: flex;
align-items: center;
gap: .5em;
width: 100%;
padding: .65rem 1rem;
border-top: 1px solid var(--line);
font-size: var(--step--1);
color: var(--ink-mute);
transition: color var(--fast), background-color var(--fast);
}
.select-box-footer:hover { background: var(--bg); color: var(--err); }
/* =================================================
* 05. Menu do celular
* ================================================= */
.at-drawer,
.off-canvas {
position: fixed;
inset: 0 auto 0 0;
width: min(88vw, 360px);
background: var(--card);
transform: translateX(-102%);
transition: transform var(--slow);
z-index: var(--z-drawer);
overflow-y: auto;
padding-bottom: 3rem;
}
.site.showmenu .at-drawer,
.site.showmenu .off-canvas { transform: none; }
.at-overlay,
.overlay {
position: fixed;
inset: 0;
background: rgba(18, 15, 14, .55);
opacity: 0;
visibility: hidden;
transition: opacity var(--fast), visibility var(--fast);
z-index: var(--z-overlay);
}
.site.showmenu .at-overlay,
.site.showmenu .overlay { opacity: 1; visibility: visible; }
.at-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem var(--pad);
background: var(--secondary-dark-color);
color: var(--on-brand);
font-weight: 800;
}
.at-drawer__head .t-close { font-size: 1.4rem; color: inherit; margin: 0; }
.t-close { display: inline-flex; }
/* O clone do menu leva as regras da barra junto (§6.14): dentro do drawer
a lista é vertical e o mega vira acordeão estático. */
.off-canvas nav { padding: .5rem var(--pad) 0; }
.off-canvas .at-nav { display: block; }
.off-canvas .at-nav > li > a {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 0;
padding: .9rem 0;
border-bottom: 1px solid var(--line);
border-left: 0;
white-space: normal;
}
.off-canvas .has-child .icon-small {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
min-height: 38px;
margin-right: -8px;
cursor: pointer;
}
.off-canvas .at-mega { display: none; position: static; border: 0; box-shadow: none; }
.off-canvas .has-child.expand .at-mega {
display: block;
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
}
.off-canvas .at-mega .container {
display: block;
padding: .25rem 0 .75rem .9rem;
}
.off-canvas .at-mega__cols { display: block; }
.off-canvas .at-mega__link { display: flex; min-height: 38px; }
.off-canvas .at-mega__card { display: none; }
/* A faixa de anúncio clonada vira a lista de conta no rodapé do drawer. */
.off-canvas .thetop-nav { padding: 1rem var(--pad) 0; }
.off-canvas .thetop-nav .wrapper { display: block !important; }
.off-canvas .thetop-nav .at-announce__msg,
.off-canvas .thetop-nav .at-announce__cta { display: none; }
.off-canvas .thetop-nav .at-announce__links { display: flex; flex-direction: column; margin: 0; }
.off-canvas .thetop-nav a {
display: flex;
align-items: center;
min-height: 44px;
color: var(--ink);
font-weight: 700;
border-bottom: 1px solid var(--line);
opacity: 1;
}
/* =================================================
* 06. Banner
* ================================================= */
.at-hero { position: relative; background: var(--bg-sunk); }
.at-hero__slide {
position: relative;
height: var(--at-hero-h, 46vh);
min-height: 300px;
max-height: 620px;
}
.at-hero--medio { --at-hero-h: 46vh; }
.at-hero--alto { --at-hero-h: 58vh; }
.at-hero--cheio { --at-hero-h: calc(100vh - 190px); }
.at-hero__image { position: absolute; inset: 0; }
.at-hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* Véu LATERAL e curto: a foto de campanha de loja de material costuma ter
produto no centro e à direita, e escurecer o rodapé inteiro apagaria
justamente isso. */
.at-hero__text {
position: relative;
z-index: 1;
height: 100%;
display: flex;
align-items: center;
background: linear-gradient(to right, rgba(16, 13, 12, .68) 0%, rgba(16, 13, 12, .38) 38%, rgba(16, 13, 12, 0) 68%);
}
.at-hero__box {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .9rem;
max-width: 30rem;
color: #fff;
}
/* Sem chip: na referência o texto de apoio do banner é tipografia pura
sobre a foto. O chip colorido da primeira versão competia com o CTA. */
.at-hero__kicker {
display: inline-flex;
font-size: var(--step--1);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255, 255, 255, .85);
}
.at-hero__headline {
font-size: var(--step-4);
font-weight: 800;
line-height: 1.05;
text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}
.at-hero__sub { font-size: var(--step-1); opacity: .92; max-width: 26rem; }
.at-hero__dots {
--swiper-pagination-color: #fff;
--swiper-pagination-bullet-inactive-color: #fff;
--swiper-pagination-bullet-inactive-opacity: .45;
bottom: 1rem !important;
}
/* =================================================
* 07. Seções da home
* ================================================= */
main > div,
main > section { margin-bottom: var(--gap-3); }
main > .slider { margin-bottom: var(--gap-3); }
.sectop {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--gap);
margin-bottom: 1rem;
}
.sectop h2 { font-size: var(--step-2); }
.sectop .circle { display: none; }
.sectop .view-all,
.view-all {
display: inline-flex;
align-items: center;
gap: .3em;
min-height: 30px;
font-size: var(--step--1);
font-weight: 700;
color: var(--brand-text);
white-space: nowrap;
}
.view-all:hover { text-decoration: underline; text-underline-offset: 3px; }
/* A prateleira: células brancas separadas por um fio, dentro de uma
moldura única. É o que dá densidade sem virar uma sopa de cartões
soltos.
O fio vem de `box-shadow` em cada célula, e não de `gap` sobre um fundo
colorido: a última linha quase nunca fecha (10 produtos numa grade de 4)
e, com o fundo colorido, o espaço que sobra virava um bloco cinza do
tamanho de dois cards — parecia buraco de carregamento. Com sombra, o
que sobra é branco e some. `overflow: hidden` na moldura corta os fios
das bordas externas. */
.products.main,
.at-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
}
.products.main > *,
.at-grid > * { box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
@media (min-width: 700px) {
.products.main,
.at-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.products.main,
.at-grid { grid-template-columns: repeat(var(--at-grid-colunas, 4), minmax(0, 1fr)); }
}
/* Estado vazio da busca ocupa a moldura inteira. */
.search-empty {
grid-column: 1 / -1;
background: var(--card);
padding: 3rem 1.5rem;
text-align: center;
color: var(--ink-mute);
}
.search-empty i { font-size: 2rem; display: block; margin-bottom: .75rem; }
.search-empty h3 { color: var(--ink); margin-bottom: .35rem; }
/* --- Fabricantes --- */
.at-brands {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
}
@media (min-width: 700px) {
.at-brands { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.at-brands .item { background: var(--card); box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.at-brands .item a {
display: flex;
align-items: center;
justify-content: center;
min-height: 86px;
padding: 1rem;
filter: grayscale(1);
opacity: .7;
transition: filter var(--fast), opacity var(--fast);
}
.at-brands .item a:hover { filter: none; opacity: 1; }
.at-brands img { max-height: 46px; width: auto; object-fit: contain; }
/* --- Cartazes de setor --- */
.at-posters {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
margin-bottom: var(--gap-3);
}
@media (min-width: 768px) {
.at-posters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.at-poster {
position: relative;
display: block;
aspect-ratio: 16 / 9;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--bg-sunk);
}
.at-poster__bg { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.at-poster:hover .at-poster__bg { transform: scale(1.05); }
.at-poster__body {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: .7rem;
padding: 1.25rem;
background: linear-gradient(to top, rgba(16, 13, 12, .7) 10%, rgba(16, 13, 12, .1) 70%);
color: #fff;
}
.at-poster__body strong { font-size: var(--step-2); font-weight: 800; line-height: 1.1; }
.at-poster__cta {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 1.1em;
background: #fff;
color: var(--ink);
border-radius: var(--r);
font-size: var(--step--1);
font-weight: 700;
transition: background-color var(--fast), color var(--fast);
}
.at-poster:hover .at-poster__cta { background: var(--primary-color); color: var(--on-primary, #fff); }
/* --- Fita de círculos ---
Flex e não grade: a loja pode ter três setores ou vinte, e uma grade de
oito colunas com três itens deixa dois terços da linha vazios. Aqui os
medalhões têm largura própria e a fita centraliza o que houver. */
.at-circles {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.25rem;
}
.at-circles li { flex: 0 1 clamp(84px, 12vw, 132px); }
.at-circles a {
display: flex;
flex-direction: column;
align-items: center;
gap: .6rem;
text-align: center;
}
.at-circles__media {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
background: var(--bg-sunk);
border: 1px solid var(--line);
transition: border-color var(--fast), transform var(--fast);
}
.at-circles__media img { width: 100%; height: 100%; object-fit: cover; }
.at-circles a:hover .at-circles__media { border-color: var(--primary-color); transform: translateY(-2px); }
.at-circles__name { font-size: var(--step--1); font-weight: 700; line-height: 1.25; }
/* --- "Chegou no estoque": painel escuro dentro da própria prateleira --- */
.at-hot__panel {
position: relative;
grid-column: span 2;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.75rem;
background: var(--secondary-dark-color);
color: var(--on-brand);
overflow: hidden;
}
/* `z-index` obrigatório, não decorativo: a cortina do painel com foto é um
`::after` posicionado, e sem isto ela pinta DEPOIS do texto — o título
saía lavado por cima da própria foto que deveria destacá-lo. */
.at-hot__texto {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .8rem;
}
.at-hot__panel h2 { font-size: var(--step-2); color: inherit; }
.at-hot__panel p { font-size: var(--step-0); opacity: .78; max-width: 34ch; }
/* Foto opcional do painel, informada pelo revendedor no editor de seções.
Ela entra como FUNDO e não como imagem ao lado: o painel é uma célula da
mesma grade dos produtos, e abrir uma segunda coluna dentro dele
desmontaria o alinhamento da linha inteira.
A cortina escura não é enfeite — é o que garante o contraste do texto
sobre uma foto que a loja escolhe e nós não vemos. Sem ela, uma foto
clara apaga o título. */
.at-hot__foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.at-hot__panel--foto::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20, 17, 16, .45), rgba(20, 17, 16, .82));
}
.at-hot__panel--foto p { opacity: .92; }
/* Rede de segurança: sem o style.css por baixo, imagem sem regra assume o
tamanho natural do arquivo (§6.1 — a home do `moda` abriu com 36.000px). */
.products img,
.banners img,
.brands img { max-width: 100%; height: auto; }
/* =================================================
* 08. Célula de catálogo
* ================================================= */
.products.main .item,
.at-card {
display: flex;
flex-direction: column;
position: relative;
background: var(--card);
padding: .85rem;
transition: box-shadow var(--fast);
}
.at-card:hover { box-shadow: 0 0 0 1px var(--line-strong) inset; z-index: 1; }
.at-card__media,
.products.main .media {
position: relative;
aspect-ratio: var(--at-ratio-foto, 1 / 1);
background: var(--card);
overflow: hidden;
margin-bottom: .75rem;
}
.at-card__thumb,
.at-card__thumb a,
.products.main .thumbnail { display: block; width: 100%; height: 100%; }
/* `contain`: ferramenta e insumo chegam recortados em fundo branco;
`cover` amputaria cabo e bico. */
.at-card__thumb img,
.products.main .thumbnail img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform .4s var(--ease);
}
.at-card:hover .at-card__thumb img { transform: scale(1.05); }
.at-card__tags {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .3rem;
z-index: 2;
}
/* Sempre visível — metade do tráfego não tem hover. Escopado no card:
`.favorite-btn` também é o link "Salvar na lista" da ficha de produto, e
posicionar absoluto sem escopo arrancaria aquele link do lugar (§6.6). */
.at-card__fav {
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 999px;
background: rgba(255, 255, 255, .9);
color: var(--ink-mute);
font-size: 1.1rem;
cursor: pointer;
transition: background-color var(--fast), color var(--fast);
}
.at-card__fav:hover,
.at-card__fav.is-active {
background: var(--primary-color);
color: var(--on-primary, #fff);
}
.at-card__body,
.products.main .content {
display: flex;
flex-direction: column;
gap: .3rem;
flex: 1;
}
/* Código do produto, onde a referência põe o fabricante. */
.at-card__ref {
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink-mute);
}
.at-card__title,
.products.main .content h3 {
font-size: var(--step-0);
font-weight: 600;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.at-card__title a,
.products.main .content h3 a { display: block; padding-block: 1px; }
.at-card__title a:hover { color: var(--brand-text); }
.at-card__rating {
display: flex;
align-items: center;
gap: .4rem;
font-size: var(--step--1);
color: var(--ink-mute);
}
/* O preço é o elemento mais forte da célula — é ele que carrega a cor da
loja em toda a vitrine. */
.at-card__price,
.products.main .price {
display: flex;
align-items: baseline;
gap: .5rem;
flex-wrap: wrap;
margin-top: .1rem;
}
.at-card__price .current,
.products .price .current {
font-size: 1.3rem;
font-weight: 800;
color: var(--brand-text);
line-height: 1.2;
}
.at-card__price .normal,
.products .price .normal {
text-decoration: line-through;
color: var(--ink-mute);
font-size: var(--step--1);
}
.login-required { font-size: var(--step--1); font-weight: 700; color: var(--ink-mute); }
.at-card__summary { font-size: var(--step--1); color: var(--ink-mute); }
.stock-danger { color: var(--err); }
.free-shipping { color: var(--ok); }
.cashback-badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
padding: .3em .55em;
border-radius: var(--r);
background: var(--bg);
color: var(--ink-soft);
}
.mini-links li a { display: inline-flex; align-items: center; min-height: 28px; }
.stars { display: inline-flex; gap: 2px; color: var(--low); }
/* Comprar direto da grade: em compra por volume, esconder o controle
atrás de :hover cobraria um clique a mais em cada item. */
.purchase-section,
.at-card__buy {
display: flex;
align-items: stretch; /* stretch, não center: os dois blocos passam a
ter a MESMA altura em vez de o stepper, mais
alto, empurrar o card. */
gap: .4rem;
margin-top: auto;
padding-top: .75rem;
}
/* No card o stepper é COADJUVANTE do "Adicionar" — herdando o tamanho da
ficha de produto (botões de 2.4em em --step-1) ele ficava com quase
metade da largura e mais alto que o CTA. Aqui ele encolhe: dígito no
corpo do card, alvo de toque ainda em 32px. */
.at-card__buy .purchase-quantity { flex: 0 0 auto; }
.at-card__buy .purchase-quantity-btn {
width: auto;
min-width: 28px;
padding: 0;
font-size: var(--step--1);
line-height: 1;
}
.at-card__buy .purchase-quantity-input {
width: 2em;
padding: .35em 0;
font-size: var(--step--1);
}
.at-card__buy .purchase-btn {
flex: 1 1 auto;
/* `min-width: 0` deixava o botão encolher abaixo do próprio rótulo, e
como o `.at-btn` base é `white-space: nowrap`, "Adicionar" saía
cortado no meio (relatado com print no celular, 2026-08-11). Com
`fit-content` quem cede espaço é o stepper, que tem o que ceder. */
min-width: fit-content;
padding: .55em .5em;
font-size: var(--step--1);
}
.purchase-section .purchase-quantity { flex: none; }
.purchase-section .purchase-quantity input { width: 2.2em; }
.purchase-section .purchase-btn { flex: 1; min-width: 0; padding: .6em .5em; font-size: var(--step--1); }
/* Abaixo de 560px a grade vira 2 colunas e o card fica com ~145px úteis:
stepper e botão lado a lado não cabem sem cortar um dos dois. Empilha —
botão inteiro embaixo, que é o alvo que importa.
*
* Este bloco fica DEPOIS de `.purchase-section .purchase-btn` de propósito:
* os dois seletores têm a mesma especificidade, então quem vem por último
* ganha. Na primeira tentativa ele estava acima, e o `flex: 1; min-width: 0`
* daquela linha desfazia o empilhamento — o rótulo continuava cortado. */
@media (max-width: 559px) {
.at-card__buy { flex-wrap: wrap; }
.at-card__buy .purchase-quantity { flex: 1 1 100%; justify-content: center; }
.at-card__buy .purchase-btn { flex: 1 1 100%; min-width: 0; }
}
/* =================================================
* 09. Página de produto
* ================================================= */
.at-pdp { padding-top: 1rem; }
.breadcrumb ul { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.breadcrumb li + li::before { content: '›'; margin-right: .45rem; color: var(--ink-mute); }
.breadcrumb,
.breadcrumb a { font-size: var(--step--1); color: var(--ink-mute); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 28px; }
.breadcrumb a:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.at-pdp__grid {
display: grid;
/* minmax(0,1fr): a trilha `1fr` não encolhe abaixo do mínimo do
conteúdo, e a página abria com 440px numa tela de 390 (achado pela
varredura de overflow). */
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
align-items: start;
margin-top: .75rem;
}
@media (min-width: 922px) {
.at-pdp__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.at-pdp__right { position: sticky; top: 64px; }
}
.at-pdp__left { display: grid; gap: 1rem; min-width: 0; }
.at-pdp__right { min-width: 0; }
/* --- Galeria: fita vertical + quadro --- */
.at-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
@media (min-width: 560px) {
.at-gallery { grid-template-columns: 74px minmax(0, 1fr); }
}
.at-gallery__rail {
display: flex;
flex-direction: row;
gap: .5rem;
overflow-x: auto;
scrollbar-width: none;
order: 2;
}
.at-gallery__rail::-webkit-scrollbar { display: none; }
@media (min-width: 560px) {
.at-gallery__rail {
flex-direction: column;
overflow-x: visible;
overflow-y: auto;
max-height: 520px;
order: 0;
}
}
.at-shot {
flex: none;
width: 68px;
aspect-ratio: 1 / 1;
padding: 4px;
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--card);
cursor: pointer;
transition: border-color var(--fast);
}
.at-shot img { width: 100%; height: 100%; object-fit: contain; }
.at-shot:hover { border-color: var(--line-strong); }
.at-shot.is-active { border-color: var(--primary-color); box-shadow: inset 0 0 0 1px var(--primary-color); }
.at-gallery__main { position: relative; min-width: 0; }
.at-gallery__tag { position: absolute; top: 0; left: 0; z-index: 2; }
/* Setas do carrossel: medalhão branco com fio, como o navegador de
vitrine da referência. Aparecem por cima do quadro, no meio. */
.at-gallery__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255, 255, 255, .94);
color: var(--ink-soft);
font-size: 1.25rem;
box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35);
transition: color var(--fast), border-color var(--fast), transform var(--fast);
}
.at-gallery__arrow:hover { color: var(--brand-text); border-color: var(--brand-text); }
.at-gallery__arrow--prev { left: .6rem; }
.at-gallery__arrow--next { right: .6rem; }
.at-gallery__arrow:active { transform: translateY(-50%) scale(.94); }
.at-gallery__frame { position: relative; }
.at-frame { display: none; }
/* A troca de foto pela fita entra com fade curto — sem ele o quadro
pisca seco a cada hover na miniatura. */
.at-frame.is-active { display: block; animation: at-fade .22s var(--ease); }
.at-frame a { display: block; }
.at-frame img {
width: 100%;
aspect-ratio: var(--at-ratio-foto, 1 / 1);
object-fit: contain;
}
.at-gallery__hint {
display: flex;
align-items: center;
justify-content: center;
gap: .4em;
margin-top: .5rem;
font-size: var(--step--1);
color: var(--ink-mute);
}
/* --- Ficha de compra --- */
.at-pdp__title { font-size: var(--step-3); margin-bottom: .5rem; }
.at-pdp__ident {
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
font-size: var(--step--1);
color: var(--ink-mute);
}
.at-pdp__brand { font-weight: 800; letter-spacing: .04em; color: var(--brand-text); }
.at-pdp__sku::before { content: '|'; margin-right: .5rem; color: var(--line-strong); }
.at-pdp__ident .at-pdp__brand:only-child + .at-pdp__sku::before,
.at-pdp__ident > .at-pdp__sku:first-child::before { content: none; margin: 0; }
.at-pdp .rating {
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
margin-top: .5rem;
font-size: var(--step--1);
color: var(--ink-mute);
}
.at-pdp .rating a,
.at-pdp .add-review,
.reviews a { display: inline-flex; align-items: center; min-height: 28px; }
/* Preço com rótulo, como na referência ("Price: $35.00"). */
.at-pdp__pricebox {
display: flex;
align-items: baseline;
gap: .6rem;
flex-wrap: wrap;
margin: 1rem 0 .25rem;
padding-top: 1rem;
border-top: 1px solid var(--line);
}
.at-pdp__pricelabel { font-size: var(--step-0); font-weight: 700; color: var(--ink-soft); }
.at-pdp__pricebox .price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.at-pdp__pricebox .price .current {
font-size: var(--step-3);
font-weight: 800;
color: var(--brand-text);
line-height: 1.1;
}
.at-pdp__pricebox .price .normal { text-decoration: line-through; color: var(--ink-mute); }
.at-pdp__pricebox .price .discount { display: none; }
.cashback-badge.inline { margin-top: .5rem; }
/* Disponibilidade: o mesmo ponto colorido do card. O partial
`stock-sku` do clássico não é renderizado nesta ficha (ver buybox.php) —
estas regras cobrem o bloco que o tema imprime no lugar dele, e ainda
assim tratam o `.stock-sku` caso outra página o traga. */
/* Loja que esconde estoque e não tem frete grátis deixa a linha vazia — e
uma linha vazia com margem abre um buraco no meio da ficha. */
.at-pdp__avail:empty { display: none; }
.at-pdp__avail,
.at-pdp .stock-sku {
display: flex;
align-items: center;
gap: .6rem;
flex-wrap: wrap;
margin: .75rem 0;
font-size: var(--step--1);
color: var(--ink-mute);
}
.at-pdp .stock-sku .available {
display: inline-flex;
align-items: center;
gap: .45em;
font-weight: 700;
color: var(--ok);
}
.at-pdp .stock-sku .available::before {
content: '';
width: 7px;
height: 7px;
border-radius: 999px;
background: currentColor;
}
.units { margin: .5rem 0; font-size: var(--step--1); color: var(--ink-soft); }
/* Contagem da oferta (`ul#countdown > li` — Countdown.js só escreve o
número; o rótulo vem por ::after). */
.offer {
display: flex;
align-items: center;
gap: .9rem;
flex-wrap: wrap;
margin: 1rem 0;
padding: .75rem .9rem;
border-radius: var(--r);
background: color-mix(in srgb, var(--primary-color) 8%, var(--card));
}
.offer p { font-size: var(--step--1); font-weight: 700; color: var(--ink-soft); }
#countdown { display: inline-flex; gap: .35rem; }
#countdown li {
min-width: 3em;
padding: .35em .4em .3em;
border-radius: var(--r);
background: var(--secondary-dark-color);
color: var(--on-brand);
text-align: center;
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1.15;
}
#countdown li::after {
display: block;
font-size: 9px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
opacity: .7;
}
#days::after { content: 'dias'; }
#hours::after { content: 'horas'; }
#minutes::after { content: 'min'; }
#seconds::after { content: 'seg'; }
/* --- Mosaico de variação --- */
.at-swatches { margin: 1.1rem 0; }
.at-swatches__label { font-size: var(--step--1); font-weight: 700; color: var(--ink-soft); margin-bottom: .5rem; }
.at-swatches__grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.at-swatch {
position: relative;
display: inline-flex;
align-items: center;
gap: .5em;
margin: 0;
padding: .45rem .7rem .45rem .45rem;
border: 1px solid var(--line-strong);
border-radius: var(--r);
background: var(--card);
font-size: var(--step--1);
font-weight: 600;
color: var(--ink);
text-transform: none;
cursor: pointer;
transition: border-color var(--fast), box-shadow var(--fast);
}
.at-swatch:not(:has(.at-swatch__thumb)) { padding-left: .8rem; }
.at-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.at-swatch__thumb {
width: 34px;
height: 34px;
flex: none;
border-radius: 3px;
overflow: hidden;
background: var(--bg);
}
.at-swatch__thumb img { width: 100%; height: 100%; object-fit: cover; }
.at-swatch__txt { display: flex; flex-direction: column; line-height: 1.2; }
.at-swatch:hover { border-color: var(--ink-soft); }
.at-swatch:has(input:checked) {
border-color: var(--primary-color);
box-shadow: inset 0 0 0 1px var(--primary-color);
}
/* Sem estoque é AVISO, não bloqueio: loja que não quebra estoque por
variação manda zero em tudo, e travar aqui deixaria essas lojas sem
nenhuma opção clicável só neste tema. */
.at-swatch.is-out { color: var(--ink-mute); background: var(--bg); }
.at-swatch__out { font-size: 10px; font-weight: 700; color: var(--low); }
/* --- Ação de compra --- */
.at-actions { margin-top: 1.25rem; }
.at-actions__row { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; }
.at-actions .qty-control { flex: none; }
.at-actions .button-cart { flex: 1 1 12rem; }
.at-actions .button-cart .primary-button { width: 100%; }
.at-actions .at-btn--dark { flex: 1 1 9rem; }
.at-share { margin-top: 1rem; }
.at-share ul { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.at-share a {
display: inline-flex;
align-items: center;
gap: .45em;
min-height: 34px;
font-size: var(--step--1);
font-weight: 700;
color: var(--ink-soft);
cursor: pointer;
}
.at-share a:hover { color: var(--brand-text); }
.at-share .icon-large { display: inline-flex; font-size: 1.15rem; }
/* --- Kit e sugestões --- */
.buy-together,
.upsell,
.quantity-tiers {
margin-top: 1.1rem;
padding: 1rem;
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--bg);
}
.buy-together-title,
.upsell-title,
.quantity-tiers-title { font-size: var(--step--1); font-weight: 800; margin-bottom: .75rem; }
/* Trilho horizontal, sem quebra: com `flex-wrap` o "+" separador fica
órfão na borda e o card seguinte cai sozinho na linha de baixo. */
.buy-together-items {
display: flex;
align-items: flex-start;
gap: .5rem;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: .25rem;
scrollbar-width: thin;
}
.buy-together-plus { flex: none; align-self: center; color: var(--ink-mute); }
.buy-together-card { flex: none; width: 88px; }
.buy-together-card .thumbnail,
.upsell-card .thumbnail,
.cart-upsell .thumbnail {
aspect-ratio: 1 / 1;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
}
.buy-together-card .thumbnail img,
.upsell-card .thumbnail img,
.cart-upsell .thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.buy-together-name {
font-size: var(--step--1);
line-height: 1.3;
margin-top: .35rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.buy-together-price { font-size: var(--step--1); font-weight: 800; color: var(--brand-text); }
.buy-together-price .normal {
font-weight: 400;
color: var(--ink-mute);
text-decoration: line-through;
margin-left: .35em;
}
.buy-together-footer { display: flex; flex-direction: column; gap: .6rem; margin-top: .9rem; }
.upsell-items { display: grid; gap: .75rem; }
.upsell-card { display: grid; grid-template-columns: 52px 1fr auto; gap: .7rem; align-items: center; }
.quantity-tiers li {
display: flex;
justify-content: space-between;
padding: .35rem 0;
border-bottom: 1px solid var(--line);
font-size: var(--step--1);
}
.quantity-tiers li:last-child { border-bottom: 0; }
/* --- Acordeão de descrição e avaliações --- */
.at-panel--info .collapse .has-child > a {
display: block;
padding: .9rem 0 .9rem 1.6rem;
border-bottom: 1px solid var(--line);
font-weight: 700;
position: relative;
}
.collapse .has-child > a::before {
content: '+';
position: absolute;
left: 0;
font-size: var(--step-1);
line-height: 1.3;
color: var(--brand-text);
font-weight: 800;
}
.collapse .expand > a::before { content: '–'; }
.collapse .content { display: none; padding: 1rem 0 1.25rem; }
.collapse .expand > .content,
.collapse .expand > ul.content { display: block; }
.collapse .content li {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: .4rem 0;
border-bottom: 1px solid var(--line);
}
.collapse table th,
.collapse table td { padding: .5rem .75rem; border: 1px solid var(--line); text-align: left; font-size: var(--step--1); }
.reviews h4 { margin-bottom: .9rem; }
.reviews .review-block { display: block; }
.review-block-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--line);
}
.review-block-head .flexitem { gap: .6rem; }
.rate-sum { font-size: var(--step-2); font-weight: 800; color: var(--brand-text); }
.review-block-body li { display: block; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.review-block-body li:last-child { border-bottom: 0; }
.review-block-body .review-form p { margin: 0; }
.review-block-body .person { font-weight: 700; }
#review-form { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
#review-form h4 { margin-bottom: .4rem; }
.review-form p { margin-bottom: .9rem; }
.review-form label { margin-bottom: .35em; }
.review-form textarea { min-height: 7rem; }
.review-form .rating { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rate-this { display: inline-flex; flex-direction: row-reverse; gap: .25rem; }
.rate-this input { display: none; }
.rate-this label { font-size: 1.3rem; color: var(--line-strong); cursor: pointer; margin: 0; }
.rate-this input:checked ~ label,
.rate-this label:hover,
.rate-this label:hover ~ label { color: var(--low); }
/* --- Compra protegida --- */
.at-safety h3 {
display: flex;
align-items: center;
gap: .5em;
font-size: var(--step-1);
margin-bottom: .9rem;
}
.at-safety h3 svg { font-size: 1.3rem; color: var(--ok); }
.at-safety li {
display: flex;
gap: .6rem;
padding: .45rem 0;
font-size: var(--step--1);
color: var(--ink-soft);
}
.at-safety li::before { content: '•'; color: var(--brand-text); font-weight: 800; }
.page-title { margin: .75rem 0 1.25rem; }
.page-title h1 { font-size: var(--step-3); }
/* =================================================
* 10. Listagem e filtro
* ================================================= */
.at-plp { padding-top: 1rem; }
.at-plp__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: .5rem; }
@media (min-width: 922px) {
.at-plp__grid { grid-template-columns: 262px minmax(0, 1fr); }
}
.at-plp__filters { min-width: 0; }
.at-plp__results { min-width: 0; }
.at-plp__asidetitle {
font-size: var(--step-1);
padding-bottom: .75rem;
margin-bottom: .5rem;
border-bottom: 1px solid var(--line);
}
/* Filters.js põe `.show` no `.filter`, não no aside (§6.5). No celular
ele vira folha subindo do rodapé. */
.filter { display: none; }
.filter.show {
display: grid;
gap: 1rem;
position: fixed;
inset: auto 0 0 0;
max-height: 80vh;
overflow-y: auto;
z-index: var(--z-drawer);
padding: 1rem var(--pad) 2rem;
background: var(--bg);
border-top: 1px solid var(--line-strong);
border-radius: var(--r-lg) var(--r-lg) 0 0;
}
@media (min-width: 922px) {
.filter { display: grid; gap: 1rem; }
.filter.show { position: static; max-height: none; padding: 0; background: none; border: 0; }
}
.filter-block { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.filter-block:first-of-type { padding-top: 0; }
.filter-block:last-child { border-bottom: 0; padding-bottom: 0; }
.filter-block h4 { font-weight: 800; margin-bottom: .5rem; }
a.filter-trigger {
display: inline-flex;
align-items: center;
gap: .5em;
min-height: 40px;
padding: 0 1em;
border: 1px solid var(--line-strong);
border-radius: var(--r);
background: var(--card);
font-size: var(--step--1);
font-weight: 700;
margin: 0;
}
/* A regra vale pelo CONTÊINER (`.filter-block li`), não pela classe da
linha: a oferta é monolito do clássico e emite o mesmo trio
input+label+count sem nenhuma classe — com o seletor preso ao
`.at-filter__row` do explore, lá os três empilhavam um por linha. */
.filter-block ul li,
.at-filter__row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: .5rem;
padding: .22rem 0;
}
.filter-block li input[type="checkbox"] { width: auto; accent-color: var(--primary-color); }
.filter-block li label {
display: flex;
align-items: center;
min-height: 26px;
margin: 0;
font-size: var(--step-0);
font-weight: 400;
color: var(--ink);
cursor: pointer;
}
.filter-block li .checked { display: none; }
.filter-block li .count { font-size: var(--step--1); color: var(--ink-mute); }
.filter-block li input:checked + label { font-weight: 800; color: var(--brand-text); }
.at-filter__empty { font-size: var(--step--1); color: var(--ink-mute); }
.byprice .range-track { padding: .5rem 0; }
.byprice input[type="range"] { width: 100%; padding: 0; border: 0; accent-color: var(--primary-color); }
.byprice input[type="range"]:focus { box-shadow: none; }
.price-range { display: flex; gap: .4rem; font-size: var(--step--1); font-weight: 700; color: var(--ink-soft); }
.at-plp__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.25rem;
border-bottom: 1px solid var(--line);
}
.at-plp__head h1 { font-size: var(--step-2); }
.at-plp__bar {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding: .7rem 1.25rem;
background: var(--bg);
border-bottom: 1px solid var(--line);
}
.at-plp__chips { flex: 1; min-width: 0; }
.at-plp__chips #selectedFilters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.at-plp__chips h4 { font-size: var(--step--1); font-weight: 700; color: var(--ink-mute); }
#selectedFiltersList { display: flex; gap: .4rem; flex-wrap: wrap; }
#selectedFiltersList > * {
display: inline-flex;
align-items: center;
gap: .4em;
padding: .25em .65em;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: var(--card);
font-size: var(--step--1);
font-weight: 600;
}
.at-plp__sorts { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
/* `.item-perpage` é um rótulo ESTÁTICO do markup compartilhado ("10 itens
por página") que repete, sem ser clicável, o que o seletor ao lado já
diz e ainda controla. Dois controles idênticos lado a lado, um deles
morto, é pior que um. */
.at-plp__sorts .item-perpage { display: none; }
.item-sortir,
.item-perpage,
.item-options { position: relative; }
.item-sortir .label,
.item-perpage .label,
.item-options .label {
display: inline-flex;
align-items: center;
gap: .35em;
min-height: 32px;
margin: 0;
font-size: var(--step--1);
font-weight: 700;
color: var(--ink);
cursor: pointer;
}
.item-sortir ul,
.item-options ul {
display: none;
position: absolute;
top: calc(100% + .4rem);
right: 0;
min-width: 168px;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: 0 14px 24px -18px rgba(0, 0, 0, .35);
overflow: hidden;
z-index: 20;
}
.item-sortir.open ul,
.item-options.open ul,
.item-sortir:hover ul,
.item-options:hover ul { display: block; }
.item-sortir li,
.item-options li { padding: .55rem .9rem; font-size: var(--step--1); cursor: pointer; }
.item-sortir li:hover,
.item-options li:hover,
.item-sortir li.active { background: var(--bg); color: var(--brand-text); }
/* Dentro do painel a grade perde a moldura própria: quem molda é o painel. */
.at-plp__results .products.main { border: 0; border-radius: 0; }
/* --- 10b. Oferta: o miolo é MONOLITO do clássico (não passa pelo View),
então o tema veste o markup dele — `.holder` com `.row.sidebar` +
`.section`, `.cat-head` com trilha/título/chips/controles, e a grade
de categorias `.product-categories` no rodapé. Sem estas regras a
página renderizava com a lateral e o cabeçalho crus, fora da gramática
de painéis do tema. --- */
.single-category { padding-top: 1rem; }
.single-category .holder {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
@media (min-width: 922px) {
.single-category .holder { grid-template-columns: 262px minmax(0, 1fr); }
}
.single-category .row.sidebar { min-width: 0; }
@media (min-width: 922px) {
.single-category .row.sidebar .filter,
.single-category .row.sidebar .filter.show {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 1.25rem;
}
}
.single-category .section {
min-width: 0;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
}
.single-category .section .products.main { border: 0; border-radius: 0; }
.single-category .section .load-more { padding: 1.25rem; margin: 0; }
.cat-head { border-bottom: 1px solid var(--line); }
.cat-head .breadcrumb { padding: 1rem 1.25rem 0; }
.cat-head .page-title { margin: 0; padding: .25rem 1.25rem .9rem; }
.cat-head .page-title h1 { font-size: var(--step-2); }
.cat-head .cat-description { padding: 0 1.25rem .75rem; }
#selectedFilters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
#selectedFilters h4 { font-size: var(--step--1); font-weight: 700; color: var(--ink-mute); }
.cat-head .cat-navigation {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1.25rem;
flex-wrap: wrap;
padding: .7rem 1.25rem;
background: var(--bg);
border-top: 1px solid var(--line);
}
.cat-head .item-filter { margin-right: auto; }
.cat-head .item-perpage { display: none; }
/* Grade de categorias do rodapé da oferta: cartões brancos com a foto do
setor e a lista de linhas. */
.product-categories {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
@media (min-width: 700px) {
.product-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.product-categories .row { min-width: 0; }
.product-categories .item {
height: 100%;
display: flex;
flex-direction: column;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
}
.product-categories .image { aspect-ratio: 16 / 7; background: var(--bg-sunk); }
.product-categories .image img { width: 100%; height: 100%; object-fit: cover; }
.product-categories .content { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.25rem 1.25rem; }
.product-categories .content h4 { font-size: var(--step-1); margin-bottom: .5rem; }
.product-categories .content li a {
display: inline-flex;
align-items: center;
min-height: 30px;
color: var(--ink-soft);
}
.product-categories .content li a:hover { color: var(--brand-text); }
.product-categories .second-links { margin-top: auto; padding-top: .75rem; }
.load-more { display: flex; justify-content: center; margin-top: 1.25rem; }
/* A paginação é montada por `ProductController::renderProductCards`:
`.pagination > button.btn1 + ul > li.link/.ellipsis + button.btn2` — não
há `` nenhum, e regra baseada em `li a` não casa com nada. */
.pagination { display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.pagination ul { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; }
.pagination li.link,
.pagination li a,
.pagination li span,
.pagination .btn1,
.pagination .btn2 {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 .5em;
border: 1px solid var(--line-strong);
border-radius: var(--r);
background: var(--card);
font-size: var(--step--1);
font-weight: 700;
cursor: pointer;
transition: background-color var(--fast), color var(--fast), border-color var(--fast);
}
.pagination li.ellipsis {
min-width: 24px;
border: 0;
background: none;
color: var(--ink-mute);
align-items: flex-end;
padding-bottom: .5rem;
}
.pagination li.active,
.pagination li.link:hover,
.pagination li.active a,
.pagination li a:hover,
.pagination .btn1:hover,
.pagination .btn2:hover {
background: var(--primary-color);
color: var(--on-primary, #fff);
border-color: var(--primary-color);
}
/* =================================================
* 11. Carrinho
* ================================================= */
.single-cart { padding-top: 1rem; }
.single-cart .breadcrumb,
.single-cart .page-title { padding-top: 0; }
.products.cart .flexwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 922px) {
.products.cart .flexwrap { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}
.products.cart .item { min-width: 0; }
/* A tabela é markup GERADO por CartTable.js (§6.3): o tema estiliza, não
troca — trocar exigiria mexer no JS, e isso mudaria o carrinho de todo
tema. Aqui ela vira um painel branco; no celular as células viram
blocos com rótulo por ::before. */
#cart-table {
display: block;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 0 1.25rem;
}
#cart-table thead,
#cart-table tbody { display: block; }
#cart-table tr {
display: grid;
grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1fr)) 40px;
align-items: center;
gap: 1rem;
}
#cart-table thead tr { padding: .9rem 0 .7rem; border-bottom: 1px solid var(--line-strong); }
#cart-table tbody tr { padding: 1rem 0; border-bottom: 1px solid var(--line); }
#cart-table tbody tr:last-child { border-bottom: 0; }
#cart-table th { text-align: left; font-size: var(--step--1); font-weight: 800; color: var(--ink-soft); }
#cart-table td { font-size: var(--step-0); font-weight: 600; }
#cart-table td.flexitem { display: flex; align-items: center; gap: .9rem; font-weight: 400; }
#cart-table .thumbnail {
flex: 0 0 64px;
width: 64px;
aspect-ratio: 1 / 1;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
}
#cart-table .thumbnail img { width: 100%; height: 100%; object-fit: contain; }
#cart-table .content strong { display: block; font-weight: 700; }
#cart-table .content strong a:hover { color: var(--brand-text); }
#cart-table .content p,
.item-unit-tag { font-size: var(--step--1); color: var(--ink-mute); font-weight: 400; }
.item-remove-grid { color: var(--ink-mute); font-size: 1.2rem; }
.item-remove-grid:hover { color: var(--err); }
/* Carrinho vazio, dois casos:
1. `CartTable.js` injeta `| ` — e a ` |
` do tema é
uma GRADE de cinco colunas, então o aviso saía espremido na primeira
delas com quatro colunas de nada ao lado.
2. Visitante sem carrinho nenhum: aquele JS não chega a rodar e o
`tbody` fica literalmente vazio — a página abria com o cabeçalho da
tabela e um vão de mil pixels embaixo. Cabeçalho some, aviso entra
por pseudo-elemento; é pele, não dado. */
#cart-table tr:has(.cart-empty) { display: block; }
#cart-table:has(tbody:empty) thead { display: none; }
#cart-table tbody:empty::after {
content: 'Seu carrinho está vazio.';
display: block;
padding: 3.5rem 1rem;
text-align: center;
font-weight: 600;
color: var(--ink-mute);
}
.cart-empty {
display: block;
padding: 3.5rem 1rem;
text-align: center;
font-weight: 600;
color: var(--ink-mute);
}
@media (max-width: 767px) {
#cart-table { padding: 0 1rem; }
#cart-table thead { display: none; }
#cart-table tr,
#cart-table tbody tr { grid-template-columns: 1fr auto; gap: .3rem 1rem; }
#cart-table td { display: block; padding: 0; border: 0; }
#cart-table td.flexitem { grid-column: 1 / -1; }
#cart-table td:nth-child(2)::before { content: 'Unitário '; color: var(--ink-mute); font-weight: 400; }
#cart-table td:nth-child(4)::before { content: 'Total '; color: var(--ink-mute); font-weight: 400; }
#cart-table td:nth-child(3) { grid-column: 1; margin-top: .5rem; }
#cart-table td:nth-child(5) { grid-row: 1; grid-column: 2; text-align: right; }
}
.cart-summary {
padding: 1.25rem;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
}
/* --- Barra de frete grátis ---
Aparece no topo do resumo do carrinho e dentro da gaveta do
mini-carrinho (`--mini`), montada por scripts/themes/atacado/carrinho.js
e minicart-frete.js. Só desenho: quem sabe o mínimo é o servidor e quem
sabe o subtotal são os módulos compartilhados de carrinho.
No "Aço" ela lê como um medidor de balcão: trilha funda de 8px no tom
rebaixado do tema, preenchimento na cor da marca e o valor que falta em
negrito -- é o número que o comprador de atacado usa para decidir se
sobe o pedido. */
.at-frete {
display: flex;
flex-direction: column;
gap: .5rem;
margin-bottom: 1.1rem;
}
.at-frete__texto {
display: flex;
align-items: center;
gap: .5rem;
font-size: var(--step--1);
color: var(--ink-soft);
}
.at-frete__texto strong { color: var(--brand-text); font-weight: 700; }
.at-frete__icone { font-size: 1.15rem; color: var(--brand-text); }
.at-frete--ganhou .at-frete__icone,
.at-frete--ganhou .at-frete__texto strong { color: var(--ok); }
.at-frete__trilha {
height: 8px;
background: var(--bg-sunk);
border: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
}
.at-frete__barra {
display: block;
height: 100%;
width: 0;
background: var(--primary-color);
transition: width var(--slow);
}
.at-frete--ganhou .at-frete__barra { background: var(--ok); }
/* Na gaveta, a barra fica acima do subtotal com o fio separando do resto
do rodapé. */
.at-frete--mini {
margin-bottom: .9rem;
padding-bottom: .9rem;
border-bottom: 1px solid var(--line);
}
.coupon { display: flex; gap: .5rem; margin-bottom: 1.1rem; }
.coupon input { flex: 1; }
.coupon button {
padding: 0 1.1rem;
background: var(--secondary-dark-color);
color: var(--on-brand);
border-radius: var(--r);
font-size: var(--step--1);
font-weight: 700;
}
.cart-total th { text-align: left; padding: .4rem 0; font-weight: 400; color: var(--ink-mute); }
.cart-total td { text-align: right; padding: .4rem 0; font-weight: 700; }
.cart-total .grand-total th,
.cart-total .grand-total td {
padding-top: .9rem;
border-top: 1px solid var(--line-strong);
font-size: var(--step-1);
color: var(--ink);
}
.cart-total .grand-total td strong { color: var(--brand-text); font-size: var(--step-2); }
.cart-total .secondary-button,
.cart-total .primary-button {
width: 100%;
margin-top: 1rem;
background: var(--primary-color);
border-color: var(--primary-color);
color: var(--on-primary, #fff);
}
.cart-total .secondary-button:hover { filter: brightness(1.1); background: var(--primary-color); color: var(--on-primary, #fff); }
.cart-upsell {
display: grid;
grid-template-columns: 52px 1fr auto;
gap: .7rem;
align-items: center;
margin-top: 1rem;
padding: .9rem;
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--card);
}
.shipping-rate { margin-bottom: 1.1rem; }
.shipping-rate label { margin-top: .8rem; }
/* `#calculateFreight` é um `