longo; sem separação garantida.
Solução: flexbox com gap — itens flex NUNCA se sobrepõem.
========================================================================== */
body .awa-b2b-promo-bar__text {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap; /* mobile: quebra em 2 linhas em vez de sobrepor */
gap: var(--awa-sp-3);
margin: 0;
}
body .awa-b2b-promo-bar__cta {
flex: 0 0 auto;
white-space: nowrap;
}
@media (max-width: 767px) {
body .awa-b2b-promo-bar__text { font-size: 12px; gap: var(--awa-sp-2); }
}
/* ==========================================================================
3. FIX — Selo "Novo" sobrepondo a REF do produto
Causa: .hot-onsale sem ancoragem clara dentro do card.
Solução: badge vira pill ancorado no topo da imagem.
========================================================================== */
body .awa-product-card .product-thumb { position: relative; }
body .awa-product-card .hot-onsale {
position: absolute;
top: var(--awa-sp-2);
left: var(--awa-sp-2);
z-index: 2;
margin: 0;
}
body .awa-product-card .onsale.new-lable .sale-bg { display: none; } /* mata o shape legado que vazava */
body .awa-product-card .onsale.new-lable .sale-text label {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 10px;
background: var(--awa-brand);
color: #fff;
border-radius: var(--awa-radius-pill);
font-family: var(--awa-font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: .4px;
text-transform: uppercase;
}
/* ==========================================================================
4. FIX — Carrossel de categorias: último item cortado + barra cinza
Causa: viewport com overflow escondido e trilho width:max-content —
o item final ficava "entre páginas". A barra cinza é o container de
dots renderizando VAZIO.
========================================================================== */
body .awa-category-carousel__viewport {
scroll-snap-type: x proximity;
scrollbar-width: none; /* Firefox: sem barra visível */
padding-bottom: var(--awa-sp-1);
}
body .awa-category-carousel__viewport::-webkit-scrollbar { display: none; } /* Chrome/Safari */
body .awa-category-carousel__item { scroll-snap-align: start; }
/* Barra cinza: container de dots vazio não deve ocupar espaço na página */
body .awa-category-carousel__dots:empty { display: none; }
/* ==========================================================================
5. SISTEMA DE BOTÕES — hoje existem 4 estilos diferentes na home.
A partir daqui: 3 padrões oficiais e nada mais.
========================================================================== */
/* 5a. CTA pill (ações principais) — ex: "Cadastre agora" */
body .awa-b2b-promo-bar__cta {
display: inline-flex;
align-items: center;
height: var(--awa-h-cta);
padding: 0 var(--awa-sp-4);
background: var(--awa-brand);
color: #fff;
border: none;
border-radius: var(--awa-radius-pill);
font-family: var(--awa-font-display);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background .2s ease;
}
body .awa-b2b-promo-bar__cta:hover { background: var(--awa-brand-dark); color: #fff; }
body .awa-b2b-promo-bar__cta strong { font-weight: 600; }
/* 5b. Botão circular de navegação (setas de carrossel) */
body .awa-category-carousel__prev,
body .awa-category-carousel__next {
width: var(--awa-h-control);
height: var(--awa-h-control);
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--awa-surface);
color: var(--awa-ink);
border: 1px solid var(--awa-line);
border-radius: 50%;
cursor: pointer;
transition: border-color .2s ease, color .2s ease;
}
body .awa-category-carousel__prev:hover,
body .awa-category-carousel__next:hover {
border-color: var(--awa-brand);
color: var(--awa-brand);
}
/* 5c. Botão circular flutuante sobre imagem (pause do hero) */
body .awa-hero-pause-btn {
width: var(--awa-h-control);
height: var(--awa-h-control);
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.92);
color: var(--awa-ink);
border: none;
border-radius: 50%;
box-shadow: var(--awa-shadow-card);
cursor: pointer;
transition: color .2s ease;
}
body .awa-hero-pause-btn:hover { color: var(--awa-brand); }
/* ==========================================================================
6. TIPOGRAFIA DE SEÇÃO + CARD DE PRODUTO — base da consistência
========================================================================== */
body .awa-section-header__title {
font-family: var(--awa-font-display);
font-size: 22px;
font-weight: 600;
color: var(--awa-ink);
margin: 0;
}
body .awa-section-header__subtitle {
font-family: var(--awa-font-body);
font-size: 14px;
color: var(--awa-ink-soft);
}
body .awa-product-card {
background: var(--awa-surface);
border: 1px solid var(--awa-line);
border-radius: var(--awa-radius-m);
padding: var(--awa-sp-4);
transition: box-shadow .2s ease;
}
body .awa-product-card:hover { box-shadow: var(--awa-shadow-card); }
body .awa-product-card .product-item-link {
font-family: var(--awa-font-body);
font-size: 14px;
color: var(--awa-ink);
}
/* ==========================================================================
7. ESPAÇAMENTO ENTRE SEÇÕES — ritmo vertical único
========================================================================== */
body .awa-home-section { margin-bottom: var(--awa-sp-6); }
/* ==========================================================================
8. DESARME DE LEGADO — ÚNICA seção onde !important é permitido.
Motivo: os patches antigos usam !important com especificidade
inflada (body#html-body repetido); a única forma de neutralizar
uma declaração !important é outra !important carregada depois.
Cada regra aqui precisa citar o que está desarmando.
========================================================================== */
/* Desarma "overflow travado" do patch awa-head-preload-critical-home,
que impedia o scroll-snap da SEÇÃO 4 e causava o item cortado. */
body .top-home-content--category-carousel .awa-category-carousel__viewport {
overflow-x: auto !important;
min-height: 0 !important;
}
/* ==========================================================================
9. FIX — Menu: "asas" vermelhas nas pontas da barra de navegação (Onda 2C)
Causa: regra de fundo vermelho vinda do CSS compilado do tema (LESS que
ficou meses sem deploy e subiu no primeiro deploy da Onda 1).
Solução: barra de navegação branca no desktop, alinhada ao header.
Escopo desktop para NÃO tocar na gaveta mobile (nav-sections off-canvas).
========================================================================== */
@media (min-width: 768px) {
body .header-wrapper-sticky,
body .awa-header-primary-nav,
body .sections.nav-sections.category-dropdown {
background: var(--awa-surface);
}
}
/* ==========================================================================
10. FIX v3 — Hero: a IMAGEM define a caixa (Onda 2C)
Histórico: v1 perdeu na especificidade; v2 venceu o lock de 331px mas
zerou a imagem (img height:100% dentro de