/* ==========================================================================
   Chase — carrinho do design system

   Tradução de `referencia/loja/CartScreen.jsx` e dos componentes que ela usa:
   `Card.jsx`, `ProductMedia.jsx`, `QuantityStepper.jsx`, `PriceBlock.jsx` e
   `Button.jsx`. Cada valor aqui saiu do objeto `style` do componente
   correspondente.

   Carrega só na página do carrinho, e obedece o interruptor `CHASE_DS_ATIVO`.

   ── ESTA TELA É REACT, E ISSO MUDA O MÉTODO ──

   O carrinho é o **Cart Block** (`wp:woocommerce/cart`), igual ao checkout. O
   markup é gerado pelo JavaScript do WooCommerce e refeito a cada mudança de
   quantidade — então aqui **não se acrescenta nem se move elemento**, como já
   está registrado no projeto para o checkout. Tudo o que segue é CSS.

   A consequência prática: o que o bloco não renderiza, não entra. Está listado
   no fim deste cabeçalho.

   ── O PREFIXO `body` DE NOVO ──

   Mesma razão da página de produto: o `wc-blocks-style.css` do WooCommerce e o
   `woocommerce.css` do Storefront escrevem seletores desta tela na mesma forma
   que a nossa, e carregam depois. Empate é derrota. `body.woocommerce-cart`
   acrescenta uma classe e um elemento e desfaz o empate sem `!important`.

   ── A TABELA VIRA CARTÕES, E POR QUE ISSO É ACEITÁVEL ──

   O bloco entrega os itens numa `<table>` com cabeçalho "Produto / Detalhes /
   Total". O handoff mostra um cartão por item. A conversão usa `display` nos
   elementos de tabela — o que normalmente custaria a semântica.

   Custa menos do que parece porque **o próprio WooCommerce já faz isso**:
   medido, `.wc-block-cart-item__total` já vem com `display: flex`, e no
   celular o bloco reempilha a linha inteira. A tabela já não é lida como
   tabela em nenhuma largura.

   O cabeçalho não é apagado com `display: none`: ele vai para o padrão de
   leitor de tela, então continua no fluxo de acessibilidade mesmo saindo da
   tela.

   ── O QUE FICA DE FORA, E POR QUÊ ──

     A MARCA acima do nome do item. O bloco não renderiza categoria por linha,
     e não há de onde tirar sem tocar no React.

     A ESCOLHA "Pix / Cartão de crédito" no resumo. No protótipo ela recalcula
     o total ali mesmo. No WooCommerce a forma de pagamento é escolhida no
     checkout, e o desconto do Pix é aplicado pelo gateway. Um par de opções
     que não mudasse nada seria pior que a ausência delas — e as condições em
     si ainda são item aberto no PRODUCAO.md.

     O botão "Continuar comprando". É um bloco a mais dentro do carrinho, e
     acrescentar bloco é editar o conteúdo da página, não o código.

     O texto "Remover". O bloco entrega um botão de ícone com `aria-label`
     completo ("Remover X do carrinho"). Trocar ícone por texto via CSS
     `content` faria um rótulo que leitor de tela não anuncia e tradução não
     alcança. O ícone fica, com o tom do botão fantasma do handoff.
   ========================================================================== */

/* ==========================================================================
   1. Contêiner e o título

   Do CartScreen: `max-width: var(--container-max)` com
   `padding: var(--space-8) var(--container-pad) 0` — repare que aqui o topo é
   `--space-8`, e não o `--space-6` da listagem e da página de produto. O
   `<h1>` vem em `text-3xl` com `margin-bottom: var(--space-6)`.
   ========================================================================== */

body.woocommerce-cart #content > .col-full {
  box-sizing: border-box;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--container-pad) 0;
}

/* O Storefront clearfixa o `.col-full`; aqui ele não faz mal, mas some junto
   com o resto para a caixa ficar previsível. */
/* Tres margens de baixo somavam antes do rodape, e o handoff nao tem nenhuma:
   o `.site-main` e o `.content-area` do Storefront, e o `.hentry` do artigo,
   que sozinho vale 4,2358em. Medido, 132px de vao onde deviam ser 64 — e os 64
   ja sao do proprio rodape desde a 1.11.5. */
body.woocommerce-cart .site-main,
body.woocommerce-cart .content-area,
body.woocommerce-cart .site-main > article.hentry {
  margin-bottom: 0;
}

body.woocommerce-cart .entry-header {
  margin: 0;
  padding: 0;
  border: 0;
}

body.woocommerce-cart .entry-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-6);
}

/* ==========================================================================
   2. As duas colunas

   Do CartScreen: `gridTemplateColumns: '1.6fr 1fr'`, `gap: var(--space-8)`,
   `alignItems: 'start'`.

   O bloco entrega um flex com três filhos, e o primeiro é uma casca
   `position: absolute` que o React usa para medir — ela não ocupa trilha, e
   por isso a grade pode ser declarada sem precisar escondê-la.

   As duas colunas trazem `padding` lateral do próprio bloco, medido em 53,48px
   na principal e 26,73px na lateral. É o vão dele; o nosso é o `gap`.
   ========================================================================== */

body.woocommerce-cart .wc-block-cart {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

body.woocommerce-cart .wc-block-cart__main {
  grid-column: 1;
  width: auto;
  max-width: none;
  padding: 0;
}

body.woocommerce-cart .wc-block-cart__sidebar {
  grid-column: 2;
  width: auto;
  max-width: none;
  padding: 0;
}

@media (max-width: 768px) {
  body.woocommerce-cart .wc-block-cart {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  body.woocommerce-cart .wc-block-cart__main,
  body.woocommerce-cart .wc-block-cart__sidebar {
    grid-column: 1;
  }
}

/* ==========================================================================
   3. Cada item vira um cartão

   Do CartScreen: `Card` com `padding: var(--space-4)`, em grade
   `96px 1fr auto` com `gap: var(--space-4)` e `alignItems: 'center'`. A lista
   é uma coluna flex com `gap: var(--space-4)`.

   O cartão em si é o `Card.jsx` no tom padrão: `--surface-card`, `radius-lg`,
   `--shadow-md`.
   ========================================================================== */

body.woocommerce-cart table.wc-block-cart-items {
  display: block;
  width: auto;
  margin: 0;
  border: 0;
  border-collapse: separate;
  background: transparent;
}

/* O cabeçalho da tabela sai da tela mas não do documento. `display: none` o
   tiraria também do leitor de tela, e ele é o que dá nome às colunas para
   quem não vê o cartão. */
body.woocommerce-cart table.wc-block-cart-items thead {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body.woocommerce-cart table.wc-block-cart-items tbody {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* O `.wc-block-cart` a mais no seletor tem conta: abaixo de 699px o bloco
   redefine a linha como `80px 132px` num seletor de (0,3,1), e sem ele o nosso
   perdia — medido a 375px, a foto ia para 80px e o total abria uma terceira
   trilha implicita de 83. */
body.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  background: var(--surface-card);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

body.woocommerce-cart .wc-block-cart-items__row > td {
  display: block;
  padding: 0;
  border: 0;
  vertical-align: middle;
}

/* Do `ProductMedia` da linha: 96px quadrado, `radius-sm`, imagem contida. */
body.woocommerce-cart .wc-block-cart-item__image {
  width: 96px;
}

/* O `<img>` mora dentro de um `<a>` INLINE, e o bloco lhe da `width: 100%`.
   Percentual de largura resolve contra o pai — e um `<a>` inline encolhe para
   o tamanho do conteudo, entao 100% valia 80px, que e o tamanho intrinseco da
   miniatura. Fazer a ancora virar bloco e o que da a ela os 96px da celula.

   O seletor tambem precisa de peso: o do bloco e
   `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img`,
   que e (0,3,2) — mais que os (0,2,2) de um `body.woocommerce-cart` sozinho. */
body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__image a {
  display: block;
}

body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__image img {
  width: 96px;
  height: 96px;
  max-width: none;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--neutral-0);
  border-radius: var(--radius-sm);
  display: block;
}

/* Do bloco do meio: nome em 600 `--text-strong`, e a linha de controles com
   `gap: var(--space-3)` e `margin-top: var(--space-3)`. */
body.woocommerce-cart .wc-block-cart-item__wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Mesma disputa da foto: o bloco escreve o nome em 14px e peso 500 num seletor
   de (0,3,1), e o handoff pede 16px e 600. */
body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  text-decoration: none;
}

body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:hover,
body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:focus-visible {
  color: var(--text-link);
}

/* O preço unitário e a descrição curta não estão no cartão do protótipo, mas
   estão no markup do bloco. Ficam, em tom secundário: o protótipo mostra só o
   total da linha porque no mock a quantidade é sempre visível ao lado — aqui a
   informação é a mesma e some quem a esconderia sem motivo. */
body.woocommerce-cart .wc-block-cart-item__prices {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

body.woocommerce-cart .wc-block-components-product-metadata {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

body.woocommerce-cart .wc-block-cart-item__quantity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: 0;
}

/* ==========================================================================
   4. Passo a passo da quantidade, tamanho `sm`

   Do `QuantityStepper.jsx` com `size="sm"`: altura 34 por botão, borda de 1px
   em `--border-default`, `radius-md`, fundo `--surface-card`. O bloco já
   entrega os botões de menos e mais — diferente da página de produto, onde
   eles tiveram que ser criados. Aqui é só desenho.

   O bloco põe o campo ANTES dos dois botões no markup e reordena por CSS. Não
   mexemos nisso: é dele, e funciona.
   ========================================================================== */

body.woocommerce-cart .wc-block-components-quantity-selector {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  overflow: hidden;
  min-width: 0;
  margin: 0;
}

body.woocommerce-cart .wc-block-components-quantity-selector::after {
  content: none;
}

body.woocommerce-cart .wc-block-components-quantity-selector__button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--blue-700);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 18px;
  line-height: 1;
  opacity: 1;
}

body.woocommerce-cart .wc-block-components-quantity-selector__button:hover:not(:disabled),
body.woocommerce-cart .wc-block-components-quantity-selector__button:focus-visible:not(:disabled) {
  background: var(--blue-50);
  color: var(--blue-700);
}

body.woocommerce-cart .wc-block-components-quantity-selector__button:disabled {
  color: var(--neutral-300);
  background: transparent;
}

body.woocommerce-cart .wc-block-components-quantity-selector__input {
  width: 36px;
  min-width: 36px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--text-strong);
}

body.woocommerce-cart .wc-block-components-quantity-selector:focus-within {
  border-color: var(--border-brand);
  box-shadow: var(--ring);
}

/* Do botão fantasma do handoff: sem fundo, sem borda, texto em `--text-link`.
   Aqui o conteúdo é o ícone de lixeira que o bloco entrega. */
body.woocommerce-cart .wc-block-cart-item__remove-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--text-link);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

body.woocommerce-cart .wc-block-cart-item__remove-link:hover,
body.woocommerce-cart .wc-block-cart-item__remove-link:focus-visible {
  background: var(--blue-50);
  color: var(--text-link-hover);
}

body.woocommerce-cart .wc-block-cart-item__remove-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

/* Do `PriceBlock` com `size="sm"` na terceira coluna: 20px em Outfit 700. */
body.woocommerce-cart .wc-block-cart-item__total {
  display: block;
  text-align: right;
}

body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  /* `PriceBlock` no tamanho `sm` sao 20px, e nao os 24 do `xl`. */
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  line-height: 1.1;
}

@media (max-width: 568px) {
  /* A 375px não cabem foto, texto e total na mesma linha: o total desce e
     encosta à esquerda, alinhado com o texto. */
  body.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  body.woocommerce-cart .wc-block-cart .wc-block-cart-item__total {
    grid-column: 2;
    text-align: left;
  }
}

/* ==========================================================================
   5. O cartão do resumo

   Do CartScreen: `Card` com `padding: var(--space-6)`, coluna flex com
   `gap: var(--space-4)` e `position: sticky; top: 160`.

   O `<h2>` em `text-lg`, as linhas de subtotal e frete em `text-sm` com o
   rótulo em `--text-muted`, e cada seção separada por uma linha de 1px em
   `--border-subtle` com `padding-top: var(--space-4)`.

   O 160 do protótipo é a altura do header dele mais 10px de folga. O nosso
   header grudado mede 129, então o equivalente é 139 — o mesmo número já usado
   na lateral de filtros da listagem.
   ========================================================================== */

body.woocommerce-cart .wc-block-cart__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 139px;
}

/* O DESLIGAMENTO DO STICKY VEM DEPOIS DA REGRA BASE, e nao junto do resto do
   responsivo la em cima. Media query nao acrescenta especificidade: com o
   override na secao das colunas, o `sticky` daqui vinha depois e ganhava.
   Medido a 375px, o resumo continuava grudando. Mesma armadilha ja registrada
   para o `.chase-section--slim` e para o seletor de ordenacao da listagem. */
@media (max-width: 768px) {
  /* Empilhado, o resumo e o ultimo bloco da pagina — grudar no topo nao tem o
     que revelar, e so atrapalharia a rolagem ate o rodape. */
  body.woocommerce-cart .wc-block-cart__sidebar {
    position: static;
    top: auto;
  }
}

body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

body.woocommerce-cart .wc-block-cart__totals-title,
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  text-transform: none;
  margin: 0;
  padding: 0;
}

body.woocommerce-cart .wc-block-components-totals-wrapper {
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border-subtle);
}

body.woocommerce-cart .wc-block-components-totals-wrapper::after {
  content: none;
}

body.woocommerce-cart .wc-block-components-totals-item {
  padding: 0;
  font-size: var(--text-sm);
}

body.woocommerce-cart .wc-block-components-totals-item__label {
  color: var(--text-muted);
}

body.woocommerce-cart .wc-block-components-totals-item__value {
  color: var(--text-body);
}

/* A linha do total, que o bloco marca com `--footer`.

   O valor e o `PriceBlock` no tamanho `md`, que sao **28px** — e nao um degrau
   da rampa. O `PriceBlock.jsx` guarda os tres tamanhos como numeros crus
   (`{sm: 20, md: 28, lg: 36}`), e so o `sm` e o `lg` coincidem com
   `--text-lg` e `--text-3xl`. Escrever `--text-2xl` aqui daria 30, dois a mais.

   O rotulo vem do bloco em 23px, herdado do `<h2>` que ele usa ali. Fica no
   tamanho do corpo, em `--text-strong`: e o total, entao merece peso, mas nao
   competir com o proprio numero. */
body.woocommerce-cart .wc-block-components-totals-footer-item {
  font-size: var(--text-base);
}

body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 28px;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  line-height: 1.1;
}

body.woocommerce-cart .wc-block-components-totals-item__description {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* O cupom é do bloco e não existe no protótipo. Fica, porque é função: o que
   muda é só o tom, para não competir com o total. */
body.woocommerce-cart .wc-block-components-totals-coupon {
  font-size: var(--text-sm);
}

body.woocommerce-cart .wc-block-components-panel__button {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-link);
  padding: 0;
}

/* ==========================================================================
   6. Botão de finalizar

   Do `Button.jsx` variante `accent` no tamanho `lg`: fundo `--action-accent`,
   texto `--text-on-yellow`, `padding: 14px 24px`, `min-height: 52`,
   `radius-md`, `--shadow-sm`, família de display em 600.

   O bloco entrega um `<a>` preto e quadrado — o padrão do WooCommerce, que
   nunca passou pelo tema porque o carrinho é bloco.
   ========================================================================== */

body.woocommerce-cart .wc-block-cart__submit,
body.woocommerce-cart .wc-block-cart__submit-container {
  margin: 0;
  padding: 0;
}

/* O bloco poe `min-height: 3em` num seletor com `:not()`, que conta como
   classe. Sem a classe do proprio botao no nosso seletor, o 52px do handoff
   perdia e o botao saia com 54. */
body.woocommerce-cart .wc-block-cart__submit-container > a.wc-block-components-button,
body.woocommerce-cart a.wc-block-cart__submit-button.wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 24px;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--action-accent);
  color: var(--text-on-yellow);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: 1.2;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}

body.woocommerce-cart .wc-block-cart__submit-container > a.wc-block-components-button:hover,
body.woocommerce-cart .wc-block-cart__submit-container > a.wc-block-components-button:focus-visible {
  background: var(--action-accent-hover);
  color: var(--text-on-yellow);
}

body.woocommerce-cart .wc-block-cart__submit-container > a.wc-block-components-button:active {
  background: var(--action-accent-active);
}

/* ==========================================================================
   7. Carrinho vazio

   Do CartScreen: um `Card` com `padding: var(--space-12)` e texto centrado,
   com a frase em `--text-muted` e um botão abaixo.

   O bloco tem um layout próprio para este estado, com imagem e título. O que
   muda aqui é a moldura e o tom; o conteúdo é dele, e é editável na própria
   página.
   ========================================================================== */

/* O ESTADO VAZIO NAO VIRA UM CARTAO SO, e isso e escolha.

   No protovipo ele e um `Card` com uma frase e um botao. Aqui o bloco vazio
   guarda muito mais: titulo, separador, um segundo titulo e uma vitrine de
   produtos novos — tudo isso e conteudo da pagina, editavel no editor de
   blocos. Envolver a vitrine inteira numa moldura de `--space-12` faria um
   cartao gigante com uma grade de produtos dentro, que nao e o que o handoff
   mostra nem o que o bloco foi desenhado para ser.

   Entao aqui entra so o tom: o titulo na familia de display e o texto no
   cinza do design system. A vitrine segue com o card de produto que o
   `componentes.css` ja desenha para a loja inteira.

   A classe e `.wp-block-woocommerce-empty-cart-block`, e nao um modificador do
   `.wc-block-cart` — sao dois blocos irmaos no conteudo da pagina, e o
   WooCommerce mostra um ou outro. */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
  text-align: center;
}

body.woocommerce-cart .wc-block-cart__empty-cart__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0 0 var(--space-5);
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block p {
  color: var(--text-muted);
}

/* ==========================================================================
   8. O que fecha a página

   O rodapé já traz o próprio respiro de `--section-gap` desde a 1.11.5, então
   aqui só é preciso não somar margem por cima disso.
   ========================================================================== */

body.woocommerce-cart .wp-block-woocommerce-cart {
  margin-bottom: 0;
}