/* ==========================================================================
   Chase — carrinho lateral e aviso de adição, no design system

   Os dois são componentes NOSSOS, de 2026, e não do handoff — o protótipo não
   tem gaveta. Mas eles abrem em toda adição ao carrinho, em qualquer tela, e
   por isso são a superfície que mais aparece depois do header.

   Carregam em todo lugar, como o `componentes.css`: a gaveta pode abrir na
   home, na loja ou numa página legal.

   ── O QUE JÁ ESTAVA CERTO ──

   A estrutura, o `z-index` acima do 999 do `.site-header`, o `visibility` com
   duração zero na entrada, o foco que entra no painel e a trava de rolagem do
   corpo. Nada disso se toca: são correções de 2026 que este redesenho não tem
   por que refazer, e duas delas estão registradas como armadilha no projeto.

   O que entra aqui é vocabulário: a família de display nos títulos e nos
   valores, o botão amarelo no lugar do azul, e a foto do item numa caixa
   quadrada.

   ── O TOAST É RESERVA, E CONTINUA SENDO ──

   O `chase.js` não mostra o aviso quando a gaveta existe: `if (cartDrawerAtivo)
   return`. A gaveta JÁ É a confirmação da adição, e os dois juntos chegaram a
   se sobrepor. O aviso fica no código para o caso de a casca do painel não
   existir — WooCommerce inativo, por exemplo.

   Ou seja: o bloco 5 deste arquivo é para um estado que quase nunca aparece.
   Ele está aqui porque "quase nunca" não é "nunca", e porque um aviso na
   identidade antiga no meio de um site novo seria pior que nenhum aviso.
   ========================================================================== */

/* ==========================================================================
   1. Painel e véu

   O véu vai para o azul escuro da marca em vez do cinza: é o mesmo tom do
   `Dialog.jsx` do handoff, que usa `rgba(18,23,28,0.45)`. Aqui o valor é o
   `--neutral-900` com a mesma opacidade, escrito em `rgba` porque cor dentro
   de `rgba()` não aceita `var()` de hex — a mesma razão das quatro triplas RGB
   que a ponte guarda.

   A sombra do painel passa para `--shadow-lg`, que é a do handoff para
   superfície elevada.
   ========================================================================== */

.chase-cart-drawer__overlay {
  background-color: rgba(18, 23, 28, 0.45);
}

.chase-cart-drawer__panel {
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   2. Cabeçalho

   "Seu carrinho" é o mesmo título de cartão do resumo: `text-lg` em Outfit
   600. Vinha em IBM Plex Sans 18px com peso 700.
   ========================================================================== */

.chase-cart-drawer__header {
  border-bottom: 1px solid var(--border-subtle);
}

.chase-cart-drawer__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}

.chase-cart-drawer__close {
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.chase-cart-drawer__close:hover,
.chase-cart-drawer__close:focus-visible {
  background: var(--blue-50);
  color: var(--text-link);
}

/* ==========================================================================
   3. Itens

   O mini-carrinho é markup do WooCommerce (`woocommerce_mini_cart()`), então
   aqui é só desenho — mesma regra do carrinho e do checkout.

   A FOTO VIRA QUADRADA. Ela chegava com 37×56, que é a proporção do arquivo:
   o WooCommerce entrega a miniatura e deixa a altura livre. No cartão do
   carrinho a foto é uma caixa 1:1 com `object-fit: contain`, e não há motivo
   para a gaveta mostrar o mesmo produto noutra proporção.
   ========================================================================== */

.chase-cart-drawer__body li.woocommerce-mini-cart-item {
  border-bottom: 1px solid var(--border-subtle);
}

.chase-cart-drawer__body li.woocommerce-mini-cart-item:last-child {
  border-bottom: 0;
}

/* A FOTO ESTAVA DO LADO ERRADO, E ISSO E DEFEITO ANTIGO.

   O `layout.css` monta o item como grade de `56px 1fr auto` e poe
   `grid-column: 1` na `<img>`, supondo que ela seja filha direta do `<li>`.
   O WooCommerce embrulha a foto E o nome no MESMO `<a>`, entao a imagem nunca
   foi item de grade: a coluna declarada para ela nao valia, e o que a
   posicionava era o `float: right` do `.product_list_widget li img` do
   Storefront.

   Medido: a foto ficava em x=1179 — encostada na borda direita do painel — com
   36,65x56px, porque o `max-width: 2.61792em` do Storefront a apertava.

   A saida e o proprio `<a>` virar a grade de duas colunas. Assim a foto volta
   para a esquerda, quadrada, e o nome ocupa o resto — que e o mesmo arranjo do
   cartao de item do carrinho.

   O defeito existe tambem com o design system DESLIGADO, porque mora no
   `layout.css`. Nao foi corrigido la: mexer no visual antigo esta fora do
   escopo deste redesenho.

   O `li` NO SELETOR E OBRIGATORIO. O `layout.css` escreve
   `li.woocommerce-mini-cart-item a:not(.remove) { grid-column: 2 }`, que e
   (0,3,2); sem o `li`, o nosso fica em (0,3,1) e perde. Medido: o `<a>`
   continuava na coluna 2 e sobrava uma primeira coluna de 56px vazia, com a
   foto comecando 68px para dentro do painel. */
.chase-cart-drawer__body li.woocommerce-mini-cart-item > a:not(.remove) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: center;
}

.chase-cart-drawer__body li.woocommerce-mini-cart-item img {
  float: none;
  width: 56px;
  height: 56px;
  max-width: none;
  margin: 0;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--neutral-0);
  border-radius: var(--radius-sm);
}

/* A quantidade fica na coluna do nome, na linha de baixo. */
.chase-cart-drawer__body li.woocommerce-mini-cart-item .quantity {
  grid-column: 2;
}

/* O "x" de remover sai do fluxo da grade e vai para o canto, para nao abrir
   uma terceira coluna que empurraria o nome. */
.chase-cart-drawer__body li.woocommerce-mini-cart-item {
  position: relative;
  padding-right: 28px;
}

.chase-cart-drawer__body li.woocommerce-mini-cart-item > a.remove {
  position: absolute;
  top: var(--space-3);
  right: 0;
  color: var(--text-subtle);
}

.chase-cart-drawer__body li.woocommerce-mini-cart-item > a.remove:hover,
.chase-cart-drawer__body li.woocommerce-mini-cart-item > a.remove:focus-visible {
  color: var(--danger-500);
}

.chase-cart-drawer__body li.woocommerce-mini-cart-item a:not(.remove) {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  text-decoration: none;
}

.chase-cart-drawer__body li.woocommerce-mini-cart-item a:not(.remove):hover,
.chase-cart-drawer__body li.woocommerce-mini-cart-item a:not(.remove):focus-visible {
  color: var(--text-link);
}

.chase-cart-drawer__body .quantity {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* O subtotal fecha a lista, e o valor vai para a família de display como em
   toda outra superfície de preço do site. */
.chase-cart-drawer__body .woocommerce-mini-cart__total {
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-base);
  color: var(--text-body);
}

.chase-cart-drawer__body .woocommerce-mini-cart__total strong,
.chase-cart-drawer__body .woocommerce-mini-cart__total .amount {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.chase-cart-drawer__body .woocommerce-mini-cart__empty-message {
  font-size: var(--text-base);
  color: var(--text-muted);
}

/* ==========================================================================
   4. Os dois botões

   "Finalização de compra" era azul e "Ver carrinho" cinza. Passam para as
   variantes do `Button.jsx`: o de finalizar vira `accent`, que é o amarelo de
   conversão usado em todo o funil, e o de ver carrinho vira `secondary`,
   branco com borda.

   O TAMANHO É `md`, e não `lg`. O `Button.jsx` guarda
   `md: { padding: '10px 18px', height: 44 }` — os 52px do `lg` dentro de um
   painel de 400px deixariam dois blocos pesados empilhados. Os 44px também são
   o mínimo de área de toque, então nada se perde.
   ========================================================================== */

.chase-cart-drawer .woocommerce-mini-cart__buttons .button,
.chase-cart-drawer__body .woocommerce-mini-cart__buttons a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 18px;
  min-height: 44px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--blue-700);
  box-shadow: none;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1.2;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}

.chase-cart-drawer .woocommerce-mini-cart__buttons .button:hover,
.chase-cart-drawer .woocommerce-mini-cart__buttons .button:focus-visible {
  background: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-700);
}

/* O `checkout` é o botão de conversão, e o WooCommerce lhe dá essa classe. */
.chase-cart-drawer .woocommerce-mini-cart__buttons .button.checkout,
.chase-cart-drawer__body .woocommerce-mini-cart__buttons a.button.checkout {
  border-color: transparent;
  background: var(--action-accent);
  color: var(--text-on-yellow);
  box-shadow: var(--shadow-sm);
}

.chase-cart-drawer .woocommerce-mini-cart__buttons .button.checkout:hover,
.chase-cart-drawer .woocommerce-mini-cart__buttons .button.checkout:focus-visible {
  background: var(--action-accent-hover);
  border-color: transparent;
  color: var(--text-on-yellow);
}

/* ==========================================================================
   5. Aviso de adição — a reserva

   Do `Toast.jsx`: fundo `--surface-card`, `radius-md`, `--shadow-lg`, recuo de
   `--space-4`, largura entre 300 e 420, e o texto do título em Outfit 600.

   O nosso markup é mais simples que o do handoff — uma linha com mensagem,
   ação e fechar, sem o círculo de ícone — e continua assim: acrescentar o
   ícone exigiria mexer no `chase.js`, e este é um estado que a gaveta já
   cobre. Ver a nota do cabeçalho.
   ========================================================================== */

.chase-cart-notification__inner {
  min-width: 300px;
  max-width: 420px;
  padding: var(--space-4);
  gap: var(--space-3);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.chase-cart-notification__message {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

.chase-cart-notification__action {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-link);
  text-decoration: none;
}

.chase-cart-notification__action:hover,
.chase-cart-notification__action:focus-visible {
  color: var(--text-link-hover);
  text-decoration: underline;
}

.chase-cart-notification__close {
  color: var(--text-subtle);
}

.chase-cart-notification__close:hover,
.chase-cart-notification__close:focus-visible {
  color: var(--text-body);
}