/**
 * AWA Motos — Menu vertical otimizado (flex-grid-flow + ui-ux-pro-max)
 * Camada final de cascata (head-tail-bundle). Sem layout shift no hover.
 */

/* ── Tokens locais (superfícies adaptativas) ─────────────────────────────── */
body .page-wrapper .navigation.verticalmenu.side-verticalmenu {
  --awa-vmenu-surface-hover: color-mix(in srgb, var(--awa-primary, #b73337) 8%, transparent);
  --awa-vmenu-surface-active: color-mix(in srgb, var(--awa-primary, #b73337) 12%, transparent);
  --awa-vmenu-border-subtle: color-mix(in srgb, var(--awa-text, #333) 8%, transparent);
}

/* ── Desktop: painel + lista (flex stack, scroll contido) ─────────────────── */
@media (min-width: 992px) {
  body .page-wrapper .navigation.verticalmenu.side-verticalmenu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* Fechado por padrão — abertura só via vertical-menu-init (data-awa-menu-state / aria-hidden). */
  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown:not([data-awa-menu-state="open"]):not([data-awa-menu-state="pinned"]):not([aria-hidden="false"]) {
    display: none;
    pointer-events: none;
  }

  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown[data-awa-menu-state="open"],
  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown[data-awa-menu-state="pinned"],
  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown[aria-hidden="false"] {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding-block: var(--awa-space-1, 4px);
    padding-inline: 0;
    max-height: min(70vh, calc(100dvh - var(--awa-vmenu-header-offset, 220px)));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    border-radius: 0 0 var(--awa-radius-md, 10px) var(--awa-radius-md, 10px);
    box-shadow:
      0 4px 6px rgb(15 23 42 / 5%),
      0 12px 28px rgb(15 23 42 / 9%);
    border: 1px solid var(--awa-border, #e5e5e5);
    border-top: none;
    pointer-events: auto;
  }

  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown.vmm-open,
  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown[aria-hidden="false"] {
    scrollbar-color: var(--awa-border, #e5e5e5) transparent;
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0 {
    display: block;
    flex-shrink: 0;
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0 > a.level-top {
    display: flex;
    align-items: center;
    gap: var(--awa-space-2, 8px);
    margin: 2px 6px;
    padding-block: var(--awa-space-2-5, 10px);
    padding-inline: var(--awa-space-3-5, 14px);
    min-height: var(--awa-touch-target, 44px);
    border-radius: var(--awa-radius-xs, 6px);
    cursor: pointer;
    transform: none !important;
    transition:
      background-color 200ms ease,
      color 200ms ease;
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0 > a.level-top:hover,
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0 > a.level-top:focus-visible,
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0.active > a.level-top,
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0.vmm-active > a.level-top {
    background: var(--awa-vmenu-surface-hover) !important;
    color: var(--awa-primary, #b73337) !important;
    padding-inline: var(--awa-space-3-5, 14px) !important;
    transform: none !important;
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0 > a.level-top:focus-visible {
    outline: 2px solid var(--awa-primary, #b73337);
    outline-offset: 1px;
  }

  /* Ícones 1:1 — sem scale no hover (evita layout shift) */
  body .page-wrapper .navigation.verticalmenu .awa-vmenu-icon,
  body .page-wrapper .navigation.verticalmenu em.menu-thumb-icon {
    display: inline-grid;
    place-items: center;
    aspect-ratio: 1;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
  }

  body .page-wrapper .navigation.verticalmenu .awa-vmenu-icon svg {
    width: 1.125rem;
    height: 1.125rem;
    transform: none !important;
    transition: stroke 200ms ease;
  }

  body .page-wrapper .navigation.verticalmenu li.level0:hover .awa-vmenu-icon svg,
  body .page-wrapper .navigation.verticalmenu li.level0:focus-within .awa-vmenu-icon svg,
  body .page-wrapper .navigation.verticalmenu li.level0.vmm-active .awa-vmenu-icon svg {
    stroke: var(--awa-primary, #b73337) !important;
    transform: none !important;
  }

  /* Override: consolidated translateX no hover */
  body .page-wrapper .verticalmenu .category-dropdown li a:hover,
  body .page-wrapper .verticalmenu .category-dropdown li a:focus-visible {
    transform: none !important;
  }

  /* Toggle filhos — alvo de toque WCAG */
  body .page-wrapper .navigation.verticalmenu .open-children-toggle {
    display: inline-grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: var(--awa-touch-target, 44px);
    min-height: var(--awa-touch-target, 44px);
    cursor: pointer;
    border-radius: var(--awa-radius-xs, 6px);
    transition: background-color 200ms ease;
  }

  body .page-wrapper .navigation.verticalmenu .open-children-toggle:hover,
  body .page-wrapper .navigation.verticalmenu .open-children-toggle:focus-visible {
    background: var(--awa-vmenu-surface-hover);
  }

  /* Ver mais / Ver menos */
  body .page-wrapper .navigation.verticalmenu .expand-category-link .awa-vmenu-expand-btn,
  body .page-wrapper .navigation.verticalmenu .expand-category-link .viewall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--awa-space-2, 8px);
    width: 100%;
    min-height: var(--awa-touch-target, 44px);
    padding-block: var(--awa-space-2, 8px);
    padding-inline: var(--awa-space-3, 12px);
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--awa-primary, #b73337);
    font-weight: 600;
    font-size: var(--awa-font-sm, 13px);
    cursor: pointer;
    border-radius: var(--awa-radius-xs, 6px);
    transition: background-color 200ms ease, color 200ms ease;
  }

  body .page-wrapper .navigation.verticalmenu .expand-category-link .awa-vmenu-expand-btn:hover,
  body .page-wrapper .navigation.verticalmenu .expand-category-link .awa-vmenu-expand-btn:focus-visible {
    background: var(--awa-vmenu-surface-hover);
    outline: 2px solid var(--awa-primary, #b73337);
    outline-offset: 1px;
  }

  /* Flyout portal — shell (conteúdo interno em grid na Fase 4) */
  body .awa-vmf-portal.submenu,
  body .awa-vmf-portal.navigation__submenu {
    display: block;
    width: min(520px, calc(100vw - 320px));
    min-width: min(280px, 100%);
    max-height: min(75vh, calc(100dvh - var(--awa-vmenu-header-offset, 200px)));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border-inline-start: 3px solid var(--awa-primary, #b73337);
    border-radius: 0 var(--awa-radius-md, 10px) var(--awa-radius-md, 10px) 0;
    background: var(--awa-bg-surface, #fff);
    box-shadow:
      4px 8px 24px rgb(15 23 42 / 10%),
      0 0 0 1px rgb(15 23 42 / 4%);
    padding: 0;
  }

  body .awa-vmf-portal.submenu > .row,
  body .awa-vmf-portal.navigation__submenu > .row {
    display: block;
    min-height: 0;
    margin: 0;
  }

  /* Trigger — caret + hover estável */
  body .page-wrapper .navigation.verticalmenu [data-role="awa-vertical-menu-trigger"]::after,
  body .page-wrapper .verticalmenu.side-verticalmenu > .title-category-dropdown::after {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body .page-wrapper [data-role="awa-vertical-menu-trigger"][aria-expanded="true"]::after,
  body .page-wrapper [data-role="awa-vertical-menu-trigger"].active::after,
  body .page-wrapper .navigation.verticalmenu .title-category-dropdown.active::after {
    transform: rotate(180deg);
  }

  #html-body .page-wrapper .awa-site-header .awa-header-categories
    button.our_categories.title-category-dropdown[data-role="awa-vertical-menu-trigger"].awa-vmenu-trigger-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--awa-space-2-5, 10px) !important;
    border-radius: var(--awa-radius-sm, 8px) !important;
    cursor: pointer;
    transition:
      background-color 200ms ease,
      box-shadow 200ms ease,
      color 200ms ease !important;
  }

  #html-body .page-wrapper .awa-site-header .awa-header-categories
    button.our_categories.title-category-dropdown[data-role="awa-vertical-menu-trigger"].awa-vmenu-trigger-btn:hover {
    filter: brightness(1.05);
    transform: none !important;
  }

  #html-body .page-wrapper .awa-site-header .awa-header-categories
    button.our_categories.title-category-dropdown[data-role="awa-vertical-menu-trigger"].awa-vmenu-trigger-btn:focus-visible {
    outline: 2px solid var(--awa-white, #fff);
    outline-offset: 2px;
  }

  #html-body .page-wrapper .awa-site-header .awa-header-categories
    .awa-vmenu-trigger-icon {
    display: inline-grid;
    place-items: center;
    aspect-ratio: 1;
    width: 1.125rem;
    height: 1.125rem;
  }
}

/* ── Homepage sidebar (coluna esquerda) ──────────────────────────────────── */
@media (min-width: 992px) {
  :is(body.cms-index-index, body.cms-home)
    .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown {
    max-height: min(65vh, 520px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE 3 — Drawer mobile + drill (flex-grid-flow / ui-ux-pro-max)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  body.awa-mobile-drawer-open,
  body.nav-open {
    overflow: hidden;
  }

  /* Shell do drawer: coluna flex + safe-area */
  body.awa-mobile-drawer-open .page-wrapper #awa-category-navigation.section-items,
  body.nav-open .page-wrapper #awa-category-navigation[data-awa-nav-shell="true"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding-block-start: max(var(--awa-space-3, 12px), env(safe-area-inset-top, 0)) !important;
    padding-block-end: env(safe-area-inset-bottom, 0) !important;
    overscroll-behavior: contain;
  }

  body.awa-mobile-drawer-open .page-wrapper #awa-category-navigation .navigation.verticalmenu,
  body.nav-open .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  /* Botão fechar — alvo 44px, ícone 1:1 */
  body.awa-mobile-drawer-open .page-wrapper #awa-category-navigation .awa-nav-close,
  body.nav-open .page-wrapper #awa-category-navigation .awa-nav-close {
    display: inline-grid;
    place-items: center;
    position: absolute;
    inset-block-start: max(var(--awa-space-2, 8px), env(safe-area-inset-top, 0));
    inset-inline-end: var(--awa-space-2, 8px);
    z-index: 12;
    width: var(--awa-touch-target, 44px);
    height: var(--awa-touch-target, 44px);
    min-width: var(--awa-touch-target, 44px);
    min-height: var(--awa-touch-target, 44px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--awa-radius-sm, 8px);
    background: var(--awa-bg-surface, #fff);
    color: var(--awa-text, #333);
    cursor: pointer;
    box-shadow: 0 1px 4px rgb(15 23 42 / 8%);
    transition: background-color 200ms ease, color 200ms ease;
  }

  body.awa-mobile-drawer-open .page-wrapper #awa-category-navigation .awa-nav-close:hover,
  body.awa-mobile-drawer-open .page-wrapper #awa-category-navigation .awa-nav-close:focus-visible,
  body.nav-open .page-wrapper #awa-category-navigation .awa-nav-close:focus-visible {
    background: var(--awa-vmenu-surface-hover);
    color: var(--awa-primary, #b73337);
  }

  body.awa-mobile-drawer-open .page-wrapper #awa-category-navigation .awa-nav-close:focus-visible,
  body.nav-open .page-wrapper #awa-category-navigation .awa-nav-close:focus-visible {
    outline: 2px solid var(--awa-primary, #b73337);
    outline-offset: 2px;
  }

  /* Lista rolável dentro do drawer */
  body.awa-mobile-drawer-open #awa-category-navigation .togge-menu,
  body.nav-open .page-wrapper .navigation.verticalmenu.side-verticalmenu > ul.togge-menu.list-category-dropdown {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  body.awa-mobile-drawer-open #awa-category-navigation a.level-top,
  body.nav-open .page-wrapper .navigation.verticalmenu .togge-menu > li.ui-menu-item.level0 > a.level-top {
    display: flex;
    align-items: center;
    gap: var(--awa-space-2, 8px);
    min-height: var(--awa-touch-target, 48px);
    margin-inline: var(--awa-space-1, 4px);
    padding-block: var(--awa-space-3, 12px);
    padding-inline: var(--awa-space-4, 16px);
    border-radius: var(--awa-radius-xs, 6px);
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
    transform: none !important;
  }

  body.awa-mobile-drawer-open #awa-category-navigation a.level-top
  > span:not(.awa-vmenu-icon):not(.cat-label):not(.arrow),
  body.nav-open .navigation.verticalmenu .togge-menu > li.ui-menu-item.level0 > a.level-top
  > span:not(.awa-vmenu-icon):not(.cat-label):not(.arrow) {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.awa-mobile-drawer-open #awa-category-navigation a.level-top:hover,
  body.awa-mobile-drawer-open #awa-category-navigation a.level-top:focus-visible,
  body.nav-open .navigation.verticalmenu .togge-menu > li.ui-menu-item.level0 > a.level-top:hover,
  body.nav-open .navigation.verticalmenu .togge-menu > li.ui-menu-item.level0 > a.level-top:focus-visible {
    background: var(--awa-vmenu-surface-hover) !important;
    color: var(--awa-primary, #b73337) !important;
    transform: none !important;
  }

  body.awa-mobile-drawer-open #awa-category-navigation a.level-top:focus-visible,
  body.nav-open .navigation.verticalmenu .togge-menu > li.ui-menu-item.level0 > a.level-top:focus-visible {
    outline: 2px solid var(--awa-primary, #b73337);
    outline-offset: 1px;
  }

  body.awa-mobile-drawer-open #awa-category-navigation .togge-menu > li.ui-menu-item.level0,
  body.nav-open .navigation.verticalmenu .togge-menu > li.ui-menu-item.level0 {
    border-block-end: 1px solid var(--awa-vmenu-border-subtle);
  }

  body.awa-mobile-drawer-open #awa-category-navigation .togge-menu > li.ui-menu-item.level0:last-child,
  body.nav-open .navigation.verticalmenu .togge-menu > li.ui-menu-item.level0:last-of-type {
    border-block-end: none;
  }

  /* Badges no drawer */
  body.awa-mobile-drawer-open #awa-category-navigation .cat-label,
  body.nav-open .navigation.verticalmenu .cat-label {
    flex-shrink: 0;
    margin-inline-start: var(--awa-space-1, 4px);
    padding-block: 2px;
    padding-inline: 6px;
    border-radius: var(--awa-radius-xs, 4px);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  /* Ver mais no drawer */
  body.awa-mobile-drawer-open #awa-category-navigation .expand-category-link,
  body.nav-open .navigation.verticalmenu .expand-category-link {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-shrink: 0;
    background: var(--awa-bg-surface, #fff);
    border-block-start: 1px solid var(--awa-vmenu-border-subtle);
    box-shadow: 0 -4px 12px rgb(15 23 42 / 4%);
  }

  body.awa-mobile-drawer-open #awa-category-navigation .awa-vmenu-expand-btn,
  body.nav-open .navigation.verticalmenu .awa-vmenu-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--awa-space-2, 8px);
    width: 100%;
    min-height: var(--awa-touch-target, 48px);
    cursor: pointer;
  }

  /* Overlay custom (complementa .awa-custom-drawer-overlay) */
  body.awa-mobile-drawer-open .awa-custom-drawer-overlay.is-active,
  body.nav-open .shadow_bkg_show {
    background: color-mix(in srgb, var(--awa-text, #0f172a) 48%, transparent) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  /* Drill stage ocupa altura disponível */
  body.awa-mobile-drawer-open .navigation.verticalmenu .vmm-drill-stage,
  body.nav-open .navigation.verticalmenu .vmm-drill-stage {
    flex: 1 1 auto;
    min-height: 0;
  }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  body.awa-mobile-drawer-open .page-wrapper #awa-category-navigation.section-items,
  body.nav-open .page-wrapper #awa-category-navigation[data-awa-nav-shell="true"] {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .page-wrapper .navigation.verticalmenu [data-role="awa-vertical-menu-trigger"]::after,
  body .page-wrapper .verticalmenu.side-verticalmenu > .title-category-dropdown::after,
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0 > a.level-top,
  body .page-wrapper .navigation.verticalmenu .awa-vmenu-icon svg,
  body .page-wrapper .navigation.verticalmenu .open-children-toggle {
    transition: none !important;
  }

  body.cms-index-index .page-wrapper .navigation.verticalmenu.side-verticalmenu
    .togge-menu > li.ui-menu-item.level0 > .submenu,
  body.cms-index-index .page-wrapper .navigation.verticalmenu.side-verticalmenu
    .togge-menu > li.ui-menu-item.level0 > .level0.submenu {
    transform: none !important;
    transition: opacity 0.01ms !important;
  }
}

/* ── Scrollbar discreta (lista + flyout) ─────────────────────────────────── */
@media (min-width: 992px) {
  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown,
  body .awa-vmf-portal.submenu {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--awa-primary, #b73337) 28%, var(--awa-border, #e5e5e5))
      transparent;
  }

  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown::-webkit-scrollbar,
  body .awa-vmf-portal.submenu::-webkit-scrollbar {
    width: 6px;
  }

  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown::-webkit-scrollbar-thumb,
  body .awa-vmf-portal.submenu::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--awa-primary, #b73337) 35%, transparent);
    border-radius: var(--awa-radius-full, 999px);
  }

  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown::-webkit-scrollbar-track,
  body .awa-vmf-portal.submenu::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* ── Barra ativa + truncamento de label ──────────────────────────────────── */
@media (min-width: 992px) {
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0 > a.level-top {
    position: relative;
    overflow: hidden;
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0 > a.level-top::before {
    content: "";
    position: absolute;
    inset-block: var(--awa-space-1, 4px);
    inset-inline-start: 0;
    width: 3px;
    border-radius: 0 var(--awa-radius-xs, 4px) var(--awa-radius-xs, 4px) 0;
    background: var(--awa-primary, #b73337);
    transform: scaleY(0);
    transition: transform 200ms ease;
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0:hover > a.level-top::before,
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0:focus-within > a.level-top::before,
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0.active > a.level-top::before,
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0.vmm-active > a.level-top::before {
    transform: scaleY(1);
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0 > a.level-top
    > span:not(.awa-vmenu-icon):not(.cat-label):not(.arrow) {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Badges promocionais — compactos, sem quebrar linha */
  body .page-wrapper .navigation.verticalmenu .cat-label {
    flex-shrink: 0;
    margin-inline-start: var(--awa-space-1, 4px);
    padding-block: 2px;
    padding-inline: 6px;
    border-radius: var(--awa-radius-xs, 4px);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
  }

  body .page-wrapper .navigation.verticalmenu li.is-highlight > a.level-top {
    font-weight: 600;
    color: var(--awa-primary, #b73337);
    box-shadow: inset 3px 0 0 var(--awa-primary, #b73337);
  }

  /* "Ver mais" fixo no rodapé do painel rolável */
  body .page-wrapper .navigation.verticalmenu .togge-menu > li.expand-category-link {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-block-start: auto;
    flex-shrink: 0;
    background: var(--awa-bg-surface, #fff);
    border-block-start: 1px solid var(--awa-vmenu-border-subtle);
    box-shadow: 0 -4px 12px rgb(15 23 42 / 4%);
  }

  body .page-wrapper .navigation.verticalmenu .expand-category-link .vm-toggle-icon {
    display: inline-grid;
    place-items: center;
    aspect-ratio: 1;
    width: 1rem;
    height: 1rem;
    transition: transform 220ms ease;
  }

  body .page-wrapper .navigation.verticalmenu .expand-category-link.expanding .vm-toggle-icon,
  body .page-wrapper .navigation.verticalmenu .expand-category-link
    .awa-vmenu-expand-btn[aria-expanded="true"] .vm-toggle-icon {
    transform: rotate(180deg);
  }

  /* Flyout: links internos */
  body .awa-vmf-portal .subchildmenu li > a {
    display: block;
    padding-block: var(--awa-space-2, 8px);
    padding-inline: var(--awa-space-2, 8px);
    min-height: 36px;
    border-radius: var(--awa-radius-xs, 6px);
    color: var(--awa-text, #333);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
  }

  body .awa-vmf-portal .subchildmenu li > a:hover,
  body .awa-vmf-portal .subchildmenu li > a:focus-visible {
    background: var(--awa-vmenu-surface-hover);
    color: var(--awa-primary, #b73337);
    padding-inline: var(--awa-space-2, 8px) !important;
  }

  body .awa-vmf-portal .subchildmenu li.level1 > a {
    font-weight: 600;
    color: var(--awa-text, #333);
    border-block-end: 1px solid var(--awa-vmenu-border-subtle);
    margin-block-end: var(--awa-space-1, 4px);
  }

  /* Classic / staticwidth — coluna única compacta */
  body .awa-vmf-portal.classic .subchildmenu,
  body .awa-vmf-portal.staticwidth .subchildmenu {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--awa-space-2, 8px);
  }

  /* Promo carousel no menu */
  body .page-wrapper .navigation.verticalmenu .vertical-bg-img {
    flex-shrink: 0;
    padding-block: var(--awa-space-2, 8px);
    padding-inline: var(--awa-space-2, 8px);
    list-style: none;
  }

  body .page-wrapper .navigation.verticalmenu .vmenu-promo-carousel {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border-radius: var(--awa-radius-md, 10px);
    background: var(--awa-bg-muted, #f7f7f7);
  }

  body .page-wrapper .navigation.verticalmenu .vmenu-promo-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--awa-radius-md, 10px);
  }

  body .page-wrapper .navigation.verticalmenu .awa-vertical-extra {
    display: flex;
    flex-direction: column;
    gap: var(--awa-space-2, 8px);
    padding: var(--awa-space-3, 12px);
    border-block-start: 1px solid var(--awa-vmenu-border-subtle);
  }
}

/* ── Backdrop ao abrir menu (header) ─────────────────────────────────────── */
body .shadow_bkg_show,
body .page-wrapper .shadow_bkg_show {
  background: color-mix(in srgb, var(--awa-text, #0f172a) 42%, transparent) !important;
  backdrop-filter: blur(2px);
  transition: opacity 220ms ease;
}

/* ── Homepage flyout: entrada só por opacidade (sem slide) ───────────────── */
@media (min-width: 992px) {
  body.cms-index-index .page-wrapper .navigation.verticalmenu.side-verticalmenu
    .togge-menu > li.ui-menu-item.level0 > .submenu,
  body.cms-index-index .page-wrapper .navigation.verticalmenu.side-verticalmenu
    .togge-menu > li.ui-menu-item.level0 > .level0.submenu {
    transform: none !important;
    transition: opacity 200ms ease, visibility 200ms ease !important;
  }

  body.cms-home .page-wrapper .navigation.verticalmenu.side-verticalmenu
    .togge-menu > li.ui-menu-item.level0 > .submenu,
  body.cms-home .page-wrapper .navigation.verticalmenu.side-verticalmenu
    .togge-menu > li.ui-menu-item.level0 > .level0.submenu {
    transform: none !important;
    transition: opacity 200ms ease, visibility 200ms ease !important;
  }
}

/* ── Painel aberto: leve fade-in ─────────────────────────────────────────── */
@media (min-width: 992px) {
  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown.vmm-open,
  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown[aria-hidden="false"] {
    animation: awa-vmenu-panel-in 220ms ease;
  }
}

@keyframes awa-vmenu-panel-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown.vmm-open,
  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown[aria-hidden="false"] {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE 4 — Mega-menu / flyout (grid fluido, touch, teclado)
   Cascata final — complementa awa-vertical-menu-desktop-final no layout-bundle
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  body .awa-vmf-portal.submenu .navigation__inner-list--level1,
  body .awa-vmf-portal.navigation__submenu .navigation__inner-list--level1,
  body .awa-vmf-portal.submenu .subchildmenu.mega-columns {
    display: grid;
    align-content: start;
    align-items: start;
    gap: var(--awa-space-3, 12px) var(--awa-space-4, 16px);
    grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
    list-style: none;
    margin: 0;
    min-height: 0;
    padding-block: var(--awa-space-4, 16px);
    padding-inline: var(--awa-space-4, 16px) var(--awa-space-3, 12px);
  }

  /* Coluna de imagem promo — última track ou linha inteira em telas estreitas */
  body .awa-vmf-portal .navigation__inner-item--level1.imagem.img-subcategory {
    align-self: start;
    grid-column: -1;
    justify-self: stretch;
    max-width: 13.75rem;
    min-width: 0;
    padding: 0;
  }

  body .awa-vmf-portal .navigation__inner-item--level1.imagem.img-subcategory img {
    border-radius: var(--awa-radius-md, 10px);
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
  }

  @media (max-width: 1280px) {
    body .awa-vmf-portal.submenu .navigation__inner-list--level1,
    body .awa-vmf-portal.navigation__submenu .navigation__inner-list--level1 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body .awa-vmf-portal .navigation__inner-item--level1.imagem.img-subcategory {
      grid-column: 1 / -1;
      justify-self: center;
      max-width: min(100%, 16rem);
    }
  }

  /* Título de grupo (coluna mega) */
  body .awa-vmf-portal .navigation__inner-item--level1.subcategory-title {
    display: flex;
    flex-direction: column;
    gap: var(--awa-space-1, 4px);
    margin: 0;
    padding-block: var(--awa-space-1, 4px);
    padding-inline: 0;
  }

  body .awa-vmf-portal .navigation__inner-item--level1.subcategory-title span {
    color: var(--awa-text, #333);
    display: block;
    font-size: clamp(1rem, 0.35vw + 0.9rem, 1.25rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }

  /* Links de 2º nível */
  body .awa-vmf-portal .navigation__inner-item--level1.subcategory-second-level {
    margin: 0;
    padding: 0;
  }

  body .awa-vmf-portal .navigation__inner-item--level1.subcategory-second-level > a {
    align-items: center;
    border-radius: var(--awa-radius-xs, 6px);
    color: var(--awa-text-muted, #666);
    cursor: pointer;
    display: flex;
    font-size: var(--awa-font-sm, 14px);
    font-weight: 500;
    gap: var(--awa-space-2, 8px);
    line-height: 1.35;
    margin: 0;
    min-height: var(--awa-touch-target, 44px);
    overflow-wrap: anywhere;
    padding-block: var(--awa-space-2, 8px);
    padding-inline: var(--awa-space-2-5, 10px);
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease;
    transform: none !important;
    white-space: normal;
  }

  body .awa-vmf-portal .navigation__inner-item--level1.subcategory-second-level > a:hover,
  body .awa-vmf-portal .navigation__inner-item--level1.subcategory-second-level > a:focus-visible {
    background: var(--awa-vmenu-surface-hover) !important;
    color: var(--awa-primary, #b73337) !important;
    transform: none !important;
  }

  body .awa-vmf-portal .navigation__inner-item--level1.subcategory-second-level > a:focus-visible {
    outline: 2px solid var(--awa-primary, #b73337);
    outline-offset: 1px;
  }

  /* Ver todos — cluster CTA */
  body .awa-vmf-portal .navigation__inner-item--all {
    border-block-start: 1px solid var(--awa-vmenu-border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--awa-space-2, 8px);
    grid-column: 1 / -1;
    margin-block-start: var(--awa-space-1, 4px);
    padding-block-start: var(--awa-space-3, 12px);
  }

  body .awa-vmf-portal .navigation__inner-item--all > a {
    align-items: center;
    align-self: stretch;
    background: var(--awa-primary, #b73337);
    border: 0;
    border-radius: var(--awa-radius-sm, 8px);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-size: var(--awa-font-sm, 14px);
    font-weight: 600;
    gap: var(--awa-space-2, 8px);
    justify-content: center;
    letter-spacing: 0.02em;
    min-height: var(--awa-touch-target, 44px);
    padding-block: var(--awa-space-2, 8px);
    padding-inline: var(--awa-space-4, 16px);
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 200ms ease, color 200ms ease;
    width: auto;
    max-width: 100%;
  }

  body .awa-vmf-portal .navigation__inner-item--all > a::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  body .awa-vmf-portal .navigation__inner-item--all > a:hover,
  body .awa-vmf-portal .navigation__inner-item--all > a:focus-visible {
    background: var(--awa-primary-dark, #8e2629);
    color: #ffffff;
    transform: none !important;
  }

  body .awa-vmf-portal .navigation__inner-item--all > a:focus-visible {
    outline: 2px solid var(--awa-primary, #b73337);
    outline-offset: 2px;
  }

  /* Item ativo no painel principal quando flyout aberto */
  body .page-wrapper .navigation.verticalmenu .togge-menu > li.ui-menu-item.level0.awa-vmf-active > a.level-top,
  body .page-wrapper .navigation.verticalmenu .togge-menu > li.ui-menu-item.level0.vmm-active > a.level-top {
    background: var(--awa-vmenu-surface-active) !important;
    color: var(--awa-primary, #b73337) !important;
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu > li.ui-menu-item.level0.awa-vmf-active > a.level-top::before,
  body .page-wrapper .navigation.verticalmenu .togge-menu > li.ui-menu-item.level0.vmm-active > a.level-top::before {
    transform: scaleY(1);
  }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  body .awa-vmf-portal .navigation__inner-item--level1.subcategory-second-level > a,
  body .awa-vmf-portal .navigation__inner-item--all > a {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE 5 — Teclado, container queries, cascata final (wins layout-bundle)
   ══════════════════════════════════════════════════════════════════════════ */

/* GPU: não criar containing block no nav (dropdown/flyout fixos ao viewport) */
body .page-wrapper .navigation.verticalmenu,
body .page-wrapper .navigation.verticalmenu.side-verticalmenu {
  will-change: auto;
}

/* Painel fechado no header: não interceptar cliques (home sidebar sempre interativo) */
body:not(.cms-index-index):not(.cms-home):not(.cms-homepage_ayo_home5)
  .page-wrapper .navigation.verticalmenu.side-verticalmenu
  > ul.togge-menu.list-category-dropdown[aria-hidden="true"]:not(.vmm-open) {
  pointer-events: 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 {
  pointer-events: auto;
}

@media (min-width: 992px) {
  /* Wins awa-vertical-menu-desktop-final: larguras fluidas em laptops estreitos */
  body .awa-vmf-portal.submenu,
  body .awa-vmf-portal.navigation__submenu,
  body .page-wrapper .awa-site-header .navigation.verticalmenu.side-verticalmenu
    .togge-menu > li.ui-menu-item.level0 > .submenu,
  body .page-wrapper .awa-site-header .navigation.verticalmenu.side-verticalmenu
    .togge-menu > li.ui-menu-item.level0 > .level0.submenu {
    width: min(42rem, calc(100vw - 17rem)) !important;
    min-width: min(14rem, 100%) !important;
    max-width: min(42rem, calc(100vw - 10rem)) !important;
  }

  /* Container query — mega responde à largura do flyout, não só ao viewport */
  body .awa-vmf-portal.submenu,
  body .awa-vmf-portal.navigation__submenu {
    container-type: inline-size;
    container-name: awa-vmf-flyout;
  }

  @container awa-vmf-flyout (max-width: 28rem) {
    body .awa-vmf-portal.submenu .navigation__inner-list--level1,
    body .awa-vmf-portal.navigation__submenu .navigation__inner-list--level1 {
      grid-template-columns: 1fr;
      padding-inline: var(--awa-space-3, 12px);
    }

    body .awa-vmf-portal .navigation__inner-item--level1.imagem.img-subcategory {
      grid-column: 1;
      max-width: 100%;
    }
  }

  @container awa-vmf-flyout (min-width: 28.1rem) and (max-width: 36rem) {
    body .awa-vmf-portal.submenu .navigation__inner-list--level1,
    body .awa-vmf-portal.navigation__submenu .navigation__inner-list--level1 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Linha level0 com filhos: link flex + toggle 44px */
  body .page-wrapper .navigation.verticalmenu .togge-menu > li.ui-menu-item.level0.parent {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu > li.ui-menu-item.level0.parent > a.level-top {
    flex: 1 1 auto;
    min-width: 0;
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu > li.ui-menu-item.level0.parent > .open-children-toggle {
    flex: 0 0 auto;
    align-self: center;
  }

  /* Foco teclado — scroll-margin em listas roláveis */
  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown
    :is(a.level-top, button, .awa-vmenu-expand-btn, .open-children-toggle):focus-visible,
  body .awa-vmf-portal :is(a, button):focus-visible {
    scroll-margin-block: var(--awa-space-2, 8px);
    scroll-margin-inline: var(--awa-space-1, 4px);
  }

  /* Só :focus-visible — evita outline em clique mouse */
  body .page-wrapper .navigation.verticalmenu a:focus:not(:focus-visible),
  body .awa-vmf-portal a:focus:not(:focus-visible) {
    outline: none;
  }

  /* Flyout visível: leve ring no container (não layout shift) */
  body .awa-vmf-portal.submenu:focus-within,
  body .awa-vmf-portal.navigation__submenu:focus-within {
    box-shadow:
      4px 8px 24px rgb(15 23 42 / 10%),
      0 0 0 1px rgb(15 23 42 / 4%),
      0 0 0 2px color-mix(in srgb, var(--awa-primary, #b73337) 35%, transparent);
  }
}

@media (max-width: 991px) {
  body.awa-mobile-drawer-open #awa-category-navigation a.level-top,
  body.nav-open .navigation.verticalmenu a.level-top {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  body.awa-mobile-drawer-open #awa-category-navigation :is(a, button):focus-visible,
  body.nav-open .navigation.verticalmenu :is(a, button):focus-visible {
    scroll-margin-block: var(--awa-space-2, 8px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE 6 — Home sidebar: flyout in-DOM (sem portal) + imagens lazy
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
    .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu
    .togge-menu > li.ui-menu-item.level0 > :is(.submenu, .level0.submenu) {
    container-type: inline-size;
    container-name: awa-vmf-flyout;
    width: min(40rem, calc(100vw - 20rem)) !important;
    min-width: min(16rem, 100%) !important;
    max-width: min(40rem, calc(100vw - 12rem)) !important;
    max-height: min(72vh, calc(100dvh - var(--awa-vmenu-header-offset, 200px)));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    z-index: var(--awa-z-dropdown, 100120);
  }

  :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
    .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu
    .togge-menu > li.ui-menu-item.level0 > :is(.submenu, .level0.submenu)
    .navigation__inner-list--level1,
  :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
    .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu
    .togge-menu > li.ui-menu-item.level0 > :is(.submenu, .level0.submenu)
    .subchildmenu.mega-columns {
    display: grid;
    align-content: start;
    gap: var(--awa-space-3, 12px) var(--awa-space-4, 16px);
    grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
    list-style: none;
    margin: 0;
    padding-block: var(--awa-space-4, 16px);
    padding-inline: var(--awa-space-4, 16px) var(--awa-space-3, 12px);
  }

  :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
    .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu
    .togge-menu > li.ui-menu-item.level0 > :is(.submenu, .level0.submenu)
    .navigation__inner-item--level1.imagem.img-subcategory img {
    border-radius: var(--awa-radius-md, 10px);
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
    object-fit: cover;
  }

  :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
    .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu
    .togge-menu > li.ui-menu-item.level0 > :is(.submenu, .level0.submenu)
    img[loading="lazy"]:not(.awa-loaded) {
    opacity: 1;
    filter: none;
  }

  @container awa-vmf-flyout (max-width: 28rem) {
    :is(body.cms-index-index, body.cms-home)
      .page-wrapper .menu_left_home1 .navigation.verticalmenu
      .togge-menu > li.ui-menu-item.level0 > :is(.submenu, .level0.submenu)
      .navigation__inner-list--level1 {
      grid-template-columns: 1fr;
    }
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE 7 — Scroll shadows, current-category, flyout slide-in, lazy shimmer
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown {
    background-attachment: local, local, scroll, scroll;
    background-image:
      linear-gradient(var(--awa-bg-surface, #fff) 16px, transparent),
      linear-gradient(transparent, var(--awa-bg-surface, #fff) 16px),
      linear-gradient(rgb(15 23 42 / 8%), transparent),
      linear-gradient(transparent, rgb(15 23 42 / 8%));
    background-size: 100% 28px, 100% 28px, 100% 12px, 100% 12px;
    background-position: top, bottom, top, bottom;
    background-repeat: no-repeat;
  }
}

@media (min-width: 992px) {
  body .page-wrapper .navigation.verticalmenu .togge-menu
    > li.ui-menu-item.level0.vmm-current > a.level-top {
    background: var(--awa-vmenu-surface-active, color-mix(in srgb, var(--awa-primary, #b73337) 12%, transparent)) !important;
    color: var(--awa-primary, #b73337) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--awa-primary, #b73337);
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu
    > li.ui-menu-item.level0.vmm-current > a.level-top::after {
    opacity: 1 !important;
  }
}

@media (min-width: 992px) {
  @keyframes awa-vmf-slide-in {
    from {
      opacity: 0;
      transform: translateX(-6px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  body .awa-vmf-portal.submenu:not([style*="display: none"]),
  body .awa-vmf-portal.navigation__submenu:not([style*="display: none"]) {
    animation: awa-vmf-slide-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
    .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu
    .togge-menu > li.ui-menu-item.level0.vmm-active > :is(.submenu, .level0.submenu) {
    animation: awa-vmf-slide-in 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@media (min-width: 992px) {
  body .awa-vmf-portal .navigation__inner-item--level1.imagem.img-subcategory img:not([src]),
  body .awa-vmf-portal .navigation__inner-item--level1.imagem.img-subcategory img[src=""],
  :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
    .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu
    .togge-menu > li.ui-menu-item.level0 > :is(.submenu, .level0.submenu)
    .navigation__inner-item--level1.imagem.img-subcategory img:not([src]) {
    background: linear-gradient(
      90deg,
      var(--awa-bg-muted, #f0f0f0) 0%,
      color-mix(in srgb, var(--awa-border, #e5e5e5) 60%, white) 50%,
      var(--awa-bg-muted, #f0f0f0) 100%
    );
    background-size: 200% 100%;
    animation: awa-img-shimmer 1.4s linear infinite;
    min-height: 80px;
    display: block;
  }

  @keyframes awa-img-shimmer {
    0% {
      background-position: 200% center;
    }

    100% {
      background-position: -200% center;
    }
  }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  body .awa-vmf-portal.submenu,
  body .awa-vmf-portal.navigation__submenu,
  :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5)
    .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu
    .togge-menu > li.ui-menu-item.level0.vmm-active > :is(.submenu, .level0.submenu) {
    animation: none !important;
  }

  body .awa-vmf-portal .navigation__inner-item--level1.imagem.img-subcategory img:not([src]),
  body .awa-vmf-portal .navigation__inner-item--level1.imagem.img-subcategory img[src=""] {
    animation: none !important;
    background-image: none;
    background: var(--awa-bg-muted, #f0f0f0);
  }
}

/* Alto contraste (Windows / forced-colors) */
@media (forced-colors: active) {
  body .page-wrapper .navigation.verticalmenu .togge-menu > li.ui-menu-item.level0 > a.level-top:focus-visible,
  body .awa-vmf-portal a:focus-visible,
  body .page-wrapper .navigation.verticalmenu [data-role="awa-vertical-menu-trigger"]:focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu > li.ui-menu-item.level0 > a.level-top::before {
    background: CanvasText;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE 8 — Rotação de seta no flyout aberto + indicador de item ativo
             + micro-interação de pressão
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
  body .page-wrapper .navigation.verticalmenu .togge-menu
    > li.ui-menu-item.level0.parent > a.level-top::after {
    transition:
      background-image 150ms ease,
      opacity 150ms ease,
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu
    > li.ui-menu-item.level0.parent.vmm-active > a.level-top::after {
    transform: rotate(90deg) !important;
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu
    > li.ui-menu-item.level0.vmm-active > a.level-top {
    box-shadow: inset 3px 0 0 var(--awa-primary, #b73337) !important;
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu
    > li.ui-menu-item.level0 > a.level-top:active {
    filter: brightness(0.93);
    transition-duration: 80ms;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE 9 — Badge semântico, scroll-behavior, autocomplete brand-hover,
             pulse no hot-badge, fade aprimorado no "Ver mais"
   ══════════════════════════════════════════════════════════════════════════ */

body .page-wrapper .navigation.verticalmenu
  .cat-label.label-novo,
body .page-wrapper .navigation.verticalmenu
  .cat-label.label-new,
body .page-wrapper .navigation.verticalmenu
  .cat-label[class*="novo"],
body .page-wrapper .navigation.verticalmenu
  .cat-label[class*="new"] {
  background: #16a34a !important;
  color: #fff !important;
}

body .page-wrapper .navigation.verticalmenu
  .cat-label.label-sale,
body .page-wrapper .navigation.verticalmenu
  .cat-label.label-promo,
body .page-wrapper .navigation.verticalmenu
  .cat-label.label-oferta,
body .page-wrapper .navigation.verticalmenu
  .cat-label[class*="sale"],
body .page-wrapper .navigation.verticalmenu
  .cat-label[class*="promo"],
body .page-wrapper .navigation.verticalmenu
  .cat-label[class*="oferta"] {
  background: #ea580c !important;
  color: #fff !important;
}

body .page-wrapper .navigation.verticalmenu
  .cat-label.label-hot,
body .page-wrapper .navigation.verticalmenu
  .cat-label[class*="hot"] {
  background: var(--awa-primary, #b73337) !important;
  color: #fff !important;
  animation: awa-badge-pulse 2.4s ease-in-out infinite;
}

@keyframes awa-badge-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--awa-primary, #b73337) 55%, transparent);
  }

  55% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--awa-primary, #b73337) 0%, transparent);
  }
}

body .page-wrapper .navigation.verticalmenu
  .cat-label.label-b2b,
body .page-wrapper .navigation.verticalmenu
  .cat-label.label-pro,
body .page-wrapper .navigation.verticalmenu
  .cat-label[class*="b2b"],
body .page-wrapper .navigation.verticalmenu
  .cat-label[class*="-pro"] {
  background: #0369a1 !important;
  color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  body .page-wrapper .navigation.verticalmenu
    .cat-label.label-hot,
  body .page-wrapper .navigation.verticalmenu
    .cat-label[class*="hot"] {
    animation: none !important;
  }
}

@media (min-width: 992px) {
  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown {
    scroll-behavior: smooth;
  }
}

body .page-wrapper .search-autocomplete li:hover,
body .page-wrapper .block-search .search-autocomplete li:hover {
  background: color-mix(in srgb, var(--awa-primary, #b73337) 6%, transparent) !important;
  color: var(--awa-text, #1e293b) !important;
}

body .page-wrapper .search-autocomplete li[aria-selected="true"],
body .page-wrapper .search-autocomplete li.selected,
body .page-wrapper .search-autocomplete li.active,
body .page-wrapper .search-autocomplete li.awa-ac-active,
body .page-wrapper .search-autocomplete [role="option"][aria-selected="true"],
body .page-wrapper .search-autocomplete [role="option"].selected,
body .page-wrapper .search-autocomplete [role="option"].active,
body .page-wrapper .search-autocomplete [role="option"].awa-ac-active {
  background: color-mix(in srgb, var(--awa-primary, #b73337) 9%, transparent) !important;
}

@media (min-width: 992px) {
  body .page-wrapper .navigation.verticalmenu
    .togge-menu > li.expand-category-link {
    border-block-start: 1px solid
      color-mix(in srgb, var(--awa-primary, #b73337) 14%, transparent) !important;
  }

  body .awa-vmf-portal.submenu:focus-within,
  body .awa-vmf-portal.navigation__submenu:focus-within {
    box-shadow:
      4px 8px 24px rgb(15 23 42 / 10%),
      0 0 0 1px rgb(15 23 42 / 4%),
      0 0 0 3px color-mix(in srgb, var(--awa-primary, #b73337) 28%, transparent) !important;
  }
}

/* =============================================================================
 * AWA Premium Transform — Design System Overhaul 2026-05-07
 *
 * Purpose: Enforce luxury B2B interface standards:
 *   - Premium forms (48px height, 1.5px border, 8px radius, AWA Red focus ring)
 *   - B2B cleanup (remove green backgrounds, strikethrough, hide quote button)
 *   - 8px grid alignment
 *   - Color system enforcement (var(--awa-primary) primary, #1A1A1A text, #F9FAFB surfaces)
 *
 * Load order: after awa-bundle-refinements.css (last in cascade)
 * ============================================================================= */

/* ==========================================================================
   1. PREMIUM FORM INPUTS
   ========================================================================== */

/* All text inputs, selects, textareas */
body .page-wrapper input[type="text"],
body .page-wrapper input[type="email"],
body .page-wrapper input[type="password"],
body .page-wrapper input[type="tel"],
body .page-wrapper input[type="number"],
body .page-wrapper input[type="search"],
body .page-wrapper input[type="url"],
body .page-wrapper input.input-text,
body .page-wrapper select,
body .page-wrapper textarea {
  min-height: var(--awa-input-h, 48px);
  border: 1.5px solid var(--awa-border, #e5e5e5);
  border-radius: var(--awa-radius-sm, 8px);
  padding: 12px 16px;
  font-size: var(--awa-text-sm, 14px);
  color: var(--awa-text, #1A1A1A);
  background: var(--awa-bg, #FFFFFF);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

/* Focus ring — 2px AWA Red with reduced opacity */
body .page-wrapper input[type="text"]:focus,
body .page-wrapper input[type="email"]:focus,
body .page-wrapper input[type="password"]:focus,
body .page-wrapper input[type="tel"]:focus,
body .page-wrapper input[type="number"]:focus,
body .page-wrapper input[type="search"]:focus,
body .page-wrapper input[type="url"]:focus,
body .page-wrapper input.input-text:focus,
body .page-wrapper select:focus,
body .page-wrapper textarea:focus,
body .page-wrapper input[type="text"]:focus-visible,
body .page-wrapper input[type="email"]:focus-visible,
body .page-wrapper input[type="password"]:focus-visible,
body .page-wrapper input[type="tel"]:focus-visible,
body .page-wrapper input[type="number"]:focus-visible,
body .page-wrapper input[type="search"]:focus-visible,
body .page-wrapper input[type="url"]:focus-visible,
body .page-wrapper input.input-text:focus-visible,
body .page-wrapper select:focus-visible,
body .page-wrapper textarea:focus-visible {
  outline: none;
  border-color: var(--awa-primary, #b73337);
  box-shadow: 0 0 0 3px rgba(51, 51, 51, 0.20); /* Navy focus ring */
}

/* Labels — semibold 600, dark text */
body .page-wrapper .field > .label,
body .page-wrapper .field > label,
body .page-wrapper .fieldset > .field > .label,
body .page-wrapper .fieldset > .field > label,
body .page-wrapper .form .field .label {
  font-weight: 600;
  font-size: var(--awa-text-sm, 14px);
  color: #1A1A1A;
  margin-bottom: 4px;
  line-height: 1.4;
}

/* Help text / field notes — 12px, muted gray, 4px below */
body .page-wrapper .field .note,
body .page-wrapper .field .field-note,
body .page-wrapper .field-tooltip-content,
body .page-wrapper .field .mage-error,
body .page-wrapper .field .field-error {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 4px;
}

body .page-wrapper .field .note,
body .page-wrapper .field .field-note {
  color: #6B7280;
}

/* Error state */
body .page-wrapper .field .input-text.mage-error,
body .page-wrapper .field select.mage-error,
body .page-wrapper .field textarea.mage-error {
  border-color: var(--awa-error, #dc2626) !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

/* Valid state */
body .page-wrapper .field .input-text._valid,
body .page-wrapper .field select._valid,
body .page-wrapper .field textarea._valid {
  border-color: var(--awa-success, #10B981) !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
}

/* ==========================================================================
   2. PREMIUM BUTTONS — Consistent height & radius
   ========================================================================== */

body .page-wrapper .action.primary,
body .page-wrapper button.action.primary {
  min-height: var(--awa-btn-h, 48px);
  border-radius: var(--awa-radius-sm, 8px);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body .page-wrapper .action.primary:hover,
body .page-wrapper button.action.primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--awa-shadow-brand);
}

body .page-wrapper .action.primary:active,
body .page-wrapper button.action.primary:active {
  transform: scale(0.98);
}

/* ==========================================================================
   3. B2B CLEANUP — Remove visual noise
   ========================================================================== */

/* Hide "Solicitar Orçamento" / quote request button on cart page */
body .page-wrapper .b2b-cart-quote-wrapper {
  display: none !important; /* B2B cleanup: quote button hidden per design spec */
}

/* Remove green backgrounds from B2B status indicators — use white + accent */
body .page-wrapper .b2b-status-approved,
body .page-wrapper .b2b-status.approved {
  background: var(--awa-bg, #FFFFFF);
  border: 1.5px solid var(--awa-success, #10B981);
  color: var(--awa-success, #10B981);
}

/* Replace strikethrough with clean completed state */
body .page-wrapper .b2b-checklist-item.completed .b2b-checklist-label {
  text-decoration: none;
  color: var(--awa-gray-400, #9ca3af);
}

body .page-wrapper .b2b-checklist-item.completed::before {
  content: "✓";
  color: var(--awa-success, #10B981);
  font-weight: 700;
  margin-right: 8px;
}

/* Clean old-price strikethrough — keep but with refined thickness */
body .page-wrapper .old-price .price {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--awa-gray-400, #9ca3af);
  color: var(--awa-gray-400, #9ca3af);
}

/* Success messages — use new green token, white background */
body .page-wrapper .message.success {
  background: #ECFDF5; /* emerald-50, matches #10B981 */
  border-left-color: var(--awa-success, #10B981);
  color: #065F46; /* emerald-800 for text */
}

/* ==========================================================================
   4. 8px GRID ALIGNMENT
   ========================================================================== */

/* Section spacing — 8px multiples */
body .page-wrapper .page-main > .columns,
body .page-wrapper .page-main > .widget,
body .page-wrapper .page-main > section {
  margin-bottom: 32px; /* 4 × 8px — reduzido de 48px para evitar duplo espaçamento (#Issue-05) */
}

body .page-wrapper .fieldset > .field {
  margin-bottom: 16px; /* 2 × 8px */
}

body .page-wrapper .fieldset > .field:last-child {
  margin-bottom: 0;
}

/* Card / panel padding */
body .page-wrapper .block-content,
body .page-wrapper .cart-summary,
body .page-wrapper .form-address-edit,
body .page-wrapper .form-login,
body .page-wrapper .form-create-account {
  padding: 24px; /* 3 × 8px */
}

/* Gap standardization */
body .page-wrapper .form-address-edit .fieldset,
body .page-wrapper .form-login .fieldset,
body .page-wrapper .form-create-account .fieldset {
  gap: 16px;
}

/* ==========================================================================
   5. SURFACE & TEXT COLOR ENFORCEMENT
   ========================================================================== */

/* Subtle surface backgrounds */
body .page-wrapper .sidebar,
body .page-wrapper .cart-summary {
  background-color: var(--awa-bg-subtle, #F9FAFB);
}

/* Product image: fundo branco puro — evita borda cinza em fotos com bg branco (#Issue-07) */
body .page-wrapper .product-image-container {
  background-color: #ffffff;
}

/* Body text color enforcement */
body .page-wrapper p,
body .page-wrapper li,
body .page-wrapper td,
body .page-wrapper .product-info-main .product.attribute.description {
  color: var(--awa-text, #1A1A1A);
}

/* Headings — all #1A1A1A */
body .page-wrapper h1,
body .page-wrapper h2,
body .page-wrapper h3,
body .page-wrapper h4,
body .page-wrapper h5,
body .page-wrapper h6 {
  color: var(--awa-text, #1A1A1A);
}

/* ==========================================================================
   6. MOBILE REFINEMENTS
   ========================================================================== */

@media (max-width: 767px) {
  body .page-wrapper input[type="text"],
  body .page-wrapper input[type="email"],
  body .page-wrapper input[type="password"],
  body .page-wrapper input[type="tel"],
  body .page-wrapper input[type="number"],
  body .page-wrapper input.input-text,
  body .page-wrapper select,
  body .page-wrapper textarea {
    min-height: var(--awa-input-h, 48px);
    font-size: 16px; /* Prevent iOS zoom on focus */
  }

  body .page-wrapper .page-main > .columns,
  body .page-wrapper .page-main > .widget,
  body .page-wrapper .page-main > section {
    margin-bottom: 32px; /* 4 × 8px */
  }

  body .page-wrapper .block-content,
  body .page-wrapper .cart-summary,
  body .page-wrapper .form-address-edit,
  body .page-wrapper .form-login,
  body .page-wrapper .form-create-account {
    padding: 16px; /* 2 × 8px */
  }
}

/* ==========================================================================
   7. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  body .page-wrapper input[type="text"],
  body .page-wrapper input[type="email"],
  body .page-wrapper input[type="password"],
  body .page-wrapper input[type="tel"],
  body .page-wrapper input[type="number"],
  body .page-wrapper input.input-text,
  body .page-wrapper select,
  body .page-wrapper textarea {
    transition: none !important;
  }
}

/* ==========================================================================
   8. PREMIUM CARDS & LIQUID GLASS
   ========================================================================== */

body .page-wrapper .product-item-info {
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--awa-radius-lg, 16px);
  background: var(--awa-bg-surface);
}

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


/* ==========================================================================
   6. MOBILE REFINEMENTS & RESPONSIVIDADE
   ========================================================================== */

/* Trava global de eixo horizontal para prevenir o "balanço" da tela */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

@media (max-width: 767px) {
  body .page-wrapper input[type="text"],
  body .page-wrapper input[type="email"],
  body .page-wrapper input[type="password"],
  body .page-wrapper input[type="tel"],
  body .page-wrapper input[type="number"],
  body .page-wrapper input.input-text,
  body .page-wrapper select,
  body .page-wrapper textarea {
    min-height: var(--awa-input-h, 48px);
    font-size: 16px; /* Prevent iOS zoom on focus */
  }

  body .page-wrapper .page-main > .columns,
  body .page-wrapper .page-main > .widget,
  body .page-wrapper .page-main > section {
    margin-bottom: 32px; /* 4 × 8px */
  }

  body .page-wrapper .block-content,
  body .page-wrapper .cart-summary,
  body .page-wrapper .form-address-edit,
  body .page-wrapper .form-login,
  body .page-wrapper .form-create-account {
    padding: 16px; /* 2 × 8px */
  }

  /* Tabelas responsivas com Touch Scroll (exclusivo para tabelas largas) */
  body .page-wrapper .table-wrapper,
  body .page-wrapper .cart.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 24px;
    border-right: 1px solid var(--awa-border, #E2E8F0);
  }

  body .page-wrapper .table-wrapper table {
    min-width: 600px;
  }
}

/* ==========================================================================
   7. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  body .page-wrapper input[type="text"],
  body .page-wrapper input[type="email"],
  body .page-wrapper input[type="password"],
  body .page-wrapper input[type="tel"],
  body .page-wrapper input[type="number"],
  body .page-wrapper input.input-text,
  body .page-wrapper select,
  body .page-wrapper textarea {
    transition: none !important;
  }
}

/* ==========================================================================
   8. PREMIUM CARDS & LIQUID GLASS
   ========================================================================== */

body .page-wrapper .product-item-info {
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--awa-radius-lg, 16px);
  background: var(--awa-bg-surface);
}

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

/* Liquid Glass Header / Nav */
body .page-wrapper .page-header {
  background: var(--awa-glass-bg);
  backdrop-filter: var(--awa-glass-blur);
  -webkit-backdrop-filter: var(--awa-glass-blur);
  border-bottom: 1px solid var(--awa-glass-border);
}

/* ==========================================================================
   9. PERFORMANCE (CLS) & ACESSIBILIDADE
   ========================================================================== */

/* Prevenção de Cumulative Layout Shift (CLS) */
body .page-wrapper .product-image-photo {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  content-visibility: auto;
  contain-intrinsic-size: 240px;
}

/* Focus Ring Global (A11y) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--awa-primary) !important;
  outline-offset: 2px;
}
/* =============================================================================
   AWA MOTOS — B2B Color Fix & Visual Refinement
   Corrige inconsistências de cor, contraste e hierarquia visual.
   Carregado por ÚLTIMO — maior prioridade na cascata.
   Gerado: 2026-05-08
   =============================================================================
*/

/* ── 1. ROOT TOKEN OVERRIDE — Paleta AWA Red (Fase 7) ── */
:root {
    /* === PALETA PRIMÁRIA AWA RED === */
    --awa-primary:          #b73337;
    --awa-primary-hover:    #8e2629;
    --awa-primary-dark:     #8e2629;
    --awa-primary-light:    #fcefee;
    --awa-primary-subtle:   rgba(183, 51, 55, 0.08);
    --awa-brand-opacity-10: rgba(183, 51, 55, 0.10);
    --awa-brand-opacity-15: rgba(183, 51, 55, 0.15);

    /* === CTA (ações/botões de conversão) === */
    --awa-cta:              #b73337;
    --awa-cta-hover:        #8e2629;
    --awa-cta-dark:         #8e2629;
    --awa-cta-light:        #fcefee;
    --awa-cta-subtle:       rgba(183, 51, 55, 0.08);

    /* Texto */
    --awa-text:             #333333;
    --awa-text-primary:     #333333;
    --awa-text-secondary:   #666666;
    --awa-text-muted:       #999999;
    --awa-text-inverse:     #ffffff;

    /* Backgrounds */
    --awa-bg:               #ffffff;
    --awa-bg-subtle:        #F8FAFC;
    --awa-bg-muted:         #F1F5F9;
    --awa-bg-surface:       #ffffff;
    --awa-bg-page:          #ffffff;

    /* Bordas */
    --awa-border:           #E2E8F0;
    --awa-border-strong:    #CBD5E1;
    --awa-border-subtle:    #F1F5F9;

    /* Aliases legados — sincronizados com AWA Red */
    --awa-red:              #b73337; /* alias de --awa-primary */
    --awa-red-dark:         #8e2629;
    --awa-red-bg:           rgba(183, 51, 55, 0.06);
    --awa-red-light:        #fcefee;

    /* Nav tokens */
    --awa-nav-bg:           #b73337;
    --awa-nav-bg-hover:     #8e2629;
    --awa-nav-text:         #ffffff;

    /* Shadow brand */
    --awa-shadow-brand:     0 4px 16px rgba(183, 51, 55, 0.30);

    /* hprem tokens (header premium) */
    --awa-hprem-c4: #b73337;
}


/* ── 2. BODY & PAGE — Fundo branco puro ── */
body,
.page-wrapper,
#html-body {
    background-color: #ffffff !important;
}

.page-main,
.page-main > .columns,
.columns .column.main {
    background-color: #ffffff;
}


/* ── 3. HEADER AREA — Branco limpo, sem fundos sujos ── */
.page-header,
.header.content,
.header-content,
.awa-main-header,
.header-middle-section {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Utility bar topo (escuro, intencional) — mantém mas melhora legibilidade */
.page-wrapper .panel.wrapper,
.awa-utility-bar,
.top-header .panel.wrapper {
    background-color: #1a1a1a !important;
    color: #cccccc !important;
}

.page-wrapper .panel.wrapper a,
.awa-utility-bar a {
    color: #cccccc !important;
}

.page-wrapper .panel.wrapper a:hover,
.awa-utility-bar a:hover {
    color: #ffffff !important;
}

/* Nav bar — ui-ux-pro-max: barra branca; só coluna Departamentos vermelha */
.nav-sections:not(.category-dropdown, .category-dropdown-items, .category-dropdown-item-content),
.page-wrapper .nav-sections:not(.category-dropdown, .category-dropdown-items, .category-dropdown-item-content) {
    background: var(--awa-primary) !important;
    background-image: none !important;
    color: #ffffff !important;
}

.header-control.header-nav-global.awa-nav-bar,
.page-wrapper .header-control.header-nav-global.awa-nav-bar,
.page-wrapper .header-control.awa-nav-bar {
    background: #ffffff !important;
    background-image: none !important;
    color: #333333 !important;
    border-block-start: 1px solid #e5e5e5;
    border-block-end: 1px solid #e5e5e5;
}

/* Links de navegação na barra branca */
.header-control.header-nav-global.awa-nav-bar a,
.page-wrapper .header-control.awa-nav-bar .awa-nav-quick-links__link,
.page-wrapper .header-control.awa-nav-bar .top-menu a {
    color: #333333 !important;
}

.header-control.header-nav-global.awa-nav-bar a:hover,
.page-wrapper .header-control.awa-nav-bar .awa-nav-quick-links__link:hover,
.page-wrapper .header-control.awa-nav-bar .top-menu a:hover {
    color: var(--awa-primary) !important;
    text-decoration: none;
}

/* Departamentos — coluna vermelha */
.page-wrapper .header-control.awa-nav-bar .awa-header-categories.menu_left_home1,
.page-wrapper .header-control.awa-nav-bar .our_categories.title-category-dropdown,
.page-wrapper .header-control.awa-nav-bar button[data-role="awa-vertical-menu-trigger"] {
    background: var(--awa-primary) !important;
    color: #ffffff !important;
}

/* Mega menu dropdown — fundo branco com texto escuro */
.nav-sections .submenu,
.nav-sections .navigation .level0 .submenu,
.awa-nav-bar .awa-dropdown-menu,
.megamenu-dropdown,
.mega-nav-dropdown {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-top: 3px solid var(--awa-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.nav-sections .submenu a,
.nav-sections .navigation .level0 .submenu a,
.awa-nav-bar .awa-dropdown-menu a,
.megamenu-dropdown a {
    color: #333333 !important;
}

.nav-sections .submenu a:hover,
.nav-sections .navigation .level0 .submenu a:hover,
.awa-nav-bar .awa-dropdown-menu a:hover {
    color: var(--awa-primary) !important;
    background-color: #F7F7F7 !important;
}
/* BUG-VMF-01: li elements with .navigation class incorrectly inherit nav-bar
   background (var(--awa-primary)) from the .navigation selector above.
   Rokanthemes VerticalMenu assigns class="navigation" to level1/level2 LIs.
   This reset ensures submenu list items are transparent. */
li.navigation {
    background: transparent !important;
    color: inherit !important;
}
/* Also reset link color inside portal submenus */
.awa-vmf-portal li.navigation a,
.level0.submenu li.navigation a {
    color: #555555 !important;
}


/* ── 4. SECTIONS — Fundo branco como padrão ── */
.cms-index-index .page-main,
.cms-index-index main,
.page-layout-2columns-left .page-main,
.page-layout-1column .page-main {
    background-color: #ffffff;
}

/* Seções de separação — cinza SUAVE (#F7F7F7), não cinza sujo */
.awa-section--alt,
.section-alt,
.block-products-list,
.widget.block,
.home-section-bg {
    background-color: #F7F7F7;
}

/* Remover fundos cinzas "sujos" de seções gerais */
.category-description,
.catalog-category-view .page-main,
.catalogsearch-result-index .page-main {
    background-color: #ffffff;
}


/* ── 5. CARDS & CONTAINERS — Branco limpo com borda sutil ── */
.product-item,
.product-item-info,
.awa-product-card,
.products-grid .product-item {
    background-color: #ffffff !important;
    border: 1px solid #E5E5E5 !important;
}

.product-item:hover,
.product-item-info:hover,
.awa-product-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10) !important;
    border-color: #D0D0D0 !important;
}

/* Cards de informação / widget blocks */
.block,
.sidebar .block,
.awa-card,
[class*="awa-"][class*="-card"] {
    background-color: #ffffff;
}


/* ── 6. BUTTONS — CTA Blue para botões de conversão ── */

/* Botão primário — CTA Blue com texto branco */
.action.primary,
.btn-primary,
.button.primary,
button.primary,
input[type="submit"].primary,
.awa-btn-primary,
.tocart,
.action-primary {
    background-color: var(--awa-cta, #b73337) !important;
    border-color: var(--awa-cta, #b73337) !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.action.primary:hover,
.btn-primary:hover,
.button.primary:hover,
button.primary:hover,
.awa-btn-primary:hover,
.tocart:hover,
.action-primary:hover {
    background-color: var(--awa-cta-hover, #8e2629) !important;
    border-color: var(--awa-cta-hover, #8e2629) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(183, 51, 55, 0.30) !important;
}

/* Botão "Comprar" / Add to cart */
.product-item .action.tocart,
.product-item-actions .action.tocart {
    background-color: var(--awa-cta, #b73337) !important;
    color: #ffffff !important;
    border-color: var(--awa-cta, #b73337) !important;
}

.product-item .action.tocart:hover,
.product-item-actions .action.tocart:hover {
    background-color: var(--awa-cta-hover, #8e2629) !important;
    color: #ffffff !important;
}

/* Botões de ação secundários */
.action.secondary,
.btn-secondary,
.button.secondary,
.awa-btn-secondary {
    background-color: transparent !important;
    border-color: var(--awa-primary, #b73337) !important;
    color: var(--awa-primary, #b73337) !important;
}

.action.secondary:hover,
.btn-secondary:hover,
.awa-btn-secondary:hover {
    background-color: var(--awa-primary, #b73337) !important;
    color: #ffffff !important;
}

/* Botão genérico branco/neutro — preto sobre branco */
.action:not(.primary):not(.secondary):not(.tocart):not([class*="awa-btn"]),
.btn:not(.btn-primary):not(.btn-secondary) {
    color: #333333;
}


/* ── 7. TYPOGRAPHY — Contraste e hierarquia ── */
body,
.page-wrapper {
    color: #333333;
    font-size: 14px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.product-item-name,
.product-item-name a,
.product.name a {
    color: #333333;
}

p, li, td, th,
.product-item-description,
.short-description {
    color: #333333;
}

/* Links gerais — vermelho AWA */
a {
    color: var(--awa-primary);
}

a:hover {
    color: var(--awa-primary-dark, #8e2629);
    text-decoration: underline;
}

/* Texto secundário/muted */
.secondary-text,
.text-muted,
.price-label,
.product-info-price .price-label,
.minimal-price-link .label {
    color: #666666;
}


/* ── 8. BORDERS — Normalização ── */
.product-item,
.block,
.awa-card,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
select,
textarea {
    border-color: #E5E5E5;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    border-color: var(--awa-primary, #b73337) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.20) !important; /* AWA Red focus ring */
}

/* Divisores horizontais */
hr,
.separator {
    border-color: #E5E5E5;
}


/* ── 9. PRICE — Vermelho para preços especiais, escuro para regular ── */
.price-box .price,
.price {
    color: #333333;
}

.price-box .special-price .price,
.special-price .price,
.price-final_price .price {
    color: var(--awa-primary) !important;
}

.price-box .old-price .price,
.old-price .price {
    color: var(--awa-text-muted, #999999);
    text-decoration: line-through;
}


/* ── 10. BADGES & LABELS — Padronizados ── */
.sale-badge,
.badge-sale,
[class*="product-label"][class*="sale"],
[class*="product-label"][class*="promo"],
.product-badge.new,
.product-badge.sale {
    background-color: var(--awa-primary) !important;
    color: #ffffff !important;
}

.product-badge.new,
[class*="product-label"][class*="new"] {
    background-color: #333333 !important;
    color: #ffffff !important;
}


/* ── 11. FOOTER — Tema claro (_footer.less) ── */
.page_footer,
.page-footer {
    background-color: #f9fafb !important;
    background-image: none !important;
    border-top: 3px solid var(--awa-primary, #b73337) !important;
    color: #333333 !important;
}

.page_footer .footer-container,
.page_footer #footer,
.page_footer .footer-container.layout2,
.page_footer .footer-static,
.page_footer .velaBlock,
.page-footer .footer-static,
.page-footer .velaBlock {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #333333 !important;
}

.page_footer .footer-bottom,
.footer-bottom {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-top: 1px solid #e2e2e2 !important;
}

.page_footer .footer-copyright,
.footer-copyright,
.page-footer .copyright,
.page_footer .copyright,
.page_footer .awa-footer-bottom__copyright {
    background-color: #f1f5f9 !important;
    color: #666666 !important;
    border-top: 1px solid #e2e2e2 !important;
}

.page_footer a:not(.footer-bottom a):not(.footer-copyright a):not(.copyright a),
.page-footer a:not(.footer-bottom a):not(.footer-copyright a):not(.copyright a) {
    color: #333333;
}
.page_footer a:hover:not(.footer-bottom a):not(.footer-copyright a):not(.copyright a),
.page-footer a:hover:not(.footer-bottom a):not(.footer-copyright a):not(.copyright a) {
    color: var(--awa-primary, #b73337);
}

/* Links no footer-bottom e copyright: normais */
.footer-bottom a,
.footer-copyright a,
.copyright a {
    color: #666666;
}
.footer-bottom a:hover,
.footer-copyright a:hover,
.copyright a:hover {
    color: var(--awa-primary, #b73337);
}


/* ── 12. BREADCRUMB — Limpo ── */
.breadcrumbs,
.breadcrumb {
    background-color: transparent;
}

.breadcrumbs a,
.breadcrumb a {
    color: #666666;
}

.breadcrumbs a:hover,
.breadcrumb a:hover {
    color: var(--awa-primary);
}

.breadcrumbs .item.current,
.breadcrumb .item:last-child {
    color: #333333;
}


/* ── 13. SIDEBAR / FILTERS — Fundo branco ── */
.sidebar,
.sidebar-main,
.block-layered-nav,
.layered-nav {
    background-color: #ffffff;
}

.filter-title,
.block-layered-nav .block-title,
.filter .filter-title strong {
    color: #333333;
    background-color: #F7F7F7;
}

.filter-options-item .filter-options-title {
    color: #333333;
    border-bottom: 1px solid #E5E5E5;
}

.filter-options-item .filter-options-title:hover {
    color: var(--awa-primary);
}

.filter-options-content a,
.filter-options a {
    color: #333333;
}

.filter-options-content a:hover {
    color: var(--awa-primary);
}


/* ── 14. TOOLBAR / SORTER — Limpo ── */
.toolbar-products,
.toolbar {
    background-color: #ffffff;
    border-bottom: 1px solid #E5E5E5;
}

.toolbar-products .toolbar-amount,
.toolbar-amount {
    color: #666666;
}


/* ── 15. MESSAGES — Feedback visual ── */
.message.success,
div.message.success {
    background-color: #f0fdf4;
    border: 1px solid color-mix(in srgb, #10B981 35%, transparent);
    border-radius: 6px;
    color: #166534;
}

.message.error,
div.message.error {
    background-color: #fef2f2;
    border: 1px solid color-mix(in srgb, #dc2626 30%, transparent);
    border-radius: 6px;
    color: #7f1d1d;
}

.message.warning,
div.message.warning {
    background-color: #fff7ed;
    border: 1px solid color-mix(in srgb, #f97316 30%, transparent);
    border-radius: 6px;
    color: #9a3412;
}

.message.info,
div.message.info {
    background-color: #eff6ff;
    border: 1px solid color-mix(in srgb, #0ea5e9 30%, transparent);
    border-radius: 6px;
    color: #1e40af;
}


/* ── 16. CHECKOUT / CART — Limpo e profissional ── */
.cart-summary,
.opc-block-summary {
    background-color: #F7F7F7;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
}

.cart-totals .totals.grand .amount .price,
.grand.totals .price {
    color: var(--awa-primary);
    font-weight: 700;
}


/* ── 17. MINICART — Limpo ── */
.minicart-wrapper .block-minicart {
    background-color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid #E5E5E5;
}


/* ── 18. SEARCH — Bordas padronizadas ── */
.block-search .form.minisearch,
.form.minisearch {
    border-color: #E5E5E5;
}

.block-search .form.minisearch:focus-within,
.form.minisearch:focus-within {
    border-color: var(--awa-primary);
}


/* ── 19. PAGINAÇÃO — Botões limpos ── */
.pages .page,
.pages a.page,
.pages li.item a {
    color: #333333;
    border: 1px solid #E5E5E5;
    background-color: #ffffff;
}

.pages .page:hover,
.pages a.page:hover {
    border-color: var(--awa-primary);
    color: var(--awa-primary);
}

.pages .page.current,
.pages .current strong {
    background-color: var(--awa-primary);
    border-color: var(--awa-primary);
    color: #ffffff;
}


/* ── 20. B2B BADGES / STATUS — Profissional ── */
.awa-b2b-badge,
.b2b-status-badge {
    background-color: #333333;
    color: #ffffff;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.b2b-status-badge.approved,
.awa-b2b-badge.approved {
    background-color: #10B981;
}

.b2b-status-badge.pending,
.awa-b2b-badge.pending {
    background-color: #f97316;
}

/* Fim — awa-b2b-color-fix.css */

/* minicart icon harden */
#html-body .page-wrapper .awa-site-header .awa-header-minicart .minicart-wrapper .showcart.header-mini-cart .awa-minicart-icon{display:inline-block!important;width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;opacity:1!important;visibility:visible!important}
/* minicart icon fallback via background (survives legacy svg hide rules) */
#html-body .page-wrapper .awa-site-header .awa-header-minicart .minicart-wrapper .showcart.header-mini-cart{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3Cpath d='M3.5 4h2l2.2 10.2a1 1 0 0 0 1 .8h8.6a1 1 0 0 0 1-.8L20 7H7.1'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:center!important;background-size:20px 20px!important}

/* minicart modal bugfix: force desktop dropdown behavior (no full-screen drawer/overlay) */
@media (min-width: 992px){
#html-body .page-wrapper .awa-site-header .awa-header-minicart .minicart-wrapper{position:relative!important}
#html-body .page-wrapper .awa-site-header .awa-header-minicart .minicart-wrapper .block-minicart,
#html-body .page-wrapper .awa-site-header .awa-header-minicart .minicart-wrapper .mage-dropdown-dialog{position:absolute!important;top:calc(100% + 8px)!important;right:0!important;left:auto!important;bottom:auto!important;width:min(360px,92vw)!important;max-width:min(360px,92vw)!important;height:auto!important;max-height:78vh!important;overflow:auto!important;box-shadow:0 12px 28px rgba(15,23,42,.18)!important;border-radius:12px!important;z-index:100130!important}
#html-body .page-wrapper .awa-site-header .awa-header-minicart .minicart-wrapper .block-minicart::before,
#html-body .page-wrapper .awa-site-header .awa-header-minicart .minicart-wrapper .mage-dropdown-dialog::before{display:none!important;content:none!important}
}

/* minicart dropdown hard override (desktop) */
@media (min-width:992px){
.page-wrapper #header.header-container[data-awa-header-shell="true"] .minicart-wrapper .block-minicart,
.page-wrapper #header.header-container[data-awa-header-shell="true"] .minicart-wrapper.active .block-minicart,
.page-wrapper #header.header-container[data-awa-header-shell="true"] .minicart-wrapper.show .block-minicart,
#html-body .page-wrapper .header .top-search .minicart-wrapper .block-minicart,
#html-body .page-wrapper .minicart-wrapper .block-minicart{
position:absolute!important;
inset:auto 0 auto auto!important;
top:calc(100% + 8px)!important;
right:0!important;
left:auto!important;
bottom:auto!important;
width:min(360px,92vw)!important;
max-width:min(360px,92vw)!important;
height:auto!important;
max-height:78vh!important;
overflow-y:auto!important;
overflow-x:hidden!important;
border-radius:12px!important;
box-shadow:0 12px 28px rgba(15,23,42,.18)!important;
}
.page-wrapper #header.header-container[data-awa-header-shell="true"] .minicart-wrapper .block-minicart::before,
#html-body .page-wrapper .minicart-wrapper .block-minicart::before{
display:none!important;
content:none!important;
opacity:0!important;
pointer-events:none!important;
}
}

/* account header cart visibility hard-fix */
@media (min-width: 992px) {
  #html-body.b2b-auth-shell .page-wrapper .awa-site-header .awa-header-right-col .awa-header-minicart,
  #html-body.b2b-auth-shell .page-wrapper .awa-site-header .awa-header-right-col .mini-cart-wrapper,
  #html-body.b2b-auth-shell .page-wrapper .awa-site-header .awa-header-right-col .mini-carts,
  #html-body.b2b-auth-shell .page-wrapper .awa-site-header .awa-header-right-col .minicart-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    overflow: visible !important;
    position: relative !important;
  }

  #html-body.b2b-auth-shell .page-wrapper .awa-site-header .awa-header-right-col .minicart-wrapper .showcart,
  #html-body.b2b-auth-shell .page-wrapper .awa-site-header .awa-header-right-col .minicart-wrapper .action.showcart {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* account shell: prevent hidden showcart */
@media (min-width: 992px) {
  #html-body.b2b-auth-shell .page-wrapper .awa-site-header .minicart-wrapper .showcart,
  #html-body.b2b-auth-shell .page-wrapper .awa-site-header .minicart-wrapper .action.showcart {
    opacity: 1 !important;
    visibility: visible !important;
    background-color: transparent !important;
  }
}

/* keep showcart visible even if wrapper stays active */
@media (min-width: 992px) {
  #html-body .page-wrapper .minicart-wrapper.active > .showcart,
  #html-body .page-wrapper .minicart-wrapper.active > .action.showcart,
  #html-body .page-wrapper .minicart-wrapper.show > .showcart,
  #html-body .page-wrapper .minicart-wrapper.show > .action.showcart {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* expresscheckout/cart: prevent stuck minicart backdrop from dimming whole page */
body.checkout-cart-index .page-wrapper .minicart-wrapper::before,
body.checkout-cart-index .page-wrapper .minicart-wrapper.active::before,
body.checkout-cart-index .page-wrapper .minicart-wrapper.show::before,
body.checkout-cart-index .page-wrapper .minicart-wrapper .block-minicart::before,
body.checkout-cart-index .page-wrapper .minicart-wrapper .block-minicart._active::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.checkout-cart-index .page-wrapper .minicart-wrapper .block-minicart._active,
body.checkout-cart-index .page-wrapper .minicart-wrapper.active .block-minicart,
body.checkout-cart-index .page-wrapper .minicart-wrapper.is-open .block-minicart,
body.checkout-cart-index .page-wrapper .minicart-wrapper.show .block-minicart {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  box-shadow: none !important;
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* expresscheckout/cart: hard-stop global dimming overlays stuck by legacy scripts */
body.checkout-cart-index .modals-overlay,
body.checkout-cart-index .modal-custom-overlay,
body.checkout-cart-index .modal-popup._show,
body.checkout-cart-index .modal-slide._show,
body.checkout-cart-index .awa-mobile-drawer-overlay,
body.checkout-cart-index .awa-mobile-drawer-overlay.is-active,
body.checkout-cart-index .awa-nav-overlay,
body.checkout-cart-index .awa-nav-overlay.is-visible {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── 21. NAVY ELIMINATION (Search & Departamentos) ── */
/* Search Button (Header) */
#html-body .page-wrapper .block-search .action.search,
#html-body .page-wrapper .awa-site-header .awa-professional-search button.action.search,
#html-body .page-wrapper .awa-site-header .awa-main-header .awa-header-search-col button.action.search,
#html-body .page-wrapper .awa-site-header form#search_mini_form button.action.search {
    background-color: var(--awa-primary) !important;
}

#html-body .page-wrapper .block-search .action.search:hover,
#html-body .page-wrapper .awa-site-header .awa-professional-search button.action.search:hover,
#html-body .page-wrapper .awa-site-header .awa-main-header .awa-header-search-col button.action.search:hover,
#html-body .page-wrapper .awa-site-header form#search_mini_form button.action.search:hover {
    background-color: var(--awa-primary-dark) !important;
}

/* Departamentos Button */
#html-body .page-wrapper .navigation.verticalmenu .our_categories.title-category-dropdown,
#html-body .page-wrapper .our_categories.title-category-dropdown,
#html-body .page-wrapper .awa-site-header .awa-header-categories button.our_categories.title-category-dropdown {
    background-color: var(--awa-primary-dark) !important;
    color: #ffffff !important;
}

#html-body .page-wrapper .navigation.verticalmenu .our_categories.title-category-dropdown:hover,
#html-body .page-wrapper .our_categories.title-category-dropdown:hover,
#html-body .page-wrapper .awa-site-header .awa-header-categories button.our_categories.title-category-dropdown:hover {
    background-color: var(--awa-primary) !important;
}
/**
 * AWA UX Improvements
 * Micro-interações, acessibilidade (a11y) e otimizações de performance.
 *
 * FIXES 2026-05-09:
 * - REMOVIDO: img { content-visibility: auto } — causava CLS em TODAS as imagens (seletor excessivo)
 * - REMOVIDO: .product-item-info:hover { transform: translateY(-2px) } — VP-4 (awa-visual-polish-r2.css)
 *   já aplica transform no .product-item (pai). Repetir no filho (.product-item-info) acumulava -4px.
 * - REMOVIDO: will-change:transform de .product-item-info — sem transform no elemento, sem necessidade.
 */

/* ==========================================================================
   1. TRANSIÇÕES E ANIMAÇÕES SUAVES (UX)
   ========================================================================== */

/* Cards de Produto: transição suave de sombra e borda ao hover.
   Transform é gerenciado pelo VP-4 no pai (.product-item) — não duplicar aqui. */
body .page-wrapper .product-item-info {
    transition: box-shadow var(--awa-duration, 0.25s) var(--awa-ease),
                border-color var(--awa-duration-fast, 0.15s) var(--awa-ease) !important;
    will-change: box-shadow;
}

body .page-wrapper .product-item-info:hover {
    box-shadow: var(--awa-shadow-md);
}

/* Botões Primários: feedback visual ao interagir */
body .page-wrapper .action.primary {
    transition: background-color var(--awa-duration-fast) var(--awa-ease),
                border-color var(--awa-duration-fast) var(--awa-ease),
                box-shadow var(--awa-duration-fast) var(--awa-ease),
                transform var(--awa-duration-fast) var(--awa-ease) !important;
}

body .page-wrapper .action.primary:active {
    transform: scale(0.98);
}

/* ==========================================================================
   2. ACESSIBILIDADE (A11Y) — WCAG 2.1
   ========================================================================== */

/* Focus Rings visíveis para navegação por teclado */
:focus-visible {
    outline: 2px solid var(--awa-primary) !important;
    outline-offset: 2px !important;
}

/* Utility: visível apenas para leitores de tela */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Legibilidade de textos */
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   3. PERFORMANCE — CLS GUARDS
   ========================================================================== */

/* Reservar espaço para imagens de produto antes do carregamento (evita CLS).
   Seletor específico (não "img" global) para não afetar imagens editoriais/banners. */
.fotorama__img,
.product-image-photo {
    aspect-ratio: 1 / 1;
}

/* GPU optimization para modais */
/* NOTA: will-change:transform NÃO deve ser aplicado em .navigation.verticalmenu
   pois cria novo containing block para position:fixed, deslocando o dropdown
   do viewport para o nav. */
.modal-popup {
    will-change: transform, opacity;
}

/* Reset explícito: garante que position:fixed do togge-menu seja relativo ao viewport */
.navigation.verticalmenu {
    will-change: auto;
}
/* ==========================================================================
 * AWA Motos — Mobile Drill-Down Navigation (v2 — flex-grid-flow)
 * Escopo: .navigation.verticalmenu mobile (<992px)
 * Cascata: carrega depois de awa-vertical-menu-modern.css
 * ========================================================================== */

@media (max-width: 991px) {

    .navigation.verticalmenu .vmm-drill-stage {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        width: 100%;
        min-height: 0;
        flex: 1 1 auto;
    }

    .navigation.verticalmenu .vmm-drill-panel {
        display: flex;
        flex-direction: column;
        gap: 0;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        min-height: 60px;
    }

    .navigation.verticalmenu .vmm-drill-panel > li {
        border-block-end: 1px solid var(--awa-vmenu-border-subtle, color-mix(in srgb, var(--awa-text, #333) 8%, transparent));
    }

    .navigation.verticalmenu .vmm-drill-panel > li:last-child {
        border-block-end: none;
    }

    .navigation.verticalmenu .vmm-drill-panel > li > a {
        align-items: center;
        color: var(--awa-text, #333);
        cursor: pointer;
        display: flex;
        font-size: var(--awa-font-sm, 14px);
        font-weight: 500;
        gap: var(--awa-space-2, 8px);
        min-height: var(--awa-touch-target, 44px);
        padding-block: var(--awa-space-2-5, 10px);
        padding-inline: var(--awa-space-4, 16px);
        text-decoration: none;
        transition: background-color 200ms ease, color 200ms ease;
    }

    .navigation.verticalmenu .vmm-drill-panel > li > a
    > span:not(.cat-label):not(.arrow) {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .navigation.verticalmenu .vmm-drill-panel > li > a:hover,
    .navigation.verticalmenu .vmm-drill-panel > li > a:focus-visible {
        background: var(--awa-vmenu-surface-hover, color-mix(in srgb, var(--awa-primary, #b73337) 8%, transparent));
        color: var(--awa-primary, #b73337);
        transform: none;
    }

    .navigation.verticalmenu .vmm-drill-panel > li > a:focus-visible {
        outline: 2px solid var(--awa-primary, #b73337);
        outline-offset: -2px;
    }

  /* Chevron 1:1 — sem translate no hover */
    .navigation.verticalmenu .vmm-drill-panel > li.parent > a::after,
    .navigation.verticalmenu .vmm-drill-panel > li.level0.parent > a::after {
        content: '';
        display: inline-grid;
        place-items: center;
        margin-inline-start: auto;
        width: 0.5rem;
        height: 0.5rem;
        aspect-ratio: 1;
        border-inline-end: 2px solid currentColor;
        border-block-start: 2px solid currentColor;
        transform: rotate(45deg);
        opacity: 0.55;
        flex-shrink: 0;
    }

    /* Ocultar toggle accordion antigo dentro dos painéis drill */
    .navigation.verticalmenu .vmm-drill-panel .open-children-toggle {
        display: none !important;
    }

    /* Ocultar submenus aninhados (serão exibidos via drill, não accordion) */
    .navigation.verticalmenu .vmm-drill-panel li > .submenu,
    .navigation.verticalmenu .vmm-drill-panel li > ul.level0,
    .navigation.verticalmenu .vmm-drill-panel li > .subchildmenu {
        display: none !important;
    }

    /* ─── 3. LINK "VER TODOS" ───────────────────────────────────────── */

    .navigation.verticalmenu .vmm-drill-see-all {
        background: color-mix(in srgb, var(--awa-primary, #b73337) 6%, transparent);
        border-block-end: 2px solid color-mix(in srgb, var(--awa-primary, #b73337) 14%, transparent) !important;
    }

    .navigation.verticalmenu .vmm-drill-see-all-link {
        color: var(--awa-primary, var(--awa-primary)) !important;
        font-weight: 600 !important;
        font-size: 13px !important;
    }

    /* ─── 4. BACK BAR ────────────────────────────────────────────────── */

    .navigation.verticalmenu .vmm-drill-back-bar {
        align-items: center;
        background: var(--awa-primary, #b73337);
        color: var(--awa-white, #fff);
        display: flex;
        gap: var(--awa-space-2, 8px);
        min-height: var(--awa-touch-target, 44px);
        padding-block: var(--awa-space-2, 8px);
        padding-inline: max(var(--awa-space-3, 12px), env(safe-area-inset-left, 0));
        border-radius: 0;
        position: sticky;
        top: 0;
        z-index: 10;
        flex-shrink: 0;
    }

    .navigation.verticalmenu .vmm-drill-back-btn {
        align-items: center;
        background: none;
        border: none;
        border-radius: var(--awa-radius-sm, 6px);
        color: inherit;
        cursor: pointer;
        display: inline-grid;
        place-items: center;
        grid-auto-flow: column;
        gap: var(--awa-space-1, 4px);
        font-size: var(--awa-font-sm, 14px);
        font-weight: 600;
        min-height: var(--awa-touch-target, 44px);
        min-width: var(--awa-touch-target, 44px);
        padding-block: var(--awa-space-1, 4px);
        padding-inline: var(--awa-space-2, 8px);
        transition: background-color 200ms ease;
    }

    .navigation.verticalmenu .vmm-drill-back-btn:hover,
    .navigation.verticalmenu .vmm-drill-back-btn:focus-visible {
        background: color-mix(in srgb, var(--awa-white, #fff) 16%, transparent);
    }

    .navigation.verticalmenu .vmm-drill-back-btn:focus-visible {
        outline: 2px solid var(--awa-white, #fff);
        outline-offset: 2px;
    }

    .navigation.verticalmenu .vmm-drill-back-icon {
        display: inline-grid;
        place-items: center;
        aspect-ratio: 1;
        width: 1.125rem;
        height: 1.125rem;
        font-size: 1.125rem;
        line-height: 1;
    }

    .navigation.verticalmenu .vmm-drill-breadcrumb {
        flex: 1;
        font-size: var(--awa-font-sm, 13px);
        font-weight: 500;
        min-width: 0;
        opacity: 0.9;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ─── 5. ANIMAÇÃO — suprimir jogos de opacity antigas p/ painéis drill */
    /* Os painéis usam transform/left, não opacity, então garantir visibilidade */

    .navigation.verticalmenu .vmm-drill-stage .vmm-drill-panel {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* ─── 6. REDUCED MOTION ────────────────────────────────────────── */

    @media (prefers-reduced-motion: reduce) {
        .navigation.verticalmenu .vmm-drill-panel {
            transition: none !important;
        }
    }

} /* @media max-width:991px */

/* ══════════════════════════════════════════════════════════════════════════
   FASE 11 — Sistema visual unificado (2026-05-20)
   Coluna de ação fixa, trigger↔painel, chevron único, badge AWA, CTA flyout
   Fonte canônica — neutraliza Phase 7 (shell-fix) e duplicatas em homepage-sidebar
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  body .page-wrapper .navigation.verticalmenu.side-verticalmenu {
    --awa-vmenu-action-col: 14px;
    --awa-vmenu-badge-gap: 6px;
    --awa-vmenu-chevron-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
    --awa-vmenu-chevron-svg-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b73337' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
    --awa-vmenu-chevron-svg-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
  }

  /* Home dropdown: painel colado ao trigger vermelho */
  body .page-wrapper .menu_left_home1 {
    width: 280px !important;
    max-width: 280px !important;
    position: relative !important;
    overflow: visible !important;
  }

  body .page-wrapper .menu_left_home1
    [data-role="awa-vertical-menu-trigger"][aria-expanded="true"],
  body .page-wrapper .menu_left_home1
    [data-role="awa-vertical-menu-trigger"].active {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  body .page-wrapper .menu_left_home1
    .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown[data-awa-menu-state="open"],
  body .page-wrapper .menu_left_home1
    .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown[aria-hidden="false"] {
    margin-top: -1px !important;
  }

  body .page-wrapper .navigation.verticalmenu.side-verticalmenu {
    position: relative !important;
    overflow: visible !important;
  }

  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown[data-awa-menu-state="open"],
  body .page-wrapper .navigation.verticalmenu.side-verticalmenu
    > ul.togge-menu.list-category-dropdown[aria-hidden="false"] {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: var(--vmm-width, var(--awa-vmenu-panel-width, 280px)) !important;
    min-width: 280px !important;
    max-width: 280px !important;
    max-height: min(70vh, calc(100dvh - var(--awa-vmenu-header-offset, 200px))) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: var(--awa-layer-nav-panel, 920) !important;
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    transform: none !important;
    box-shadow: 0 12px 28px rgb(15 23 42 / 12%) !important;
  }

  /* Home: itens planos sem margem interna */
  body .page-wrapper .menu_left_home1
    .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0 > a.level-top {
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-block: 10px !important;
    padding-inline: 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333333 !important;
  }

  body .page-wrapper .navigation.verticalmenu .open-children-toggle.navigation__toggle {
    display: none !important;
  }

  body .page-wrapper .navigation.verticalmenu span.arrow {
    display: none !important;
  }

  /* Label flexível */
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0 > a.level-top
    > .navigation__label,
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0 > a.level-top
    > span:not(.awa-vmenu-icon):not(.cat-label):not(.arrow):not(.menu-thumb-icon):not(em) {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Badge — antes do chevron, não encolhe */
  body .page-wrapper .navigation.verticalmenu .cat-label {
    flex-shrink: 0;
    order: 10;
    margin: 0;
    margin-inline-start: var(--awa-vmenu-badge-gap);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.2;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body .page-wrapper .navigation.verticalmenu .cat-label-label2 {
    background: #b73337 !important;
    color: #ffffff !important;
  }

  /* Coluna de ação: ::after reserva 14px em TODOS os level-top
     !important: neutraliza Phase 7 shell-fix (border-triangle 6px com !important) */
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0 > a.level-top::after {
    content: "" !important;
    display: block !important;
    order: 20 !important;
    width: var(--awa-vmenu-action-col) !important;
    height: var(--awa-vmenu-action-col) !important;
    min-width: var(--awa-vmenu-action-col) !important;
    flex-shrink: 0 !important;
    margin-inline-start: auto !important;
    border: none !important;
    border-right: none !important;
    border-top: none !important;
    background-color: transparent !important;
    background-image: none !important;
    transform: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  /* Parent: chevron SVG visível */
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0.parent > a.level-top::after,
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0.navigation__item--parent > a.level-top::after {
    opacity: 0.85 !important;
    background-image: var(--awa-vmenu-chevron-svg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0.parent:hover > a.level-top::after,
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0.parent:focus-within > a.level-top::after,
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0.parent.vmm-active > a.level-top::after,
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0.parent.awa-vmf-active > a.level-top::after {
    opacity: 1 !important;
    background-image: var(--awa-vmenu-chevron-svg-active) !important;
    border: none !important;
    transform: none !important;
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0.parent.vmm-active > a.level-top::after,
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0.parent.awa-vmf-active > a.level-top::after {
    transform: rotate(90deg) !important;
  }

  /* Hover unificado — vence #f7f7f7 legado do homepage-sidebar/home-terminal */
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0 > a.level-top:hover,
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0 > a.level-top:focus-visible {
    background: color-mix(in srgb, #b73337 8%, #ffffff) !important;
    color: #333333 !important;
    transform: none !important;
    padding-inline: var(--awa-space-3-5, 14px) !important;
  }

  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0.vmm-active > a.level-top,
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0.awa-vmf-active > a.level-top {
    background: color-mix(in srgb, #b73337 12%, #ffffff) !important;
    color: #b73337 !important;
  }

  /* CTA "Ver tudo" no flyout — vence defer-global cinza */
  body .page-wrapper .navigation.verticalmenu .level0.submenu .navigation__inner-item--all > a,
  body .page-wrapper .navigation.verticalmenu .level0.submenu .navigation__inner-item--all > a.navigation__inner-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    margin-top: 8px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #b73337 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    transition: background-color 200ms ease !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body .page-wrapper .navigation.verticalmenu .level0.submenu .navigation__inner-item--all > a:hover,
  body .page-wrapper .navigation.verticalmenu .level0.submenu .navigation__inner-item--all > a:focus-visible {
    background: #8e2629 !important;
    color: #ffffff !important;
  }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  body .page-wrapper .navigation.verticalmenu .togge-menu.list-category-dropdown
    > li.ui-menu-item.level0 > a.level-top::after {
    transition: none !important;
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   FASE 12 — Macrodepartamentos (referência Tracbel, 2026-05-20)
   Agrupamento visual + CTA “Ver todos os departamentos” + flyout mais leve
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
  body .page-wrapper .menu_left_home1 .navigation.verticalmenu.awa-vmenu-grouped
    .awa-vmenu-group-header {
    list-style: none;
    margin: 0;
    padding: 10px 14px 4px;
    pointer-events: none;
    user-select: none;
  }

  body .page-wrapper .menu_left_home1 .navigation.verticalmenu.awa-vmenu-grouped
    .awa-vmenu-group-header:first-child {
    padding-top: 6px;
  }

  body .page-wrapper .menu_left_home1 .navigation.verticalmenu.awa-vmenu-grouped
    .awa-vmenu-group-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--awa-text-muted, #666666);
  }

  body .page-wrapper .menu_left_home1 .navigation.verticalmenu.awa-vmenu-grouped
    li.ui-menu-item.level0:not([data-awa-vm-group="destaques"]) .cat-label {
    display: none;
  }

  body .page-wrapper .menu_left_home1 .navigation.verticalmenu.awa-vmenu-grouped
    li.awa-vmenu-all-departments {
    margin-block-start: 4px;
    padding: 8px 10px 10px;
    border-block-start: 1px solid var(--awa-border, #e5e5e5);
    background: transparent;
  }

  body .page-wrapper .menu_left_home1 .navigation.verticalmenu.awa-vmenu-grouped
    .awa-vmenu-all-departments__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: #b73337;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0.01em;
    transition: background-color 200ms ease;
    box-sizing: border-box;
  }

  body .page-wrapper .menu_left_home1 .navigation.verticalmenu.awa-vmenu-grouped
    .awa-vmenu-all-departments__link::after {
    content: "";
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  body .page-wrapper .menu_left_home1 .navigation.verticalmenu.awa-vmenu-grouped
    .awa-vmenu-all-departments__link:hover,
  body .page-wrapper .menu_left_home1 .navigation.verticalmenu.awa-vmenu-grouped
    .awa-vmenu-all-departments__link:focus-visible {
    background: #8e2629;
    color: #ffffff;
  }

  /* Flyout mais leve (menos peso visual) */
  body .page-wrapper .menu_left_home1 .navigation.verticalmenu .level0.submenu
    .navigation__inner-list--level1 {
    padding: 16px 16px 14px 20px;
    min-height: 0;
    gap: 0 16px;
  }

  body .awa-vmf-portal.submenu,
  body .awa-vmf-portal.navigation__submenu {
    border-top: 2px solid var(--awa-primary, #b73337);
    border-inline-start-width: 0;
    box-shadow:
      2px 6px 18px rgb(15 23 42 / 8%),
      0 0 0 1px rgb(15 23 42 / 3%);
  }
}

@media (max-width: 991px) {
  body .page-wrapper .navigation.verticalmenu.awa-vmenu-grouped .awa-vmenu-group-header {
    padding: 12px 16px 6px;
  }

  body .page-wrapper .navigation.verticalmenu.awa-vmenu-grouped .awa-vmenu-group-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--awa-text-muted, #666666);
  }

  body .page-wrapper .navigation.verticalmenu.awa-vmenu-grouped
    li.ui-menu-item.level0:not([data-awa-vm-group="destaques"]) .cat-label {
    display: none;
  }

  body .page-wrapper .navigation.verticalmenu.awa-vmenu-grouped .awa-vmenu-all-departments {
    padding: 12px 14px 16px;
    border-block-start: 1px solid var(--awa-border, #e5e5e5);
  }

  body .page-wrapper .navigation.verticalmenu.awa-vmenu-grouped .awa-vmenu-all-departments__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 8px;
    background: #b73337;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
  }
}