/* awa-audit-bundle.css — Merged audit CSS (consolidation 2026-05-09)
* Consolidates: awa-visual-audit-final (59KB) + awa-visual-consistency (51KB)
* + awa-header-audit-fix (5KB) + awa-deep-audit (44KB) = 159KB
* Loaded async (media=print onload) — replaces 4 HTTP requests with 1.
*/
/* ===== awa-visual-audit-final-2026-05-03.css (59KB) ===== */
/* Final visual audit fixes loaded after async theme bundles. */
:root {
/* ── AWA Visual Audit — supplemental tokens ─── */
--audit-bg-light: #f7f8fa;
--audit-bg-muted: #eef1f5;
--audit-text-muted: #5a6370;
--audit-white-off: #fcfcfc;
--audit-white: #ffffff;
}
@media (max-width: 767px) {
body .page-wrapper .fixed-right,
body .fixed-right {
display: none !important;
}
body .page-wrapper .awa-nav-overlay {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.nav-open body .page-wrapper .awa-nav-overlay,
body.nav-open .page-wrapper .awa-nav-overlay,
body .page-wrapper .awa-nav-overlay.is-visible {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
body .page-wrapper nav.fixed-bottom,
body .page-wrapper .link-on-bottom {
height: 72px !important;
}
body .awa-whatsapp-float,
body a.awa-whatsapp-float,
body #whatsapp-btn {
bottom: 92px !important;
}
body .page-wrapper .message.global.cookie,
body .page-wrapper .cookie-notice,
body .page-wrapper .cookie-status,
body .page-wrapper .cookie-banner-container {
bottom: 72px !important;
}
body .awa-404-title,
body.cms-no-route .page-wrapper .awa-404-title,
body.cms-noroute-index .page-wrapper .awa-404-title {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
html body.cms-no-route.cms-page-view.page-layout-1column .page-wrapper .page-main .awa-404-title,
html body.cms-noroute-index.cms-page-view.page-layout-1column .page-wrapper .page-main .awa-404-title {
font-size: 24px !important;
line-height: 1.2 !important;
}
body.checkout-cart-index .page-wrapper .page-footer > .page_footer.awa-footer-exp-control,
body.checkout-cart-index .page-wrapper .page-footer > .awa-footer-categories-expand,
body.cms-no-route .page-wrapper .page-footer > .page_footer.awa-footer-exp-control,
body.cms-no-route .page-wrapper .page-footer > .awa-footer-categories-expand,
body.cms-noroute-index .page-wrapper .page-footer > .page_footer.awa-footer-exp-control,
body.cms-noroute-index .page-wrapper .page-footer > .awa-footer-categories-expand {
display: none !important;
}
body.b2b-auth-shell .page-wrapper .page_footer.awa-footer-exp-control .awa-footer-trust-bar,
body.b2b-auth-shell .page-wrapper .page_footer.awa-footer-exp-control .awa-footer-tags,
body.b2b-auth-shell .page-wrapper .page_footer.awa-footer-exp-control .awa-footer-business-contact,
body.customer-account-login .page-wrapper .page_footer.awa-footer-exp-control .awa-footer-trust-bar,
body.customer-account-login .page-wrapper .page_footer.awa-footer-exp-control .awa-footer-tags,
body.customer-account-login .page-wrapper .page_footer.awa-footer-exp-control .awa-footer-business-contact {
display: none !important;
}
body.checkout-cart-index .page-wrapper .page-footer .footer-bottom,
body.cms-no-route .page-wrapper .page-footer .footer-bottom,
body.cms-noroute-index .page-wrapper .page-footer .footer-bottom,
body.b2b-auth-shell .page-wrapper .page_footer .footer-container,
body.customer-account-login .page-wrapper .page_footer .footer-container {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
body.checkout-cart-index .page-wrapper .page-footer,
body.cms-no-route .page-wrapper .page-footer,
body.cms-noroute-index .page-wrapper .page-footer,
body.b2b-auth-shell .page-wrapper .page_footer,
body.customer-account-login .page-wrapper .page_footer {
margin-top: 24px !important;
}
body.checkout-cart-index .page-wrapper .page-footer .footer-bottom .footer-bottom-inner,
body.cms-no-route .page-wrapper .page-footer .footer-bottom .footer-bottom-inner,
body.cms-noroute-index .page-wrapper .page-footer .footer-bottom .footer-bottom-inner {
gap: 12px !important;
}
body.checkout-cart-index .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__row,
body.cms-no-route .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__row,
body.cms-noroute-index .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__row {
gap: 12px !important;
}
body.checkout-cart-index .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__copyright,
body.cms-no-route .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__copyright,
body.cms-noroute-index .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__copyright {
padding: 0 !important;
min-height: 0 !important;
}
body.checkout-cart-index .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__copyright p,
body.cms-no-route .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__copyright p,
body.cms-noroute-index .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__copyright p {
margin: 0 !important;
}
body.checkout-cart-index .page-wrapper .page-footer .awa-footer-devby,
body.cms-no-route .page-wrapper .page-footer .awa-footer-devby,
body.cms-noroute-index .page-wrapper .page-footer .awa-footer-devby {
display: none !important;
}
}
/* =====================================================================
Fix 2026-05-05: category carousel cards stuck invisible (opacity:0)
Root cause: cards keep `awa-carousel-hidden` state when JS reveal does not
complete in some runtime paths. This fallback is homepage-scoped and only
neutralizes the hidden state; normal layout/interaction is preserved.
===================================================================== */
#html-body.cms-index-index #awa-cat-carousel .awa-category-carousel__item.awa-carousel-hidden,
#html-body.cms-home #awa-cat-carousel .awa-category-carousel__item.awa-carousel-hidden,
#html-body.cms-homepage_ayo_home5 #awa-cat-carousel .awa-category-carousel__item.awa-carousel-hidden {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* =====================================================================
AWA Card Visual Bugfixes v1 — 2026-05-03
Aplica-se sobre o Less compilado; entra em vigor imediatamente.
===================================================================== */
/* Bug 5 — token de fundo do card: era #ffffff, agora cinza superfície */
/* Bug V1 — --awa-fs-* não definidos em _tokens.less (somente --awa-font-* existe) */
:root {
--awa-bg-surface: var(--awa-white, var(--audit-white)); /* surfaces = white; use --awa-bg-muted for muted backgrounds */
--awa-fs-xs: 12px; /* font-size do nome do produto no card */
--awa-fs-xs3: 11px; /* SKU, labels, breadcrumb, toolbar texto */
--awa-fs-xl: 20px; /* preço principal no card */
--awa-text-primary: var(--awa-text, #0f172a); /* cor do preço (alias) */
}
/* Bug 6 — slick slider: overflow no lugar certo */
.slick-slider {
overflow: visible !important;
}
.slick-list {
overflow: hidden !important;
}
/* Bug 7 — box-sizing correto nos containers de imagem */
.product-item-photo,
.product-image-container {
box-sizing: border-box !important;
}
/* Fix R3 — padding-bottom inline do JS Magento sobrescreve Less sem !important */
.product-item-photo .product-image-wrapper,
.product-image-container .product-image-wrapper {
padding-bottom: 0 !important;
}
/* Bug 15 — card em coluna flex para empurrar botões ao fundo */
.products-grid .product-item,
.products-grid .item.product,
.products.list .product-item,
.products.list .item.product,
.products.grid .product-item,
.products.grid .item.product {
display: flex !important;
flex-direction: column !important;
}
/* Bugs 11, 12 — nome do produto: truncar + altura mínima para 2 linhas */
/* Fix R2: 2.8em * 12px = 33.6px < 40px do Less — usar valor fixo */
.product-item-name .product-item-link {
text-overflow: ellipsis !important;
min-height: 40px !important;
}
/* Bugs 1, 2, 20 — price-box: sem margem base, sem border-top duplicada, sem itálico */
/* Fix N2: seletor ampliado; Fix V2: preservar margin-bottom 8px nos elementos B2B gate */
.product-item-info .price-box {
margin: 0 !important;
font-style: normal !important;
}
.product-item-info .price-box-inner,
.product-item-info .price-login {
margin: 0 0 8px !important; /* preserva gap antes do botão B2B */
font-style: normal !important;
}
.product-item-info .product-item-inner > .price-box {
margin: auto 0 0 !important;
border-top: none !important;
padding-top: 0 !important;
}
/* Bug 3 — badge de desconto: cor primária da marca */
.product-item-info .discount-badge {
background: var(--awa-primary, #b73337) !important;
color: var(--awa-text-inverse, var(--audit-white)) !important;
}
/* Bug 10 — botões de ação: flex + altura mínima */
.product-item-inner .action.tocart,
.product-item-inner .action.login,
.product-item-inner a[href*="b2b/register"],
.product-item-inner a[href*="account/login"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 36px !important;
height: auto !important;
line-height: normal !important;
padding: 4px 12px !important;
}
/* Bug 17 (Fix V3) — GPU hint em hover apenas: evita 24+ layers simultâneos */
.product-item-info img.product-image-photo {
will-change: auto;
}
.product-item-info:hover img.product-image-photo {
will-change: transform;
}
/* Bug 18 — paginação: só o item ATUAL fica vermelho */
.pages .item strong.page {
background: var(--awa-bg, var(--audit-white)) !important;
border-color: var(--awa-border, #e0e0e0) !important;
color: var(--awa-text, #333) !important;
}
.pages .item.current strong.page {
background: var(--awa-primary, #b73337) !important;
border-color: var(--awa-primary, #b73337) !important;
color: var(--awa-text-inverse, var(--audit-white)) !important;
}
/* Bug 4 (Fix R1) — loading mask: especificidade corrigida para superar Less */
/* Less usa :is(body.catalog-category-view) .loading-mask = especificidade (0,2,1)+!important */
/* Nosso seletor body.catalog-category-view iguala a especificidade */
body.catalog-category-view .loading-mask,
body.catalogsearch-result-index .loading-mask {
display: block !important;
visibility: visible !important;
}
body.catalog-category-view .loader > img,
body.catalog-category-view .loader-text,
body.catalogsearch-result-index .loader > img,
body.catalogsearch-result-index .loader-text {
display: none !important;
}
/* Bug 9 — widgets relacionados/upsell/crosssell: box-sizing + object-fit */
.block.related .product-item-photo,
.block.related .product-image-container,
.block.upsell .product-item-photo,
.block.upsell .product-image-container,
.block.crosssell .product-item-photo,
.block.crosssell .product-image-container {
box-sizing: border-box !important;
}
.block.related .product-image-container img.product-image-photo,
.block.upsell .product-image-container img.product-image-photo,
.block.crosssell .product-image-container img.product-image-photo {
object-fit: contain !important;
object-position: center !important;
height: 100% !important;
width: 100% !important;
}
/* Bugs 13, 16 — toolbar mobile: ocultar labels, select legível */
@media (max-width: 480px) {
.toolbar.toolbar-products .toolbar-sorter label,
.toolbar.toolbar-products .toolbar-limiter label {
display: none !important;
}
.toolbar.toolbar-products .toolbar-sorter select,
.toolbar.toolbar-products .toolbar-limiter select {
min-width: 100px !important;
}
}
/* Fix N1 — estrelas de avaliação: seletor cobre width:0% e width: 0% */
.product-reviews-summary .rating-result[style*="width: 0%"],
.product-reviews-summary .rating-result[style*="width:0%"],
.product-reviews-summary .rating-result[style*="width: 0"],
.product-reviews-summary.no-rating {
display: none !important;
}
/* =====================================================================
AWA Card Visual Bugfixes v7 — A1–A4 (2026-05-03)
A1: hover lift duplo (-5px total)
A2: --awa-bg-muted indefinido (area imagem + pílula SKU transparentes)
A3: --awa-link-hover indefinido (botão CTA some no hover — crítico)
A4: escala da imagem só na hover da imagem, não do card inteiro
===================================================================== */
/* Bug A2 — --awa-bg-muted: image container bg + SKU pill bg = transparent */
/* Bug A3 — --awa-link-hover: CTA button hover background = transparent (button vanishes!) */
:root {
--awa-bg-muted: #f1f5f9; /* neutral-100: fundo suave da área de imagem e pílula SKU */
--awa-link-hover: #8e2629; /* alias primary-dark: hover do botão CTA no card */
}
/* Bug A1 — hover lift duplo: .product-item:hover (-2px) + .product-item-info:hover (-3px) = -5px */
/* Cancelar o -3px do .product-item-info; manter apenas o -2px do .product-item */
body.catalog-category-view .product-item-info:hover,
body.catalogsearch-result-index .product-item-info:hover {
transform: none !important;
}
/* Bug A4 — escala da imagem: era disparada apenas ao hover na área da imagem */
/* Step 1: cancelar o trigger imagem-only (de _awa-improvements.less e _grid-listing.less) */
.product-item-photo:hover img.product-image-photo,
.product-image-container:hover img.product-image-photo {
transform: none !important;
}
/* Step 2: disparar escala ao hover em qualquer parte do card */
.product-item-info:hover .product-item-photo img.product-image-photo,
.product-item-info:hover .product-image-container img.product-image-photo,
.product-item:hover .product-item-photo img.product-image-photo,
.product-item:hover .product-image-container img.product-image-photo {
transform: scale(1.04) !important;
}
/* ==========================================================================
B2B Auth Pages — High-specificity fixes (loaded last, beats all bundles)
Selector: body.b2b-auth-shell .b2b-login-page .b2b-login-card → (0,3,1)
All values are literals — no CSS variables to avoid resolution issues
========================================================================== */
/* Card shape */
body.b2b-auth-shell .b2b-login-page .b2b-login-card {
border-radius: 14px !important;
box-shadow: 0 10px 28px rgb(15 23 42 / 8%) !important;
}
@media (max-width: 640px) {
body.b2b-auth-shell .b2b-login-page .b2b-login-card {
border-radius: 12px !important;
}
}
/* ENTRAR button must be full-width block */
body.b2b-auth-shell .b2b-login-page .b2b-btn-entrar {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Password toggle: hide text, show icon only */
body.b2b-auth-shell .b2b-login-page .b2b-password-toggle {
font-size: 0 !important;
width: 34px !important;
min-width: 34px !important;
max-width: 34px !important;
min-height: 34px !important;
padding: 0 !important;
}
body.b2b-auth-shell .b2b-login-page .b2b-password-toggle svg,
body.b2b-auth-shell .b2b-login-page .b2b-password-toggle i {
font-size: 16px !important;
}
/* Forgot password link: right-aligned flex */
body.b2b-auth-shell .b2b-login-page .b2b-login-forgot {
display: flex !important;
justify-content: flex-end !important;
}
/* Login footer: block layout */
body.b2b-auth-shell .b2b-login-page .b2b-login-footer {
display: block !important;
}
/* Form: grid with consistent gap */
body.b2b-auth-shell .b2b-login-page .b2b-login-form {
display: grid !important;
gap: 20px !important;
}
/* CTA buttons on mobile: full-width stack */
@media (max-width: 640px) {
body.b2b-auth-shell .b2b-login-page .b2b-btn-register,
body.b2b-auth-shell .b2b-login-page .b2b-btn-claim {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
}
/* Nav-breadcrumbs: hide empty breadcrumbs area on auth pages */
body.b2b-auth-shell .nav-breadcrumbs,
body.b2b-auth-shell .breadcrumbs {
display: none !important;
}
/* Background gradient for login page */
body.b2b-auth-shell .b2b-login-page {
background: linear-gradient(180deg, var(--audit-bg-light) 0%, var(--audit-bg-muted) 100%) !important;
min-height: calc(100vh - 80px) !important;
}
/* Mobile: add bottom padding so fixed nav doesn't cover ENTRAR button */
@media (max-width: 767px) {
body.b2b-auth-shell .b2b-login-page {
padding-bottom: 80px !important;
}
}
/* ─────────────────────────────────────────────────────────────
Section 26 · Carousel Row-Gap Fix
───────────────────────────────────────────────────────────────*/
:is(body.cms-index-index,body.cms-home,body.cms-homepage_ayo_home5) .page-wrapper .top-home-content.awa-carousel-section > .container::before,
:is(body.cms-index-index,body.cms-home,body.cms-homepage_ayo_home5) .page-wrapper .top-home-content.awa-carousel-section > .container::after{display:none!important;content:none!important}
:is(body.cms-index-index,body.cms-home,body.cms-homepage_ayo_home5) .page-wrapper .top-home-content.awa-carousel-section > .container{row-gap:12px!important}
:is(body.cms-index-index,body.cms-home,body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-wrapper > .top-home-content.awa-carousel-section + .top-home-content.awa-carousel-section{padding-top:20px!important;margin-top:8px!important}
:is(body.cms-index-index,body.cms-home,body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-wrapper > .top-home-content.awa-carousel-section{padding-block:clamp(14px,1.5vw,22px)!important}
:is(body.cms-index-index,body.cms-home,body.cms-homepage_ayo_home5) .page-wrapper .awa-carousel-section .awa-owl-progress{height:5px!important;margin-top:12px!important;border-radius:3px!important}
@media(max-width:767px){:is(body.cms-index-index,body.cms-home,body.cms-homepage_ayo_home5) .page-wrapper .top-home-content.awa-carousel-section > .container{row-gap:8px!important}:is(body.cms-index-index,body.cms-home,body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-wrapper > .top-home-content.awa-carousel-section + .top-home-content.awa-carousel-section{padding-top:12px!important;margin-top:4px!important}}
/* =============================================================================
Fix 2026-05-05: footer-bottom border-top invisible
Root cause: --awa-ft-border = rgba(255 255 255 / 12%) (dark-theme token)
winning via awa-bundle-refinements.css var(--awa-ft-border, #e2e2e2).
DOM: FOOTER.page-footer > .footer-bottom (no .page_footer intermediate).
Fix: direct override with html+body prefix → specificity (0,3,2) > (0,3,1)
============================================================================= */
html body .page-wrapper .page-footer .footer-bottom {
border-top: 1px solid var(--awa-border, #e5e5e5) !important;
}
/* =================================================================
* Merged from: awa-visual-overhaul-2026-05-04.css
* ================================================================= */
/**
* AWA Motos — Visual Overhaul 2026-05-04
* Camada final de refinamento visual (load late cascade).
* ESCOPO: apenas PLP (catalog-category-view) e busca (catalogsearch-result-index).
* Regras globais migradas para _grid-listing.less (compilado no tema LESS).
*/
/* =================================================================
* AWA PLP IMAGE OCCUPANCY FIX — 2026-05-04
* Root cause: late cascade layers add padding/inset that shrinks
* the usable render box of product photos in PLP/search cards.
* This block loads LAST in the cascade chain via awa-visual-audit-final-css-v2.phtml
* and neutralises those constraints.
* ================================================================= */
body.catalog-category-view .page-wrapper .wrapper.grid.products-grid .item-product .product-thumb-link,
body.catalogsearch-result-index .page-wrapper .wrapper.grid.products-grid .item-product .product-thumb-link,
body.catalog-category-view .page-wrapper .wrapper.list.products-list .item-product .product-thumb-link,
body.catalogsearch-result-index .page-wrapper .wrapper.list.products-list .item-product .product-thumb-link {
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.catalog-category-view .page-wrapper .item-product .product-thumb,
body.catalogsearch-result-index .page-wrapper .item-product .product-thumb,
body.catalog-category-view .page-wrapper .item-product .product-image-container,
body.catalogsearch-result-index .page-wrapper .item-product .product-image-container,
body.catalog-category-view .page-wrapper .item-product .product-image-wrapper,
body.catalogsearch-result-index .page-wrapper .item-product .product-image-wrapper,
body.catalog-category-view .page-wrapper .item-product .first-thumb,
body.catalogsearch-result-index .page-wrapper .item-product .first-thumb,
body.catalog-category-view .page-wrapper .item-product .second-thumb,
body.catalogsearch-result-index .page-wrapper .item-product .second-thumb {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
body.catalog-category-view .page-wrapper .item-product .product-image-photo,
body.catalogsearch-result-index .page-wrapper .item-product .product-image-photo,
body.catalog-category-view .page-wrapper .item-product .product-thumb img,
body.catalogsearch-result-index .page-wrapper .item-product .product-thumb img {
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
mix-blend-mode: normal !important;
}
/* =================================================================
* AWA PLP — B2B PRICE LINE VISIBILITY FIX — 2026-05-05
* Problema: .info-price é esmagado para height:0 pela flexbox
* porque .product-info tem apenas 73px (nome 54px + sku 19px).
* Fix: flex-shrink:0 + min-height impede o esmagamento, o card
* cresce naturalmente (sem min-height explícito no card).
* ================================================================= */
/* Evita que a linha de preço (Faça login) seja esmagada para 0px */
body.catalog-category-view .products-grid .item-product .info-price,
body.catalogsearch-result-index .products-grid .item-product .info-price {
flex-shrink: 0 !important;
height: auto !important; /* override: themes.css sets height:0px !important */
min-height: 36px !important;
display: flex !important;
align-items: center !important;
}
/* Garante que o texto "Faça login para ver preços" seja legível */
body.catalog-category-view .products-grid .item-product .b2b-login-to-see-price,
body.catalogsearch-result-index .products-grid .item-product .b2b-login-to-see-price {
flex-shrink: 0 !important;
font-size: 12px !important;
line-height: 1.4 !important;
color: var(--awa-text-muted, #777) !important;
}
body.catalog-category-view .products-grid .item-product .b2b-login-to-see-price a,
body.catalogsearch-result-index .products-grid .item-product .b2b-login-to-see-price a {
color: var(--awa-primary, #b73337) !important;
font-weight: 600 !important;
text-decoration: none !important;
}
body.catalog-category-view .products-grid .item-product .b2b-login-to-see-price a:hover,
body.catalogsearch-result-index .products-grid .item-product .b2b-login-to-see-price a:hover {
text-decoration: underline !important;
}
/* =================================================================
* Merged from: awa-visual-improvements-2026-05-05.css
* ================================================================= */
/**
* AWA Motos — Visual Improvements 2026-05-05
* Foco: font-size dos botões "Adicionar ao Carrinho" nos carrosséis da homepage,
* breadcrumb, line-clamp nos nomes de produto, consistência visual geral.
*
* Carregado via awa-visual-audit-final-css-v2.phtml — posição final na cascata.
* Usar prefixo #html-body para especificidade máxima sem !important desnecessário.
*/
/* =================================================================
* FIX 1: Font-size do botão "Adicionar ao Carrinho" nos carrosséis
* Problema: tema Ayo aplica font-size 9.625px em .action.tocart.primary
* nos cards .product-item da homepage (Mais Vendidos, Guidões, etc.)
* Fix: elevar para 13px — consistente com os cards .item-product (PLP/busca).
* ================================================================= */
#html-body .product-item .action.tocart,
#html-body .product-item .action.tocart.primary,
#html-body .product-items .action.tocart {
font-size: 13px !important; /* sobe de 9.625px (herança do tema pai) para 13px */
line-height: 1.3 !important;
}
/* =================================================================
* FIX 2: Font-size do container .breadcrumbs
* Problema: .breadcrumbs container tem font-size 9.625px herdado.
* Os dentro têm 13px próprio — visualmente OK,
* mas referências de em/% dentro do container ficam erradas.
* ================================================================= */
#html-body .breadcrumbs {
font-size: 13px !important; /* alinha container com font-size dos filhos */
}
/* =================================================================
* FIX 3: Line-clamp nos nomes de produto (cards .product-item)
* Problema: nomes longos transbordam ou cortam de forma abrupta
* (overflow:hidden sem ellipsis).
* Fix: limitar a 2 linhas com ellipsis — mantém altura de card uniforme.
* ================================================================= */
#html-body .product-item .product-item-name,
#html-body .product-item .product-item-name a {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
max-height: calc(1.4em * 2) !important;
}
/* =================================================================
* FIX 4: Padding interno na área de ações dos cards .product-item
* Problema: .product-item-actions / .actions-primary têm padding 0
* — o botão tocart toca na borda do card sem respiro.
* Fix: adicionar padding horizontal e inferior.
* ================================================================= */
#html-body .product-item-info .product-item-actions,
#html-body .product-item-info .actions-primary {
padding: 0 10px 12px !important;
}
/* =================================================================
* FIX 5: Consistência border-radius nos botões primários
* Problema: button.primary genérico tem border-radius 4px
* enquanto tocart tem 6px.
* Fix: uniformizar todos os botões primários em 6px.
* ================================================================= */
#html-body button.primary:not(.btn-add-to-cart):not(.checkout),
#html-body .action.primary:not(.tocart):not(.btn-add-to-cart):not(.checkout):not(.awa-cart-empty__cta) {
border-radius: 6px !important; /* uniformiza com .action.tocart que já tem 6px */
}
/* =================================================================
* FIX 6: Preço REF/SKU — visibilidade mínima nos cards homepage
* Problema: REF (SKU) em 11px cinza é difícil de ler.
* Fix: elevar para 12px e escurecer levemente o cinza para WCAG AA.
* ================================================================= */
#html-body .product-item .product-sku,
#html-body .product-item [class*="ref-product"] {
font-size: 12px !important;
color: var(--audit-text-muted) !important; /* contraste 4.8:1 no fundo branco (WCAG AA) */
}
/* =================================================================
* FIX 7: Min-height e flex no botão tocart — UX touch targets
* Problema: botão pode ter altura insuficiente para toque.
* Fix: garantir min-height 40px nos cards de produto.
* ================================================================= */
#html-body .product-item .action.tocart,
#html-body .product-item .action.tocart.primary {
min-height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* =================================================================
* FIX 8: Toolbar PLP (Ordenar por / Mostrar por página)
* Problema: .toolbar-products tem font-size 11.375px — difícil de ler.
* Labels "Ordenar por" em 11px e selects em 11.375px.
* Fix: elevar para 13px — consistente com o resto da UI.
* ================================================================= */
#html-body .toolbar-products,
#html-body .toolbar-products .sorter-label,
#html-body .toolbar-products .limiter .label,
#html-body .toolbar-products .toolbar-label {
font-size: 13px !important;
}
#html-body .toolbar-products select.sorter-options,
#html-body .toolbar-products select.limiter-options {
font-size: 13px !important;
/* height já está OK (48px/44px) */
}
/* =================================================================
* FIX 9: B2B Gate Card — legibilidade e tamanho de texto
* Problema: .awa-b2b-gate-card__title e __action têm font-size 11px
* — muito pequeno para o contexto B2B.
* Fix: elevar título para 12px e ação para 12px.
* O badge (12px) já está OK.
* ================================================================= */
#html-body .awa-b2b-gate-card--compact .awa-b2b-gate-card__title {
font-size: 12px !important; /* era 11px */
line-height: 1.35 !important;
}
#html-body .awa-b2b-gate-card--compact .awa-b2b-gate-card__action {
font-size: 12px !important; /* era 11px */
}
/* =================================================================
* FIX 10: Sorter — adiciona ícone de seta no select customizado
* Melhoria: arrow customizada no select de ordenação para parecer
* mais polido vs a seta padrão do sistema operacional.
* ================================================================= */
#html-body .toolbar-products .sorter-options,
#html-body .toolbar-products .limiter-options {
cursor: pointer;
border-radius: 6px !important; /* arredonda levemente para consistência */
padding: 0 8px !important;
}
/* =================================================================
* FIX 11: Hover nos cards de produto — transform mais perceptível
* Problema: o transform no hover é muito sutil (já existe transição
* mas o elevação (translateY) não está definida).
* Fix: adicionar translateY(-2px) no hover para feedback visual.
* Cards .product-item já têm transition: transform 0.22s
* ================================================================= */
#html-body .product-item:hover {
transform: translateY(-2px) !important; /* elevação sutil no hover */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; /* sombra mais pronunciada */
}
/* =================================================================
* FIX 12: "Mais vendidos" / Carrosséis — section title spacing
* Problema: margin-bottom dos títulos das seções é 6px — muito
* próximo do carrossel. Adicionar respiro visual.
* Fix: margin-bottom 12px para os títulos das seções de produto.
* ================================================================= */
#html-body .block-title,
#html-body .rokan-bestseller .block-title,
#html-body .rokan-newproduct .block-title,
#html-body .rokan-featured .block-title,
#html-body .rokan-mostviewed .block-title {
margin-bottom: 12px !important; /* era 6px */
}
/* =================================================================
* FIX 13: Paginação — espaçamento entre páginas
* Problema: itens de paginação estão no limite de toque (44px OK),
* mas o espaço entre o list e o toolbar inferior é 0.
* Fix: adicionar margin-top à área de paginação.
* ================================================================= */
#html-body .pages-wrapper,
#html-body .pages {
margin-top: 8px !important;
}
/* =================================================================
* FIX 14: .item-product hover effect (PLP — Ayo cards)
* Problema: cards da PLP têm transition: border-color + background-color
* mas NÃO têm transform no hover — sem feedback visual de elevação.
* Fix: adicionar transform + box-shadow ao hover, consistente com
* os cards .product-item da homepage.
* ================================================================= */
#html-body .item-product {
transition: border-color 0.18s, background-color 0.18s,
transform 0.22s ease, box-shadow 0.22s ease !important;
}
#html-body .item-product:hover {
transform: translateY(-2px) !important; /* elevação sutil */
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09) !important; /* sombra mais pronunciada */
border-color: rgba(183, 51, 55, 0.18) !important; /* leve borda vermelha AWA no hover */
}
/* =================================================================
* FIX 15: Footer links — hover color
* Problema: links do footer têm cor rgba(255,255,255,0.75) — ao hoverar
* não há mudança visual de feedback.
* Fix: mudar para branco puro no hover para feedback visível.
* ================================================================= */
#html-body .page-footer a:hover,
#html-body footer.page-footer a:hover {
color: var(--audit-white) !important;
opacity: 1 !important;
text-decoration: underline !important;
}
/* =================================================================
* FIX 16: Footer link line-height — espaçamento entre itens do menu
* Problema: line-height 19.2px resulta em itens muito próximos.
* Fix: aumentar para 28px para melhor escaneabilidade.
* ================================================================= */
#html-body .page-footer .links li,
#html-body .page-footer .footer-links li,
#html-body footer .links a {
line-height: 1.9 !important; /* ~27px a 13px — respiro entre links */
}
/* =================================================================
* FIX 17: Mobile — padding inferior do conteúdo principal
* Problema: no mobile, o conteúdo pode ficar escondido atrás da
* barra de navegação inferior fixada (72px).
* Já existe regra no awa-visual-audit-final para isso, mas reforçamos
* para product-info-price na PDP (acima do bottom nav).
* ================================================================= */
@media (max-width: 768px) {
#html-body .page-wrapper {
padding-bottom: 80px !important; /* garante espaço acima do bottom nav fixo */
}
/* Evitar que o botão "Solicitar Cotação" no PDP fique atrás da barra */
#html-body .product-add-form,
#html-body .product-info-main {
padding-bottom: 16px !important;
}
}
/* =================================================================
* FIX 18: B2B gate card border-radius (PLP)
* Problema: .awa-b2b-gate-card--compact mostra 6px mas o design
* system espera 10px (themes.css tem 12px com !important
* mas é sobreposto por outra regra base).
* Fix: usar especificidade máxima #html-body para garantir 10px.
* ================================================================= */
#html-body .awa-b2b-gate-card--compact {
border-radius: 10px !important; /* alinhado com o design system (meio-caminho entre 6px base e 12px tema) */
}
/* =================================================================
* FIX 19: Mobile gate card — altura reduzida
* Problema: gate card 154px cobre 77% da imagem (199px) no mobile.
* No desktop cobre 42% (120px/289px) — proporção OK.
* No mobile a cobertura é excessiva.
* Fix: reduzir padding e gap no mobile para ~100px coverage.
* ================================================================= */
@media (max-width: 768px) {
#html-body .awa-b2b-gate-card--compact {
padding: 6px 8px !important; /* era 8px 12px */
gap: 4px !important; /* era 6px */
}
#html-body .awa-b2b-gate-card__badge {
font-size: 10px !important;
padding: 2px 6px !important;
line-height: 1.4 !important;
}
#html-body .awa-b2b-gate-card__title {
font-size: 11px !important; /* um pouco menor no mobile */
line-height: 1.3 !important;
}
#html-body .awa-b2b-gate-card__action {
font-size: 11px !important;
padding: 6px 10px !important; /* reduz padding do botão */
}
}
/* =================================================================
* FIX 20: Filtros ativos — estado visual mais pronunciado
* Problema: quando um filtro está ativo na layered navigation,
* o item ativo tem o mesmo visual que os inativos.
* Fix: highlight dos filtros ativos com cor primária AWA.
* ================================================================= */
#html-body .filter-options .filter-options-item .item a.am_shopby_link_selected,
#html-body .filter-options .filter-options-item li.active > a,
#html-body .filter-options [class*="item"] .am-shopby-form-checkbox:checked + label,
#html-body .filter-options [class*="item"] input:checked + label {
color: var(--awa-primary, #b73337) !important;
font-weight: 600 !important;
}
/* Estado ativo nos itens do filtro para o Layered Ajax */
#html-body .filter-active .item a,
#html-body .items.am-shopby-items .item a[class*="selected"],
#html-body .filter-current .items .item .remove {
color: var(--awa-primary, #b73337) !important;
}
/* =================================================================
* FIX 21: Seções de bloco — visual do título mais consistente
* Problema: alguns .block-title strong têm text-transform uppercase,
* outros não — inconsistência visual entre seções.
* Fix: garantir que o tamanho de fonte dos títulos seja sempre 18px
* no desktop (não depende de herança do módulo).
* ================================================================= */
#html-body .sidebar-main .block-title strong,
#html-body .sidebar-main .filter-options-title {
font-size: 14px !important; /* sidebar titles menores que main content */
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}
/* =================================================================
* FIX 22: Current filters area — limpeza visual
* Problema: a área de "Filtros Ativos" pode aparecer sem espaçamento.
* Fix: adicionar espaçamento e visual limpo ao filtro ativo.
* ================================================================= */
#html-body .filter-current {
margin-bottom: 16px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
#html-body .filter-current .filter-label {
font-size: 12px !important;
font-weight: 600 !important;
color: var(--audit-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
margin-bottom: 6px !important;
display: block !important;
}
/* =================================================================
* FIX 23: Premium Glassmorphism UI (Mobile Bottom Nav & Header)
* Melhoria: Efeito de vidro temperado premium na barra inferior
* mobile e no sticky header para sensação de leveza
* e modernidade.
* ================================================================= */
@media (max-width: 767px) {
/* Mobile Bottom Navigation Bar */
#html-body .link-on-bottom {
background-color: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
}
/* Sticky Mobile Header */
#html-body .header-wrapper-sticky .header_main,
#html-body .page-header.is-sticky .header_main {
background-color: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}
}
/* =================================================================
* FIX 24: Premium Custom Scrollbar (Webkit)
* Melhoria: Scrollbar moderna e fina (Mac-like) ao invés do
* padrão largo do Windows, elevando o "premium feel".
* ================================================================= */
@media (min-width: 1024px) {
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 10px;
border: 2px solid var(--audit-white); /* Creates a padding effect */
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.4);
}
}
/* =================================================================
* FIX 25: Super Ofertas Timer High-Contrast Design
* Melhoria: Aplicar alto contraste no contador de Super Ofertas
* para melhor legibilidade e "urgência" visual.
* ================================================================= */
#html-body .super-deal-countdown .time_circles .number {
color: var(--audit-white) !important;
font-weight: 800 !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}
#html-body .super-deal-countdown .time_circles .text {
color: var(--audit-white) !important;
font-weight: 600 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
/* =================================================================
* FIX 26: Mobile Touch Target Accessibility
* Melhoria: Garantir que elementos interativos (inputs, botões,
* toggles) tenham um tamanho mínimo de 44px em
* dispositivos móveis para acessibilidade e UX (B2B/B2C).
* ================================================================= */
@media (max-width: 767px) {
#html-body input[type="text"],
#html-body input[type="password"],
#html-body input[type="email"],
#html-body input[type="tel"],
#html-body input[type="number"],
#html-body select {
min-height: 48px !important;
}
#html-body button,
#html-body .action,
#html-body .checkout-button,
#html-body .btn-add-to-cart {
min-height: 44px !important;
}
}
/* =================================================================
* FIX 27: Premium B2B Gate Card (PDP)
* Melhoria: Transformar o aviso B2B em um card premium com
* profundidade e botão estilizado.
* ================================================================= */
#html-body .b2b-login-to-see-price {
background-color: var(--audit-white-off) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
border-radius: 8px !important;
padding: 16px !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
text-align: center !important;
margin-top: 8px !important;
}
#html-body .b2b-login-to-see-price .price-label {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
font-size: 13px !important;
color: var(--audit-text-muted) !important;
}
#html-body .b2b-login-to-see-price a {
background-color: var(--awa-primary, #b73337) !important;
color: var(--audit-white) !important;
padding: 12px 16px !important;
border-radius: 6px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
font-size: 12px !important;
letter-spacing: 0.05em !important;
text-decoration: none !important;
display: inline-block !important;
box-shadow: 0 4px 12px rgba(183, 51, 55, 0.25) !important;
transition: transform 0.2s, box-shadow 0.2s !important;
}
#html-body .b2b-login-to-see-price a:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(183, 51, 55, 0.35) !important;
}
/* ══════════════════════════════════════════════════════════════════
Visual QA Fix — 2026-05-07
Critical: Footer SVG icons rendering at 1315px instead of 40px
Major: Nav quick-links zero gap; toolbar text collision
══════════════════════════════════════════════════════════════════ */
/* ── FIX #1: Footer trust icon containers (1315px → 40px) ───── */
html body .page-wrapper .page_footer .awa-footer-trust-icon {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
overflow: hidden !important;
}
/* ── FIX #2: SVGs inside footer trust icons (fill parent → 24px) ───── */
html body .page-wrapper .page_footer .awa-footer-trust-icon svg {
width: 24px !important;
height: 24px !important;
max-width: 24px !important;
max-height: 24px !important;
display: block !important;
flex-shrink: 0 !important;
}
/* ── FIX #3: Newsletter icon container (1266px → 48px) ───── */
html body .page-wrapper .page_footer .awa-newsletter-icon {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
max-width: 48px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
overflow: hidden !important;
}
/* ── FIX #4: SVG inside newsletter icon ───── */
html body .page-wrapper .page_footer .awa-newsletter-icon svg {
width: 24px !important;
height: 24px !important;
max-width: 24px !important;
max-height: 24px !important;
display: block !important;
flex-shrink: 0 !important;
}
/* ── FIX #5: Nav quick-links zero gap between items ───── */
html body .page-wrapper .awa-nav-quick-links__list {
gap: 16px !important;
}
html body .page-wrapper .awa-nav-quick-links__item a {
padding: 4px 8px !important;
}
/* ── FIX #6: Toolbar amount/sorter text collision (PLP pages) ───── */
html body .page-wrapper .toolbar-products .toolbar-amount {
margin-right: 12px !important;
white-space: nowrap !important;
}
/* ── FIX #7: Nav quick-links vertical alignment (Catálogo 4px offset) ───── */
html body .page-wrapper .awa-nav-quick-links__item {
margin-bottom: 0 !important;
display: flex !important;
align-items: center !important;
}
/* ── FIX #8: Mobile "FAÇA LOGIN" button text wrapping in carousel cards ───── */
@media (max-width: 767px) {
html body .page-wrapper .b2b-login-to-see-price a,
html body .page-wrapper .product-item .b2b-login-to-see-price a {
white-space: nowrap !important;
font-size: 11px !important;
padding: 10px 12px !important;
min-width: max-content !important;
}
}
/* ══════════════════════════════════════════════════════════════════
Premium B2B UX Enhancements — 2026-05-07
Scope: PDP, PLP, Cart. CSS-only, no structural changes.
══════════════════════════════════════════════════════════════════ */
/* ── PREMIUM #1: PDP — SKU/REF code prominence for B2B scanning ───── */
body.catalog-product-view .product.attribute.sku .value,
body.catalog-product-view .product-info-main .sku .value {
font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--awa-text, #333) !important;
letter-spacing: 0.02em !important;
background: var(--awa-bg-muted, #f5f5f5) !important;
padding: 3px 8px !important;
border-radius: 4px !important;
display: inline-block !important;
border: 1px solid var(--awa-border, #e5e5e5) !important;
}
body.catalog-product-view .product.attribute.sku .type {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--audit-text-muted, #5a6370) !important;
margin-right: 6px !important;
}
/* ── PREMIUM #2: PDP — Stock availability badge styling ───── */
body.catalog-product-view .product-info-stock-sku .stock,
body.catalog-product-view .stock.available {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 5px 12px !important;
border-radius: 20px !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
body.catalog-product-view .stock.available span {
color: #15803d !important;
}
body.catalog-product-view .stock.available {
background: #f0fdf4 !important;
border: 1px solid #bbf7d0 !important;
color: #15803d !important;
}
body.catalog-product-view .stock.unavailable {
background: #fef2f2 !important;
border: 1px solid #fecaca !important;
color: #dc2626 !important;
}
/* Green dot indicator before stock text */
body.catalog-product-view .stock.available::before {
content: '' !important;
display: inline-block !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #16a34a !important;
animation: awa-pulse-dot 2s ease-in-out infinite !important;
}
body.catalog-product-view .stock.unavailable::before {
content: '' !important;
display: inline-block !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #dc2626 !important;
}
@keyframes awa-pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* ── PREMIUM #3: PLP — SKU/REF more scannable in product cards ───── */
:is(body.catalog-category-view, body.catalogsearch-result-index) .product-item .product-sku,
:is(body.catalog-category-view, body.catalogsearch-result-index) .product-item [class*="ref-product"],
:is(body.catalog-category-view, body.catalogsearch-result-index) .item-product .product-sku {
font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
font-size: 11px !important;
font-weight: 500 !important;
color: var(--audit-text-muted, #5a6370) !important;
letter-spacing: 0.03em !important;
opacity: 0.85 !important;
margin-top: 2px !important;
}
/* ── PREMIUM #4: PDP — Product info section visual hierarchy ───── */
body.catalog-product-view .product-info-main .product-info-stock-sku {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 0 !important;
border-bottom: 1px solid var(--awa-border, #e5e5e5) !important;
margin-bottom: 12px !important;
}
/* ── PREMIUM #5: Cart — Subtotal emphasis for B2B confidence ───── */
body.checkout-cart-index .cart-summary .grand.totals .amount .price,
body.checkout-cart-index .cart-totals .grand.totals .amount .price {
font-size: clamp(20px, 3vw, 28px) !important;
font-weight: 800 !important;
color: var(--awa-text, #111827) !important;
}
body.checkout-cart-index .cart-summary .grand.totals .mark,
body.checkout-cart-index .cart-totals .grand.totals .mark {
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
color: var(--audit-text-muted, #5a6370) !important;
}
/* ── PREMIUM #6: Checkout — Visual step clarity enhancement ───── */
body.checkout-index-index .opc-progress-bar .opc-progress-bar-item._active span,
body.rokanthemes-onepagecheckout .opc-progress-bar .opc-progress-bar-item._active span {
font-weight: 700 !important;
color: var(--awa-primary, #b73337) !important;
}
body.checkout-index-index .opc-progress-bar .opc-progress-bar-item._active::before,
body.rokanthemes-onepagecheckout .opc-progress-bar .opc-progress-bar-item._active::before {
background: var(--awa-primary, #b73337) !important;
box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.15) !important;
}
body.checkout-index-index .opc-progress-bar .opc-progress-bar-item._complete::before,
body.rokanthemes-onepagecheckout .opc-progress-bar .opc-progress-bar-item._complete::before {
background: #16a34a !important;
}
/* ── PREMIUM #7: Global — Form inputs B2B-grade styling ───── */
body .page-wrapper input.input-text:focus,
body .page-wrapper textarea:focus,
body .page-wrapper select:focus {
border-color: var(--awa-primary, #b73337) !important;
box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.08) !important;
outline: none !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
/* ── PREMIUM #8: PDP — Price display B2B emphasis ───── */
body.catalog-product-view .product-info-main .price-box .price {
font-size: clamp(24px, 4vw, 36px) !important;
font-weight: 800 !important;
color: var(--awa-text, #111827) !important;
line-height: 1.2 !important;
}
body.catalog-product-view .product-info-main .price-box .old-price .price {
font-size: 16px !important;
font-weight: 500 !important;
color: var(--audit-text-muted, #5a6370) !important;
text-decoration: line-through !important;
}
/* ── PREMIUM #9: PLP — Product card hover elevation refinement ───── */
:is(body.catalog-category-view, body.catalogsearch-result-index) .item-product:hover,
:is(body.catalog-category-view, body.catalogsearch-result-index) .product-item:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
transform: translateY(-2px) !important;
border-color: var(--awa-border, #d1d5db) !important;
}
/* ── PREMIUM #10: Global — Button micro-interaction ───── */
body .page-wrapper .action.primary:not(:disabled):active {
transform: scale(0.97) !important;
transition: transform 0.1s ease !important;
}
body .page-wrapper .action.primary:not(:disabled) {
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important;
}
body .page-wrapper .action.primary:not(:disabled):hover {
box-shadow: 0 4px 12px rgba(183, 51, 55, 0.2) !important;
}
/* ══════════════════════════════════════════════════════════════════
B2B PLP Quick Qty Stepper — 2026-05-07
Compact qty input for B2B users on product listing cards
══════════════════════════════════════════════════════════════════ */
.awa-plp-qty-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
margin-bottom: 8px !important;
border: 1px solid var(--awa-border-color, #e0e0e0) !important;
border-radius: 6px !important;
overflow: hidden !important;
height: 34px !important;
}
.awa-plp-qty-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 30px !important;
height: 100% !important;
border: none !important;
background: var(--awa-surface-light, #f5f5f5) !important;
color: var(--awa-text-primary, #333) !important;
font-size: 16px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: background 0.15s ease !important;
padding: 0 !important;
line-height: 1 !important;
}
.awa-plp-qty-btn:hover {
background: var(--awa-border-color, #e0e0e0) !important;
}
.awa-plp-qty-btn:active {
background: var(--awa-primary, #c62828) !important;
color: #fff !important;
}
.awa-plp-qty-input {
width: 42px !important;
height: 100% !important;
border: none !important;
border-left: 1px solid var(--awa-border-color, #e0e0e0) !important;
border-right: 1px solid var(--awa-border-color, #e0e0e0) !important;
text-align: center !important;
font-size: 13px !important;
font-weight: 600 !important;
padding: 0 !important;
margin: 0 !important;
background: #fff !important;
-moz-appearance: textfield !important;
appearance: textfield !important;
}
.awa-plp-qty-input::-webkit-inner-spin-button,
.awa-plp-qty-input::-webkit-outer-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
@media (max-width: 767px) {
.awa-plp-qty-wrap {
height: 30px !important;
}
.awa-plp-qty-btn {
width: 26px !important;
font-size: 14px !important;
}
.awa-plp-qty-input {
width: 36px !important;
font-size: 12px !important;
}
}
/* ===== awa-visual-consistency-2026-05-07.css (51KB) ===== */
/* =============================================================================
AWA MOTOS — Visual Consistency System (2026-05-07)
═══════════════════════════════════════════════════
Enforces unified design system across ALL pages.
Loaded after awa-visual-audit-final-2026-05-03.css for max cascade priority.
Sections:
1. GLOBAL RESETS & NORMALIZATION
2. CONTAINER & LAYOUT CONSISTENCY
3. TYPOGRAPHY SYSTEM
4. BUTTON STANDARDIZATION
5. FORM INPUT STANDARDIZATION
6. CARD & PRODUCT CONSISTENCY
7. SECTION SPACING SYSTEM
8. HEADER & NAVIGATION CONSISTENCY
9. FOOTER CONSISTENCY
10. RESPONSIVE CONSISTENCY
============================================================================= */
/* =============================================================================
1. GLOBAL RESETS & NORMALIZATION
============================================================================= */
/* Prevent horizontal overflow globally — clip avoids BFC/fixed-positioning breakage */
html {
overflow-x: clip !important; /* BFC-safe: does NOT create scroll container, preserves position:fixed (sticky header, modals, WhatsApp float) */
}
body {
font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: var(--awa-font-base, 14px) !important;
line-height: 1.6 !important;
color: var(--awa-text, #1a1a1a) !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
/* Normalize box-sizing */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* =============================================================================
2. CONTAINER & LAYOUT CONSISTENCY
============================================================================= */
/* Ensure all page containers have consistent max-width */
body:not(.page-layout-empty):not(.rokanthemes-onepagecheckout) .page-wrapper .page-main,
body:not(.page-layout-empty):not(.rokanthemes-onepagecheckout) .page-wrapper .columns {
max-width: var(--awa-container-max, 1440px) !important;
margin-inline: auto !important;
padding-inline: var(--awa-container-pad, clamp(16px, 3vw, 24px)) !important;
}
/* Category & CMS pages: consistent column gap */
.page-with-filter .columns .column.main,
.catalog-category-view .columns .column.main,
.catalogsearch-result-index .columns .column.main {
padding-left: 0 !important;
}
/* Eliminate stray margin/padding on wrapper elements */
.page-wrapper .page-main > .columns {
padding-inline: 0 !important;
}
/* =============================================================================
3. TYPOGRAPHY SYSTEM
============================================================================= */
/* Heading hierarchy — consistent across all pages */
h1, .page-title span,
.category-view .category-name,
.product-info-main .page-title-wrapper h1 {
font-size: var(--awa-font-4xl, 28px) !important;
font-weight: var(--awa-weight-bold, 700) !important;
line-height: 1.25 !important;
color: var(--awa-text, #1a1a1a) !important;
letter-spacing: -0.02em !important;
}
h2, .block-title strong,
.awa-section-header__title {
font-size: var(--awa-font-3xl, 24px) !important;
font-weight: var(--awa-weight-bold, 700) !important;
line-height: 1.3 !important;
color: var(--awa-text, #1a1a1a) !important;
}
h3, .sidebar .block-title strong {
font-size: var(--awa-font-2xl, 20px) !important;
font-weight: var(--awa-weight-semibold, 600) !important;
line-height: 1.35 !important;
}
h4 {
font-size: var(--awa-font-xl, 18px) !important;
font-weight: var(--awa-weight-semibold, 600) !important;
line-height: 1.4 !important;
}
/* Body text */
p, .std p, .cms-page-view .column.main p {
font-size: var(--awa-font-base, 14px) !important;
line-height: 1.7 !important;
color: var(--awa-text-secondary, #555555) !important;
}
/* Links — consistent color and transition */
a:not([class]) {
color: var(--awa-primary, #b73337) !important;
text-decoration: none !important;
transition: color var(--awa-duration-fast, 0.15s) var(--awa-ease, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}
a:not([class]):hover {
color: var(--awa-primary-hover, #8e2629) !important;
}
/* =============================================================================
4. BUTTON STANDARDIZATION
============================================================================= */
/* Primary button — consistent across all pages */
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) button.action.primary,
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) a.action.primary,
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) .action.primary,
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) button.action.tocart,
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) .btn-add-to-cart,
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) .b2b-primary-btn,
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) .awa-footer-business-contact__action--primary {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: var(--awa-space-2, 8px) !important;
min-height: var(--awa-btn-h, 44px) !important;
padding: 0 var(--awa-space-6, 24px) !important;
font-size: var(--awa-font-base, 14px) !important;
font-weight: var(--awa-weight-semibold, 600) !important;
line-height: 1 !important;
color: #fff !important;
background: var(--awa-primary, #b73337) !important;
border: none !important;
border-radius: var(--awa-radius-md, 8px) !important;
cursor: pointer !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: background var(--awa-duration-fast, 0.15s) var(--awa-ease),
transform var(--awa-duration-fast, 0.15s) var(--awa-ease),
box-shadow var(--awa-duration-fast, 0.15s) var(--awa-ease) !important;
}
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) button.action.primary:hover,
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) a.action.primary:hover,
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) .action.primary:hover,
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) button.action.tocart:hover,
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) .btn-add-to-cart:hover,
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) .b2b-primary-btn:hover {
background: var(--awa-primary-hover, #8e2629) !important;
transform: translateY(-1px) !important;
box-shadow: var(--awa-shadow-brand, 0 4px 16px rgba(183, 51, 55, 0.25)) !important;
}
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) button.action.primary:active,
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) a.action.primary:active,
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) .action.primary:active,
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) button.action.tocart:active,
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) .btn-add-to-cart:active,
body:not(.checkout-index-index):not(.rokanthemes-onepagecheckout):not(.ayo-curriculo-index-index):not(.curriculo-index-index) .b2b-primary-btn:active {
transform: translateY(0) !important;
box-shadow: none !important;
}
/* Secondary/outline buttons */
button.action.secondary,
a.action.secondary,
.action.secondary,
.action.viewcart,
.btn.viewcart {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: var(--awa-space-2, 8px) !important;
min-height: var(--awa-btn-h, 44px) !important;
padding: 0 var(--awa-space-5, 20px) !important;
font-size: var(--awa-font-base, 14px) !important;
font-weight: var(--awa-weight-semibold, 600) !important;
line-height: 1 !important;
color: var(--awa-primary, #b73337) !important;
background: transparent !important;
border: 1.5px solid var(--awa-primary, #b73337) !important;
border-radius: var(--awa-radius-md, 8px) !important;
cursor: pointer !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: all var(--awa-duration-fast, 0.15s) var(--awa-ease) !important;
}
button.action.secondary:hover,
a.action.secondary:hover,
.action.secondary:hover,
.action.viewcart:hover,
.btn.viewcart:hover {
background: var(--awa-primary-subtle, rgba(183, 51, 55, 0.08)) !important;
border-color: var(--awa-primary-hover, #8e2629) !important;
color: var(--awa-primary-hover, #8e2629) !important;
}
/* PLP add-to-cart specific — slightly smaller */
:is(body.catalog-category-view, body.catalogsearch-result-index) .btn-add-to-cart,
:is(body.catalog-category-view, body.catalogsearch-result-index) .b2b-primary-btn {
min-height: 40px !important;
padding: 0 var(--awa-space-4, 16px) !important;
font-size: var(--awa-font-sm, 12px) !important;
border-radius: var(--awa-radius-sm, 6px) !important;
}
/* =============================================================================
5. FORM INPUT STANDARDIZATION
============================================================================= */
/* PLP/search filters only — avoid overriding canonical form systems globally */
body.catalog-category-view .filter-options input[type="text"],
body.catalog-category-view .filter-options input[type="search"],
body.catalog-category-view .filter-options select:not([multiple]):not([size]),
body.catalogsearch-result-index .filter-options input[type="text"],
body.catalogsearch-result-index .filter-options input[type="search"],
body.catalogsearch-result-index .filter-options select:not([multiple]):not([size]) {
width: 100% !important;
min-height: var(--awa-input-h, 44px) !important;
padding: var(--awa-space-2-5, 10px) var(--awa-space-3, 12px) !important;
font-size: var(--awa-font-base, 14px) !important;
font-family: inherit !important;
line-height: 1.5 !important;
color: var(--awa-text, #1a1a1a) !important;
background: var(--awa-bg, #ffffff) !important;
border: 1px solid var(--awa-border, #e5e5e5) !important;
border-radius: var(--awa-radius-md, 8px) !important;
outline: none !important;
transition: border-color var(--awa-duration-fast, 0.15s) var(--awa-ease),
box-shadow var(--awa-duration-fast, 0.15s) var(--awa-ease) !important;
-webkit-appearance: none !important;
appearance: none !important;
}
body.catalog-category-view .filter-options input[type="text"]:focus,
body.catalog-category-view .filter-options input[type="search"]:focus,
body.catalog-category-view .filter-options select:not([multiple]):not([size]):focus,
body.catalogsearch-result-index .filter-options input[type="text"]:focus,
body.catalogsearch-result-index .filter-options input[type="search"]:focus,
body.catalogsearch-result-index .filter-options select:not([multiple]):not([size]):focus {
border-color: var(--awa-primary, #b73337) !important;
box-shadow: 0 0 0 3px var(--awa-primary-subtle, rgba(183, 51, 55, 0.08)) !important;
}
/* Error state */
input.mage-error,
select.mage-error,
textarea.mage-error,
input.validation-failed {
border-color: var(--awa-error, #dc2626) !important;
box-shadow: 0 0 0 3px var(--awa-error-bg, rgba(220, 38, 38, 0.08)) !important;
}
/* Labels — keep explicit B2B helper, avoid overriding global form labels */
.b2b-field-label,
body.catalog-category-view .filter-options .field .label label,
body.catalog-category-view .filter-options .field > .label,
body.catalog-category-view .filter-options .fieldset > .field > .label,
body.catalogsearch-result-index .filter-options .field .label label,
body.catalogsearch-result-index .filter-options .field > .label,
body.catalogsearch-result-index .filter-options .fieldset > .field > .label {
display: block !important;
margin-bottom: var(--awa-space-1-5, 6px) !important;
font-size: var(--awa-font-sm, 12px) !important;
font-weight: var(--awa-weight-medium, 500) !important;
color: var(--awa-text-secondary, #555555) !important;
letter-spacing: 0.01em !important;
}
/* Select arrow normalization — PLP/search filters only */
body.catalog-category-view .filter-options select:not([multiple]):not([size]),
body.catalogsearch-result-index .filter-options select:not([multiple]):not([size]) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 8.5L1 3.5h10z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
padding-right: 36px !important;
}
/* Textarea specific */
textarea {
min-height: 100px !important;
resize: vertical !important;
}
/* =============================================================================
6. CARD & PRODUCT CONSISTENCY
============================================================================= */
/* Product cards — consistent spacing & transitions across all pages */
.item-product,
.product-item {
border-radius: var(--awa-radius-lg, 16px) !important;
overflow: hidden !important;
transition: transform var(--awa-duration, 0.25s) var(--awa-ease),
box-shadow var(--awa-duration, 0.25s) var(--awa-ease) !important;
}
/* Product card hover — unified elevation */
.item-product:hover,
.product-item:hover {
transform: translateY(-4px) !important;
box-shadow: var(--awa-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12)) !important;
}
/* Product name — consistent sizing */
.item-product .product-item-link,
.product-item .product-item-link,
.item-product .product-name a {
font-size: var(--awa-font-base, 14px) !important;
font-weight: var(--awa-weight-bold, 700) !important;
line-height: 1.4 !important;
color: var(--awa-text, #1a1a1a) !important;
text-decoration: none !important;
}
.item-product .product-item-link:hover,
.product-item .product-item-link:hover,
.item-product .product-name a:hover {
color: var(--awa-primary, #b73337) !important;
}
/* Price display — consistent */
.price-box .price,
.info-price .price {
font-size: var(--awa-font-xl, 18px) !important;
font-weight: var(--awa-weight-extrabold, 800) !important;
color: var(--awa-text, #1a1a1a) !important;
}
/* Old price strike-through */
.price-box .old-price .price,
.info-price .old-price .price {
font-size: var(--awa-font-sm, 12px) !important;
font-weight: var(--awa-weight-normal, 400) !important;
color: var(--awa-text-muted, #888888) !important;
text-decoration: line-through !important;
}
/* Badge positioning — consistent */
.item-product .hot-onsale,
.product-item .hot-onsale {
position: absolute !important;
top: var(--awa-space-3, 12px) !important;
left: var(--awa-space-3, 12px) !important;
z-index: 2 !important;
}
.item-product .onsale,
.product-item .onsale {
display: inline-flex !important;
align-items: center !important;
padding: var(--awa-space-1, 4px) var(--awa-space-2, 8px) !important;
font-size: var(--awa-font-xs, 11px) !important;
font-weight: var(--awa-weight-bold, 700) !important;
background: var(--awa-primary, #b73337) !important;
color: #fff !important;
border-radius: var(--awa-radius-xs, 4px) !important;
letter-spacing: 0.02em !important;
}
/* Product image — consistent aspect ratio */
.item-product .product-image-photo,
.product-item .product-image-photo {
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
width: 100% !important;
height: auto !important;
}
/* =============================================================================
7. SECTION SPACING SYSTEM
============================================================================= */
/* Homepage sections — consistent vertical rhythm */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .awa-home-section,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .ayo-home5-section,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .top-home-content {
padding-top: var(--awa-space-10, 40px) !important;
padding-bottom: var(--awa-space-10, 40px) !important;
}
/* First section after slider — tighter */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .top-home-content--above-fold + .top-home-content {
padding-top: var(--awa-space-8, 32px) !important;
}
/* Section headers — consistent spacing */
.awa-section-header {
margin-bottom: var(--awa-space-6, 24px) !important;
}
/* Category page — consistent section gaps */
body.catalog-category-view .column.main > * + * {
margin-top: var(--awa-space-6, 24px) !important;
}
/* PDP sections spacing */
body.catalog-product-view .product-info-main > * + * {
margin-top: var(--awa-space-4, 16px) !important;
}
/* =============================================================================
8. HEADER & NAVIGATION CONSISTENCY
============================================================================= */
/* Main navigation items — consistent spacing */
#awa-primary-navigation .nav-item > a,
.category-dropdown .nav-item > a {
padding: var(--awa-space-3, 12px) var(--awa-space-4, 16px) !important;
font-size: var(--awa-font-base, 14px) !important;
font-weight: var(--awa-weight-medium, 500) !important;
color: var(--awa-text, #1a1a1a) !important;
transition: color var(--awa-duration-fast, 0.15s) var(--awa-ease),
background var(--awa-duration-fast, 0.15s) var(--awa-ease) !important;
}
#awa-primary-navigation .nav-item > a:hover,
.category-dropdown .nav-item > a:hover {
color: var(--awa-primary, #b73337) !important;
background: var(--awa-primary-subtle, rgba(183, 51, 55, 0.08)) !important;
border-radius: var(--awa-radius-sm, 6px) !important;
}
/* Search bar consistent height */
.awa-header-search-col .form-search .input-text,
.top-search .form-search .input-text,
#search {
min-height: 42px !important;
border-radius: var(--awa-radius-full, 9999px) !important;
padding-left: var(--awa-space-5, 20px) !important;
padding-right: var(--awa-space-12, 48px) !important;
font-size: var(--awa-font-base, 14px) !important;
}
/* Header icons — consistent sizing */
.awa-header-actions .action,
.header-mini-cart,
.awa-header-mobile-toggle {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 40px !important;
min-height: 40px !important;
}
/* Desktop header hardening: search submit button + guest auth prompt */
@media (min-width: 992px) {
#html-body .page-wrapper .awa-site-header form#search_mini_form {
border-radius: var(--awa-radius-full, 9999px) !important;
overflow: hidden !important;
}
#html-body .page-wrapper .awa-site-header form#search_mini_form .actions .action.search,
#html-body .page-wrapper .awa-site-header form#search_mini_form button.action.search {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px !important;
min-width: 48px !important;
height: 100% !important;
min-height: 42px !important;
padding: 0 !important;
margin: 0 !important;
background: var(--awa-primary, #b73337) !important;
color: var(--awa-white, #fff) !important;
border: 0 !important;
border-left: 1px solid var(--awa-border, #e5e5e5) !important;
border-radius: 0 var(--awa-radius-full, 9999px) var(--awa-radius-full, 9999px) 0 !important;
box-shadow: none !important;
}
#html-body .page-wrapper .awa-site-header form#search_mini_form .actions .action.search svg,
#html-body .page-wrapper .awa-site-header form#search_mini_form button.action.search svg {
width: 19px !important;
height: 19px !important;
stroke: var(--awa-white, #fff) !important;
color: var(--awa-white, #fff) !important;
fill: none !important;
}
#html-body .page-wrapper .awa-site-header .awa-header-account-prompt[data-awa-auth-state="guest"] .awa-header-account-prompt__guest {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px !important;
}
#html-body .page-wrapper .awa-site-header .awa-header-account-prompt[data-awa-auth-state="guest"] .awa-header-account-prompt__line1 {
font-size: 13px !important;
line-height: 1.15 !important;
font-weight: 500 !important;
color: var(--awa-text, #1a1a1a) !important;
}
#html-body .page-wrapper .awa-site-header .awa-header-account-prompt[data-awa-auth-state="guest"] .awa-header-account-prompt__line2 {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 14px !important;
line-height: 1.2 !important;
color: var(--awa-text, #1a1a1a) !important;
}
#html-body .page-wrapper .awa-site-header .awa-header-account-prompt[data-awa-auth-state="guest"] .awa-header-account-prompt__link,
#html-body .page-wrapper .awa-site-header .awa-header-account-prompt[data-awa-auth-state="guest"] .awa-header-account-prompt__link--register {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
color: var(--awa-primary, #b73337) !important;
font-size: 14px !important;
font-weight: 700 !important;
text-decoration: none !important;
box-shadow: none !important;
}
#html-body .page-wrapper .awa-site-header .awa-header-account-prompt[data-awa-auth-state="guest"] .awa-header-account-prompt__separator {
color: var(--awa-text, #1a1a1a) !important;
font-weight: 500 !important;
}
/* Auth shell (page-layout-empty): enforce same header visual parity without JS patches. */
#html-body.b2b-auth-shell .page-wrapper .awa-site-header #search_mini_form .actions .action.search,
#html-body.page-layout-empty .page-wrapper .awa-site-header #search_mini_form .actions .action.search {
background: var(--awa-primary, #b73337) !important;
background-color: var(--awa-primary, #b73337) !important;
color: var(--awa-white, #fff) !important;
border: 0 !important;
border-left: 1px solid var(--awa-border, #e5e5e5) !important;
border-radius: 0 var(--awa-radius-full, 9999px) var(--awa-radius-full, 9999px) 0 !important;
}
#html-body.b2b-auth-shell .page-wrapper .awa-site-header #search_mini_form .actions .action.search svg,
#html-body.page-layout-empty .page-wrapper .awa-site-header #search_mini_form .actions .action.search svg {
stroke: var(--awa-white, #fff) !important;
color: var(--awa-white, #fff) !important;
fill: none !important;
}
#html-body.b2b-auth-shell .page-wrapper .awa-site-header .awa-header-account-prompt[data-awa-auth-state="guest"] .awa-header-account-prompt__line2 .awa-header-account-prompt__link,
#html-body.b2b-auth-shell .page-wrapper .awa-site-header .awa-header-account-prompt[data-awa-auth-state="guest"] .awa-header-account-prompt__line2 .awa-header-account-prompt__link--register,
#html-body.page-layout-empty .page-wrapper .awa-site-header .awa-header-account-prompt[data-awa-auth-state="guest"] .awa-header-account-prompt__line2 .awa-header-account-prompt__link,
#html-body.page-layout-empty .page-wrapper .awa-site-header .awa-header-account-prompt[data-awa-auth-state="guest"] .awa-header-account-prompt__line2 .awa-header-account-prompt__link--register {
font-size: 14px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
color: var(--awa-primary, #b73337) !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
}
/* =============================================================================
9. FOOTER CONSISTENCY
============================================================================= */
/* Footer sections — consistent padding */
.footer-container,
.page-footer {
border-top: 1px solid var(--awa-border, #e5e5e5) !important;
}
/* Footer links — consistent styling */
.footer-container a:not(.action):not([class*="btn"]) {
font-size: var(--awa-font-base, 14px) !important;
color: var(--awa-text-secondary, #555555) !important;
transition: color var(--awa-duration-fast, 0.15s) var(--awa-ease) !important;
}
.footer-container a:not(.action):not([class*="btn"]):hover {
color: var(--awa-primary, #b73337) !important;
}
/* Footer headings — consistent */
.footer-container h4,
.footer-container .block-title strong {
font-size: var(--awa-font-lg, 16px) !important;
font-weight: var(--awa-weight-bold, 700) !important;
color: var(--awa-text, #1a1a1a) !important;
margin-bottom: var(--awa-space-4, 16px) !important;
}
/* Newsletter input — consistent with form system */
.footer-container .newsletter .control input {
border-radius: var(--awa-radius-full, 9999px) !important;
padding-left: var(--awa-space-5, 20px) !important;
}
.footer-container .newsletter .action.subscribe {
border-radius: var(--awa-radius-full, 9999px) !important;
min-height: var(--awa-btn-h, 44px) !important;
}
/* =============================================================================
10. RESPONSIVE CONSISTENCY
============================================================================= */
@media (max-width: 991px) {
/* Tablet: adjust container */
body:not(.page-layout-empty):not(.rokanthemes-onepagecheckout) .page-wrapper .page-main,
body:not(.page-layout-empty):not(.rokanthemes-onepagecheckout) .page-wrapper .columns {
padding-inline: var(--awa-space-4, 16px) !important;
}
/* Typography scale down */
h1, .page-title span {
font-size: var(--awa-font-3xl, 24px) !important;
}
h2, .block-title strong,
.awa-section-header__title {
font-size: var(--awa-font-2xl, 20px) !important;
}
/* Section spacing — tighter on tablet */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .awa-home-section,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .ayo-home5-section {
padding-top: var(--awa-space-8, 32px) !important;
padding-bottom: var(--awa-space-8, 32px) !important;
}
}
@media (max-width: 767px) {
/* Mobile: tighter spacing */
body:not(.page-layout-empty):not(.rokanthemes-onepagecheckout) .page-wrapper .page-main,
body:not(.page-layout-empty):not(.rokanthemes-onepagecheckout) .page-wrapper .columns {
padding-inline: var(--awa-space-3, 12px) !important;
}
/* Typography: mobile sizes */
h1, .page-title span {
font-size: var(--awa-font-2xl, 20px) !important;
}
h2, .block-title strong,
.awa-section-header__title {
font-size: var(--awa-font-xl, 18px) !important;
}
/* Sections — compact mobile */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .awa-home-section,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .ayo-home5-section {
padding-top: var(--awa-space-6, 24px) !important;
padding-bottom: var(--awa-space-6, 24px) !important;
}
/* Buttons: full-width on mobile where appropriate */
.checkout-cart-index .action.primary,
.checkout-cart-index .action.viewcart,
.block-minicart .action.primary,
.block-minicart .action.viewcart {
width: 100% !important;
}
/* Product cards: 2-column grid on mobile
FIX 2026-05-08: Bug anterior apontava o grid pro wrapper DIV,
deixando o UL em apenas 175px (~1 coluna). Agora aponta pro UL.
minmax(0,1fr) previne overflow. width:100% garante span completo. */
:is(body.catalog-category-view, body.catalogsearch-result-index)
.wrapper.grid.products-grid ul.product-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: var(--awa-space-2, 8px) !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* Product card: compact on mobile */
:is(body.catalog-category-view, body.catalogsearch-result-index) .item-product {
border-radius: var(--awa-radius-md, 8px) !important;
}
/* PLP button smaller on mobile */
:is(body.catalog-category-view, body.catalogsearch-result-index) .btn-add-to-cart,
:is(body.catalog-category-view, body.catalogsearch-result-index) .b2b-primary-btn {
min-height: 36px !important;
padding: 0 var(--awa-space-3, 12px) !important;
font-size: var(--awa-font-xs, 11px) !important;
}
/* Price smaller on mobile cards */
:is(body.catalog-category-view, body.catalogsearch-result-index) .price-box .price,
:is(body.catalog-category-view, body.catalogsearch-result-index) .info-price .price {
font-size: var(--awa-font-lg, 16px) !important;
}
/* Forms: stack properly */
.field .control {
margin-top: var(--awa-space-1, 4px) !important;
}
/* Prevent overflow on mobile */
/* Footer: single column on mobile */
.footer-container .row,
.footer-container [class*="col-"] {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 480px) {
/* Extra small: micro adjustments */
body {
font-size: 13px !important;
}
/* Buttons even more compact */
button.action.primary,
.action.primary,
.btn-add-to-cart {
min-height: 40px !important;
padding: 0 var(--awa-space-4, 16px) !important;
font-size: 13px !important;
}
/* Input smaller */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
.input-text {
min-height: 40px !important;
font-size: 13px !important;
}
}
/* =============================================================================
UTILITY: Prevent CLS (Cumulative Layout Shift)
============================================================================= */
/* Images: prevent layout shift */
img {
max-width: 100%;
height: auto;
}
/* Lazy images: maintain space */
img[loading="lazy"] {
min-height: 1px;
}
/* =============================================================================
FOCUS VISIBLE: Accessibility
============================================================================= */
/* Consistent focus ring */
:focus-visible {
outline: 2px solid var(--awa-primary, #b73337) !important;
outline-offset: 2px !important;
}
/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
outline: none !important;
}
/* =============================================================================
SCROLLBAR: Consistent styling
============================================================================= */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--awa-bg-muted, #f5f5f5);
}
::-webkit-scrollbar-thumb {
background: var(--awa-border-strong, #d0d0d0);
border-radius: var(--awa-radius-pill, 9999px);
}
::-webkit-scrollbar-thumb:hover {
background: var(--awa-text-muted, #888888);
}
/* =============================================================================
11. VISUAL POLISH — Premium B2B Feel
============================================================================= */
/* Smooth page transitions */
.page-wrapper {
transition: opacity var(--awa-duration, 0.25s) var(--awa-ease) !important;
}
/* Breadcrumbs — consistent styling */
.breadcrumbs {
padding: var(--awa-space-3, 12px) 0 !important;
margin-bottom: var(--awa-space-4, 16px) !important;
}
.breadcrumbs li {
font-size: var(--awa-font-sm, 12px) !important;
color: var(--awa-text-muted, #888888) !important;
}
.breadcrumbs li a {
color: var(--awa-text-secondary, #555555) !important;
}
.breadcrumbs li a:hover {
color: var(--awa-primary, #b73337) !important;
}
.breadcrumbs li.active,
.breadcrumbs li:last-child {
color: var(--awa-text, #1a1a1a) !important;
font-weight: var(--awa-weight-medium, 500) !important;
}
/* Messages — consistent */
.messages .message {
border-radius: var(--awa-radius-md, 8px) !important;
padding: var(--awa-space-3, 12px) var(--awa-space-4, 16px) !important;
font-size: var(--awa-font-base, 14px) !important;
margin-bottom: var(--awa-space-4, 16px) !important;
}
.messages .message-success {
background: var(--awa-success-bg, #f0fdf4) !important;
border: 1px solid var(--awa-success, #2d7a3a) !important;
color: var(--awa-success, #2d7a3a) !important;
}
.messages .message-error {
background: var(--awa-error-bg, #fef2f2) !important;
border: 1px solid var(--awa-error, #dc2626) !important;
color: var(--awa-error-text, #7f1d1d) !important;
}
.messages .message-warning {
background: var(--awa-warning-bg, #fff7ed) !important;
border: 1px solid var(--awa-warning, #f97316) !important;
color: #9a3412 !important;
}
.messages .message-info,
.messages .message-notice {
background: var(--awa-info-bg, #f0f9ff) !important;
border: 1px solid var(--awa-info, #0ea5e9) !important;
color: #0c4a6e !important;
}
/* Pagination — consistent */
.toolbar .pages .items {
display: flex !important;
gap: var(--awa-space-1, 4px) !important;
align-items: center !important;
}
.toolbar .pages .item a,
.toolbar .pages .item strong {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 36px !important;
min-height: 36px !important;
padding: 0 var(--awa-space-2, 8px) !important;
font-size: var(--awa-font-base, 14px) !important;
font-weight: var(--awa-weight-medium, 500) !important;
border-radius: var(--awa-radius-sm, 6px) !important;
transition: all var(--awa-duration-fast, 0.15s) var(--awa-ease) !important;
}
.toolbar .pages .item a {
color: var(--awa-text-secondary, #555555) !important;
border: 1px solid var(--awa-border, #e5e5e5) !important;
background: var(--awa-bg, #ffffff) !important;
}
.toolbar .pages .item a:hover {
border-color: var(--awa-primary, #b73337) !important;
color: var(--awa-primary, #b73337) !important;
background: var(--awa-primary-subtle, rgba(183, 51, 55, 0.08)) !important;
}
.toolbar .pages .item.current strong {
color: #fff !important;
background: var(--awa-primary, #b73337) !important;
border: 1px solid var(--awa-primary, #b73337) !important;
}
/* Toolbar sorter/limiter — consistent */
.toolbar select,
.toolbar .sorter-options,
.toolbar .limiter-options {
min-height: 36px !important;
border-radius: var(--awa-radius-sm, 6px) !important;
font-size: var(--awa-font-sm, 12px) !important;
padding: 0 var(--awa-space-8, 32px) 0 var(--awa-space-3, 12px) !important;
}
/* Sidebar filters — consistent */
.sidebar .block-content .filter-options-item {
border-bottom: 1px solid var(--awa-border, #e5e5e5) !important;
padding: var(--awa-space-3, 12px) 0 !important;
}
.sidebar .block-content .filter-options-title {
font-size: var(--awa-font-base, 14px) !important;
font-weight: var(--awa-weight-semibold, 600) !important;
color: var(--awa-text, #1a1a1a) !important;
}
.sidebar .block-content .filter-options-content .item a {
font-size: var(--awa-font-base, 14px) !important;
color: var(--awa-text-secondary, #555555) !important;
padding: var(--awa-space-1-5, 6px) 0 !important;
}
.sidebar .block-content .filter-options-content .item a:hover {
color: var(--awa-primary, #b73337) !important;
}
/* Loading indicator — consistent */
.loading-mask {
background: rgba(255, 255, 255, 0.8) !important;
backdrop-filter: blur(4px) !important;
}
.loading-mask .loader > img {
width: 40px !important;
height: 40px !important;
}
/* Table styling — consistent */
.data-table,
.table-wrapper table {
width: 100% !important;
border-collapse: collapse !important;
}
.data-table th,
.table-wrapper table th {
background: var(--awa-bg-muted, #f5f5f5) !important;
padding: var(--awa-space-3, 12px) var(--awa-space-4, 16px) !important;
font-size: var(--awa-font-sm, 12px) !important;
font-weight: var(--awa-weight-semibold, 600) !important;
color: var(--awa-text-secondary, #555555) !important;
text-align: left !important;
text-transform: uppercase !important;
letter-spacing: 0.03em !important;
border-bottom: 2px solid var(--awa-border, #e5e5e5) !important;
}
.data-table td,
.table-wrapper table td {
padding: var(--awa-space-3, 12px) var(--awa-space-4, 16px) !important;
font-size: var(--awa-font-base, 14px) !important;
color: var(--awa-text, #1a1a1a) !important;
border-bottom: 1px solid var(--awa-border, #e5e5e5) !important;
}
.data-table tbody tr:hover,
.table-wrapper table tbody tr:hover {
background: var(--awa-bg-subtle, #fafafa) !important;
}
/* Empty state — consistent */
.cart-empty,
.message.empty {
text-align: center !important;
padding: var(--awa-space-12, 48px) var(--awa-space-6, 24px) !important;
color: var(--awa-text-muted, #888888) !important;
font-size: var(--awa-font-lg, 16px) !important;
}
/* Tooltip — consistent */
.tooltip .tooltip-content {
background: var(--awa-text, #1a1a1a) !important;
color: #fff !important;
border-radius: var(--awa-radius-sm, 6px) !important;
padding: var(--awa-space-2, 8px) var(--awa-space-3, 12px) !important;
font-size: var(--awa-font-sm, 12px) !important;
box-shadow: var(--awa-shadow-md) !important;
}
/* B2B landing semantic fix parity: preserve old H1 visual after content H1->H2 */
body.cms-seja-cliente-b2b .page-wrapper .column.main h2.b2b-program-title {
font-size: 28px !important;
line-height: 35px !important;
margin-top: 0 !important;
margin-bottom: 10.5px !important;
font-weight: 700 !important;
color: var(--awa-text, #1a1a1a) !important;
}
/* B2B CMS page: ensure H1 (page title) stays larger than H2 on mobile */
@media (max-width: 767px) {
body.cms-seja-cliente-b2b .page-wrapper h1,
body.cms-seja-cliente-b2b .page-wrapper .page-title-wrapper .page-title {
font-size: 32px !important;
}
}
/* =============================================================================
MELHORIAS MODERNAS -- 2026-05-07 (Append v2)
-------------------------------------------------------------------------------
Auditoria visual de 07/05/2026: mobile cards, PDP, categoria, homepage.
Cada bloco e independente e seguro de remover individualmente.
============================================================================= */
/* --- M-01-WRAPPER: Safety-net para o wrapper div em mobile -----------------
Garante que .wrapper.grid.products-grid seja display:block no mobile para
que o UL filho (ul.product-grid) ocupe 100% da largura do pai.
O .min.css antigo tinha display:grid neste wrapper — causando o UL ficar
em apenas 1 celula de 175px. Esta regra evita regressao.
---------------------------------------------------------------------------- */
@media (max-width: 767px) {
:is(body.catalog-category-view, body.catalogsearch-result-index)
.wrapper.grid.products-grid {
display: block !important;
grid-template-columns: none !important;
}
}
/* --- M-01-CLAMP: Override do container query que clamp em 1 linha -----------
themes.min.css: @container product-grid (width < 400px) { -webkit-line-clamp:1 }
A 375px o .products-grid tem ~351px < 400px, entao dispara.
Este override no ultimo CSS carregado (maior prioridade) forca 3 linhas.
---------------------------------------------------------------------------- */
@container product-grid (width < 400px) {
.item-product .product-name a,
.item-product .product-item-link,
.product-item .product-item-name a,
.product-item .product-item-link {
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
font-size: 12px !important;
}
}
/* --- M-01 MOBILE PRODUCT NAME -------------------------------------------------
overflow-wrap:anywhere do _grid-listing.less quebra "Bagageiro" em
"Bagage" / "iro..." nos cards de 2 colunas (375px ~171px/col).
Fix: break-word quebra apenas quando uma palavra inteira nao cabe.
---------------------------------------------------------------------------- */
@media (max-width: 767px) {
:is(body.catalog-category-view, body.catalogsearch-result-index)
.wrapper.grid.products-grid .item-product .product-item-link {
overflow-wrap: break-word !important; /* era: anywhere via _grid-listing.less */
word-break: normal !important;
hyphens: none !important;
-webkit-line-clamp: 3 !important; /* 3 linhas p/ nomes longos no 2-col */
line-clamp: 3 !important;
min-height: calc(1.4em * 3) !important;
font-size: 12px !important;
}
}
/* --- M-02 MOBILE CARDS INFO -- SKU + logistics compactos no 2-col -----------
---------------------------------------------------------------------------- */
@media (max-width: 767px) {
:is(body.catalog-category-view, body.catalogsearch-result-index)
.wrapper.grid.products-grid .item-product .awa-b2b-sku {
font-size: 10px !important;
gap: 2px !important;
}
:is(body.catalog-category-view, body.catalogsearch-result-index)
.wrapper.grid.products-grid .item-product .awa-b2b-logistics {
font-size: 10px !important;
margin-top: 2px !important;
}
}
/* --- D-01 DESKTOP CARDS -- border sutil + hover refinado na PLP -------------
Cards ganham profundidade sem peso visual adicional.
border-color muda no hover reforcando a identidade da marca.
---------------------------------------------------------------------------- */
@media (min-width: 768px) {
:is(body.catalog-category-view, body.catalogsearch-result-index)
.wrapper.grid.products-grid .item-product {
border: 1px solid rgba(0, 0, 0, 0.04) !important;
}
:is(body.catalog-category-view, body.catalogsearch-result-index)
.wrapper.grid.products-grid .item-product:hover {
border-color: rgba(183, 51, 55, 0.15) !important;
}
}
/* --- H-01 HOME SECTIONS -- accent underline nos titulos ---------------------
Linha vermelha curta abaixo do titulo reforca a identidade visual AWA.
---------------------------------------------------------------------------- */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
.awa-section-header__title {
display: inline-block !important;
}
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
.awa-section-header__title::after {
content: '' !important;
display: block !important;
width: 36px !important;
height: 3px !important;
background: var(--awa-primary, #b73337) !important;
border-radius: 2px !important;
margin-top: 6px !important;
}
/* H-01-OVERRIDE: awa-super-home.css oculta ::after em .awa-carousel-section
com seletor mais especifico. Aqui reabilitamos para manter consistencia.
Seletor de mesma ou maior especificidade para ganhar a cascata. */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
.page-wrapper .awa-carousel-section .awa-section-header__title::after,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
.page-wrapper .awa-carousel-section .awa-section-header::after {
content: '' !important;
display: block !important;
width: 36px !important;
height: 3px !important;
background: var(--awa-primary, #b73337) !important;
border-radius: 2px !important;
margin-top: 6px !important;
}
/* --- P-01 PDP PRICE -- hierarquia visual (usuario logado) -------------------
Preco mais proeminente = decisao de compra mais rapida.
clamp() garante legibilidade do mobile ao 4K.
---------------------------------------------------------------------------- */
.catalog-product-view .product-info-main .price-box .price {
font-size: clamp(26px, 3.5vw, 34px) !important;
font-weight: 900 !important;
letter-spacing: -0.03em !important;
line-height: 1.1 !important;
}
/* --- P-02 PDP B2B PRICE GATE -- "Faca login para ver precos" estilizado -----
Transforma o gate de preco em CTA claro ao inves de texto plano.
---------------------------------------------------------------------------- */
.catalog-product-view .b2b-login-to-see-price {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 10px 16px !important;
background: var(--awa-surface-alt, #f8fafc) !important;
border: 1px solid var(--awa-border, #e2e8f0) !important;
border-radius: 10px !important;
font-size: 14px !important;
color: var(--awa-text-secondary, #475569) !important;
}
.catalog-product-view .b2b-login-to-see-price a {
color: var(--awa-primary, #b73337) !important;
font-weight: 700 !important;
text-decoration: none !important;
}
.catalog-product-view .b2b-login-to-see-price a:hover {
text-decoration: underline !important;
}
/* --- P-03 PDP ADD TO CART -- micro-interacao de elevacao --------------------
Botao sobe 1px e ganha sombra colorida no hover => feedback visual claro.
---------------------------------------------------------------------------- */
.catalog-product-view .box-tocart .action.tocart,
.catalog-product-view .btn-add-to-cart {
transition: filter 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease !important;
}
.catalog-product-view .box-tocart .action.tocart:hover,
.catalog-product-view .btn-add-to-cart:hover {
filter: brightness(1.06) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 16px rgba(183, 51, 55, 0.3) !important;
}
.catalog-product-view .box-tocart .action.tocart:active,
.catalog-product-view .btn-add-to-cart:active {
transform: translateY(0) !important;
filter: brightness(0.97) !important;
box-shadow: none !important;
}
/* --- B-01 BREADCRUMBS -- legibilidade e hierarquia -------------------------
---------------------------------------------------------------------------- */
.breadcrumbs .items {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 2px 4px !important;
font-size: 13px !important;
}
.breadcrumbs .item {
color: var(--awa-text-muted, #888) !important;
}
.breadcrumbs .item strong {
color: var(--awa-text, #1a1a1a) !important;
font-weight: 600 !important;
}
.breadcrumbs .item a {
color: var(--awa-text-muted, #888) !important;
text-decoration: none !important;
transition: color 0.15s ease !important;
}
.breadcrumbs .item a:hover {
color: var(--awa-primary, #b73337) !important;
}
/* --- FOCUS-01 KEYBOARD NAVIGATION -- WCAG AA focus-visible ------------------
Garante anel de foco visivel para acessibilidade em navegacao por teclado.
---------------------------------------------------------------------------- */
.product-item-link:focus-visible,
.action.tocart:focus-visible,
.action.primary:focus-visible,
.action.secondary:focus-visible,
button:focus-visible,
a:focus-visible {
outline: 2px solid var(--awa-primary, #b73337) !important;
outline-offset: 3px !important;
border-radius: 3px !important;
}
/* --- SCROLL-01 SMOOTH SCROLL -- conforto de navegacao -----------------------
Apenas quando o usuario nao tem preferencia por reducao de movimento.
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth !important;
}
}
/* =============================================================================
ROUND 2 — Visual Audit 2026-05-08 (Playwright-detected issues)
============================================================================= */
/* --- D-02 CARD BORDER CONSISTENCY -------------------------------------------
Cards in .top-home-content--trust-and-offers use rgba(0,0,0,0.07) while
all other cards use rgba(15,23,42,0.1). Unify to the primary token.
---------------------------------------------------------------------------- */
.top-home-content--trust-and-offers .item-product {
border-color: rgba(15, 23, 42, 0.1) !important;
}
/* --- S-01 SECTION PADDING NORMALIZATION -------------------------------------
Carousel sections alternate between 20px, 21.6px, 24px padding-top.
Normalize to a consistent 24px vertical rhythm.
---------------------------------------------------------------------------- */
.ayo-home5-wrapper .top-home-content.awa-carousel-section {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
/* --- S-02 SECTION MARGIN NORMALIZATION --------------------------------------
Some sections have unexplained marginTop: 8px. Remove for consistency.
All section spacing handled by marginBottom: 28px (already consistent).
---------------------------------------------------------------------------- */
.ayo-home5-wrapper .top-home-content.awa-carousel-section {
margin-top: 0 !important;
}
/* --- B-02 MOBILE BREADCRUMBS COMPACT ----------------------------------------
Breadcrumbs on mobile PDP are 88px tall (wrapping to 3+ lines).
Make them scrollable horizontally and compact on small screens.
---------------------------------------------------------------------------- */
@media (max-width: 767px) {
.breadcrumbs .items {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
white-space: nowrap !important;
padding-bottom: 4px !important;
scrollbar-width: none !important; /* Firefox */
}
.breadcrumbs .items::-webkit-scrollbar {
display: none !important; /* Chrome/Safari */
}
.breadcrumbs .item {
flex-shrink: 0 !important;
}
.nav-breadcrumbs {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
}
/* =============================================================================
FOOTER MODERN — Clean, flat footer UI (2026-05-10)
Removes card borders, flattens typography, modern social icons, newsletter
gradient. All !important — loads second-to-last in cascade.
============================================================================= */
/* FM-1: Remove column card borders & backgrounds */
.vela-content.velaFooterMenu {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
.velaContent {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* FM-2: Column titles — small, bold, uppercase with brand-red underline */
h4.velaFooterTitle {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #1a1a1a !important;
padding-bottom: 8px !important;
margin-bottom: 12px !important;
border-bottom: 2px solid #b73337 !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
box-shadow: none !important;
}
/* FM-3: Footer links — flat, neutral, hover → brand red */
.velaFooterLinks li {
border-top: none !important;
list-style: none !important;
}
.velaFooterLinks li + li {
border-top: none !important;
}
.velaFooterLinks a,
.page_footer .footer-content a {
color: #555 !important;
text-decoration: none !important;
font-size: 13px !important;
line-height: 1.9 !important;
transition: color 0.15s !important;
}
.velaFooterLinks a:hover,
.page_footer .footer-content a:hover {
color: #b73337 !important;
text-decoration: none !important;
}
.velaFooterLinks a:visited,
.page_footer .footer-content a:visited {
color: #555 !important;
}
/* FM-4: Remove address card border & background in Atendimento column */
.awa-footer-atendimento__store {
border: none !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
}
.awa-footer-atendimento__phone a,
.awa-footer-atendimento__email a {
font-size: 13px !important;
color: #555 !important;
font-weight: 500 !important;
}
.awa-footer-atendimento__label {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: #999 !important;
margin-bottom: 4px !important;
}
/* FM-5: Social icons — flat circles, no border (non-homepage pages) */
.page_footer .awa-footer-pro__social .awa-footer-pro__social-link {
border: none !important;
background: #f0f0f0 !important;
box-shadow: none !important;
outline: none !important;
}
.page_footer .awa-footer-pro__social .awa-footer-pro__social-link:hover {
background: #b73337 !important;
color: #fff !important;
border: none !important;
}
/* FM-6: Newsletter section — brand gradient */
.awa-footer-newsletter {
background: linear-gradient(135deg, #9e2d2d 0%, #b73337 60%, #c94040 100%) !important;
}
/* FM-7: Footer bottom bar — clean light background */
.footer-bottom,
.awa-footer-bottom,
.page_footer .footer-bottom {
background: #f7f7f7 !important;
border-top: 1px solid #e5e5e5 !important;
}
/* FM-8: Copyright text — compact, muted */
.copyright,
.footer-copyright,
.awa-footer-copyright {
font-size: 11.5px !important;
color: #999 !important;
text-align: center !important;
line-height: 1.5 !important;
}
/* FM-9: Footer column row vertical padding */
.footer-container .rowFlexMargin,
.page_footer .rowFlexMargin {
padding-top: 8px !important;
padding-bottom: 32px !important;
}
/* FM-10: Devby bar minimal */
.awa-footer-devby {
background: #f0f0f0 !important;
padding: 10px 16px !important;
}
/* FM-11: Canal Comercial action card — word-break fix */
.awa-footer-business-contact__action-copy,
.awa-footer-business-contact__action-copy strong,
.awa-footer-business-contact__action-copy small {
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
/* FM-12: Remove top gap on footer container */
#footer.footer-container {
padding-top: 0 !important;
}
/* ===== awa-header-audit-fix.css (slim 2026-05-24) — embedded copy ===== */
/* Fix 1/2/4/5 removidos: SSOT refinements §56 + ui-simplify §57. Fix 3/6 → terminal. */
@media (min-width: 992px) {
html #html-body .page-wrapper .awa-site-header .header-control.awa-nav-bar .awa-header-categories .navigation.verticalmenu.side-verticalmenu {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
html #html-body .page-wrapper .awa-site-header .header-control.awa-nav-bar .sections.nav-sections.category-dropdown,
html #html-body .page-wrapper .awa-site-header .header-control.awa-nav-bar .section-items.nav-sections.category-dropdown-items {
border: none !important;
box-shadow: none !important;
}
}
/* MINICART ICON FIX removido 2026-05-24 — SSOT refinements §56 + ui-simplify §57 + inline critical */
/* =============================================================================
FOOTER MODERN — Social icon override for homepage (2026-05-10)
awa-visual-bugfix.css blocks with (0,5,1)+!important on homepage body classes.
This file loads LAST → same selector + later position = wins.
============================================================================= */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
.page-wrapper .page_footer .awa-footer-pro__social .awa-footer-pro__social-link {
border: none !important;
background: #f0f0f0 !important;
box-shadow: none !important;
outline: none !important;
}
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
.page-wrapper .page_footer .awa-footer-pro__social .awa-footer-pro__social-link:hover {
background: #b73337 !important;
color: #fff !important;
border: none !important;
}
/* ===== awa-deep-audit-2026-05-08.css (44KB) ===== */
/* =============================================================================
AWA MOTOS — Deep Visual Audit Normalization (2026-05-08)
═══════════════════════════════════════════════════════════
Loads LAST in cascade. Normalizes all visual inconsistencies found during
deep audit: border-radius, border-colors, shadows, spacing, typography,
input consistency, card layouts, section rhythm.
Design System enforced:
- Primary: #b73337 | Hover: #8e2629
- Text: #333333 | Text Secondary: #666666
- Background: #FFFFFF | Soft BG: #F7F7F7
- Border: #E5E5E5
============================================================================= */
/* =============================================================================
1. BORDER-RADIUS NORMALIZATION
Eliminate non-standard values: 2px, 3px, 5px, 14px, 22px, 999px
Standard scale: 4px (xs), 6px (sm), 8px (md), 12px (lg), 16px (xl), 9999px (pill)
============================================================================= */
/* 2px → 4px (xs) */
.breadcrumbs,
.toolbar .limiter select,
.sorter select,
.pages .page,
.filter-options-item .count {
border-radius: var(--awa-radius-xs, 4px) !important; /* audit: was 2px */
}
/* 3px → 4px (xs) */
.message,
.message.notice,
.message.success,
.message.error,
.message.warning,
.cart-summary,
.block-discount .fieldset {
border-radius: var(--awa-radius-xs, 4px) !important; /* audit: was 3px */
}
/* 5px → 6px (sm) — normalize to design system step */
.minicart-items .product-item,
.block.block-compare,
.block.block-wishlist-management,
.block.block-reorder,
.toolbar-products,
.awa-benefits-bar__item,
.product-reviews-summary,
.review-form,
.field .control .nested,
.block-search .minisearch .actions {
border-radius: var(--awa-radius-sm, 6px) !important; /* audit: was 5px */
}
/* 14px → 12px (lg) — login page inputs used 14px */
body.customer-account-login .field .control input,
body.customer-account-login .field .control select,
body.customer-account-create .field .control input,
body.customer-account-create .field .control select {
border-radius: var(--awa-radius-md, 8px) !important; /* audit: was 14px, normalize to md */
}
/* 22px → 16px (xl) or pill */
.awa-benefits-bar,
.newsletter-subscribe .field,
.newsletter-subscribe .action {
border-radius: var(--awa-radius-xl, 16px) !important; /* audit: was 22px */
}
/* 999px → 9999px (pill) — normalize */
.awa-badge,
.awa-chip,
.awa-tag,
.price-label,
span.badge,
.product-item .badge-container span {
border-radius: var(--awa-radius-pill, 9999px) !important; /* audit: was 999px */
}
/* =============================================================================
2. BORDER COLOR NORMALIZATION
Eliminate off-system colors: #6B7280, #212529, #5A6370, #555, #e2e8f0
Standard: #e5e5e5 (--awa-border), #d0d0d0 (--awa-border-strong)
============================================================================= */
/* Normalize all divider/separator borders to design system */
.product-item,
.product-item-info,
.product-info-main .product-info-stock-sku,
.product-info-main .product-social-links,
.block-title,
.sidebar .block,
.sidebar .block-title,
.account .block-title,
.cart.table-wrapper,
.cart.table-wrapper thead th,
.cart.table-wrapper tbody td,
.opc-wrapper .step-title,
.checkout-shipping-address,
.checkout-payment-method,
.order-details-items,
.table-wrapper,
.table-wrapper thead th,
.table-wrapper tbody td,
.fieldset,
.form .fieldset + .fieldset,
.toolbar,
.toolbar-products {
border-color: var(--awa-border, #e5e5e5) !important;
}
/* Remove double-borders on product items */
.products-grid .product-item {
border: none !important;
}
.products-grid .product-item-info {
border: 1px solid var(--awa-border, #e5e5e5) !important;
border-radius: var(--awa-radius-lg, 12px) !important;
overflow: hidden !important;
}
/* =============================================================================
3. BOX SHADOW NORMALIZATION
Eliminate Tailwind slate shadows: rgba(15, 23, 42, ...)
Standard: --awa-shadow-xs/sm/md/lg
============================================================================= */
/* Product cards — consistent shadow */
.products-grid .product-item-info {
box-shadow: var(--awa-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05)) !important;
transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.products-grid .product-item-info:hover {
box-shadow: var(--awa-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.10)) !important;
transform: translateY(-2px) !important;
}
/* Sidebar blocks — subtle shadow */
.sidebar .block {
box-shadow: var(--awa-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05)) !important;
}
/* Cards and panels — consistent shadow */
.block-customer-login,
.block-new-customer,
.form-login,
.form-create-account,
.cart-summary,
.checkout-cart-index .cart-container,
.b2b-landing-card,
.awa-b2b-landing-hero {
box-shadow: var(--awa-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08)) !important;
}
/* Dropdown/overlay shadows — stronger */
.ui-dialog,
.modal-popup .modal-inner-wrap,
.block-minicart,
.autocomplete-suggestions,
.search-autocomplete {
box-shadow: var(--awa-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12)) !important;
}
/* =============================================================================
4. TYPOGRAPHY NORMALIZATION
Fix: h3 = 17.0667px AND 16px → 20px (--awa-font-2xl)
Fix: h2 = 24px AND 32px AND 21px → 24px (--awa-font-3xl)
Fix: h4 = 14px → 18px (--awa-font-xl)
============================================================================= */
/* h2 — normalize to 24px consistently */
h2:not(.product-name):not(.page-title),
.products-grid .product-item h2,
.block-title strong,
.awa-section-header__title {
font-size: var(--awa-font-3xl, 24px) !important;
font-weight: var(--awa-weight-bold, 700) !important;
line-height: 1.3 !important;
color: var(--awa-text, #333333) !important;
letter-spacing: -0.01em !important;
}
/* h3 — normalize to 20px (was 17.0667px and 16px) */
h3:not(.product-name) {
font-size: var(--awa-font-2xl, 20px) !important;
font-weight: var(--awa-weight-semibold, 600) !important;
line-height: 1.35 !important;
color: var(--awa-text, #333333) !important;
}
/* h4 — normalize to 18px (was 14px = body text) */
h4 {
font-size: var(--awa-font-xl, 18px) !important;
font-weight: var(--awa-weight-semibold, 600) !important;
line-height: 1.4 !important;
color: var(--awa-text, #333333) !important;
}
/* Product name in cards — consistent */
.products-grid .product-item-name,
.products-grid .product-item-name a {
font-size: var(--awa-font-base, 14px) !important;
font-weight: var(--awa-weight-medium, 500) !important;
line-height: 1.4 !important;
color: var(--awa-text, #333333) !important;
}
.products-grid .product-item-name a:hover {
color: var(--awa-primary, #b73337) !important;
}
/* Price — consistent across pages */
.price-box .price {
font-size: var(--awa-font-xl, 18px) !important;
font-weight: var(--awa-weight-bold, 700) !important;
color: var(--awa-primary, #b73337) !important;
}
/* Old price */
.price-box .old-price .price {
font-size: var(--awa-font-sm, 12px) !important;
font-weight: var(--awa-weight-normal, 400) !important;
color: var(--awa-text-muted, #888888) !important;
text-decoration: line-through !important;
}
/* =============================================================================
5. INPUT CONSISTENCY FIX (Login/Register pages)
Audit found: 3 border colors, 2 radii, 3 paddings on same page
============================================================================= */
/* Force ALL inputs on auth pages to be identical */
body.customer-account-login input[type="text"],
body.customer-account-login input[type="email"],
body.customer-account-login input[type="password"],
body.customer-account-login select,
body.customer-account-create input[type="text"],
body.customer-account-create input[type="email"],
body.customer-account-create input[type="password"],
body.customer-account-create input[type="tel"],
body.customer-account-create select {
height: 48px !important;
min-height: 48px !important;
padding: 10px 14px !important;
font-size: 14px !important;
border: 1px solid var(--awa-border, #e5e5e5) !important;
border-radius: var(--awa-radius-md, 8px) !important;
background: var(--awa-bg, #ffffff) !important;
color: var(--awa-text, #333333) !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
body.customer-account-login input:focus,
body.customer-account-login select:focus,
body.customer-account-create input:focus,
body.customer-account-create select:focus {
border-color: var(--awa-primary, #b73337) !important;
box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.08) !important;
outline: none !important;
}
/* Newsletter input in header/footer — normalize */
.block.newsletter input[type="email"],
.newsletter-subscribe input[type="email"],
.awa-footer-newsletter input[type="email"] {
height: 44px !important;
padding: 8px 14px !important;
border: 1px solid var(--awa-border, #e5e5e5) !important;
border-radius: var(--awa-radius-md, 8px) !important;
font-size: 14px !important;
}
/* =============================================================================
6. SECTION SPACING RHYTHM
Normalize sections to consistent vertical rhythm: 32px between sections
Fix fractional spacing (20.4833px → 24px)
============================================================================= */
/* Homepage sections — consistent rhythm */
.cms-index-index .top-home-content,
.cms-index-index .awa-home-section,
.cms-home .top-home-content,
.cms-home .awa-home-section {
margin-bottom: var(--awa-space-8, 32px) !important;
padding-top: var(--awa-space-6, 24px) !important;
padding-bottom: var(--awa-space-6, 24px) !important;
}
/* Section headers — consistent spacing */
.awa-section-header {
margin-bottom: var(--awa-space-4, 16px) !important;
padding-bottom: var(--awa-space-3, 12px) !important;
}
/* Category page — spacing between toolbar and products */
.catalog-category-view .toolbar-products {
margin-bottom: var(--awa-space-4, 16px) !important;
padding: var(--awa-space-3, 12px) 0 !important;
}
/* PDP sections */
.product-info-main {
padding: var(--awa-space-6, 24px) !important;
}
/* Account pages — section spacing */
.account .page-title-wrapper {
margin-bottom: var(--awa-space-6, 24px) !important;
padding-bottom: var(--awa-space-4, 16px) !important;
border-bottom: 1px solid var(--awa-border, #e5e5e5) !important;
}
/* =============================================================================
7. CARD LAYOUT STANDARDIZATION
Ensure all product cards have identical structure
============================================================================= */
/* Product card padding — consistent */
.products-grid .product-item-details {
padding: var(--awa-space-3, 12px) var(--awa-space-4, 16px) var(--awa-space-4, 16px) !important;
}
/* Product image container — consistent aspect ratio */
.products-grid .product-item-photo,
.products-grid .product-image-container {
display: block !important;
overflow: hidden !important;
background: var(--awa-bg-muted, #f5f5f5) !important;
}
/* Product actions — consistent spacing and alignment */
.products-grid .product-item-inner {
padding-top: var(--awa-space-3, 12px) !important;
margin-top: var(--awa-space-3, 12px) !important;
border-top: 1px solid var(--awa-border, #e5e5e5) !important;
}
/* =============================================================================
8. BUTTON NORMALIZATION (supplementary)
Ensure ALL buttons use design system colors
============================================================================= */
/* Any button with old primary → fix */
button, .btn, [class*="action"] {
font-family: inherit !important;
}
/* Ensure primary buttons have consistent hover */
.action.primary:hover,
button.primary:hover,
.btn-primary:hover {
background-color: var(--awa-primary-hover, #8e2629) !important;
}
/* Link-style actions — consistent */
.action.back,
.action.remind,
a.action.back,
a.action.remind {
color: var(--awa-text-secondary, #666666) !important;
font-size: var(--awa-font-sm, 12px) !important;
}
.action.back:hover,
.action.remind:hover,
a.action.back:hover,
a.action.remind:hover {
color: var(--awa-primary, #b73337) !important;
}
/* =============================================================================
9. BREADCRUMBS — Clean & Consistent
============================================================================= */
.breadcrumbs {
background: transparent !important;
padding: var(--awa-space-3, 12px) 0 !important;
margin-bottom: var(--awa-space-4, 16px) !important;
border: none !important;
font-size: var(--awa-font-sm, 12px) !important;
}
.breadcrumbs a,
.breadcrumbs li {
color: var(--awa-text-secondary, #666666) !important;
font-size: var(--awa-font-sm, 12px) !important;
}
.breadcrumbs a:hover {
color: var(--awa-primary, #b73337) !important;
}
.breadcrumbs .item:not(:last-child):after {
color: var(--awa-text-muted, #888888) !important;
}
/* =============================================================================
10. RESPONSIVE NORMALIZATION
============================================================================= */
@media (max-width: 767px) {
/* Section spacing — tighter on mobile */
.cms-index-index .top-home-content,
.cms-index-index .awa-home-section,
.cms-home .top-home-content,
.cms-home .awa-home-section {
margin-bottom: var(--awa-space-6, 24px) !important;
padding-top: var(--awa-space-4, 16px) !important;
padding-bottom: var(--awa-space-4, 16px) !important;
}
/* Headings — scale down on mobile */
h1, .page-title span {
font-size: var(--awa-font-3xl, 24px) !important;
}
h2:not(.product-name):not(.page-title),
.awa-section-header__title {
font-size: var(--awa-font-2xl, 20px) !important;
}
h3:not(.product-name) {
font-size: var(--awa-font-xl, 18px) !important;
}
/* Product grid — 2 columns with consistent gap */
.products-grid .product-items {
gap: var(--awa-space-3, 12px) !important;
}
/* Cards — reduced padding on mobile */
.products-grid .product-item-details {
padding: var(--awa-space-2, 8px) var(--awa-space-3, 12px) var(--awa-space-3, 12px) !important;
}
/* Container padding — mobile */
body:not(.page-layout-empty) .page-wrapper .page-main {
padding-inline: var(--awa-space-4, 16px) !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
/* Tablet tweaks */
h1, .page-title span {
font-size: var(--awa-font-3xl, 24px) !important;
}
.products-grid .product-items {
gap: var(--awa-space-4, 16px) !important;
}
}
/* =============================================================================
11. VISUAL NOISE REMOVAL
Clean excess borders, backgrounds, decorations
============================================================================= */
/* Remove duplicate borders between stacked elements */
.sidebar .block + .block {
border-top: none !important;
margin-top: var(--awa-space-4, 16px) !important;
}
/* Remove unnecessary background patterns */
.page-wrapper,
.page-main {
background-image: none !important;
}
/* Clean up toolbar — remove excess borders */
.toolbar.toolbar-products:first-child {
border-bottom: 1px solid var(--awa-border, #e5e5e5) !important;
border-top: none !important;
}
.toolbar.toolbar-products:last-child {
border-top: 1px solid var(--awa-border, #e5e5e5) !important;
border-bottom: none !important;
}
/* Remove stray outlines */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
outline: 2px solid var(--awa-primary, #b73337) !important;
outline-offset: 2px !important;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
outline: none !important;
}
/* =============================================================================
12. SEARCH PAGE NORMALIZATION
============================================================================= */
.catalogsearch-result-index .search.results {
margin-top: var(--awa-space-4, 16px) !important;
}
.catalogsearch-result-index .search.found {
font-size: var(--awa-font-base, 14px) !important;
color: var(--awa-text-secondary, #666666) !important;
margin-bottom: var(--awa-space-4, 16px) !important;
}
/* =============================================================================
13. CART PAGE NORMALIZATION
============================================================================= */
.checkout-cart-index .cart-container {
gap: var(--awa-space-6, 24px) !important;
}
.checkout-cart-index .cart-summary {
padding: var(--awa-space-6, 24px) !important;
background: var(--awa-bg-muted, #f5f5f5) !important;
border: 1px solid var(--awa-border, #e5e5e5) !important;
border-radius: var(--awa-radius-lg, 12px) !important;
}
/* Cart items — clean borders */
.cart.table-wrapper .item-actions td {
border-top: none !important;
padding-top: 0 !important;
}
/* =============================================================================
14. FOOTER CONSISTENCY (supplement existing rules)
============================================================================= */
/* Footer column headings */
.page_footer h3,
.page_footer h4,
.page_footer .block-title strong {
font-size: var(--awa-font-base, 14px) !important;
font-weight: var(--awa-weight-bold, 700) !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
color: var(--awa-text, #333333) !important;
margin-bottom: var(--awa-space-3, 12px) !important;
}
/* Footer links — consistent */
.page_footer a:not(.awa-footer-pro__social-link):not(.awa-footer-business-contact__action--primary) {
color: var(--awa-text-secondary, #666666) !important;
font-size: 13px !important;
line-height: 2 !important;
transition: color 0.15s ease !important;
}
.page_footer a:not(.awa-footer-pro__social-link):not(.awa-footer-business-contact__action--primary):hover {
color: var(--awa-primary, #b73337) !important;
}
/* =============================================================================
15. BACKGROUND NORMALIZATION
Ensure soft background uses #F7F7F7 consistently
============================================================================= */
.page_footer,
.awa-footer-bottom,
.footer-bottom {
background-color: #F7F7F7 !important;
}
/* Soft background sections */
.block-layered-nav,
.sidebar-main .block {
background: var(--awa-bg-muted, #f5f5f5) !important;
border: 1px solid var(--awa-border, #e5e5e5) !important;
border-radius: var(--awa-radius-lg, 12px) !important;
padding: var(--awa-space-4, 16px) !important;
}
/* =====================================================
16. PASS 2 — TARGETED SPECIFICITY FIXES
Post-audit corrections for elements resisting generic selectors.
===================================================== */
/* --- 16.1 Product Name h3 normalization ---
h3.product-name computed at 17.0667px (from 1.0667rem).
Normalize to 14px for card context, 16px for detail context.
*/
.product-info h3.product-name,
.product-item-info h3.product-name,
.item-product h3.product-name {
font-size: 14px !important;
line-height: 1.35 !important;
font-weight: 600 !important;
}
/* On category/search listing pages, allow slightly larger */
.products-grid .product-item h3.product-name {
font-size: 14px !important;
line-height: 1.4 !important;
}
/* --- 16.2 B2B Login form inputs ---
B2B form inputs have 14px radius and different padding.
Normalize to match the standard login form.
*/
#b2b-login-form input[type="text"],
#b2b-login-form input[type="password"],
#b2b-login-form input[type="email"] {
height: 48px !important;
border: 1px solid var(--awa-border-color, #E5E5E5) !important;
border-radius: 8px !important;
padding: 8px 14px !important;
font-size: 14px !important;
background: #fff !important;
transition: border-color 0.2s ease !important;
}
#b2b-login-form input[type="text"]:focus,
#b2b-login-form input[type="password"]:focus,
#b2b-login-form input[type="email"]:focus {
border-color: var(--awa-primary, #b73337) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.08) !important;
}
/* --- 16.3 Newsletter input in footer --- */
.footer .block.newsletter input[type="email"],
.awa-newsletter-content input[type="email"],
#newsletter-validate-detail input[type="email"],
input#newsletter {
height: 48px !important;
border: 1px solid var(--awa-border-color, #E5E5E5) !important;
border-radius: 8px !important;
padding: 8px 14px !important;
font-size: 14px !important;
}
/* --- 16.4 Footer heading normalization ---
h3 in footer computed at 11.375px — too small. Normalize to 14px.
*/
.awa-footer-business-contact__title,
.awa-newsletter-title,
.footer h3,
.footer h4 {
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
}
/* --- 16.5 Bestseller/product card radius 5px → 8px --- */
.item-product.col-md-3,
.bestsellerslider-item .item-product,
.owl-item .item-product,
.product-item-info {
border-radius: 8px !important;
overflow: hidden;
}
/* --- 16.6 Add-to-cart button radius 5px → 6px --- */
.btn-add-to-cart.action.tocart,
button.action.tocart,
.tocart {
border-radius: 6px !important;
}
/* --- 16.8 Remaining Tailwind slate shadow fix ---
The generic selector in pass 1 didn't cover enough elements.
Target the actual shadow color at computed level.
*/
.rokanthemes-categorytab .item-product,
.rokanthemes-producttab .item-product,
.product-item,
.category-products .products .item {
box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.rokanthemes-categorytab .item-product:hover,
.rokanthemes-producttab .item-product:hover,
.product-item:hover,
.category-products .products .item:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
/* --- 16.9 Section heading h2 normalization ---
Some h2 at 21px, some at 28px, some at 32px.
Standardize: section titles = 24px, page titles = 28px.
*/
.page-title h1,
.page-title-wrapper h1 {
font-size: 28px !important;
font-weight: 700 !important;
}
.block-title h2,
.rokanthemes-producttab .title-tab h2,
.rokanthemes-categorytab .title-tab h2,
.section-title h2 {
font-size: 24px !important;
font-weight: 700 !important;
}
/* --- 16.10 Border color normalization with higher specificity ---
rgb(107,114,128) = Tailwind gray-500, rgb(33,37,41) = Bootstrap dark
Normalize non-primary borders to --awa-border-color.
*/
.form-control,
.input-text,
select,
textarea,
.field .control input,
.field .control select,
.field .control textarea {
border-color: var(--awa-border-color, #E5E5E5) !important;
}
/* Primary-colored borders should use the correct primary */
.btn-primary,
.action.primary,
.page-header .header.content,
.nav-sections {
border-color: var(--awa-primary, #b73337) !important;
}
/* =====================================================
17. PASS 3 — NUCLEAR SPECIFICITY OVERRIDES
Root cause: 27+ competing !important rules from multiple stylesheets.
Solution: Use #html-body ID selector (specificity 1-x-x) which always
beats class-only selectors (0-x-x) at same !important level.
===================================================== */
/* --- 17.1 CSS Variable overrides at :root --- */
:root {
--awa-modern-card-radius: 8px;
--awa-radius-step: 8px;
--awa-control-radius: 6px;
--awa-ui-radius-card: 8px;
--awa-card-radius: 8px;
--card-radius: 8px;
--awa-radius: 8px;
--awa-radius-md: 8px;
--awa-radius-lg: 12px;
--border-radius-base: 8px;
}
/* --- 17.2 Card radius — ID-level specificity (1-2-0) beats all class selectors ---
Covers homepage, category, search, and all carousel/slider contexts.
*/
#html-body .page-wrapper .item-product,
#html-body .page-wrapper .product-item {
border-radius: 8px !important;
}
/* With ayo-home5-wrapper scope (1-3-0) */
#html-body .ayo-home5-wrapper .item-product,
#html-body .ayo-home5-wrapper .product-item {
border-radius: 8px !important;
}
/* Specific slider/carousel contexts (1-3-0) */
#html-body .rokan-bestseller .item-product,
#html-body .rokan-newproduct .item-product,
#html-body .rokan-featured .item-product,
#html-body .categorytab-container .item-product,
#html-body .productTabContent .item-product,
#html-body .category_tab_slider .item-product,
#html-body .bestsellerslider .item-product,
#html-body .list-tab-product .item-product,
#html-body .block.widget .item-product {
border-radius: 8px !important;
}
/* Product item info inner container */
#html-body .item-product .product-item-info,
#html-body .product-item .product-item-info {
border-radius: 8px !important;
}
/* --- 17.3 Tocart button radius — ID-level specificity --- */
#html-body .item-product .btn-add-to-cart,
#html-body .item-product .action.tocart,
#html-body .product-item .action.tocart,
#html-body .product-item-actions .action.tocart {
border-radius: 6px !important;
}
/* --- 17.4 Mobile override prevention ---
Prevent mobile media queries from setting 5px on desktop.
@media (min-width: 768px) ensures these ONLY apply on tablet+ viewports.
*/
@media (min-width: 768px) {
#html-body .page-wrapper .item-product,
#html-body .page-wrapper .product-item {
border-radius: 8px !important;
}
#html-body .item-product .btn-add-to-cart,
#html-body .item-product .action.tocart {
border-radius: 6px !important;
}
}
/* --- 17.5 Mobile cards (proper 6px radius for smaller screens) --- */
@media (max-width: 767px) {
#html-body .page-wrapper .item-product,
#html-body .page-wrapper .product-item {
border-radius: 6px !important;
}
#html-body .item-product .btn-add-to-cart,
#html-body .item-product .action.tocart {
border-radius: 6px !important;
}
}
/* =====================================================
18. PASS 4 — HEADING NORMALIZATION + RADIUS CLEANUP
===================================================== */
/* --- 18.1 Footer h3 headings (11.375px → 14px) --- */
#html-body h3.awa-footer-business-contact__title,
#html-body h3.awa-newsletter-title {
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
}
/* --- 18.2 Category/Search h1 normalization (21px → 28px) --- */
#html-body h1.awa-category-hero__title {
font-size: 28px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
/* --- 18.3 Category carousel h2 (21px → 24px) --- */
#html-body .awa-category-carousel__header h2 {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
/* --- 18.4 Hidden h2 normalization --- */
#html-body h2.hidden {
font-size: 24px !important;
}
/* --- 18.5 Login h1 normalization (22px → 28px) --- */
#html-body .login-container h1,
#html-body .block-customer-login h1 {
font-size: 28px !important;
font-weight: 700 !important;
}
/* --- 18.6 14px radius → 12px (design token alignment) --- */
#html-body .vmenu-promo-carousel,
#html-body .vmenu-promo-slide a,
#html-body .vmenu-promo-slide img,
#html-body .hot-deal-tab-slider,
#html-body .hot-deal-tab-slider-customcss,
#html-body .mst-searchautocomplete__autocomplete {
border-radius: 12px !important;
}
/* --- 18.7 20px radius normalization ---
Labels/badges keep pill shape (→ 9999px for consistency).
Images get 12px.
*/
#html-body .cat-label {
border-radius: 9999px !important;
}
/* --- 18.8 Login page h1 (b2b-login-title: 22px → 28px) --- */
#html-body .b2b-login-title,
#html-body .page-title-wrapper h1 {
font-size: 28px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
/* --- 18.9 Remaining 14px radius normalization → 12px ---
PDP/Category searchautocomplete already handled.
Target: vmenu-promo images, layered nav, toolbar dropdowns.
*/
#html-body .vmenu-promo-carousel img,
#html-body .vmenu-promo-carousel a,
#html-body .layered-filter-block-container,
#html-body .filter-options-content,
#html-body .toolbar select,
#html-body .sorter select {
border-radius: 12px !important;
}
/* --- 18.10 PDP tab radius normalization (10px partial → 8px) --- */
#html-body .product.data.items > .item.title,
#html-body .product.data.items > .item.title > a {
border-radius: 8px 8px 0 0 !important;
}
/* ==========================================================================
PASS 5 — COLOR NORMALIZATION & TAILWIND SLATE CLEANUP
Date: 2026-05-09
Issues fixed:
1. Old primary color (#a33b3b → #b73337) — override residual compiled CSS
2. Dark text #111111 → #333333
3. Tailwind slate borders rgba(15,23,42,0.1) → neutral
4. Tailwind slate shadows rgba(15,23,42,0.12) → neutral
5. Fractional padding (20.4833px → 20px)
6. Text color normalization (Tailwind grays → design tokens)
7. Onsale badge old primary fix
========================================================================== */
/* ── 5.1 Old Primary Color Override (residual/inline) ─────────────────── */
#html-body .btn-add-to-cart.action.tocart,
#html-body .action.tocart.primary,
#html-body button.action.tocart {
background-color: #b73337 !important; /* was #a33b3b */
border-color: #b73337 !important;
}
#html-body .btn-add-to-cart.action.tocart:hover,
#html-body .action.tocart.primary:hover,
#html-body button.action.tocart:hover {
background-color: #8e2629 !important;
border-color: #8e2629 !important;
}
#html-body a.showcart.header-mini-cart,
#html-body .minicart-wrapper .action.showcart {
color: #b73337 !important;
}
#html-body a.showcart.header-mini-cart:hover,
#html-body .minicart-wrapper .action.showcart:hover {
color: #8e2629 !important;
}
#html-body div.onsale,
#html-body .onsale-label,
#html-body .product-label.onsale {
background-color: #b73337 !important;
}
/* ── 5.2 Dark Text Normalization (#111 → #333) ───────────────────────── */
#html-body h3.product-name,
#html-body .product-name a,
#html-body .product-item-name a,
#html-body .product-item .product-item-link {
color: #333333 !important;
}
#html-body h3.product-name:hover a,
#html-body .product-name a:hover,
#html-body .product-item-name a:hover,
#html-body .product-item .product-item-link:hover {
color: #b73337 !important;
}
/* "Meu Carrinho" + sr-only headings */
#html-body .minicart-wrapper strong,
#html-body h1.awa-sr-only {
color: #333333 !important;
}
/* ── 5.3 Tailwind Slate Border Cleanup ────────────────────────────────── */
/* Replace rgba(15,23,42,0.1) with neutral border */
#html-body .header_main.awa-main-header-inner-wrap,
#html-body .item-product.col-md-3,
#html-body .item-product,
#html-body .owl-prev,
#html-body .owl-next,
#html-body .awa-category-carousel__prev,
#html-body .awa-category-carousel__next,
#html-body .vertical-bg-img,
#html-body .product-item-info {
border-color: #e5e5e5 !important;
}
/* ── 5.4 Tailwind Slate Shadow Cleanup ────────────────────────────────── */
/* Replace rgba(15,23,42,0.12) with neutral shadow */
#html-body .header-content {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
#html-body .block-minicart {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important;
}
#html-body .togge-menu,
#html-body .navigation__submenu {
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important;
}
#html-body .awa-category-carousel__prev,
#html-body .awa-category-carousel__next,
#html-body .owl-prev,
#html-body .owl-next {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}
#html-body .rokan-bestseller {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}
/* ── 5.5 Fractional Padding Fix ───────────────────────────────────────── */
#html-body .awa-home-section {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
/* ── 5.6 Text Color Normalization ─────────────────────────────────────── */
/* Tailwind gray-800 rgb(31,41,55) → #333333 */
#html-body .text-gray-800,
#html-body [class*="text-gray-8"] {
color: #333333 !important;
}
/* Tailwind gray-500 rgb(107,114,128) → #666666 */
#html-body .text-gray-500,
#html-body [class*="text-gray-5"] {
color: #666666 !important;
}
/* Non-standard grays → design tokens */
/* rgb(90,99,112) → #666666 */
/* rgb(89,89,89) → #555555 */
/* rgb(136,136,136) → #888888 (muted, acceptable) */
/* ── 5.7 Border Color Mixed Fix ───────────────────────────────────────── */
/* Normalize tri-color borders (e.g. 229,229,229 + 51,51,51) */
#html-body .product-item-info,
#html-body .product-item-details {
border: 1px solid #e5e5e5 !important;
border-top: none !important;
}
/* ── 5.8 Button Radius Final Normalization ────────────────────────────── */
/* Outlier 3px/4px → 6px */
#html-body .action.primary,
#html-body .action.secondary,
#html-body button.action {
border-radius: 6px !important;
}
/* Pill buttons stay pill */
#html-body .cat-label,
#html-body .awa-category-pill {
border-radius: 9999px !important;
}
/* ==========================================================================
AUTOCOMPLETE VISUAL POLISH — Deep override para garantir estética moderna
Corrige: box-shadow fraco, border-top errada, backdrop-filter não aplicado
========================================================================== */
/* Painel principal */
#html-body .mst-searchautocomplete__autocomplete {
border-radius: 12px !important;
border-top: 2px solid var(--awa-red, #b73337) !important;
box-shadow:
rgba(15, 23, 42, 0.12) 0px 20px 48px,
rgba(15, 23, 42, 0.06) 0px 6px 16px !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
}
/* Container interno: scroll suave */
#html-body .mst-searchautocomplete__autocomplete .mst-searchautocomplete__wrapper {
max-height: min(76vh, 620px) !important;
overflow: hidden !important;
}
#html-body .mst-searchautocomplete__autocomplete .mst-searchautocomplete__results {
overflow-y: auto !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(183, 51, 55, 0.3) transparent !important;
}
/* Título de seção (ex: "Produtos") */
#html-body .mst-searchautocomplete__autocomplete .mst-searchautocomplete__index-title {
display: flex !important;
align-items: center !important;
padding: 10px 16px !important;
background: rgba(183, 51, 55, 0.04) !important;
border-bottom: 1px solid rgba(183, 51, 55, 0.08) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--awa-red, #b73337) !important;
}
/* Item de produto: grid moderno */
#html-body .mst-searchautocomplete__autocomplete .mst-searchautocomplete__item.magento_catalog_product {
display: grid !important;
grid-template-columns: 68px 1fr auto !important;
grid-template-areas: "image meta store" !important;
align-items: start !important;
gap: 12px !important;
padding: 12px 16px !important;
border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
transition: background 160ms ease, transform 160ms ease !important;
}
#html-body .mst-searchautocomplete__autocomplete .mst-searchautocomplete__item.magento_catalog_product:first-child {
border-top: none !important;
}
/* Hover suave */
#html-body .mst-searchautocomplete__autocomplete .mst-searchautocomplete__item.magento_catalog_product:hover,
#html-body .mst-searchautocomplete__autocomplete .mst-searchautocomplete__item.magento_catalog_product._active {
background: rgba(183, 51, 55, 0.05) !important;
transform: translateX(3px) !important;
}
/* Imagem do produto */
#html-body .mst-searchautocomplete__autocomplete .mst-product-image-wrapper {
grid-area: image !important;
width: 68px !important;
height: 68px !important;
border-radius: 8px !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
background: #f8fafc !important;
display: grid !important;
place-items: center !important;
overflow: hidden !important;
}
#html-body .mst-searchautocomplete__autocomplete .mst-product-image-wrapper img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
/* Highlight da busca */
#html-body .mst-searchautocomplete__autocomplete .mst-searchautocomplete__highlight {
background: rgba(183, 51, 55, 0.14) !important;
color: var(--awa-red, #b73337) !important;
border-radius: 3px !important;
padding: 0 2px !important;
font-weight: 700 !important;
}
/* Preço */
#html-body .mst-searchautocomplete__autocomplete .store .price {
font-size: 15px !important;
font-weight: 700 !important;
color: var(--awa-red, #b73337) !important;
white-space: nowrap !important;
}
/* Animação de entrada */
@keyframes awa-ac-slide-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
#html-body .mst-searchautocomplete__autocomplete._active {
animation: awa-ac-slide-in 0.2s ease forwards !important;
}
/* ── 10. A11y: .acombinar-heading (h2 semântico, visual igual ao h4) ──────── */
/* H4→H2 para corrigir heading order (H1 "Finalizar Compra" → H2). */
/* Reset visual para manter aparência original do H4. */
.acombinar-message h2.acombinar-heading {
font-size: 1rem; /* igual ao h4 padrão do tema */
font-weight: 600;
margin: 0 0 8px;
line-height: 1.4;
}
/* ── AWA Cascade Anchor (appended 2026-05-09) ────────────────────────────────
Belt-and-suspenders BFC-safe overflow guards. Loaded LAST (awa-audit-bundle
is the last CSS file in head.additional). Wins over any earlier !important
at same specificity by source-order.
overflow-x:clip clips visually without creating a scroll container →
position:fixed elements (sticky header, modals, WhatsApp) remain
viewport-relative and do NOT scroll with page content.
Fixes: awa-layout-bundle.css may contain body{overflow-x:hidden} if the
bundle was built before the awa-ux-responsiveness.css standalone patch.
Also guards against any future regression in async-loaded CSS bundles.
────────────────────────────────────────────────────────────────────────── */
html,
body {
overflow-x: clip !important;
}
/* ── PDP mobile specs table — final cascade guard (2026-05-27) ───────────────
Cause: legacy PDP table rules loaded earlier keep min-width:480px/table
display on mobile. This bundle loads last, so the table can become readable
label/value cards without horizontal overflow. */
@media (max-width: 767px) {
body#html-body.catalog-product-view .page-wrapper .product.info.detailed #product-attribute-specs-table,
body#html-body.catalog-product-view .page-wrapper .product.data.items #product-attribute-specs-table,
body#html-body.catalog-product-view .page-wrapper #product-attribute-specs-table.data.table.additional-attributes {
display: block !important;
inline-size: 100% !important;
width: 100% !important;
min-inline-size: 0 !important;
min-width: 0 !important;
max-inline-size: 100% !important;
max-width: 100% !important;
margin-inline: 0 !important;
border: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
body#html-body.catalog-product-view .page-wrapper #product-attribute-specs-table > caption,
body#html-body.catalog-product-view .page-wrapper #product-attribute-specs-table > tbody,
body#html-body.catalog-product-view .page-wrapper #product-attribute-specs-table tr,
body#html-body.catalog-product-view .page-wrapper #product-attribute-specs-table :is(th, td) {
display: block !important;
inline-size: 100% !important;
width: 100% !important;
min-inline-size: 0 !important;
min-width: 0 !important;
max-inline-size: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body#html-body.catalog-product-view .page-wrapper #product-attribute-specs-table > tbody {
display: grid !important;
gap: 0 !important;
}
body#html-body.catalog-product-view .page-wrapper #product-attribute-specs-table tr {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
padding: 10px 12px !important;
border-block-end: 1px solid var(--awa-border, #e5e5e5) !important;
background: var(--awa-white, #ffffff) !important;
}
body#html-body.catalog-product-view .page-wrapper #product-attribute-specs-table tr:nth-child(odd) {
background: var(--awa-bg-soft, #f7f7f7) !important;
}
body#html-body.catalog-product-view .page-wrapper #product-attribute-specs-table th.col.label {
padding: 0 !important;
margin: 0 0 4px !important;
color: var(--awa-text-secondary, #666666) !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
body#html-body.catalog-product-view .page-wrapper #product-attribute-specs-table td.col.data {
padding: 0 !important;
margin: 0 !important;
color: var(--awa-text-primary, #333333) !important;
font-size: 14px !important;
line-height: 1.45 !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
}
}