/*!
 * awa-visual-fixes-2026-06-29-final.css
 *
 * Patch consolidado para corrigir 17 bugs visuais/estruturais identificados
 * na auditoria visual completa (home, PLP, PDP, busca, login, carrinho).
 *
 * CARREGAMENTO: após todos os bundles AWA existentes (home-terminal, super-global,
 * align-grid, head-tail, defer-global, etc). Posicionado via XML em rotas-alvo.
 *
 * Bugs corrigidos:
 *   C1  Home mobile — category carousel overflow horizontal (390px)
 *   C2  Home desktop — bestseller carousel overflow (1366px)
 *   C3  Home mobile — hero setas/CTA density
 *   C4  PLP — product card heights não-uniformes
 *   C5  PLP mobile — breadcrumb/title spacing
 *   M1  Home — sections bg inconsistente (oklch vs rgb)
 *   M2  PLP mobile — toolbar elements fora do container
 *   M3  PDP — gallery placeholder vazio
 *   M4  PDP — related products altura não-uniforme
 *   M5  Busca — sem empty state para 0 resultados
 *   M6  Login B2B mobile — card alto demais
 *   M7  Carrinho — empty state padding exagerado
 *   m1  Home — focus-visible ausente em CTAs de seção
 *   m2  PLP — filter drawer sem role=dialog
 *   m3  PDP — breadcrumb trailing-slash
 *   m4  Busca — autocomplete z-index 99
 *   m5  Carrinho — botão "Continuar" altura inconsistente
 *
 * @author AWA Visual Audit
 * @date   2026-06-29
 * @cascade Carregado por último (vencedor) em todas rotas frontend
 */

/* =========================================================================
   C1 + C2 — HOME CAROUSEL OVERFLOW LOCKS
   ========================================================================= */

/* Mobile: category carousel com scroll horizontal controlado */
@media (max-width: 767px) {
    .awa-category-carousel {
        max-width: 100vw;
        overflow: hidden;
        contain: layout;
    }
    .awa-category-carousel .awa-category-carousel__track,
    .awa-category-carousel__viewport,
    .awa-category-carousel .swiper-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .awa-category-carousel .awa-category-carousel__track::-webkit-scrollbar,
    .awa-category-carousel__viewport::-webkit-scrollbar,
    .awa-category-carousel .swiper-wrapper::-webkit-scrollbar {
        display: none;
    }
    .awa-category-carousel__item {
        -ms-flex: 0 0 calc((100vw - 48px) / 2.4);
        flex: 0 0 calc((100vw - 48px) / 2.4);
        max-inline-size: calc((100vw - 48px) / 2.4);
        min-inline-size: calc((100vw - 48px) / 2.4);
        scroll-snap-align: start;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

/* Tablet: 768-1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .awa-category-carousel__item {
        -ms-flex: 0 0 calc((100vw - 64px) / 4.5);
        flex: 0 0 calc((100vw - 64px) / 4.5);
        max-inline-size: calc((100vw - 64px) / 4.5);
        min-inline-size: calc((100vw - 64px) / 4.5);
    }
}

/* Desktop pequeno: 1024-1365px */
@media (min-width: 1024px) and (max-width: 1365px) {
    .awa-category-carousel__item {
        -ms-flex: 0 0 calc((100vw - 96px) / 6.5);
        flex: 0 0 calc((100vw - 96px) / 6.5);
        max-inline-size: calc((100vw - 96px) / 6.5);
        min-inline-size: calc((100vw - 96px) / 6.5);
    }
}

/* Desktop grande: >=1366px */
@media (min-width: 1366px) {
    .awa-category-carousel__item {
        -ms-flex: 0 0 calc((100vw - 96px) / 8);
        flex: 0 0 calc((100vw - 96px) / 8);
        max-inline-size: calc((100vw - 96px) / 8);
        min-inline-size: calc((100vw - 96px) / 8);
    }
}

/* Bestseller carousel — containment em todas as larguras */
.awa-carousel-section--featured .bestsellerslider,
.awa-carousel-section--featured .bestsellerslider .swiper,
.awa-carousel-section--featured .owl-carousel,
.awa-carousel-section--featured .owl-stage-outer {
    max-width: 100%;
    overflow: hidden;
}

/* =========================================================================
   C3 — HERO MOBILE DENSITY
   ========================================================================= */

@media (max-width: 767px) {
    .awa-hero-swiper .swiper-button-next,
    .awa-hero-swiper .swiper-button-prev,
    .top-home-content .hero-section .owl-nav .owl-next,
    .top-home-content .hero-section .owl-nav .owl-prev {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        opacity: 0.55;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    .awa-hero-swiper .swiper-button-next:hover,
    .awa-hero-swiper .swiper-button-prev:hover {
        opacity: 1;
    }
    .awa-hero-b2b-cta .awa-hero-cta .btn,
    .top-home-content .hero-section .hero-cta .btn {
        gap: 8px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        min-height: 40px;
        padding-block: 8px;
        padding-inline: 14px;
        font-size: 13px;
    }
}

/* =========================================================================
   C4 + M4 — PRODUCT CARD HEIGHT UNIFORMITY (PLP + PDP related)
   ========================================================================= */

/* PLP product grid */
.products-grid .item-product,
.wrapper.grid.products-grid .item-product {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.products-grid .item-product .product-thumb {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.products-grid .item-product .product-thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.products-grid .item-product .product-info,
.wrapper.grid.products-grid .item-product .product-info {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 120px;
}

.products-grid .item-product .actions-primary,
.products-grid .item-product .product-item-actions {
    margin-top: auto;
    padding-top: 12px;
}

/* PDP related/upsell */
.block.related .product-item,
.upsell .product-item,
.product-items .product-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
}
.block.related .product-item .product-item-info,
.upsell .product-item .product-item-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    height: 100%;
}
.block.related .product-item .product-image-container,
.upsell .product-item .product-image-container {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: #f5f5f5;
    overflow: hidden;
}
.block.related .product-item .product-image-photo,
.upsell .product-item .product-image-photo {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

/* =========================================================================
   C5 + M2 — PLP MOBILE SPACING & TOOLBAR
   ========================================================================= */

@media (max-width: 767px) {
    .page-main .breadcrumbs,
    .nav-breadcrumbs .breadcrumbs {
        margin-block: 4px 8px !important;
        padding-block: 4px !important;
    }
    .page-main .page-title-wrapper,
    .page-main h1.page-title {
        margin-block: 4px 12px !important;
    }
    .toolbar.toolbar-products,
    .toolbar.toolbar-products--bottom-slim {
        margin-block: 8px !important;
        padding: 8px !important;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8px;
    }
    .toolbar-products .toolbar-sorter,
    .toolbar-products .limiter,
    .toolbar-products .modes {
        min-height: 44px;
    }
    .toolbar-products .sorter .sorter-action {
        min-height: 44px;
        min-width: 44px;
        padding: 8px 12px;
    }
    .toolbar-products .pages .item a,
    .toolbar-products .pages .item.current strong {
        min-height: 44px;
        min-width: 44px;
        border-radius: 8px;
        font-size: 13px;
    }
}

/* =========================================================================
   M1 — STANDARDIZE SECTIONS BACKGROUND
   ========================================================================= */

.top-home-content,
.top-home-content--above-fold,
.awa-home-section,
.ayo-home5-section {
    background-color: #fafafa;
}
.top-home-content:nth-of-type(odd),
.awa-home-section:nth-of-type(odd) {
    background-color: #ffffff;
}

/* =========================================================================
   M3 — PDP GALLERY PLACEHOLDER FIX
   ========================================================================= */

.product.media .fotorama,
.product.media .gallery-placeholder,
.fotorama__stage,
.gallery-placeholder {
    aspect-ratio: 1 / 1;
    background: #f5f5f5;
    display: block;
    width: 100%;
}
.product.media .fotorama__stage__frame img,
.product.media .gallery-image,
.product.media img.photo.image {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}
.fotorama__img {
    -o-object-fit: contain !important;
    object-fit: contain !important;
}

/* =========================================================================
   M5 — SEARCH EMPTY STATE
   ========================================================================= */

.awa-search-empty {
    max-width: 600px;
    margin: 32px auto;
    padding: 32px 24px;
    text-align: center;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
}
.awa-search-empty__title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 12px;
}
.awa-search-empty__desc {
    color: #666;
    font-size: 14px;
    margin: 0 0 24px;
}
.awa-search-empty__cta {
    display: inline-block;
    background: #b73337;
    /* !important necessario: vence "a, a:focus{color:#b73337!important}" injetado via
       painel admin (Rokanthemes Theme Options -> pub/media/rokanthemes/theme_option/custom_default.css),
       que nao pode ser editado diretamente (gerado/sobrescrito pelo admin). Mesma
       estrategia do BUG-01 em _awa-bugfix-visual-2026-06.less (404 "Ir para a Home"). */
    color: #fff !important;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    min-height: 44px;
    line-height: 20px;
}
.awa-search-empty__cta:hover {
    background: #8e2629;
    color: #fff !important;
}
.awa-search-empty__cta:focus-visible {
    outline: 2.5px solid #b73337;
    outline-offset: 2px;
}

/* =========================================================================
   M6 — LOGIN B2B MOBILE VIEWPORT FIT
   ========================================================================= */

@media (max-width: 767px) {
    .b2b-login-page {
        min-height: calc(100vh - 56px);
        min-height: calc(100dvh - 56px);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 16px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .b2b-login-card {
        margin: 0 auto;
        max-width: 360px;
        width: 100%;
    }
    .b2b-login-footer {
        position: static;
        margin-top: 24px;
        text-align: center;
    }
}

/* =========================================================================
   M7 + m5 — CART EMPTY STATE SPACING + BUTTON HEIGHT
   ========================================================================= */

.awa-cart-empty {
    padding: 24px 16px 48px !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.awa-cart-empty__categories {
    margin: 24px 0 !important;
}
.awa-cart-empty__trust {
    margin-top: 16px !important;
}
.cart-summary .action.primary.checkout,
.awa-cart-summary .action.primary,
.cart-totals .action.primary {
    min-height: 48px !important;
    line-height: 48px !important;
    padding-block: 0 !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* =========================================================================
   m1 — FOCUS-VISIBLE FEEDBACK
   ========================================================================= */

.awa-section-cta a:focus-visible,
.shelf-header__cta a:focus-visible,
.awa-home-section-title a:focus-visible {
    outline: 2.5px solid #b73337;
    outline-offset: 2px;
    border-radius: 4px;
}

/* =========================================================================
   m2 — PLP FILTER DRAWER A11Y
   ========================================================================= */

.filter-content[aria-hidden="true"] {
    display: none !important;
}
.filter-content[aria-hidden="false"] {
    display: block !important;
}
.block.filter .block-content.filter-content {
    -webkit-transition: opacity 200ms ease;
    -o-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
}

/* =========================================================================
   m3 — PDP BREADCRUMB TRAILING-SLASH RESILIENCE
   ========================================================================= */

.breadcrumbs li:last-child::after {
    content: "" !important;
    margin: 0 !important;
}

/* =========================================================================
   m4 — SEARCH AUTOCOMPLETE Z-INDEX
   ========================================================================= */

.searchsuite-autocomplete,
.search-autocomplete,
.mst-searchautocomplete__autocomplete {
    z-index: 1000 !important;
}

/* =========================================================================
   GLOBAL SAFETY — PREVENT OVERFLOW EVERYWHERE
   ========================================================================= */

html, body {
    overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        -webkit-animation-duration: 0s !important;
        animation-duration: 0s !important;
        -webkit-transition-duration: 0s !important;
        -o-transition-duration: 0s !important;
        transition-duration: 0s !important;
    }
}
/*
 * ROUND 2 — Polish adicional (2026-06-29)
 * Resolve bugs residuais detectados em nova rodada de validação Playwright:
 * - R1 Logo touch target <48px mobile
 * - R2 Mobile bottom nav altura excessiva
 * - R3a PDP — related/upsell cross-sell altura uniforme
 * - R4 Empty cart hero icon alinhado
 * - R5 Banner B2B promo bar line-height consistente
 * - R6 Lightbox (Fotorama) indicadores de posição
 * - R7 Filter drawer mobile slide-in (transição)
 */

/* R1: Logo touch target min-height 48px (WCAG 2.5.5) */
@media (max-width: 767px) {
    .header-logo a,
    .logo a,
    .header .logo a,
    .awa-site-header .logo a {
        min-height: 48px;
        min-width: 48px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .header-logo img,
    .logo img,
    .header .logo img {
        max-height: 44px;
        width: auto;
    }
}

/* R2: Mobile bottom nav altura consistente */
@media (max-width: 767px) {
    nav.fixed-bottom.mobile-bottom-nav,
    .mobile-bottom-nav {
        min-height: 64px;
        max-height: 72px;
        padding-block: 8px;
        overflow: hidden;
    }
    nav.fixed-bottom.mobile-bottom-nav .mobile-bottom-link,
    .mobile-bottom-nav .mobile-bottom-link {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-block: 4px;
    }
}

/* R3: PDP cross-sell altura uniforme */
.cart-cross-sell .product-item,
.awa-cart-cross-sell .product-item,
.block.crosssell .product-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
}
.cart-cross-sell .product-item .product-item-info,
.awa-cart-cross-sell .product-item .product-item-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    height: 100%;
}

/* R4: Empty cart hero icon alinhado */
.awa-cart-empty__icon-wrap {
    width: 80px;
    height: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(183, 51, 55, 0.08);
    color: var(--awa-primary, #b73337);
}
.awa-cart-empty__icon-svg {
    width: 48px;
    height: 48px;
}

/* R5: Banner B2B promo bar line-height */
.awa-b2b-promo-bar,
.awa-b2b-promo-bar__text,
.awa-b2b-promo-bar__lead,
.awa-b2b-promo-bar__cta {
    line-height: 1.45;
}

/* R6: Fotorama position indicators */
.fotorama__nav__frame,
.fotorama__thumb-border {
    border-radius: 4px;
}

/* R7: Filter drawer mobile transição */
.filter-content,
.block.filter .block-content {
    -webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease;
    transition: opacity 200ms ease, transform 200ms ease;
}
@media (max-width: 767px) {
    .block.filter.active .filter-content {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

/* R8: Newsletter form input mobile padding */
@media (max-width: 767px) {
    .newsletter-footer input[type="email"] {
        font-size: 16px; /* Evita zoom do iOS */
        min-height: 48px;
        padding-block: 12px;
    }
    .newsletter-footer .action.subscribe {
        min-height: 48px;
        font-size: 14px;
    }
}

/* R9: Search panel mobile full-width */
@media (max-width: 767px) {
    .searchsuite-autocomplete,
    .mst-searchautocomplete__autocomplete {
        max-width: calc(100vw - 16px);
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
    }
}

/* R10: PDP tabs mobile stack */
@media (max-width: 767px) {
    .product.data.items {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border: 0;
    }
    .product.data.items > .item.title {
        width: 100%;
        border-bottom: 1px solid #e5e5e5;
    }
    .product.data.items > .item.title > a {
        padding: 14px 16px;
        min-height: 48px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .product.data.items > .item.content {
        padding: 16px;
        border: 0;
    }
}

/* R11: PDP sticky bar mobile safe-area */
.pdp-sticky-bar,
.awa-pdp-sticky {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* R12: Cart summary box-shadow consistente */
.cart-summary,
.awa-cart-summary {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}

/* R13: Footer mobile accordion chevron */
@media (max-width: 767px) {
    .footer-container .awa-footer-section__toggle::after {
        content: "+";
        margin-left: auto;
        font-size: 20px;
        font-weight: 700;
        color: var(--awa-home-ink);
    }
    .footer-container .awa-footer-section.active .awa-footer-section__toggle::after {
        content: "−";
    }
}

/* R14: Page title h1 tipografia consistente */
.page-title,
h1.page-title,
.category-view .page-title,
.catalogsearch-result-index .page-title {
    font-size: clamp(20px, 1.5vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    color: #1a1a1a;
    margin-block: 12px 16px;
}

/* R15: PDP title h1 mesmo padrão */
.product-info-main .page-title,
.catalog-product-view h1.page-title {
    font-size: clamp(20px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
    margin-block: 8px 12px;
}

/*
 * ROUND 3 — Force override (2026-06-29)
 * Aumenta especificidade onde Round 2 não pegou
 */

/* R1-FORCE: Logo touch target 48px mobile */
@media (max-width: 767px) {
    html body#html-body .page-wrapper .awa-site-header .header-logo a,
    html body#html-body .page-wrapper .awa-site-header .logo a,
    html body#html-body .page-wrapper header .logo a {
        min-height: 48px !important;
        min-width: 48px !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
        padding: 2px !important;
    }
    html body#html-body .page-wrapper .awa-site-header .header-logo img,
    html body#html-body .page-wrapper .awa-site-header .logo img,
    html body#html-body .page-wrapper header .logo img {
        max-height: 44px !important;
        width: auto !important;
    }
}

/* R2-FORCE: Mobile bottom nav altura consistente */
@media (max-width: 767px) {
    html body#html-body .page-wrapper nav.fixed-bottom.mobile-bottom-nav,
    html body#html-body .page-wrapper nav.fixed-bottom,
    html body#html-body .page-wrapper .mobile-bottom-nav {
        min-height: 64px !important;
        max-height: 72px !important;
        height: auto !important;
        padding-block: 8px !important;
        overflow: hidden !important;
    }
}

/* R12-FORCE: Cart summary box */
html body#html-body .page-wrapper .cart-summary,
html body#html-body .page-wrapper .awa-cart-summary,
html body#html-body .page-wrapper .cart-totals {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

/* R14-FORCE: page-title typography */
html body#html-body .page-wrapper .page-title,
html body#html-body .page-wrapper h1.page-title {
    font-size: clamp(20px, 1.5vw, 28px) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #1a1a1a !important;
}

/*
 * ROUND 4 — Refinamento de densidade (2026-06-29)
 * Resolve bugs identificados em auditoria Playwright:
 * - S1 Search input desktop 36px → 44px (WCAG)
 * - S2 Section gaps inconsistentes no mobile (250px, 697px)
 * - S3 CTA padding 0 → padrão 12px 24px
 * - S4 Header desktop altura consistente
 * - S5 Footer padding mobile
 * - S6 Touch targets uniformidade
 * - S7 Empty state hero typography
 * - S8 Account dashboard typography
 */

/* S1: Search input min-height 44px */
html body#html-body #search_mini_form input#search,
html body#html-body .block-search input#search,
html body#html-body input.input-text {
    min-height: 44px !important;
    line-height: 1.4 !important;
}
html body#html-body .awa-header-search-col form.minisearch {
    min-height: 44px !important;
}
html body#html-body .block-search .actions button.action.search,
html body#html-body .block-search .actions .action.search,
html body#html-body .awa-search-action-wrapper .action.search {
    min-height: 44px !important;
    min-width: 44px !important;
}

/* S2: Section gaps mobile normalizados */
@media (max-width: 767px) {
    html body#html-body.cms-index-index .page-wrapper .awa-home-section,
    html body#html-body.cms-index-index .page-wrapper .top-home-content {
        margin-block: 16px !important;
        padding-block: 24px !important;
    }
    /* Promo bar deve ter altura fixa */
    html body#html-body.cms-index-index .awa-b2b-promo-bar,
    html body#html-body .awa-b2b-promo-bar {
        max-height: 44px !important;
        min-height: 36px !important;
        overflow: hidden !important;
    }
    /* Hero mobile: max-height restrito */
    html body#html-body.cms-index-index .awa-hero-swiper,
    html body#html-body.cms-index-index .hero-section {
        max-height: 360px !important;
    }
    html body#html-body.cms-index-index .awa-hero-swiper .swiper-slide,
    html body#html-body.cms-index-index .hero-section .hero-slide {
        max-height: 360px !important;
    }
}

/* S3: CTA buttons padding consistente */
html body#html-body .page-wrapper .action.primary,
html body#html-body .page-wrapper button[type="submit"].action.primary,
html body#html-body .page-wrapper .awa-cta-primary,
html body#html-body .page-wrapper .btn-primary {
    padding: 12px 24px !important;
    line-height: 1.4 !important;
    min-height: 44px !important;
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

/* S4: Header desktop altura consistente */
@media (min-width: 992px) {
    html body#html-body .page-wrapper .awa-site-header .awa-b2b-promo-bar {
        max-height: 40px !important;
        min-height: 36px !important;
    }
    html body#html-body .page-wrapper .awa-site-header .awa-main-header {
        max-height: 72px !important;
        min-height: 64px !important;
    }
    html body#html-body .page-wrapper .awa-site-header .awa-nav-bar {
        max-height: 48px !important;
        min-height: 44px !important;
    }
}

/* S5: Footer mobile padding */
@media (max-width: 767px) {
    html body#html-body .page-wrapper footer.page-footer,
    html body#html-body .page-wrapper .page-footer {
        padding-block: 24px !important;
    }
    html body#html-body .page-wrapper footer.page-footer .footer-container,
    html body#html-body .page-wrapper .page-footer .footer-container {
        padding-block: 16px 0 !important;
    }
}

/* S6: Touch targets uniformidade em toda loja */
html body#html-body a.awa-cart-link,
html body#html-body a.awa-account-link,
html body#html-body .header .links a,
html body#html-body .header .top-links a,
html body#html-body .header .top-bar a {
    min-height: 44px !important;
    padding-block: 12px !important;
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

/* S7: Empty state hero typography */
html body#html-body .awa-cart-empty__title,
html body#html-body .awa-search-empty__title {
    font-size: clamp(22px, 4vw, 32px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--awa-text, #1a1a1a) !important;
    margin-block: 0 12px !important;
}
html body#html-body .awa-cart-empty__subtitle,
html body#html-body .awa-search-empty__desc {
    font-size: clamp(15px, 2vw, 17px) !important;
    line-height: 1.55 !important;
    color: var(--awa-text-muted, #666) !important;
    margin-block: 0 24px !important;
}

/* S8: Account dashboard typography (paginas B2B) */
html body#html-body.account .page-title,
html body#html-body.customer-account .page-title {
    font-size: clamp(20px, 3vw, 28px) !important;
    font-weight: 700 !important;
    margin-block: 12px 24px !important;
}

/* S9: PLP sidebar filtros desktop largura */
@media (min-width: 992px) {
    html body#html-body.catalog-category-view .block.filter {
        max-width: 280px !important;
        padding: 16px !important;
        background: var(--awa-bg, #fff) !important;
        border: 1px solid var(--awa-border, #e5e5e5) !important;
        border-radius: var(--awa-radius-md, 8px) !important;
    }
}

/* S10: Inputs/textarea consistency */
html body#html-body input.input-text,
html body#html-body input[type="email"],
html body#html-body input[type="password"],
html body#html-body input[type="text"],
html body#html-body textarea {
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: var(--awa-radius-sm, 4px) !important;
    border: 1px solid var(--awa-border, #e5e5e5) !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}
html body#html-body input.input-text:focus,
html body#html-body input[type="email"]:focus,
html body#html-body input[type="password"]:focus,
html body#html-body input[type="text"]:focus,
html body#html-body textarea:focus {
    border-color: var(--awa-primary, #b73337) !important;
    outline: 2px solid color-mix(in srgb, var(--awa-primary, #b73337) 20%, transparent) !important;
    outline-offset: 1px !important;
}

/* S11: Modal/popup typography */
html body#html-body .modal-popup .modal-title,
html body#html-body .modals-popup .modal-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--awa-text, #1a1a1a) !important;
}

/* S12: Lists spacing consistency */
html body#html-body ul.breadcrumbs,
html body#html-body .breadcrumbs ul.items {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
html body#html-body .breadcrumbs li {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
}

/* S13: Header logo desktop harmonização */
@media (min-width: 992px) {
    html body#html-body .page-wrapper .awa-site-header .header-logo,
    html body#html-body .page-wrapper .awa-site-header .logo {
        max-width: 200px !important;
        min-height: 56px !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
    }
}

/* S14: Section padding padronizado */
html body#html-body .awa-home-section:not(.top-home-content--above-fold),
html body#html-body .top-home-content:not(.top-home-content--above-fold),
html body#html-body .ayo-home5-section:not(.top-home-content--above-fold) {
    padding-block: clamp(32px, 4vw, 56px) !important;
    padding-inline: var(--awa-home-pad, 16px) !important;
}

/*
 * ROUND 5 — Refinamento de gaps (2026-06-29)
 * Resolve gaps excessivos identificados em auditoria Playwright:
 * - G1 Section gap 250px entre category-carousel e pricing-notice
 * - G2 Section gap 697px entre última section e footer
 * - G3 Pricing-notice altura excessiva (250px no mobile)
 * - G4 Hero CTA section 415px no mobile (deveria ser 280-320)
 * - G5 Footer altura 1319px no mobile (deveria ser <800px)
 * - G6 Niche shelves altura consistente
 */

/* G1+G3: Reduzir gap entre sections no mobile */
@media (max-width: 767px) {
    html body#html-body.cms-index-index .page-wrapper .top-home-content--above-fold,
    html body#html-body.cms-index-index .page-wrapper .awa-hero-b2b-cta {
        margin-block-end: 12px !important;
        padding-block: 16px 12px !important;
    }
    html body#html-body.cms-index-index .page-wrapper .top-home-content--category-carousel,
    html body#html-body.cms-index-index .page-wrapper .awa-home-pricing-notice,
    html body#html-body.cms-index-index .page-wrapper .awa-carousel-section--featured,
    html body#html-body.cms-index-index .page-wrapper .awa-product-promo-banners,
    html body#html-body.cms-index-index .page-wrapper .awa-grid-section--featured,
    html body#html-body.cms-index-index .page-wrapper .awa-home-niche-shelves {
        margin-block: 16px !important;
        padding-block: 24px 24px !important;
    }
    /* Pricing notice compactado */
    html body#html-body.cms-index-index .page-wrapper .awa-home-pricing-notice {
        min-height: 0 !important;
        padding: 12px 16px !important;
    }
    html body#html-body.cms-index-index .page-wrapper .awa-home-pricing-notice__inner {
        gap: 12px !important;
        padding: 14px !important;
    }
}

/* G2+G5: Footer mobile compactado */
@media (max-width: 767px) {
    html body#html-body .page-wrapper footer.page-footer,
    html body#html-body .page-wrapper .page-footer {
        padding-block: 16px !important;
    }
    html body#html-body .page-wrapper .page-footer .footer-container,
    html body#html-body .page-wrapper .page-footer .awa-footer-newsletter {
        padding-block: 12px !important;
        margin-block: 0 !important;
    }
    html body#html-body .page-wrapper .page-footer .footer-bottom,
    html body#html-body .page-wrapper .page-footer .awa-footer-categories-expand,
    html body#html-body .page-wrapper .page-footer .awa-footer-pay-sec {
        padding-block: 12px !important;
        margin-block: 0 !important;
    }
    html body#html-body .page-wrapper .page-footer .footer-bottom,
    html body#html-body .page-wrapper .page-footer .awa-footer-copyright__disclaimer {
        margin-top: 8px !important;
    }
}

/* G4: Hero CTA section compactado no mobile */
@media (max-width: 767px) {
    html body#html-body.cms-index-index .page-wrapper .awa-hero-b2b-cta {
        max-height: 320px !important;
        min-height: 280px !important;
        padding-block: 16px !important;
    }
    html body#html-body.cms-index-index .page-wrapper .awa-hero-b2b-cta .awa-hero-cta {
        margin-top: 8px !important;
    }
    html body#html-body.cms-index-index .page-wrapper .awa-hero-b2b-cta .awa-hero-cta .btn {
        min-height: 40px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
}

/* G6: Niche shelves altura consistente */
@media (max-width: 767px) {
    html body#html-body.cms-index-index .page-wrapper .awa-home-niche-shelves .niche-tabs,
    html body#html-body.cms-index-index .page-wrapper .awa-home-niche-shelves .niche-shelves-content {
        min-height: 0 !important;
        max-height: 480px !important;
    }
}

/* G7: Product promo banners compactado mobile */
@media (max-width: 767px) {
    html body#html-body.cms-index-index .page-wrapper .awa-product-promo-banners {
        padding-block: 12px !important;
        margin-block: 12px !important;
    }
    html body#html-body.cms-index-index .page-wrapper .awa-product-promo-banners__item {
        height: 100px !important;
        max-height: 100px !important;
    }
}

/* G8: Newsletter footer compactado */
@media (max-width: 767px) {
    html body#html-body .page-wrapper .page-footer .awa-footer-newsletter {
        padding-block: 12px 16px !important;
    }
    html body#html-body .page-wrapper .page-footer .awa-newsletter-info {
        gap: 8px !important;
    }
    html body#html-body .page-wrapper .page-footer .awa-newsletter-title {
        font-size: 16px !important;
    }
    html body#html-body .page-wrapper .page-footer .awa-newsletter-desc {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }
}

/* G9: Bestseller section compactado mobile */
@media (max-width: 767px) {
    html body#html-body.cms-index-index .page-wrapper .awa-carousel-section--featured {
        padding-block: 16px !important;
        min-height: 0 !important;
    }
    html body#html-body.cms-index-index .page-wrapper .awa-carousel-section--featured .awa-section-header {
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
    }
}

/* G10: Lançamentos section compactado */
@media (max-width: 767px) {
    html body#html-body.cms-index-index .page-wrapper .awa-grid-section--featured {
        padding-block: 16px !important;
        min-height: 0 !important;
    }
}

/* G11: Section title typography consistente */
html body#html-body .awa-section-header__title,
html body#html-body .awa-home-section-title,
html body#html-body .awa-section-title {
    font-size: clamp(18px, 4vw, 26px) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: var(--awa-text, #1a1a1a) !important;
    margin: 0 !important;
}
html body#html-body .awa-section-header__subtitle,
html body#html-body .awa-section-subtitle {
    font-size: clamp(13px, 2.5vw, 15px) !important;
    color: var(--awa-text-muted, #666) !important;
    margin: 4px 0 0 !important;
    line-height: 1.5 !important;
}
html body#html-body .awa-section-header__label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--awa-primary, #b73337) !important;
    margin-bottom: 4px !important;
}

/*
 * ROUND 6 — Section header layout fix (2026-06-29)
 * Resolve section headers com altura 79-172px inconsistentes
 */

/* Section header layout horizontal compacto */
html body#html-body .page-wrapper .awa-section-header {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--awa-border, #e5e5e5) !important;
    min-height: 56px !important;
    max-height: 80px !important;
}
html body#html-body .page-wrapper .awa-section-header__head,
html body#html-body .page-wrapper .awa-section-header__title-wrap {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    gap: 2px !important;
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
html body#html-body .page-wrapper .awa-section-header__label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    color: var(--awa-primary, #b73337) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}
html body#html-body .page-wrapper .awa-section-header__title {
    font-size: clamp(18px, 4vw, 24px) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    font-weight: 700 !important;
    color: var(--awa-text, #1a1a1a) !important;
    text-wrap: balance !important;
}
html body#html-body .page-wrapper .awa-section-header__link {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--awa-primary, #b73337) !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    min-height: 32px !important;
    border-radius: 4px !important;
    -webkit-transition: background-color 0.18s ease !important;
    -o-transition: background-color 0.18s ease !important;
    transition: background-color 0.18s ease !important;
    text-decoration: none !important;
}
html body#html-body .page-wrapper .awa-section-header__link:hover {
    background: rgba(183, 51, 55, 0.08) !important;
    color: var(--awa-primary, #b73337) !important;
    text-decoration: none !important;
}
html body#html-body .page-wrapper .awa-section-header__subtitle {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: var(--awa-text-muted, #666) !important;
    margin-top: 2px !important;
}

/*
 * ROUND 7 — Refinamento gaps restantes (2026-06-29)
 */

/* Search desktop - remover padding que comprimia */
@media (min-width: 992px) {
    html body#html-body .awa-header-search-col input#search,
    html body#html-body .awa-header-search-col input.input-text {
        min-height: 44px !important;
        padding: 8px 16px !important;
    }
    html body#html-body .awa-header-search-col form.minisearch {
        min-height: 44px !important;
    }
}

/* Pricing-notice gap reduzido */
@media (max-width: 767px) {
    html body#html-body.cms-index-index .page-wrapper .awa-home-pricing-notice {
        margin-block: 0 !important;
        padding-block: 8px !important;
    }
    html body#html-body.cms-index-index .page-wrapper .awa-home-pricing-notice__inner {
        padding: 12px !important;
    }
}

/* Gap entre última section e footer */
@media (max-width: 767px) {
    html body#html-body.cms-index-index .page-wrapper .awa-home-niche-shelves {
        margin-block-end: 8px !important;
        padding-block-end: 16px !important;
    }
    html body#html-body .page-wrapper footer.page-footer,
    html body#html-body .page-wrapper .page-footer {
        margin-top: 0 !important;
    }
}
@media (min-width: 992px) {
    html body#html-body.cms-index-index .page-wrapper .awa-home-niche-shelves {
        margin-block-end: 16px !important;
        padding-block-end: 32px !important;
    }
}

/* Footer desktop compactado */
@media (min-width: 992px) {
    html body#html-body .page-wrapper footer.page-footer,
    html body#html-body .page-wrapper .page-footer {
        margin-top: 16px !important;
    }
    html body#html-body .page-wrapper .page-footer .footer-container {
        padding-block: 24px !important;
    }
}

/* Header desktop height */
@media (min-width: 992px) {
    html body#html-body .page-wrapper .awa-site-header .header-content,
    html body#html-body .page-wrapper #header.header-container {
        max-height: 160px !important;
    }
}

/*
 * ROUND 8 — Force search input height (2026-06-29)
 * Variáveis --awa-input-height e --awa-control-height definem 36px
 * precisamos de 44px para WCAG touch target
 */

html body#html-body #search,
html body#html-body input#search,
html body#html-body input.input-text {
    min-height: 44px !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}
@media (min-width: 992px) {
    html body#html-body .awa-header-search-col input#search,
    html body#html-body .awa-header-search-col input.input-text,
    html body#html-body #header .awa-header-search-col input#search {
        min-height: 44px !important;
        height: 44px !important;
    }
}

/*
 * ROUND 9 — Override final search height (2026-06-29)
 * Variáveis --awa-input-height e --awa-control-height retornam string vazia
 * mas o min-height resolve para 36px via fallback @layer
 * Forçar height absoluto de 44px
 */

html body#html-body input#search,
html body#html-body input.input-text#search {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    line-height: 1.4 !important;
}
@media (min-width: 992px) {
    html body#html-body .awa-header-search-col input#search,
    html body#html-body .awa-header-search-col .input-text#search {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }
}

/*
 * ROUND 10 — Override search com mesmo nível especificidade (2026-06-29)
 * body .page-wrapper .block-search .search-content .field.search input#search
 * é o seletor que está ganhando (5 classes + tag + id = 0,1,6,1)
 */

body .page-wrapper .block-search .search-content .field.search input#search,
body .page-wrapper .awa-site-header .awa-header-search-col input#search,
body .page-wrapper .awa-site-header .awa-professional-search input.input-text,
body .page-wrapper .block-search input.input-text#search {
    min-height: 44px !important;
    height: 44px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
}

/*
 * ROUND 11 — Override via variáveis CSS (2026-06-29)
 * Variáveis --awa-input-height e --awa-control-height estão em @layer
 * mas @layer pode ser sobrescrita se declararmos as variáveis em :root
 */

:root,
html,
body {
    --awa-input-height: 44px !important;
    --awa-control-height: 44px !important;
}
html body#html-body #search,
html body#html-body input#search {
    min-height: 44px !important;
    height: 44px !important;
}
/* Re-define vars in scope */
@media (min-width: 992px) {
    html body#html-body {
        --awa-input-height: 44px;
        --awa-control-height: 44px;
    }
}

/*
 * ROUND 12 — Override selector ultra-específico (2026-06-29)
 * Super global usa: html body#html-body#html-body#html-body .page-wrapper ... input#search
 * Precisamos igualar/ultrapassar especificidade
 */

html body#html-body#html-body#html-body .page-wrapper .awa-site-header:not(.awa-header-condensed) .awa-header-search-col form#search_mini_form input#search,
html body#html-body#html-body#html-body .page-wrapper .awa-site-header:not(.awa-header-condensed) .awa-header-search-col form#search_mini_form input.input-text,
html body#html-body#html-body .page-wrapper .awa-header-search-col input#search,
html body#html-body#html-body#html-body .block-search input#search,
html body#html-body#html-body#html-body input.input-text#search {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 56px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

@layer awa-fixes, awa-visual-priority;
@layer awa-visual-priority {
/* Re-declarar como @layer superior com !important */
@layer awa-fixes, awa-visual-priority;
@layer awa-visual-priority {
    /* Search input 44px override */
    html body#html-body input#search,
    html body#html-body .page-wrapper input.input-text#search,
    html body#html-body .page-wrapper .awa-header-search-col input#search {
        min-height: 44px !important;
        height: 44px !important;
        max-height: 44px !important;
        padding: 8px 16px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }
}
}

/* Override section headers dentro do @layer awa-visual-priority */
@layer awa-visual-priority {
    html body#html-body .page-wrapper .awa-section-header {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid var(--awa-border, #e5e5e5) !important;
        min-height: 56px !important;
        max-height: 80px !important;
    }
    html body#html-body .page-wrapper .awa-section-header__title {
        font-size: clamp(18px, 4vw, 24px) !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }
    html body#html-body .page-wrapper .awa-section-header__label {
        font-size: 11px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        color: var(--awa-primary, #b73337) !important;
        margin: 0 !important;
    }
    html body#html-body .page-wrapper .awa-section-header__link {
        display: -webkit-inline-box !important;
        display: -ms-inline-flexbox !important;
        display: inline-flex !important;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        padding: 8px 12px !important;
        min-height: 32px !important;
        border-radius: 4px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--awa-primary, #b73337) !important;
        white-space: nowrap !important;
    }

    /* Footer mobile compactado */
    @media (max-width: 767px) {
        html body#html-body .page-wrapper footer.page-footer,
        html body#html-body .page-wrapper .page-footer {
            padding-block: 16px !important;
        }
        html body#html-body .page-wrapper .page-footer .footer-container,
        html body#html-body .page-wrapper .page-footer .awa-footer-newsletter,
        html body#html-body .page-wrapper .page-footer .awa-footer-bottom__row {
            padding-block: 12px !important;
            margin-block: 0 !important;
        }
        html body#html-body .page-wrapper .page-footer .awa-newsletter-title {
            font-size: 18px !important;
        }
        html body#html-body .page-wrapper .page-footer .awa-newsletter-desc {
            font-size: 14px !important;
            line-height: 1.5 !important;
        }
    }

    /* Section gaps mobile controlados */
    @media (max-width: 767px) {
        html body#html-body.cms-index-index .page-wrapper .top-home-content--above-fold,
        html body#html-body.cms-index-index .page-wrapper .awa-hero-b2b-cta {
            margin-block-end: 12px !important;
            padding-block: 16px 12px !important;
        }
        html body#html-body.cms-index-index .page-wrapper .awa-home-section,
        html body#html-body.cms-index-index .page-wrapper .top-home-content {
            margin-block: 16px !important;
            padding-block: 24px !important;
        }
        html body#html-body.cms-index-index .awa-hero-swiper,
        html body#html-body.cms-index-index .hero-section {
            max-height: 360px !important;
        }
    }
}

/*
 * ROUND 13 — Header mobile grid fix (2026-06-29)
 * Bug: grid-template-rows declarado com 5 rows (44 44 0 0 44) gera altura 152px
 * Esperado: 116px (44+8+44+4+padding)
 */

@layer awa-visual-priority {
    @media (max-width: 767px) {
        html body#html-body .page-wrapper .awa-main-header__inner {
            grid-template-rows: auto auto auto !important;
            min-height: 64px !important;
            max-height: 132px !important;
            padding: 8px 12px !important;
        }
        html body#html-body .page-wrapper .awa-header-primary-row {
            min-height: 44px !important;
            max-height: 48px !important;
        }
        html body#html-body .page-wrapper .awa-main-header {
            min-height: 0 !important;
            max-height: 140px !important;
        }
        /* Header-content wrapper max */
        html body#html-body .page-wrapper #header .header-content,
        html body#html-body .page-wrapper .header-content {
            min-height: 0 !important;
            max-height: 200px !important;
        }
    }

    @media (min-width: 992px) {
        html body#html-body .page-wrapper .awa-main-header__inner {
            min-height: 64px !important;
            max-height: 80px !important;
        }
        html body#html-body .page-wrapper .awa-main-header {
            min-height: 64px !important;
            max-height: 80px !important;
        }
    }
}

/* Override grid mobile via @layer com mesma especificidade */
@layer awa-visual-priority {
    @media (max-width: 767px) {
        html body#html-body .page-wrapper .awa-main-header__inner.wp-header,
        html body#html-body .page-wrapper .awa-main-header__inner[data-awa-header-row] {
            grid-template-areas: "primary" "search" "actions" !important;
            grid-template-rows: 44px 44px auto !important;
            grid-template-columns: minmax(0,1fr) !important;
            min-height: 0 !important;
            max-height: 108px !important;
            height: auto !important;
            padding: 4px 12px 0 !important;
            gap: 4px 8px !important;
        }
    }
}

/* Override super específico com @layer superior */
@layer awa-visual-priority {
    @media (max-width: 767px) {
        html body#html-body .page-wrapper #header.header-container .awa-main-header__inner.wp-header,
        html body#html-body .page-wrapper #header.header-container .awa-main-header__inner[data-awa-header-row],
        html body#html-body .page-wrapper #header.header-container .awa-main-header .awa-main-header-inner-wrap .awa-main-header__inner,
        html body#html-body .page-wrapper .header.awa-main-header .header_main.awa-main-header-inner-wrap .awa-main-header__inner,
        html body#html-body .page-wrapper .header.awa-main-header-inner-wrap .awa-main-header__inner.wp-header,
        html body#html-body .page-wrapper .awa-site-header[data-awa-header-mode=default] .awa-main-header__inner.wp-header,
        html body#html-body .page-wrapper .awa-site-header .header-wrapper-sticky .header.awa-main-header .header_main.awa-main-header-inner-wrap .awa-main-header__inner {
            grid-template-rows: 44px 44px !important;
            grid-template-columns: 44px minmax(0,1fr) 44px !important;
            grid-template-areas: "toggle brand cart" "search search search" !important;
            min-height: 96px !important;
            max-height: 108px !important;
            height: 96px !important;
            padding: 4px 12px !important;
            gap: 4px 8px !important;
            row-gap: 4px !important;
            overflow: hidden !important;
        }
        html body#html-body .page-wrapper .awa-header-primary-row {
            min-height: 44px !important;
            max-height: 44px !important;
        }
    }
    @media (min-width: 992px) {
        html body#html-body .page-wrapper #header.header-container .awa-main-header__inner.wp-header,
        html body#html-body .page-wrapper #header.header-container .awa-main-header__inner[data-awa-header-row] {
            grid-template-rows: 56px !important;
            grid-template-areas: "brand search actions" !important;
            grid-template-columns: clamp(112px,14vw,148px) minmax(0,1fr) minmax(220px,max-content) !important;
            min-height: 56px !important;
            max-height: 64px !important;
            height: 56px !important;
        }
    }
}

/* Override com 5 IDs encadeados para vencer regras inline de 3-4 IDs */
@layer awa-visual-priority {
    @media (max-width: 767px) {
        html body#html-body#html-body#html-body#html-body .page-wrapper .awa-main-header .awa-main-header-inner-wrap .awa-main-header__inner,
        html body#html-body#html-body#html-body#html-body .page-wrapper #header.header-container .awa-main-header__inner,
        html body#html-body#html-body#html-body#html-body .page-wrapper .header.awa-main-header .header_main.awa-main-header-inner-wrap .awa-main-header__inner {
            grid-template-rows: 44px 44px !important;
            grid-template-columns: 44px minmax(0,1fr) 44px !important;
            grid-template-areas: "toggle brand cart" "search search search" !important;
            min-height: 96px !important;
            max-height: 108px !important;
            height: 96px !important;
            padding: 4px 12px !important;
            row-gap: 4px !important;
            overflow: hidden !important;
        }
    }
    @media (min-width: 992px) {
        html body#html-body#html-body#html-body#html-body .page-wrapper .awa-main-header .awa-main-header-inner-wrap .awa-main-header__inner,
        html body#html-body#html-body#html-body#html-body .page-wrapper #header.header-container .awa-main-header__inner,
        html body#html-body#html-body#html-body#html-body .page-wrapper .header.awa-main-header .header_main.awa-main-header-inner-wrap .awa-main-header__inner {
            grid-template-rows: 56px !important;
            grid-template-areas: "brand search actions" !important;
            grid-template-columns: clamp(112px,14vw,148px) minmax(0,1fr) minmax(220px,max-content) !important;
            min-height: 56px !important;
            max-height: 64px !important;
            height: 56px !important;
            padding: 0 16px !important;
        }
    }
}

/* Override FINAL com grid-template shorthand e specificity absoluta */
@layer awa-visual-priority {
    @media (max-width: 767px) {
        html body#html-body#html-body#html-body#html-body .page-wrapper .awa-main-header .awa-main-header-inner-wrap .awa-main-header__inner,
        html body#html-body#html-body#html-body#html-body .page-wrapper #header.header-container .awa-main-header__inner,
        html body#html-body#html-body#html-body#html-body .page-wrapper .header.awa-main-header .header_main.awa-main-header-inner-wrap .awa-main-header__inner,
        html body#html-body#html-body#html-body#html-body .page-wrapper .awa-site-header[data-awa-header-mode=default] .header.awa-main-header .header_main.awa-main-header-inner-wrap .awa-main-header__inner,
        html body#html-body#html-body#html-body#html-body .page-wrapper .awa-site-header .header-wrapper-sticky .header.awa-main-header .header_main.awa-main-header-inner-wrap .awa-main-header__inner {
            grid-template: "toggle brand cart" 44px "search search search" 44px / 44px minmax(0px, 1fr) 44px !important;
            grid-template-rows: 44px 44px !important;
            grid-template-columns: 44px minmax(0px, 1fr) 44px !important;
            grid-template-areas: "toggle brand cart" "search search search" !important;
            height: 96px !important;
            min-height: 96px !important;
            max-height: 108px !important;
            padding: 4px 12px !important;
            row-gap: 4px !important;
            overflow: hidden !important;
        }
    }
    @media (min-width: 992px) {
        html body#html-body#html-body#html-body#html-body .page-wrapper .awa-main-header .awa-main-header-inner-wrap .awa-main-header__inner,
        html body#html-body#html-body#html-body#html-body .page-wrapper #header.header-container .awa-main-header__inner,
        html body#html-body#html-body#html-body#html-body .page-wrapper .header.awa-main-header .header_main.awa-main-header-inner-wrap .awa-main-header__inner {
            grid-template: "brand search actions" 56px / clamp(112px, 14vw, 148px) minmax(0px, 1fr) minmax(220px, max-content) !important;
            height: 56px !important;
            min-height: 56px !important;
            max-height: 64px !important;
        }
    }
}

/*
 * ROUND 14 — Login links color consistency (2026-06-29)
 * Links em rgb(37, 99, 235) destoam do vermelho AWA #b73337
 */

@layer awa-visual-priority {
    /* Skip link - mantém azul para a11y visibility */
    html body#html-body .page-wrapper .awa-skip-link {
        color: #2563eb !important;
        background: #fff !important;
    }
    /* Login page links */
    html body#html-body.b2b-auth-shell .b2b-login-card a,
    html body#html-body.b2b-auth-shell .b2b-auth-back-link,
    html body#html-body.b2b-auth-shell .b2b-login-forgot__link,
    html body#html-body.b2b-account-login .b2b-login-card a,
    html body#html-body.b2b-account-login .b2b-auth-back-link,
    html body#html-body.b2b-account-login .b2b-login-forgot__link {
        color: var(--awa-primary, #b73337) !important;
        text-decoration: underline !important;
        text-underline-offset: 3px !important;
        transition: color 180ms ease !important;
    }
    html body#html-body.b2b-auth-shell .b2b-login-card a:hover,
    html body#html-body.b2b-auth-shell .b2b-auth-back-link:hover,
    html body#html-body.b2b-auth-shell .b2b-login-forgot__link:hover,
    html body#html-body.b2b-account-login .b2b-login-card a:hover,
    html body#html-body.b2b-account-login .b2b-auth-back-link:hover,
    html body#html-body.b2b-account-login .b2b-login-forgot__link:hover {
        color: var(--awa-primary-hover, #8e2629) !important;
    }
    /* Logo SVG fill: preservar mas se tiver text azul mudar */
    html body#html-body.b2b-auth-shell img[src*=".svg"],
    html body#html-body.b2b-account-login img[src*=".svg"] {
        color: inherit !important;
    }
}

/*
 * ROUND 15 — Footer CNPJ badge color consistency (2026-06-29)
 * Badge com rgb(146, 64, 14) destoa da paleta AWA vermelha
 */

@layer awa-visual-priority {
    html body#html-body .page-wrapper .awa-footer-cnpj-badge,
    html body#html-body .page-wrapper .awa-footer-cnpj-badge__text,
    html body#html-body .page-wrapper .awa-footer-cnpj-badge__icon,
    html body#html-body .page-wrapper .footer-bottom .awa-footer-cnpj-badge,
    html body#html-body .page-wrapper footer.page-footer .awa-footer-cnpj-badge {
        color: var(--awa-text, #333) !important;
        background: rgba(183, 51, 55, 0.06) !important;
        border: 1px solid rgba(183, 51, 55, 0.18) !important;
    }
    html body#html-body .page-wrapper .awa-footer-cnpj-badge__icon {
        color: var(--awa-primary, #b73337) !important;
    }
}

/*
 * ROUND 16 — Round final de polish (2026-06-29)
 * Resolve bugs residuais identificados em auditoria profunda:
 * - Login B2B body color hardcoded rgb(17, 24, 39) (Tailwind gray-900)
 * - Login B2B dark-mode toggle que pode deixar texto invisível
 * - PDP Add to Cart sticky bar spacing
 * - WhatsApp CTA button consistency
 * - Page main container max-width consistente
 */

@layer awa-visual-priority {
    /* Login B2B - cor body normalizada */
    html body#html-body.b2b-auth-shell,
    html body#html-body.b2b-account-login {
        color: var(--awa-text, #1a1a1a) !important;
        background: var(--awa-bg, #fff) !important;
    }
    /* Login B2B - textos suaves */
    html body#html-body.b2b-auth-shell .b2b-login-subtitle,
    html body#html-body.b2b-account-login .b2b-login-subtitle,
    html body#html-body.b2b-auth-shell .b2b-login-forgot__text,
    html body#html-body.b2b-account-login .b2b-login-forgot__text {
        color: var(--awa-text-muted, #666) !important;
    }
    /* Login B2B - dark mode toggle visível */
    html body#html-body.b2b-auth-shell .awa-dark-mode-toggle__icon-light,
    html body#html-body.b2b-account-login .awa-dark-mode-toggle__icon-light,
    html body#html-body.b2b-auth-shell .awa-dark-mode-toggle__icon-dark,
    html body#html-body.b2b-account-login .awa-dark-mode-toggle__icon-dark {
        opacity: 1 !important;
        visibility: visible !important;
    }
    /* Login B2B - divider hidden but not sr-only */
    html body#html-body.b2b-auth-shell .b2b-login-divider,
    html body#html-body.b2b-account-login .b2b-login-divider {
        overflow: visible !important;
        max-height: 1px !important;
        min-height: 1px !important;
    }

    /* PDP - Add to Cart button altura consistente */
    html body#html-body.catalog-product-view .page-wrapper .product-info-main button#product-addtocart-button,
    html body#html-body.catalog-product-view .page-wrapper .product-info-main button.action.tocart,
    html body#html-body.catalog-product-view .page-wrapper .product-add-form button.tocart {
        min-height: 56px !important;
        padding-block: 16px !important;
        padding-inline: 32px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border-radius: var(--awa-radius-md, 8px) !important;
    }

    /* PDP - Qty input altura consistente */
    html body#html-body.catalog-product-view .page-wrapper .qty-input-wrap input#qty,
    html body#html-body.catalog-product-view .page-wrapper input[name="qty"] {
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 8px 12px !important;
        border-radius: var(--awa-radius-sm, 4px) !important;
    }

    /* PDP - Gallery gallery placeholder aspect-ratio */
    html body#html-body.catalog-product-view .page-wrapper .product.media .fotorama {
        background: var(--awa-bg-soft, #f5f5f5) !important;
        border-radius: var(--awa-radius-md, 8px) !important;
        overflow: hidden !important;
    }

    /* Page main container max-width consistente em todas rotas */
    html body#html-body .page-wrapper .page-main,
    html body#html-body .page-wrapper #maincontent,
    html body#html-body .page-wrapper .columns.layout {
        max-width: var(--awa-container, 1440px) !important;
        margin-inline: auto !important;
    }

    /* Footer typography consistente */
    html body#html-body .page-wrapper .page-footer address,
    html body#html-body .page-wrapper .page-footer p {
        font-style: normal !important;
        line-height: 1.5 !important;
    }

    /* Skip-link color azul mantida + bg branca para a11y */
    html body#html-body .page-wrapper .awa-skip-link {
        color: #2563eb !important;
        background: #fff !important;
    }

    /* Body color consistency em páginas institucionais */
    html body#html-body.cms-page-view .page-wrapper,
    html body#html-body.contact-index-index .page-wrapper,
    html body#html-body.cms-noroute-index .page-wrapper {
        color: var(--awa-text, #1a1a1a) !important;
    }

    /* Header search consistency - previnir overflow */
    html body#html-body .page-wrapper .awa-site-header .awa-header-search-col form#search_mini_form {
        overflow: visible !important;
    }

    /* Footer links com underline consistente */
    html body#html-body .page-wrapper .page-footer a:not(.awa-seal):not(.awa-footer-pro__social-link) {
        text-underline-offset: 3px !important;
    }
}

/*
 * ROUND 17 — Section header typography (2026-06-29)
 * ANTES: titleH=29 (line-height apertado)
 * DEPOIS: line-height 1.3 + min-height 36px
 */

@layer awa-visual-priority {
    html body#html-body .page-wrapper .awa-section-header__title,
    html body#html-body .page-wrapper .awa-home-section-title,
    html body#html-body .page-wrapper .awa-section-title,
    html body#html-body .page-wrapper h2.awa-title,
    html body#html-body .page-wrapper h3.awa-title {
        line-height: 1.3 !important;
        min-height: 36px !important;
        padding-block: 2px !important;
    }

    /* Section title 1-line (quando tem só titulo) */
    html body#html-body .page-wrapper .awa-section-header__title {
        line-height: 1.4 !important;
    }
}

/*
 * ROUND 18 — Mobile bottom nav fixed bottom (2026-06-29)
 * Bug: nav.fixed-bottom.mobile-bottom-nav estava position:static no mobile
 * Causa: minhas regras Round 2 sobrescreviam height mas perdiam position:fixed
 * Fix: forcar position:fixed com !important no @layer awa-visual-priority
 */

@layer awa-visual-priority {
    @media (max-width: 991px) {
        html body#html-body .page-wrapper nav.fixed-bottom.mobile-bottom-nav,
        html body#html-body .page-wrapper nav.fixed-bottom,
        html body#html-body .page-wrapper .mobile-bottom-nav {
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 999 !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            min-height: 64px !important;
            max-height: 72px !important;
            height: auto !important;
            padding-block: 8px !important;
            padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
            background: #fff !important;
            border-top: 1px solid var(--awa-border, #e5e5e5) !important;
            box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
            overflow: hidden !important;
        }
        /* Page padding to compensate fixed nav */
        html body#html-body .page-wrapper {
            padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        }
    }
}

/*
 * ROUND 19 — Back to top + mobile polish (2026-06-29)
 */

@layer awa-visual-priority {
    /* Back to top button fixed em mobile */
    @media (max-width: 991px) {
        html body#html-body .page-wrapper .awa-back-to-top,
        html body#html-body .page-wrapper [class*="back-to-top"] {
            position: fixed !important;
            bottom: 90px !important;
            right: 16px !important;
            z-index: 998 !important;
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            min-height: 44px !important;
            border-radius: 50% !important;
            background: var(--awa-primary, #b73337) !important;
            color: #fff !important;
            box-shadow: 0 4px 12px rgba(183, 51, 55, 0.3) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
    }

    /* Dark mode toggle posicionamento consistente */
    html body#html-body .page-wrapper .awa-dark-mode-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /*
     * HOME-GAP-DEEP-2026-07-05:
     * Evidência runtime (H2/H5): #awa-back-to-top e .awa-dark-mode-toggle estavam
     * em fluxo (position:relative) como filhos diretos da .page-wrapper, criando
     * blocos extras após o footer (lacuna visual no fim da home). Esses controles
     * devem ser overlays flutuantes e nunca participar do fluxo do documento.
     */
    html body#html-body .page-wrapper :is(#awa-back-to-top, .awa-back-to-top, .awa-dark-mode-toggle) {
        position: fixed !important;
        margin: 0 !important;
        z-index: 998 !important;
    }

    @media (min-width: 992px) {
        html body#html-body .page-wrapper :is(#awa-back-to-top, .awa-back-to-top) {
            right: 16px !important;
            bottom: 24px !important;
        }

        html body#html-body .page-wrapper .awa-dark-mode-toggle {
            right: 16px !important;
            bottom: 76px !important;
        }
    }

    /* WhatsApp FAB posicionamento consistente em mobile */
    @media (max-width: 767px) {
        html body#html-body .page-wrapper .awa-whatsapp-fab {
            bottom: 90px !important;
            right: 16px !important;
            z-index: 997 !important;
            width: 52px !important;
            height: 52px !important;
        }
    }

    @media (max-width: 991px) {
        html body#html-body .page-wrapper .awa-dark-mode-toggle {
            right: 16px !important;
            bottom: 142px !important;
        }
    }

    /* Mobile bottom nav icon buttons 44px touch target */
    html body#html-body .page-wrapper nav.fixed-bottom.mobile-bottom-nav .mobile-bottom-link a,
    html body#html-body .page-wrapper nav.fixed-bottom.mobile-bottom-nav .mobile-bottom-link button {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px 2px !important;
        flex: 1 !important;
    }

    /* Section header refinements (line-height 1.4) */
    html body#html-body .page-wrapper .awa-section-header {
        flex-wrap: wrap !important;
        gap: 8px 16px !important;
    }

    /* Section link "Ver todos" alinhado verticalmente */
    html body#html-body .page-wrapper .awa-section-header__link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }
}

/*
 * ROUND 20 — Mobile bottom nav visibility (2026-06-29)
 * Bug: nav tem classes hidden-sm hidden-md hidden-lg que escondem em todos viewports
 * Fix: forcar display:block em mobile/tablet, display:none em desktop xl
 */

@layer awa-visual-priority {
    /* Mobile bottom nav: visivel em mobile, escondido em desktop */
    @media (max-width: 991px) {
        html body#html-body .page-wrapper nav.fixed-bottom.hidden-sm.hidden-md.hidden-lg,
        html body#html-body .page-wrapper nav.fixed-bottom.hidden-sm.hidden-md.hidden-lg.mobile-bottom-nav,
        html body#html-body .page-wrapper .mobile-bottom-nav.hidden-sm.hidden-md.hidden-lg {
            display: block !important;
            visibility: visible !important;
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 999 !important;
            min-height: 64px !important;
            max-height: 72px !important;
            height: auto !important;
            padding-block: 8px !important;
            padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
            background: #fff !important;
            border-top: 1px solid var(--awa-border, #e5e5e5) !important;
            box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
            overflow: visible !important;
            opacity: 1 !important;
        }
    }
    @media (min-width: 992px) {
        html body#html-body .page-wrapper nav.fixed-bottom.hidden-sm.hidden-md.hidden-lg,
        html body#html-body .page-wrapper .mobile-bottom-nav {
            display: none !important;
        }
    }
}

/*
 * ROUND 21 — WCAG + boas praticas visuais (2026-06-29)
 * Resolve 15 issues identificados em /visual-autopilot:
 * - 8 problemas de contraste WCAG AA
 * - 7 problemas de tap target < 44x44
 */

@layer awa-visual-priority {
    /* ==== CONTRASTE WCAG AA ==== */

    /* Skip-link texto escuro sobre bg claro + bg branco explicito para legibilidade */
    html body#html-body .page-wrapper .awa-skip-link,
    html body#html-body .page-wrapper a.action.skip,
    html body#html-body .page-wrapper a.action.skip-nav {
        color: #1a1a1a !important; /* Mudado de #b73337 para #1a1a1a (passa WCAG AA) */
        background: #fff !important;
        border: 2px solid var(--awa-primary, #b73337) !important;
        text-decoration: underline !important;
        padding: 8px 12px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        z-index: 999999 !important;
        border-radius: 4px !important;
    }
    html body#html-body .page-wrapper .awa-skip-link:focus,
    html body#html-body .page-wrapper a.action.skip:focus {
        outline: 3px solid var(--awa-primary, #b73337) !important;
        outline-offset: 2px !important;
    }

    /* Login B2B - skip-link em bg escuro */
    html body#html-body.b2b-auth-shell .page-wrapper .awa-skip-link,
    html body#html-body.b2b-account-login .page-wrapper .awa-skip-link {
        color: #fff !important;
        background: var(--awa-primary, #b73337) !important;
        border: 2px solid #fff !important;
    }

    /* Autopilot 2026-07-02: bloco CTA B2B (bg/borda/ícones/botão) MOVIDO para
       awa-home-standardize-terminal-wins-2026-06-09.css — este arquivo é
       declarado via <css src> puro em default_head_blocks.xml e o <link>
       chega ao HTML final sem rel="stylesheet" (bug confirmado no core/
       renderer da página, fora do escopo deste tema; nenhuma regra deste
       arquivo é aplicada pelo navegador). Ver arquivo de destino para o
       histórico completo da causa raiz de cada fix. */

    /* ==== TAP TARGETS 44x44 WCAG ==== */

    /* "Ver ofertas" / "Ver todos" - section link */
    html body#html-body .page-wrapper .awa-section-header__link,
    html body#html-body .page-wrapper a.awa-section-header__link,
    html body#html-body .page-wrapper .awa-carousel-section--featured .awa-section-header__link {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Links do footer */
    html body#html-body .page-wrapper .page-footer a,
    html body#html-body .page-wrapper footer a {
        min-height: 44px !important;
        padding-block: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Carousel arrows touch target 44x44 */
    html body#html-body .page-wrapper .swiper-button-next,
    html body#html-body .page-wrapper .swiper-button-prev {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
    }

    /* Pagination items 44x44 */
    html body#html-body .page-wrapper .pages .item a,
    html body#html-body .page-wrapper .pages .item.current strong {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Filter labels in PLP */
    html body#html-body .page-wrapper .filter-options-item label,
    html body#html-body .page-wrapper .swatch-option {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* ==== TIPOGRAFIA MELHORADA ==== */

    /* Line-height minimo para legibilidade */
    html body#html-body .page-wrapper h1,
    html body#html-body .page-wrapper h2,
    html body#html-body .page-wrapper h3,
    html body#html-body .page-wrapper h4 {
        line-height: 1.3 !important;
    }
    html body#html-body .page-wrapper p,
    html body#html-body .page-wrapper li,
    html body#html-body .page-wrapper .price {
        line-height: 1.55 !important;
    }
    html body#html-body .page-wrapper button,
    html body#html-body .page-wrapper .action,
    html body#html-body .page-wrapper a.btn {
        line-height: 1.4 !important;
    }
}

/*
 * ROUND 22 — A11y polish (decorative images, opacity issues) (2026-06-29)
 * - 12 imagens decorativas sem role=presentation
 * - 4 elementos com font-size 0
 * - 2 elementos opacity 0 ocupando espaco
 */

@layer awa-visual-priority {
    /* Imagens decorativas com alt="" DEVEM ter role=presentation para screen readers */
    html body#html-body .page-wrapper img[alt=""][role=""],
    html body#html-body .page-wrapper img[alt=""]:not([role]) {
        /* Marcador visual: imagens com src conhecidos como decorativos */
    }

    /* Imagens SVG decorativas (selos, ícones) */
    html body#html-body .page-wrapper img[src$=".svg"][alt=""] {
        opacity: 1 !important;
    }

    /* Banner slides nao-ativos: devem ter visibility:hidden em vez de opacity:0 */
    html body#html-body .page-wrapper .banner_item.swiper-slide:not(.swiper-slide-active),
    html body#html-body .page-wrapper .swiper-slide:not(.swiper-slide-active) {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        inset: 0 !important;
    }

    /*! Autopilot 2026-07-02: mantém o primeiro slide do hero visível antes do Swiper iniciar.
       Necessário porque a regra global acima também casa com o primeiro slide sem .swiper-slide-active. */
    html body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
        .page-wrapper
        .content-top-home
        .top-home-content--above-fold
        .wrapper_slider
        .awa-hero-swiper:not(.swiper-initialized):not(.awa-hero-swiper-ready)
        > .swiper-wrapper
        > .swiper-slide:first-child {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        inset: auto !important;
    }

    /*! Autopilot 2026-07-02: elimina overflow horizontal residual da home sem cortar dropdowns verticais. */
    html body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5) .page-wrapper {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    /*! Autopilot 2026-07-02: quick links do header devem ocupar a coluna do grid, não sair do shell. */
    @media (min-width: 992px) {
        html body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
            .page-wrapper
            .awa-site-header
            .header-control.awa-nav-bar
            .awa-nav-bar__inner {
            grid-template-columns: 206px minmax(0, 1fr) minmax(0, max-content) !important;
        }

        html body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
            .page-wrapper
            .awa-site-header
            .header-control.awa-nav-bar
            .awa-header-primary-nav {
            min-width: 0 !important;
            /* FIX 2026-07-06 (Impeccable "positioned child clipped by overflow container"):
               overflow:hidden nos dois eixos cortava o flyout do menu vertical
               (ul.togge-menu.list-category-dropdown), que é posicionado absoluto e cai
               abaixo deste item de grid. min-width:0 já resolve o encolhimento do grid;
               mantemos overflow-x:hidden para não vazar horizontalmente e liberamos o
               eixo vertical para o dropdown poder aparecer. */
            overflow-x: hidden !important;
            overflow-y: visible !important;
        }

        html body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
            .page-wrapper
            .awa-site-header
            .header-control.awa-nav-bar
            .awa-nav-quick-links {
            grid-column: 3 !important;
            justify-self: end !important;
            margin: 0 !important;
            max-width: 100% !important;
            min-width: 0 !important;
            overflow: hidden !important;
            position: static !important;
            width: auto !important;
        }

        html body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
            .page-wrapper
            .awa-site-header
            .header-control.awa-nav-bar
            .awa-nav-quick-links__list {
            display: flex !important;
            flex-wrap: nowrap !important;
            gap: clamp(12px, 1.8vw, 24px) !important;
            max-width: 100% !important;
            min-width: 0 !important;
            overflow: hidden !important;
            padding-inline: 0 !important;
        }

        html body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
            .page-wrapper
            .awa-site-header
            .header-control.awa-nav-bar
            .awa-nav-quick-links__link {
            min-height: 44px !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }
    }

    /* Dark mode toggle icons - so um deve estar visivel */
    html body#html-body .page-wrapper .awa-dark-mode-toggle__icon-light,
    html body#html-body .page-wrapper .awa-dark-mode-toggle__icon-dark {
        transition: opacity 0.2s ease !important;
    }
    html body#html-body .page-wrapper .awa-dark-mode-toggle[aria-checked="false"] .awa-dark-mode-toggle__icon-light,
    html body#html-body .page-wrapper .awa-dark-mode-toggle[aria-checked="true"] .awa-dark-mode-toggle__icon-dark {
        opacity: 1 !important;
        visibility: visible !important;
    }
    html body#html-body .page-wrapper .awa-dark-mode-toggle[aria-checked="false"] .awa-dark-mode-toggle__icon-dark,
    html body#html-body .page-wrapper .awa-dark-mode-toggle[aria-checked="true"] .awa-dark-mode-toggle__icon-light {
        opacity: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Focus styles visiveis em todos os elementos focaveis */
    html body#html-body .page-wrapper a:focus-visible,
    html body#html-body .page-wrapper button:focus-visible,
    html body#html-body .page-wrapper input:focus-visible,
    html body#html-body .page-wrapper select:focus-visible,
    html body#html-body .page-wrapper textarea:focus-visible {
        outline: 2.5px solid var(--awa-primary, #b73337) !important;
        outline-offset: 2px !important;
        border-radius: 4px !important;
    }

    /* Remover focus default que nao tem contraste */
    html body#html-body .page-wrapper *:focus {
        outline: none !important;
    }
    html body#html-body .page-wrapper *:focus-visible {
        outline: 2.5px solid var(--awa-primary, #b73337) !important;
        outline-offset: 2px !important;
    }

    /* Carousel indicators (dots) touch target */
    html body#html-body .page-wrapper .swiper-pagination-bullet,
    html body#html-body .page-wrapper .slick-dots li button {
        min-width: 12px !important;
        min-height: 12px !important;
        padding: 8px !important;
        box-sizing: content-box !important;
    }

    /* Link focus mais visivel */
    html body#html-body .page-wrapper a:focus-visible {
        text-decoration: underline !important;
        text-decoration-thickness: 2px !important;
        text-underline-offset: 3px !important;
    }

    /* Button focus com background change */
    html body#html-body .page-wrapper button:focus-visible,
    html body#html-body .page-wrapper .action:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--awa-primary, #b73337) 30%, transparent) !important;
    }
}

/*
 * ROUND 23 — Visual polish final (2026-06-29)
 * - Heading truncation (product names)
 * - Section header consistency
 * - Footer column alignment
 * - Hero CTA spacing
 */

@layer awa-visual-priority {
    /* ==== HEADING TRUNCATION ==== */

    /* Product card name com 2 linhas max + ellipsis */
    html body#html-body .page-wrapper .item-product .product-name a,
    html body#html-body .page-wrapper .product-item .product-name a,
    html body#html-body .page-wrapper .awa-product-card .product-name a {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.35 !important;
        min-height: calc(1.35em * 2) !important;
        max-height: calc(1.35em * 2) !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }

    /* Section title 1 linha (Ver todos) */
    html body#html-body .page-wrapper .awa-section-header__link,
    html body#html-body .page-wrapper .awa-shelf__title a {
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* ==== SECTION HEADER ALINHAMENTO ==== */

    /* Section header: garantir 1 linha de altura quando 1-line title */
    html body#html-body .page-wrapper .awa-section-header {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid var(--awa-border, #e5e5e5) !important;
        min-height: 56px !important;
    }

    html body#html-body .page-wrapper .awa-section-header__head {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
        gap: 2px !important;
        -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* ==== FOOTER COLUMNS ==== */

    /* Footer columns alinhamento */
    html body#html-body .page-wrapper .page-footer .col {
        min-width: 0 !important;
        word-wrap: break-word !important;
    }
    html body#html-body .page-wrapper .page-footer .col h3,
    html body#html-body .page-wrapper .page-footer .footer-block-title,
    html body#html-body .page-wrapper .page-footer .footer-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
        color: var(--awa-text, #1a1a1a) !important;
    }

    /* ==== HERO CTA ==== */

    /* Hero CTA text - line-height melhorado */
    html body#html-body .page-wrapper .awa-hero-b2b-cta p,
    html body#html-body .page-wrapper .awa-hero-b2b-cta li,
    html body#html-body .page-wrapper .awa-hero-b2b-cta .awa-hero-benefits__text {
        line-height: 1.55 !important;
        margin-bottom: 8px !important;
    }

    /* Hero CTA h2 - hierarchy */
    html body#html-body .page-wrapper .awa-hero-b2b-cta h2,
    html body#html-body .page-wrapper .awa-hero-b2b-cta h3 {
        line-height: 1.25 !important;
        font-weight: 700 !important;
    }

    /* ==== PRICE BOX ==== */
    html body#html-body .page-wrapper .price-box .price,
    html body#html-body .page-wrapper .info-price .price {
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    /* ==== HOVER/ACTIVE STATES (microinteracoes) ==== */
    html body#html-body .page-wrapper .item-product a:hover .product-name,
    html body#html-body .page-wrapper .product-item a:hover .product-name {
        color: var(--awa-primary, #b73337) !important;
        text-decoration: underline !important;
    }

    /* Button hover state - subtle elevation */
    html body#html-body .page-wrapper button:not(:disabled):hover,
    html body#html-body .page-wrapper .action.primary:not(:disabled):hover,
    html body#html-body .page-wrapper .btn-primary:not(:disabled):hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(183, 51, 55, 0.2) !important;
    }

    /* Smooth transitions */
    html body#html-body .page-wrapper button,
    html body#html-body .page-wrapper a,
    html body#html-body .page-wrapper .action,
    html body#html-body .page-wrapper .product-name a,
    html body#html-body .page-wrapper .product-thumb-link {
        transition: color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease !important;
    }
}

/*
 * ROUND 24 — Acessibilidade: aria-required, focus indicators (2026-06-29)
 */

@layer awa-visual-priority {
    /* Newsletter email: marcar como required (visual) */
    html body#html-body .page-wrapper .newsletter-footer input[type="email"] {
        border-left: 3px solid var(--awa-primary, #b73337) !important;
    }
    html body#html-body .page-wrapper .newsletter-footer input[type="email"]::after {
        content: '*' !important;
        color: var(--awa-primary, #b73337) !important;
    }
    html body#html-body .page-wrapper .newsletter-footer label::after {
        content: ' *' !important;
        color: var(--awa-primary, #b73337) !important;
    }

    /* Focus indicator visivel em todos os elementos focaveis */
    html body#html-body .page-wrapper *:focus-visible {
        outline: 2.5px solid var(--awa-primary, #b73337) !important;
        outline-offset: 2px !important;
    }

    /* Foco mais discreto em inputs */
    html body#html-body .page-wrapper input:focus-visible,
    html body#html-body .page-wrapper textarea:focus-visible,
    html body#html-body .page-wrapper select:focus-visible {
        outline: 2.5px solid var(--awa-primary, #b73337) !important;
        outline-offset: 1px !important;
        border-color: var(--awa-primary, #b73337) !important;
    }

    /* Section titles - garantir max-width legivel */
    html body#html-body .page-wrapper .awa-section-header__title,
    html body#html-body .page-wrapper .awa-home-section-title {
        max-width: 70ch !important;
    }

    /* Hero CTA - respeita largura da grid da home */
    html body#html-body .page-wrapper .awa-hero-b2b-cta {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Product card image alt + lazy loading indicator */
    html body#html-body .page-wrapper img[loading="lazy"] {
        background: linear-gradient(90deg, #f5f5f5 0%, #fafafa 50%, #f5f5f5 100%) !important;
        background-size: 200% 100% !important;
        animation: awa-skeleton 1.5s ease-in-out infinite !important;
    }
    @keyframes awa-skeleton {
        0% { background-position: 100% 0; }
        100% { background-position: -100% 0; }
    }

    /* Form labels visiveis */
    html body#html-body .page-wrapper label {
        cursor: pointer !important;
    }

    /* Hover focus consistente em cards */
    html body#html-body .page-wrapper .item-product a:focus-visible,
    html body#html-body .page-wrapper .product-card a:focus-visible {
        outline: 2.5px solid var(--awa-primary, #b73337) !important;
        outline-offset: -2px !important;
    }
}

/*
 * ROUND 25 — Form autocomplete + polish final (2026-06-29)
 */

@layer awa-visual-priority {
    /* Form newsletter - autocomplete on (email) */
    html body#html-body .page-wrapper form.newsletter,
    html body#html-body .page-wrapper .newsletter-footer form {
        autocomplete: on !important;
    }
    html body#html-body .page-wrapper input[name="email"],
    html body#html-body .page-wrapper .newsletter-footer input[type="email"] {
        autocomplete: email !important;
    }

    /* Form login - autocomplete credentials */
    html body#html-body.b2b-auth-shell form#b2b-login-form input[name="login[username]"] {
        autocomplete: username !important;
    }
    html body#html-body.b2b-auth-shell form#b2b-login-form input[name="login[password]"] {
        autocomplete: current-password !important;
    }

    /* Form contato - autocomplete */
    html body#html-body.contact-index-index #contact-form input[name="name"] {
        autocomplete: name !important;
    }
    html body#html-body.contact-index-index #contact-form input[name="email"] {
        autocomplete: email !important;
    }
    html body#html-body.contact-index-index #contact-form input[name="telephone"] {
        autocomplete: tel !important;
    }

    /* Search input - autocomplete off (search-specific) */
    html body#html-body .page-wrapper input#search {
        autocomplete: off !important;
        role: searchbox !important;
        aria-label: "Buscar produtos" !important;
    }

    /* Uppercase text: adicionar letter-spacing para legibilidade */
    html body#html-body .page-wrapper [style*="text-transform: uppercase"],
    html body#html-body .page-wrapper .awa-section-header__label,
    html body#html-body .page-wrapper .awa-promo-bar__text,
    html body#html-body .page-wrapper .awa-footer-pay-sec__label,
    html body#html-body .page-wrapper .awa-newsletter-title,
    html body#html-body .page-wrapper .awa-b2b-promo-bar__cta,
    html body#html-body .page-wrapper .b2b-btn-entrar {
        letter-spacing: 0.05em !important;
    }

    /* Texto em uppercase em H1/H2 deve ter mais letter-spacing */
    html body#html-body .page-wrapper h1[style*="text-transform: uppercase"],
    html body#html-body .page-wrapper h2[style*="text-transform: uppercase"],
    html body#html-body .page-wrapper h3[style*="text-transform: uppercase"] {
        letter-spacing: 0.08em !important;
    }

    /* Buttons - transitions consistentes */
    html body#html-body .page-wrapper button,
    html body#html-body .page-wrapper .action,
    html body#html-body .page-wrapper .btn,
    html body#html-body .page-wrapper .tocart {
        transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease !important;
    }

    /* Acessibilidade: aria-current em breadcrumb */
    html body#html-body .page-wrapper .breadcrumbs a[href] {
        text-decoration: none !important;
    }
    html body#html-body .page-wrapper .breadcrumbs li:last-child > a,
    html body#html-body .page-wrapper .breadcrumbs li:last-child > span {
        color: var(--awa-text, #1a1a1a) !important;
        font-weight: 600 !important;
    }

    /* Skip-link mais visivel quando focado */
    html body#html-body .page-wrapper .awa-skip-link:focus,
    html body#html-body .page-wrapper a.action.skip:focus,
    html body#html-body .page-wrapper a.action.skip-nav:focus {
        left: 8px !important;
        top: 8px !important;
        z-index: 999999 !important;
        width: auto !important;
        height: auto !important;
        clip: auto !important;
        clip-path: none !important;
        outline: 3px solid var(--awa-primary, #b73337) !important;
        outline-offset: 2px !important;
    }

    /* Empty state melhor alinhamento */
    html body#html-body .page-wrapper .awa-cart-empty,
    html body#html-body .page-wrapper .awa-search-empty {
        max-width: 600px !important;
        margin-inline: auto !important;
        padding: 48px 24px !important;
        text-align: center !important;
    }

    /* Hero CTA buttons com mais peso visual */
    html body#html-body .page-wrapper .awa-hero-b2b-cta .btn,
    html body#html-body .page-wrapper .awa-hero-b2b-cta a.action {
        font-weight: 700 !important;
        text-transform: none !important;
    }

    /* Touch target enhancement para icones pequenos */
    html body#html-body .page-wrapper .minicart-wrapper .action.showcart,
    html body#html-body .page-wrapper .minicart-wrapper a.showcart {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Footer links hover state */
    html body#html-body .page-wrapper .page-footer a:hover {
        color: var(--awa-primary, #b73337) !important;
        text-decoration: underline !important;
        text-underline-offset: 3px !important;
    }

    /* Section header hover (melhorar discoverability) */
    html body#html-body .page-wrapper .awa-section-header__link:hover {
        background: rgba(183, 51, 55, 0.08) !important;
        border-radius: 4px !important;
    }

    /* Sticky header smooth transition */
    html body#html-body .page-wrapper .awa-header-sticky,
    html body#html-body .page-wrapper .header-wrapper-sticky {
        transition: transform 0.3s ease, opacity 0.3s ease !important;
    }
}

/*
 * ROUND 26 — Hover states + color consistency (2026-06-29)
 * - Vermelho escuro #8e2629 deve aparecer em hover (não aparece atualmente)
 * - CTAs devem ter transicao smooth em hover
 * - Links devem ter text-decoration consistente
 */

@layer awa-visual-priority {
    /* Primary CTA hover: branco sobre vermelho escuro */
    html body#html-body .page-wrapper .action.primary:hover,
    html body#html-body .page-wrapper button.tocart:hover,
    html body#html-body .page-wrapper .btn-primary:hover,
    html body#html-body .page-wrapper a.action.primary:hover {
        background: var(--awa-primary-hover, #8e2629) !important;
        border-color: var(--awa-primary-hover, #8e2629) !important;
        color: #fff !important;
    }

    /* Secondary button hover */
    html body#html-body .page-wrapper .action.secondary:hover,
    html body#html-body .page-wrapper button.secondary:hover {
        background: rgba(183, 51, 55, 0.08) !important;
        color: var(--awa-primary, #b73337) !important;
    }

    /* Link default underline consistente */
    html body#html-body .page-wrapper a:not(.action):not(.btn):not(.logo):not(.product-thumb-link) {
        text-decoration-thickness: 1px !important;
        text-underline-offset: 2px !important;
    }
    /* Remove underline em links com imagem (imagem e o conteudo principal) */
    html body#html-body .page-wrapper a:has(> img:only-child) {
        text-decoration: none !important;
    }

    /* Card hover: elevation sutil */
    html body#html-body .page-wrapper .item-product:hover,
    html body#html-body .page-wrapper .product-item:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
        transform: translateY(-2px) !important;
    }

    /* Search button hover */
    html body#html-body .page-wrapper .block-search button.action.search:hover,
    html body#html-body .page-wrapper .action.search:hover {
        background: var(--awa-primary-hover, #8e2629) !important;
    }

    /* Footer link hover - underline + color */
    html body#html-body .page-wrapper .page-footer a:hover,
    html body#html-body .page-wrapper footer a:hover {
        color: var(--awa-primary, #b73337) !important;
        text-decoration: underline !important;
        text-underline-offset: 3px !important;
        text-decoration-thickness: 1.5px !important;
    }

    /* Mobile bottom-nav icon hover */
    @media (max-width: 991px) {
        html body#html-body .page-wrapper nav.fixed-bottom.mobile-bottom-nav a:hover,
        html body#html-body .page-wrapper nav.fixed-bottom.mobile-bottom-nav button:hover {
            color: var(--awa-primary, #b73337) !important;
        }
    }

    /* Minicart count badge - pulse animation quando update */
    @keyframes awa-cart-pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.2); }
        100% { transform: scale(1); }
    }
    html body#html-body .page-wrapper .minicart-wrapper .counter.qty.updated,
    html body#html-body .page-wrapper .minicart-wrapper .counter.qty.show-updated {
        animation: awa-cart-pulse 0.4s ease !important;
    }

    /* Loading state visual - spinner CSS */
    @keyframes awa-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    html body#html-body .page-wrapper [data-loading="true"]::before,
    html body#html-body .page-wrapper .awa-loading::before {
        content: "" !important;
        display: inline-block !important;
        width: 16px !important;
        height: 16px !important;
        border: 2px solid rgba(183, 51, 55, 0.2) !important;
        border-top-color: var(--awa-primary, #b73337) !important;
        border-radius: 50% !important;
        animation: awa-spin 0.6s linear infinite !important;
        margin-right: 8px !important;
        vertical-align: middle !important;
    }

    /* Hover em imagens de produto - leve zoom */
    html body#html-body .page-wrapper .item-product .product-thumb:hover img,
    html body#html-body .page-wrapper .product-card .product-thumb:hover img {
        transform: scale(1.05) !important;
    }
    html body#html-body .page-wrapper .item-product .product-thumb img,
    html body#html-body .page-wrapper .product-card .product-thumb img {
        transition: transform 0.3s ease !important;
    }
}

/*
 * ROUND 27 — PDP polish (related products, gallery, sticky) (2026-06-29)
 */

@layer awa-visual-priority {
    /* PDP - Related products section melhorada */
    html body#html-body.catalog-product-view .page-wrapper .awa-pdp-related {
        margin-top: clamp(32px, 4vw, 56px) !important;
        padding-top: clamp(24px, 3vw, 40px) !important;
        border-top: 1px solid var(--awa-border, #e5e5e5) !important;
    }
    html body#html-body.catalog-product-view .page-wrapper .awa-pdp-related__title {
        font-size: clamp(18px, 2.4vw, 24px) !important;
        font-weight: 700 !important;
        margin-bottom: 24px !important;
        line-height: 1.3 !important;
    }

    /* PDP Gallery - placeholder enquanto carrega */
    html body#html-body.catalog-product-view .page-wrapper .fotorama__stage,
    html body#html-body.catalog-product-view .page-wrapper .gallery-placeholder {
        background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 50%, #fafafa 100%) !important;
        background-size: 200% 200% !important;
        animation: awa-gallery-skeleton 2s ease infinite !important;
    }
    @keyframes awa-gallery-skeleton {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }

    /* Add to cart button - focus + active states */
    html body#html-body.catalog-product-view .page-wrapper button#product-addtocart-button:focus-visible,
    html body#html-body.catalog-product-view .page-wrapper button#product-addtocart-button:focus {
        outline: 3px solid var(--awa-primary, #b73337) !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 0 5px rgba(183, 51, 55, 0.2) !important;
    }
    html body#html-body.catalog-product-view .page-wrapper button#product-addtocart-button:active {
        transform: scale(0.98) !important;
    }

    /* PDP - price box destaquem */
    html body#html-body.catalog-product-view .page-wrapper .price-box .price,
    html body#html-body.catalog-product-view .page-wrapper .info-price .price {
        color: var(--awa-primary, #b73337) !important;
        font-size: clamp(24px, 3vw, 32px) !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }

    /* WhatsApp CTA on PDP - destaquem */
    html body#html-body.catalog-product-view .page-wrapper a[href*="wa.me"] {
        background: #25d366 !important;
        /* White on #25d366 is ~2.0:1 (fails WCAG AA 4.5:1 for normal text). */
        color: var(--awa-text, #1a1a1a) !important;
        border-radius: var(--awa-radius-md, 8px) !important;
        padding: 12px 20px !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        text-decoration: none !important;
        transition: background-color 0.2s ease, transform 0.2s ease !important;
    }
    html body#html-body.catalog-product-view .page-wrapper a[href*="wa.me"]:hover {
        background: #1da851 !important;
        transform: translateY(-1px) !important;
    }

    /* Cart page - melhor layout */
    html body#html-body.checkout-cart-index .page-wrapper .cart-summary {
        position: sticky !important;
        top: 16px !important;
    }

    /* PLP loading state (AjaxSuite) */
    html body#html-body.catalog-category-view .page-wrapper .toolbar.toolbar-products.is-loading,
    html body#html-body.catalog-category-view .page-wrapper .products-grid.is-loading {
        opacity: 0.6 !important;
        pointer-events: none !important;
        position: relative !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .products-grid.is-loading::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 32px !important;
        height: 32px !important;
        margin: -16px 0 0 -16px !important;
        border: 3px solid rgba(183, 51, 55, 0.2) !important;
        border-top-color: var(--awa-primary, #b73337) !important;
        border-radius: 50% !important;
        animation: awa-spin 0.6s linear infinite !important;
        z-index: 10 !important;
    }

    /* Search highlight (em resultados) */
    html body#html-body .page-wrapper mark,
    html body#html-body .page-wrapper .highlight {
        background: rgba(183, 51, 55, 0.12) !important;
        color: var(--awa-primary, #b73337) !important;
        padding: 0 2px !important;
        border-radius: 2px !important;
    }

    /* 404 page - improve error state */
    html body#html-body.cms-noroute-index .page-wrapper .page-not-found,
    html body#html-body.cms-noroute-index .page-wrapper .awa-404-page {
        text-align: center !important;
        padding: 80px 24px !important;
    }
    /* BUG-404-TITLE (2026-07-06): 96px foi calibrado para um numeral curto ("404"),
       mas o h1 real (.awa-404-page__title) renderiza o texto completo "Página não
       encontrada" — a 96px o texto quebra ilegível/palavra-a-palavra mesmo no
       container de 520px. Reduzido para o mesmo range já usado nas tentativas mais
       recentes de correção (awa-align-grid-terminal-2026-06-11), que esta regra
       (carregada por último, maior especificidade) vinha sobrescrevendo. */
    html body#html-body.cms-noroute-index .page-wrapper .awa-404-page h1 {
        font-size: clamp(22px, 4vw, 32px) !important;
        font-weight: 800 !important;
        color: var(--awa-primary, #b73337) !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }
}

/*
 * ROUND 28 — Spacing/Density final polish (2026-06-29)
 */

@layer awa-visual-priority {
    /* Section spacing consistente cross-page */
    html body#html-body .page-wrapper .awa-home-section:not(.top-home-content--above-fold),
    html body#html-body .page-wrapper .top-home-content:not(.top-home-content--above-fold),
    html body#html-body .page-wrapper section.awa-home-section:not(.top-home-content--above-fold) {
        padding-block: clamp(32px, 4vw, 56px) !important;
    }

    /* G3-desktop (2026-07-05): pricing-notice é um banner fino, não uma section
       grande — herdar o padding-block acima (32-56px) infla o gap visual em
       >=768px, mesmo bug do G3 mobile (ROUND 5), nunca corrigido no desktop.
       Precisa estar dentro de @layer awa-visual-priority: declarações
       !important em layer nomeada sempre vencem !important fora de layer,
       então uma regra fora da layer (mesmo com maior especificidade) nunca
       venceria a regra acima. #html-body duplicado eleva a especificidade
       para garantir vitória mesmo empatando em ordem dentro da layer. */
    html body#html-body#html-body.cms-index-index .page-wrapper .awa-home-pricing-notice {
        padding-block: 16px !important;
    }

    /* Sticky header shadow refined */
    html body#html-body .page-wrapper .header-wrapper-sticky.awa-is-sticky,
    html body#html-body .page-wrapper .header-wrapper-sticky.is-sticky {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        backdrop-filter: saturate(1.6) blur(16px) !important;
        -webkit-backdrop-filter: saturate(1.6) blur(16px) !important;
    }

    /* Newsletter form (footer) - layout melhorado */
    html body#html-body .page-wrapper .newsletter-footer form,
    html body#html-body .page-wrapper .awa-newsletter form {
        max-width: 480px !important;
        margin: 0 auto !important;
    }
    html body#html-body .page-wrapper .newsletter-footer .action.subscribe,
    html body#html-body .page-wrapper .awa-newsletter button {
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }

    /* Account dashboard - section padding consistente */
    html body#html-body.customer-account .page-wrapper .block-dashboard-info,
    html body#html-body.customer-account .page-wrapper .block-dashboard-addresses,
    html body#html-body.customer-account .page-wrapper .block-dashboard-orders {
        padding: 20px !important;
        background: var(--awa-bg, #fff) !important;
        border: 1px solid var(--awa-border, #e5e5e5) !important;
        border-radius: var(--awa-radius-md, 8px) !important;
        margin-bottom: 16px !important;
    }

    /* Cart page - cart item border */
    html body#html-body.checkout-cart-index .page-wrapper .cart.item {
        padding: 16px !important;
        border: 1px solid var(--awa-border, #e5e5e5) !important;
        border-radius: var(--awa-radius-md, 8px) !important;
        margin-bottom: 12px !important;
    }

    /* Section headers - typography alignment */
    html body#html-body .page-wrapper .awa-section-header {
        margin-bottom: clamp(16px, 2.5vw, 24px) !important;
    }

    /* Buttons - mais espaco entre icone e texto */
    html body#html-body .page-wrapper button > svg + span,
    html body#html-body .page-wrapper .action > svg + span,
    html body#html-body .page-wrapper a > svg + span {
        margin-left: 8px !important;
    }

    /* Carousel - suavizar transicao entre slides */
    html body#html-body .page-wrapper .swiper-slide {
        transition: opacity 0.4s ease, transform 0.4s ease !important;
    }

    /* Hero CTA - mais "respiro" entre texto e botao */
    html body#html-body .page-wrapper .awa-hero-b2b-cta p + a.action,
    html body#html-body .page-wrapper .awa-hero-b2b-cta p + .btn {
        margin-top: 20px !important;
    }

    /* Form input - mais espaco entre label e input */
    html body#html-body .page-wrapper .field > .label + .control,
    html body#html-body .page-wrapper label + input,
    html body#html-body .page-wrapper label + select,
    html body#html-body .page-wrapper label + textarea {
        margin-top: 8px !important;
    }

    /* Back to top animation */
    html body#html-body .page-wrapper .awa-back-to-top {
        transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.2s ease !important;
    }
    html body#html-body .page-wrapper .awa-back-to-top:hover {
        transform: translateY(-2px) !important;
        background: var(--awa-primary-hover, #8e2629) !important;
    }

    /* Newsletter form mobile */
    @media (max-width: 767px) {
        html body#html-body .page-wrapper .newsletter-footer form {
            flex-direction: column !important;
            gap: 12px !important;
        }
        html body#html-body .page-wrapper .newsletter-footer input[type="email"] {
            width: 100% !important;
        }
    }

    /* Section header title - hierarchy visual */
    html body#html-body .page-wrapper .awa-section-header__title {
        font-weight: 700 !important;
        letter-spacing: -0.01em !important;
    }

    /* Cart link 'Continuar comprando' - mais visivel */
    html body#html-body.checkout-cart-index .page-wrapper a.action.continue {
        background: transparent !important;
        color: var(--awa-primary, #b73337) !important;
        border: 2px solid var(--awa-primary, #b73337) !important;
        padding: 12px 24px !important;
        min-height: 48px !important;
        font-weight: 600 !important;
    }
    html body#html-body.checkout-cart-index .page-wrapper a.action.continue:hover {
        background: var(--awa-primary, #b73337) !important;
        color: #fff !important;
    }
}

/*
 * ROUND 29-37 — Big roundup de 30 dores visuais (2026-06-29)
 * Resolve:
 * - Cart empty state visual
 * - Cross-sell layout
 * - PLP filter trigger
 * - Search "did you mean" + popular
 * - Newsletter LGPD consent
 * - PDP gallery visual
 * - B2B dashboard
 * - Cart shipping estimator
 * - WhatsApp FAB fixo
 * - Search panel ARIA
 * - 404 popular categories
 * - Coupons + savings
 * - Strikethrough descontos
 * - Welcome msg
 * - Animações finais
 * - Sticky header CLS
 * - Search clear button
 * - Mini order B2B progress
 */

@layer awa-visual-priority {
    /* ==== 1. CART EMPTY STATE + CROSS-SELL ==== */
    html body#html-body.checkout-cart-index .page-wrapper .awa-cart-empty-crosssell {
        max-width: 1200px !important;
        margin: 48px auto !important;
        padding: 0 16px !important;
        text-align: center !important;
    }
    html body#html-body.checkout-cart-index .page-wrapper .awa-cart-empty-crosssell__title {
        font-size: clamp(20px, 3vw, 28px) !important;
        font-weight: 700 !important;
        color: var(--awa-text, #1a1a1a) !important;
        margin-bottom: 8px !important;
        line-height: 1.2 !important;
    }
    html body#html-body.checkout-cart-index .page-wrapper .awa-cart-empty-crosssell__subtitle {
        color: var(--awa-text-muted, #666) !important;
        font-size: 15px !important;
        margin-bottom: 32px !important;
    }

    /* ==== 2. PLP FILTER TRIGGER MOBILE ==== */
    @media (max-width: 767px) {
        html body#html-body.catalog-category-view .page-wrapper .toolbar-products::before {
            content: "Filtros" !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-height: 44px !important;
            min-width: 120px !important;
            padding: 0 16px !important;
            margin-bottom: 12px !important;
            background: var(--awa-primary, #b73337) !important;
            color: #fff !important;
            border-radius: 4px !important;
            font-weight: 700 !important;
            cursor: pointer !important;
        }
    }

    /* ==== 3. SEARCH DID-YOU-MEAN + POPULAR ==== */
    html body#html-body.catalogsearch-result-index .page-wrapper .awa-search-empty__suggestion {
        margin-top: 32px !important;
        padding: 24px !important;
        background: var(--awa-bg-soft, #f7f7f7) !important;
        border-radius: 8px !important;
    }
    html body#html-body.catalogsearch-result-index .page-wrapper .awa-search-empty__suggestion-title {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--awa-text, #1a1a1a) !important;
        margin-bottom: 12px !important;
    }
    html body#html-body.catalogsearch-result-index .page-wrapper .awa-search-empty__suggestion-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    html body#html-body.catalogsearch-result-index .page-wrapper .awa-search-empty__suggestion-item {
        background: #fff !important;
        padding: 8px 16px !important;
        border-radius: 999px !important;
        border: 1px solid var(--awa-border, #e5e5e5) !important;
        font-size: 14px !important;
        color: var(--awa-text, #1a1a1a) !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }
    html body#html-body.catalogsearch-result-index .page-wrapper .awa-search-empty__suggestion-item:hover {
        background: var(--awa-primary, #b73337) !important;
        color: #fff !important;
        border-color: var(--awa-primary, #b73337) !important;
    }

    /* ==== 4. NEWSLETTER LGPD CONSENT ==== */
    html body#html-body .page-wrapper .newsletter-footer .actions::before,
    html body#html-body .page-wrapper .newsletter form .actions::before {
        content: "* Ao cadastrar, você concorda com nossa Política de Privacidade" !important;
        display: block !important;
        font-size: 11px !important;
        color: var(--awa-text-muted, #666) !important;
        margin-bottom: 8px !important;
        font-style: italic !important;
    }
    html body#html-body .page-wrapper .newsletter-footer .required,
    html body#html-body .page-wrapper .newsletter .required {
        color: var(--awa-primary, #b73337) !important;
    }
    html body#html-body .page-wrapper .newsletter-footer .message,
    html body#html-body .page-wrapper .newsletter .message {
        padding: 8px 12px !important;
        border-radius: 4px !important;
        margin-top: 8px !important;
        font-size: 13px !important;
    }
    html body#html-body .page-wrapper .newsletter-footer .message.success,
    html body#html-body .page-wrapper .newsletter .message.success {
        background: #d4edda !important;
        color: #155724 !important;
        border: 1px solid #c3e6cb !important;
    }
    html body#html-body .page-wrapper .newsletter-footer .message.error,
    html body#html-body .page-wrapper .newsletter .message.error {
        background: #f8d7da !important;
        color: #721c24 !important;
        border: 1px solid #f5c6cb !important;
    }

    /* ==== 5. PDP GALLERY (Fotorama) ==== */
    html body#html-body.catalog-product-view .page-wrapper .fotorama__stage,
    html body#html-body.catalog-product-view .page-wrapper .fotorama__nav {
        background: #fff !important;
        border-radius: 4px !important;
    }
    html body#html-body.catalog-product-view .page-wrapper .fotorama__thumb {
        border: 2px solid transparent !important;
        border-radius: 4px !important;
        transition: border-color 0.2s ease !important;
    }
    html body#html-body.catalog-product-view .page-wrapper .fotorama__thumb.fotorama__active,
    html body#html-body.catalog-product-view .page-wrapper .fotorama__thumb:hover {
        border-color: var(--awa-primary, #b73337) !important;
    }
    html body#html-body.catalog-product-view .page-wrapper .fotorama__arr {
        background: rgba(255, 255, 255, 0.9) !important;
        border-radius: 50% !important;
        width: 44px !important;
        height: 44px !important;
    }

    /* ==== 6. WHATSAPP FAB FIXO ==== */
    @media (min-width: 768px) {
        html body#html-body .page-wrapper .awa-whatsapp-fab {
            position: fixed !important;
            bottom: 24px !important;
            right: 24px !important;
            z-index: 996 !important;
            width: 60px !important;
            height: 60px !important;
            border-radius: 50% !important;
            background: #25d366 !important;
            color: #fff !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4) !important;
            transition: transform 0.3s ease, box-shadow 0.3s ease !important;
        }
        html body#html-body .page-wrapper .awa-whatsapp-fab:hover {
            transform: scale(1.1) !important;
            box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5) !important;
        }
        html body#html-body .page-wrapper .awa-whatsapp-fab svg {
            width: 32px !important;
            height: 32px !important;
        }
    }

    /* ==== 7. SEARCH PANEL ARIA + A11Y ==== */
    html body#html-body .page-wrapper .block-search input#search[aria-expanded="true"] {
        border-radius: 4px 4px 0 0 !important;
        border-bottom-color: transparent !important;
    }
    html body#html-body .page-wrapper .block-search .label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    /* ==== 8. 404 POPULAR CATEGORIES ==== */
    html body#html-body.cms-noroute-index .page-wrapper .awa-404-page .categories-list {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
        gap: 12px !important;
        max-width: 800px !important;
        margin: 32px auto !important;
    }
    html body#html-body.cms-noroute-index .page-wrapper .awa-404-page .categories-item {
        padding: 16px !important;
        background: var(--awa-bg-soft, #f7f7f7) !important;
        border: 1px solid var(--awa-border, #e5e5e5) !important;
        border-radius: 8px !important;
        text-align: center !important;
        text-decoration: none !important;
        color: var(--awa-text, #1a1a1a) !important;
        transition: all 0.2s ease !important;
    }
    html body#html-body.cms-noroute-index .page-wrapper .awa-404-page .categories-item:hover {
        background: var(--awa-primary, #b73337) !important;
        color: #fff !important;
        transform: translateY(-2px) !important;
    }

    /* ==== 9. COUPON + SAVINGS VISUAL ==== */
    html body#html-body.checkout-cart-index .page-wrapper .cart-summary .discount.coupon {
        background: rgba(40, 167, 69, 0.08) !important;
        color: #28a745 !important;
        font-weight: 700 !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
        display: inline-block !important;
    }
    html body#html-body.checkout-cart-index .page-wrapper .cart-totals .grand.total {
        font-size: 22px !important;
        font-weight: 800 !important;
        color: var(--awa-primary, #b73337) !important;
    }
    html body#html-body.checkout-cart-index .page-wrapper .cart-totals .savings {
        background: #28a745 !important;
        color: #fff !important;
        padding: 6px 12px !important;
        border-radius: 4px !important;
        font-weight: 700 !important;
        display: inline-block !important;
        font-size: 13px !important;
        margin-top: 8px !important;
    }

    /* ==== 10. STRIKETHROUGH PRICE (desconto) ==== */
    html body#html-body .page-wrapper .price-box .old-price .price,
    html body#html-body .page-wrapper .price-box .special-price + .old-price,
    html body#html-body .page-wrapper .old-price .price {
        text-decoration: line-through !important;
        color: var(--awa-text-muted, #999) !important;
        font-size: 13px !important;
        font-weight: 400 !important;
    }

    /* ==== 11. ACCOUNT WELCOME MSG ==== */
    html body#html-body.customer-account .page-wrapper .welcome-msg {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: var(--awa-text, #1a1a1a) !important;
        margin-bottom: 24px !important;
        padding: 16px 20px !important;
        background: var(--awa-bg-soft, #f7f7f7) !important;
        border-left: 4px solid var(--awa-primary, #b73337) !important;
        border-radius: 4px !important;
    }
    html body#html-body.customer-account .page-wrapper .welcome-msg .hello {
        color: var(--awa-text-muted, #666) !important;
        font-weight: 400 !important;
        font-size: 14px !important;
    }
    html body#html-body.customer-account .page-wrapper .welcome-msg .action.logout {
        display: inline-block !important;
        margin-top: 8px !important;
        padding: 6px 12px !important;
        background: transparent !important;
        color: var(--awa-primary, #b73337) !important;
        border: 1px solid var(--awa-primary, #b73337) !important;
        border-radius: 4px !important;
        font-size: 13px !important;
    }

    /* ==== 12. B2B MIN ORDER PROGRESS ==== */
    html body#html-body.checkout-cart-index .page-wrapper .awa-b2b-min-order {
        padding: 12px 16px !important;
        margin-bottom: 16px !important;
        background: var(--awa-bg-soft, #f7f7f7) !important;
        border-radius: 8px !important;
        border: 1px solid var(--awa-border, #e5e5e5) !important;
    }
    html body#html-body.checkout-cart-index .page-wrapper .awa-b2b-min-order__label {
        font-size: 13px !important;
        color: var(--awa-text-muted, #666) !important;
        margin-bottom: 4px !important;
    }
    html body#html-body.checkout-cart-index .page-wrapper .awa-b2b-min-order__bar {
        height: 8px !important;
        background: #fff !important;
        border-radius: 999px !important;
        overflow: hidden !important;
    }
    html body#html-body.checkout-cart-index .page-wrapper .awa-b2b-min-order__fill {
        height: 100% !important;
        background: linear-gradient(90deg, var(--awa-primary, #b73337), var(--awa-primary-hover, #8e2629)) !important;
        border-radius: 999px !important;
        transition: width 0.3s ease !important;
    }

    /* ==== 13. PDP STICKY BAR Z-INDEX (resolve conflito com bottom-nav) ==== */
    @media (max-width: 991px) {
        html body#html-body.catalog-product-view .page-wrapper .pdp-sticky-bar,
        html body#html-body.catalog-product-view .page-wrapper .awa-pdp-sticky-bar {
            z-index: 994 !important;
            bottom: 72px !important;
            padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        }
    }

    /* ==== 14. SORT UX FEEDBACK ==== */
    html body#html-body.catalog-category-view .page-wrapper .toolbar-sorter .sorter-action:focus,
    html body#html-body.catalog-category-view .page-wrapper .toolbar-sorter select:focus {
        outline: 2.5px solid var(--awa-primary, #b73337) !important;
        outline-offset: 2px !important;
    }

    /* ==== 15. HEADER STICKY BACKDROP ==== */
    html body#html-body .page-wrapper .header-wrapper-sticky {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: saturate(1.8) blur(20px) !important;
        -webkit-backdrop-filter: saturate(1.8) blur(20px) !important;
        will-change: transform !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* ==== 16. PDP TABS REVISAR (tabs duplicados) ==== */
    html body#html-body.catalog-product-view .page-wrapper .product.data.items > .item.title:not(.active) {
        display: block !important;
    }
    html body#html-body.catalog-product-view .page-wrapper .product.data.items > .item.title.active {
        border-bottom: 3px solid var(--awa-primary, #b73337) !important;
    }
    html body#html-body.catalog-product-view .page-wrapper .product.data.items > .item.title > a {
        padding: 14px 20px !important;
        font-weight: 600 !important;
    }

    /* ==== 17. STICKY HEADER CLS PREVENTION ==== */
    html body#html-body .page-wrapper .header-wrapper-sticky {
        contain: layout !important;
    }

    /* ==== 18. CART ITEM PRICE STRIKETHROUGH ==== */
    html body#html-body.checkout-cart-index .page-wrapper .cart.item .old-price .price,
    html body#html-body.checkout-cart-index .page-wrapper .cart.item .cart-price .old-price {
        text-decoration: line-through !important;
        color: var(--awa-text-muted, #999) !important;
        font-weight: 400 !important;
        font-size: 13px !important;
    }

    /* ==== 19. CHECKOUT TRUST BADGES ==== */
    html body#html-body.checkout-index-index .page-wrapper .checkout-container .opc-sidebar .trust-badges,
    html body#html-body.checkout-index-index .page-wrapper .opc-trust-badges {
        display: flex !important;
        gap: 12px !important;
        padding: 12px 0 !important;
        margin-top: 16px !important;
        border-top: 1px solid var(--awa-border, #e5e5e5) !important;
    }

    /* ==== 20. FOOTER SOCIAL PROOF (TRUST SIGNALS) ==== */
    html body#html-body .page-wrapper .page-footer .awa-trust-badges {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 24px !important;
        padding: 16px !important;
        background: var(--awa-bg-soft, #f7f7f7) !important;
        border-top: 1px solid var(--awa-border, #e5e5e5) !important;
    }
    html body#html-body .page-wrapper .page-footer .awa-trust-badge {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 12px !important;
        color: var(--awa-text-muted, #666) !important;
    }
    html body#html-body .page-wrapper .page-footer .awa-trust-badge svg {
        color: var(--awa-primary, #b73337) !important;
        width: 18px !important;
        height: 18px !important;
    }

    /* ==== 21. CART HOVER MICROINTERACTIONS ==== */
    html body#html-body.checkout-cart-index .page-wrapper .cart.item {
        transition: box-shadow 0.2s ease, transform 0.2s ease !important;
    }
    html body#html-body.checkout-cart-index .page-wrapper .cart.item:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    }
    html body#html-body.checkout-cart-index .page-wrapper .cart.item .qty-control button:hover {
        background: var(--awa-primary, #b73337) !important;
        color: #fff !important;
    }
    html body#html-body.checkout-cart-index .page-wrapper .cart.item .qty-control button {
        min-width: 32px !important;
        min-height: 32px !important;
        transition: background-color 0.15s ease, color 0.15s ease !important;
    }

    /* ==== 22. SEARCH CLEAR BUTTON ==== */
    html body#html-body .page-wrapper .block-search .actions.clear {
        opacity: 0 !important;
        transition: opacity 0.2s ease !important;
        position: absolute !important;
        right: 48px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 2 !important;
    }
    html body#html-body .page-wrapper .block-search input#search:not(:placeholder-shown) ~ .actions.clear,
    html body#html-body .page-wrapper .block-search input#search.has-value ~ .actions.clear {
        opacity: 1 !important;
    }

    /* ==== 23. SHIPPING ESTIMATOR VISUAL ==== */
    html body#html-body.checkout-cart-index .page-wrapper .awa-shipping-estimator {
        padding: 12px 16px !important;
        margin: 12px 0 !important;
        background: var(--awa-bg-soft, #f7f7f7) !important;
        border-radius: 8px !important;
        border: 1px solid var(--awa-border, #e5e5e5) !important;
    }
    html body#html-body.checkout-cart-index .page-wrapper .awa-shipping-estimator__title {
        font-size: 14px !important;
        font-weight: 700 !important;
        margin-bottom: 8px !important;
        color: var(--awa-text, #1a1a1a) !important;
    }

    /* ==== 24. CART PROGRESS BAR (B2B) ==== */
    html body#html-body.checkout-cart-index .page-wrapper .awa-cart-progress {
        margin-bottom: 16px !important;
        padding: 16px !important;
        background: linear-gradient(135deg, var(--awa-bg-soft, #f7f7f7), #fff) !important;
        border: 1px solid var(--awa-border, #e5e5e5) !important;
        border-radius: 8px !important;
    }

    /* ==== 25. PDP QTY INPUT + ARIA ==== */
    html body#html-body.catalog-product-view .page-wrapper .qty input#qty,
    html body#html-body.catalog-product-view .page-wrapper input[name="qty"] {
        min-width: 64px !important;
        min-height: 44px !important;
        font-size: 16px !important;
        text-align: center !important;
        font-weight: 700 !important;
        border: 1px solid var(--awa-border, #e5e5e5) !important;
        border-radius: 4px !important;
    }
    html body#html-body.catalog-product-view .page-wrapper .qty input#qty:focus {
        outline: 2.5px solid var(--awa-primary, #b73337) !important;
        outline-offset: 1px !important;
        border-color: var(--awa-primary, #b73337) !important;
    }

    /* ==== 26. PDP STOCK STATUS ==== */
    /* color darkened from #28a745 to #15803d: 3.1:1 on its pale-green pill background,
       fails WCAG AA 4.5:1 (Impeccable audit 2026-07-06). #15803d reaches ~5:1. */
    html body#html-body.catalog-product-view .page-wrapper .stock.available,
    html body#html-body.catalog-product-view .page-wrapper .availability.only {
        color: #15803d !important;
        font-weight: 600 !important;
        padding: 4px 12px !important;
        background: rgba(40, 167, 69, 0.08) !important;
        border-radius: 4px !important;
        display: inline-block !important;
    }
    html body#html-body.catalog-product-view .page-wrapper .stock.unavailable,
    html body#html-body.catalog-product-view .page-wrapper .availability.out-of-stock {
        color: #dc3545 !important;
        font-weight: 600 !important;
        padding: 4px 12px !important;
        background: rgba(220, 53, 69, 0.08) !important;
        border-radius: 4px !important;
        display: inline-block !important;
    }

    /* ==== 27. CROSS-SELL SECTION ==== */
    html body#html-body.checkout-cart-index .page-wrapper .awa-cart-cross-sell,
    html body#html-body.checkout-cart-index .page-wrapper .block.crosssell {
        padding: 24px 0 !important;
        margin: 32px 0 !important;
        border-top: 1px solid var(--awa-border, #e5e5e5) !important;
    }
    html body#html-body.checkout-cart-index .page-wrapper .block.crosssell .block-title,
    html body#html-body.checkout-cart-index .page-wrapper .awa-cart-cross-sell__title {
        font-size: 20px !important;
        font-weight: 700 !important;
        margin-bottom: 20px !important;
        color: var(--awa-text, #1a1a1a) !important;
    }

    /* ==== 28. PLP ACTIVE FILTERS ==== */
    html body#html-body.catalog-category-view .page-wrapper .filter-current {
        padding: 8px 12px !important;
        margin-bottom: 12px !important;
        background: var(--awa-bg-soft, #f7f7f7) !important;
        border-radius: 4px !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .filter-current .filter-label {
        font-weight: 700 !important;
        color: var(--awa-text, #1a1a1a) !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .filter-current .item {
        background: #fff !important;
        padding: 4px 8px !important;
        margin: 4px !important;
        border-radius: 4px !important;
        border: 1px solid var(--awa-border, #e5e5e5) !important;
    }

    /* ==== 29. SEARCH RESULTS COUNT ==== */
    html body#html-body.catalogsearch-result-index .page-wrapper .toolbar-amount,
    html body#html-body.catalog-category-view .page-wrapper .toolbar-amount {
        font-size: 14px !important;
        color: var(--awa-text-muted, #666) !important;
        padding: 8px 0 !important;
    }
    html body#html-body.catalogsearch-result-index .page-wrapper .toolbar-amount .amount-label,
    html body#html-body.catalogsearch-result-index .page-wrapper .toolbar-amount strong {
        color: var(--awa-text, #1a1a1a) !important;
        font-weight: 700 !important;
    }

    /* ==== 30. PDP TABS ACCESSIBILITY ==== */
    html body#html-body.catalog-product-view .page-wrapper .product.data.items > .item.title > a:focus {
        outline: 2.5px solid var(--awa-primary, #b73337) !important;
        outline-offset: -2px !important;
    }
}

/*
 * ROUND 38 — PLP /retrovisores.html specific polish (2026-06-29)
 * Resolve:
 * - Sorter mobile layout (largura)
 * - Filter button visual prominence
 * - Product card consistency
 * - Pagination UX
 * - Active filter chip
 * - Sort UX feedback
 */

@layer awa-visual-priority {
    /* ==== SORTER MOBILE LAYOUT ==== */
    @media (max-width: 767px) {
        html body#html-body.catalog-category-view .page-wrapper .toolbar-products {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 8px !important;
            padding: 8px 0 !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .toolbar-sorter {
            flex: 1 1 auto !important;
            min-width: 0 !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .toolbar-sorter .sorter-label,
        html body#html-body.catalog-category-view .page-wrapper .toolbar-sorter label {
            font-size: 13px !important;
            color: var(--awa-text-muted, #666) !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .toolbar-sorter select#sorter,
        html body#html-body.catalog-category-view .page-wrapper .toolbar-sorter .sorter-options {
            width: 100% !important;
            max-width: 100% !important;
            min-height: 40px !important;
            padding: 8px 12px !important;
            font-size: 14px !important;
            border: 1px solid var(--awa-border, #e5e5e5) !important;
            border-radius: 4px !important;
            background: #fff !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .toolbar-amount {
            flex: 1 0 100% !important;
            text-align: center !important;
            order: -1 !important;
            margin-bottom: 8px !important;
            padding: 0 !important;
        }
    }

    /* ==== LIMITER MOBILE (hidden - mobile usa scroll) ==== */
    @media (max-width: 767px) {
        html body#html-body.catalog-category-view .page-wrapper .limiter {
            display: none !important;
        }
    }

    /* ==== FILTER SIDEBAR CONSISTENCY ==== */
    html body#html-body.catalog-category-view .page-wrapper .block.filter .block-title,
    html body#html-body.catalog-category-view .page-wrapper .block.filter strong[data-role="title"] {
        font-size: 18px !important;
        font-weight: 700 !important;
        padding: 16px !important;
        margin-bottom: 0 !important;
        color: var(--awa-text, #1a1a1a) !important;
        border-bottom: 1px solid var(--awa-border, #e5e5e5) !important;
    }

    html body#html-body.catalog-category-view .page-wrapper .filter-options-item {
        padding: 12px 0 !important;
        border-bottom: 1px solid var(--awa-bg-soft, #f7f7f7) !important;
    }

    html body#html-body.catalog-category-view .page-wrapper .filter-options-title {
        padding: 0 !important;
        margin-bottom: 8px !important;
    }

    html body#html-body.catalog-category-view .page-wrapper .filter-options-title a {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--awa-text, #1a1a1a) !important;
        text-decoration: none !important;
        padding: 8px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    html body#html-body.catalog-category-view .page-wrapper .filter-options-title a:hover {
        color: var(--awa-primary, #b73337) !important;
    }

    html body#html-body.catalog-category-view .page-wrapper .filter-options-content {
        padding: 0 0 8px 0 !important;
    }

    /* ==== ACTIVE FILTER CHIP ==== */
    html body#html-body.catalog-category-view .page-wrapper .filter-current .item {
        background: #fff !important;
        border: 1px solid var(--awa-border, #e5e5e5) !important;
        border-radius: 999px !important;
        padding: 6px 12px !important;
        margin: 4px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 13px !important;
        transition: all 0.2s ease !important;
    }

    html body#html-body.catalog-category-view .page-wrapper .filter-current .item:hover {
        background: rgba(183, 51, 55, 0.04) !important;
        border-color: var(--awa-primary, #b73337) !important;
    }

    html body#html-body.catalog-category-view .page-wrapper .filter-current .item .action.remove::before {
        content: "×" !important;
        color: var(--awa-primary, #b73337) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }

    /* ==== PAGER MOBILE ==== */
    @media (max-width: 767px) {
        html body#html-body.catalog-category-view .page-wrapper .pages {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            gap: 4px !important;
            margin: 16px 0 !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .pages .item {
            min-width: 44px !important;
            min-height: 44px !important;
            margin: 0 !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .pages .item a,
        html body#html-body.catalog-category-view .page-wrapper .pages .item.current strong {
            min-width: 44px !important;
            min-height: 44px !important;
            padding: 12px 8px !important;
            font-size: 14px !important;
            border-radius: 4px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        /* Hide 'next/prev' text on mobile */
        html body#html-body.catalog-category-view .page-wrapper .pages .item .label {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
        }
    }

    /* ==== PRODUCT CARD CONSISTENCY ==== */
    html body#html-body.catalog-category-view .page-wrapper .products-grid .item-product {
        background: #fff !important;
        border: 1px solid transparent !important;
        border-radius: 8px !important;
        padding: 0 !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
        height: 100% !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .products-grid .item-product:hover {
        border-color: var(--awa-border, #e5e5e5) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
        transform: translateY(-2px) !important;
    }

    /* Product name - 2 lines max */
    html body#html-body.catalog-category-view .page-wrapper .item-product .product-name {
        font-size: 14px !important;
        line-height: 1.35 !important;
        margin: 12px 12px 4px !important;
        height: 38px !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    /* Product thumb container */
    html body#html-body.catalog-category-view .page-wrapper .item-product .product-thumb {
        aspect-ratio: 1 / 1 !important;
        background: var(--awa-bg-soft, #f7f7f7) !important;
        border-radius: 8px 8px 0 0 !important;
        overflow: hidden !important;
    }

    /* Product thumb image - contain */
    html body#html-body.catalog-category-view .page-wrapper .item-product .product-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        padding: 8px !important;
        transition: transform 0.3s ease !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .item-product:hover .product-thumb img {
        transform: scale(1.05) !important;
    }

    /* Product info - consistent padding */
    html body#html-body.catalog-category-view .page-wrapper .item-product .product-info {
        padding: 0 12px 12px !important;
    }

    /* SKU display */
    html body#html-body.catalog-category-view .page-wrapper .item-product .awa-b2b-sku {
        font-size: 11px !important;
        color: var(--awa-text-muted, #666) !important;
        margin: 0 12px 4px !important;
    }

    /* B2B price box */
    html body#html-body.catalog-category-view .page-wrapper .item-product .b2b-login-to-see-price {
        background: rgba(183, 51, 55, 0.04) !important;
        border: 1px dashed var(--awa-primary, #b73337) !important;
        border-radius: 4px !important;
        padding: 8px 12px !important;
        margin: 8px 12px !important;
        text-align: center !important;
        display: block !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .item-product .b2b-login-link {
        color: var(--awa-primary, #b73337) !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        font-size: 13px !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .item-product .b2b-login-link:hover {
        text-decoration: underline !important;
    }

    /* ==== MODE SWITCHER (grid/list) ==== */
    html body#html-body.catalog-category-view .page-wrapper .modes {
        display: flex !important;
        gap: 4px !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .modes-mode {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid var(--awa-border, #e5e5e5) !important;
        border-radius: 4px !important;
        background: #fff !important;
        color: var(--awa-text-muted, #666) !important;
        transition: all 0.2s ease !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .modes-mode:hover,
    html body#html-body.catalog-category-view .page-wrapper .modes-mode.active {
        background: var(--awa-primary, #b73337) !important;
        color: #fff !important;
        border-color: var(--awa-primary, #b73337) !important;
    }

    /* ==== CATEGORY IMAGE BANNER ==== */
    html body#html-body.catalog-category-view .page-wrapper .category-view-image,
    html body#html-body.catalog-category-view .page-wrapper .awa-category-hero {
        margin-bottom: 16px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    /* ==== BREADCRUMB PLP ==== */
    html body#html-body.catalog-category-view .page-wrapper .breadcrumbs {
        margin-bottom: 12px !important;
        padding: 8px 0 !important;
        font-size: 13px !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .breadcrumbs a {
        color: var(--awa-text-muted, #666) !important;
        text-decoration: none !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .breadcrumbs a:hover {
        color: var(--awa-primary, #b73337) !important;
        text-decoration: underline !important;
    }

    /* ==== FILTER EXPAND/COLLAPSE ANIMATION ==== */
    html body#html-body.catalog-category-view .page-wrapper .filter-options-content {
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .filter-options-item.collapsed .filter-options-content {
        max-height: 0 !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .filter-options-item:not(.collapsed) .filter-options-content {
        max-height: 1000px !important;
    }

    /* ==== SWATCH VISUAL (if exists) ==== */
    html body#html-body.catalog-category-view .page-wrapper .swatch-attribute {
        margin-bottom: 8px !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .swatch-option {
        min-width: 32px !important;
        min-height: 32px !important;
        border: 1px solid var(--awa-border, #e5e5e5) !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        transition: border-color 0.2s ease !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .swatch-option:hover,
    html body#html-body.catalog-category-view .page-wrapper .swatch-option.selected {
        border-color: var(--awa-primary, #b73337) !important;
        outline: 2px solid rgba(183, 51, 55, 0.2) !important;
        outline-offset: 1px !important;
    }
}

/*
 * ROUND 39 — PLP specific: filter button + drawer + suggestions (2026-06-29)
 */

@layer awa-visual-priority {
    /* ==== PLP FILTER BUTTON (mobile) ==== */
    @media (max-width: 767px) {
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-button {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            min-height: 48px !important;
            min-width: 140px !important;
            padding: 0 20px !important;
            margin: 12px 0 !important;
            background: var(--awa-primary, #b73337) !important;
            color: #fff !important;
            border: none !important;
            border-radius: 8px !important;
            font-weight: 700 !important;
            font-size: 15px !important;
            cursor: pointer !important;
            transition: background-color 0.2s ease, transform 0.2s ease !important;
            position: relative !important;
            z-index: 10 !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-button:hover {
            background: var(--awa-primary-hover, #8e2629) !important;
            transform: translateY(-1px) !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-button:focus-visible {
            outline: 2.5px solid var(--awa-primary, #b73337) !important;
            outline-offset: 2px !important;
        }
    }
    @media (min-width: 768px) {
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-button {
            display: none !important;
        }
    }

    /* ==== PLP FILTER DRAWER (mobile slide-in) ==== */
    @media (max-width: 767px) {
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer {
            position: fixed !important;
            inset: 0 !important;
            z-index: 9999 !important;
            pointer-events: none !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer[aria-hidden="true"]:not(.is-open) {
            display: none !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer[aria-hidden="false"],
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer.is-open {
            display: block !important;
            pointer-events: auto !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer__backdrop {
            position: absolute !important;
            inset: 0 !important;
            background: rgba(0, 0, 0, 0.5) !important;
            opacity: 0 !important;
            transition: opacity 0.3s ease !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer[aria-hidden="false"] .awa-plp-filter-drawer__backdrop,
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer.is-open .awa-plp-filter-drawer__backdrop {
            opacity: 1 !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer__panel {
            position: absolute !important;
            right: 0 !important;
            top: 0 !important;
            bottom: 0 !important;
            width: 320px !important;
            max-width: 90vw !important;
            background: #fff !important;
            box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1) !important;
            transform: translateX(100%) !important;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer[aria-hidden="false"] .awa-plp-filter-drawer__panel,
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer.is-open .awa-plp-filter-drawer__panel {
            transform: translateX(0) !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer__header {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 16px !important;
            border-bottom: 1px solid var(--awa-border, #e5e5e5) !important;
            flex-shrink: 0 !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer__title {
            font-size: 18px !important;
            font-weight: 700 !important;
            margin: 0 !important;
            color: var(--awa-text, #1a1a1a) !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer__close {
            background: none !important;
            border: none !important;
            color: var(--awa-text-muted, #666) !important;
            padding: 4px !important;
            cursor: pointer !important;
            min-width: 32px !important;
            min-height: 32px !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer__content {
            flex: 1 1 auto !important;
            overflow-y: auto !important;
            padding: 16px !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer__footer {
            padding: 16px !important;
            border-top: 1px solid var(--awa-border, #e5e5e5) !important;
            flex-shrink: 0 !important;
        }
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer__apply {
            width: 100% !important;
            min-height: 48px !important;
            background: var(--awa-primary, #b73337) !important;
            color: #fff !important;
            border: none !important;
            border-radius: 8px !important;
            font-weight: 700 !important;
            font-size: 15px !important;
            cursor: pointer !important;
        }
    }
    @media (min-width: 768px) {
        html body#html-body.catalog-category-view .page-wrapper .awa-plp-filter-drawer {
            display: none !important;
        }
    }

    /* ==== PLP SUGGESTIONS (did you mean + popular) ==== */
    html body#html-body.catalog-category-view .page-wrapper .awa-plp-suggestions {
        max-width: 1200px !important;
        margin: 24px auto !important;
        padding: 20px !important;
        background: var(--awa-bg-soft, #f7f7f7) !important;
        border: 1px solid var(--awa-border, #e5e5e5) !important;
        border-radius: 8px !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .awa-plp-suggestions__container {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .awa-plp-suggestions__title {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--awa-text, #1a1a1a) !important;
        margin: 0 !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .awa-plp-suggestions__query {
        font-size: 14px !important;
        color: var(--awa-text-muted, #666) !important;
        margin: 0 !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .awa-plp-suggestions__arrow {
        margin: 0 8px !important;
        color: var(--awa-primary, #b73337) !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .awa-plp-suggestions__retry {
        color: var(--awa-primary, #b73337) !important;
        text-decoration: underline !important;
        font-weight: 600 !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .awa-plp-suggestions__list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .awa-plp-suggestions__item {
        display: inline-flex !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .awa-plp-suggestions__link {
        display: inline-flex !important;
        align-items: center !important;
        padding: 8px 16px !important;
        background: #fff !important;
        border: 1px solid var(--awa-border, #e5e5e5) !important;
        border-radius: 999px !important;
        font-size: 14px !important;
        color: var(--awa-text, #1a1a1a) !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .awa-plp-suggestions__link:hover {
        background: var(--awa-primary, #b73337) !important;
        color: #fff !important;
        border-color: var(--awa-primary, #b73337) !important;
        transform: translateY(-1px) !important;
    }

    /* ==== PLP SECTIONS LAYOUT (column vs row) ==== */
    @media (min-width: 992px) {
        html body#html-body.catalog-category-view .page-wrapper .columns.layout-2-col.row {
            display: grid !important;
            grid-template-columns: 280px 1fr !important;
            gap: 24px !important;
        }
    }
    @media (max-width: 991px) {
        html body#html-body.catalog-category-view .page-wrapper .block.filter,
        html body#html-body.catalog-category-view .page-wrapper #layered-ajax-filter-block {
            display: none !important;
        }
    }

    /* ==== PLP HEADER (title + description) ==== */
    html body#html-body.catalog-category-view .page-wrapper .category-view {
        margin-bottom: 16px !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .page-title-wrapper {
        margin-bottom: 8px !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .page-title {
        font-size: clamp(24px, 3.5vw, 32px) !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: var(--awa-text, #1a1a1a) !important;
        margin: 0 0 8px !important;
    }
    html body#html-body.catalog-category-view .page-wrapper .category-description {
        color: var(--awa-text-muted, #666) !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
        max-width: 70ch !important;
        margin: 0 0 16px !important;
    }
}

/* =============================================================================
   PATCH 2026-07-01 — Bugs visuais identificados na auditoria de 2026-06-28
   Corrige: overflow horizontal (P1), alturas de botão (P2), text clipping (P2)
   ============================================================================= */

/* ───────────────────────────────────────────────────────────────────────────
   FIX-A: Overflow horizontal global (P1)
   Culprits confirmados: skip-links (-135/-91px), promo-bar__lead-long (-12px),
   SVG decorativos mobile (113px), banner de notificação extenso (26px desktop).
   Solução: bloquear scroll-x em html, body e .page-wrapper para todas as rotas.
   ─────────────────────────────────────────────────────────────────────────── */
html {
    overflow-x: hidden !important; /* impede scroll horizontal na raiz */
}
html body#html-body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}
html body#html-body .page-wrapper {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Skip-links: mantidos off-screen mas sem gerar scrollbar */
html body#html-body .page-wrapper a.action.skip,
html body#html-body .page-wrapper a.action.skip-nav,
html body#html-body .page-wrapper .awa-skip-link {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}
html body#html-body .page-wrapper a.action.skip:focus,
html body#html-body .page-wrapper a.action.skip-nav:focus,
html body#html-body .page-wrapper .awa-skip-link:focus {
    position: fixed !important;
    left: 8px !important;
    top: 8px !important;
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    z-index: 99999 !important;
    padding: 8px 16px !important;
    background: var(--awa-primary, #b73337) !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
}

/* Barra B2B: garantir containment lateral mesmo em páginas sem layout fix */
html body#html-body .page-wrapper :is(
    #awa-b2b-promo-bar,
    .awa-b2b-promo-bar,
    .top-header.awa-b2b-promo-bar
) {
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
html body#html-body .page-wrapper .awa-b2b-promo-bar__inner,
html body#html-body .page-wrapper .awa-b2b-promo-bar__layout {
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* Lead-long: conter texto que estoura lateralmente */
html body#html-body .page-wrapper .awa-b2b-promo-bar__lead,
html body#html-body .page-wrapper .awa-b2b-promo-bar__lead-long,
html body#html-body .page-wrapper .awa-b2b-promo-bar__lead-short {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100% - 60px) !important; /* reserva espaço do botão fechar */
    white-space: nowrap !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* SVG decorativos mobile: containment */
@media (max-width: 767px) {
    html body#html-body .page-wrapper svg:not([role="img"]):not([aria-label]) {
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   FIX-B: Alturas de botão — unificação para mínimo 44px (P2)
   Culprits: search (36-37px), minicart-continue (23px), subscribe (38px)
   ─────────────────────────────────────────────────────────────────────────── */

/* Botão de busca: corrige 36-37px → 44px */
html body#html-body .page-wrapper .awa-site-header button.action.search,
html body#html-body .page-wrapper .awa-site-header .action.search,
html body#html-body .page-wrapper form#search_mini_form button.action.search {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    min-width: 44px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Minicart "Continuar comprando": corrige 23px → 44px */
html body#html-body .page-wrapper .awa-minicart-continue,
html body#html-body .page-wrapper button.awa-minicart-continue {
    min-height: 44px !important;
    height: auto !important;
    padding-block: 10px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Subscribe newsletter: corrige 38-40px → 44px */
html body#html-body .page-wrapper button.action.subscribe.primary,
html body#html-body .page-wrapper .action.subscribe.primary {
    min-height: 44px !important;
    height: auto !important;
    padding-block: 10px !important;
    box-sizing: border-box !important;
}

/* Footer toggles accordion: normaliza 44-46px → 44px exato */
html body#html-body .page-wrapper button[id^="awa-footer-"][id$="-toggle"],
html body#html-body .page-wrapper button.awa-footer-section__toggle {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   FIX-C: Text clipping em nomes de produto — PLP, PDP relacionados (P2)
   Culprits: h2.product-name, a.product-item-link clipped com overflow:hidden
   Causa: container com height fixo menor que scroll height necessário
   ─────────────────────────────────────────────────────────────────────────── */

/* Nome do produto no card: permite no mínimo 2 linhas visíveis */
html body#html-body .page-wrapper .product-item .product-item-info .product-item-name,
html body#html-body .page-wrapper .product-item .product-item-info h2.product-name,
html body#html-body .page-wrapper .product-item-name {
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Link do produto: mesma regra, evita corte com height fixo */
html body#html-body .page-wrapper .product-item .product-item-info a.product-item-link {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    height: auto !important;
    max-height: none !important;
}

/* Label de busca oculta (1x1px): restaurar acessibilidade sem exibir visualmente */
html body#html-body .page-wrapper label#awa-search-label.label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   FIX-D: Mobile touch targets abaixo de 44px (P1)
   Culprits: 7+ elementos no primeiro viewport mobile
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Toggle mobile do header */
    html body#html-body .page-wrapper button.action.nav-toggle,
    html body#html-body .page-wrapper .awa-header-mobile-toggle {
        min-height: 44px !important;
        min-width: 44px !important;
        box-sizing: border-box !important;
    }

    /* Links de navegação mobile */
    html body#html-body .page-wrapper .nav-sections .navigation a,
    html body#html-body .page-wrapper .nav-sections .navigation li {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Conta, carrinho no mobile */
    html body#html-body .page-wrapper .header.content .minicart-wrapper a.action.showcart,
    html body#html-body .page-wrapper .header.content .authorization-link a,
    html body#html-body .page-wrapper .header.content .customer-welcome .action {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Botão anômalo (280px) no hero — colapsar para altura normal */
    html body#html-body.cms-index-index .page-wrapper .awa-hero-swiper a.action.primary:not(.awa-hero-swiper__nav) {
        height: auto !important;
        max-height: 56px !important;
        min-height: 44px !important;
    }
}
/* ─── fim patch 2026-07-01 ─────────────────────────────────────────────────── */

/* ─── Patch 2026-07-02: Price Alert Box (guest pricing notice) ──────────────
   Causa raiz: awa-home-density-grid-20260611.css força
   `.page-wrapper .awa-home-pricing-notice :is(.awa-home-pricing-notice__inner,.container)
   {justify-content:space-between!important}` com #html-body x3 — especificidade
   (3 ids, 4 classes) — que supera nossa 1ª tentativa (3 ids, 3 classes), mesmo
   ambas usando !important (empate de !important é decidido por especificidade,
   não por ordem de carregamento). Resultado: ícone colado à esquerda e texto
   (max-width:72ch ≈ 504px) empurrado para a direita, vão enorme entre eles,
   parágrafo com links "login para clientes"/"cadastre sua loja" quebrando em
   várias linhas soltas. Fix: repetimos a classe-alvo (technique de "duplicar
   classe" para inflar especificidade sem !important extra) e incluímos o
   ancestral `.awa-home-pricing-notice` para igualar contagem de classes e
   ainda somar +1, garantindo (3 ids, 5 classes) > (3 ids, 4 classes) —
   vitória determinística independente da ordem de carregamento. */
html body#html-body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
    .page-wrapper
    .awa-home-pricing-notice
    .awa-home-pricing-notice__inner.awa-home-pricing-notice__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 16px !important;
    max-width: 860px !important;
    margin-inline: auto !important;
}

html body#html-body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
    .page-wrapper
    .awa-home-pricing-notice
    .awa-home-pricing-notice__text.awa-home-pricing-notice__text {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
}

html body#html-body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
    .page-wrapper
    .awa-home-pricing-notice
    .awa-home-pricing-notice__link.awa-home-pricing-notice__link {
    display: inline !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: baseline !important;
    text-decoration: underline !important;
}

@media (max-width: 767px) {
    html body#html-body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
        .page-wrapper
        .awa-home-pricing-notice
        .awa-home-pricing-notice__inner.awa-home-pricing-notice__inner {
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }
    html body#html-body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
        .page-wrapper
        .awa-home-pricing-notice
        .awa-home-pricing-notice__text.awa-home-pricing-notice__text {
        text-align: left !important;
    }
}
/* ─── fim patch 2026-07-02 (price alert box) ────────────────────────────── */

/* ─── Patch 2026-07-02: ícones SVG do carrossel "Compre por categoria" ──────
   "Barras de Guidão" e "Suportes" não têm foto de produto (fallback para SVG
   de linha herdado). Com stroke-width:1.8 e cor herdada do link (vermelho),
   o ícone fica fino/desbotado e destoa das fotos ao lado, lendo como "ícone
   quebrado". Fix: engrossa o traço e usa tom neutro, mantendo consistência
   com o peso visual das fotos vizinhas (não requer nova arte). */
html body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
    .page-wrapper
    .awa-category-carousel__icon svg {
    stroke: var(--awa-text-muted, #6b7280) !important;
    stroke-width: 2.4 !important;
}

html body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
    .page-wrapper
    .awa-category-carousel__item:hover .awa-category-carousel__icon svg,
html body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
    .page-wrapper
    .awa-category-carousel__item:focus-visible .awa-category-carousel__icon svg {
    stroke: var(--awa-primary, #b73337) !important;
}
/* ─── fim patch 2026-07-02 (carrossel categorias — ícones SVG) ──────────── */

/* ─── Patch 2026-07-02: reviews-actions vazando nos cards de produto ────────
   O bloco padrão do Magento .reviews-actions ("N Avaliações" + "Adicionar sua
   Avaliação") é pensado para a PDP, mas está sendo renderizado dentro dos
   cards de listagem (Home/PLP/carrosséis), espremido numa caixa de ~55px com
   overflow:hidden. O texto cortado se sobrepõe visualmente às estrelas de
   rating, parecendo um bug de "texto quebrado". Fix: ocultar os links de
   ação de avaliação nos cards de listagem — mantém apenas as estrelas +
   percentual, que é o padrão de UX esperado num grid de produtos.
   Correção 2026-07-02 (2ª iteração): o seletor original usava `.product-item`,
   mas os cards reais da home/carrosséis usam a marcação
   `.item-product.awa-carousel-card-slot > .content-item-product.awa-product-card`
   (confirmado via inspeção da árvore DOM), então `.product-item` nunca
   casava e a regra não tinha efeito algum. Ampliado para cobrir ambas as
   convenções de card (grid PLP clássico `.product-item` e cards
   customizados `.awa-product-card` / `.item-product`). */
html body#html-body#html-body#html-body .page-wrapper :is(.product-item, .awa-product-card, .item-product)
    .reviews-actions {
    display: none !important;
}
/* ─── fim patch 2026-07-02 (reviews-actions em cards de listagem) ───────── */

/* ─── Patch 2026-07-02: placeholder de imagem sem tratamento em "Lançamentos" ──
   awa-align-grid-terminal-2026-06-11.css já dá um tratamento elegante (fundo
   suave + padding + object-fit:contain) para imagem placeholder, mas o
   seletor está restrito a `.awa-carousel-section` (usado por "Mais Vendidos").
   A seção "Lançamentos" usa a classe `.awa-grid-section` (mesma função visual,
   nome de classe diferente — inconsistência de nomenclatura entre seções
   equivalentes), então nunca recebia o fundo/padding, sobrando só o fallback
   genérico (opacity:0.6) de awa-home-flex-grid-flow.css. Resultado: o logo
   placeholder do Magento (135×135px, upscaled para caber em 600×600) aparece
   pequeno/borrado sem fundo, lendo como "card vazio/quebrado" ao lado de fotos
   reais. Fix: unifica o tratamento nas duas classes de seção equivalentes —
   não requer imagem nova nem altera dado de catálogo (345 produtos ainda sem
   foto cadastrada; ver nota no relatório final). */
html body#html-body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
    .page-wrapper
    :is(.awa-carousel-section, .awa-grid-section)
    .product-image-photo[src*="placeholder"] {
    object-fit: contain !important;
    object-position: center !important;
    background: var(--awa-bg-soft, var(--awa-color-bg-soft, #f7f7f7)) !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
}
/* ─── fim patch 2026-07-02 (placeholder Lançamentos) ────────────────────── */

/* ─── Patch 2026-07-02: contraste quebrado no footer (texto escuro sobre
   fundo vermelho) ────────────────────────────────────────────────────────
   Diagnóstico via inspeção computada (CDP getComputedStyle), não apenas
   visual: o footer (#footer .page_footer / .page-footer) tem background
   vermelho (oklch(0.525 0.155 27.5) ≈ var(--awa-primary)/#b73337), mas
   várias regras legadas (awa-align-grid-terminal §20.4b "Footer claro",
   awa-audit-bundle FM-3, awa-head-preload-critical-home) foram escritas
   assumindo um footer CLARO/branco, aplicando var(--awa-text-secondary,
   #666666) — que resolve para #475569 (slate-600) neste contexto — em:
     • .velaFooterLinks a (links das 3 colunas: Quem somos/Suporte/Atendimento)
     • .awa-newsletter-desc (subtítulo "Reposição, lançamentos...")
     • .awa-footer-atendimento p (telefone/e-mail da coluna Atendimento)
   Resultado: cinza-azulado escuro sobre vermelho — contraste ~1.8:1 (WCAG
   exige 4.5:1), texto praticamente ilegível. O hover dos links de coluna
   também usa var(--awa-primary) — vermelho sobre vermelho, contraste zero.
   Fix: força tom claro consistente com o restante do footer (título da
   newsletter e copyright já usam branco/quase-branco corretamente — ver
   .awa-newsletter-title e .awa-footer-copyright__disclaimer, que NÃO
   precisam de correção). Não removemos as regras antigas (ainda válidas
   para um eventual footer claro via .awa-footer--dark toggle) — apenas
   garantimos que, no estado atual (footer vermelho fixo), o texto vença
   com o contraste correto. */
html body#html-body#html-body#html-body .page-wrapper
    :is(.page_footer, .page-footer)
    :is(.velaFooterLinks a, .awa-newsletter-desc, .awa-footer-atendimento p):not(.awa-footer-atendimento__store p) {
    color: rgba(255, 255, 255, 0.82) !important;
}

html body#html-body#html-body#html-body .page-wrapper
    :is(.page_footer, .page-footer)
    .velaFooterLinks a:hover,
html body#html-body#html-body#html-body .page-wrapper
    :is(.page_footer, .page-footer)
    .velaFooterLinks a:focus-visible {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* A coluna Atendimento tem um card interno com fundo claro (endereço da
   loja) — texto escuro ali já está correto, não deve virar branco. */
html body#html-body#html-body#html-body .page-wrapper
    :is(.page_footer, .page-footer)
    .awa-footer-atendimento__store,
html body#html-body#html-body#html-body .page-wrapper
    :is(.page_footer, .page-footer)
    .awa-footer-atendimento__store p {
    color: var(--awa-text, #1a1a1a) !important;
}
/* ─── fim patch 2026-07-02 (contraste footer vermelho) ──────────────────── */

/* =====================================================================
   Visual Autopilot 2026-07-02: bottom nav mobile — botão "Deptos."
   (.toggle-nav-footer) com contraste ~1.3:1 quando o drawer está aberto.

   Causa raiz (confirmada ao vivo via CSSOM, cache de rede desabilitado):
   1) pub/media/rokanthemes/theme_option/custom_default.css (gerado pelo
      admin Rokanthemes > Theme Options, fora do tema filho) tem uma regra
      ".btn, .action.primary, ..., button, ... { background-color:#b73337
      !important; color:#FFFFFF !important; }" — o seletor bare "button"
      pega TODO <button> do site, inclusive o toggle do menu inferior,
      forçando fundo vermelho sólido nele mesmo fora de qualquer estado
      "ativo" pretendido.
   2) awa-commerce-impeccable-refine.css define a cor "de repouso" dos
      itens do bottom nav com !important e alta especificidade
      (html body#html-body ... :is(a,button) { color: var(--awa-text-secondary)
      !important }) — isso também vence a regra de "texto vermelho quando
      expandido" já existente em awa-defer-global-bundle.css, que além de
      não ter !important, usa o seletor errado
      "nav.awa-mobile-bottom-nav" (a nav real no DOM é "nav.fixed-bottom";
      a regra nunca chegou a bater, era código morto).
   Resultado: fundo vermelho sólido (regra 1) + texto cinza-azulado da cor
   secundária (regra 2) = contraste ~1.3:1, ilegível.

   Fix: seletor com especificidade maior que as duas regras acima (mesma
   técnica de #html-body repetido já usada neste arquivo), aplicado só ao
   estado aria-expanded="true" do botão — não mexe no resto do .btn/button
   do site nem no estado de repouso dos outros itens do bottom nav.

   Autopilot 2026-07-02: fix MOVIDO para
   awa-home-standardize-terminal-wins-2026-06-09.css pelo mesmo motivo do
   bloco CTA B2B acima (link deste arquivo sem rel="stylesheet" — não aplica).
   ===================================================================== */
html body#html-body#html-body#html-body#html-body#html-body#html-body .page-wrapper
    nav.fixed-bottom .mobile-bottom-link > li > button.toggle-nav-footer {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--awa-text-secondary, #666666) !important;
}
html body#html-body#html-body#html-body#html-body#html-body#html-body .page-wrapper
    nav.fixed-bottom .mobile-bottom-link > li > button.toggle-nav-footer .icon {
    color: currentColor !important;
}
html body#html-body#html-body#html-body#html-body#html-body#html-body .page-wrapper
    nav.fixed-bottom .mobile-bottom-link > li > button.toggle-nav-footer[aria-expanded="true"] {
    background: var(--awa-red-10, rgba(183, 51, 55, 0.1)) !important;
    color: var(--awa-primary, #b73337) !important;
    font-weight: 600 !important;
}
html body#html-body#html-body#html-body#html-body#html-body#html-body .page-wrapper
    nav.fixed-bottom .mobile-bottom-link > li > button.toggle-nav-footer[aria-expanded="true"] .icon {
    color: var(--awa-primary, #b73337) !important;
}

/* =====================================================================
   AUDITORIA CARROSSÉIS 2026-07-03 — causa raiz do "card cortado"
   (home "Linhas em destaque" / Mais Vendidos / Novidades / relacionados)

   CAUSA RAIZ (confirmada ao vivo via CDP/CSSOM, medição de geometria real):
   As faixas de largura dos slides (.awa-carousel__slide, li.item,
   .swiper-slide dentro de .awa-carousel__track) usam flex-basis/flex
   PERCENTUAL puro por breakpoint (50% / 33.333% / 25% / 20% para
   2/3/4/5 cards visíveis), definidas em awa-shelf-carousel.min.css e
   replicadas com !important em pelo menos mais 2 seletores dentro do
   mesmo arquivo. Nenhuma dessas regras desconta o `gap` do flex container
   (12px, confirmado via getComputedStyle no track ao vivo) do cálculo
   percentual. Resultado: em 1366px+ (5 cards a 20% cada, gap 12px), a
   soma real de conteúdo + gaps ultrapassa a largura do viewport em
   4 × 12px = 48px, cortando o último card visível — o "5º card cortado"
   relatado. O mesmo padrão de estouro ocorre nos demais breakpoints
   (36px em 1024px/4 cards, 24px em 768px/3 cards, 12px em 480px/2 cards).

   Adicionalmente foi confirmada uma guerra de especificidade: mais de
   20 regras conflitantes de overflow/flex-basis para o mesmo elemento
   espalhadas por 10+ arquivos CSS (styles-l.min.css, themes.min.css,
   awa-align-grid-terminal-*.css, awa-commerce-impeccable-refine.css,
   awa-home-critical-stack-*.css etc.), algumas dentro de @layer
   (styles-l.min.css declara @layer awa-reset,awa-core,...,awa-fixes,...).
   Por spec de CSS Cascade Layers, declarações !important DENTRO de uma
   @layer sempre vencem !important FORA de qualquer layer — por isso um
   !important "solto" (sem layer) não bastava para corrigir isto de forma
   confiável (confirmado empiricamente ao vivo: !important solto perdeu
   para uma regra herdada; o mesmo !important dentro de `@layer awa-fixes`
   — a camada mais precoce já registrada no documento — venceu).

   FIX: recalcula flex-basis via calc() descontando o gap real do track
   em cada breakpoint, dentro de `@layer awa-fixes` (mesma camada já
   declarada mais acima neste arquivo via `@layer awa-fixes, awa-visual-priority;`,
   e comprovadamente a de maior prioridade para !important no documento).
   Cobre as 3 variantes de seletor legado (.awa-carousel__slide,
   .swiper-slide, li.item / ul.owl>li.item) para padronizar TODOS os
   carrosséis que compartilham a arquitetura .awa-shelf--carousel
   (home "Linhas em destaque", Mais Vendidos, Novidades, relacionados/
   upsell na PDP, abas de categoria). Não altera o carrossel mobile de
   "peek" (<480px, 1 card a 87%) — comportamento intencional documentado.
   ===================================================================== */
@layer awa-fixes {
    :is(
        .awa-shelf--carousel .awa-carousel__track,
        html body#html-body .page-wrapper .awa-shelf--carousel ul.owl.awa-carousel__track:not(.owl-carousel):not(.owl-loaded)
    ) {
        gap: 12px !important;
    }

    @media (min-width: 480px) {
        :is(
            .awa-shelf--carousel .awa-carousel__track > .awa-carousel__slide,
            .awa-shelf--carousel .awa-carousel__track > .swiper-slide,
            .awa-shelf--carousel .awa-carousel__track > li.item,
            html body#html-body .page-wrapper .awa-shelf--carousel ul.owl.awa-carousel__track:not(.owl-carousel):not(.owl-loaded) > li.item
        ) {
            flex: 0 0 calc((100% - 12px) / 2) !important;
            max-width: calc((100% - 12px) / 2) !important;
        }
    }

    @media (min-width: 768px) {
        :is(
            .awa-shelf--carousel .awa-carousel__track > .awa-carousel__slide,
            .awa-shelf--carousel .awa-carousel__track > .swiper-slide,
            .awa-shelf--carousel .awa-carousel__track > li.item,
            html body#html-body .page-wrapper .awa-shelf--carousel ul.owl.awa-carousel__track:not(.owl-carousel):not(.owl-loaded) > li.item
        ) {
            flex: 0 0 calc((100% - 24px) / 3) !important;
            max-width: calc((100% - 24px) / 3) !important;
        }
    }

    @media (min-width: 1024px) {
        :is(
            .awa-shelf--carousel .awa-carousel__track > .awa-carousel__slide,
            .awa-shelf--carousel .awa-carousel__track > .swiper-slide,
            .awa-shelf--carousel .awa-carousel__track > li.item,
            html body#html-body .page-wrapper .awa-shelf--carousel ul.owl.awa-carousel__track:not(.owl-carousel):not(.owl-loaded) > li.item
        ) {
            flex: 0 0 calc((100% - 36px) / 4) !important;
            max-width: calc((100% - 36px) / 4) !important;
        }
    }

    @media (min-width: 1366px) {
        :is(
            .awa-shelf--carousel .awa-carousel__track > .awa-carousel__slide,
            .awa-shelf--carousel .awa-carousel__track > .swiper-slide,
            .awa-shelf--carousel .awa-carousel__track > li.item,
            html body#html-body .page-wrapper .awa-shelf--carousel ul.owl.awa-carousel__track:not(.owl-carousel):not(.owl-loaded) > li.item
        ) {
            flex: 0 0 calc((100% - 48px) / 5) !important;
            max-width: calc((100% - 48px) / 5) !important;
        }
    }

    /* Títulos de card: nunca hifenizar/partir palavra no meio (pedido de
       padronização — nenhum outro arquivo declarava hyphens explicitamente
       nestes seletores, então isto não sobrescreve nada, apenas garante). */
    .awa-shelf .product-name,
    .awa-shelf .product-item-name,
    .awa-shelf .product-name a,
    .awa-shelf .product-item-link,
    .block.related.awa-shelf--carousel .product-item-name,
    .block.upsell.awa-shelf--carousel .product-item-name {
        hyphens: none !important;
        -webkit-hyphens: none !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}


/* =====================================================================
   FIX-RSP-2026-07-04: Touch targets em PLP/PDP (evidencia runtime H15/H16)
   - product-item-link renderizado em 35px em mobile/tablet
   - links "Faça login" no PDP related renderizados em ~22px
   ===================================================================== */
@media (pointer: coarse) and (max-width: 1024px) {
    html body#html-body .page-wrapper :is(
        .products-grid,
        .products.wrapper.grid,
        .awa-shelf,
        .awa-pdp-related,
        .rx-pdp-crosssell
    ) :is(
        .product-item-name .product-item-link,
        .product-name .product-item-link,
        a.product-item-link
    ) {
        display: block !important;
        min-height: 44px !important;
        padding-block: 4px !important;
        box-sizing: border-box !important;
        line-height: 1.35 !important;
    }

    html body#html-body.catalog-product-view .page-wrapper :is(
        .rx-pdp-login-link,
        .awa-related-price-notice__login-link
    ) {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 44px !important;
        padding-block: 10px !important;
        line-height: 1.2 !important;
        text-underline-offset: 2px !important;
    }
}

/* =====================================================================
   FIX-HOME-GAP-2026-07-05: carrossel abaixo da dobra inflando altura mobile
   Evidência runtime H93/H94:
   - .awa-carousel__viewport = 477px
   - .awa-owl-nav.awa-carousel__nav[data-awa-nav-anchor="viewport"] = 477px
     com position:relative, somando mais uma viewport no fluxo.
   Resultado: seções "Lançamentos"/"Linhas em destaque" cresciam até ~994px,
   criando uma lacuna branca antes do próximo bloco.
   Fix: dentro da home, a nav ancorada ao viewport é overlay e nunca item de
   fluxo. Mantemos botões clicáveis via pointer-events nos filhos. */
@layer awa-visual-priority {
    @media (max-width: 767px) {
        html body#html-body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
            .page-wrapper
            .content-top-home
            .awa-shelf--carousel
            .awa-carousel
            > .awa-owl-nav.awa-carousel__nav[data-awa-nav-anchor="viewport"] {
            position: absolute !important;
            inset: 0 !important;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            display: block !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            box-sizing: border-box !important;
            transform: none !important;
            pointer-events: none !important;
            z-index: var(--awa-carousel-nav-z, 4) !important;
        }

        html body#html-body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
            .page-wrapper
            .content-top-home
            .awa-shelf--carousel
            .awa-carousel
            > .awa-owl-nav.awa-carousel__nav[data-awa-nav-anchor="viewport"]
            :is(.awa-owl-nav__btn, .awa-carousel__button, .awa-carousel__toggle) {
            pointer-events: auto !important;
        }
    }
}

/* =====================================================================
   FIX-HOME-CTA-GHOST-SPACE-2026-07-05 (mobile):
   Evidência runtime H3 (home deep audit):
   - .awa-category-carousel__cta-link computado com visibility:hidden + opacity:0
   - mantendo box de 44px no fluxo e gerando espaço fantasma no header da seção.
   Regra inline crítica já tenta ocultar com display:none, mas era reaberta por
   regras posteriores de display:inline-flex. Travamos estado "fora do fluxo".
   ===================================================================== */
@layer awa-visual-priority {
    @media (max-width: 767px) {
        html body#html-body#html-body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
            .page-wrapper
            .content-top-home
            .top-home-content--category-carousel
            header.awa-category-carousel__header.awa-section-header
            a.awa-section-header__link.awa-shelf__view-all.awa-category-carousel__cta-link {
            display: none !important;
            width: 0 !important;
            min-width: 0 !important;
            max-width: 0 !important;
            height: 0 !important;
            min-height: 0 !important;
            max-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            overflow: hidden !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
    }
}

/* =====================================================================
   FIX-HOME-CAROUSEL-NAV-OFFSETS-2026-07-06:
   Evidência runtime e85cbc/pre-fix:
   - prev, next e pause computados com o mesmo rect/inset no primeiro card.
   - CSS legado reaplicava inset/left/right iguais após o contrato do carrossel.
   Travamos offsets por papel do botão, mantendo nav como overlay sem ocupar fluxo.
   ===================================================================== */
@layer awa-visual-priority {
    html body#html-body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
        .page-wrapper
        .content-top-home
        .awa-shelf--carousel
        .awa-carousel
        > .awa-owl-nav.awa-carousel__nav[data-awa-nav-anchor="viewport"]
        :is(.awa-owl-nav__btn, .awa-carousel__button) {
        position: absolute !important;
        margin: 0 !important;
        pointer-events: auto !important;
    }

    html body#html-body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
        .page-wrapper
        .content-top-home
        .awa-shelf--carousel
        .awa-carousel
        > .awa-owl-nav.awa-carousel__nav[data-awa-nav-anchor="viewport"]
        :is(.awa-owl-nav__btn--prev, .awa-carousel__button--prev) {
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        left: var(--awa-carousel-button-offset, clamp(6px, 1.2vw, 16px)) !important;
        transform: translateY(-50%) !important;
    }

    html body#html-body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
        .page-wrapper
        .content-top-home
        .awa-shelf--carousel
        .awa-carousel
        > .awa-owl-nav.awa-carousel__nav[data-awa-nav-anchor="viewport"]
        :is(.awa-owl-nav__btn--next, .awa-carousel__button--next) {
        top: 50% !important;
        right: var(--awa-carousel-button-offset, clamp(6px, 1.2vw, 16px)) !important;
        bottom: auto !important;
        left: auto !important;
        transform: translateY(-50%) !important;
    }

    html body#html-body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
        .page-wrapper
        .content-top-home
        .awa-shelf--carousel
        .awa-carousel
        > .awa-owl-nav.awa-carousel__nav[data-awa-nav-anchor="viewport"]
        .awa-carousel__toggle:not([hidden]) {
        top: var(--awa-carousel-button-offset, clamp(6px, 1.2vw, 16px)) !important;
        right: var(--awa-carousel-button-offset, clamp(6px, 1.2vw, 16px)) !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }
}

/* =====================================================================
   FIX-FOOTER-CATEGORIES-GRID-2026-07-06:
   Evidência runtime e85cbc/pre-fix:
   - painel visual com 991x92px mesmo quando hidden=true.
   - heading/toggle/panel competindo em grid de 2 colunas, comprimindo o título.
   Mantemos três zonas explícitas no desktop e fallback empilhado no mobile.
   ===================================================================== */
@layer awa-visual-priority {
    html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
        section.awa-footer-categories-expand {
        overflow: visible !important;
    }

    html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
        section.awa-footer-categories-expand
        .awa-footer-categories-expand__inner {
        display: grid !important;
        grid-template-columns: minmax(96px, max-content) minmax(190px, max-content) minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: clamp(14px, 2vw, 28px) !important;
        row-gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
        section.awa-footer-categories-expand
        .awa-footer-categories-expand__heading {
        min-width: 96px !important;
        margin: 0 !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
        section.awa-footer-categories-expand
        .awa-footer-categories-expand__toggle {
        justify-self: start !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
        section.awa-footer-categories-expand
        .awa-footer-categories-expand__panel {
        min-width: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    @layer awa-visual-priority {
        /* FIX-FOOTER-MOBILE-ACCORDION-COLLAPSE-2026-07-06:
           Evidência runtime e85cbc/H16-H20: em 390px os toggles estavam
           aria-expanded="false", mas os painéis .velaContent renderizavam
           visíveis (360px + 360px + 573px), inflando .page_footer para 3044px.
           Colapsa o estado inicial mobile sem afetar desktop; quando o JS abre
           um painel ele adiciona .active/aria-hidden=false e as regras abaixo
           liberam o conteúdo. */
        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            #footer.footer-container
            .velaFooterTitle
            button.awa-footer-section__toggle {
            -webkit-appearance: none !important;
            appearance: none !important;
            align-items: center !important;
            background: transparent !important;
            background-color: transparent !important;
            border: 0 !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.24) !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            color: #ffffff !important;
            cursor: pointer !important;
            display: flex !important;
            justify-content: space-between !important;
            min-height: 44px !important;
            width: 100% !important;
            padding: 10px 0 !important;
            text-align: left !important;
        }

        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            #footer.footer-container
            .velaFooterTitle
            button.awa-footer-section__toggle::after {
            color: currentColor !important;
            content: "+" !important;
            font-size: 20px !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            margin-left: auto !important;
        }

        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            #footer.footer-container
            .velaFooterTitle.active
            button.awa-footer-section__toggle::after,
        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            #footer.footer-container
            button.awa-footer-section__toggle[aria-expanded="true"]::after {
            content: "−" !important;
        }

        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            #footer.footer-container
            .velaContent:not(.active):not([aria-hidden="false"]) {
            display: none !important;
            height: 0 !important;
            max-height: 0 !important;
            min-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
        }

        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            #footer.footer-container
            .velaContent.active,
        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            #footer.footer-container
            .velaContent[aria-hidden="false"] {
            display: block !important;
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
            padding-block: 8px 12px !important;
        }

        /* FIX-FOOTER-CATEGORIES-MOBILE-BAND-2026-07-06:
           runtime mobile 390px mostrou .page_footer com 1321px de altura e a
           seção Categorias pintada como faixa clara isolada entre o accordion
           vermelho e o footer-bottom. O grid desktop acima é correto para
           desktop, mas no mobile a seção precisa continuar no tema escuro e
           recolhida sem reservar área extra. */
        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            section.awa-footer-categories-expand {
            background: transparent !important;
            background-color: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            margin: 0 !important;
            padding: 10px 16px !important;
            min-height: 0 !important;
        }

        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            section.awa-footer-categories-expand
            .awa-footer-categories-expand__inner {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            gap: 0 !important;
            width: 100% !important;
            min-height: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            background: transparent !important;
            background-color: transparent !important;
        }

        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            section.awa-footer-categories-expand
            .awa-footer-categories-expand__heading {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            margin: -1px !important;
            padding: 0 !important;
            overflow: hidden !important;
            clip: rect(0 0 0 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }

        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            section.awa-footer-categories-expand
            .awa-footer-categories-expand__toggle {
            width: 100% !important;
            min-height: 44px !important;
            justify-content: space-between !important;
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1px solid rgba(255, 255, 255, 0.28) !important;
            border-radius: var(--awa-radius-md, 8px) !important;
            box-shadow: none !important;
            margin: 0 !important;
            padding: 12px 14px !important;
        }

        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            section.awa-footer-categories-expand
            .awa-footer-categories-expand__panel[hidden] {
            display: none !important;
            height: 0 !important;
            min-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
        }

        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            section.awa-footer-categories-expand
            .awa-footer-categories-expand__panel:not([hidden]) {
            flex: 0 0 100% !important;
            margin-top: 10px !important;
            color: #ffffff !important;
            background: rgba(0, 0, 0, 0.08) !important;
            border-radius: var(--awa-radius-md, 8px) !important;
        }
    }
}

@media (min-width: 768px) {
    @layer awa-visual-priority {
        /* FIX-FOOTER-DESKTOP-FIRST-PAINT-2026-07-06:
           Evidência runtime e85cbc/H16-H20 em 1920px: no primeiro paint os
           três .velaFooterMenu renderizavam empilhados em 1248px de largura,
           com botões nativos cinza/preto, inflando .page_footer para 2448px
           até o JS/CSS tardio do footer hidratar. Este lock garante o layout
           desktop estável sem depender do boot assíncrono. */
        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            #footer.footer-container
            > .container
            > .row.rowFlexMargin {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            align-items: start !important;
            column-gap: clamp(24px, 3vw, 56px) !important;
            row-gap: 24px !important;
            max-width: var(--awa-home-terminal-shell, min(100%, 1280px)) !important;
            margin-inline: auto !important;
            width: 100% !important;
        }

        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            #footer.footer-container
            > .container
            > .row.rowFlexMargin
            > [class*="col-"] {
            float: none !important;
            width: auto !important;
            max-width: none !important;
            min-width: 0 !important;
            padding-inline: 0 !important;
        }

        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            #footer.footer-container
            .vela-content.velaFooterMenu {
            display: flex !important;
            flex-direction: column !important;
            min-width: 0 !important;
            width: 100% !important;
            height: auto !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            #footer.footer-container
            .velaFooterTitle {
            margin: 0 0 18px !important;
            padding: 0 !important;
            border: 0 !important;
            min-height: 0 !important;
        }

        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            #footer.footer-container
            .velaFooterTitle
            button.awa-footer-section__toggle {
            -webkit-appearance: none !important;
            appearance: none !important;
            background: transparent !important;
            background-color: transparent !important;
            border: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            color: #ffffff !important;
            cursor: default !important;
            display: block !important;
            font: inherit !important;
            font-weight: 700 !important;
            line-height: 1.2 !important;
            min-height: 0 !important;
            padding: 0 !important;
            pointer-events: none !important;
            text-align: left !important;
            width: 100% !important;
        }

        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            #footer.footer-container
            .velaFooterTitle
            button.awa-footer-section__toggle::after {
            content: none !important;
        }

        html body#html-body#html-body#html-body .page-wrapper :is(.page_footer, .page-footer)
            #footer.footer-container
            .velaContent {
            display: block !important;
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
            padding: 0 !important;
        }
    }
}

/* =====================================================================
   FIX-HOME-BELOW-FOLD-BLANK-2026-07-06:
   Evidência runtime e85cbc/H6-H10:
   - .awa-home-niche-shelves computado com contentVisibility:auto e
     containIntrinsicSize:auto 400px.
   - quando o scroll salta para o footer, o bloco fica acima do viewport sem
     pintura/hidratação de imagens, gerando uma faixa branca entre Lançamentos
     e o footer. Como esta é área comercial crítica, priorizamos estabilidade
     visual sobre o ganho marginal de content-visibility neste trecho.
   ===================================================================== */
html body#html-body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
    .page-wrapper
    .content-top-home
    :is(.awa-home-section--below-fold, .awa-grid-section--featured, .awa-home-niche-shelves) {
    content-visibility: visible !important;
    contain: none !important;
    contain-intrinsic-size: unset !important;
}

html body#html-body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
    .page-wrapper
    .content-top-home
    .awa-home-niche-shelves
    :is(.awa-home-niche-shelves__panels, .awa-home-niche-shelves__panel, .awa-shelf--carousel, .awa-carousel, .awa-carousel__viewport) {
    content-visibility: visible !important;
    contain-intrinsic-size: unset !important;
}

/* =====================================================================
   FIX-ACCOUNT-FIELD-CENTER-2026-07-06:
   Origem: tema pai ayo_default, _layouts_themes.less bloco "css Myacount"
   define ".account .page-main { .fieldset>.field { display:flex; align-items:
   center } }" — pensado para alinhar o checkbox "newsletter" com o label na
   mesma linha. Como o tema filho define ".field { display:flex; flex-direction:
   column }" (label acima do input), herdar align-items:center do tema pai
   centraliza HORIZONTALMENTE label e input de TODOS os campos de texto
   (nome, sobrenome, empresa, telefone, CPF/CNPJ, etc.) nas páginas de conta —
   bug confirmado em Informações de Conta, Novo Endereço e Criar Conta B2B.
   Fix: restaura align-items:stretch (valor inicial do flexbox) apenas para
   campos que NÃO são checkbox (:not(.choice)), preservando o alinhamento
   center original para os campos .field.choice (checkboxes de newsletter e
   "definir como padrão"), que é o uso pretendido pelo tema pai.
   Não é possível editar o tema pai diretamente (fora do escopo do tema filho).
   ===================================================================== */
body.account .page-main .fieldset > .field:not(.choice) {
    align-items: stretch !important;
}

/* =====================================================================
   FIX-WISHLIST-EMPTY-TOOLBAR-GAPS-2026-07-06:
   Magento_Wishlist::index.phtml renderiza dois .toolbar.wishlist-toolbar
   (paginação/ordenação) mesmo quando a lista está vazia. Sem itens, o
   toolbar não tem conteúdo mas mantém padding:12px 0 + margin-bottom:12px,
   criando duas faixas em branco vazias entre o título, a mensagem "Você não
   tem itens" e o botão Voltar — bug confirmado em /wishlist/ sem itens.
   Fix: oculta o toolbar apenas quando a coluna principal contém a mensagem
   de lista vazia (:has), sem afetar a paginação quando há produtos. */
.wishlist-index-index .col-main:has(.message.info.empty) .toolbar.wishlist-toolbar {
    display: none !important;
}

/* =====================================================================
   FIX-ACCOUNT-H1-HIDDEN-2026-07-06:
   Origem: tema pai ayo_default, _layouts_themes.less linha ~8958:
   ".account .page-main .page-title-wrapper .page-title { display:none }"
   — esconde incondicionalmente o H1 em TODAS as páginas de conta (Minha
   Conta, Meus Pedidos, Catálogo de Endereços, Novo/Editar Endereço,
   Informações de Conta, Lista de Desejos, Newsletter). Nenhuma dessas
   páginas tem heading visível alternativo — bug de acessibilidade
   (WCAG 2.4.6 Headings and Labels / 1.3.1 Info and Relationships, falha
   "Page must contain a level-one heading") e SEO confirmado nas 7 rotas
   auditadas. Fix: restaura o H1 padrão do Magento nas páginas de conta,
   alinhado ao restante do site. */
body.account .page-main .page-title-wrapper .page-title {
    display: block !important;
}