/* AWA Home Gate Visual Bundle — §1-§25 layout/interaction (split 2026-06-01) */
/**
 * AWA Motos — Homepage Visual Hierarchy & UX Refinements
 * 2026-05-18 — Layout optimization phase
 *
 * Objetivos:
 * 1. Diferenciar seções com backgrounds alternados
 * 2. Destacar Mais Vendidos como seção principal
 * 3. Melhorar transições e feedback de interação
 * 4. Garantir contraste WCAG AA em todos os textos
 * 5. Polir a seção B2B com visual premium
 * 6. Social proof com métricas de negócio (Trust & Authority)
 *
 * Tokens: usa --awa-* de awa-core-variables.unmin.css
 */


/* ============================================================
   §1 — SECTION RHYTHM: backgrounds alternados
   Cria ritmo visual que ajuda o usuário a distinguir seções.
   Usa :nth-child para alternar sem classes extras no HTML.
   ============================================================ */

.ayo-home5-wrapper :is(.awa-home-section, .ayo-home5-section):nth-child(even):not(.top-home-content--above-fold),
.ayo-home5-wrapper :is(.awa-home-section, .ayo-home5-section):nth-child(odd):not(.top-home-content--above-fold) {
    background-color: var(--awa-color-white, #ffffff);
}

/* Espaçamento vertical: ritmo por tier (padding definido em layout-r2 / body-end) */
.ayo-home5-wrapper :is(.awa-home-section, .ayo-home5-section):not(.top-home-content--above-fold) {
    padding-top: 0;
    padding-bottom: 0;
}

/* Home Clean: sem separador entre seções */
.ayo-home5-wrapper :is(.awa-home-section, .ayo-home5-section) + :is(.awa-home-section, .ayo-home5-section) {
    border-top: 0;
}

/* ============================================================
   §2 — MAIS VENDIDOS: destaque como seção principal
   Background soft, cards maiores, sombra destacada.
   ============================================================ */

:is(.awa-home-section, .ayo-home5-section)[aria-label*="Mais Vendidos"],
:is(.awa-home-section, .ayo-home5-section)[aria-label*="Mais\x20Vendidos"] {
    background: var(--awa-color-white, #fff);
    background-image: none;
    padding-top: clamp(24px, 2vw + 12px, 36px);
    padding-bottom: clamp(24px, 2vw + 12px, 36px);
    border-top: 0;
    box-shadow: none;
}

:is(.awa-home-section, .ayo-home5-section)[aria-label*="Mais Vendidos"] :is(.awa-section-header__title, .awa-shelf__title) {
    font-size: var(--awa-text-fluid-3xl, clamp(28px, calc(25.33px + 0.833vw), 36px));
    font-weight: var(--awa-weight-extrabold, 800);
    letter-spacing: var(--awa-tracking-tighter, -0.02em);
}

@media (min-width: 768px) {
    html body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
        .page-wrapper
        .top-home-content.awa-home-section[aria-label*="Mais Vendidos"]
        :is(h2.awa-section-header__title, .awa-shelf__title) {
        font-size: clamp(28px, calc(22px + 1.1vw), 36px) !important;
        font-weight: 800 !important;
    }
}

/* ============================================================
   §3 — SECTION HEADERS: visual mais expressivo
   Eyebrow + título com tipografia hierárquica.
   ============================================================ */

.awa-section-header {
    margin-bottom: var(--awa-space-6, 24px);
}

.awa-section-header__eyebrow,
.awa-section-header__label {
    font-size: var(--awa-text-xs, 12px);
    font-weight: var(--awa-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: var(--awa-tracking-widest, 0.08em);
    color: var(--awa-color-primary, #b73337);
    margin-bottom: var(--awa-space-1, 4px);
    display: block;
}

.awa-section-header__subtitle {
    margin: 0;
    font-size: var(--awa-text-base, 14px);
    font-weight: var(--awa-weight-normal, 400);
    line-height: var(--awa-leading-comfortable, 1.45);
    color: var(--awa-neutral-600, #475569);
    max-width: 42ch;
}

.awa-section-header__left {
    display: flex;
    flex-direction: column;
    gap: var(--awa-space-1, 4px);
    min-width: 0;
    flex: 1 1 auto;
}

.awa-section-header--featured {
    margin-bottom: var(--awa-space-7, 28px);
    padding-bottom: 0;
    border-bottom: 0;
}

.awa-section-header--standard {
    margin-bottom: var(--awa-space-5, 20px);
    padding-bottom: 0;
    border-bottom: 0;
}

.awa-section-header--compact {
    margin-bottom: var(--awa-space-4, 16px);
    align-items: center;
}

.awa-section-header--compact .awa-section-header__title {
    font-size: clamp(1.125rem, 1rem + 0.35vw, 1.375rem);
    font-weight: var(--awa-weight-bold, 700);
}

.awa-section-header--compact .awa-section-header__subtitle {
    font-size: var(--awa-text-sm, 13px);
    max-width: 36ch;
}

.awa-section-header__title {
    font-size: clamp(1.25rem, 1.06rem + 0.5vw, 1.625rem);
    font-weight: var(--awa-weight-bold, 700);
    color: var(--awa-neutral-800, #1e293b);
    line-height: var(--awa-leading-compact, 1.2);
    letter-spacing: var(--awa-tracking-tight, -0.01em);
    margin: 0;
}

/* Link "Ver todos" no header */
.awa-section-header__link {
    font-size: var(--awa-font-size-14, 14px);
    font-weight: var(--awa-weight-medium, 500);
    color: var(--awa-color-primary, #b73337);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--awa-space-1, 4px);
    cursor: pointer;
    transition: color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .awa-section-header__link:hover {
        color: var(--awa-color-primary-dark, #8b1a1e);
    }

    .awa-section-header__link:hover svg {
        transform: translateX(2px);
    }
}

.awa-section-header__link svg {
    transition: transform 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .awa-section-header__link svg {
        transition: none;
    }
}


/* ============================================================
   §5 — BENEFITS BAR: melhorias sutis
   ============================================================ */

.awa-benefits-bar {
    background: var(--awa-neutral-50, #f8fafc);
    border-bottom: 1px solid var(--awa-neutral-100, #f1f5f9);
    padding: var(--awa-space-3, 12px) 0;
}

.awa-benefit-item {
    transition: opacity 200ms ease;
}

.awa-benefit-title {
    font-weight: var(--awa-weight-semibold, 600);
    color: var(--awa-neutral-800, #1e293b);
}

.awa-benefit-desc {
    color: var(--awa-neutral-500, #64748b);
    font-size: var(--awa-font-size-12, 12px);
}

/* ============================================================
   §6 — PRODUCT CARD HOVER: feedback interativo
   ============================================================ */

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .ayo-home5-wrapper .product-item-info {
    transition: box-shadow 200ms ease, border-color 200ms ease;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .ayo-home5-wrapper .product-item-info:hover {
        box-shadow: var(--awa-shadow-card-hover, 0 12px 32px rgba(17, 24, 39, .10));
    }
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .ayo-home5-wrapper .product-item-info:focus-within {
    outline: 2px solid var(--awa-color-primary, #b73337);
    outline-offset: 2px;
}

/* ============================================================
   §7 — TRUST ZONE: seção de confiança/FAQ
   ============================================================ */

.awa-home-trust-zone {
    background: var(--awa-neutral-50, #f8fafc);
    border-top: 1px solid var(--awa-neutral-200, #e2e8f0);
}

/* ============================================================
   §8 — SCROLL REVEAL: suavizar entrada das seções
   Complementa awa-scroll-reveal.js existente.
   JS adiciona body.awa-scroll-ready + .awa-revealed nas seções.
   ============================================================ */

.awa-home-section {
    opacity: 1;
}

/* scroll-reveal hide removido 2026-05-24 — branco ao scroll; animação via .awa-revealed em super-global */

/* prefers-reduced-motion: desativa animações */
@media (prefers-reduced-motion: reduce) {
    body.awa-scroll-ready .ayo-home5-wrapper .awa-home-section:not(.awa-revealed),
    body.awa-scroll-ready .ayo-home5-wrapper .awa-home-section.awa-revealed {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .awa-benefit-item:hover,
    .ayo-home5-wrapper .product-item-info:hover {
        transform: none;
    }
}

/* ============================================================
   §9 — MOBILE: ajustes responsivos
   ============================================================ */

@media (max-width: 767px) {
    .ayo-home5-wrapper :is(.awa-home-section, .ayo-home5-section):not(.top-home-content--above-fold) {
        padding-top: 0;
        padding-bottom: 0;
    }

    .awa-b2b-promo {
        padding: var(--awa-space-6, 24px);
    }

    .awa-b2b-promo__benefits {
        grid-template-columns: 1fr;
    }

    .awa-b2b-promo__cta {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   §10 — INTERACTIVE CURSOR: cursor-pointer em tudo clicável
   UX guideline: "Add cursor-pointer to all clickable elements"
   ============================================================ */

.ayo-home5-wrapper a,
.ayo-home5-wrapper button,
.ayo-home5-wrapper [role="button"],
.ayo-home5-wrapper .product-item-info,
.ayo-home5-wrapper .awa-category-carousel__item,
.ayo-home5-wrapper .awa-section-header__link,
.awa-b2b-promo__cta,
.awa-benefit-item {
    cursor: pointer;
}

/* ============================================================
   §11 — NOTIFICATION TICKER: substituir <marquee> por CSS
   UX guideline: "Infinite animations for loading indicators only"
   <marquee> é HTML obsoleto. CSS animation é controlável e
   respeita prefers-reduced-motion.
   ============================================================ */

.block_notification {
    overflow: hidden;
    background: var(--awa-neutral-50, #f8fafc);
    border-top: 1px solid var(--awa-neutral-100, #f1f5f9);
    border-bottom: 1px solid var(--awa-neutral-100, #f1f5f9);
    padding: var(--awa-space-2, 8px) 0;
}

/* Esconde o <marquee> obsoleto e usa CSS scroll */
.block_notification marquee {
    animation: awa-ticker-scroll 30s linear infinite;
    display: inline-block;
    white-space: nowrap;
}

.block_notification marquee:hover {
    animation-play-state: paused;
}

@keyframes awa-ticker-scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .block_notification marquee {
        animation: none;
        white-space: normal;
    }
}

/* ============================================================
   §12 — CATEGORY CAROUSEL: hover sem layout shift (flex-grid-flow)
   UX: transição em cor/borda/sombra — sem translateY (ui-ux-pro-max)
   ============================================================ */

.awa-category-carousel__item {
    transition: box-shadow 200ms ease, border-color 200ms ease, background-color 200ms ease;
    border: 1px solid var(--awa-neutral-100, #f1f5f9);
    border-radius: var(--awa-radius-lg, 16px);
}

@media (hover: hover) and (pointer: fine) {
    .awa-category-carousel__item:hover {
        box-shadow: var(--awa-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.10));
        border-color: var(--awa-color-primary, #b73337);
        background-color: var(--awa-neutral-50, #f8fafc);
    }

    .awa-category-carousel__item:hover .awa-category-carousel__label {
        color: var(--awa-color-primary, #b73337);
    }
}

.awa-category-carousel__item:focus-visible {
    outline: 2px solid var(--awa-color-primary, #b73337);
    outline-offset: 3px;
}

.awa-category-carousel__icon {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
}

.awa-category-carousel__icon img,
.awa-category-carousel__icon picture {
    display: block;
    object-fit: contain;
}

.awa-category-carousel__label {
    font-weight: var(--awa-weight-medium, 500);
    color: var(--awa-neutral-700, #334155);
    transition: color 200ms ease;
}

.awa-category-carousel__header p {
    color: var(--awa-neutral-600, #475569);
}

/* Carousel nav buttons */
.awa-category-carousel__prev,
.awa-category-carousel__next {
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .awa-category-carousel__prev:hover,
    .awa-category-carousel__next:hover {
        background: var(--awa-color-primary, #b73337);
        color: var(--awa-color-white, #ffffff);
    }
}

/* Dots: alvo 44px com indicador visual interno (::before) */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .page-wrapper .awa-category-carousel__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--awa-space-1, 4px);
    margin-block-start: var(--awa-space-4, 16px);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .page-wrapper .awa-category-carousel__dot {
    display: inline-grid;
    place-items: center;
    min-block-size: var(--awa-touch-target, 44px);
    min-inline-size: var(--awa-touch-target, 44px);
    width: auto !important;
    height: auto !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    cursor: pointer;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .page-wrapper .awa-category-carousel__dot::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--awa-neutral-300, #cbd5e1);
    transition: width 200ms ease, background-color 200ms ease;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .page-wrapper .awa-category-carousel__dot.active::before,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .page-wrapper .awa-category-carousel__dot[aria-current="page"]::before {
    width: 28px;
    background: var(--awa-color-primary, #b73337);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .page-wrapper .awa-category-carousel__dot:focus-visible {
    outline: 2px solid var(--awa-color-primary, #b73337);
    outline-offset: 2px;
}

/* ============================================================
   §13 — WCAG AA CONTRAST: contraste mínimo em textos mutados
   UX guideline: "Light mode text contrast 4.5:1 minimum"
   ============================================================ */

/* Garante que textos "muted" nunca fiquem abaixo de #475569 (4.56:1 sobre branco) */
.ayo-home5-wrapper .product-item-details .price-box .price {
    color: var(--awa-neutral-800, #1e293b);
    font-weight: var(--awa-weight-bold, 700);
}

/* "Adicionar ao Carrinho" buttons: contraste garantido */
.ayo-home5-wrapper .product-item-info .action.tocart {
    transition: background 200ms ease, box-shadow 200ms ease;
}

.ayo-home5-wrapper .product-item-info .action.tocart:hover {
    box-shadow: var(--awa-shadow-brand, 0 4px 16px rgba(183, 51, 55, 0.25));
}

/* ============================================================
   §14 — LAZY LOAD PLACEHOLDER: skeleton durante carregamento
   UX guideline: "Lazy load below-fold images and content"
   ============================================================ */

.ayo-home5-wrapper img[loading="lazy"]:not([src]) {
    background: linear-gradient(
        90deg,
        var(--awa-neutral-100, #f1f5f9) 25%,
        var(--awa-neutral-200, #e2e8f0) 50%,
        var(--awa-neutral-100, #f1f5f9) 75%
    );
    background-size: 200% 100%;
    animation: awa-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes awa-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ayo-home5-wrapper img[loading="lazy"]:not([src]) {
        animation: none;
        background: var(--awa-neutral-100, #f1f5f9);
    }

    .awa-category-carousel__item,
    .awa-category-carousel__dot::before {
        transition: none !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
      .page-wrapper .wrapper_slider .swiper-pagination .swiper-pagination-bullet::before {
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================
   §12b — BENEFITS BAR: flex cluster + ícones 1:1 + contraste
   ============================================================ */

.awa-benefits-bar .awa-benefits-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--awa-space-md, 24px);
}

.awa-benefits-bar .awa-benefit-item {
    display: flex;
    align-items: center;
    gap: var(--awa-space-3, 12px);
    flex: 1 1 min(220px, 100%);
    min-block-size: var(--awa-touch-target, 44px);
}

.awa-benefits-bar .awa-benefit-icon {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    aspect-ratio: 1;
    width: 2rem;
    block-size: 2rem;
}

.awa-benefits-bar .awa-benefit-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .page-wrapper .awa-benefits-bar .awa-benefit-title {
    color: var(--awa-neutral-800, #1e293b) !important;
    font-size: var(--awa-font-sm, 13px) !important;
    font-weight: var(--awa-weight-semibold, 600) !important;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .page-wrapper .awa-benefits-bar .awa-benefit-desc {
    color: var(--awa-neutral-600, #475569) !important;
    font-size: max(12px, var(--awa-font-xs, 0.75rem)) !important;
}

/* ============================================================
   §12c — HERO SLIDER: bullets 44px + foco (já parcial em visual-bugfix)
   ============================================================ */

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .page-wrapper .top-home-content--above-fold .wrapper_slider .swiper-pagination .swiper-pagination-bullet:focus-visible {
    outline: 2px solid var(--awa-color-white, #ffffff);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
      .page-wrapper .wrapper_slider .swiper-pagination .swiper-pagination-bullet:hover::before {
        transform: scale(1.15);
    }
}

/* ============================================================
   §15 — SECTION HEADER: layout flex para alinhamento
   Alinha título à esquerda e "Ver todos" à direita.
   ============================================================ */

.awa-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--awa-space-2, 8px);
}

/* ============================================================
   §16 — PRINT: esconder elementos decorativos na impressão
   ============================================================ */

@media print {
    .awa-benefits-bar,
    .block_notification,
    .awa-category-carousel__prev,
    .awa-category-carousel__next,
    .awa-category-carousel__dots {
        display: none !important;
    }

    .ayo-home5-wrapper .ayo-home5-section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ============================================================
   §17 — TOUCH TARGETS: mínimo 44x44px no mobile
   UX guideline: "Minimum 44x44px touch targets"
   UX guideline: "Minimum 8px gap between touch targets"
   ============================================================ */

@media (max-width: 767px) {
    /* Botões de ação nos cards */
    .ayo-home5-wrapper .action.tocart,
    .ayo-home5-wrapper .action.towishlist,
    .ayo-home5-wrapper .action.tocompare {
        min-height: var(--awa-touch-target, 44px);
        min-width: var(--awa-touch-target, 44px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Carousel navigation arrows */
    .awa-category-carousel__prev,
    .awa-category-carousel__next,
    .owl-nav .owl-prev,
    .owl-nav .owl-next,
    .swiper-button-prev,
    .swiper-button-next {
        min-height: var(--awa-touch-target, 44px);
        min-width: var(--awa-touch-target, 44px);
    }

    /* Links nos cards */
    .ayo-home5-wrapper .product-item-link {
        padding: var(--awa-space-1, 4px) 0;
    }

    /* Benefits bar items */
    .awa-benefit-item {
        min-height: var(--awa-touch-target, 44px);
        padding: var(--awa-space-2, 8px);
    }

    /* Social proof stats */
    .awa-social-proof-stat {
        min-height: var(--awa-touch-target, 44px);
    }

    /* Gap between adjacent targets */
    .ayo-home5-wrapper .add-to-links li {
        margin-bottom: var(--awa-space-2, 8px);
    }
}

/* ============================================================
   §18 — SEARCH FIELD: polish UX
   UX guideline: "Show predictions as user types"
   UX guideline: "Form controls need labels or aria-label"
   ============================================================ */

/* Placeholder com contraste adequado */
.ayo-home5-wrapper #search::placeholder,
.awa-site-header #search::placeholder {
    color: var(--awa-neutral-500, #64748b);
    opacity: 1; /* Firefox fix */
}

/* Focus state: highlight claro */
.ayo-home5-wrapper #search:focus,
.awa-site-header #search:focus {
    border-color: var(--awa-color-primary, #b73337);
    box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.12);
}

/* Autocomplete dropdown: polish */
.awa-site-header .searchautocomplete__autocomplete,
#search_autocomplete {
    border-radius: 0 0 var(--awa-radius-md, 8px) var(--awa-radius-md, 8px);
    box-shadow: var(--awa-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
    border: 1px solid var(--awa-neutral-200, #e2e8f0);
    overflow: hidden;
}

/* ============================================================
   §19 — SKIP TO CONTENT: acessibilidade keyboard
   UX guideline: "Tab order matches visual order"
   ============================================================ */

.awa-skip-to-content {
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--awa-z-toast, 400);
    background: var(--awa-color-primary, #b73337);
    color: var(--awa-color-white, #ffffff);
    padding: var(--awa-space-3, 12px) var(--awa-space-6, 24px);
    border-radius: 0 0 var(--awa-radius-md, 8px) var(--awa-radius-md, 8px);
    font-weight: var(--awa-weight-semibold, 600);
    font-size: var(--awa-font-base, 14px);
    text-decoration: none;
    transition: top 200ms ease;
}

.awa-skip-to-content:focus {
    top: 0;
    outline: 2px solid var(--awa-color-white, #ffffff);
    outline-offset: -4px;
}


/* ============================================================
   §21 — B2B PRICE PROMPT: compact badge style
   UX guideline: "Color is not the only indicator"
   Transforma "Faça login para ver preços" de texto plano em
   badge discreto com ícone de cadeado. Menos repetitivo,
   mais profissional.
   ============================================================ */

.ayo-home5-wrapper .b2b-login-to-see-price {
    display: flex;
    align-items: center;
    gap: var(--awa-space-1, 4px);
    padding: var(--awa-space-1, 4px) var(--awa-space-2, 8px);
    background: var(--awa-neutral-50, #f8fafc);
    border: 1px solid var(--awa-neutral-200, #e2e8f0);
    border-radius: var(--awa-radius-md, 8px);
    max-width: fit-content;
}

.ayo-home5-wrapper .b2b-login-to-see-price .price-label {
    font-size: var(--awa-font-xs, 11px);
    color: var(--awa-neutral-600, #475569);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: var(--awa-space-1, 4px);
}

/* Ícone de cadeado via CSS ::before */
.ayo-home5-wrapper .b2b-login-to-see-price .price-label::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    flex-shrink: 0;
    opacity: 0.6;
}

.ayo-home5-wrapper .b2b-login-to-see-price a {
    color: var(--awa-color-primary, #b73337);
    font-weight: var(--awa-weight-semibold, 600);
    text-decoration: none;
    transition: color 200ms ease;
}

.ayo-home5-wrapper .b2b-login-to-see-price a:hover {
    color: var(--awa-color-primary-dark, #8b1a1e);
    text-decoration: underline;
}

/* ============================================================
   §22 — HERO OVERLAY: value proposition
   Para futuro uso no slider: headline + CTA overlay.
   ============================================================ */

.awa-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        to top,
        rgba(15, 23, 42, 0.85) 0%,
        rgba(15, 23, 42, 0.4) 60%,
        transparent 100%
    );
    padding: var(--awa-space-8, 32px) var(--awa-container-pad, clamp(16px, 3vw, 24px));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 180px;
    pointer-events: none;
}

.awa-hero-overlay > * {
    pointer-events: auto;
}

.awa-hero-overlay__headline {
    font-size: clamp(20px, 3vw, 36px);
    font-weight: var(--awa-weight-extrabold, 800);
    color: var(--awa-color-white, #ffffff);
    line-height: var(--awa-line-height-tight, 1.2);
    margin: 0 0 var(--awa-space-2, 8px);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    max-width: 600px;
}

.awa-hero-overlay__sub {
    font-size: var(--awa-font-md, 15px);
    color: var(--awa-neutral-200, #e2e8f0);
    margin: 0 0 var(--awa-space-4, 16px);
    max-width: 480px;
}

.awa-hero-overlay__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--awa-space-2, 8px);
    padding-block: var(--awa-space-3, 12px);
    padding-inline: var(--awa-space-7, 28px);
    min-height: var(--awa-touch-target, 44px);
    background: var(--awa-color-primary, #b73337);
    color: var(--awa-color-white, #ffffff);
    border-radius: var(--awa-radius-md, 8px);
    font-size: var(--awa-font-md, 15px);
    font-weight: var(--awa-weight-semibold, 600);
    text-decoration: none;
    transition: background 200ms ease, box-shadow 200ms ease;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .awa-hero-overlay__cta:hover {
        background: var(--awa-color-primary-dark, #8b1a1e);
        box-shadow: 0 8px 24px rgba(183, 51, 55, 0.3);
        color: var(--awa-color-white, #ffffff);
        text-decoration: none;
    }
}

.awa-hero-overlay__cta:focus-visible {
    outline: 2px solid var(--awa-color-white, #ffffff);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .awa-hero-overlay {
        padding: var(--awa-space-4, 16px);
        min-height: 120px;
    }

    .awa-hero-overlay__cta {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   §24 — PRODUCT CAROUSELS (Owl / Swiper): hover estável + a11y
   flex-grid-flow: sem translateY/scale nos cards; setas 44px.
   ============================================================ */

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .ayo-home5-wrapper :is(
    .item-product,
    .product-item-info
) {
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .ayo-home5-wrapper :is(
        .item-product:hover,
        .product-item-info:hover
    ) {
        transform: none !important;
    }

    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .ayo-home5-wrapper :is(
        .item-product:hover .product-image-photo,
        .item-product:hover .product-thumb img,
        .product-item-info:hover .product-image-photo,
        .product-item-info:hover .product-thumb img
    ) {
        transform: none !important;
    }
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-carousel-section :is(.owl-prev, .owl-next) {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-block-size: var(--awa-touch-target, 44px);
    min-inline-size: var(--awa-touch-target, 44px);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .awa-carousel-section :is(.owl-prev, .owl-next):focus-visible {
    outline: 2px solid var(--awa-color-primary, #b73337);
    outline-offset: 2px;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .products-swiper :is(.swiper-button-prev, .swiper-button-next) {
    cursor: pointer;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .products-swiper :is(.swiper-button-prev, .swiper-button-next):focus-visible {
    outline: 2px solid var(--awa-color-primary, #b73337);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .ayo-home5-wrapper :is(
        .product-item-info,
        .item-product,
        .awa-carousel-section .owl-prev,
        .awa-carousel-section .owl-next
    ) {
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   §25 — TYPOGRAPHY HIERARCHY (ui-ux-pro-max)
   Escala modular canônica: eyebrow → título → subtítulo → corpo.
   Cards: nome (semibold) > preço (bold) > metadados (caption).
   ============================================================ */

/* Category carousel: alinhar com section headers */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .page-wrapper .awa-category-carousel__header:not(.awa-section-header) h2 {
    font-size: var(--awa-text-fluid-2xl, clamp(24px, calc(21.33px + 0.833vw), 32px));
    font-weight: var(--awa-weight-bold, 700);
    line-height: var(--awa-leading-compact, 1.2);
    letter-spacing: var(--awa-tracking-tight, -0.01em);
    color: var(--awa-neutral-800, #1e293b);
    margin: 0;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .page-wrapper .awa-category-carousel__header:not(.awa-section-header) p {
    font-size: var(--awa-text-base, 14px);
    font-weight: var(--awa-weight-normal, 400);
    line-height: var(--awa-leading-comfortable, 1.45);
    color: var(--awa-neutral-600, #475569);
    margin: var(--awa-space-1, 4px) 0 0;
    max-width: 48ch;
}

/* Product cards nos carrosséis da home */
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .ayo-home5-wrapper .product-item-name,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .ayo-home5-wrapper .product-item-name a,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .ayo-home5-wrapper .product-item-link {
    font-size: var(--awa-text-sm, 13px);
    font-weight: var(--awa-weight-semibold, 600);
    line-height: var(--awa-leading-snug, 1.25);
    color: var(--awa-neutral-800, #1e293b);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .ayo-home5-wrapper .product-item-name a:hover,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .ayo-home5-wrapper .product-item-link:hover {
    color: var(--awa-color-primary, #b73337);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .ayo-home5-wrapper .price-box .price,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
  .ayo-home5-wrapper .product-item-info .price {
    font-size: var(--awa-text-lg, 18px);
    font-weight: var(--awa-weight-bold, 700);
    line-height: var(--awa-leading-none, 1);
    letter-spacing: var(--awa-tracking-tight, -0.01em);
    font-variant-numeric: tabular-nums;
    color: var(--awa-neutral-900, #0f172a);
}


@media (max-width: 767px) {
    .awa-section-header__title {
        font-size: var(--awa-text-fluid-xl, clamp(18px, calc(17.33px + 0.208vw), 20px));
    }

    :is(.awa-home-section, .ayo-home5-section)[aria-label*="Mais Vendidos"] .awa-section-header__title {
        font-size: var(--awa-text-fluid-2xl, clamp(24px, calc(21.33px + 0.833vw), 32px));
    }
}
/* ===== awa-audit-bundle.css ===== */
/* awa-audit-bundle.css — Merged audit CSS (consolidation 2026-05-09)
 * Consolidates: awa-visual-audit-final (59KB) + awa-visual-consistency (51KB)
 *             + awa-header-audit-fix (5KB) + awa-deep-audit (44KB) = 159KB
 * Loaded async (media=print onload) — replaces 4 HTTP requests with 1.
 */

/* ===== awa-visual-audit-final-2026-05-03.css (59KB) ===== */

/* Final visual audit fixes loaded after async theme bundles. */

:root{
    /* ── AWA Visual Audit — supplemental tokens ─── */
    --audit-bg-light: #f7f8fa;
    --audit-bg-muted: #eef1f5;
    --audit-text-muted: #5a6370;
    --audit-white-off: #fcfcfc;
    --audit-white: #ffffff;
}

@media (max-width: 767px) {
  body .page-wrapper .fixed-right,
body .fixed-right{
    display: none !important;
  }

  body .page-wrapper .awa-nav-overlay{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .nav-open body .page-wrapper .awa-nav-overlay,
body.nav-open .page-wrapper .awa-nav-overlay,
body .page-wrapper .awa-nav-overlay.is-visible{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body .page-wrapper nav.fixed-bottom,
body .page-wrapper .link-on-bottom{
    height: 72px !important;
  }

  body .awa-whatsapp-float,
body a.awa-whatsapp-float,
body #whatsapp-btn{
    bottom: 92px !important;
  }

  body .page-wrapper .message.global.cookie,
body .page-wrapper .cookie-notice,
body .page-wrapper .cookie-status,
body .page-wrapper .cookie-banner-container{
    bottom: 72px !important;
  }

  body .awa-404-title,
body.cms-no-route .page-wrapper .awa-404-title,
body.cms-noroute-index .page-wrapper .awa-404-title{
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  html body.cms-no-route.cms-page-view.page-layout-1column .page-wrapper .page-main .awa-404-title,
html body.cms-noroute-index.cms-page-view.page-layout-1column .page-wrapper .page-main .awa-404-title{
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  body.checkout-cart-index .page-wrapper .page-footer > .page_footer.awa-footer-exp-control,
body.checkout-cart-index .page-wrapper .page-footer > .awa-footer-categories-expand,
body.b2b-auth-shell .page-wrapper .page-footer > .page_footer.awa-footer-exp-control,
body.b2b-auth-shell .page-wrapper .page-footer > .awa-footer-categories-expand,
body.b2b-register-index .page-wrapper .page-footer > .page_footer.awa-footer-exp-control,
body.b2b-register-index .page-wrapper .page-footer > .awa-footer-categories-expand,
body.cms-no-route .page-wrapper .page-footer > .page_footer.awa-footer-exp-control,
body.cms-no-route .page-wrapper .page-footer > .awa-footer-categories-expand,
body.cms-noroute-index .page-wrapper .page-footer > .page_footer.awa-footer-exp-control,
body.cms-noroute-index .page-wrapper .page-footer > .awa-footer-categories-expand{
    display: none !important;
  }

  body.b2b-auth-shell .page-wrapper .page_footer.awa-footer-exp-control .awa-footer-trust-bar,
body.b2b-auth-shell .page-wrapper .page_footer.awa-footer-exp-control .awa-footer-tags,
body.b2b-auth-shell .page-wrapper .page_footer.awa-footer-exp-control .awa-footer-business-contact,
body.customer-account-login .page-wrapper .page_footer.awa-footer-exp-control .awa-footer-trust-bar,
body.customer-account-login .page-wrapper .page_footer.awa-footer-exp-control .awa-footer-tags,
body.customer-account-login .page-wrapper .page_footer.awa-footer-exp-control .awa-footer-business-contact{
    display: none !important;
  }

  body.checkout-cart-index .page-wrapper .page-footer .footer-bottom,
body.cms-no-route .page-wrapper .page-footer .footer-bottom,
body.cms-noroute-index .page-wrapper .page-footer .footer-bottom,
body.b2b-auth-shell .page-wrapper .page_footer .footer-container,
body.customer-account-login .page-wrapper .page_footer .footer-container{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  body.checkout-cart-index .page-wrapper .page-footer,
body.cms-no-route .page-wrapper .page-footer,
body.cms-noroute-index .page-wrapper .page-footer,
body.b2b-auth-shell .page-wrapper .page_footer,
body.customer-account-login .page-wrapper .page_footer{
    margin-top: 24px !important;
  }

  body.checkout-cart-index .page-wrapper .page-footer .footer-bottom .footer-bottom-inner,
body.cms-no-route .page-wrapper .page-footer .footer-bottom .footer-bottom-inner,
body.cms-noroute-index .page-wrapper .page-footer .footer-bottom .footer-bottom-inner{
    gap: 12px !important;
  }

  body.checkout-cart-index .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__row,
body.cms-no-route .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__row,
body.cms-noroute-index .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__row{
    gap: 12px !important;
  }

  body.checkout-cart-index .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__copyright,
body.cms-no-route .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__copyright,
body.cms-noroute-index .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__copyright{
    padding: 0 !important;
    min-height: 0 !important;
  }

  body.checkout-cart-index .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__copyright p,
body.cms-no-route .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__copyright p,
body.cms-noroute-index .page-wrapper .page-footer .footer-bottom .awa-footer-bottom__copyright p{
    margin: 0 !important;
  }

  body.checkout-cart-index .page-wrapper .page-footer .awa-footer-devby,
body.cms-no-route .page-wrapper .page-footer .awa-footer-devby,
body.cms-noroute-index .page-wrapper .page-footer .awa-footer-devby{
    display: none !important;
  }
}

/* =====================================================================
   Fix 2026-05-05: category carousel cards stuck invisible (opacity:0)
   Root cause: cards keep `awa-carousel-hidden` state when JS reveal does not
   complete in some runtime paths. This fallback is homepage-scoped and only
   neutralizes the hidden state; normal layout/interaction is preserved.
   ===================================================================== */
#html-body.cms-index-index #awa-cat-carousel .awa-category-carousel__item.awa-carousel-hidden,
#html-body.cms-home #awa-cat-carousel .awa-category-carousel__item.awa-carousel-hidden,
#html-body.cms-homepage_ayo_home5 #awa-cat-carousel .awa-category-carousel__item.awa-carousel-hidden{
  opacity: 1 !important;
  transform: translateY(0) !important;
}