/* ==========================================================================
   Chase — Layout
   Header, footer, grid, navegação e responsividade.
   ========================================================================== */

/* ── Announcement Bar ── */
.chase-announcement {
  background-color: var(--chase-blue-dark);
  color: var(--chase-white);
  text-align: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  min-height: var(--announcement-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chase-announcement a {
  color: var(--chase-gold-light);
  text-decoration: underline;
}

/* ── Desmonte do container do Storefront ──
   O Storefront envolve o conteúdo em .col-full com padding horizontal e dá
   padding-top e margin-bottom ao .site-header. Três consequências desfeitas
   aqui, todas medidas no navegador em 1265px de viewport:

   1. `padding-top: 41,89px` no .site-header criava uma faixa BRANCA de 42px
      acima do nosso header, então o azul não chegava no topo da página.
   2. `margin-bottom: 67,77px` no .site-header era o vão de 69px entre a
      navegação e o conteúdo — o que impedia o banner de encostar no menu.
   3. `padding: 0 41,89px` no .col-full encaixava banner, faixas e seções
      42px para dentro de cada lado, impedindo a largura total.

   POR QUE NÃO O TRUQUE DE 100vw: a barra de rolagem aqui tem 15px, então
   `100vw` vale 1280 num espaço visível de 1265 e a página passaria a rolar na
   horizontal. E `overflow-x: hidden` num ancestral está fora de questão —
   quebraria o `position: sticky` do header. Zerar o padding é exato.

   O respiro horizontal do conteúdo passa a ser responsabilidade do
   .chase-container dentro de cada seção, que é quem já tem max-width. */
.site-header {
  padding-top: 0;
  /* O `padding-bottom: 1.618em` do Storefront é o QUARTO mecanismo de
     espaçamento dele, e passou batido nas correções anteriores porque **só
     aparece no mobile** — acima do breakpoint ele é 0. A 375px eram 25,9px
     entre a faixa de categorias e o banner, e era isso que impedia o banner de
     encostar no topo no celular. Medido em 19/08/2026. */
  padding-bottom: 0;
  /* O Storefront ainda desenha uma linha de 1px #f0f0f0 abaixo do header (vem
     de um <style> inline do customizer). Sobre o azul ela aparece como um
     risco claro, e é redundante: o .chase-header já tem box-shadow próprio.
     Era também o último 1px que separava o banner do menu. */
  border-bottom: 0;
}

/* Só na home: nas outras páginas o vão abaixo do header continua servindo de
   respiro entre a navegação e o conteúdo.

   Especificidade medida, não adivinhada: o Storefront declara
   `.home.blog .site-header` — três classes, 0,3,0 — e a nossa
   `body.home .site-header` (0,2,1) perdia na contagem de classes. O id
   #masthead vem do markup do Storefront e vence sem precisar de !important. */
body.home #masthead {
  margin-bottom: 0;
}

body.home .col-full {
  padding-left: 0;
  padding-right: 0;
  /* O `max-width: 1280px` do Storefront TAMBÉM precisa sair. Zerar só o padding
     não basta: acima de 1280px de viewport as faixas param nessa largura e
     centralizam, deixando vão nas laterais. Medido a 1905px de viewport:
     sobravam 313px de cada lado, e o defeito é invisível a 1265px — foi
     exatamente assim que passou batido na primeira verificação.
     Quem controla a largura de leitura do conteúdo é o .chase-container. */
  max-width: none;
  /* E abaixo de 1064px (66,4989em) o Storefront TROCA o padding por MARGEM:
     2,61792em, caindo para 1,41575em abaixo de 568px. Zerar padding e
     max-width não alcança margem — a 375px sobravam 22,65px de cada lado.
     São três mecanismos diferentes para o mesmo encaixe, em três faixas de
     viewport. Conferir sempre em desktop largo, desktop estreito E mobile. */
  margin-left: 0;
  margin-right: 0;
}

/* ── Header ── */
.chase-header {
  background-color: var(--chase-header-bg);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  transition: box-shadow var(--transition-base);
}

.chase-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

.chase-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Logo */
.chase-header__logo {
  flex-shrink: 0;
}

/* Wordmark horizontal (428x120, proporção 3,57:1) e não mais o ícone quadrado.
   48px de altura: cresce em relação aos 44px do ícone, sobra folga na barra de
   72px, e mantém 2,5x de densidade contra a origem de 120px — nítido em retina.
   Acima de ~60px o PNG começa a amolecer; para mais que isso, pedir o SVG. */
.chase-header__logo img,
.chase-header__logo svg {
  height: 48px;
  width: auto;
  display: block;
}

/* Search */
.chase-header__search {
  flex-grow: 1;
  max-width: 480px;
  position: relative;
}

/* O botão de busca só existe no mobile: no desktop o campo já fica aberto.
   Precisa das duas classes para vencer .chase-header__action-btn, que é
   declarada depois e também define display. */
.chase-header__action-btn.chase-header__search-toggle {
  display: none;
}

/* O Storefront aplica `margin-bottom: 1.618em` em `form`, e isso desalinhava o
   header inteiro: a margem entrava na altura do .chase-header__search (48,6 do
   form + 25,9 = 74,5px), o input ficava encostado no TOPO desse wrapper e seu
   centro caía 13px acima do eixo do logo e dos botões de ação.

   Medido a 1425px antes da correção: logo, conta e carrinho com centro em 37,3
   e o campo de busca em 24,3. Zerada a margem, o wrapper colapsa para a altura
   do form, a barra volta aos 72px de `--header-height` e os quatro grupos
   centram no mesmo eixo.

   É a oitava declaração do Storefront que precisou ser desfeita neste header. */
.chase-header__search-form {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  position: relative;
}

/* O seletor precisa do `input` na frente: o Storefront estiliza
   `input[type=search]` (especificidade 0,1,1) e a classe sozinha (0,1,0)
   perdia — o campo vinha com o cinza e a borda dele, não os nossos. Com o
   elemento empatamos em 0,1,1 e vencemos por ordem de declaração. */
input.chase-header__search-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  padding-right: var(--space-12);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  color: var(--chase-text);
  /* O campo é branco e o header é azul médio: o próprio preenchimento já
     define a forma (3,6:1 contra o fundo), então a borda não precisa desenhar
     contorno. Fica transparente só para manter a geometria estável entre
     repouso e foco. */
  background-color: var(--chase-white);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

input.chase-header__search-input:focus {
  outline: none;
  /* Halo BRANCO e não dourado: indicador de foco precisa de 3:1 contra a cor
     adjacente, e sobre o #008ecf o branco dá 3,6:1 enquanto o #ffd100 fica em
     2,5:1. O dourado é bonito aqui e reprovaria — fica só na lupa. */
  border-color: var(--chase-white);
  background-color: var(--chase-white);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

.chase-header__search-input::placeholder {
  color: var(--chase-gray-400);
}

.chase-header__search-submit {
  position: absolute;
  right: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* O Storefront aplica padding global em button (22,65px de cada lado).
     Num botão de 36px isso não deixa espaço para o ícone, que por ser item
     flex encolhe até largura zero — o botão virava um círculo azul vazio. */
  padding: 0;
  width: 36px;
  height: 36px;
  background-color: var(--chase-blue);
  border: none;
  border-radius: var(--radius-full);
  /* O SVG da lupa usa stroke="currentColor", então `color` é o que pinta o
     ícone. O círculo continua azul e fica dentro do campo branco; o amarelo é
     medido contra ele, não contra o header. */
  color: var(--chase-header-search-icon);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.chase-header__search-submit:hover {
  background-color: var(--chase-blue-dark);
}

.chase-header__search-submit svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Header actions (account, cart) */
.chase-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.chase-header__action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: none;
  border: none;
  color: var(--chase-header-text);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
}

/* O texto já é branco, então o hover não muda a cor da letra — um chip
   quase-branco com texto branco ficaria ilegível. Quem sinaliza é a superfície
   translúcida. */
.chase-header__action-btn:hover {
  background-color: var(--chase-header-hover);
  color: var(--chase-header-accent);
}

.chase-header__action-btn svg {
  width: 22px;
  height: 22px;
}

.chase-header__action-label {
  font-weight: var(--font-weight-medium);
}

/* Mini Cart */
.chase-header__cart {
  position: relative;
}

.chase-header__cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--chase-gold);
  color: var(--chase-white);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  padding: 0 4px;
  line-height: 1;
}

/* Navigation */
.chase-nav {
  background-color: var(--chase-header-bg);
  /* A borda continua ocupando 1px para não deslocar o layout, mas fica
     invisível: as duas faixas têm o mesmo fundo e a linha bege aparecia como
     um risco no meio do azul. */
  border-top: 1px solid transparent;
}

.chase-nav__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.chase-nav__item {
  position: relative;
}

.chase-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--chase-header-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  border-bottom: 2px solid transparent;
}

/* Mesma lógica dos botões de ação: a letra já é branca, então o traço embaixo
   e a superfície translúcida são o que marca hover e página atual. */
.chase-nav__link:hover,
.chase-nav__link--active {
  color: var(--chase-header-accent);
  background-color: var(--chase-header-hover);
  border-bottom-color: var(--chase-header-accent);
}

/* Submenu */
.chase-nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--chase-white);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--transition-fast);
  z-index: var(--z-dropdown);
}

.chase-nav__item:hover .chase-nav__submenu,
.chase-nav__item:focus-within .chase-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.chase-nav__submenu-link {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--chase-text);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.chase-nav__submenu-link:hover {
  background-color: var(--chase-blue-lightest);
  color: var(--chase-blue);
}

/* ── Busca rápida: painel de prévia ──
   Ancorado no formulário, que já é position: relative via .chase-header__search.
   O formulário da gaveta não herda esse contexto, então garantimos aqui. */
.chase-header__search-form {
  position: relative;
}

.chase-busca-painel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  z-index: var(--z-dropdown, 100);
  max-height: 60vh;
  overflow-y: auto;
  background-color: var(--chase-white);
  border: 1px solid var(--chase-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.chase-busca-painel[hidden] {
  display: none;
}

.chase-busca-painel__vazio {
  padding: var(--space-4);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  color: var(--chase-gray-500);
  text-align: center;
}

.chase-busca-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--chase-text);
  border-bottom: 1px solid var(--chase-border-light);
}

.chase-busca-item:last-child {
  border-bottom: none;
}

.chase-busca-item:hover,
.chase-busca-item.is-ativo {
  background-color: var(--chase-blue-lightest);
}

.chase-busca-item__img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.chase-busca-item__corpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.chase-busca-item__titulo {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  /* Título longo não pode empurrar o painel: corta em duas linhas. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chase-busca-item__meta {
  font-family: var(--font-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--chase-blue);
}

.chase-busca-item__meta.is-esgotado {
  color: var(--chase-gray-500);
  font-weight: var(--font-weight-normal);
}

.chase-busca-painel__todos {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--chase-border);
  background-color: var(--chase-gray-50);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--chase-blue);
  text-align: center;
  text-decoration: none;
}

.chase-busca-painel__todos:hover,
.chase-busca-painel__todos.is-ativo {
  background-color: var(--chase-blue-lightest);
}

/* ── Faixa de categorias (mobile) ──
   Rolagem horizontal com encaixe, para as categorias ficarem visíveis sem
   precisar abrir o menu. Oculta no desktop, onde a .chase-nav já resolve. */
.chase-catbar {
  display: none;
  /* Mesmo motivo da .chase-nav: borda transparente para não riscar o azul. */
  border-top: 1px solid transparent;
  background-color: var(--chase-header-bg);
}

.chase-catbar__list {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.chase-catbar__list::-webkit-scrollbar {
  display: none;
}

.chase-catbar__link {
  display: block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--chase-border);
  border-radius: var(--radius-full);
  background-color: var(--chase-white);
  color: var(--chase-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

/* O chip ativo precisa se destacar do HEADER, não só do chip em repouso. O
   --chase-blue (#176CA6) sobre o #008ecf dá 1,5:1 e o chip praticamente
   desaparecia no fundo; o navy dá 3,3:1 e continua legível com letra branca. */
.chase-catbar__link:hover,
.chase-catbar__link.is-active {
  background-color: var(--chase-blue-darker);
  border-color: var(--chase-blue-darker);
  color: var(--chase-white);
}

/* ── Mobile menu toggle ── */
/* O chip claro com ícone escuro fica no mesmo peso visual dos chips da faixa
   de categorias, então o hambúrguer continua legível sobre o header azul
   (14,9:1 do ícone contra o chip; 3,6:1 do chip contra o header).

   A BORDA saiu: ela existia quando o header era branco, para o chip não se
   diluir no fundo. Sobre azul o próprio preenchimento já separa, e a borda bege
   só sujava. */
.chase-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  /* Mesmo motivo do botão de busca: sem zerar o padding global de button do
     Storefront, sobravam ~2px de área útil e o SVG encolhia até sumir. */
  padding: 0;
  width: 44px;
  height: 44px;
  background-color: var(--chase-gray-50);
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--chase-text);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.chase-menu-toggle:hover,
.chase-menu-toggle[aria-expanded="true"] {
  background-color: var(--chase-blue);
  border-color: var(--chase-blue);
  color: var(--chase-white);
}

.chase-menu-toggle svg {
  flex-shrink: 0;
  stroke-width: 2.5;
}

.chase-menu-toggle svg {
  width: 24px;
  height: 24px;
}

/* ── Mobile drawer ── */
.chase-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-modal);
  visibility: hidden;
  pointer-events: none;
}

.chase-mobile-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.chase-mobile-drawer__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.chase-mobile-drawer.is-open .chase-mobile-drawer__overlay {
  opacity: 1;
}

.chase-mobile-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 360px;
  height: 100%;
  background-color: var(--chase-white);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.chase-mobile-drawer.is-open .chase-mobile-drawer__panel {
  transform: translateX(0);
}

.chase-mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--chase-border-light);
}

.chase-mobile-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--chase-text);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.chase-mobile-drawer__close:hover {
  background-color: var(--chase-gray-50);
}

.chase-mobile-drawer__nav {
  padding: var(--space-4) 0;
  flex-grow: 1;
}

.chase-mobile-drawer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chase-mobile-drawer__nav-link {
  display: block;
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--chase-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all var(--transition-fast);
}

.chase-mobile-drawer__nav-link:hover,
.chase-mobile-drawer__nav-link--active {
  background-color: var(--chase-blue-lightest);
  color: var(--chase-blue);
  border-left-color: var(--chase-blue);
}

.chase-mobile-drawer__subnav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chase-mobile-drawer__subnav-link {
  display: block;
  padding: var(--space-2) var(--space-6);
  padding-left: var(--space-10);
  font-size: var(--font-size-sm);
  color: var(--chase-gray-600);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.chase-mobile-drawer__subnav-link:hover {
  color: var(--chase-blue);
}

.chase-mobile-drawer__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--chase-border-light);
}

/* ── Carrinho lateral ──
   Fica aqui, junto da gaveta mobile, porque são o mesmo padrão de painel
   deslizante — separar em components.css deixaria dois painéis irmãos em
   arquivos diferentes.

   Não precisa de media query: o painel é `width: 100%` com `max-width`, então
   ele ocupa a tela inteira no celular e vira coluna no desktop sozinho. */
.chase-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  visibility: hidden;
  opacity: 0;
  /* `visibility` NÃO entra na transição junto com o resto: ela troca em 0s, só
     com atraso na saída, para o painel continuar visível enquanto desliza para
     fora. Se ela transicionasse normalmente, o valor só viraria `visible` no
     início do próximo quadro — e o JS chama focus() no mesmo tick, num momento
     em que a subárvore ainda está oculta. Elemento em subárvore
     `visibility: hidden` não aceita foco, e a armadilha some sem erro: o painel
     abre, o foco simplesmente não vai para dentro dele. */
  transition: opacity var(--transition-base),
              visibility 0s linear var(--transition-base);
}

.chase-cart-drawer.is-open {
  visibility: visible;
  opacity: 1;
  /* Sem atraso na entrada: vira visível já no recálculo de estilo. */
  transition: opacity var(--transition-base), visibility 0s;
}

.chase-cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(var(--chase-text-rgb), 0.5);
}

.chase-cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 400px;
  background-color: var(--chase-white);
  box-shadow: var(--shadow-2xl);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  display: flex;
  flex-direction: column;
}

.chase-cart-drawer.is-open .chase-cart-drawer__panel {
  transform: translateX(0);
}

.chase-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--chase-border-light);
  flex-shrink: 0;
}

.chase-cart-drawer__title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--chase-text);
}

.chase-cart-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  /* O Storefront aplica padding global em button (9,9px 22,65px). Num botão de
     ícone isso não deixa área útil e o SVG, sendo item flex, encolhe para
     largura zero — o botão vira caixa vazia. Ver CLAUDE.md. */
  padding: 0;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: var(--chase-text);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.chase-cart-drawer__close:hover {
  background-color: var(--chase-gray-100);
}

.chase-cart-drawer__close svg {
  flex-shrink: 0;
}

/* O corpo rola; o cabeçalho e os botões do WooCommerce ficam fixos nas pontas. */
.chase-cart-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
}

/* ── Carrinho lateral: marcação do WooCommerce ──
   Estas regras estilizam o que vem do mini-cart.php. Ficam deliberadamente
   rasas — sem depender de aninhamento profundo —, porque essa marcação muda
   entre versões do WooCommerce e não é nossa para consertar. */
.chase-cart-drawer__body ul.woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}

.chase-cart-drawer__body li.woocommerce-mini-cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--chase-border-light);
}

.chase-cart-drawer__body li.woocommerce-mini-cart-item img {
  grid-column: 1;
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.chase-cart-drawer__body li.woocommerce-mini-cart-item a:not(.remove) {
  grid-column: 2;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--chase-text);
  text-decoration: none;
  line-height: var(--line-height-snug);
}

.chase-cart-drawer__body li.woocommerce-mini-cart-item .quantity {
  grid-column: 2;
  font-size: var(--font-size-sm);
  color: var(--chase-gray-500);
}

/* O "×" de remover. O WooCommerce o imprime como primeiro filho do item, então
   sem posicionamento explícito ele cairia na coluna da miniatura. */
.chase-cart-drawer__body li.woocommerce-mini-cart-item a.remove {
  grid-column: 3;
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-lg);
  line-height: 1;
  color: var(--chase-gray-400);
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.chase-cart-drawer__body li.woocommerce-mini-cart-item a.remove:hover {
  color: var(--chase-error);
  background-color: var(--chase-error-light);
}

.chase-cart-drawer__body .woocommerce-mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 2px solid var(--chase-border);
  font-size: var(--font-size-base);
  color: var(--chase-text);
}

.chase-cart-drawer__body .woocommerce-mini-cart__total strong {
  font-weight: var(--font-weight-medium);
}

.chase-cart-drawer__body .woocommerce-mini-cart__total .amount {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.chase-cart-drawer__body .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

/* Os dois botões vêm do WooCommerce com as classes .button e .checkout. O de
   finalizar é o primário, então recebe o azul; ver carrinho fica secundário. */
.chase-cart-drawer__body .woocommerce-mini-cart__buttons .button {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  text-decoration: none;
  background-color: var(--chase-gray-100);
  color: var(--chase-text);
  transition: background-color var(--transition-fast);
}

.chase-cart-drawer__body .woocommerce-mini-cart__buttons .button:hover {
  background-color: var(--chase-gray-200);
}

.chase-cart-drawer__body .woocommerce-mini-cart__buttons .button.checkout {
  background-color: var(--chase-blue);
  color: var(--chase-white);
}

.chase-cart-drawer__body .woocommerce-mini-cart__buttons .button.checkout:hover {
  background-color: var(--chase-blue-dark);
}

.chase-cart-drawer__body .woocommerce-mini-cart__empty-message {
  margin: var(--space-8) 0;
  text-align: center;
  color: var(--chase-gray-500);
}

/* ── Footer ── */
.site-footer {
  width: 100%;
  padding: 0;
  background-color: var(--chase-text);
}

.site-footer > .col-full {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.chase-footer {
  width: 100%;
  background-color: var(--chase-text);
  color: var(--chase-gray-300);
  padding-top: var(--space-16);
}

.chase-footer__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.chase-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(2, 1fr);
  gap: var(--space-12);
  padding-bottom: var(--space-12);
}

.chase-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* O `filter: brightness(0) invert(1)` SAIU. Ele existia para forçar o logo azul
   do ícone a branco puro sobre o fundo escuro do rodapé — mas o wordmark já vem
   com as letras brancas, e o filtro achatava também o estouro DOURADO, que é
   parte da marca. Sem ele, sobre o #22282B: branco a 15,3:1 e dourado a 10,5:1. */
.chase-footer__logo img,
.chase-footer__logo svg {
  height: 40px;
  width: auto;
}

.chase-footer__tagline {
  font-size: var(--font-size-sm);
  color: var(--chase-gray-400);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
}

.chase-footer__heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--chase-white);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  margin-bottom: var(--space-4);
}

.chase-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chase-footer__links li {
  margin-bottom: var(--space-2);
}

.site-footer .chase-footer .chase-footer__links a {
  color: #D1D5DB;
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.site-footer .chase-footer .chase-footer__links a:hover {
  color: var(--chase-gold);
}

/* O gatilho das preferências de cookies é <button>, porque a ação acontece na
   própria página. Aqui ele é desmontado até parecer os links vizinhos.

   O `padding: 0` não é cosmético: o Storefront aplica `padding: 9.9px 22.65px`
   em TODO button, e sem zerar o item da lista ficaria desalinhado dos outros.
   Mesma armadilha do hambúrguer e do botão de enviar a busca. */
.site-footer .chase-footer .chase-footer__links .chase-footer__link-btn {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: inherit;
  color: #d1d5db;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-fast);
}

.site-footer .chase-footer .chase-footer__links .chase-footer__link-btn:hover {
  color: var(--chase-gold);
}

.chase-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.chase-footer__copyright {
  font-size: var(--font-size-xs);
  color: var(--chase-gray-500);
}

.chase-footer__payment-methods {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--chase-gray-500);
  font-size: var(--font-size-xs);
}

/* ── Homepage sections ── */
.chase-section {
  padding: var(--space-16) 0;
}

.chase-section--alt {
  /* Cinza, e nao branco. Com o corpo creme o branco criava a alternancia de
     faixas da home; com o corpo BRANCO, desde 31/08/2026, ele ficaria
     invisivel. O --chase-gray-50 que entrou no lugar era claro demais para
     separar uma faixa da outra, entao a cor virou token proprio. */
  background-color: var(--chase-bg-alt);
}

/* Seção de respiro curto, para faixas de apoio que não são conteúdo principal.
   A faixa de benefícios usava os 64px cheios da .chase-section MAIS 32px
   próprios, somando 96px de vão de cada lado num bloco de 109px de conteúdo —
   medido em 301px de altura total a 1280px. */
.chase-section--slim {
  padding: var(--space-10) 0;
}

.chase-section--dark {
  background-color: var(--chase-text);
  color: var(--chase-white);
}

/* Hero */
.chase-hero {
  background-color: var(--chase-blue);
  color: var(--chase-white);
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;
}

.chase-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.chase-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.chase-hero__content {
  max-width: 560px;
}

.chase-hero__tagline {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--chase-gold);
  margin-bottom: var(--space-4);
}

.chase-hero__title {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--chase-white);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-6);
}

.chase-hero__description {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.85);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-8);
}

.chase-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  background-color: var(--chase-gold);
  color: var(--chase-white);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-base);
  border: none;
  cursor: pointer;
}

.chase-hero__cta:hover {
  background-color: var(--chase-gold-dark);
  color: var(--chase-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Benefits */
.chase-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  /* Sem padding próprio: a .chase-section--slim já dá o vão vertical, e os
     dois somados deixavam a faixa alta demais para o que ela comunica. */
  padding: 0;
}

.chase-benefit {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--chase-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base);
}

.chase-benefit:hover {
  box-shadow: var(--shadow-md);
}

.chase-benefit__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--chase-blue-lightest);
  color: var(--chase-blue);
  border-radius: var(--radius-lg);
}

.chase-benefit__icon svg {
  width: 20px;
  height: 20px;
}

.chase-benefit__text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--chase-text);
  line-height: var(--line-height-snug);
}

.chase-benefit__subtext {
  font-size: var(--font-size-xs);
  color: var(--chase-gray-500);
  font-weight: var(--font-weight-normal);
  display: block;
  margin-top: var(--space-1);
}

/* Categories showcase */
.chase-categories-grid {
  display: grid;
  /*
   * auto-fit em vez de quatro colunas fixas, e por um motivo medido: com 3
   * categorias numa grade de repeat(4, 1fr) elas ocupavam as tres primeiras
   * colunas e sobrava um buraco de 318px a direita, conferido a 1440px. As
   * colunas de 1fr esticam para preencher, entao justify-content nao tinha
   * efeito nenhum.
   *
   * Com auto-fit a coluna vazia colapsa, e como a trilha tem largura maxima
   * em vez de 1fr, o conjunto pode ser centralizado. O card mantem os mesmos
   * 294px de antes quando cabem quatro.
   */
  grid-template-columns: repeat(auto-fit, minmax(240px, 294px));
  justify-content: center;
  gap: var(--space-6);
}

.chase-category-card {
  position: relative;
  background-color: var(--chase-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--chase-border-light);
}

.chase-category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--chase-blue);
}

/* Imagem da categoria, no lugar do emoji que existia antes.

   Caixa de proporção fixa: as fotos de categoria vêm da biblioteca de mídia e
   não têm tamanho garantido, então a moldura é quem define a geometria e a
   imagem se ajusta dentro dela. Mesmo padrão que resolveu a imagem da página
   de produto — sem isso, uma foto retrato e uma quadrada dariam cards de
   alturas diferentes na mesma linha. */
.chase-category-card__media {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: var(--chase-blue-lightest);
  transition: transform var(--transition-base);
}

.chase-category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Categoria ainda sem miniatura cadastrada. Fica a moldura azul clara vazia,
   de propósito: o card mantém a altura das outras da linha, e o vazio é uma
   pista visível de que falta subir a imagem — some sozinho quando ela entra. */
.chase-category-card__media--vazia {
  background-image: linear-gradient(
    135deg,
    var(--chase-blue-lightest) 0%,
    var(--chase-gold-lightest) 100%
  );
}

.chase-category-card:hover .chase-category-card__media {
  transform: scale(1.04);
}

.chase-category-card__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--chase-text);
}

.chase-category-card__count {
  font-size: var(--font-size-xs);
  color: var(--chase-gray-500);
}

/* Brand statement */
.chase-brand-statement {
  background-color: var(--chase-blue);
  color: var(--chase-white);
  text-align: center;
  padding: var(--space-20) var(--space-6);
  position: relative;
  overflow: hidden;
}

.chase-brand-statement::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 50%, rgba(var(--chase-gold-rgb), 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.chase-brand-statement__text {
  position: relative;
  z-index: 1;
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}

.chase-brand-statement__highlight {
  color: var(--chase-gold);
}

/* Products grid (shop/archive) */
.chase-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

/* ── Páginas sem barra lateral ──
   O Storefront declara `.content-area { width: 73.913%; float: left }` acima
   de 768px **sem escopo de sidebar**, então tirar a classe `left-sidebar` do
   body não devolve a largura cheia: sobra um vão de ~308px à direita. Aqui
   desfazemos os três valores de uma vez. */
.chase-sem-lateral .content-area {
  width: 100%;
  float: none;
  margin-right: 0;
}

/* Trilho horizontal de produtos (vitrines automáticas) */
.chase-products-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Espaço para a sombra do card no hover não ser cortada pelo overflow. */
  padding-bottom: var(--space-3);
}

.chase-products-rail > * {
  scroll-snap-align: start;
}

.chase-products-rail:focus-visible {
  outline: 2px solid var(--chase-blue);
  outline-offset: 4px;
}

/* A barra de rolagem sai, e quem passa a indicar que há mais são os botões.
   Os dois são a MESMA decisão: sem barra e sem botão o trilho não teria pista
   nenhuma de que continua para o lado. */
.chase-products-rail {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.chase-products-rail::-webkit-scrollbar {
  display: none;
}

/* Enquanto o dedo — ou o mouse — está arrastando, o encaixe sai do caminho.
   Com `scroll-snap-type: x mandatory` ligado, cada pixel de arrasto era
   puxado de volta para o card mais próximo e o movimento saía travado. */
.chase-products-rail.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

/* ── Trilho com botões ── */
.chase-rail {
  position: relative;
}

.chase-rail__btn {
  position: absolute;
  top: 50%;
  z-index: var(--z-dropdown);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  /* O Storefront aplica `padding: 9.9px 22.65px` em TODO button. Num botão
     quadrado pequeno isso não deixa área útil e o SVG de dentro, sendo item
     flex, encolhe para largura zero — o botão vira uma caixa vazia. Já
     aconteceu com o hambúrguer e com o enviar da busca. */
  padding: 0;
  border: 1px solid var(--chase-border);
  border-radius: var(--radius-full);
  background-color: var(--chase-white);
  color: var(--chase-text);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.chase-rail__btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.chase-rail__btn:hover:not(:disabled) {
  background-color: var(--chase-blue);
  border-color: var(--chase-blue);
  color: var(--chase-white);
}

.chase-rail__btn:focus-visible {
  outline: 2px solid var(--chase-blue);
  outline-offset: 2px;
}

/* Desabilitado continua ocupando lugar: sumir com ele faria o outro botão
   pular de posição toda vez que o trilho chega numa ponta. */
.chase-rail__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Recuo de 8px, e não mais: o .chase-container tem apenas 16px de padding
   lateral, então um botão saindo 20px estouraria a página inteira quando a
   viewport tem exatamente a largura máxima do container e o padding é toda a
   folga que existe. Medido: a 1280px o container ocupa a tela cheia.

   O deslocamento vertical desconta o padding-bottom que a pista carrega para
   a sombra do card no hover não ser cortada pelo overflow. */
.chase-rail__btn--prev {
  left: calc(var(--space-2) * -1);
  transform: translateY(calc(-50% - var(--space-2)));
}

.chase-rail__btn--next {
  right: calc(var(--space-2) * -1);
  transform: translateY(calc(-50% - var(--space-2)));
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .chase-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  .chase-benefits {
    grid-template-columns: repeat(2, 1fr);
  }

  .chase-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .chase-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .chase-hero__title {
    font-size: var(--font-size-4xl);
  }

  .chase-hero {
    padding: var(--space-16) 0;
  }
}

@media (max-width: 768px) {
  /* A busca fica recolhida atrás do botão da lupa e abre como uma faixa
     abaixo da linha do header, ocupando a largura toda. */
  .chase-header__search {
    display: none;
  }

  .chase-header__search.is-visible {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: none;
    padding: var(--space-3) var(--space-4);
    background-color: var(--chase-white);
    box-shadow: var(--shadow-md);
    z-index: 1;
  }

  .chase-header__action-btn.chase-header__search-toggle {
    display: flex;
  }

  .chase-header__action-label {
    display: none;
  }

  .chase-menu-toggle {
    display: flex;
  }

  .chase-nav {
    display: none;
  }

  .chase-catbar {
    display: block;
  }

  .chase-hero__inner {
    flex-direction: column;
    text-align: center;
  }

  .chase-hero__title {
    font-size: var(--font-size-3xl);
  }

  .chase-hero {
    padding: var(--space-12) 0;
  }

  .chase-benefits {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .chase-benefit {
    padding: var(--space-3);
  }

  .chase-categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .chase-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  /* No celular o trilho mostra pouco menos de dois cards, para ficar claro
     que há mais conteúdo para o lado. */
  .chase-products-rail {
    grid-auto-columns: minmax(150px, 60%);
    gap: var(--space-4);
  }

  /* Botões fora no celular. Ali o card ocupa 60% da tela e um botão de 40px
     cobriria parte dele; o gesto de arrastar já é nativo no toque, e a própria
     largura do card cortada ao meio na borda já avisa que há mais para o lado.
     A regra usa duas classes porque `.chase-rail__btn` é declarada acima e
     também define display — empate em especificidade se resolve por ordem, e
     esta media query vem depois, mas o hidden do JS não deve brigar. */
  .chase-rail .chase-rail__btn {
    display: none;
  }

  /* Card de ~141px de largura em duas colunas: o rótulo do botão precisa
     de corpo menor para não ficar apertado depois da quebra de linha. */
  .chase-product-card__add-to-cart {
    font-size: var(--font-size-xs);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .chase-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .chase-footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .chase-brand-statement__text {
    font-size: var(--font-size-2xl);
  }

  .chase-section {
    padding: var(--space-12) 0;
  }

  /* O modificador PRECISA ser repetido aqui. `.chase-section--slim` e
     `.chase-section` têm a mesma especificidade (0,1,0), e a regra acima é
     declarada depois no arquivo — então ela vencia por ordem e a faixa de
     benefícios ficava com 48px no celular contra os 40px do desktop, mais
     folgada justamente onde a tela é menor. Medido a 375px. */
  .chase-section--slim {
    padding: var(--space-8) 0;
  }

  .chase-section-title {
    font-size: var(--font-size-xl);
  }
}

@media (max-width: 480px) {
  .chase-header__inner {
    padding: 0 var(--space-4);
  }

  /* 32px no mobile: a 375px o wordmark ocupa ~114px de largura, e ainda cabem
     os botões de ação e o hambúrguer sem estourar a barra. */
  .chase-header__logo img,
  .chase-header__logo svg {
    height: 32px;
  }

  .chase-hero__title {
    font-size: var(--font-size-2xl);
  }

  .chase-hero__description {
    font-size: var(--font-size-base);
  }

  .chase-categories-grid {
    grid-template-columns: 1fr 1fr;
  }

  .chase-category-card {
    padding: var(--space-6) var(--space-4);
  }
}

/* ── Notificação de Carrinho ── */
.chase-cart-notification {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  background-color: var(--chase-text);
  color: var(--chase-white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  /* Era 9999 cravado. O número mágico existia porque a escala de tokens ia só
     até 500 e não passava do 999 do .site-header — o toast precisava furar isso
     na mão. Com a escala corrigida, o token carrega o mesmo valor. */
  z-index: var(--z-toast);
  transform: translateY(150%);
  opacity: 0;
  transition: transform var(--transition-base), opacity var(--transition-base);
  pointer-events: none;
}
.chase-cart-notification.is-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.chase-cart-notification__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.chase-cart-notification__message {
  font-size: var(--font-size-sm);
}
.chase-cart-notification__action {
  color: var(--chase-gold);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  font-size: var(--font-size-sm);
}
.chase-cart-notification__action:hover {
  color: var(--chase-gold-dark);
}
.chase-cart-notification__close {
  background: none;
  border: none;
  color: var(--chase-white);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .chase-cart-notification {
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
  }
  .chase-cart-notification__inner {
    justify-content: space-between;
  }
}