/* ══════════════════════════════════════════════════════════════════
   AWA MOTOS — IMPECCABLE LAYOUT 2026-06-16
   FASE B structural fixes + Container Standards

   Especificidade: html body#html-body#html-body (duplo ID = 0,8,2+)
   Objetivo: superar todos os bundles terminais (0,7,2 máx) sem
   depender da ordem de carregamento.

   PROHIBITIONS honradas:
   ✗ sem !important em cascata global
   ✗ sem overflow:hidden para mascarar bugs
   ✗ sem regra global .awa-header-search-col button
   ✗ sem display:none no sidebar-main globalmente
   ══════════════════════════════════════════════════════════════════ */


/* ── §B5-P1 · PLP/Search desktop: sidebar fixo 260px ──────────────
   Fonte do bug: inline style early (minmax 220-240px) + terminal
   async atrasado. Duplo-ID garante vitória independente de cascade.
   Aplica apenas ≥992px — mobile/tablet mantém single-col correto.
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  html body#html-body#html-body:is(.catalog-category-view, .catalogsearch-result-index)
  .page-wrapper .page-main > .columns.layout.layout-2-col {
    grid-template-columns: 260px minmax(0, 1fr) !important;
    column-gap: 24px !important;
  }
}


/* ── §B5-P3 · MST search tab: remover quadrado vermelho ───────────
   O anchor ativo (#mst-search-tab-1.active) renderiza como bloco
   vermelho sólido sem texto visível — origin: algum ícone/clip rule.
   Reset completo + estilo de tab legível.
   ─────────────────────────────────────────────────────────────────── */
html body#html-body#html-body.catalogsearch-result-index
.page-wrapper .mst-search__result-tabs [role="tab"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 16px !important;
  min-height: 36px !important;
  height: auto !important;
  width: auto !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  font-family: inherit !important;
  border-radius: var(--awa-radius-sm, 6px) !important;
  border: 1px solid var(--awa-border, #e5e5e5) !important;
  background: transparent !important;
  color: var(--awa-text, #333) !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s, color 0.15s !important;
}

html body#html-body#html-body.catalogsearch-result-index
.page-wrapper .mst-search__result-tabs [role="tab"].active,
html body#html-body#html-body.catalogsearch-result-index
.page-wrapper .mst-search__result-tabs [role="tab"][aria-selected="true"] {
  background: var(--awa-primary, #b73337) !important;
  color: #fff !important;
  border-color: var(--awa-primary, #b73337) !important;
}

html body#html-body#html-body.catalogsearch-result-index
.page-wrapper .mst-search__result-tabs [role="tab"]:not(.active):hover {
  border-color: color-mix(in srgb, var(--awa-primary, #b73337) 40%, var(--awa-border, #e5e5e5)) !important;
  color: var(--awa-primary, #b73337) !important;
}

html body#html-body#html-body.catalogsearch-result-index
.page-wrapper .mst-search__result-tabs,
html body#html-body#html-body.catalogsearch-result-index
.page-wrapper ul.mst-search__result-tabs[role="tablist"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

html body#html-body#html-body.catalogsearch-result-index
.page-wrapper .mst-search__result-tabs li[role="presentation"] {
  display: block !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* ── §B5-P4 · "OCULTAR FILTROS" modes-label: tamanho correto ─────
   strong.modes-label#modes-label-top dentro de .modes no toolbar.
   Remover uppercase e reduzir para label size (13px/semibold).
   ─────────────────────────────────────────────────────────────────── */
html body#html-body#html-body:is(.catalog-category-view, .catalogsearch-result-index)
.page-wrapper strong#modes-label-top,
html body#html-body#html-body:is(.catalog-category-view, .catalogsearch-result-index)
.page-wrapper .modes .modes-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  color: var(--awa-text, #333) !important;
  display: inline-block !important;
}


/* ── §B7-P5 · Ícone carrinho header: sem quadrado vermelho tablet ─
   awa-plp-critical-fixes seta background:primary sem MQ. Aqui
   sobrescrevemos só para tablet (768-991px) com duplo-ID (0,8,2)
   que supera a origem (0,7,1) sem afetar desktop/mobile.
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991px) {
  html body#html-body#html-body .page-wrapper .awa-site-header
  .awa-header-minicart .action.showcart,
  html body#html-body#html-body .page-wrapper .awa-site-header
  .awa-header-minicart .minicart-wrapper .action.showcart,
  html body#html-body#html-body .page-wrapper #header
  .awa-header-minicart .action.showcart {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--awa-primary, #b73337) !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    text-decoration: none !important;
  }
}


/* ── §B1 · Cart page: grade 2-col confirmada (visual-guard) ──────
   O terminal já define display:grid para .cart-container.
   Esta regra é um guard de alta especificidade para garantir
   que o grid não seja regredido por algum bundle posterior.
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  html body#html-body#html-body.checkout-cart-index
  .page-wrapper .cart-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
    gap: var(--awa-grid-card-gap, 12px) !important;
    align-items: start !important;
  }
}

/* Cart summary sticky on desktop */
@media (min-width: 992px) {
  html body#html-body#html-body.checkout-cart-index
  .page-wrapper .cart-summary {
    position: sticky !important;
    top: 100px !important;
  }
}


/* ── §B8 · B2B Account sidebar: 260px (was 220px em layout-bundle) ─
   layout-bundle define 220px@1024px. Aqui elevamos para 260px.
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  html body#html-body#html-body:is(.customer-account-index, .b2b-account-index,
    .account, [class*="customer-account"], [class*="b2b-account"])
  .page-wrapper .page-main > .columns,
  html body#html-body#html-body.customer-account
  .page-wrapper .page-main > .columns {
    grid-template-columns: 260px minmax(0, 1fr) !important;
    column-gap: 24px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   FASE B — Bloco 2: B2 / B3 / B4 / B6 / B9 / B10
   ══════════════════════════════════════════════════════════════════ */


/* ── §B2 · Checkout OPC: min-width:0 nas colunas ─────────────────
   awa-structural-fix já define o grid 3-col. Garantimos que
   #checkout-step-shipping / #checkoutSteps não vaze para fora.
   ─────────────────────────────────────────────────────────────────── */
html body#html-body#html-body.checkout-index-index
.page-wrapper .opc-wrapper,
html body#html-body#html-body.checkout-index-index
.page-wrapper #checkoutSteps,
html body#html-body#html-body.checkout-index-index
.page-wrapper .checkout-payment-method,
html body#html-body#html-body.checkout-index-index
.page-wrapper .step-content {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Checkout: opc-sidebar nunca ultrapassa 380px */
html body#html-body#html-body.checkout-index-index
.page-wrapper #opc-sidebar,
html body#html-body#html-body.checkout-index-index
.page-wrapper .opc-sidebar {
  min-width: 0 !important;
  max-width: 380px !important;
  box-sizing: border-box !important;
}

/* Checkout mobile: stack vertical */
@media (max-width: 767px) {
  html body#html-body#html-body.checkout-index-index
  .page-wrapper .checkout-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  html body#html-body#html-body.checkout-index-index
  .page-wrapper #opc-sidebar,
  html body#html-body#html-body.checkout-index-index
  .page-wrapper .opc-sidebar {
    max-width: 100% !important;
    position: static !important;
  }
}


/* ── §B3 · Página 404: container centrado max 640px ──────────────
   Body class: cms-noroute-index. Estrutura: .awa-404-page >
   .awa-404-page__content > (icon | title | text | search | links)
   + .awa-vem-list (links secundários) fora do content.
   ─────────────────────────────────────────────────────────────────── */
html body#html-body#html-body.cms-noroute-index
.page-wrapper .page-main > .columns > .column.main {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

html body#html-body#html-body.cms-noroute-index
.page-wrapper .awa-404-page {
  width: 100% !important;
  max-width: 640px !important;
  margin-inline: auto !important;
  text-align: center !important;
  padding: clamp(32px, 6vw, 64px) clamp(16px, 4vw, 32px) !important;
  box-sizing: border-box !important;
}

html body#html-body#html-body.cms-noroute-index
.page-wrapper .awa-404-page__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
}

html body#html-body#html-body.cms-noroute-index
.page-wrapper .awa-404-page__icon {
  color: var(--awa-primary, #b73337) !important;
  opacity: 0.7 !important;
}

html body#html-body#html-body.cms-noroute-index
.page-wrapper .awa-404-page__title {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  text-wrap: balance !important;
}

html body#html-body#html-body.cms-noroute-index
.page-wrapper .awa-404-page__text {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--awa-text-secondary, #666) !important;
  margin: 0 !important;
  max-width: 480px !important;
}

/* Search form dentro do 404 */
html body#html-body#html-body.cms-noroute-index
.page-wrapper .awa-404-page__search {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 420px !important;
}

html body#html-body#html-body.cms-noroute-index
.page-wrapper .awa-404-page__search input[type="text"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 12px !important;
  border: 1px solid var(--awa-border, #e5e5e5) !important;
  border-radius: var(--awa-radius-sm, 6px) !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}

html body#html-body#html-body.cms-noroute-index
.page-wrapper .awa-404-page__search button[type="submit"] {
  flex: 0 0 auto !important;
  height: 44px !important;
  padding: 0 20px !important;
  border-radius: var(--awa-radius-sm, 6px) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* Links úteis (Fale Conosco etc) — flex-wrap sem órfã */
html body#html-body#html-body.cms-noroute-index
.page-wrapper .awa-404-page__links,
html body#html-body#html-body.cms-noroute-index
.page-wrapper .awa-vem-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
}

html body#html-body#html-body.cms-noroute-index
.page-wrapper .awa-vem-link {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 16px !important;
  border: 1px solid var(--awa-border, #e5e5e5) !important;
  border-radius: var(--awa-radius-sm, 6px) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--awa-text, #333) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: border-color 0.15s, color 0.15s !important;
}

html body#html-body#html-body.cms-noroute-index
.page-wrapper .awa-vem-link:hover {
  border-color: var(--awa-primary, #b73337) !important;
  color: var(--awa-primary, #b73337) !important;
}


/* ── §B4 · PDP: buy-box grid tablet + tabs layout ────────────────
   BLOCKER: gallery (mage/gallery JS) → documentado, não alterado por CSS.
   Fix: product-info-main min-width:0, tabs overflow mobile.
   ─────────────────────────────────────────────────────────────────── */
html body#html-body#html-body.catalog-product-view
.page-wrapper .product-info-main {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* PDP tabs: overflow-x scroll em mobile sem quebrar layout */
@media (max-width: 767px) {
  html body#html-body#html-body.catalog-product-view
  .page-wrapper .product.data.items > .item.title {
    white-space: nowrap !important;
  }

  html body#html-body#html-body.catalog-product-view
  .page-wrapper .product.data.items {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important;
    border-bottom: 1px solid var(--awa-border, #e5e5e5) !important;
    scrollbar-width: none !important;
  }

  html body#html-body#html-body.catalog-product-view
  .page-wrapper .product.data.items::-webkit-scrollbar {
    display: none !important;
  }

  html body#html-body#html-body.catalog-product-view
  .page-wrapper .product.data.items > .item.content {
    display: none !important;
  }

  html body#html-body#html-body.catalog-product-view
  .page-wrapper .product.data.items > .item.content.active {
    display: block !important;
    width: 100% !important;
  }
}


/* ── §B6 · Home: carousels gutter + container centrado ───────────
   Home usa page-layout-full-width / cms-index-index.
   Carrosséis: padding-inline correto para gutters 16px mobile.
   .ayo-home5-wrapper: max-width 1440px centrado.
   ─────────────────────────────────────────────────────────────────── */
html body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
.page-wrapper .ayo-home5-wrapper {
  max-width: 1440px !important;
  margin-inline: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Carrosséis de categoria: padding-inline para não colar nas bordas */
html body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
.page-wrapper .awa-category-carousel {
  padding-inline: clamp(16px, 4vw, 32px) !important;
  box-sizing: border-box !important;
}

/* Home: seções de produtos max-width 1440px centradas */
html body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
.page-wrapper .awa-home-section,
html body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
.page-wrapper [class*="home-products-section"],
html body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
.page-wrapper .awa-carousel-shell {
  max-width: 1440px !important;
  margin-inline: auto !important;
  padding-inline: clamp(16px, 4vw, 32px) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Bottom nav (mobile): ícones alinhados */
@media (max-width: 767px) {
  html body#html-body#html-body
  .page-wrapper .awa-bottom-nav,
  html body#html-body#html-body
  .page-wrapper [class*="bottom-nav"] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding-inline: 8px !important;
    box-sizing: border-box !important;
  }

  html body#html-body#html-body
  .page-wrapper .awa-bottom-nav__item {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
  }
}


/* ── §B9 · Auth (B2B Login shell): max-width + form mobile ───────
   Body class: b2b-auth-shell b2b-account-login page-layout-empty
   Estrutura: .b2b-login-page > .b2b-login-card
   ─────────────────────────────────────────────────────────────────── */
html body#html-body#html-body.b2b-auth-shell
.page-wrapper .b2b-login-page {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-content: start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: min(100%, 480px) !important;
  margin-inline: auto !important;
  padding: 0 !important;
  min-height: auto !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html body#html-body#html-body.b2b-auth-shell
.page-wrapper .b2b-login-card {
  width: 100% !important;
  max-width: 440px !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

/* Form inputs: full-width dentro do card */
html body#html-body#html-body.b2b-auth-shell
.page-wrapper .b2b-login-form .field,
html body#html-body#html-body.b2b-auth-shell
.page-wrapper .b2b-login-form input {
  width: 100% !important;
  box-sizing: border-box !important;
}


/* ── §B10 · CMS pages + Footer: rail 1280px ─────────────────────
   Páginas CMS genéricas: page-main.container centrado max 1280px.
   Footer: grid responsivo (awa-footer-v2 já cuida do footer,
   aqui apenas guard para containers do rodapé).
   ─────────────────────────────────────────────────────────────────── */
html body#html-body#html-body:is(.cms-page-view, .cms-about-us,
  .cms-privacy-policy, .cms-no-route)
.page-wrapper #maincontent.page-main.container,
html body#html-body#html-body.cms-page-view
.page-wrapper .page-main.container {
  max-width: min(100%, 1280px) !important;
  margin-inline: auto !important;
  padding-inline: clamp(16px, 3vw, 32px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* CMS page content: line length cap e tipografia */
html body#html-body#html-body.cms-page-view
.page-wrapper .column.main > :is(p, ul, ol, .std) {
  max-width: 72ch !important;
}

/* Footer: container alinhado ao rail */
html body#html-body#html-body .page-wrapper
:is(.page_footer, .page-footer) .footer.content {
  max-width: min(100%, 1280px) !important;
  margin-inline: auto !important;
  padding-inline: clamp(16px, 3vw, 32px) !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  html body#html-body#html-body .page-wrapper
  :is(.page_footer, .page-footer) .footer.content {
    padding-inline: 16px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   §CONTAINER-STANDARDS — camada de padronização global
   Uma única fonte de verdade para rail, padding e centering.
   Supera awa-layout-bundle + awa-align-grid-terminal com (0,8,2).
   ══════════════════════════════════════════════════════════════════ */

/* ── Tokens canônicos ─────────────────────────────────────────── */
html body#html-body#html-body {
  --cs-rail:        1280px;   /* largura máxima do conteúdo */
  --cs-rail-wide:   1440px;   /* hero / carrosseis full-bleed */
  --cs-rail-narrow: 640px;    /* formulários / auth / 404 */
  --cs-pad:         clamp(16px, 3.5vw, 32px); /* padding horizontal */
  --cs-pad-sm:      16px;     /* padding mínimo mobile */
  --cs-col-gap:     24px;     /* gap entre sidebar e main */
  --cs-sidebar-catalog: 260px;
  --cs-sidebar-account: 260px;
}


/* ── page-main: rail canônico para TODAS as rotas ────────────── */

/* Rotas padrão (PLP, Search, PDP, CMS, 404, Account) */
html body#html-body#html-body:not(.cms-index-index):not(.cms-home)
:not(.checkout-index-index):not(.onepagecheckout-index-index)
:not(.b2b-auth-shell)
.page-wrapper #maincontent.page-main,
html body#html-body#html-body:not(.cms-index-index):not(.cms-home)
:not(.checkout-index-index):not(.onepagecheckout-index-index)
:not(.b2b-auth-shell)
.page-wrapper .page-main.container {
  max-width: min(100%, var(--cs-rail)) !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: var(--cs-pad) !important;
  box-sizing: border-box !important;
}

/* Home / CMS full-width: sem padding no page-main (blocos gerem o próprio gutter) */
html body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
.page-wrapper .page-main,
html body#html-body#html-body:is(.cms-index-index, .cms-home, .cms-homepage_ayo_home5)
.page-wrapper #maincontent.page-main {
  max-width: 100% !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

/* Auth / B2B login: rail estreito */
html body#html-body#html-body.b2b-auth-shell
.page-wrapper .page-main,
html body#html-body#html-body:is(.customer-account-login,
  .customer-account-create, .customer-account-forgotpassword)
.page-wrapper .page-main {
  max-width: min(100%, var(--cs-rail-narrow)) !important;
  padding-inline: var(--cs-pad) !important;
  margin-inline: auto !important;
}

/* PLP/Search: sem padding no page-main (grid interno gere gutters) */
html body#html-body#html-body:is(.catalog-category-view, .catalogsearch-result-index)
.page-wrapper .page-main.container {
  padding-inline: var(--cs-pad-sm) !important;
}

/* PDP: padding generoso para a galeria respirar */
html body#html-body#html-body.catalog-product-view
.page-wrapper .page-main.container {
  padding-inline: clamp(16px, 3vw, 48px) !important;
}

/* Mobile: padding fixo 16px em todas as rotas */
@media (max-width: 767px) {
  html body#html-body#html-body .page-wrapper
  :is(.page-main, .page-main.container, #maincontent.page-main) {
    padding-inline: var(--cs-pad-sm) !important;
  }
}


/* ── Header: centering canônico ──────────────────────────────── */
html body#html-body#html-body .page-wrapper .awa-site-header
:is(.awa-main-header__inner, .awa-header-inner, .header-content,
    .wp-header[data-awa-header-row], .awa-main-header__inner[data-awa-header-row]) {
  max-width: min(100%, var(--cs-rail)) !important;
  margin-inline: auto !important;
  padding-inline: var(--cs-pad-sm) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Utility bar (promo bar container) */
html body#html-body#html-body .page-wrapper .awa-site-header
:is(.awa-utility-bar > .container, .top-header .container) {
  max-width: min(100%, var(--cs-rail)) !important;
  margin-inline: auto !important;
  padding-inline: var(--cs-pad-sm) !important;
  box-sizing: border-box !important;
}


/* ── Footer: centering canônico ──────────────────────────────── */
html body#html-body#html-body .page-wrapper
:is(.page_footer, .page-footer)
:is(#footer.footer-container, #footer .footer-container,
    .footer-container, .footer.content) {
  max-width: min(100%, var(--cs-rail)) !important;
  margin-inline: auto !important;
  padding-inline: var(--cs-pad) !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  html body#html-body#html-body .page-wrapper
  :is(.page_footer, .page-footer)
  :is(#footer.footer-container, .footer-container, .footer.content) {
    padding-inline: var(--cs-pad-sm) !important;
  }
}


/* ── Sidebar: valores canônicos ──────────────────────────────── */

/* PLP/Search desktop: sidebar 260px */
@media (min-width: 992px) {
  html body#html-body#html-body:is(.catalog-category-view, .catalogsearch-result-index)
  .page-wrapper .page-main > .columns {
    grid-template-columns: var(--cs-sidebar-catalog) minmax(0, 1fr) !important;
    column-gap: var(--cs-col-gap) !important;
  }
}

/* Account/B2B desktop: sidebar 260px */
@media (min-width: 992px) {
  html body#html-body#html-body:is(.account, .customer-account,
    [class*="customer-account"], [class*="b2b-account"])
  .page-wrapper .page-main > .columns {
    grid-template-columns: var(--cs-sidebar-account) minmax(0, 1fr) !important;
    column-gap: var(--cs-col-gap) !important;
  }
}

/* Mobile: single column para TODAS as rotas com sidebar */
@media (max-width: 991px) {
  html body#html-body#html-body
  .page-wrapper .page-main > .columns {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   AUDITORIA VISUAL 2026-06-16 — Fixes A3, M4, B2, B6
   Seletores e valores confirmados ao vivo via Playwright.
   ════════════════════════════════════════════════════════════════════ */

/* A3 — Header mobile: hambúrguer duplicado (glifo icomoon legado + SVG novo)
   Refactor adicionou SVG mas não removeu ::before icomoon → dois ícones sobrepostos. */
.action.nav-toggle.awa-header-mobile-toggle::before,
.awa-header-mobile-toggle.nav-toggle::before {
    content: none !important;
}
.action.nav-toggle.awa-header-mobile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.action.nav-toggle.awa-header-mobile-toggle .awa-hamburger-icon {
    display: block !important;
}

/* M4 — Banner de categoria: texto legível sobre imagem OU fundo claro.
   Escopo branco só em hero sem imagem (gradiente institucional).
   Com imagem na PLP: painel claro + texto escuro (§105 distill). */
.awa-category-hero:not(.awa-category-hero--has-image) {
    position: relative;
    overflow: hidden;
    --awa-text-primary: #ffffff;
    --awa-text-secondary: rgba(255, 255, 255, 0.92);
    --awa-text-muted: rgba(255, 255, 255, 0.85);
    --awa-cons-c70: #ffffff;
}

.awa-category-hero:not(.awa-category-hero--has-image)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(15, 23, 42, 0.62) 0%,
        rgba(15, 23, 42, 0.35) 45%,
        rgba(15, 23, 42, 0) 80%);
    z-index: 1;
}

.awa-category-hero__content {
    position: relative;
    z-index: 2;
}

.awa-category-hero:not(.awa-category-hero--has-image) :is(.awa-category-hero__title, .awa-category-hero__count) {
    color: #fff;
}

.awa-category-hero:not(.awa-category-hero--has-image) .awa-category-hero__count {
    font-size: 13px;
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.awa-category-hero img {
    object-fit: cover;
    object-position: center right;
}

html body#html-body:is(.catalog-category-view, .catalogsearch-result-index)
.page-wrapper .awa-category-hero--has-image {
    --awa-text-primary: var(--awa-color-text-primary, #333333);
    --awa-text-secondary: var(--awa-text-secondary, #666666);
    background: var(--awa-bg, #ffffff) !important;
    border: 1px solid var(--awa-border, #e5e5e5) !important;
}

html body#html-body:is(.catalog-category-view, .catalogsearch-result-index)
.page-wrapper .awa-category-hero--has-image::after {
    display: none !important;
}

html body#html-body:is(.catalog-category-view, .catalogsearch-result-index)
.page-wrapper .awa-category-hero--has-image .awa-category-hero__overlay {
    background: linear-gradient(90deg,
        rgb(255 255 255 / 96%) 0%,
        rgb(255 255 255 / 84%) 52%,
        rgb(255 255 255 / 42%) 100%) !important;
}

html body#html-body:is(.catalog-category-view, .catalogsearch-result-index)
.page-wrapper .awa-category-hero--has-image
:is(.awa-category-hero__title, .awa-category-hero__count, .awa-category-hero__eyebrow) {
    color: var(--awa-text-primary, #333333) !important;
    text-shadow: none !important;
}

html body#html-body:is(.catalog-category-view, .catalogsearch-result-index)
.page-wrapper .awa-category-hero--has-image .awa-category-hero__count {
    color: var(--awa-text-secondary, #666666) !important;
}

html body#html-body:is(.catalog-category-view, .catalogsearch-result-index)
.page-wrapper .awa-category-hero--has-image .awa-category-hero__eyebrow {
    color: color-mix(in srgb, var(--awa-primary, #b73337) 72%, var(--awa-text-primary, #333333)) !important;
}

/* B6 — WhatsApp flutuante sobrepõe nav mobile
   .awa-whatsapp-float bottom:85px + h:56px → yBottom:759 > nav.y:756 (3px overlap).
   100px garante 12px de folga acima da nav. */
@media (max-width: 991px) {
    .awa-whatsapp-float {
        bottom: 100px !important;
    }
}

/* PDP gallery: .fotorama__fullscreen-icon em position:relative desloca
   o stage shaft 80px para baixo. awa-defer-global-bundle.min.css tem
   body.catalog-product-view .fotorama__fullscreen-icon { position:relative !important }
   com especificidade 0,2,0. Usando 0,3,0 (body+stage+icon) para vencer. */
body.catalog-product-view .fotorama__stage .fotorama__fullscreen-icon {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    z-index: 901 !important;
    width: 44px !important;
    height: 44px !important;
}

/* B2 — Toolbar grid-mode sem affordance de botão
   .grid-mode-2/3/4 mostravam "2 3 4" esmaecidos; adiciona borda + estado ativo. */
.grid-mode-show-type-products [class^="grid-mode-"],
[class^="grid-mode-"].grid-mode-2,
[class^="grid-mode-"].grid-mode-3,
[class^="grid-mode-"].grid-mode-4 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    color: #555;
    font-size: 13px;
    cursor: pointer;
    background: #fff;
    transition: background-color .15s, border-color .15s, color .15s;
}
[class^="grid-mode-"].actived,
[class^="grid-mode-"].active {
    background: #b73337;
    border-color: #b73337;
    color: #fff;
}


/* ============================================================================
   §A. PLP — category-view-move gap fix
   themes.min.css usa min-height:clamp(80px,12vw,160px)!important spec (1,4,2)
   via :is(.page-main .category-hero). Override com mesma spec carregado depois.
   ============================================================================ */
html body#html-body:is(.catalog-category-view, .catalogsearch-result-index) .page-wrapper
:is(.category-view-move, .page-main .category-hero, .awa-category-hero) {
  min-height: 0 !important;
  height: auto !important;
}

/* ============================================================================
   §B. Category hero text — forçar branco sobre imagem
   Bundles server-side usam 5×#html-body spec (5,4,2) para impor rgb(51,51,51).
   6×#html-body spec (6,3,2) vence por contagem de IDs: 6 > 5.
   ============================================================================ */
html body#html-body#html-body#html-body#html-body#html-body#html-body:is(.catalog-category-view, .catalogsearch-result-index, .catalog-product-view) .page-wrapper .awa-category-hero--has-image .awa-category-hero__title {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.7) !important;
}
html body#html-body#html-body#html-body#html-body#html-body#html-body:is(.catalog-category-view, .catalogsearch-result-index, .catalog-product-view) .page-wrapper .awa-category-hero--has-image .awa-category-hero__count {
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.6) !important;
}

/* §E FIX 2026-06-17: page-main is empty on homepage — collapse min-height:48px */
.cms-index-index .page-main {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.cms-index-index .page-main .columns {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}