/* ===========================================
   AWA MOTOS — FIXES (Correções pontuais)
   Tema: AYO/Rokanthemes (Home5)

   ARQUIVO 4/4 da camada AWA consolidada.
   Carrega POR ÚLTIMO — após core, layout, components.

   CONTEÚDO: Apenas correções de bugs visuais que NÃO são cobertos
   pelos 3 arquivos anteriores. Sem estilos estruturais duplicados.

   REGRA: se a correção é estilística (hover, cor, espaçamento),
   pertence a core/layout/components. Se é um BUG VISUAL do tema
   ou do conteúdo CMS, pertence aqui.
=========================================== */
@layer awa-fixes {
/* UX POLISH — CAROUSEL/BADGES (FIX-21 UX, FIX-20 UX): REMOVIDO.
   Conflito com OWL Carousel JS. O tema Ayo original controla arrows/dots/badges.
   Restaurado para comportamento padrão do demo (ayo.nextsky.co/en_5/). */

/* ============================================================
   FIX-01 — BANNER TEXT DUPLICATION (P0)
   SVG banners have baked-in text + HTML overlay text = doubling.
   Hide pseudo-elements that create ghost text shadows.
   ============================================================ */

/* FIX-A11Y-REDUCED-MOTION: REMOVIDO — coberto pelo universal
   @media (prefers-reduced-motion: reduce) em awa-core.css L1009-1044.
   O seletor wildcard `body .page-wrapper *` já cobre todos os elementos. */

/* ============================================================
   FIX-PERF-TOUCH-HOVER (P2)
   Em dispositivos touch, remove hover transitions pesadas sem perda de UX.
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :is(
        .the_blog .post-item,
        .blog-post-item,
        .testimonials-slider .item,
        .testimonials-home .item,
        .tab_product .list-tab-product .item-product
    ) {
        transition: none !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :is(
        .the_blog .post-item:hover,
        .blog-post-item:hover,
        .tab_product .list-tab-product .item-product:hover,
        .testimonials-slider .item:hover,
        .testimonials-home .item:hover
    ) {
        transform: none !important;
        box-shadow: var(--awa-shadow) !important;
    }
}

body .page-wrapper .ayo-home5-hero-card__title::before,
body .page-wrapper .ayo-home5-hero-card__title::after,
body .page-wrapper .ayo-home5-hero-card__eyebrow::before,
body .page-wrapper .ayo-home5-hero-card__eyebrow::after {
    display: none;
    content: '';
}

/* Duplicate slides (headline+headline) */
body .page-wrapper .owl-item .item-slide h1 + h1,
body .page-wrapper .owl-item .item-slide h2 + h2,
body .page-wrapper .owl-item .item-slide h3 + h3,
body .page-wrapper .owl-item .item-slide .title + .title,
body .page-wrapper .banner-content h1 + h1,
body .page-wrapper .banner-content h2 + h2 {
    display: none;
}

/* Duplicate text layers inside banner items */
body .page-wrapper .homeslider-container .owl-item .item-slide > div:not(:first-child),
body .page-wrapper .banner-slider .owl-item > div > div:nth-child(n+2):not(.btn, a),
body .page-wrapper .slide-content p + p:not(.btn-wrapper) {
    display: none;
}

/* "Banner 1 Placeholder" dummy card */
body .page-wrapper .ayo-home5-hero-card.placeholder-mode {
    display: none;
}

/* ============================================================
   FIX-02 — TESTIMONIAL EMPTY AVATARS (P1)
   <img src="" alt=""> produces broken-image icons.
   Replace with gradient circle + FontAwesome user icon.
   ============================================================ */
body .page-wrapper .info-testimonial .author-test-link img[src=""] {
    display: none;
}

body .page-wrapper .info-testimonial .author-test-link a {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--awa-red-dark) 0%, var(--awa-red) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--awa-text-on-primary); /* BP-09: era #fff hardcoded */
    font-weight: var(--awa-weight-semibold);
    font-size: var(--awa-text-xl-plus); /* BP-38: era 22px */
    line-height: var(--awa-leading-none);
    position: relative;
    overflow: hidden;
}

body .page-wrapper .info-testimonial .author-test-link a::before {
    content: "\f007";
    font-family: FontAwesome, sans-serif;
    font-size: var(--awa-text-xl-plus); /* BP-38: era 22px */
    color: rgb(255 255 255 / 90%);
}

/* ============================================================
   FIX-03 — PLACEHOLDER HOVER IMAGES (P2)
   Products without alternate image show placeholder.jpg on hover.
   ============================================================ */
body .page-wrapper .product-item .second-thumb img[src*="placeholder/placeholder"] {
    visibility: hidden;
    opacity: 0;
}

/* Sem :has(): JS marca o card com .awa-second-thumb-placeholder */
body .page-wrapper .product-item.awa-second-thumb-placeholder:hover .first-thumb {
    opacity: 1;
}

/* FIX-04 — REMOVIDO: consolidado em awa-layout.css (.newsletter-footer > label) */

/* ============================================================
   FIX-05 — EMPTY HEADINGS / CONTAINERS (P2-P3)
   Hide empty wrappers that produce blank space.
   ============================================================ */
body .page-wrapper .box-testimo > h2:empty,
body .page-wrapper .testimonials-home > h2:empty {
    display: none;
}

body .page-wrapper .header-nav .box_language > .top-header:empty {
    display: none;
}

body .page-wrapper .boxServiceImage:empty {
    display: none;
}

/* ============================================================
   FIX-06 — COUNTDOWN EMPTY STATE (P3)
   .super-deal-countdown empty until TimeCircles JS inits.
   ============================================================ */
body .page-wrapper .super-deal-countdown:empty {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
}

body .page-wrapper .super-deal-countdown:empty::after {
    content: "\f017";
    font-family: FontAwesome, sans-serif;
    font-size: var(--awa-text-3xl);
    color: var(--awa-gray-500); /* R11-06: token */
}

/* ============================================================
   FIX-07 — EMPTY CATEGORY TAB FALLBACK (P2)
   Some tabs have empty OWL carousels.
   ============================================================ */
body .page-wrapper .cat_home.owl-carousel:empty,
body .page-wrapper .categorytab-container .tab-content:empty {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body .page-wrapper .cat_home.owl-carousel:empty::after {
    content: "Produtos em breve";
    color: var(--awa-gray-500);
    font-style: italic;
    font-size: var(--awa-text-base);
}

/* ============================================================
   FIX-08 — OWL CAROUSEL PRE-INIT STACKING (P1)
   Before OWL JS initializes, all slides stack vertically.
   Show only first, hide rest until JS kicks in.
   ============================================================ */
body .page-wrapper .wrapper_slider .owl:not(.owl-carousel) {
    overflow: hidden;
    position: relative;
}

body .page-wrapper .wrapper_slider .owl:not(.owl-carousel) .banner_item ~ .banner_item {
    display: none;
}

body .page-wrapper .owl-container:not(.owl-carousel) > *:not(:first-child),
body .page-wrapper .hot-deal-slide:not(.owl-carousel) > *:not(:first-child) {
    display: none;
}

/* ============================================================
   FIX-09 — NESTED BANNER-SLIDER DOUBLE PADDING (P3)
   .banner-slider inside .banner-slider doubles spacing.
   ============================================================ */
body .page-wrapper .ayo-home5-wrapper > .banner-slider {
    padding: 0;
    margin: 0;
}

/* Layout base do wrapper Home5 foi consolidado em awa-consistency-home5.css (AF-07). */

/* FIX-10 — VERTICAL MENU HOMEPAGE DISPLAY: consolidated into FIX-53 (section-item-title hiding) + awa-layout.css (category-dropdown width:100%) */

/* ============================================================
   FIX-11 — MARQUEE / NOTIFICATION BAR (P3)
   Deprecated <marquee> fallback with CSS animation.
   ============================================================ */
body.cms-index-index .page-wrapper .block_notification,
body.cms-home .page-wrapper .block_notification,
body.cms-homepage_ayo_home5 .page-wrapper .block_notification {
    overflow: hidden;
    white-space: nowrap;
    background: var(--awa-dark); /* R11-06: token */
    color: var(--awa-text-on-dark); /* BP-09: era #fff hardcoded */
    padding: var(--awa-space-2) 0; /* BP-18: era 8px 0 */
    font-size: var(--awa-text-sm);
}

body.cms-index-index .page-wrapper .block_notification marquee,
body.cms-home .page-wrapper .block_notification marquee,
body.cms-homepage_ayo_home5 .page-wrapper .block_notification marquee {
    display: inline-block;
    animation: marquee-scroll 20s linear infinite;
}

/* R9-13: Respeitar preferência de reduced-motion para marquee */

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================================
   FIX-12 — CLS PREVENTION: ASPECT RATIO RESERVATIONS (P1)
   Regras de min-height do banner foram movidas para baseline global
   em ayo_default/web/css/source/_extend.less (fase 1 de unificação).
   ============================================================ */

body .page-wrapper .ayo-home5-cat-item img,
body .page-wrapper .banner_mid_1 img {
    width: 100%;
    height: auto;
}

body .page-wrapper .the_blog .post-item img,
body .page-wrapper .blog-post-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9; /* R16-04: CLS prevention — reserva espaço antes do load */
}

/* .logo img — REMOVIDO: consolidado em awa-layout.css com mesma especificidade */

/* ============================================================
   FIX-13 — NEWSLETTER POPUP UX (P2)
   Better visual hierarchy for the popup form.
   Popup lives outside .page-wrapper — uses body prefix.
   ============================================================ */
body .newsletterpopup {
    z-index: var(--awa-z-popup); /* BP-16: era 10100 — R10-17: acima do vertical-menu submenu */
}

body #newsletter_pop_up {
    background-color: var(--awa-bg-surface); /* BP-12 */
}

body .ayo-newsletter-popup {
    text-align: center;
    padding: 30px 20px;
}

/* R11-05: prefixo newsletterpopup para especificidade */
body .newsletterpopup .newsletter-popup-badge {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--awa-red-dark) 0%, var(--awa-red) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

body .newsletterpopup .newsletter-popup-badge i {
    font-size: var(--awa-text-3xl);
    color: var(--awa-text-on-primary); /* BP-09: era #fff hardcoded */
}

body .newsletterpopup .newsletter-popup-title {
    font-size: var(--awa-text-2xl);
    font-weight: var(--awa-weight-bold);
    color: var(--awa-dark);
    margin: 0 0 4px;
    letter-spacing: var(--awa-tracking-wide);
}

body .newsletterpopup .newsletter-popup-subtitle {
    font-size: var(--awa-text-md);
    color: var(--awa-gray-500);
    margin: 0 0 12px;
    text-transform: uppercase;
    font-weight: var(--awa-weight-medium);
}

body .newsletterpopup .newsletter-popup-description {
    font-size: var(--awa-text-base);
    color: var(--awa-gray-500);
    margin: 0 0 20px;
    line-height: var(--awa-leading-relaxed);
}

body .newsletterpopup .field.newsletter .control,
body .ayo-newsletter-popup .field.newsletter .control {
    display: flex;
    gap: var(--awa-space-2); /* BP-17: era 8px */
}

body .newsletterpopup .field.newsletter input[type="email"],
body .ayo-newsletter-popup .field.newsletter input[type="email"] {
    flex: 1;
    padding: var(--awa-space-3) var(--awa-space-4); /* BP-18: era 12px 16px */
    border: 1px solid var(--awa-gray-200);
    border-radius: var(--awa-radius-sm);
    font-size: var(--awa-text-base);
    transition: border-color var(--awa-transition-fast); /* R12-06 */
}

body .newsletterpopup .field.newsletter input[type="email"]:focus,
body .ayo-newsletter-popup .field.newsletter input[type="email"]:focus {
    border-color: var(--awa-red);
    box-shadow: 0 0 0 3px var(--awa-red-light); /* R13: token */
    outline: none; /* VB-06: popup fora de .page-wrapper — remover outline padrão */
}

body .newsletterpopup .action.subscribe,
body .ayo-newsletter-popup .action.subscribe {
    background: var(--awa-red);
    color: var(--awa-text-on-primary); /* BP-09: era #fff hardcoded */
    border: none;
    border-radius: var(--awa-radius-sm);
    padding: var(--awa-space-3) var(--awa-space-6); /* BP-18: era 12px 24px */
    font-weight: var(--awa-weight-semibold);
    cursor: pointer;
    transition: background-color var(--awa-transition-fast); /* R12-06 */
    white-space: nowrap;
}

body .newsletterpopup .action.subscribe:hover,
body .ayo-newsletter-popup .action.subscribe:hover {
    background: var(--awa-red-dark);
}

/* R16-03: focus-visible para botão fora de .page-wrapper */
body .newsletterpopup .action.subscribe:focus-visible,
body .ayo-newsletter-popup .action.subscribe:focus-visible {
    outline: 2px solid var(--awa-red);
    outline-offset: 2px;
    background: var(--awa-red-dark);
}

body .newsletterpopup .newsletter-popup-privacy {
    margin-top: var(--awa-space-4); /* BP-19: era 16px */
    font-size: var(--awa-text-2xs); /* BP-30: era 11px */
    color: var(--awa-gray-500); /* BUG-04: era gray-400 (#ced4da) — contraste 1.46:1 sobre branco. gray-500 (#6c757d) = ~4.6:1 ✓ */
}

@media (width <= 767px) {
    body .newsletterpopup .content-popup {
        width: 95vw;
        max-width: 95vw;
        margin: 0 auto;
    }

    body .newsletterpopup .field.newsletter .control {
        flex-direction: column;
    }

    body #newsletter_pop_up.newsletterpopup {
        padding: var(--awa-space-2-5); /* BP-50: era 10px */
    }

    body #newsletter_pop_up .nl-popup-card {
        max-width: 94vw !important;
    }

    body #newsletter_pop_up .nl-popup-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    body #newsletter_pop_up .nl-popup-hero {
        min-height: 140px;
    }

    body #newsletter_pop_up .nl-popup-hero-content {
        padding: 18px 14px;
    }

    body #newsletter_pop_up .nl-popup-hero-logo {
        margin-bottom: var(--awa-space-2); /* BP-19: era 8px */
        max-width: 70px;
    }

    body #newsletter_pop_up .nl-popup-hero-discount {
        font-size: 46px;
    }

    body #newsletter_pop_up .nl-popup-hero-off {
        font-size: 26px;
        letter-spacing: 2px;
    }

    body #newsletter_pop_up .nl-popup-hero-caption {
        margin-top: 3px;
        font-size: var(--awa-text-3xs); /* BP-30: era 10px */
        letter-spacing: var(--awa-tracking-wider);
    }

    body #newsletter_pop_up .nl-popup-content {
        padding: 14px;
    }

    body #newsletter_pop_up .nl-popup-title {
        font-size: var(--awa-text-3xl);
        white-space: normal;
    }

    body #newsletter_pop_up .nl-popup-subtitle {
        font-size: var(--awa-text-xl);
    }

    body #newsletter_pop_up .nl-popup-footer {
        flex-wrap: wrap;
    }

    body .page-wrapper .banner-slider .item-banner img,
    body .page-wrapper .slide-banner .item img,
    body .page-wrapper .banner-text {
        border-radius: 0;
    }

    body .page-wrapper .banner-text {
        font-size: var(--awa-text-base);
        padding: 10px;
    }

    /* OWL gutters: ver FIX-23 (bloco centralizado) */

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-wrapper > :is(.ayo-home5-section, .section) {
        margin: var(--awa-space-5) 0;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .benefits-bar {
        align-items: flex-start;
        gap: var(--awa-space-2); /* BP-17: era 8px */
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .benefits-bar__item {
        width: 100%;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .security-seals {
        padding: var(--awa-space-3); /* BP-18: era 12px */
        gap: 10px 12px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .security-seals img {
        height: 30px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .security-seals img:first-child {
        height: 20px;
        max-width: 180px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .trust-badge-item {
        flex: 1 1 calc(50% - 9px);
        min-width: 120px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 .rowFlex.rowFlexMargin.flexJustifyCenter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 .boxService {
        justify-content: center;
        text-align: center;
        flex-direction: column;
        gap: 10px;
        padding: 14px 10px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .list-tab-product.common-tab-system-fixed .item-product-parent {
        padding: 0 6px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .box-bottom-home2.box-testimo .item-testimo {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .box-bottom-home2.box-testimo .info-testimonial {
        text-align: center;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-bottom .footer-bottom-inner .row {
        flex-direction: column;
        text-align: center;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-payment-methods {
        justify-content: center;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-payment-methods .payment-methods-wrapper,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-payment-methods .security-seals-wrapper {
        justify-content: center;
    }
}

/* Newsletter popup ≤480px — R12-01: prefixo newsletterpopup */
@media (width <= 480px) {
    body .ayo-newsletter-popup {
        padding: var(--awa-space-5) var(--awa-space-3-75); /* BP-50: era 20px 15px */
    }

    body .newsletterpopup .newsletter-popup-title {
        font-size: var(--awa-text-xl);
    }

    body .newsletterpopup .newsletter-popup-subtitle {
        font-size: var(--awa-text-base);
    }

    body .newsletterpopup .newsletter-popup-description {
        font-size: var(--awa-text-sm);
    }

    body .newsletterpopup .newsletter-popup-badge {
        width: 52px;
        height: 52px;
    }

    body .newsletterpopup .newsletter-popup-badge i {
        font-size: var(--awa-text-xl-plus); /* BP-38: era 22px */
    }

    body .newsletterpopup .action.subscribe,
    body .ayo-newsletter-popup .action.subscribe {
        padding: var(--awa-space-2-5) 18px; /* BP-50: era 10px 18px */
        font-size: var(--awa-text-sm);
    }

    body .page-wrapper .testimonial-item {
        padding: 15px;
    }

    body .page-wrapper .testimonial-item .author-info {
        flex-direction: column;
        gap: var(--awa-space-2); /* BP-17: era 8px */
    }

    body .page-wrapper .testimonial-item .author-avatar {
        width: 40px;
        height: 40px;
    }

    body .page-wrapper .countdown_block {
        padding: 12px 15px;
    }

    body .page-wrapper .title_countdown {
        font-size: var(--awa-text-sm);
    }

    body .page-wrapper .time_circles > div {
        min-width: 40px;
        min-height: 40px;
        padding: var(--awa-space-1); /* BP-18: era 4px */
    }

    body .page-wrapper .time_circles > div .number {
        font-size: var(--awa-text-base);
    }

    body .page-wrapper .time_circles > div .text {
        font-size: 9px;
    }

    body .page-wrapper .blog-post-item,
    body .page-wrapper .the_blog .post-item {
        border-radius: var(--awa-radius-sm);
    }

    body .page-wrapper .blog-post-item .post-content,
    body .page-wrapper .the_blog .post-item .post-content {
        padding: var(--awa-space-3); /* BP-18: era 12px */
    }

    body .page-wrapper .blog-post-item .post-title a {
        font-size: var(--awa-text-base);
    }

    /* OWL gutters: ver FIX-23 (bloco centralizado) */

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .security-seals .microcopy {
        font-size: var(--awa-text-xs);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 .rowFlex.rowFlexMargin.flexJustifyCenter > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    body .page-wrapper .newsletter-popup,
    body .page-wrapper .modals-wrapper .modal-popup.newsletter-popup-modal .modal-inner-wrap {
        max-width: calc(100vw - var(--awa-space-6));
        padding: var(--awa-space-5);
    }

    body .page-wrapper .newsletter-popup h2,
    body .page-wrapper .newsletter-popup .popup-title {
        font-size: clamp(1.1rem, 4.5vw, 1.4rem);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 .rowFlex.rowFlexMargin.flexJustifyCenter {
        grid-template-columns: 1fr;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .list-tab-product.common-tab-system-fixed .productTabContent:not(.owl-carousel) {
        grid-template-columns: 1fr;
    }
}

/* Newsletter popup ≤375px — R12-01: prefixo newsletterpopup */
@media (width <= 375px) {
    body .ayo-newsletter-popup {
        padding: var(--awa-space-3-75) var(--awa-space-3); /* BP-50: era 15px 12px */
    }

    body .newsletterpopup .newsletter-popup-title {
        font-size: var(--awa-text-lg); /* BP-30: era 18px */
    }

    body .newsletterpopup .newsletter-popup-subtitle {
        font-size: var(--awa-text-sm);
    }

    body .newsletterpopup .newsletter-popup-description {
        font-size: var(--awa-text-xs);
        margin-bottom: var(--awa-space-3-75); /* BP-50: era 15px */
    }

    body .newsletterpopup .field.newsletter input[type="email"],
    body .ayo-newsletter-popup .field.newsletter input[type="email"] {
        padding: var(--awa-space-2-5) var(--awa-space-3); /* BP-50: era 10px 12px */
        font-size: var(--awa-text-sm);
    }

    body .page-wrapper .banner-text h2,
    body .page-wrapper .banner-text .title {
        font-size: var(--awa-text-lg); /* BP-30: era 18px */
    }

    body .page-wrapper .banner-text p,
    body .page-wrapper .banner-text .subtitle {
        font-size: var(--awa-text-xs);
    }

    /* OWL gutters: ver FIX-23 (bloco centralizado) */

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > a {
        min-height: 44px;
        padding-inline: var(--awa-space-3); /* BP-21: era 12px */
        border-radius: var(--awa-radius-sm); /* BP-49: era 6px */
        font-size: var(--awa-text-xs);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) {
        --awa-main-nav-link-min-h: 44px;
        --awa-main-nav-link-pad-x: 12px;
        --awa-main-nav-link-radius: 6px;
    }
}

/* ============================================================
   FIX-13B — NEWSLETTER POPUP HOMEPAGE (home5 visual match)
   Estilos do template ativo Rokanthemes_Themeoption/newsletterpopup.phtml
   ============================================================ */
body #newsletter_pop_up.newsletterpopup {
    --awa-text-on-dark: #fff;
    --awa-text-on-danger: #fff;
    --awa-text-on-light: var(--awa-dark);
    --awa-text-muted-on-light: var(--awa-gray-500);

    background: rgb(0 0 0 / 60%);
    position: fixed;
    inset: 0;
    padding: var(--awa-space-4); /* BP-18: era 16px */
}

body #newsletter_pop_up.newsletterpopup.nl-popup-fallback-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

body.nl-popup-body-open {
    overflow: hidden;
}

body #newsletter_pop_up .nl-popup-card {
    width: 100%;
    margin: 0 auto;
    max-width: 680px !important;
    border-radius: var(--awa-radius-lg); /* F1-04: era 16px hardcoded */
    overflow: hidden;
    background: var(--awa-bg-surface); /* BP-12 */
    box-shadow: var(--awa-shadow-hover);
    position: relative;
}

body #newsletter_pop_up .nl-popup-layout {
    display: grid;
    grid-template-columns: minmax(220px, 44%) 1fr;
    min-height: 350px;
}

body #newsletter_pop_up .newletter_popup_close {
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 34px;
    border: 0;
    background: var(--awa-red);
    color: var(--awa-text-on-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
}

body #newsletter_pop_up .newletter_popup_close:hover {
    background: var(--awa-red-dark);
}

body #newsletter_pop_up .newletter_popup_close:focus-visible {
    outline: 2px solid var(--awa-red);
    outline-offset: 2px;
}

body #newsletter_pop_up .nl-popup-hero {
    background: linear-gradient(180deg, var(--awa-red) 0%, var(--awa-red-dark) 100%);
    background-size: cover;
    background-position: center;
    color: var(--awa-text-on-danger);
    display: flex;
}

body #newsletter_pop_up .nl-popup-hero-overlay {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgb(0 0 0 / 6%) 0%, rgb(0 0 0 / 24%) 100%);
}

body #newsletter_pop_up .nl-popup-hero-content {
    text-align: center;
    padding: 20px 18px;
}

body #newsletter_pop_up .nl-popup-hero-logo {
    margin: 0 auto var(--awa-space-3-5); /* BP-50: era 14px */
    max-width: 90px;
    height: auto;
}

body #newsletter_pop_up .nl-popup-hero-discount {
    font-size: 70px;
    line-height: 0.9;
    font-weight: var(--awa-weight-extrabold);
    letter-spacing: -1px;
}

body #newsletter_pop_up .nl-popup-hero-off {
    margin-top: var(--awa-space-1); /* BP-19: era 4px */
    font-size: var(--awa-text-5xl); /* BP-40: era 40px */
    line-height: var(--awa-leading-none);
    font-weight: var(--awa-weight-extrabold);
    letter-spacing: 4px;
}

body #newsletter_pop_up .nl-popup-hero-caption {
    margin-top: var(--awa-space-2); /* BP-19: era 8px */
    font-size: var(--awa-text-2xs); /* BP-30: era 11px */
    line-height: var(--awa-leading-snug);
    letter-spacing: 1.4px;
    font-weight: var(--awa-weight-bold);
}

body #newsletter_pop_up .nl-popup-content {
    padding: var(--awa-space-3-5) var(--awa-space-6) var(--awa-space-3); /* BP-50: era 14px 24px 12px */
    background: var(--awa-bg-surface); /* BP-12 */
}

body #newsletter_pop_up .nl-popup-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--awa-radius-full); /* BP-03: era 999px hardcoded */
    padding: var(--awa-space-1) var(--awa-space-2-5); /* BP-50: era 4px 10px */
    font-size: var(--awa-text-2xs); /* BP-30: era 11px */
    font-weight: var(--awa-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--awa-gray-700);
    background: var(--awa-gray-100);
    margin-bottom: var(--awa-space-2); /* BP-19: era 8px */
}

body #newsletter_pop_up .nl-popup-badge svg,
body #newsletter_pop_up .nl-popup-urgency svg,
body #newsletter_pop_up .nl-popup-trust svg {
    flex-shrink: 0;
}

body #newsletter_pop_up .nl-popup-title {
    margin: 0;
    font-size: 34px;
    line-height: var(--awa-leading-none);
    font-weight: var(--awa-weight-extrabold);
    color: var(--awa-text-on-light);
    letter-spacing: -0.7px;
    white-space: nowrap;
}

body #newsletter_pop_up .nl-popup-title-highlight {
    color: var(--awa-text-on-light);
    margin-left: 2px;
}

body #newsletter_pop_up .nl-popup-subtitle {
    margin: 0 0 var(--awa-space-2); /* BP-19: era 0 0 8px */
    font-size: 25px;
    line-height: var(--awa-leading-tight);
    font-weight: var(--awa-weight-bold);
    color: var(--awa-text-on-light);
}

body #newsletter_pop_up .nl-popup-desc {
    margin: 0 0 var(--awa-space-2); /* BP-19: era 0 0 8px */
    color: var(--awa-text-muted-on-light);
    font-size: var(--awa-text-sm);
    line-height: var(--awa-leading-normal);
}

body #newsletter_pop_up .nl-popup-urgency {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--awa-space-2); /* BP-19: era 8px */
    border: 1px solid var(--awa-gray-200);
    border-radius: var(--awa-radius-sm); /* F1-04: era 8px hardcoded */
    background: var(--awa-gray-100);
    padding: 7px var(--awa-space-2-5); /* BP-50: era 10px */
    color: var(--awa-gray-700);
    font-size: var(--awa-text-xs);
    font-weight: var(--awa-weight-semibold);
}

body #newsletter_pop_up .nl-popup-form {
    margin-bottom: var(--awa-space-2); /* BP-19: era 8px */
}

body #newsletter_pop_up .nl-popup-form .field.newsletter {
    margin-bottom: 7px;
}

body #newsletter_pop_up .nl-popup-form .field.newsletter .control {
    display: block;
}

body #newsletter_pop_up .nl-popup-form input[type="email"] {
    width: 100%;
    border: 2px solid var(--awa-gray-200);
    border-radius: var(--awa-radius-md); /* BP-49: era 11px */
    min-height: 42px;
    padding: var(--awa-space-2-5) var(--awa-space-3-5); /* BP-50: era 10px 14px */
    font-size: var(--awa-text-base);
    color: var(--awa-text-on-light);
}

body #newsletter_pop_up .nl-popup-form input[type="email"]::placeholder {
    color: var(--awa-gray-400);
}

body #newsletter_pop_up .nl-popup-form .actions {
    margin: 0;
}

body #newsletter_pop_up .nl-popup-form .action.subscribe {
    width: 100%;
    border-radius: var(--awa-radius-md); /* BP-49: era 10px */
    min-height: 43px;
    padding: var(--awa-space-2-5) var(--awa-space-3-5); /* BP-50: era 10px 14px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    font-size: var(--awa-text-base);
    background: var(--awa-red);
    box-shadow: var(--awa-shadow);
    color: var(--awa-text-on-danger);
}

body #newsletter_pop_up .nl-popup-form .action.subscribe .nl-btn-arrow {
    color: var(--awa-text-on-danger);
}

body #newsletter_pop_up .nl-popup-form .action.subscribe:hover,
body #newsletter_pop_up .nl-popup-form .action.subscribe:focus-visible {
    background: var(--awa-red-dark);
}

body #newsletter_pop_up .nl-btn-arrow {
    transform: translateY(1px);
}

body #newsletter_pop_up .nl-popup-trust {
    display: flex;
    align-items: center;
    gap: var(--awa-space-2-5); /* BP-50: era 10px */
    flex-wrap: wrap;
    margin: 9px 0 7px;
}

body #newsletter_pop_up .nl-popup-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--awa-gray-500);
    font-size: var(--awa-text-3xs); /* BP-30: era 10px */
    line-height: var(--awa-leading-none);
}

body #newsletter_pop_up .nl-popup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--awa-space-2-5); /* BP-50: era 10px */
    margin-top: 2px;
}

body #newsletter_pop_up .subscribe-bottom {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body #newsletter_pop_up .subscribe-bottom input[type="checkbox"] {
    width: var(--awa-space-3-5); /* BP-50: era 14px */
    height: var(--awa-space-3-5); /* BP-50: era 14px */
    margin: 0;
}

body #newsletter_pop_up .subscribe-bottom label {
    margin: 0;
    font-size: var(--awa-text-2xs); /* BP-30: era 11px */
    color: var(--awa-gray-500);
    cursor: pointer;
}

body #newsletter_pop_up .newletter_popup_close_text {
    font-size: var(--awa-text-2xs); /* BP-30: era 11px */
    color: var(--awa-red);
    text-decoration: none;
    font-weight: var(--awa-weight-semibold);
    white-space: nowrap;
}

body #newsletter_pop_up .newletter_popup_close_text:hover,
body #newsletter_pop_up .newletter_popup_close_text:focus-visible {
    color: var(--awa-red-dark);
    text-decoration: underline;
}

body #newsletter_pop_up .nl-popup-success {
    min-height: 180px;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: var(--awa-space-2); /* BP-17: era 8px */
}

body #newsletter_pop_up .nl-popup-success-icon {
    color: var(--awa-red);
}

body #newsletter_pop_up .nl-popup-success-title {
    margin: 0;
    font-size: var(--awa-text-xl-plus); /* BP-38: era 22px */
    color: var(--awa-text-on-light);
}

body #newsletter_pop_up .nl-popup-success-text {
    margin: 0;
    color: var(--awa-text-muted-on-light);
    font-size: var(--awa-text-base);
}

body #newsletter_pop_up.popup-closing .nl-popup-card {
    transform: translateY(8px);
    opacity: 0;
    transition: transform var(--awa-transition), opacity var(--awa-transition); /* BP-08: era 0.25s ease hardcoded */
}

@media (width <= 991px) {
    body #newsletter_pop_up .nl-popup-layout {
        grid-template-columns: 36% 1fr;
        min-height: 320px;
    }

    body #newsletter_pop_up .nl-popup-content {
        padding: var(--awa-space-4) 18px var(--awa-space-3-5); /* BP-50: era 16px 18px 14px */
    }

    body #newsletter_pop_up .nl-popup-title {
        font-size: 30px;
    }

    body #newsletter_pop_up .nl-popup-subtitle {
        font-size: var(--awa-text-xl);
    }

    body #newsletter_pop_up .nl-popup-hero-discount {
        font-size: 58px;
    }

    body #newsletter_pop_up .nl-popup-hero-off {
        font-size: 31px;
    }

    /* OWL gutters: ver FIX-23 (bloco centralizado) */

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 .rowFlex.rowFlexMargin.flexJustifyCenter > [class*="col-"] {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .categorytab-container.awa-cat-tabs-categorytab2 {
        overflow: visible;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .categorytab-container.awa-cat-tabs-categorytab2 .tabs.tabs-categorytab2 {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        touch-action: pan-x pinch-zoom; /* BP-27: melhor scroll horizontal touch */
        scrollbar-width: thin;
        gap: var(--awa-space-2); /* BP-17: era 8px */
        padding-bottom: var(--awa-space-2);
        white-space: nowrap;
        mask-image: linear-gradient(to right, transparent 0, black 8px, black calc(100% - 24px), transparent 100%); /* BP-51: #000 → keyword */
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .categorytab-container.awa-cat-tabs-categorytab2 .tabs.tabs-categorytab2::-webkit-scrollbar {
        display: none;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .categorytab-container.awa-cat-tabs-categorytab2 .tabs.tabs-categorytab2 > li {
        scroll-snap-align: start;
        flex: 0 0 auto;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .categorytab-container.awa-cat-tabs-categorytab2 .tabs.tabs-categorytab2 > li > a {
        white-space: nowrap;
        font-size: var(--awa-text-sm);
        min-height: 38px;
        padding: 0 var(--awa-space-3);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .top-home-content__trust-offers-grid > .velaServicesInner.velaServicesInner--home5,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .top-home-content__trust-offers-grid > .top-home-content__trust-offers-banner,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .top-home-content__trust-offers-grid > .top-home-content__trust-offers-deals {
        grid-column: auto;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li {
        flex: 0 0 auto;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li > a {
        min-height: 46px;
        padding: 0 14px;
        font-size: var(--awa-text-base);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .verticalmenu.side-verticalmenu > .title-category-dropdown {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 46px;
        margin: 0;
        padding: 0 14px;
        border-radius: var(--awa-radius-sm);
        background: var(--awa-red);
        color: var(--awa-text-on-primary); /* BP-09: era #fff hardcoded */
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .verticalmenu.side-verticalmenu > ul.togge-menu.list-category-dropdown {
        display: none;
        margin-top: var(--awa-space-2); /* BP-19: era 8px */
        border: 1px solid var(--awa-gray-200);
        border-radius: var(--awa-radius-sm);
        background: var(--awa-bg-surface); /* BP-12 */
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .verticalmenu.side-verticalmenu > .title-category-dropdown.active + ul.togge-menu.list-category-dropdown {
        display: block;
    }

    @media (width >= 992px) {
        :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .verticalmenu.side-verticalmenu {
            position: relative;
        }

        :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .verticalmenu.side-verticalmenu::after {
            content: "";
            position: absolute;
            inset-inline: 0;
            top: 100%;
            height: 10px;
        }

        :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .verticalmenu.side-verticalmenu:hover > ul.togge-menu.list-category-dropdown,
        :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .verticalmenu.side-verticalmenu:focus-within > ul.togge-menu.list-category-dropdown {
            display: block;
        }
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 .rowFlex.rowFlexMargin.flexJustifyCenter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .list-tab-product.common-tab-system-fixed .productTabContent:not(.owl-carousel) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .categorytab-container.awa-cat-tabs-categorytab2 .block_cat > .row {
        grid-template-columns: 1fr;
        gap: var(--awa-space-4); /* BP-17: era 16px */
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu .ui-menu-item.parent {
        position: relative;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu .ui-menu-item.parent > a {
        padding-right: 44px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu .open-children-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu .open-children-toggle::before {
        content: "+";
        font-size: var(--awa-text-lg); /* BP-30: era 18px */
        line-height: var(--awa-leading-none);
        color: var(--awa-gray-700);
        font-weight: var(--awa-weight-bold);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu .open-children-toggle:focus-visible {
        outline: 2px solid var(--awa-red);
        outline-offset: -2px;
        border-radius: var(--awa-radius-2xs);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu .ui-menu-item.parent._active > .open-children-toggle::before {
        content: "−";
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu .ui-menu-item.parent > .submenu,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu .ui-menu-item.parent > ul.level0 {
        display: none;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu .ui-menu-item.parent._active > .submenu,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu .ui-menu-item.parent._active > ul.level0 {
        display: block;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers {
        margin-top: var(--awa-space-3);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .top-home-content__trust-offers-grid {
        gap: var(--awa-space-3);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) > ul {
        scroll-padding-inline: var(--awa-space-2); /* BP-21: era 8px */
        padding-inline: var(--awa-space-1); /* BP-21: era 4px */
        gap: var(--awa-space-1); /* BP-17: era 4px */
        scrollbar-width: thin; /* BP-50: standard scrollbar */
        scrollbar-color: rgb(0 0 0 / 18%) transparent;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) > ul > li > a {
        min-height: var(--awa-btn-height); /* BP-04: era 48px hardcoded */
        padding-inline: var(--awa-space-4); /* BP-21: era 16px */
        border-radius: var(--awa-radius-sm); /* F1-04: era 8px hardcoded */
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) > ul > li > a:active {
        transform: translateY(0.5px);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav {
        margin-bottom: var(--awa-space-2); /* BP-19: era 8px */
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-wrapper > .top-home-content.top-home-content--trust-and-offers {
        margin-top: 6px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) > ul::-webkit-scrollbar {
        height: 6px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) > ul::-webkit-scrollbar-thumb {
        background: rgb(0 0 0 / 18%);
        border-radius: var(--awa-radius-full); /* BP-03: era 999px hardcoded */
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .submenu .subchildmenu > li > a {
        min-height: 40px;
        padding-inline: 14px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control.header-nav {
        position: relative;
    }

    /* Stabilize mobile/tablet header row: avoid absolute nav-toggle overlap on search/logo. */
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control.header-nav > .container > .row {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        min-height: 54px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control.header-nav .menu_left_home1 {
        display: none;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control.header-nav .menu_primary {
        display: none !important;
    }

    body .page-wrapper .header-control.header-nav .nav-toggle,
    body .page-wrapper .header-control.header-nav .action.nav-toggle {
        display: flex !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 auto;
        margin: 6px 0 6px 15px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--awa-red) !important;
        border-radius: var(--awa-radius-sm);
        background: var(--awa-bg-surface) !important; /* BP-12 */
        visibility: visible !important;
        opacity: 1 !important;
        z-index: var(--awa-z-flyout) !important; /* BP-16: era 10030 */
    }

    /* Avoid floating close icon when drawer is closed (hybrid tablet state). */
    body:not(.nav-open) .page-wrapper .awa-nav-close {
        display: none !important;
    }

    body.nav-open .page-wrapper .awa-nav-close,
    .nav-open body .page-wrapper .awa-nav-close {
        display: flex !important;
    }

    /* Reserve space for the hamburger icon so search text does not overlap it. */
    body .page-wrapper .header .top-search .block-search input#search,
    body .page-wrapper .header .top-search .block-search input.input-text {
        padding-left: var(--awa-space-4) !important;
    }

    /* Keep minicart inside the mobile search row (avoid legacy absolute offsets from awa-layout.css). */
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: var(--awa-space-2);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .mini-cart-wrapper {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
        min-width: max-content;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search .block-search {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        margin-top: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search .block-search .block-content,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search .block-search form#search_mini_form,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search .block-search form.minisearch {
        width: 100%;
    }

    body .page-wrapper .header .top-search .minicart-wrapper {
        display: block !important;
        float: none !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin-top: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search .mini-carts,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search .mini-cart-wrapper {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }

    body .page-wrapper .header-control.header-nav .nav-toggle::before,
    body .page-wrapper .header-control.header-nav .action.nav-toggle::before {
        content: "\2630";
        font-family: inherit;
        font-size: var(--awa-text-xl);
        line-height: var(--awa-leading-none);
        color: var(--awa-red);
    }

    /* Home5-wide (non-CMS pages too): same mobile/tablet header normalization. */
    body .page-wrapper .header-control.header-nav > .container > .row {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        min-height: 54px;
    }

    body .page-wrapper .header-control.header-nav .menu_left_home1 {
        display: none;
    }

    body .page-wrapper .header-control.header-nav .menu_primary {
        display: none !important;
    }

    body .page-wrapper .header-control.header-nav .nav-toggle,
    body .page-wrapper .header-control.header-nav .action.nav-toggle {
        display: flex !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 auto;
        margin: 6px 0 6px 15px;
        align-items: center;
        justify-content: center;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body .page-wrapper .header .top-search {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: var(--awa-space-2);
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
        min-width: max-content;
    }

    body .page-wrapper .header .top-search .block-search {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        margin-top: 0 !important;
    }

    body .page-wrapper .header .top-search .block-search .block-content,
    body .page-wrapper .header .top-search .block-search form#search_mini_form,
    body .page-wrapper .header .top-search .block-search form.minisearch {
        width: 100%;
    }

    body .page-wrapper .header .top-search .block-search input#search,
    body .page-wrapper .header .top-search .block-search input.input-text {
        padding-left: var(--awa-space-4) !important;
    }

    body .page-wrapper .header .top-search .minicart-wrapper {
        display: block !important;
        float: none !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin-top: 0 !important;
    }

    body .page-wrapper .header .top-search .mini-carts,
    body .page-wrapper .header .top-search .mini-cart-wrapper {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }
}

@media (width >= 992px) {
    /* Home5-wide desktop header normalization (not only CMS pages). */
    body .page-wrapper .header-control.header-nav > .container > .row {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }

    body .page-wrapper .header-control .menu_left_home1,
    body .page-wrapper .header-control .menu_primary,
    body .page-wrapper .header-control .box_language {
        float: none;
        min-width: 0;
    }

    body .page-wrapper .header-wrapper-sticky.enabled-header-sticky .container-header-sticky,
    body .page-wrapper .header-wrapper-sticky.enable-sticky .container-header-sticky {
        display: flex;
        align-items: center;
        gap: var(--awa-space-3);
        min-width: 0;
    }

    body .page-wrapper .header-wrapper-sticky .logo-sticky {
        flex: 0 0 auto;
    }

    body .page-wrapper .header-wrapper-sticky .top-menu-sticky {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Linha principal (logo + busca): reduz rigidez do grid e prioriza espaço da busca. */
    body .page-wrapper .header .header_main .wp-header,
    body .page-wrapper .header .header-main .wp-header {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        min-width: 0;
    }

    body .page-wrapper .header .header_main .wp-header > [class*="col-"]:first-child,
    body .page-wrapper .header .header-main .wp-header > [class*="col-"]:first-child {
        float: none;
        width: auto;
        max-width: none;
        min-width: 0;
        flex: 0 0 clamp(150px, 12vw, 168px);
        padding-right: 8px;
    }

    body .page-wrapper .header .header_main .wp-header > .top-search,
    body .page-wrapper .header .header-main .wp-header > .top-search {
        float: none;
        width: auto;
        max-width: none;
        min-width: 0;
        flex: 1 1 auto;
        padding-left: 8px;
    }

    /* Busca do cabeçalho: ocupar o espaço disponível (B2B-first). */
    body .page-wrapper .header .top-search {
        display: flex;
        align-items: center;
        gap: var(--awa-space-3);
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper,
    body .page-wrapper .header .top-search > .hoteline_header {
        flex: 0 0 auto;
    }

    body .page-wrapper .header .top-search > .block-search {
        order: 1;
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 0;
    }

    body .page-wrapper .header .top-search > .block-search .block-content,
    body .page-wrapper .header .top-search > .block-search form#search_mini_form,
    body .page-wrapper .header .top-search > .block-search form.minisearch {
        width: 100%;
    }

    body .page-wrapper .header .top-search > .block-search .action.search,
    body .page-wrapper .header .top-search > .block-search button[type="submit"] {
        padding-left: var(--awa-space-4);
        padding-right: var(--awa-space-4);
        min-width: 44px;
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper {
        order: 2;
    }

    body .page-wrapper .header .top-search > .hoteline_header {
        order: 3;
        flex: 0 1 auto;
        min-width: 0;
        max-width: min(22vw, 260px);
    }

    body .page-wrapper .header .top-search > .hoteline_header .whatsapp-hotline {
        display: inline-flex;
        align-items: center;
        gap: var(--awa-space-2);
        min-width: 0;
        max-width: 100%;
        color: inherit;
        text-decoration: none;
        white-space: nowrap;
    }

    body .page-wrapper .header .top-search > .hoteline_header .whatsapp-hotline > i {
        color: #25d366;
        flex: 0 0 auto;
        font-size: 18px;
        line-height: 1;
    }

    body .page-wrapper .header .top-search > .hoteline_header .hotline-wrap {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.1;
    }

    body .page-wrapper .header .top-search > .hoteline_header .hotline-label {
        color: var(--awa-gray-500);
        font-size: var(--awa-text-2xs);
        letter-spacing: var(--awa-tracking-tight);
    }

    body .page-wrapper .header .top-search > .hoteline_header .hotline-number {
        color: var(--awa-dark);
        font-weight: var(--awa-weight-semibold);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* box_language vazio (quando sem conteúdo) não deve ocupar coluna no desktop. */
    body .page-wrapper .header-nav .row.awa-box-language-empty > .box_language,
    body .page-wrapper .header-nav .box_language.awa-is-empty {
        display: none;
    }

    /* CSS-first (sem depender do JS): detecta box_language sem filhos úteis dentro de .top-header. */
    @supports selector(.header-nav .row:has(> .box_language)) {
        body .page-wrapper .header-nav .row:has(> .box_language:has(> .top-header):not(:has(> .top-header > *))) > .box_language {
            display: none;
        }
    }
}

@media (width >= 1200px) and (width <= 1599px) {
    /* Compacta hotline para priorizar largura de busca em desktops menores. */
    body .page-wrapper .header .top-search {
        gap: var(--awa-space-2);
    }

    body .page-wrapper .header .top-search > .hoteline_header .hotline-label {
        display: none;
    }

    body .page-wrapper .header .top-search > .hoteline_header .hotline-number {
        font-size: var(--awa-text-sm);
    }
}

@media (width >= 1200px) and (width <= 1439px) {
    /* Prioriza busca: hotline vira CTA compacta (ícone) e botão de busca fica mais estreito. */
    body .page-wrapper .header .top-search > .hoteline_header {
        max-width: 44px;
        flex: 0 0 44px;
    }

    body .page-wrapper .header .top-search > .hoteline_header .hotline-wrap {
        display: none;
    }

    body .page-wrapper .header .top-search > .hoteline_header .whatsapp-hotline {
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--awa-radius-sm);
        background: rgb(37 211 102 / 10%);
    }

    body .page-wrapper .header .top-search > .block-search .action.search,
    body .page-wrapper .header .top-search > .block-search button[type="submit"] {
        width: 44px;
        min-width: 44px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ============================================================
   FIX-29 — TOP NAV DENSITY & MEDIUM DESKTOP TUNING (P2)
   Melhora leitura do menu horizontal e evita aperto no topo.
   ============================================================ */
@media (width >= 1200px) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control.header-nav > .container > .row {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control .menu_left_home1,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control .menu_primary,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control .box_language {
        float: none;
        min-width: 0;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control .box_language {
        flex: 0 0 auto;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control .menu_primary {
        flex: 1 1 auto;
    }

    body .page-wrapper .header-nav .row.awa-box-language-empty > .menu_primary {
        width: 83.3333%;
        max-width: 83.3333%;
        flex: 0 0 83.3333%;
        flex-basis: 83.3333%;
    }

    @supports selector(.header-nav .row:has(> .box_language)) {
        body .page-wrapper .header-nav .row:has(> .box_language:has(> .top-header):not(:has(> .top-header > *))) > .menu_primary {
            width: 83.3333%;
            max-width: 83.3333%;
            flex: 0 0 83.3333%;
            flex-basis: 83.3333%;
        }
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-wrapper-sticky.enabled-header-sticky .container-header-sticky,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-wrapper-sticky.enable-sticky .container-header-sticky {
        display: flex;
        align-items: center;
        gap: var(--awa-space-3);
        min-width: 0;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-wrapper-sticky .logo-sticky {
        flex: 0 0 auto;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-wrapper-sticky .top-menu-sticky {
        flex: 1 1 auto;
        min-width: 0;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul {
        gap: 2px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li > a {
        min-height: var(--awa-btn-height); /* BP-04: era 48px hardcoded */
        padding: 0 16px;
        font-size: 17px;
        letter-spacing: var(--awa-tracking-tight);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) > ul > li > .submenu,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) > ul > li > .groupmenu {
        max-width: min(92vw, var(--awa-container));
        overflow-x: hidden; /* fallback para navegadores sem clip */
        overflow-x: clip;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) > ul > li:nth-last-child(-n+2) > .submenu,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) > ul > li:nth-last-child(-n+2) > .groupmenu {
        left: auto;
        right: 0;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) .subchildmenu > li > a {
        line-height: var(--awa-leading-cozy);
        padding-top: 7px;
        padding-bottom: 7px;
    }
    }

@media (width >= 992px) and (width <= 1199px) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control.header-nav > .container > .row {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li {
        flex: 0 0 auto;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li > a {
        min-height: 46px;
        padding: 0 12px;
        font-size: var(--awa-text-base);
        letter-spacing: var(--awa-tracking-tight);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control .menu_left_home1 {
        width: auto;
        max-width: 100%;
        min-width: 0;
        float: none;
        flex: 0 0 25%;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control .menu_primary {
        width: auto;
        max-width: none;
        min-width: 0;
        float: none;
        flex: 1 1 auto;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control .box_language {
        float: none;
        min-width: 0;
        flex: 0 0 auto;
    }

    body .page-wrapper .header-nav .row.awa-box-language-empty > .menu_primary {
        width: 75%;
        max-width: 75%;
        flex: 0 0 75%;
        flex-basis: 75%;
    }

    @supports selector(.header-nav .row:has(> .box_language)) {
        body .page-wrapper .header-nav .row:has(> .box_language:has(> .top-header):not(:has(> .top-header > *))) > .menu_primary {
            width: 75%;
            max-width: 75%;
            flex: 0 0 75%;
            flex-basis: 75%;
        }
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: var(--awa-space-2);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .mini-cart-wrapper {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
        min-width: max-content;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search .block-search {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        margin-top: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search .block-search .block-content,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search .block-search form#search_mini_form,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search .block-search form.minisearch {
        width: 100%;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search .minicart-wrapper {
        float: none !important;
        position: relative;
        top: auto;
        right: auto;
        margin-top: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search .mini-carts,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search .mini-cart-wrapper {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .verticalmenu.side-verticalmenu > .title-category-dropdown {
        font-size: inherit;
        cursor: default;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 .rowFlex.rowFlexMargin.flexJustifyCenter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 .boxService {
        min-height: 104px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .hot-deal:not(.top-home-content__trust-offers-deals) .hot-deal-tab-slider.hot-deal-tab-slider-customcss .countdown_block {
        padding: 12px 10px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) > ul {
        scroll-snap-type: x proximity;
        scrollbar-gutter: stable both-edges;
        touch-action: pan-x pinch-zoom; /* BP-27: melhor scroll horizontal touch */
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) > ul > li {
        scroll-snap-align: start;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) > ul > li > a {
        line-height: 1.15;
        font-weight: var(--awa-weight-bold);
        text-rendering: optimizelegibility;
    }
}

@media (width <= 420px) {
    body #newsletter_pop_up .nl-popup-trust {
        gap: 6px;
    }

    body #newsletter_pop_up .nl-popup-trust-item {
        font-size: var(--awa-text-3xs); /* BP-30: era 10px */
    }

    body #newsletter_pop_up .nl-popup-title {
        font-size: var(--awa-text-2xl);
    }

    body #newsletter_pop_up .nl-popup-subtitle {
        font-size: var(--awa-text-lg); /* BP-30: era 18px */
    }

    body #newsletter_pop_up .nl-popup-desc {
        font-size: var(--awa-text-sm);
        line-height: var(--awa-leading-cozy);
    }

    body #newsletter_pop_up .nl-popup-form .action.subscribe {
        font-size: var(--awa-text-sm);
        min-height: 42px;
    }
}

/* ============================================================
   FIX-14 — TESTIMONIALS SECTION POLISH (P3)
   ============================================================ */
body .page-wrapper .testimonials-slider .item,
body .page-wrapper .testimonials-home .item {
    padding: var(--awa-space-5); /* BP-18: era 20px */
    border-radius: var(--awa-radius);
    background: var(--awa-bg-surface); /* BP-12 */
    box-shadow: var(--awa-shadow); /* R12-13 */
    border: 1px solid var(--awa-gray-200);
    transition: box-shadow var(--awa-transition); /* R12-06 */
    display: flex; /* LB-05: equal-height para testimonial cards */
    flex-direction: column;
    height: 100%;
    contain: layout paint;
}

/* LB-05: conteúdo do testimonial empurra rodapé ao fundo */
body .page-wrapper .testimonials-home .item .content-test {
    flex-grow: 1;
    font-style: italic;
    line-height: var(--awa-leading-loose);
    color: var(--awa-gray-700);
    position: relative;
    padding-left: var(--awa-space-5); /* BP-20: era 20px */
}

body .page-wrapper .testimonials-slider .item:hover,
body .page-wrapper .testimonials-home .item:hover {
    box-shadow: var(--awa-shadow-hover); /* R12-13 */
}

body .page-wrapper .testimonials-home .item .content-test::before {
    content: "\201C";
    font-size: 48px;
    color: var(--awa-red);
    position: absolute;
    left: -5px;
    top: -15px;
    font-family: Georgia, serif;
    opacity: 0.3;
}

/* ============================================================
   FIX-15 — BLOG SECTION IMPROVEMENTS (P3)
   ============================================================ */
body .page-wrapper .the_blog .post-item,
body .page-wrapper .blog-post-item {
    border-radius: var(--awa-radius);
    overflow: hidden;
    box-shadow: var(--awa-shadow); /* R12-13 */
    transition: box-shadow var(--awa-transition), transform var(--awa-transition); /* R12-06 */
    background: var(--awa-bg-surface); /* BP-12 */
    display: flex; /* LB-05: equal-height para blog cards fora de OWL */
    flex-direction: column;
    height: 100%;
    contain: layout paint;
}

/* LB-05: conteúdo interno flex-grow para empurrar rodapé ao fundo */
body .page-wrapper .the_blog .post-item .post-content,
body .page-wrapper .blog-post-item .post-content {
    flex-grow: 1;
}

body .page-wrapper .the_blog .post-item:hover,
body .page-wrapper .blog-post-item:hover {
    box-shadow: var(--awa-shadow-hover); /* R12-13 */
    transform: translateY(-2px);
}

body .page-wrapper .the_blog .post-item .post-title a,
body .page-wrapper .blog-post-item .post-title a {
    font-weight: var(--awa-weight-semibold);
    line-height: var(--awa-leading-normal);
    transition: color var(--awa-transition-fast); /* R12-06 */
}

body .page-wrapper .the_blog .post-item .post-title a:hover,
body .page-wrapper .blog-post-item .post-title a:hover {
    color: var(--awa-red);
}

/* ============================================================
   FIX-16 — HOT DEAL / COUNTDOWN SECTION (P3)
   ============================================================ */
body .page-wrapper .hot-deal-tab-slider {
    border-radius: var(--awa-radius);
    overflow: hidden;
    background: var(--awa-bg-surface); /* BP-12 */
    box-shadow: var(--awa-shadow); /* R12-13 */
}

body .page-wrapper .countdown_block {
    position: relative;
    top: 0;
    background: linear-gradient(135deg, var(--awa-dark) 0%, var(--footer-bg-secondary) 100%);
    color: var(--awa-text-on-dark); /* BP-09: era #fff hardcoded */
    padding: 15px 20px;
    text-align: center;
    border-radius: var(--awa-radius-sm) var(--awa-radius-sm) 0 0;
}

body .page-wrapper .title_countdown {
    font-weight: var(--awa-weight-semibold);
    font-size: var(--awa-text-base-plus); /* BP-39: era 15px */
    margin-bottom: var(--awa-space-2); /* BP-19: era 8px */
}

/* FIX-17 — REMOVIDO */

/* ============================================================
   FIX-18 — ICON FONT FALLBACK (P2)
   Ensure icon elements don't show empty squares.
   ============================================================ */
body .page-wrapper .product-extra-link a::before,
body .page-wrapper .actions-secondary a::before,
body .page-wrapper .towishlist::before,
body .page-wrapper .tocompare::before {
    font-family: icomoon, FontAwesome, simple-line-icons, sans-serif;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body .page-wrapper .product-extra-link a:empty::before,
body .page-wrapper .actions-secondary a:empty::before {
    content: '';
}

/* ============================================================
   FIX-19 — RESPONSIVO: TESTIMONIALS MOBILE (P3)
   ============================================================ */

/* ============================================================
   FIX-20 — RESPONSIVO: COUNTDOWN MOBILE (P3)
   ============================================================ */

/* ============================================================
   FIX-21 — RESPONSIVO: BLOG POSTS MOBILE (P3)
   ============================================================ */

@media (width <= 320px) {
    body .page-wrapper .blog-post-item .post-content,
    body .page-wrapper .the_blog .post-item .post-content {
        padding: 10px;
    }

    /* OWL gutters: ver FIX-23 (bloco centralizado) */
}

/* ============================================================
   FIX-22 — RESPONSIVO: BANNER/HERO SLIDER MOBILE (P3)
   ============================================================ */

/* ============================================================
   FIX-23 — OWL CAROUSEL: ALINHAMENTO + GUTTERS RESPONSIVOS (P1)
   Mantém largura calculada pelo OWL JS e padroniza espaçamento em
   todas as resoluções (v1 + v2).
   ============================================================ */
body .page-wrapper .owl-carousel {
    --awa-owl-item-gutter: 16px;
}

/* Compatível com OWL v2 (.owl-stage*) e v1 (.owl-wrapper*)
   Escopo: homepage Home5 para evitar efeito colateral em módulos de outras páginas. */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel .owl-stage,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel .owl-wrapper {
    align-items: stretch;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel .owl-stage-outer,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel .owl-wrapper-outer {
    margin-left: calc(var(--awa-owl-item-gutter) / -2);
    margin-right: calc(var(--awa-owl-item-gutter) / -2);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel .owl-item {
    clear: none !important;
    padding-left: calc(var(--awa-owl-item-gutter) / 2);
    padding-right: calc(var(--awa-owl-item-gutter) / 2);

    /* R26: removidos float/flex/min-width/box-sizing — já definidos em
       awa-components.css ~L700 e awa-grid-unified.css §4.
       Só padding (gutter) e clear são exclusivos deste bloco. */
}

/* Evita espaçamento duplo quando OWL injeta margin inline */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel .owl-item[style*="margin-right"],
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel .owl-item[style*="margin-right:"] {
    margin-right: 0 !important;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel .owl-item > * {
    width: 100%;
    min-width: 0;
    height: 100%;
}

/* Garante que wrappers intermediários propaguem altura até o card */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel .owl-item .item,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel .owl-item .item-inner,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel .owl-item .product_row {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Hero/Banner full-bleed */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-hero-layout__main .owl-carousel,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .banner-slider .owl-carousel,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .homeslider-container .owl-carousel {
    --awa-owl-item-gutter: 0px;
}

/* Logos, parceiros, testimonials e blog: gutter ampliado em desktop */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :is(.brand-slider, .brand-logo, .partner-slider, .manufacturer-slider, .testimonials-slider, .testimonials-home, .the_blog) .owl-carousel {
    --awa-owl-item-gutter: 20px;
}

@media (width <= 1199px) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel {
        --awa-owl-item-gutter: 14px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :is(.brand-slider, .brand-logo, .partner-slider, .manufacturer-slider, .testimonials-slider, .testimonials-home, .the_blog) .owl-carousel {
        --awa-owl-item-gutter: 16px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 .rowFlex.rowFlexMargin.flexJustifyCenter > [class*="col-"] {
        flex: 0 0 calc(33.333% - 12px);
        max-width: calc(33.333% - 12px);
    }
}

/* FIX-23b — Gutters responsivos (breakpoints menores).
   Escala progressiva: 16→12→10→8→6→4 px */
@media (width <= 991px) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel {
        --awa-owl-item-gutter: 12px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :is(.brand-slider, .brand-logo, .partner-slider, .manufacturer-slider, .testimonials-slider, .testimonials-home, .the_blog) .owl-carousel {
        --awa-owl-item-gutter: 14px;
    }
}

@media (width <= 767px) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel {
        --awa-owl-item-gutter: 10px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :is(.brand-slider, .brand-logo, .partner-slider, .manufacturer-slider, .testimonials-slider, .testimonials-home, .the_blog) .owl-carousel {
        --awa-owl-item-gutter: 12px;
    }
}

@media (width <= 480px) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel {
        --awa-owl-item-gutter: 8px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :is(.brand-slider, .brand-logo, .partner-slider, .manufacturer-slider, .testimonials-slider, .testimonials-home, .the_blog) .owl-carousel {
        --awa-owl-item-gutter: 10px;
    }
}

@media (width <= 375px) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel {
        --awa-owl-item-gutter: 6px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :is(.brand-slider, .brand-logo, .partner-slider, .manufacturer-slider, .testimonials-slider, .testimonials-home, .the_blog) .owl-carousel {
        --awa-owl-item-gutter: 8px;
    }
}

@media (width <= 320px) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .owl-carousel {
        --awa-owl-item-gutter: 4px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :is(.brand-slider, .brand-logo, .partner-slider, .manufacturer-slider, .testimonials-slider, .testimonials-home, .the_blog) .owl-carousel {
        --awa-owl-item-gutter: 6px;
    }
}

/* ============================================================
    FIX-24 — HOMEPAGE CMS LAYOUT (P1)
    FAQ + selos + seções de grade (Coleções/Lançamentos).
    Escopado apenas à homepage para não afetar o Ayo base.
    R20: seletores consolidados com :is() (38 blocos).
          Wrapper simplificado — width/max-width/padding/box-sizing
          delegados ao AF-07 (awa-consistency-home5.css).
    ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-wrapper > .ayo-home5-section.container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* FIX-53 — HERO CTA STRIP: ocultar conforme solicitação do cliente */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-hero-cta-strip {
    display: none !important;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .benefits-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .benefits-bar__item {
    display: inline-flex;
    align-items: center;
    gap: var(--awa-space-2); /* BP-17: era 8px */
    color: var(--awa-gray-700);
    font-size: var(--awa-text-base-plus); /* BP-39: era 15px */
    line-height: var(--awa-leading-comfortable);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .benefits-bar__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .security-seals {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 14px 16px;
    border: 1px solid var(--awa-gray-200);
    border-radius: var(--awa-control-radius);
    background: var(--awa-bg-surface); /* BP-12 */
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .security-seals img {
    display: block;
    width: auto;
    height: 34px;
    max-width: 100%;
    object-fit: contain;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .security-seals img:first-child {
    height: 22px;
    max-width: 220px;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .security-seals .microcopy {
    width: 100%;
    margin-top: 2px;
    font-size: var(--awa-text-sm);
    line-height: var(--awa-leading-relaxed);
    color: var(--awa-gray-700);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .security-seals .microcopy a {
    color: var(--awa-red-dark);
    text-decoration: underline;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .trust-badges-homepage {
    padding: 18px 16px;
    border-radius: var(--awa-control-radius);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .trust-badges-grid {
    gap: 14px 18px;
}

/* Quando o bloco de selos principal já existe, evita duplicidade visual (sem :has()) */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5).awa-has-security-seals .page-wrapper .ayo-home5-section--trust-badges {
    display: none;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-heading {
    margin: 0 0 var(--awa-space-4);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-label {
    display: inline-block;
    color: var(--awa-red-dark);
    font-size: var(--awa-text-xs);
    font-weight: var(--awa-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-heading h2 {
    margin: 6px 0 0;
    font-size: clamp(1.6rem, 1.15rem + 1.1vw, 2.1rem);
    line-height: var(--awa-leading-compact);
    color: var(--awa-dark);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-divider {
    display: block;
    width: 64px;
    height: 2px;
    margin-top: var(--awa-space-3); /* BP-19: era 12px */
    background: var(--awa-red);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-product-grid {
    margin-top: var(--awa-space-4);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-product-grid:empty {
    display: none;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-product-grid .note-msg {
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed var(--awa-gray-300);
    border-radius: var(--awa-control-radius);
    background: var(--awa-gray-100);
    color: var(--awa-gray-700);
}

/* Sem :has(): JS aplica .awa-is-empty na seção quando não há itens */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-section.awa-is-empty {
    display: none;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .aw-home-faq {
    background: var(--awa-bg-surface); /* BP-12 */
    border: 1px solid var(--awa-gray-200);
    border-radius: var(--awa-control-radius);
    padding: clamp(16px, 2vw, 24px);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .aw-home-faq__title {
    margin: 0;
    font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem);
    line-height: var(--awa-leading-compact);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .aw-home-faq__subtitle {
    margin: var(--awa-space-2) 0 0; /* BP-19: era 8px 0 0 */
    color: var(--awa-gray-600);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .aw-home-faq__items {
    display: grid;
    gap: 10px;
    margin-top: var(--awa-space-4); /* BP-19: era 16px */
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .aw-home-faq__item {
    border: 1px solid var(--awa-gray-200);
    border-radius: var(--awa-control-radius);
    background: var(--awa-gray-100);
    overflow: hidden;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .aw-home-faq__item > summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    font-weight: var(--awa-weight-semibold);
    color: var(--awa-dark);
    padding: 12px 38px 12px 14px;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .aw-home-faq__item > summary::-webkit-details-marker {
    display: none;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .aw-home-faq__item > summary::after {
    content: "+";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--awa-red);
    font-weight: var(--awa-weight-bold);
    font-size: var(--awa-text-lg); /* BP-30: era 18px */
    line-height: var(--awa-leading-none);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .aw-home-faq__item[open] > summary::after {
    content: "−";
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .aw-home-faq__answer {
    padding: 0 14px 14px;
    color: var(--awa-gray-700);
    line-height: var(--awa-leading-loose);
}

/* Padding/widht da Home5 agora são governados por --awa-home-inline-padding (awa-consistency-home5.css). */

/* B2B: Wishlist e Compare — restaurados para fidelidade ao demo Ayo Home5.
   Se necessário ocultar para grupo B2B, use:
   body.customer-group-b2b .action.towishlist { display: none !important; } */

/* ============================================================
   FIX-25 — HOME5 UX/CSS STABILIZATION (P1)
   Targeted to homepage classes only.
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav {
    margin-top: 0;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--awa-gray-200);
    border-bottom: 1px solid var(--awa-gray-200);
    background: var(--awa-bg-surface); /* BP-12 */
    list-style: none;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li {
    position: relative;
    float: none;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 18px;
    color: var(--awa-dark);
    font-size: 19px;
    font-weight: var(--awa-weight-bold);
    letter-spacing: var(--awa-tracking-normal);
    text-transform: uppercase;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li.active > a,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li.current > a,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li:hover > a,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li:focus-within > a {
    background: var(--awa-red);
    color: var(--awa-text-on-primary); /* BP-09: era #fff hardcoded */
}

/* Home5 layout real: benefits block root é .velaServicesInner (sem wrapper .velaServices). */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .top-home-content__trust-offers-grid > .velaServicesInner.velaServicesInner--home5 {
    width: 100%;
    margin: 0;
    min-width: 0;
}

@media (width >= 992px) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .top-home-content__trust-offers-grid > .velaServicesInner.velaServicesInner--home5 {
        grid-column: 1 / -1;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .top-home-content__trust-offers-grid > .top-home-content__trust-offers-banner {
        grid-column: 1 / 2;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .top-home-content__trust-offers-grid > .top-home-content__trust-offers-deals {
        grid-column: 2 / 3;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .verticalmenu.side-verticalmenu > ul.togge-menu.list-category-dropdown {
        border: 1px solid var(--awa-gray-200) !important; /* R28 — Bug #2: vence themes5.css !important hardcoded #e6e6e6 */
        border-top: 0 !important; /* R28 — Bug #2 */
        border-radius: 0 0 var(--awa-radius-sm) var(--awa-radius-sm);
        background: var(--awa-bg-surface); /* BP-12 */
        box-shadow: var(--awa-shadow-dropdown);
    }

    /* title-category-dropdown desktop styling consolidated into FIX-55 */

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .verticalmenu.side-verticalmenu .ui-menu-item.level0 > a {
        display: flex;
        align-items: center;
        min-height: 46px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--awa-gray-200);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .verticalmenu.side-verticalmenu .expand-category-link > a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--awa-touch-target); /* BP-04: era 44px hardcoded — WCAG 2.5.8 */
        padding: 10px 14px;
        background: var(--awa-gray-100);
        color: var(--awa-red-dark);
        font-weight: var(--awa-weight-semibold);
        text-decoration: none;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .top-home-content__trust-offers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--awa-space-5);
    }

    /* FIX-28 descontinuado: desktop usa modelo overlay (FIX-53) para evitar desalinhamento/cascata conflitante. */

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li > .open-children-toggle {
        display: none !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > .submenu,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > .groupmenu {
        scrollbar-width: thin;
        scrollbar-color: rgb(0 0 0 / 25%) transparent;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > .submenu::-webkit-scrollbar,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > .groupmenu::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > .submenu::-webkit-scrollbar-thumb,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > .groupmenu::-webkit-scrollbar-thumb {
        border-radius: var(--awa-radius-full); /* BP-03: era 999px hardcoded */
        background: rgb(0 0 0 / 25%);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .submenu .subchildmenu > li > a {
        max-width: min(360px, 40vw);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
    body .page-wrapper .verticalmenu.side-verticalmenu {
        margin-bottom: 0;
    }
}

/* UX POLISH — CONTAINER/CARDS/BUTTONS (FIX-14/15/16 UX): REMOVIDO.
   max-width, padding, gap, transform conflitavam com grid nativo do Rokanthemes.
   Container, product cards e buttons agora seguem o padrão original do tema Ayo. */

/* ============================================================
   FIX-30 — CATEGORYTAB2 SCROLL-SNAP + FADE INDICATORS (MOBILE)
   Scroll horizontal c/ snap + gradiente de fade nas bordas.
   ============================================================ */

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .box-bottom-home2.box-testimo {
    margin: var(--awa-space-6) 0 0;
    padding: clamp(18px, 2.2vw, 28px);
    border: 1px solid var(--awa-gray-200);
    border-radius: var(--awa-radius);
    background: var(--awa-bg-surface); /* BP-12 */
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .box-bottom-home2.box-testimo > h2 {
    margin: 0 0 18px;
    text-align: center;
    font-size: clamp(22px, 1.3vw + 14px, 28px);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .box-bottom-home2.box-testimo .item-testimo {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .box-bottom-home2.box-testimo .author-test-link a {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .box-bottom-home2.box-testimo .info-testimonial {
    text-align: left;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .box-bottom-home2.box-testimo .viewall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--awa-space-4); /* BP-19: era 16px */
    padding: 10px 18px;
    border-radius: var(--awa-radius-full); /* BP-03: era 999px hardcoded */
    background: var(--awa-red);
    color: var(--awa-text-on-primary); /* BP-09: era #fff hardcoded */
    font-weight: var(--awa-weight-semibold);
    text-decoration: none;
    transition: background var(--awa-transition-fast), transform var(--awa-transition-fast);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .box-bottom-home2.box-testimo .viewall:hover {
    background: var(--awa-red-dark);
    transform: translateY(-1px);
}

/* ============================================================
   FIX-29 — TESTIMONIAL CARDS: UNIFORM HEIGHT + TEXT CLAMPING
   Garante altura uniforme nos cards do carrossel de depoimentos,
   limita texto a 4 linhas c/ ellipsis, normaliza tipografia.
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .box-bottom-home2.box-testimo .testimo-slider .owl-stage {
    display: flex;
    align-items: stretch;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .box-bottom-home2.box-testimo .testimo-slider .owl-item {
    display: flex;
    flex-direction: column;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .box-bottom-home2.box-testimo .testimo-slider .owl-item > .item-testimo {
    flex: 1 1 auto;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .box-bottom-home2.box-testimo .testimonialContent {
    min-height: 80px;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .box-bottom-home2.box-testimo .testimonialContent .desc {
    display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: var(--awa-leading-loose);
    font-size: var(--awa-text-sm);
    color: var(--awa-gray-600);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .box-bottom-home2.box-testimo .author-test-info h3 {
    margin: 0;
    font-size: var(--awa-text-base);
    font-weight: var(--awa-weight-semibold);
    line-height: var(--awa-leading-base);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .box-bottom-home2.box-testimo .author-test-info span {
    font-size: var(--awa-text-xs);
    color: var(--awa-gray-500);
}

/* ============================================================
   FIX-31 — SECTION HEADINGS NORMALIZATION
   Normaliza .rokan-product-heading para consistencia visual
   com .ayo-home5-heading (tamanho, peso, espacamento).
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .rokan-product-heading {
    margin-bottom: clamp(var(--awa-space-4), 2vw, var(--awa-space-6));
    text-align: center;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .rokan-product-heading h2 {
    font-size: clamp(1.4rem, 1vw + 1rem, 1.75rem);
    font-weight: var(--awa-weight-bold);
    letter-spacing: var(--awa-tracking-tighter);
    line-height: var(--awa-leading-snug);
    margin: 0 0 var(--awa-space-2);
    color: var(--awa-dark);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .rokan-product-heading .sup-title {
    font-size: var(--awa-text-xs);
    font-weight: var(--awa-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--awa-red);
    margin-bottom: var(--awa-space-1);
    display: block;
}

/* ============================================================
   FIX-32 — LOAD MORE / VIEW ALL BUTTON CENTER + SIZING
   Centraliza e padroniza os botoes "Carregar Mais" /
   "Ver Todos" nas secoes de produto da homepage.
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .list-tab-product .viewall,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .products-grid + .viewall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    min-height: var(--awa-btn-height);
    padding: 0 var(--awa-space-6);
    border-radius: var(--awa-radius-full);
    background: var(--awa-red);
    color: var(--awa-text-on-primary); /* BP-09: era #fff hardcoded */
    font-size: var(--awa-text-sm);
    font-weight: var(--awa-weight-semibold);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: var(--awa-tracking-normal);
    margin: var(--awa-space-6) auto 0;
    transition: background var(--awa-transition-fast), transform var(--awa-transition-fast);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .list-tab-product .viewall:hover,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .products-grid + .viewall:hover {
    background: var(--awa-red-dark);
    transform: translateY(-1px);
}

/* Container do viewall precisa de text-align center */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .list-tab-product > .viewall,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .common-tab-system-fixed > .viewall {
    text-align: center;
    width: 100%;
}

/* ============================================================
   FIX-33 — NEWSLETTER POPUP RESPONSIVE
   Max-width, border-radius e ajustes mobile para o popup
   de newsletter ("GANHE 10% OFF").
   ============================================================ */
body .page-wrapper .newsletter-popup,
body .page-wrapper .modals-wrapper .modal-popup.newsletter-popup-modal .modal-inner-wrap {
    max-width: min(90vw, 520px);
    border-radius: var(--awa-radius);
    overflow: hidden;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer {
    margin-top: var(--awa-space-7);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-bottom .footer-bottom-inner .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--awa-space-4); /* BP-17: era 16px */
    margin: 0;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-bottom .footer-bottom-inner .row > [class*="col-"] {
    float: none;
    width: auto;
    max-width: 100%;
    padding: 0;
    flex: 1 1 320px;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-payment-methods {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--awa-space-3) var(--awa-space-5); /* BP-17: era 12px 20px */
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-payment-methods .footer-title {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--footer-text-bright);
    font-size: var(--awa-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-payment-methods .payment-methods-wrapper,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-payment-methods .security-seals-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: var(--awa-radius-sm);
    background: rgb(255 255 255 / 4%);
    justify-content: flex-end;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-payment-methods .payment-methods-img {
    max-height: 32px;
    width: auto;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-payment-methods .seals {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--awa-space-2); /* BP-17: era 8px */
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-payment-methods .security-seal-item svg {
    width: auto;
    max-width: 120px;
    min-width: 0;
    height: 28px;
}

@media (width <= 767px) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-bottom .footer-bottom-inner .row {
        align-items: stretch;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-bottom .footer-bottom-inner .row > [class*="col-"] {
        flex: 1 1 100%;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-payment-methods {
        justify-content: stretch;
        gap: var(--awa-space-3);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-payment-methods .payment-methods-wrapper,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-payment-methods .security-seals-wrapper {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .page_footer .footer-payment-methods .footer-title {
        flex: 0 0 100%;
    }
}

body .page-wrapper .action.primary,
body .page-wrapper button.primary,
body .page-wrapper .item-product .action.tocart,
body .page-wrapper .item-product .btn-add-to-cart,
body .page-wrapper .product-item .action.tocart {
    background: var(--awa-red);
    border-color: var(--awa-red);
    color: var(--awa-text-on-primary); /* BP-09: era #fff hardcoded */
    font-weight: var(--awa-weight-bold);
    transition: background-color var(--awa-transition-fast), box-shadow var(--awa-transition-fast), transform var(--awa-transition-fast);
}

body .page-wrapper .action.primary:hover,
body .page-wrapper button.primary:hover,
body .page-wrapper .item-product .action.tocart:hover,
body .page-wrapper .item-product .btn-add-to-cart:hover,
body .page-wrapper .product-item .action.tocart:hover {
    background: var(--awa-red-dark);
    border-color: var(--awa-red-dark);
    color: var(--awa-text-on-primary); /* BP-09: era #fff hardcoded */
    box-shadow: var(--awa-shadow-red);
    transform: translateY(-1px);
}

body .page-wrapper .action.primary:focus-visible,
body .page-wrapper button.primary:focus-visible,
body .page-wrapper .item-product .action.tocart:focus-visible,
body .page-wrapper .item-product .btn-add-to-cart:focus-visible,
body .page-wrapper .product-item .action.tocart:focus-visible {
    background: var(--awa-red-dark);
    border-color: var(--awa-red-dark);
    color: var(--awa-text-on-primary); /* BP-09: era #fff hardcoded */
    outline: 2px solid var(--awa-red);
    outline-offset: 2px;
}

body .page-wrapper .action.primary:active,
body .page-wrapper button.primary:active,
body .page-wrapper .item-product .action.tocart:active,
body .page-wrapper .item-product .btn-add-to-cart:active,
body .page-wrapper .product-item .action.tocart:active {
    background: var(--awa-red-dark); /* BP-10: era #8e2629 hardcoded */
    border-color: var(--awa-red-dark); /* BP-10: era #8e2629 hardcoded */
    color: var(--awa-text-on-primary); /* BP-09: era #fff hardcoded */
    transform: scale(0.97);
}

/* ============================================================
   FIX-26 — HOME5 MEDIUM VIEWPORT STABILIZATION (P1)
   Neutraliza regras legadas de 80px no menu e melhora leitura 992-1199.
   ============================================================ */

/* ============================================================
   FIX-27 — VERTICAL MENU MOBILE TOGGLES (P1)
   Alinha com recomendação do template Ayo para abertura de submenu no mobile.
   ============================================================ */

/* FIX-26b — MEDIUM VIEWPORT EXTRAS (992-1199px) */

/* ============================================================
   FIX-27 — TRUST & OFFERS GRID STABILITY (P1)
   Escopo: top-home-content--trust-and-offers (Home5).
   Usa classes de estrutura no template para evitar ambiguidades
   entre wrappers CMS e blocos Rokanthemes.
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers {
    margin-top: var(--awa-space-4);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .top-home-content__trust-offers-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--awa-space-4);
    align-items: start;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .top-home-content__trust-offers-grid > * {
    min-width: 0;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .top-home-content__trust-offers-banner,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .top-home-content__trust-offers-deals {
    margin-top: 0;
}

/* ============================================================
   FIX-30 — MAIN NAV GLYPH/ICON SANITIZATION (P1)
   Remove ícones/font-glyph quebrados no menu horizontal Home5
   sem afetar o menu vertical nem submenus internos.
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li > a > .menu-thumb-icon,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li > a > img.menu-thumb-icon,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li > a > em.menu-thumb-icon {
    display: none !important;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li > a > em.menu-thumb-icon::before,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li > a > em.menu-thumb-icon::after {
    content: none !important;
    display: none !important;
}

/* Cat-labels restaurados para fidelidade ao demo Ayo Home5 */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li > a > .cat-label {
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    padding: 2px 5px;
    border-radius: var(--awa-radius-sm);
    vertical-align: middle;
    margin-left: 4px;
    text-transform: uppercase;
    font-weight: var(--awa-weight-bold);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li > a::before,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li > a::after {
    content: none !important;
    display: none !important;
}

/* ============================================================
   FIX-31 — MAIN NAV INTERACTION REFINEMENT (P2)
   Evita overlay de toggle no desktop/médio e melhora foco visível.
   ============================================================ */

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .navigation.custommenu.main-nav > ul > li > a:focus-visible {
    outline: 2px solid var(--awa-red);
    outline-offset: 2px;
}

/* ============================================================
   FIX-32 — MAIN NAV MEDIUM-DESKTOP SCROLL UX (P2)
   Melhora rolagem horizontal e legibilidade entre 992-1199px.
   ============================================================ */

/* ============================================================
   FIX-33 — MAIN NAV KEYBOARD/SUBMENU REFINEMENT (P2)
   Garante abertura por teclado e estabiliza dropdown no topo.
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) > ul > li > .submenu,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) > ul > li > .groupmenu {
    margin-top: 0;
    border-top: 2px solid var(--awa-red);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) > ul > li:focus-within > .submenu,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper :where(.navigation.custommenu.main-nav) > ul > li:focus-within > .groupmenu {
    display: block;
}

/* ============================================================
   FIX-34 — SUBMENU ALIGNMENT & VIEWPORT CONTAINMENT (P2)
   Evita corte lateral de dropdown e melhora legibilidade desktop.
   ============================================================ */

/* ============================================================
   FIX-35 — MAIN NAV RESPONSIVE TOUCH TUNING (P2)
   Melhora hit-area, snapping e estabilidade visual até 991px.
   ============================================================ */

/* ============================================================
   FIX-36 — TOP RHYTHM ALIGNMENT (P2)
   Harmoniza espaçamento entre header-nav, main-nav e primeiro bloco.
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav {
    margin-bottom: clamp(8px, 1.1vw, 14px);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-wrapper > .top-home-content.top-home-content--trust-and-offers {
    margin-top: clamp(8px, 1vw, 14px);
}

/* ============================================================
   FIX-37 — SUBMENU RESPONSIVE CONTAINMENT (P2)
   Evita dropdown muito alto/corte em telas desktop médias.
   ============================================================ */
@media (width >= 992px) and (width <= 1366px) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > .submenu,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > .groupmenu {
        max-height: min(70vh, 560px);
        overscroll-behavior: contain;
    }
}

/* ============================================================
   FIX-38 — NAV/SUBMENU INTERACTION CONSISTENCY (P2)
   Uniformiza hover/foco/transições para leitura e acessibilidade.
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > a {
    transition: background-color var(--awa-transition-fast), color var(--awa-transition-fast), box-shadow var(--awa-transition-fast);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > a:hover,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > a:focus-visible {
    box-shadow: inset 0 -2px 0 var(--awa-red);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .subchildmenu > li > a,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .submenu li > a {
    transition: background-color var(--awa-transition-fast), color var(--awa-transition-fast);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .subchildmenu > li > a:focus-visible,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .submenu li > a:focus-visible {
    outline: 2px solid var(--awa-red);
    outline-offset: -2px;
    background: rgb(183 51 55 / 8%);
}

/* ============================================================
   FIX-39 — NAV ACCESSIBILITY HARDENING (P2)
   Reduced motion, alto contraste e rolagem horizontal consistente.
   ============================================================ */

@media (forced-colors: active) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > a:focus-visible,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .submenu li > a:focus-visible {
        outline: 2px solid CanvasText;
        outline-offset: 2px;
        forced-color-adjust: none;
        background: Canvas;
        color: CanvasText;
    }
}

/* ============================================================
   FIX-40 — SMALL-SCREEN NAV MICRO-REFINEMENT (P2)
   Ajusta densidade tipográfica e hit-area em telas pequenas.
   ============================================================ */
@media (width <= 575px) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul {
        padding-inline: max(2px, env(safe-area-inset-left)) max(2px, env(safe-area-inset-right));
        gap: 3px;
        scroll-padding-inline: 6px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > a {
        min-height: 46px;
        padding-inline: 14px;
        font-size: var(--awa-text-sm);
        letter-spacing: var(--awa-tracking-tight);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) {
        --awa-main-nav-link-min-h: 46px;
        --awa-main-nav-link-pad-x: 14px;
    }
}

/* ============================================================
   FIX-41 — MAIN NAV LOCAL TOKENS (P2)
   Centraliza parâmetros de altura/espaçamento para manutenção.
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) {
    --awa-main-nav-link-min-h: 48px;
    --awa-main-nav-link-pad-x: 16px;
    --awa-main-nav-link-radius: 8px;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > a.level-top {
    min-height: var(--awa-main-nav-link-min-h);
    padding-inline: var(--awa-main-nav-link-pad-x);
    border-radius: var(--awa-main-nav-link-radius);
}

/* ============================================================
   FIX-42 — SUBMENU LAYERING STABILITY (P2)
   Evita conflitos de sobreposição em header/nav e dropdown.
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary {
    position: relative;
    z-index: 6;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > .submenu,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > .groupmenu {
    z-index: var(--awa-z-flyout); /* BP-16: era 10030 */
}

/* FIX-43 — OVERFLOW CLIP FALLBACK: removido (bloco vazio, sem regras necessárias). */

/* ============================================================
   FIX-44 — SAFE AREA SUPPORT ON SMALL SCREENS (P3)
   Evita clipping nas bordas em devices com notch/gestures.
   ============================================================ */

/* ============================================================
   FIX-45 — MAIN NAV ACTIVE STATE VIA ARIA-CURRENT (P2)
   Consistência do estado ativo com base em aria-current="page".
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > a[aria-current="page"] {
    background: var(--awa-red);
    color: var(--awa-text-on-primary); /* BP-09: era #fff hardcoded */
    box-shadow: inset 0 -2px 0 var(--awa-red-dark);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > a[aria-current="page"]:focus-visible {
    outline: 2px solid var(--awa-red);
    outline-offset: 2px;
}

/* ============================================================
   FIX-46 — DESKTOP SUBMENU SCROLLBAR TUNING (P3)
   Scrollbar consistente para submenu/groupmenu no desktop.
   ============================================================ */

/* ============================================================
   FIX-47 — SUBMENU ACTIVE/HOVER CONSISTENCY (P2)
   Harmoniza contraste e destaque de estado ativo em subníveis.
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .submenu li > a:not([aria-current="page"]):hover {
    background: rgb(183 51 55 / 8%);
    color: var(--awa-red-dark);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .submenu li.active > a,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .submenu li.current > a,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .submenu li > a[aria-current="page"] {
    background: rgb(183 51 55 / 12%);
    color: var(--awa-red-dark);
    font-weight: var(--awa-weight-semibold);
}

/* ============================================================
   FIX-48 — SUBMENU LEVEL SPACING REFINEMENT (P3)
   Melhora ritmo vertical/horizontal de links em subníveis.
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .submenu .subchildmenu > li > a {
    min-height: 34px;
    padding-inline: var(--awa-space-3); /* BP-21: era 12px */
    line-height: var(--awa-leading-cozy);
}

/* ============================================================
   FIX-49 — SUBMENU DEPTH VISUAL HIERARCHY (P2)
   Diferencia níveis 1/2/3 para leitura e escaneabilidade.
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .submenu .subchildmenu > li.level1 > a {
    font-weight: var(--awa-weight-semibold);
    letter-spacing: 0.005em;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .submenu .subchildmenu > li.level2 > a {
    font-weight: var(--awa-weight-medium);
    padding-inline-start: 14px;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .submenu .subchildmenu > li.level3 > a {
    font-weight: var(--awa-weight-medium);
    opacity: 0.95;
    padding-inline-start: 18px;
}

/* ============================================================
   FIX-50 — PARENT ACTIVE STATE PROPAGATION (P2)
   Mantém item pai destacado quando um descendente está ativo.
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li.awa-has-current-descendant > a.level-top,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li.active > a.level-top,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li.current > a.level-top {
    background: var(--awa-red);
    color: var(--awa-text-on-primary); /* BP-09: era #fff hardcoded */
    box-shadow: inset 0 -2px 0 var(--awa-red-dark);
}

@media (pointer: coarse) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .submenu .subchildmenu > li > a {
        min-height: 42px;
        -webkit-tap-highlight-color: rgb(183 51 55 / 20%);
    }
}

/* FIX-51 removido: o destaque de ativo agora é unificado (classes + estados nativos). */

/* ============================================================
   FIX-52 — LONG TEXT RESILIENCE IN SUBMENU (P3)
   Evita overflow e quebra feia para rótulos longos.
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) .submenu li > a {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

/* R28 — Bug #3: Neutraliza padding-left:18px de themes5.css no hover.
   transform:translateX(5px) em awa-layout.css é o efeito hover canônico. */

/* ============================================================
   FIX-34 — VERTICAL MENU SUBMENU FLYOUT (P1)
   Garante que submenus do menu vertical apareçam ao hover no desktop.
   Define estado-base (hidden) e hover (visible) com especificidade
   alta o suficiente para vencer regras do módulo Rokanthemes.
   ============================================================ */
@media (width >= 992px) {
    /* A11y (teclado): replica o hover do flyout usando focus-within. */
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu li.level0.fullwidth:focus-within > .submenu,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu li.level0.staticwidth:focus-within > .submenu,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu li.level0.classic:focus-within > .submenu {
        visibility: visible;
        opacity: 1;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu li.level0.classic li.parent:focus-within > .submenu,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu li.level0.classic .subchildmenu > li.parent:focus-within > .subchildmenu {
        visibility: visible;
        opacity: 1;
    }

    /* Desktop usa flyout por hover/foco; evita ícone "+" enganoso do mobile. */
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu .open-children-toggle {
        display: none;
    }

    /* Foco visível consistente para navegação por teclado dentro do menu vertical. */
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu li.level0 > a:focus-visible,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu .submenu a:focus-visible,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu .subchildmenu a:focus-visible {
        outline: 2px solid var(--awa-red);
        outline-offset: 2px;
        border-radius: var(--awa-radius-2xs);
    }
}

/* ============================================================
   FIX-35 — VERTICAL MENU TITLE HAMBURGER ICON + EXPAND BUTTON
   Restaura ícone hamburger no título e estiliza botão "Ver Todas".
   Alinha com padrão do template Ayo (our_categories + vm-toggle-categories).
   ============================================================ */

/* Hamburger icon no título */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu > h2.our_categories .vm-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu > h2.our_categories .vm-icon .fa-bars {
    font-size: var(--awa-text-md);
    color: inherit;
}

/* Botão "Ver Todas / Show More" — dentro de <li.expand-category-link> no <ul> */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu > ul.togge-menu.list-category-dropdown > li.expand-category-link {
    list-style: none;
    margin: 0;
    padding: 0;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu > ul.togge-menu.list-category-dropdown > li.expand-category-link > .vm-toggle-categories {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 20px;
    font-size: var(--awa-text-sm);
    font-weight: var(--awa-weight-semibold);
    color: var(--awa-red-dark);
    background: var(--awa-gray-100);
    border: 1px solid var(--awa-gray-200);
    border-top: 0;
    border-radius: 0 0 var(--awa-radius-sm) var(--awa-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--awa-transition-fast), color var(--awa-transition-fast); /* BP-08: era 0.2s ease hardcoded */
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu > ul.togge-menu.list-category-dropdown > li.expand-category-link > .vm-toggle-categories:hover {
    background: var(--awa-gray-200);
    color: var(--awa-red);
}

/* Remove pseudo-ícones herdados do tema legado no item "Todas as Categorias" */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu > ul.togge-menu.list-category-dropdown > li.expand-category-link > .vm-toggle-categories::before,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu > ul.togge-menu.list-category-dropdown > li.expand-category-link > .vm-toggle-categories::after {
    content: none !important;
    display: none !important;
}

/* Rotate arrow icon when expanded */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu > ul.togge-menu.list-category-dropdown > li.expand-category-link > .vm-toggle-categories .vm-toggle-icon {
    transition: transform var(--awa-transition); /* BP-08: era 0.3s ease hardcoded */
    font-size: var(--awa-text-xs);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .verticalmenu.side-verticalmenu > ul.togge-menu.list-category-dropdown > li.expand-category-link > .vm-toggle-categories.expanding .vm-toggle-icon {
    transform: rotate(180deg);
}

/* ============================================================
   FIX-53 — HOME5 DESKTOP: VERTICAL MENU OVERLAY PANEL (P1)
   Evita "faixa branca" no topo: lista de categorias deve abrir
   em dropdown absoluto (não em fluxo), como no template Ayo.
   ============================================================ */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .sections.nav-sections.category-dropdown > .section-items > .section-item-title.nav-sections.category-dropdown-item-title {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .sections.nav-sections.category-dropdown .section-item-content.category-dropdown-item-content {
    display: block !important; /* anti-tabs-widget: garante conteúdo visível */
    margin: 0 !important;
    padding-top: 0 !important;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu > ul.togge-menu.list-category-dropdown {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu > ul.togge-menu.list-category-dropdown > li.vertical-menu-custom-block,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu > ul.togge-menu.list-category-dropdown > li.vertical-menu-custom-block > .vertical-menu-before,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu > ul.togge-menu.list-category-dropdown > li.vertical-menu-custom-block > .vertical-menu-after {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* ============================================================
   FIX-55 — HOME5 DESKTOP: TITLE-CATEGORY-DROPDOWN VISUAL (P1)
   Estiliza o gatilho h2 do VerticalMenu no desktop homepage.
   No desktop a lista (.togge-menu) é gerenciada via JS
   (vertical-menu-init.js keepDesktopMenuExpanded); o h2 é
   o elemento visual que o usuário vê como "header do menu".
   ============================================================ */
@media (width >= 992px) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
    .page-wrapper .menu_left_home1
    .navigation.verticalmenu.side-verticalmenu > h2.title-category-dropdown {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;
        padding: 0 14px;
        border-radius: var(--awa-radius-sm, 4px);
        background: var(--awa-red, #c0392b);
        color: var(--awa-text-on-primary, #fff);
        cursor: default;
        user-select: none;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
    .page-wrapper .menu_left_home1
    .navigation.verticalmenu.side-verticalmenu > h2.title-category-dropdown .vm-icon {
        display: inline-flex;
        align-items: center;
        font-size: 16px;
    }
}

/* ============================================================
   FIX-54 — MOBILE: GARANTIR VISIBILIDADE DO NAV-TOGGLE (P1)
   Remove conflito de sobreposição com menu_left_home1 no ≤767px.
   ============================================================ */

/* ============================================================
   FIX-56 — MAIN-NAV HOME5 BASELINE ALIGNMENT (P1)
   Consolida baseline visual/funcional do custommenu main-nav
   no header global do ayo_home5 (desktop + touch/tablet).
   ============================================================ */
body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav {
    position: relative;
    width: 100%;
}

body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li {
    position: relative;
    display: flex;
    align-items: stretch;
}

body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li > a,
body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li > a.level-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 16px;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 8px;
}

body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li > a:hover,
body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li > a:focus-visible {
    background: rgb(183 51 55 / 10%);
}

body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li > .submenu,
body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li > .groupmenu {
    top: calc(100% + 2px);
}

body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li:nth-last-child(-n+2) > .submenu,
body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li:nth-last-child(-n+2) > .groupmenu {
    left: auto;
    right: 0;
}

@media (width <= 1199px) {
    body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul {
        overflow: visible auto;
        scrollbar-width: thin;
        scrollbar-color: rgb(0 0 0 / 25%) transparent;
    }
}

@media (width <= 991px) {
    body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li > .open-children-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        min-height: 48px;
    }

    body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li > .submenu,
    body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li > .groupmenu {
        display: none;
        position: absolute;
        left: 0;
        right: auto;
        min-width: 260px;
        max-width: min(92vw, 420px);
        max-height: min(70vh, 560px);
        overflow: auto;
    }

    body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li.active > .submenu,
    body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li.active > .groupmenu,
    body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li._active > .submenu,
    body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li._active > .groupmenu,
    body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li > .submenu.opened,
    body .page-wrapper .header-nav .menu_primary > .navigation.custommenu.main-nav > ul > li > .groupmenu.opened {
        display: block;
    }
}

/* UX POLISH — FORMS/TYPOGRAPHY/MINICART/CATEGORY/PRODUCT/MOBILE/B2B/DEALS
   (FIX-17..FIX-30 UX): REMOVIDO COMPLETAMENTE.
   355 !important em propriedades de layout quebravam:
     - OnePageCheckout (form inputs override)
     - LayeredAjax (sidebar filters override)
     - Minicart (border/padding override)
     - CustomMenu (icon display override)
     - Product detail (tabs/gallery override)
     - Mobile nav (touch target overrides)
   Restaurado para comportamento padrão do demo (ayo.nextsky.co/en_5/). */

/* ============================================================
   ██ AWA VISUAL REFINEMENTS — SAFE LAYER ██

   REGRA DE OURO: Este bloco SÓ altera propriedades VISUAIS.

   ✅ PERMITIDO: color, background-color, border-color, border-radius,
      box-shadow, text-shadow, font-size, font-weight, letter-spacing,
      line-height, text-decoration, text-transform, opacity, cursor,
      transition, transform (hover only), outline, padding (inline only)

   ❌ PROIBIDO: display, position, float, width, height, min-/max-,
      overflow, flex*, grid*, gap, align-*, justify-*, order, z-index,
      top/right/bottom/left, margin (block), padding (block),
      visibility, clear, table-layout, columns, writing-mode

   Isso garante que NENHUM módulo/carrossel/grid/container quebre.
   ============================================================ */


/* --- 1. TIPOGRAFIA GLOBAL ---
   Kerning e rendering premium. Sem alterar tamanhos. */
body {
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Títulos — letter-spacing e balance */
body .page-wrapper h1,
body .page-wrapper h2,
body .page-wrapper h3,
body .page-wrapper h4 {
    letter-spacing: 0.3px;
    text-wrap: balance;
}

/* --- 2. CORES & TIPOGRAFIA DE PRODUTO --- */

/* Preço atual — vermelho bold */
body .page-wrapper .info-price .price,
body .page-wrapper .price-box .price-wrapper .price,
body .page-wrapper .info-price-deal .price {
    color: var(--awa-red);
    font-weight: var(--awa-weight-bold);
}

/* Preço antigo — cinza riscado */
body .page-wrapper .info-price .old-price .price,
body .page-wrapper .price-box .old-price .price,
body .page-wrapper .info-price-deal .old-price .price {
    color: var(--awa-gray-400);
    text-decoration: line-through;
    font-weight: var(--awa-weight-normal);
}

/* Nome do produto — cor e transição */
body .page-wrapper .product-name .product-item-link,
body .page-wrapper .product-item-name a,
body .page-wrapper .title-product a.product-item-link {
    color: var(--awa-dark);
    text-decoration: none;
    transition: color var(--awa-transition-fast);
}

body .page-wrapper .product-name .product-item-link:hover,
body .page-wrapper .product-item-name a:hover,
body .page-wrapper .title-product a.product-item-link:hover {
    color: var(--awa-red);
}

/* --- 3. BADGES (Sale / New) ---
   Apenas cores e tipografia. NÃO altera tamanho/posição. */
body .page-wrapper .onsale {
    background: var(--awa-red);
    color: #fff;
    font-weight: var(--awa-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body .page-wrapper .onsale.new-lable,
body .page-wrapper .newlabel {
    background: var(--awa-dark);
    color: #fff;
    font-weight: var(--awa-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- 4. LINKS & HOVER GLOBAIS --- */

/* Links genéricos com transição */
body .page-wrapper a {
    transition: color var(--awa-transition-fast);
}

/* Hover vermelho para links de ação */
body .page-wrapper .breadcrumbs a:hover,
body .page-wrapper .sidebar-post a:hover,
body .page-wrapper .filter-options a:hover,
body .page-wrapper .blog-title a:hover,
body .page-wrapper .readmore:hover,
body .page-wrapper .testimo-name a:hover {
    color: var(--awa-red);
}

/* --- 5. BREADCRUMBS ---
   Apenas tipografia e cores. */
body .page-wrapper .breadcrumbs {
    font-size: var(--awa-text-xs);
    color: var(--awa-gray-500);
}

body .page-wrapper .breadcrumbs a {
    color: var(--awa-gray-500);
    text-decoration: none;
}

body .page-wrapper .breadcrumbs strong {
    color: var(--awa-dark);
    font-weight: var(--awa-weight-semibold);
}

/* --- 6. BOTÕES — Cores e transições ---
   CONSOLIDADO: Definição canônica de cores agora está no bloco
   .action.primary + .action.tocart na seção FIX-buttons (~L2377).
   Não duplicar aqui. */

/* Subscribe button */
body .page-wrapper .action.subscribe.primary,
body .newsletterpopup .action.subscribe.primary {
    background-color: var(--awa-red);
    color: #fff;
    border-color: var(--awa-red);
    font-weight: var(--awa-weight-bold);
    transition: background-color var(--awa-transition-fast), box-shadow var(--awa-transition-fast);
}

body .page-wrapper .action.subscribe.primary:hover,
body .newsletterpopup .action.subscribe.primary:hover {
    background-color: var(--awa-red-dark);
    box-shadow: var(--awa-shadow-red);
}

/* --- 7. PRODUCT CARDS — Hover visual ---
   Apenas border-color, shadow, transform. NÃO altera layout. */
body .page-wrapper .item-product {
    transition: box-shadow var(--awa-transition-fast), border-color var(--awa-transition-fast), transform var(--awa-transition-fast);
}

body .page-wrapper .item-product:hover {
    box-shadow: var(--awa-shadow-hover);
    transform: translateY(-2px);
}

/* Deal cards hover */
body .page-wrapper .super-deal .item-deal-product {
    transition: box-shadow var(--awa-transition-fast), transform var(--awa-transition-fast);
}

body .page-wrapper .super-deal .item-deal-product:hover {
    box-shadow: var(--awa-shadow-md);
    transform: translateY(-2px);
}

/* --- 8. HEADER — Apenas cores e tipografia ---
   NÃO altera layout do header. */

/* Badge quantidade minicart — cores */
body .page-wrapper .minicart-wrapper .counter.qty {
    background: var(--awa-red);
    color: #fff;
    font-weight: var(--awa-weight-bold);
}

/* Top header — contraste */
body .page-wrapper .top-header {
    color: var(--awa-gray-300);
    font-size: var(--awa-text-xs);
}

/* --- 9. TABS — Cores do estado ativo ---
   NÃO altera display, flex, overflow. */
body .page-wrapper .list-tab-product .tabs li.active,
body .page-wrapper .categorytab-container .tabs li.active {
    color: var(--awa-red);
    font-weight: var(--awa-weight-bold);
    border-bottom-color: var(--awa-red);
}

body .page-wrapper .list-tab-product .tabs li,
body .page-wrapper .categorytab-container .tabs li {
    transition: color var(--awa-transition-fast), border-color var(--awa-transition-fast);
    cursor: pointer;
}

body .page-wrapper .list-tab-product .tabs li:hover,
body .page-wrapper .categorytab-container .tabs li:hover {
    color: var(--awa-red);
}

/* --- 10. FILTROS SIDEBAR — Cores e tipografia --- */

/* Título de filtro */
body .page-wrapper .filter-options .filter-options-title {
    font-weight: var(--awa-weight-semibold);
    color: var(--awa-dark);
    cursor: pointer;
    transition: color var(--awa-transition-fast);
}

body .page-wrapper .filter-options .filter-options-title:hover {
    color: var(--awa-red);
}

/* Items do filtro */
body .page-wrapper .filter-options .filter-options-content .item a {
    color: var(--awa-gray-600);
    transition: color var(--awa-transition-fast);
    text-decoration: none;
}

body .page-wrapper .filter-options .filter-options-content .item a:hover,
body .page-wrapper .filter-options .filter-options-content .item a.active {
    color: var(--awa-red);
    font-weight: var(--awa-weight-semibold);
}

/* Contador de filtro */
body .page-wrapper .filter-options .count {
    color: var(--awa-gray-400);
}

/* "Clear All" */
body .page-wrapper .filter-current .action.clear.filter-clear {
    color: var(--awa-red);
    font-weight: var(--awa-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--awa-transition-fast);
}

body .page-wrapper .filter-current .action.clear.filter-clear:hover {
    color: var(--awa-red-dark);
}

/* --- 11. TOOLBAR & PAGINAÇÃO --- */

/* Sorter select — border e foco */
body .page-wrapper .toolbar-sorter .sorter-options {
    border-color: var(--awa-gray-300);
    color: var(--awa-dark);
    transition: border-color var(--awa-transition-fast);
}

body .page-wrapper .toolbar-sorter .sorter-options:focus {
    border-color: var(--awa-red);
    outline: none;
}

/* Quantidade "X de Z" */
body .page-wrapper .toolbar-amount .toolbar-number {
    font-weight: var(--awa-weight-semibold);
    color: var(--awa-dark);
}

/* Grid mode active */
body .page-wrapper .grid-mode-show-type-products a.actived {
    background: var(--awa-red);
    border-color: var(--awa-red);
    color: #fff;
}

body .page-wrapper .grid-mode-show-type-products a:hover {
    border-color: var(--awa-red);
    color: var(--awa-red);
}

/* Paginação — página atual */
body .page-wrapper .pages .items .item.current strong {
    background: var(--awa-red);
    color: #fff;
    border-color: var(--awa-red);
}

body .page-wrapper .pages .items .item a:hover {
    border-color: var(--awa-red);
    color: var(--awa-red);
}

/* --- 12. VERTICAL MENU — Cores e transições --- */

/* Hover nos itens do menu vertical */
body .page-wrapper .navigation.verticalmenu .list-category-dropdown > li > a {
    color: var(--awa-dark);
    transition: color var(--awa-transition-fast), background-color var(--awa-transition-fast);
    text-decoration: none;
}

body .page-wrapper .navigation.verticalmenu .list-category-dropdown > li > a:hover {
    color: var(--awa-red);
    background: var(--awa-red-extra-light);
}

/* "All Categories" link */
body .page-wrapper .navigation.verticalmenu .expand-category-link .viewall {
    color: var(--awa-red);
    font-weight: var(--awa-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color var(--awa-transition-fast);
    text-decoration: none;
}

body .page-wrapper .navigation.verticalmenu .expand-category-link .viewall:hover {
    color: var(--awa-red-dark);
}

/* --- 13. DROPDOWN/SUBMENU — Cores e shadow ---
   NÃO altera posição/display do submenu. */
body .page-wrapper .header-nav .navigation.custommenu .dropdown-menu li a,
body .page-wrapper .header-nav .navigation.custommenu > ul > li > .submenu li a {
    transition: background-color var(--awa-transition-fast), color var(--awa-transition-fast);
}

body .page-wrapper .header-nav .navigation.custommenu .dropdown-menu li a:hover,
body .page-wrapper .header-nav .navigation.custommenu > ul > li > .submenu li a:hover {
    background: var(--awa-red-extra-light);
    color: var(--awa-red);
}

/* --- 14. BLOG — Cores e tipografia --- */
body .page-wrapper .block-recent-posts .blog-title a {
    color: var(--awa-dark);
    font-weight: var(--awa-weight-semibold);
    transition: color var(--awa-transition-fast);
    text-decoration: none;
}

body .page-wrapper .block-recent-posts .blog-title a:hover {
    color: var(--awa-red);
}

body .page-wrapper .block-recent-posts .time-conment,
body .page-wrapper .block-recent-posts .date-time {
    color: var(--awa-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body .page-wrapper .block-recent-posts .readmore {
    color: var(--awa-red);
    font-weight: var(--awa-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color var(--awa-transition-fast);
    text-decoration: none;
}

body .page-wrapper .block-recent-posts .readmore:hover {
    color: var(--awa-red-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- 15. TESTIMONIALS — Tipografia e cores --- */
body .page-wrapper .page-testimonial .testimo-name a {
    color: var(--awa-dark);
    font-weight: var(--awa-weight-bold);
    transition: color var(--awa-transition-fast);
    text-decoration: none;
}

body .page-wrapper .page-testimonial .testimo-name a:hover {
    color: var(--awa-red);
}

body .page-wrapper .page-testimonial .testimo-job {
    color: var(--awa-gray-400);
}

body .page-wrapper .page-testimonial .testimo-desc {
    color: var(--awa-gray-600);
    font-style: italic;
    line-height: var(--awa-leading-relaxed);
}

body .page-wrapper .page-testimonial .testimo-date {
    color: var(--awa-gray-400);
}

/* --- 16. SEARCH AUTOCOMPLETE — Cores e hover --- */
body .page-wrapper .search-autocomplete .autocomplete-list dd:hover,
body .page-wrapper .search-autocomplete .qs-option:hover,
body .page-wrapper .search-autocomplete .qs-option.selected {
    background: var(--awa-red-extra-light);
    color: var(--awa-red);
}

/* --- 17. MENSAGENS DO SISTEMA --- */
body .page-wrapper .message-success,
body .page-wrapper .message.success {
    background: #f0fdf4;
    border-color: var(--awa-success);
    color: #166534;
}

body .page-wrapper .message-error,
body .page-wrapper .message.error {
    background: #fef2f2;
    border-color: var(--awa-danger);
    color: #991b1b;
}

body .page-wrapper .message-notice,
body .page-wrapper .message.info {
    background: #eff6ff;
    border-color: var(--awa-info);
    color: #1e40af;
}

body .page-wrapper .message-warning,
body .page-wrapper .message.warning {
    background: #fffbeb;
    border-color: var(--awa-warning);
    color: #92400e;
}

/* --- 18. PRODUCT DETAIL — Cores e estados ---
   NÃO altera layout do qty/galeria. */

/* Qty buttons hover */
body .page-wrapper .attr-product .info-qty .qty-down:hover,
body .page-wrapper .attr-product .info-qty .qty-up:hover {
    background: var(--awa-red);
    color: #fff;
}

/* Stock status */
body .page-wrapper .stock.available {
    color: var(--awa-success);
    font-weight: var(--awa-weight-semibold);
}

body .page-wrapper .stock.unavailable {
    color: var(--awa-danger);
    font-weight: var(--awa-weight-semibold);
}

/* Atributos */
body .page-wrapper .product.attribute .type {
    font-weight: var(--awa-weight-semibold);
    color: var(--awa-dark);
}

body .page-wrapper .product.attribute .value {
    color: var(--awa-gray-600);
    line-height: var(--awa-leading-relaxed);
}

/* Ações — email/print */
body .page-wrapper .action.email-link,
body .page-wrapper .action.print-link {
    color: var(--awa-gray-400);
    transition: color var(--awa-transition-fast);
}

body .page-wrapper .action.email-link:hover,
body .page-wrapper .action.print-link:hover {
    color: var(--awa-red);
}

/* --- 19. QUICKVIEW — Cores e tipografia ---
   NÃO altera tamanho do modal. */
body .page-wrapper .title-product-quickview {
    color: var(--awa-dark);
    font-weight: var(--awa-weight-bold);
}

/* --- 20. NEWSLETTER POPUP — Cores ---
   NÃO altera layout do popup. */
body .newsletterpopup .des-newletter .text-primary {
    color: var(--awa-red);
    font-weight: var(--awa-weight-bold);
}

body .newsletterpopup .btn-close:hover {
    opacity: 0.7;
}

/* --- 21. SUPER DEALS — Cores e hover --- */
body .page-wrapper .super-deal .deal-shop-link {
    color: var(--awa-red);
    border-color: var(--awa-red);
    font-weight: var(--awa-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color var(--awa-transition-fast), color var(--awa-transition-fast);
}

body .page-wrapper .super-deal .deal-shop-link:hover {
    background: var(--awa-red);
    color: #fff;
}

body .page-wrapper .super-deal .view-all-deal {
    color: var(--awa-red);
    font-weight: var(--awa-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--awa-transition-fast);
}

body .page-wrapper .super-deal .view-all-deal:hover {
    color: var(--awa-red-dark);
}

/* --- 22. ACESSIBILIDADE --- */

/* Focus ring global */
body .page-wrapper a:focus-visible,
body .page-wrapper button:focus-visible,
body .page-wrapper input:focus-visible,
body .page-wrapper select:focus-visible,
body .page-wrapper textarea:focus-visible {
    outline: 2px solid var(--awa-red);
    outline-offset: 2px;
}

/* Seleção de texto com cor da marca */
::selection {
    background: var(--awa-red);
    color: #fff;
}

/* --- 23. EMPTY STATE --- */
body .page-wrapper .message.info.empty {
    text-align: center;
    color: var(--awa-gray-500);
    border-color: var(--awa-gray-200);
    border-style: dashed;
}

/* --- 24. MICRO-INTERAÇÕES --- */

/* WhatsApp float pulse */
@keyframes awa-whatsapp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgb(37 211 102 / 50%); }
    50% { box-shadow: 0 0 0 12px rgb(37 211 102 / 0%); }
}

body .page-wrapper .awa-whatsapp-float {
    animation: awa-whatsapp-pulse 2s infinite;
}

/* --- 25. HOME5 MOBILE HEADER/TOPBAR POLISH (P3) ---
   Objetivo: corrigir links utilitários empilhando e melhorar ritmo visual no topo mobile. */
@media (width <= 767px) {
    /* Top bar mobile: esconder infos longas e manter ações úteis em linha/2 linhas compactas. */
    body .page-wrapper .panel.wrapper,
    body .page-wrapper .header-top {
        padding-block: 6px !important;
    }

    body .page-wrapper .header-top .top-bar-left,
    body .page-wrapper .panel.wrapper .top-bar-left {
        display: none !important;
    }

    body .page-wrapper .header-top .container,
    body .page-wrapper .panel.wrapper .panel.header {
        padding-inline: 12px;
    }

    body .page-wrapper .header-top .row > [class*="col-"],
    body .page-wrapper .panel.wrapper .panel.header > * {
        width: 100%;
        max-width: 100%;
        float: none;
    }

    body .page-wrapper .top-bar-right,
    body .page-wrapper .top-bar-right .top-info,
    body .page-wrapper .top-bar-right .top-account {
        display: flex;
        width: 100%;
        justify-content: center;
        min-width: 0;
    }

    body .page-wrapper .top-bar-right .top-account {
        overflow: visible;
    }

    body .page-wrapper .top-bar-right .header.links,
    body .page-wrapper .top-bar-right ul.header.links {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap !important;
        gap: 6px 12px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    body .page-wrapper .top-bar-right .header.links li {
        float: none !important;
        display: inline-flex !important;
        align-items: center;
        min-width: 0;
        width: auto !important;
        flex: 0 0 auto;
    }

    body .page-wrapper .top-bar-right .header.links a {
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
        padding: 3px 0;
    }

    /* "Minha Conta" é redundante no mobile guest (já existe Entrar). Priorizamos Cadastro B2B + Entrar. */
    body .page-wrapper .top-bar-right .header.links > li:first-child {
        display: none !important;
    }

    /* Compare é redundante com navegação móvel; em telas estreitas atrapalha a hierarquia. */
    body .page-wrapper .top-bar-right .header.links .item.link.compare {
        display: none !important;
    }

    /* Linha do nav-toggle mais compacta no mobile para reduzir o "vazio" entre busca e hero. */
    body .page-wrapper .header-control.header-nav > .container > .row {
        min-height: 46px;
        padding-inline: 6px;
    }

    body .page-wrapper .header-control.header-nav .nav-toggle,
    body .page-wrapper .header-control.header-nav .action.nav-toggle {
        width: 40px !important;
        height: 40px !important;
        margin: 3px 0 3px 9px;
    }

    body .page-wrapper .header-control.header-nav {
        border-top: 1px solid rgb(15 23 42 / 4%);
        border-bottom: 1px solid rgb(15 23 42 / 4%);
    }

    /* Corrige overflow estrutural do header principal no mobile (logo + busca + minicart + hotline). */
    body .page-wrapper .header .header_main .container,
    body .page-wrapper .header .header-main .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box;
    }

    body .page-wrapper .header .header_main > .header-main > .container > .row,
    body .page-wrapper .header .header-main > .container > .row,
    body .page-wrapper .header .header_main .container > .row,
    body .page-wrapper .header .header-main .container > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: auto !important;
    }

    body .page-wrapper .header .header_main .wp-header,
    body .page-wrapper .header .header-main .wp-header {
        display: grid !important;
        grid-template-columns: clamp(74px, 22vw, 96px) minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body .page-wrapper .header .header_main .wp-header > [class*="col-"],
    body .page-wrapper .header .header-main .wp-header > [class*="col-"] {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body .page-wrapper .header .header_main .wp-header > [class*="col-"]:first-child,
    body .page-wrapper .header .header-main .wp-header > [class*="col-"]:first-child {
        grid-column: 1;
        width: auto !important;
    }

    body .page-wrapper .header .header_main .wp-header > .top-search,
    body .page-wrapper .header .header-main .wp-header > .top-search {
        grid-column: 2;
        width: auto !important;
        min-width: 0 !important;
    }

    body .page-wrapper .header .wp-header .logo,
    body .page-wrapper .header .wp-header .logo img {
        max-width: 100%;
    }

    body .page-wrapper .header .top-search {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px;
        grid-template-areas: "search cart";
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    body .page-wrapper .header .top-search > .block-search {
        grid-area: search;
        min-width: 0;
        width: 100%;
        order: 0;
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper {
        grid-area: cart;
        width: auto !important;
        max-width: 42px;
        min-width: 0 !important;
        margin-left: 0;
        order: 0;
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper .mini-carts,
    body .page-wrapper .header .top-search > .mini-cart-wrapper .minicart-wrapper {
        min-width: 0 !important;
        width: auto !important;
    }

    /* Home5-specific reinforcement: earlier mobile rules use :is(body.cms-...) and can override generic body selectors. */
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main .wp-header,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header-main .wp-header {
        display: grid !important;
        grid-template-columns: clamp(74px, 22vw, 96px) minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main .wp-header > [class*="col-"],
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header-main .wp-header > [class*="col-"] {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main .wp-header > .top-search,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header-main .wp-header > .top-search {
        grid-column: 2 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px !important;
        grid-template-areas: "search cart" !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search {
        grid-area: search !important;
        order: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .mini-cart-wrapper {
        grid-area: cart !important;
        order: 0 !important;
        margin-left: 0 !important;
        width: auto !important;
        max-width: 42px !important;
        min-width: 0 !important;
        justify-self: end;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .hoteline_header {
        display: none !important;
    }

    /* WhatsApp/hotline ocupa espaço demais nessa linha no mobile; mantemos o botão flutuante. */
    body .page-wrapper .header .top-search > .hoteline_header {
        display: none !important;
    }

    /* Busca: leve respiro para não colar no topo/linha e placeholder mais legível. */
    body .page-wrapper .header .top-search .block-search {
        margin-bottom: 2px;
    }

    body .page-wrapper .header .top-search .block-search input#search,
    body .page-wrapper .header .top-search .block-search input.input-text {
        font-size: 14px;
        line-height: 1.25;
    }

    /* Benefits cards: reinforce 2-col grid after legacy flex/Bootstrap rules (awa-fixes is last layer). */
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .velaServicesInner.velaServicesInner--home5 .velaContent > .rowFlex.rowFlexMargin.flexJustifyCenter {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .velaServicesInner.velaServicesInner--home5 .velaContent > .rowFlex.rowFlexMargin.flexJustifyCenter > [class*="col-"] {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }
}

@media (width <= 420px) {
    body .page-wrapper .top-bar-right .header.links,
    body .page-wrapper .top-bar-right ul.header.links {
        gap: 8px;
    }

    body .page-wrapper .top-bar-right .header.links a {
        font-size: 11px;
    }

    body .page-wrapper .top-bar-right .header.links,
    body .page-wrapper .top-bar-right ul.header.links {
        gap: 4px 10px;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .velaServicesInner.velaServicesInner--home5 .velaContent > .rowFlex.rowFlexMargin.flexJustifyCenter {
        gap: 10px !important;
    }

    /* XS: liberar largura útil para a busca e evitar corte do botão submit. */
    body .page-wrapper .header .header_main .wp-header,
    body .page-wrapper .header .header-main .wp-header {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 8px;
    }

    body .page-wrapper .header .top-search {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 6px;
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper {
        max-width: 34px;
    }

    body .page-wrapper .header .top-search > .block-search .action.search,
    body .page-wrapper .header .top-search > .block-search button[type="submit"] {
        width: 38px !important;
        min-width: 38px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body .page-wrapper .header .top-search .block-search input#search,
    body .page-wrapper .header .top-search .block-search input.input-text {
        padding-left: 12px !important;
        padding-right: 10px !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main .wp-header,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header-main .wp-header {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search {
        grid-template-columns: minmax(0, 1fr) 38px !important;
        gap: 6px !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .mini-cart-wrapper {
        max-width: 38px !important;
    }
}

/* ===========================================
   HOME5 — MOBILE HEADER/TOPBAR ALIGNMENT FINAL (P4)
   Responsabilidade: hotfixes de compat/cascade (Ayo base mobile offsets).
=========================================== */
@media (width <= 767px) {
    /* Topbar mobile compacta e sem overflow horizontal */
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .panel.wrapper,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-top {
        overflow-x: clip;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-bar-right,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-bar-right .top-info,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-bar-right .top-account {
        min-width: 0;
        width: 100%;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-bar-right .header.links,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-bar-right ul.header.links {
        justify-content: center;
        flex-wrap: wrap !important;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: visible;
    }

    /* Header principal: neutraliza offsets absolutos do Ayo (nav-toggle/minicart) e usa grid real */
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header-main {
        overflow-x: clip;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main .container,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header-main .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 12px !important;
        box-sizing: border-box;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main .container > .row,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main > .header-main > .container > .row,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header-main .container > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main .wp-header,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header-main .wp-header {
        display: grid !important;
        grid-template-columns: clamp(72px, 22vw, 94px) minmax(0, 1fr) !important;
        align-items: center;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main .wp-header > [class*="col-"],
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header-main .wp-header > [class*="col-"] {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main .wp-header > [class*="col-"]:first-child,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header-main .wp-header > [class*="col-"]:first-child {
        grid-column: 1;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main .wp-header > .top-search,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header-main .wp-header > .top-search {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .wp-header .logo {
        margin: 0 !important;
        width: 100%;
        min-width: 0;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .wp-header .logo img {
        max-width: 100%;
        height: auto;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 40px !important;
        grid-template-areas: "search cart" !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search {
        grid-area: search !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        order: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search .block-content,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search form#search_mini_form,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search form.minisearch {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search form#search_mini_form,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search form.minisearch {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 40px !important;
        grid-template-areas: "field submit" !important;
        align-items: center !important;
        gap: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search .field.search {
        grid-area: field;
        min-width: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search .field.search .control,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search .field.search input#search,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search .field.search input.input-text {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search .actions {
        grid-area: submit;
        width: 40px !important;
        min-width: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        float: none !important;
        display: flex;
        align-items: stretch;
        justify-content: stretch;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search .action.search,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search button[type="submit"] {
        width: 40px !important;
        min-width: 40px !important;
        height: 100% !important;
        padding-inline: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .mini-cart-wrapper {
        grid-area: cart !important;
        order: 0 !important;
        width: 40px !important;
        max-width: 40px !important;
        min-width: 40px !important;
        margin: 0 !important;
        place-self: center end;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .mini-cart-wrapper,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .mini-cart-wrapper .mini-carts,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .mini-cart-wrapper .minicart-wrapper {
        position: static !important;
        inset: auto !important;
        float: none !important;
        transform: none !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .mini-cart-wrapper .mini-carts,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .mini-cart-wrapper .minicart-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .mini-cart-wrapper .showcart {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .hoteline_header {
        display: none !important;
    }

    /* Linha do hambúrguer: neutraliza offset absoluto do Ayo base */
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control.header-nav > .container,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control.header-nav > .container > .row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control.header-nav .nav-toggle,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-control.header-nav .action.nav-toggle {
        position: relative !important;
        inset: auto !important;
        margin: 3px 0 3px 9px !important;
        transform: none !important;
    }
}

@media (width <= 420px) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main .wp-header,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header-main .wp-header {
        grid-template-columns: 66px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search {
        grid-template-columns: minmax(0, 1fr) 38px !important;
        gap: 6px !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .mini-cart-wrapper {
        width: 38px !important;
        max-width: 38px !important;
        min-width: 38px !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search form#search_mini_form,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search form.minisearch {
        grid-template-columns: minmax(0, 1fr) 38px !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search .actions,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search .action.search,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search button[type="submit"] {
        width: 38px !important;
        min-width: 38px !important;
    }
}

/* Global mobile header stack (Home5): aplica o mesmo padrão estável também em cart/PLP/PDP */
@media (width <= 767px) {
    body .page-wrapper {
        overflow-x: clip;
    }

    body .page-wrapper .header .header_main .container,
    body .page-wrapper .header .header-main .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 12px !important;
        box-sizing: border-box;
    }

    body .page-wrapper .header .header_main .container > .row,
    body .page-wrapper .header .header_main > .header-main > .container > .row,
    body .page-wrapper .header .header-main .container > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    body .page-wrapper .header .header_main .wp-header,
    body .page-wrapper .header .header-main .wp-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    body .page-wrapper .header .header_main .wp-header > [class*="col-"],
    body .page-wrapper .header .header-main .wp-header > [class*="col-"] {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    body .page-wrapper .header .header_main .wp-header > [class*="col-"]:first-child,
    body .page-wrapper .header .header-main .wp-header > [class*="col-"]:first-child {
        display: flex !important;
        justify-content: flex-start;
        align-items: center;
    }

    body .page-wrapper .header .wp-header .logo {
        width: clamp(78px, 22vw, 98px);
        margin: 0 !important;
    }

    body .page-wrapper .header .wp-header .logo img {
        max-width: 100%;
        height: auto;
    }

    body .page-wrapper .header .header_main .wp-header > .top-search,
    body .page-wrapper .header .header-main .wp-header > .top-search {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body .page-wrapper .header .top-search {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 38px !important;
        grid-template-areas: "search cart" !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    body .page-wrapper .header .top-search > .block-search {
        grid-area: search !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        order: 0 !important;
    }

    body .page-wrapper .header .top-search > .block-search .block-content,
    body .page-wrapper .header .top-search > .block-search form#search_mini_form,
    body .page-wrapper .header .top-search > .block-search form.minisearch {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body .page-wrapper .header .top-search > .block-search form#search_mini_form,
    body .page-wrapper .header .top-search > .block-search form.minisearch {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 38px !important;
        align-items: center !important;
        gap: 0 !important;
    }

    body .page-wrapper .header .top-search > .block-search .field.search,
    body .page-wrapper .header .top-search > .block-search .field.search .control,
    body .page-wrapper .header .top-search > .block-search .field.search input#search,
    body .page-wrapper .header .top-search > .block-search .field.search input.input-text {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body .page-wrapper .header .top-search > .block-search .actions {
        width: 38px !important;
        min-width: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        float: none !important;
        display: flex !important;
        align-items: stretch !important;
    }

    body .page-wrapper .header .top-search > .block-search .action.search,
    body .page-wrapper .header .top-search > .block-search button[type="submit"] {
        width: 38px !important;
        min-width: 38px !important;
        padding-inline: 0 !important;
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper {
        grid-area: cart !important;
        width: 38px !important;
        max-width: 38px !important;
        min-width: 38px !important;
        margin: 0 !important;
        place-self: center end !important;
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper,
    body .page-wrapper .header .top-search > .mini-cart-wrapper .mini-carts,
    body .page-wrapper .header .top-search > .mini-cart-wrapper .minicart-wrapper {
        position: static !important;
        inset: auto !important;
        float: none !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper .mini-carts,
    body .page-wrapper .header .top-search > .mini-cart-wrapper .minicart-wrapper,
    body .page-wrapper .header .top-search > .mini-cart-wrapper .showcart {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper .showcart {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
    }

    body .page-wrapper .header .top-search > .hoteline_header {
        display: none !important;
    }

    body .page-wrapper .header-control.header-nav > .container,
    body .page-wrapper .header-control.header-nav > .container > .row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body .page-wrapper .header-control.header-nav .nav-toggle,
    body .page-wrapper .header-control.header-nav .action.nav-toggle {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
    }
}

/* HOME5 mobile overflow final (P5):
   separa visualmente o carrinho da linha da busca (fica no topo direito do wp-header)
   para evitar soma de larguras (input + submit + cart) em telas estreitas. */
@media (width <= 767px) {
    body .page-wrapper .header .header_main .wp-header,
    body .page-wrapper .header .header-main .wp-header {
        position: relative !important;
        padding-right: 46px !important; /* reserva área do carrinho no topo */
    }

    body .page-wrapper .header .top-search {
        position: static !important;
        grid-template-columns: 1fr !important; /* linha da busca sem cart */
        grid-template-areas: "search" !important;
        gap: 0 !important;
        overflow: visible !important;
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper {
        position: absolute !important;
        inset: 0 0 auto auto !important;
        inset: auto !important;
        width: 38px !important;
        max-width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        z-index: 2;
        place-self: auto auto !important;
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper .showcart {
        width: 38px !important;
        height: 38px !important;
    }

    body .page-wrapper .header .top-search > .block-search {
        grid-area: search !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body .page-wrapper .header .top-search > .block-search form#search_mini_form,
    body .page-wrapper .header .top-search > .block-search form.minisearch {
        grid-template-columns: minmax(0, 1fr) 38px !important;
    }

    /* Home trust cards: última camada para impedir bleed lateral residual */
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers > .container,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .velaServicesInner.velaServicesInner--home5,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .velaServicesInner.velaServicesInner--home5 .velaContent,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .velaServicesInner.velaServicesInner--home5 .velaContent > .rowFlex.rowFlexMargin.flexJustifyCenter {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        overflow-x: clip;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .velaServicesInner.velaServicesInner--home5 .velaContent > .rowFlex.rowFlexMargin.flexJustifyCenter > [class*="col-"] {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .velaServicesInner.velaServicesInner--home5 .boxService {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        overflow: hidden;
    }
}

/* HOME5 mobile premium polish (P6): garantir carrinho visível no header e ritmo visual */
@media (width <= 767px) {
    body .page-wrapper .header .header_main .wp-header,
    body .page-wrapper .header .header-main .wp-header {
        padding-right: 46px !important;
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 4px !important;
        right: 0 !important;
        z-index: 25 !important;
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper .mini-carts,
    body .page-wrapper .header .top-search > .mini-cart-wrapper .minicart-wrapper {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper .showcart {
        display: inline-flex !important;
        width: 38px !important;
        height: 38px !important;
        border: 1px solid rgb(183 51 55 / 22%);
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 2px rgb(15 23 42 / 8%);
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper .showcart:hover,
    body .page-wrapper .header .top-search > .mini-cart-wrapper .showcart:focus-visible {
        border-color: rgb(183 51 55 / 40%);
        box-shadow: 0 4px 10px rgb(15 23 42 / 10%);
    }

    /* Evita clipping do grid de benefícios por box model herdado */
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers > .container.top-home-content__trust-offers-grid,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .velaServicesInner.velaServicesInner--home5 .velaContent > .rowFlex.rowFlexMargin.flexJustifyCenter,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .velaServicesInner.velaServicesInner--home5 .velaContent > .rowFlex.rowFlexMargin.flexJustifyCenter > [class*="col-"],
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .top-home-content--trust-and-offers .velaServicesInner.velaServicesInner--home5 .boxService {
        box-sizing: border-box !important;
    }
}

@media (width <= 320px) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main .wp-header,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header-main .wp-header {
        grid-template-columns: 60px minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search {
        grid-template-columns: minmax(0, 1fr) 36px !important;
        gap: 5px !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .mini-cart-wrapper {
        width: 36px !important;
        max-width: 36px !important;
        min-width: 36px !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search form#search_mini_form,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search form.minisearch {
        grid-template-columns: minmax(0, 1fr) 36px !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search .actions,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search .action.search,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search button[type="submit"] {
        width: 36px !important;
        min-width: 36px !important;
    }
}

/* Home5 mobile final: stack logo + search/cart to remove residual overflow from combined row width */
@media (width <= 767px) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) {
        overflow-x: clip;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main .wp-header,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header-main .wp-header {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main .wp-header > [class*="col-"]:first-child,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header-main .wp-header > [class*="col-"]:first-child {
        grid-column: 1 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: flex-start;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .wp-header .logo {
        width: clamp(78px, 22vw, 98px);
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header_main .wp-header > .top-search,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .header-main .wp-header > .top-search {
        grid-column: 1 !important;
        width: 100% !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search {
        grid-template-columns: minmax(0, 1fr) 38px !important;
        gap: 6px !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .mini-cart-wrapper {
        width: 38px !important;
        max-width: 38px !important;
        min-width: 38px !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search form#search_mini_form,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search form.minisearch {
        grid-template-columns: minmax(0, 1fr) 38px !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search .actions,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search .action.search,
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header .top-search > .block-search button[type="submit"] {
        width: 38px !important;
        min-width: 38px !important;
    }
}

/* Mobile global overflow guard (P7):
   Alguns componentes legados (rows/owl/offsets) ainda podem expandir scrollWidth.
   Mantemos scroll horizontal desabilitado no viewport e contemos wrappers principais. */
@media (width <= 767px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body .page-wrapper,
    body .page-wrapper .page-main,
    body .page-wrapper main.page-main,
    body .page-wrapper .columns,
    body .page-wrapper .column.main,
    body .page-wrapper .main,
    body .page-wrapper .main.content,
    body .page-wrapper .header,
    body .page-wrapper .content-top-home {
        max-width: 100%;
        overflow-x: clip;
        box-sizing: border-box;
    }

    body .page-wrapper .owl-stage-outer,
    body .page-wrapper .owl-wrapper-outer,
    body .page-wrapper .owl-carousel,
    body .page-wrapper .wrapper_slider {
        max-width: 100%;
    }

    /* Fallback visual do hambúrguer quando alguma folha posterior neutraliza o pseudo-elemento */
    body .page-wrapper .header-control.header-nav .nav-toggle::before,
    body .page-wrapper .header-control.header-nav .action.nav-toggle::before {
        content: "☰" !important;
        font-family: inherit !important;
        display: inline-block !important;
        line-height: 1 !important;
        font-size: 20px !important;
        color: currentcolor !important;
    }
}

/* Mobile header final stability (P8):
   usa botão de busca sobreposto (mais robusto que grid interno) e
   garante ícones visíveis para carrinho e hambúrguer. */
@media (width <= 767px) {
    body .page-wrapper .header .top-search > .block-search form#search_mini_form,
    body .page-wrapper .header .top-search > .block-search form.minisearch {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-right: 0 !important;
    }

    body .page-wrapper .header .top-search > .block-search .field.search {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-right: 38px !important; /* reserva botão submit */
        box-sizing: border-box !important;
    }

    body .page-wrapper .header .top-search > .block-search .control {
        width: 100% !important;
        min-width: 0 !important;
    }

    body .page-wrapper .header .top-search > .block-search .actions {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        z-index: 2 !important;
    }

    body .page-wrapper .header .top-search > .block-search .action.search,
    body .page-wrapper .header .top-search > .block-search button[type="submit"] {
        width: 38px !important;
        min-width: 38px !important;
        height: 100% !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body .page-wrapper .header .top-search > .block-search .action.search::before,
    body .page-wrapper .header .top-search > .block-search button[type="submit"]::before {
        content: "\f002" !important;
        font-family: FontAwesome, sans-serif !important;
        font-size: 14px !important;
        line-height: 1 !important;
        display: inline-block !important;
    }

    /* Carrinho: ícone explícito para casos em que o markup vem sem ícone visual e contador vazio */
    body .page-wrapper .header .top-search > .mini-cart-wrapper .showcart {
        position: relative !important;
        color: var(--awa-dark) !important;
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper .showcart::before {
        content: "\f290" !important;
        font-family: FontAwesome, sans-serif !important;
        font-size: 16px !important;
        line-height: 1 !important;
        display: inline-block !important;
        color: currentcolor !important;
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper .showcart .counter.qty {
        display: flex !important;
        top: -4px !important;
        right: -4px !important;
        min-width: 16px !important;
        height: 16px !important;
        font-size: 10px !important;
        padding: 0 3px !important;
    }

    body .page-wrapper .header .top-search > .mini-cart-wrapper .showcart .counter.qty.empty {
        display: flex !important; /* mostra 0 em mobile para indicar o carrinho */
    }
}

/* ============================================================
   MOTOROLA-INSPIRED HOMEPAGE POLISH
   Baseado na análise do site empresas.motorola.com.br
   Adicionado: 2026-03-02
   ============================================================ */

/* ----- MP-01: Hero Banner Placeholder Cleanup ----- */
/* Hide "Banner 1 Placeholder" ghost text that overlays the real title */
body .page-wrapper .banner-slider .item-slide .slide-content h1:empty,
body .page-wrapper .banner-slider .item-slide .slide-content h2:empty,
body .page-wrapper .banner-slider .item-slide .slide-text-placeholder,
body .page-wrapper .owl-item .item-slide > div[class*="placeholder"],
body .page-wrapper .banner-slider2 .owl-item .item-slide .slide-content:has(> :empty) {
    display: none !important;
}

/* Fallback hero: improve the grey placeholder to a proper gradient hero */
body .page-wrapper .banner-slider2--fallback {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
    min-height: clamp(280px, 45vh, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    overflow: hidden;
}

body .page-wrapper .banner-slider2--fallback h1,
body .page-wrapper .banner-slider2--fallback h2 {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 700;
    text-align: center;
    text-shadow: 0 2px 8px rgb(0 0 0 / 30%);
    letter-spacing: -0.02em;
}

body .page-wrapper .banner-slider2--fallback p,
body .page-wrapper .banner-slider2--fallback .subtitle {
    color: rgb(255 255 255 / 80%);
    font-size: clamp(0.95rem, 1.6vw, 1.2rem);
    text-align: center;
    margin-top: var(--awa-space-2);
}

/* ----- MP-02: Section Spacing Normalization (Motorola-style) ----- */
/* Normalizar o espaçamento entre seções — Motorola usa ~64-80px consistentes */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-wrapper > .awa-home-section,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-wrapper > .top-home-content,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-wrapper > section {
    margin-block: 0;
    padding-block: clamp(40px, 5vw, 72px);
}

/* Primeiro elemento após o hero não precisa de padding-top extra */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-wrapper > .top-home-content--above-fold {
    padding-block: 0;
    margin-block: 0;
}

/* ----- MP-03: Alternating Section Backgrounds (Motorola Pattern) ----- */
/* Motorola alterna seções brancas e cinza-claro para criar profundidade */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-wrapper > :nth-child(even of .awa-home-section) {
    background-color: var(--awa-bg-surface, #fff);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-wrapper > :nth-child(odd of .awa-home-section) {
    background-color: var(--awa-bg-muted, #f5f7fa);
}

/* Seções de destaque (B2B, trust) mantêm fundo escuro premium */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-home-section--highlight {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    color: #fff;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-home-section--highlight h2,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-home-section--highlight .ayo-home5-label {
    color: #fff;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-home-section--highlight p,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-home-section--highlight .description {
    color: rgb(255 255 255 / 75%);
}

/* ----- MP-04: Section Headings — Motorola-Style ----- */
/* Motorola: label pequeno + título grande + sem linha divisória pesada */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-heading {
    text-align: center;
    margin-bottom: clamp(24px, 3vw, 40px);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-heading .ayo-home5-label {
    display: block;
    font-size: var(--awa-text-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--awa-red, #c62828);
    margin-bottom: var(--awa-space-2, 8px);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-heading h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--awa-dark, #1a1a2e);
    margin: 0;
    line-height: 1.2;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .ayo-home5-heading .ayo-home5-divider {
    display: block;
    width: 48px;
    height: 3px;
    background: var(--awa-red, #c62828);
    border-radius: 2px;
    margin: var(--awa-space-3, 12px) auto 0;
}

/* ----- MP-05: Category Carousel Premium Styling -> MUELLER B2B CLONE ----- */
/* Design idêntico ao Mueller: ícones sem círculo, fundo F1F1F1, borda radius 16px, texto roxo escuro */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-category-carousel__header {
    text-align: center;
    margin-bottom: clamp(20px, 3vw, 40px);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-category-carousel__header h2 {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: 0;
    color: #672146; /* Cor roxa original do Mueller mas adaptável */
    margin: 0 0 8px;
    font-family: 'Ubuntu', 'Inter', sans-serif;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-category-carousel__header p {
    color: #000000;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-category-carousel__track {
    display: flex;
    gap: clamp(12px, 1.5vw, 16px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 10px 0 20px 0;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-category-carousel__track::-webkit-scrollbar {
    display: none;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-category-carousel__item {
    flex: 0 0 auto;
    width: 140px;
    height: 140px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: #F5F0eb; /* Fundo solicitado pelo usuário */
    border: none;
    border-radius: 16px;
    text-decoration: none;
    transition: transform 0.25s ease, background-color 0.2s ease;
    box-shadow: none;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-category-carousel__item:hover {
    background: #ebe1d7; /* Um tom ligeiramente mais escuro para o hover */
    transform: translateY(-4px);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-category-carousel__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* Remove background circular anterior */
    border-radius: 0;
    transition: transform 0.25s ease;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-category-carousel__item:hover .awa-category-carousel__icon {
    background: transparent;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-category-carousel__icon svg {
    width: 44px;
    height: 44px;
    color: #672146; /* Matching text color */
    stroke-width: 1.5px;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-category-carousel__label {
    font-size: 15px;
    font-weight: 500;
    color: #672146;
    text-align: center;
    line-height: 1.2;
}

/* Nav buttons */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-category-carousel__nav {
    display: flex;
    justify-content: center;
    gap: var(--awa-space-2, 8px);
    margin-top: var(--awa-space-4, 16px);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-category-carousel__prev,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-category-carousel__next {
    width: 40px;
    height: 40px;
    border: 1px solid var(--awa-gray-200, #e0e0e0);
    border-radius: 50%;
    background: var(--awa-bg-surface, #fff);
    color: var(--awa-dark, #1a1a2e);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.3rem;
    transition: all 0.2s ease;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-category-carousel__prev:hover,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-category-carousel__next:hover {
    background: var(--awa-red, #c62828);
    border-color: var(--awa-red, #c62828);
    color: #fff;
}

/* ----- MP-06: Benefits Bar Premium ----- */
/* Motorola: barra horizontal com ícones limpos e texto conciso */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 {
    background: var(--awa-bg-surface, #fff);
    border: 1px solid var(--awa-gray-100, #f0f0f0);
    border-radius: var(--awa-radius-lg, 16px);
    padding: clamp(16px, 2vw, 24px);
    box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 .boxService {
    text-align: center;
    transition: transform 0.2s ease;
    border-radius: var(--awa-radius-md, 12px);
    padding: clamp(14px, 1.5vw, 20px);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 .boxService:hover {
    transform: translateY(-2px);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 .boxServiceImage {
    margin-bottom: var(--awa-space-2, 8px);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 .boxServiceImage i,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 .boxServiceImage svg {
    font-size: 2rem;
    color: var(--awa-red, #c62828);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 .serviceTitle {
    font-size: var(--awa-text-sm, 0.875rem);
    font-weight: 700;
    color: var(--awa-dark, #1a1a2e);
    margin-bottom: var(--awa-space-1, 4px);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .velaServicesInner.velaServicesInner--home5 .serviceContent {
    font-size: var(--awa-text-xs, 0.75rem);
    color: var(--awa-gray-500, #6c757d);
    line-height: 1.4;
}

/* ----- MP-07: Floating Buttons Stack Fix ----- */
/* Evitar sobreposição entre WhatsApp, Cotação e Back-to-top */
body .page-wrapper #awa-back-to-top {
    bottom: 160px !important;
    right: 16px !important;
    z-index: 999 !important;
}

body .awa-quote-fab__btn,
body .page-wrapper .awa-quote-fab__btn {
    bottom: 104px !important;
    right: 16px !important;
    z-index: 998 !important;
}

body .awa-whatsapp-fab__link,
body .page-wrapper .awa-whatsapp-fab__link {
    bottom: 24px !important;
    right: 16px !important;
    z-index: 997 !important;
}

/* No mobile, the stack needs tighter spacing */
@media (width <= 767px) {
    body .page-wrapper #awa-back-to-top {
        bottom: 140px !important;
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
    }

    body .awa-quote-fab__btn,
    body .page-wrapper .awa-quote-fab__btn {
        bottom: 88px !important;
        right: 12px !important;
    }

    body .awa-whatsapp-fab__link,
    body .page-wrapper .awa-whatsapp-fab__link {
        bottom: 16px !important;
        right: 12px !important;
    }
}

/* ----- MP-08: Nav Badges Refinement ----- */
/* Substituir o estilo "bubble" antigo por badges mais clean como Motorola */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--awa-text-xs, 0.75rem);
    letter-spacing: 0.06em;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* "QUENTE!OFERTAS" badge — estilo mais limpo */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > a[style*="background"],
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .header-nav .menu_primary :where(.navigation.custommenu.main-nav) > ul > li.hot-deals > a {
    background: transparent !important;
    color: var(--awa-red, #c62828) !important;
    font-weight: 700;
    border-bottom: 2px solid var(--awa-red, #c62828);
    border-radius: 0;
}

/* ----- MP-09: Product Card "Login for Price" CTA Enhancement ----- */
/* Motorola usa "Cadastre-se e veja o preço" — versão premium do CTA */
body .page-wrapper .product-item .price-box .awa-b2b-gate-msg,
body .page-wrapper .product-item .price-box .awa-price-login-msg,
body .page-wrapper .product-item .b2b-login-prompt {
    display: inline-flex;
    align-items: center;
    gap: var(--awa-space-1, 4px);
    padding: var(--awa-space-2, 8px) var(--awa-space-3, 12px);
    background: var(--awa-bg-muted, #f5f7fa);
    border: 1px solid var(--awa-gray-200, #e0e0e0);
    border-radius: var(--awa-radius-sm, 8px);
    font-size: var(--awa-text-xs, 0.75rem);
    font-weight: 600;
    color: var(--awa-red, #c62828);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

body .page-wrapper .product-item .price-box .awa-b2b-gate-msg:hover,
body .page-wrapper .product-item .price-box .awa-price-login-msg:hover,
body .page-wrapper .product-item .b2b-login-prompt:hover {
    background: var(--awa-red, #c62828);
    color: #fff;
    border-color: var(--awa-red, #c62828);
}

/* Product cards: skeleton placeholder for missing images */
body .page-wrapper .product-item .product-image-wrapper img[src=""]:not([data-loaded]),
body .page-wrapper .product-item .product-image-wrapper img:not([src]):not([data-loaded]) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    min-height: 200px;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----- MP-10: Sticky Header Compact on Scroll ----- */
/* Motorola: ao scrollar, header encolhe. Baseado na classe .scroll-to-fixed-fixed do tema */
body .page-wrapper .header-nav.scroll-to-fixed-fixed {
    box-shadow: 0 2px 12px rgb(0 0 0 / 8%) !important;
    backdrop-filter: blur(10px);
    background: rgb(255 255 255 / 97%) !important;
}

body .page-wrapper .header-nav.scroll-to-fixed-fixed .menu_primary :where(.navigation.custommenu.main-nav) > ul > li > a {
    padding-block: var(--awa-space-2, 8px);
    font-size: var(--awa-text-2xs, 0.69rem);
}

/* Header principal compacto no scroll */
body .page-wrapper .header.scroll-to-fixed-fixed {
    box-shadow: 0 1px 4px rgb(0 0 0 / 6%);
    padding-block: var(--awa-space-1, 4px) !important;
}

body .page-wrapper .header.scroll-to-fixed-fixed .logo img {
    max-height: 36px !important;
    transition: max-height 0.3s ease;
}

/* ----- MP-11: Notification Bar Cleanup ----- */
/* Motorola: barra fina sutil no topo. Melhorar o ticker */
body .page-wrapper .block_notification,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .block_notification {
    background: var(--awa-dark, #1a1a2e) !important;
    font-size: var(--awa-text-xs, 0.75rem);
    letter-spacing: 0.03em;
    padding: var(--awa-space-1-5, 6px) 0 !important;
}

/* ----- MP-12: Product Grid Cards Polish ----- */
/* Motorola product cards: clean, minimal borders, shadow on hover */
body .page-wrapper .product-item-info {
    border: 1px solid var(--awa-gray-100, #f0f0f0);
    border-radius: var(--awa-radius-md, 12px);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    overflow: hidden;
    background: var(--awa-bg-surface, #fff);
}

body .page-wrapper .product-item-info:hover {
    box-shadow: 0 8px 32px rgb(0 0 0 / 8%);
    transform: translateY(-2px);
    border-color: var(--awa-gray-200, #e0e0e0);
}

body .page-wrapper .product-item .product-item-details {
    padding: clamp(10px, 1.2vw, 16px);
}

body .page-wrapper .product-item .product-item-name a {
    font-size: var(--awa-text-sm, 0.875rem);
    font-weight: 600;
    color: var(--awa-dark, #1a1a2e);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body .page-wrapper .product-item .product-item-name a:hover {
    color: var(--awa-red, #c62828);
}

/* ================================================
   10. IMAGE PLACEHOLDER REFINEMENT (B2B)
   Substituir a caixa cinza vazia quando não há foto
   ================================================ */
.product-image-photo[src*="placeholder"],
.product-image-photo[src*="small_image"] {
    position: relative;
    background-color: transparent !important;
}

/* Criar um efeito sofisticado de wireframe para produtos sem imagem */
.product-image-photo[src*="placeholder"] {
    opacity: 0.15;
    filter: sepia(100%) hue-rotate(320deg) saturate(300%) contrast(150%);
    transition: all 0.3s ease;
}

.product-item:hover .product-image-photo[src*="placeholder"] {
    opacity: 0.25;
}

} /* F2-02: fecha @layer awa-fixes */


/* -------------------------------------------------------------------------
   Mosaic 4-Banner Grid (Trust Offers Banner Section)
   ------------------------------------------------------------------------- */
.awa-banners-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.awa-banners-mosaic .awa-banner-item a {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.awa-banners-mosaic .awa-banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.awa-banners-mosaic .awa-banner-item:hover img {
    transform: scale(1.03);
}

@media (min-width: 768px) {
    .awa-banners-mosaic {
        grid-template-columns: 8fr 6fr 6fr;
        grid-template-rows: auto auto;
        gap: 20px;
    }

    .awa-banner-tall {
        grid-area: 1 / 1 / 3 / 2;
    }

    .awa-banner-wide {
        grid-area: 1 / 2 / 2 / 4;
    }

    .awa-banner-square:nth-of-type(3) {
        grid-area: 2 / 2 / 3 / 3;
    }

    .awa-banner-square:nth-of-type(4) {
        grid-area: 2 / 3 / 3 / 4;
    }
}