/* ==========================================================================
   Chase — WooCommerce Style Overrides
   Ajustes visuais sobre os templates nativos do WooCommerce/Storefront.
   Não altera lógica, apenas refina a apresentação.
   ========================================================================== */

/* ── Storefront reset — aplicar paleta Chase ── */
.storefront-primary-navigation,
.main-navigation {
  background-color: var(--chase-white) !important;
}

#page > .col-full,
.col-full {
  max-width: var(--container-max);
}

/* ── Product archive / shop page ── */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

/* O Storefront aplica um clearfix em ul.products. Num container grid os
   pseudo-elementos viram itens de grid e ocupam uma célula inteira cada,
   empurrando o primeiro produto para a segunda coluna e abrindo buracos
   na grade. Como o grid não precisa de clearfix, removemos os dois. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
}

.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  background-color: var(--chase-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.woocommerce ul.products li.product a img {
  margin-bottom: 0;
  border-radius: 0;
  transition: transform var(--transition-slow);
}

.woocommerce ul.products li.product:hover a img {
  transform: scale(1.05);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--chase-text);
  padding: var(--space-3) var(--space-4) var(--space-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.woocommerce ul.products li.product .price {
  font-family: var(--font-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--chase-text);
  padding: 0 var(--space-4);
}

/* Oferta no card da LOJA: os dois precos herdam cor, corpo e peso do preco
   normal, a pedido do proprietario em 31/08/2026. Antes o antigo saia a 14px
   em cinza e o novo saia verde e SEM o negrito -- era esse peso que aparecia
   como "fonte mudando".
   O risco no antigo fica: e o que diz qual dos dois e qual. */
.woocommerce ul.products li.product .price del {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: line-through;
  opacity: 1;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
  /* Verde SO no valor novo, a pedido do proprietario em 31/08/2026. O antigo
     fica preto, com o risco. O simbolo R$ nao tem regra propria em nenhum CSS
     nosso -- ele mora num <span class="woocommerce-Price-currencySymbol"> dentro
     do <ins>, entao herda esta cor e fica verde junto, que era o pedido. */
  color: var(--chase-success);
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  margin: auto var(--space-4) var(--space-4);
  background-color: var(--chase-blue);
  color: var(--chase-white);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  transition: all var(--transition-base);
  display: block;
  width: calc(100% - var(--space-8));
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  background-color: var(--chase-blue-dark);
  color: var(--chase-white);
}

/* Ocultar link persistente de "Ver carrinho" inserido pelo WooCommerce.
   Dois contextos de grid: o loop nativo do Storefront e os cards da home. */
.chase-cart-enhanced .woocommerce ul.products li.product a.added_to_cart.wc-forward,
.chase-cart-enhanced .chase-product-card a.added_to_cart.wc-forward {
  display: none !important;
}

/* Sale badge */
.woocommerce span.onsale {
  background-color: var(--chase-error);
  color: var(--chase-white);
  font-family: var(--font-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  min-width: auto;
  min-height: auto;
  line-height: 1.6;
  top: var(--space-3);
  left: var(--space-3);
  right: auto;
}

/* Posição da tarja SÓ na página de produto. O deslocamento fica escopado em
   `div.product` de propósito: a grade da loja usa `li.product` (são os dois
   markups de produto do projeto — ver CLAUDE.md), e sem o escopo a tarja dos
   cards também se movia, o que não foi pedido.

   Na página de produto a tarja é filha direta de `div.product` e vem ANTES da
   coluna do resumo, com `position: relative` — então `top` e `left` só a
   deslocam do lugar dela no fluxo, não a ancoram na imagem.

   `left: 0` alinha a borda esquerda dela com a do nome do produto: medido, com
   os 12px de antes ela caía em 687 contra 675 do título. O `top` negativo a
   sobe, que era o outro pedido. */
/* O `top` negativo saiu em 31/08/2026: ele cortava a tarja.
   Medido no produto 108: a tarja tem 29px de altura, subia 8px acima do pai, e
   o pai e `.single-product div.product`, que o STOREFRONT declara com
   `overflow: hidden`. Resultado, 8px dos 29 recortados.
   Nao da para desligar esse overflow: e ele que contem as colunas flutuantes
   de imagem e resumo -- sem ele a altura do contêiner colapsa e as abas sobem
   por cima. Entao quem cede e o deslocamento. */
.woocommerce div.product > span.onsale {
  top: 0;
  left: 0;
}

/* O Storefront desenha um glifo Font Awesome antes do "em estoque", em
   `assets/css/base/icons.css`:

     .stock::before          { font-family: "Font Awesome 5 Free"; ... }
     .stock.in-stock::before { content: "<glifo>" }

   E o mesmo mecanismo do quadrado que ele punha nos filtros da loja, ja
   documentado. A regra dele e 0,1,0 mais pseudo-elemento; tres classes vencem
   sem `!important`. */
.woocommerce div.product p.stock::before,
.chase-produto-cabecalho p.stock::before {
  content: none;
  margin-right: 0;
}

/* Posição da tarja na GRADE da loja — o outro markup de produto.
   Aqui ela estava caindo 253px abaixo do topo do card, medido a 1280px, em vez
   de ficar no canto superior direito. Três coisas somadas:

   1. O Storefront declara `.wc-block-grid__product-onsale, .onsale { position:
      relative }`, que vence o `position: absolute` do WooCommerce por ordem
      (as duas são 0,1,0). Sem ancoragem, a tarja passa a ocupar lugar no fluxo.
   2. Na grade ela NÃO é filha de `li.product` — o WooCommerce a coloca dentro
      do `<a class="woocommerce-LoopProduct-link">`, depois da imagem e do
      título. No fluxo, é exatamente aonde ela ia parar.
   3. O nosso bloco base define `top` e `left` para os dois markups, então o
      pouco que sobrava a empurrava para a esquerda em vez da direita.

   `li.product` já é `position: relative` (conferido no navegador), então serve
   de bloco de contenção sem precisarmos declarar nada nele.

   POR QUE ISSO SÓ APARECEU AGORA: nenhum produto do catálogo tinha preço
   promocional. O único que tem é o Charizard, e o preço de R$ 449 foi criado
   por mim SÓ NO LOCAL, em 19/08/2026, para testar a página de produto. O
   defeito é antigo — vem do commit inicial —, faltava um produto em oferta
   para revelá-lo. */
.woocommerce ul.products li.product span.onsale {
  position: absolute;
  /* Colada no canto superior esquerdo, igual à tarja do card da home. O
     `li.product` também é `border-radius: var(--radius-lg)` com
     `overflow: hidden`, então vale a mesma inversão usada lá: canto externo
     quadrado, e o card recorta no raio dele. */
  top: 0;
  left: 0;
  right: auto;
  margin: 0;
  border-radius: 0 0 var(--radius-md) 0;
  z-index: 1;
}

/* ── Single product ── */
.woocommerce div.product div.images {
  background-color: var(--chase-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

/* ── Caixa da imagem do produto ──
   Sem forma definida, o bloco da imagem herdava a proporção da foto e cada
   produto ficava com uma altura diferente. Medido a 1425px, antes:

     retrato 330x460  -> bloco de 492px de altura
     quadrada 338x338 -> bloco de 370px

   Além disso a imagem ficava encostada à ESQUERDA, com 181px de vazio à
   direita, porque as fotos do catálogo (330 a 338px de largura) são mais
   estreitas que a coluna (495px) e nada as centralizava.

   A caixa de proporção fixa resolve os dois: altura previsível para qualquer
   foto, imagem centralizada nos dois eixos e `contain` para não distorcer.
   A proporção é escolha de design — trocar o `aspect-ratio` numa linha muda a
   altura de todas as páginas de produto de uma vez.

   O `max-*: 100%` sem `width: 100%` é de propósito: as fotos já são menores que
   o pedido pelo `woocommerce_single` (416px), e esticá-las só deixaria borrado. */
/* A caixa é a própria `div.woocommerce-product-gallery__image`, e não o `<a>`
   que ficava dentro dela: o anchor foi removido junto com o lightbox (ver
   `chase_galeria_sem_link` no functions.php). Mirar a div é mais robusto de
   qualquer forma — ela existe com ou sem link, então se o lightbox voltar esta
   regra continua valendo, porque o anchor não é posicionado e a imagem absoluta
   segue resolvendo contra a div. */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  position: relative;
  display: block;
  /* Quadrada, e nao 4:3 como era ate 31/08/2026.
     A proporcao antiga foi escolhida quando as unicas fotos do catalogo eram
     retrato de 330x460. O catalogo passou a ser fotografado QUADRADO
     (1200x1200), e foto quadrada em caixa 4:3 encaixa pela altura: usava 75%
     da largura e deixava 12,5% de vazio de cada lado. Medido a 1440px: caixa
     de 495x371 com a foto renderizada a 371.
     Com 1/1 a foto quadrada preenche a caixa inteira -- 495 em vez de 371,
     34% maior. Foto em retrato continua sem distorcer, porque o `contain`
     abaixo garante isso; ela so ganha faixa lateral, que e o caso raro. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* A imagem sai do fluxo de propósito. Com ela em fluxo, `aspect-ratio` CEDE
   quando o conteúdo é mais alto que a proporção — medido no produto com
   galeria: a caixa da foto em retrato virou 495x460 em vez de 495x371, e as
   três fotos ficaram com alturas diferentes.

   Fora do fluxo, a caixa manda: `inset: 0` com `margin: auto` centraliza nos
   dois eixos, e o conteúdo não tem como esticar o pai.

   ── O seletor NÃO pode pedir `.wp-post-image` ──

   Essa classe existe só na imagem PRINCIPAL. Em `wc_get_gallery_image_html()`
   o WooCommerce faz `'class' => $main_image ? 'wp-post-image' : ''`, então
   toda imagem de galeria vai com classe vazia.

   Enquanto a regra mirava `img.wp-post-image`, ela pegava a principal e
   deixava as da galeria no fluxo, coladas no canto superior esquerdo. Medido
   em 31/08/2026 no produto 74: a principal com `position: absolute` e
   deslocamento 79,17 dentro da caixa, ou seja centralizada, e a da galeria com
   `position: static` e deslocamento 0,0. Era o "deslocamento entre a imagem
   principal e as da galeria" relatado pelo proprietário.

   Mirar o contêiner do slide cobre as duas, com a mesma especificidade de
   antes (0,4,3). */
/* O `:not(.zoomImg)` e obrigatorio, e sem ele a lupa nao funciona.
   O jQuery.zoom que o WooCommerce usa cria uma <img class="zoomImg"> dentro do
   mesmo contêiner e a move conforme o mouse. Ela PRECISA ser maior que a caixa
   -- e a regra abaixo, com max-width e max-height em 100%, a encolheria de
   volta ao tamanho da caixa, o que anula a ampliacao. */
.woocommerce div.product div.images .woocommerce-product-gallery__image img:not(.zoomImg) {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* A imagem da lupa: fica presa a caixa e acima da foto de baixo.
   O `overflow: hidden` da caixa ja recorta o que passar da borda, entao ela
   nao vaza para o resumo ao lado. */
.woocommerce div.product div.images .woocommerce-product-gallery__image img.zoomImg {
  background-color: var(--chase-white);
}

/*
 * Caixa de fundo do titulo, preco e estoque na pagina de produto.
 *
 * O involucro e criado por hook em functions.php, e nao por CSS: o resumo
 * curto do produto entra entre o preco e o estoque, entao os tres nao sao
 * irmaos consecutivos em todo produto e um fundo compartilhado por CSS
 * partiria a caixa em dois pedacos.
 */
.chase-produto-cabecalho {
  background-color: var(--chase-gray-50);
  border: 1px solid var(--chase-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

/* O ultimo filho varia: com estoque e a linha de estoque, sem estoque
   gerenciado e o proprio preco. Zerar a margem do ultimo, qualquer que seja,
   evita folga sobrando dentro da caixa. */
.chase-produto-cabecalho > *:last-child {
  margin-bottom: 0;
}

.chase-produto-cabecalho .product_title {
  margin-top: 0;
}

.woocommerce div.product .product_title {
  font-family: var(--font-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--chase-text);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-primary);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--chase-text);
}

/* Produto em oferta: os dois precos em PRETO e no mesmo corpo, a pedido do
   proprietario em 31/08/2026. Antes o antigo saia menor e cinza e o novo saia
   verde. O unico sinal que fica e o risco no preco antigo, e ele fica porque e
   o que diz qual dos dois e qual -- sem ele, dois precos iguais lado a lado
   nao significam nada. */
.woocommerce div.product p.price del {
  font-size: inherit;
  color: inherit;
  opacity: 1;
}

.woocommerce div.product p.price ins {
  text-decoration: none;
  font-weight: inherit;
  /* Verde SO no valor novo, a pedido do proprietario em 31/08/2026. O antigo
     fica preto, com o risco. O simbolo R$ nao tem regra propria em nenhum CSS
     nosso -- ele mora num <span class="woocommerce-Price-currencySymbol"> dentro
     do <ins>, entao herda esta cor e fica verde junto, que era o pedido. */
  color: var(--chase-success);
}

.woocommerce div.product .product_meta {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  color: var(--chase-gray-500);
  border-top: 1px solid var(--chase-border-light);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}

.woocommerce div.product .product_meta > span {
  display: block;
  margin-bottom: var(--space-2);
}

.woocommerce div.product .product_meta a {
  color: var(--chase-blue);
}

/* Add to cart button (single product) */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
  background-color: var(--chase-blue);
  color: var(--chase-white);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  padding: var(--space-4) var(--space-8);
  transition: all var(--transition-base);
}

.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
  background-color: var(--chase-blue-dark);
  color: var(--chase-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Quantity */
.woocommerce .quantity .qty {
  font-family: var(--font-primary);
  border: 1px solid var(--chase-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
  width: 70px;
}

.woocommerce .quantity .qty:focus {
  border-color: var(--chase-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--chase-blue-rgb), 0.15);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 var(--space-6) 0;
  list-style: none;
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--chase-border-light);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  background: none;
  border: none;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--chase-gray-500);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-fast);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--chase-blue);
  border-bottom-color: var(--chase-blue);
}

.woocommerce div.product .woocommerce-tabs .panel {
  font-family: var(--font-primary);
  line-height: var(--line-height-relaxed);
}

/* ── Cart page ── */
.woocommerce table.shop_table {
  border: 1px solid var(--chase-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-family: var(--font-primary);
}

.woocommerce table.shop_table thead th {
  background-color: var(--chase-gray-50);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--chase-text);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  padding: var(--space-4);
  border-bottom: 1px solid var(--chase-border-light);
}

.woocommerce table.shop_table td {
  padding: var(--space-4);
  vertical-align: middle;
  border-bottom: 1px solid var(--chase-border-light);
}

.woocommerce table.shop_table td.product-name a {
  color: var(--chase-text);
  font-weight: var(--font-weight-medium);
}

.woocommerce table.shop_table td.product-name a:hover {
  color: var(--chase-blue);
}

/* Cart totals */
.woocommerce .cart-collaterals .cart_totals {
  background-color: var(--chase-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.woocommerce .cart-collaterals .cart_totals h2 {
  font-family: var(--font-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
}

/* Checkout button */
.woocommerce a.checkout-button,
.woocommerce .wc-proceed-to-checkout .checkout-button {
  background-color: var(--chase-gold) !important;
  color: var(--chase-white) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  padding: var(--space-4) var(--space-8) !important;
  transition: all var(--transition-base);
  border: none;
}

.woocommerce a.checkout-button:hover,
.woocommerce .wc-proceed-to-checkout .checkout-button:hover {
  background-color: var(--chase-gold-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Continue shopping */
.woocommerce .return-to-shop .button {
  background-color: var(--chase-blue);
  color: var(--chase-white);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
}

/* ── Checkout ── */
.woocommerce form.checkout {
  font-family: var(--font-primary);
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  background-color: var(--chase-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
}

.woocommerce form .form-row label {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--chase-text);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  font-family: var(--font-primary);
  border: 1px solid var(--chase-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--chase-blue);
  box-shadow: 0 0 0 3px rgba(var(--chase-blue-rgb), 0.15);
  outline: none;
}

/* Place order button */
.woocommerce #place_order {
  background-color: var(--chase-gold);
  color: var(--chase-white);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  padding: var(--space-4) var(--space-8);
  transition: all var(--transition-base);
  width: 100%;
}

.woocommerce #place_order:hover {
  background-color: var(--chase-gold-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ── Abas da página de produto ──
   O woocommerce.css do Storefront, acima de 768px, coloca a lista de abas
   flutuando à esquerda com 29,4% e o painel de conteúdo à direita com 64,7%.
   A descrição fica ao lado das abas em vez de abaixo. Aqui voltamos ao
   padrão que o mercado usa: abas na horizontal em cima, conteúdo embaixo. */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs .panel {
  float: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0;
  margin: 0 0 var(--space-6);
  border-bottom: 2px solid var(--chase-border-light);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
  content: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  content: none;
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--chase-gray-500);
  /* Compensa a borda do ul para a marcação da aba ativa encostar nela. */
  margin-bottom: -2px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--chase-text);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--chase-blue);
  border-bottom-color: var(--chase-blue);
}

.woocommerce div.product .woocommerce-tabs .panel {
  padding: 0;
}

/* ── My Account ── */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: var(--chase-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid var(--chase-border-light);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none;
}

/* O icons.css do Storefront insere o ícone de cada item como ::before com
   float: right e opacidade baixa. Flutuando, ele encosta na borda do cartão
   e parece cortado. Aqui o link vira flex e o ícone passa a ser o primeiro
   item da linha, alinhado com o texto e com espaçamento previsível. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--chase-text);
  text-decoration: none;
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
  float: none;
  flex-shrink: 0;
  width: 1.25em;
  margin: 0;
  opacity: 0.55;
  text-align: center;
  color: inherit;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::before,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover::before {
  opacity: 1;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background-color: var(--chase-blue-lightest);
  color: var(--chase-blue);
  border-left-color: var(--chase-blue);
}

.woocommerce-account .woocommerce-MyAccount-content {
  font-family: var(--font-primary);
}

/* ── WooCommerce messages ── */
.woocommerce-message {
  border-top-color: var(--chase-success);
  background-color: var(--chase-success-light);
  color: #166534;
  font-family: var(--font-primary);
  border-radius: var(--radius-md);
}

.woocommerce-info {
  border-top-color: var(--chase-blue);
  background-color: var(--chase-blue-lightest);
  color: var(--chase-blue-dark);
  font-family: var(--font-primary);
  border-radius: var(--radius-md);
}

.woocommerce-error {
  border-top-color: var(--chase-error);
  background-color: var(--chase-error-light);
  color: #991b1b;
  font-family: var(--font-primary);
  border-radius: var(--radius-md);
}

.woocommerce-message a,
.woocommerce-info a {
  color: inherit;
  font-weight: var(--font-weight-semibold);
}

/* ── Ordering / Result count ── */
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  color: var(--chase-gray-500);
}

.woocommerce .woocommerce-ordering select {
  font-family: var(--font-primary);
  border: 1px solid var(--chase-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
}

/* ── Pagination ── */
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.current {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-2) var(--space-3);
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  border: none;
}

.woocommerce nav.woocommerce-pagination ul li a {
  background-color: var(--chase-white);
  color: var(--chase-text);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background-color: var(--chase-blue-lightest);
  color: var(--chase-blue);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--chase-blue);
  color: var(--chase-white);
}

/* ── Widgets / Sidebar filters ── */
.woocommerce .widget {
  font-family: var(--font-primary);
  margin-bottom: var(--space-6);
  background-color: var(--chase-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-xs);
}

.woocommerce .widget h2,
.woocommerce .widget .widget-title {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--chase-text);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--chase-border-light);
}

/* ── Vídeo do produto ──
   A fachada ocupa a mesma caixa que o iframe vai ocupar, para a página não dar
   um salto quando o vídeo entra. `aspect-ratio: 16 / 9` é a proporção do
   YouTube; o poster usa `object-fit: cover` porque a foto do produto quase
   nunca é 16:9 e sobra melhor recortada do que com tarjas. */
.chase-video {
  margin: var(--space-10) 0 0;
  clear: both;
}

.chase-video__titulo {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--chase-text);
  margin: 0 0 var(--space-4);
}

/* O teto de largura não é estética: sem ele o quadro estica com o container e
   fica maior que o próprio produto. Medido a 1280px de viewport, antes do
   teto: o vídeo saía com 1181px contra 486px da galeria de fotos — 243% da
   largura da foto do produto, competindo com ela e com o botão de comprar.

   640px é confortável de assistir e visivelmente subordinado à página. No
   celular o `max-width` não morde, porque a coluna já é mais estreita que
   isso, e o vídeo ocupa a largura toda naturalmente. */
.chase-video__quadro {
  position: relative;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--chase-gray-900);
}

.chase-video__poster,
.chase-video__poster img,
.chase-video__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.chase-video__poster img {
  object-fit: cover;
  /* A foto escurece um pouco para o botão de tocar ter contraste garantido
     sobre qualquer imagem — inclusive uma carta clara. */
  filter: brightness(0.72);
}

.chase-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  /* O Storefront aplica `padding: 9.9px 22.65px` em TODO button, e num botão
     redondo isso deforma a caixa e achata o SVG. */
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--chase-white);
  color: var(--chase-text);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.chase-video__play svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  /* O triângulo é opticamente pesado à esquerda; 3px o centram no círculo. */
  margin-left: 3px;
}

.chase-video__play:hover {
  transform: translate(-50%, -50%) scale(1.06);
  background-color: var(--chase-gold);
}

.chase-video__play:focus-visible {
  outline: 3px solid var(--chase-white);
  outline-offset: 3px;
}

/* Explicação de por que o vídeo não tocou, quando falta consentimento. */
.chase-video__aviso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: var(--space-4);
  background-color: rgba(34, 40, 43, 0.92);
  color: var(--chase-white);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  text-align: center;
}

.chase-video__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--chase-gold-light);
  text-decoration: underline;
  cursor: pointer;
}

.chase-video__link:hover {
  color: var(--chase-white);
}

@media (max-width: 768px) {
  .chase-video {
    margin-top: var(--space-8);
  }

  .chase-video__play {
    width: 56px;
    height: 56px;
  }

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

/* ── Filtros da loja (navegação em camadas) ──
   O WooCommerce entrega cada opção assim:

     <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term [chosen]">
       <a rel="nofollow" href="...">Nome</a> <span class="count">(2)</span>
     </li>

   Duas coisas importam aqui:

   1. O sublinhado vem do Storefront, em `.widget-area .widget a`, que é
      0,2,1. Uma classe nossa sozinha perde. Por isso os seletores abaixo
      levam TRÊS classes — mesma aritmética que já resolveu o campo de busca.

   2. A caixa de marcação não precisa de JavaScript nem de <input>: o
      WooCommerce já marca a opção ativa com a classe `chosen` no <li>, então
      o quadradinho é um pseudo-elemento e o estado sai da cascata. Por baixo
      continua sendo um link, então o filtro funciona com JS desligado. */
.widget-area .widget_layered_nav ul.woocommerce-widget-layered-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget-area .widget_layered_nav .wc-layered-nav-term {
  margin: 0;
  padding: 0;
  border: 0;
}

/* O QUADRADO CINZA que aparecia ao lado de cada opção é do Storefront, não
   nosso. Em `css/base/icons.css` ele declara

     .widget_layered_nav li::before { content: "\f0c8" }

   com `font-family: "Font Awesome 5 Free"`, peso 900 e `float: left`. O
   U+F0C8 é o glifo `fa-square` — um quadrado sólido — e a fonte está de fato
   carregada, então ele desenha, herdando o cinza do corpo do texto.

   É o marcador de lista que o Storefront pendura em TODO widget de navegação
   (categorias, páginas, arquivos, menu, layered nav). Sempre esteve ali; só
   ficou evidente quando passou a conviver com a nossa caixa de marcação ao
   lado, virando dois marcadores para a mesma opção.

   Mesma família das outras armadilhas de `::before` do Storefront já
   registradas no CLAUDE.md — os ícones do menu da conta com `float: right`
   vieram deste mesmo arquivo. */
.widget-area .widget_layered_nav .wc-layered-nav-term::before {
  content: none;
}

/* O link é a linha inteira: caixa, rótulo e contagem. É isso que exige o
   filtro chase_filtro_contagem_no_link() no functions.php — a contagem
   nasce FORA da âncora, e aqui ela precisa estar dentro. */
.widget-area .widget_layered_nav .wc-layered-nav-term a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  color: var(--chase-text);
  font-weight: var(--font-weight-normal);
  text-decoration: none;
}

.widget-area .widget_layered_nav .wc-layered-nav-term a:hover {
  color: var(--chase-blue);
  text-decoration: none;
}

.widget-area .widget_layered_nav .wc-layered-nav-term a::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  /* --chase-border (#ddd8ce) sobre o branco do widget dá 1,35:1, abaixo dos
     3:1 que o WCAG pede para a borda de um controle de interface — a caixa
     vazia praticamente sumia. O --chase-gray-500 (#6b7280) mede 4,8:1. */
  border: 2px solid var(--chase-gray-500);
  border-radius: var(--radius-sm);
  background-color: var(--chase-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.widget-area .widget_layered_nav .wc-layered-nav-term a:hover::before {
  border-color: var(--chase-text);
}

/* Opção marcada: caixa preenchida em preto com o tique branco dentro. */
.widget-area .widget_layered_nav .wc-layered-nav-term.chosen a {
  font-weight: var(--font-weight-semibold);
}

.widget-area .widget_layered_nav .wc-layered-nav-term.chosen a::before {
  background-color: var(--chase-text);
  border-color: var(--chase-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Contagem empurrada para a direita, depois de entrar na âncora. */
.widget-area .widget_layered_nav .wc-layered-nav-term a .count {
  margin-left: auto;
  padding-left: var(--space-2);
  color: var(--chase-gray-500);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}

/* Termo sem produto: o WooCommerce troca a âncora por <span>, então ele não
   ganha caixa de marcação — mas ainda precisa alinhar com os outros. */
.widget-area .widget_layered_nav .wc-layered-nav-term > span:first-child {
  display: inline-block;
  padding: var(--space-2) 0 var(--space-2) calc(18px + 4px + var(--space-2));
  color: var(--chase-gray-400);
}

/* ── WooCommerce responsive ── */
@media (max-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    width: 100% !important;
    float: none !important;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2 {
    width: 100% !important;
    float: none !important;
  }

  /* Botão do loop nativo: card de ~157px em duas colunas. */
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .add_to_cart_button {
    font-size: var(--font-size-xs);
    padding: var(--space-3) var(--space-2);
    width: calc(100% - var(--space-4));
    margin: auto var(--space-2) var(--space-2);
  }

  /* "Minha conta": o woocommerce-layout.css do WooCommerce declara
     .woocommerce-MyAccount-navigation { float:left; width:30% } e
     .woocommerce-MyAccount-content { float:right; width:68% } sem
     nenhuma media query. Em telas pequenas isso espreme o menu em
     ~99px. Empilhamos as duas colunas. */
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: var(--space-6);
  }

  /* Alvo de toque confortável nos itens do menu da conta. */
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    padding: var(--space-4) var(--space-5);
  }
}