/**
 * ========================================
 * 🛍️ CSS PARA PÁGINAS DE LOJA/CATEGORIAS
 * ========================================
 * 
 * IDÊNTICO AOS PRODUTOS RELACIONADOS (product.css)
 * 
 * Paleta ARTISTARIA:
 * - Fundo bege: #f5f3ed
 * - Escuro: #2b2b2b
 * - Laranja: #ff9800
 * 
 * @version 3.0.0 - COPIADO DE product.css
 */

/* ========================================
   🎯 LAYOUT GLOBAL DA LOJA
   ======================================== */

/**
 * Fundo branco para body/html em páginas de loja
 */
body.archive,
body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag {
  background-color: #ffffff !important;
}

/**
 * Container principal da loja
 * IDÊNTICO: .single-product .related.products
 */
.woocommerce-shop .site-content,
.archive.post-type-archive-product .site-content,
.tax-product_cat .site-content,
.tax-product_tag .site-content {
  max-width: 1200px !important;
  margin: 80px auto 80px auto !important;
  padding: 0 24px !important;
  width: 100% !important;
  clear: both !important;
  float: none !important;
  background-color: #ffffff !important;
}

@media (min-width: 1200px) {
  .woocommerce-shop .site-content,
  .archive.post-type-archive-product .site-content,
  .tax-product_cat .site-content,
  .tax-product_tag .site-content {
    padding: 48px 64px 0 64px !important;
  }
}

/**
 * Container interno do WooCommerce
 */
.woocommerce-shop .woocommerce,
.archive.post-type-archive-product .woocommerce,
.tax-product_cat .woocommerce,
.tax-product_tag .woocommerce {
  max-width: 100% !important;
  margin: 0 !important;
}

/* ========================================
   📋 CABEÇALHO DA LOJA
   ======================================== */

/**
 * OCULTAR: Título da página (ex: "Loja")
 * TODOS OS SELETORES POSSÍVEIS
 */
.woocommerce-products-header__title,
.page-title,
.entry-title,
h1.woocommerce-products-header__title,
h1.page-title,
.archive-header,
.archive-title,
.page-header h1,
.woocommerce-page h1:first-of-type,
body.archive h1:first-of-type,
body.post-type-archive-product h1:first-of-type,
.site-content > h1:first-child,
.woocommerce > h1:first-child,
header.woocommerce-products-header h1,
.term-description + h1,
h1[class*="title"] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  font-size: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/**
 * OCULTAR: Container do cabeçalho
 */
.woocommerce-products-header,
.page-header,
.archive-header,
header.entry-header,
.entry-header {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/**
 * OCULTAR: Contador de resultados (ex: "Mostrando todos os 8 resultados")
 */
.woocommerce-result-count {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/**
 * 🎯 REDUZIR ESPAÇO EM BRANCO NO TOPO DA LOJA
 */
.woocommerce-page .site-content,
.archive.woocommerce .site-content,
body.post-type-archive-product .site-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* NÃO aplicar padding no body/main */
.woocommerce:not(.home),
.woocommerce-page:not(.home) main,
body.post-type-archive-product:not(.home) main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Antes do loop de produtos - AQUI SIM, ESPAÇO PARA O HEADER */
.woocommerce-before-shop-loop {
  margin-bottom: 32px !important;
  padding-top: 100px !important; /* Espaço para compensar header fixo (80px header + 20px margem) */
}

/**
 * Ordenação (dropdown)
 */
.woocommerce-ordering select {
  padding: 8px 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  color: #2b2b2b !important;
  background-color: #fff !important;
  cursor: pointer !important;
}

/* ========================================
   🛍️ GRID DE PRODUTOS
   ======================================== */

/**
 * CRÍTICO: Grid de produtos (IDÊNTICO a product.css)
 * 
 * - Mobile: 2 colunas
 * - Tablet: 3 colunas
 * - Desktop: 4 colunas
 * - Gap: 24px
 */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/**
 * CRÍTICO: REMOVER ::BEFORE/AFTER DO UL.PRODUCTS
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 640px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
  }
}

/* ========================================
   🃏 CARD DO PRODUTO
   ======================================== */

/**
 * CRÍTICO: Cada produto (card)
 * IDÊNTICO: .single-product .related.products ul.products li.product
 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: white !important;
  border-radius: 8px !important;
  overflow: visible !important; /* 🔥 MUDADO: hidden → visible (botões cortados) */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: unset !important;
  position: relative !important;
  float: none !important;
  text-align: center !important;
}

/**
 * CRÍTICO: REMOVER ::BEFORE/AFTER DOS CARDS
 */
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after,
.woocommerce-page ul.products li.product::before,
.woocommerce-page ul.products li.product::after {
  display: none !important;
  content: none !important;
}

/**
 * CRÍTICO: REMOVER ::BEFORE ESPECÍFICO DA COLUNA 4
 */
.woocommerce ul.products li.product:nth-child(4)::before,
.woocommerce ul.products li.product:nth-child(4)::after,
.woocommerce ul.products li:nth-child(4)::before,
.woocommerce ul.products li:nth-child(4)::after,
.woocommerce ul.products li:nth-child(4n)::before,
.woocommerce ul.products li:nth-child(4n)::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

/**
 * CRÍTICO: REMOVER ::BEFORE/AFTER DE QUALQUER ELEMENTO FILHO
 */
.woocommerce ul.products li.product *::before,
.woocommerce ul.products li.product *::after,
.woocommerce ul.products li.product a::after,
.woocommerce ul.products li.product .woocommerce-loop-product__link::after {
  display: none !important;
  content: none !important;
}

/**
 * Hover no card
 */
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/**
 * CRÍTICO: REMOVER POSITION ABSOLUTE
 */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .price {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

/* ========================================
   🖼️ IMAGEM DO PRODUTO
   ======================================== */

/**
 * CRÍTICO: Container da imagem
 * IDÊNTICO: product.css linha 630
 */
.woocommerce ul.products li.product a,
.woocommerce-page ul.products li.product a,
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 220px !important;
  overflow: visible !important;
  position: relative !important;
  flex-shrink: 0 !important;
  border-radius: 12px 12px 0 0 !important;
}

/**
 * CRÍTICO: Imagem do produto
 * IDÊNTICO: product.css linha 651
 */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img,
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.3s ease !important;
  border-radius: 12px 12px 0 0 !important;
  position: static !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product:hover img,
.woocommerce-page ul.products li.product:hover img {
  transform: scale(1.05) !important;
}

/* ========================================
   📝 TÍTULO DO PRODUTO
   ======================================== */

/**
 * CRÍTICO: Título do produto
 * IDÊNTICO: product.css linha 678
 */
.woocommerce ul.products li.product h2,
.woocommerce-page ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3,
.woocommerce-page ul.products li.product h3,
.woocommerce ul.products li.product .product-title,
.woocommerce-page ul.products li.product .product-title,
.woocommerce ul.products li.product a h2,
.woocommerce-page ul.products li.product a h2,
.woocommerce ul.products li.product a .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product a .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link h2,
.woocommerce-page ul.products li.product .woocommerce-LoopProduct-link h2,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-LoopProduct-link .woocommerce-loop-product__title {
  display: block !important;
  padding: 16px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #2b2b2b !important;
  margin: 0 auto !important;
  text-align: center !important;
  background: #fff !important;
  flex-shrink: 0 !important;
  line-height: 1.4 !important;
  min-height: 50px !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  width: 100% !important;
  z-index: 10 !important;
  overflow: visible !important;
  max-height: none !important;
  clip-path: none !important;
  transform: none !important;
  box-sizing: border-box !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* ========================================
   🔘 BOTÃO "VER OPÇÕES"
   ======================================== */

/**
 * CRÍTICO: Botão "Ver Opções"
 * IDÊNTICO: product.css linha 721
 */
.woocommerce .products .product .button,
.woocommerce .products .product .add_to_cart_button,
.woocommerce-page .products .product .button,
.woocommerce-page .products .product .add_to_cart_button,
.woocommerce .products .product a.button,
.woocommerce-page .products .product a.button,
.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product a.button,
.woocommerce ul.products li.product .button[href],
.woocommerce-page ul.products li.product .button[href] {
  width: auto !important;
  max-width: 150px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  border-radius: 8px !important;
  margin: 0 auto 8px auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #ff9800 !important;
  color: white !important;
  text-align: center !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
  border: none !important;
  cursor: pointer !important;
  height: 38px !important;
  max-height: 38px !important;
  min-height: 38px !important;
  line-height: 1.2 !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  overflow: visible !important; /* 🔥 MUDADO: hidden → visible (texto cortado) */
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/**
 * Hover no botão
 */
.woocommerce .products .product .button:hover,
.woocommerce-page .products .product .button:hover,
.woocommerce .products .product .add_to_cart_button:hover,
.woocommerce-page .products .product .add_to_cart_button:hover {
  background: #e68900 !important;
}

/**
 * Centralizar botão
 */
.woocommerce .products .product,
.woocommerce-page .products .product {
  text-align: center !important;
}

/* ========================================
   🚫 OCULTAR ELEMENTOS DESNECESSÁRIOS
   ======================================== */

/**
 * Ocultar preço, quantidade e elementos extras
 * IDÊNTICO: product.css linha 786
 */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce-page ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .star-rating,
.woocommerce-page ul.products li.product .star-rating,
.woocommerce ul.products li.product .woocommerce-product-rating,
.woocommerce-page ul.products li.product .woocommerce-product-rating {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/**
 * CRÍTICO: Remover TODOS os espaços extras
 * EXCETO: imagem (a), título (h2) e BOTÃO (.button)
 */
.woocommerce ul.products li.product > *:not(a):not(.woocommerce-loop-product__link):not(h2):not(.woocommerce-loop-product__title):not(.button):not(.add_to_cart_button),
.woocommerce-page ul.products li.product > *:not(a):not(.woocommerce-loop-product__link):not(h2):not(.woocommerce-loop-product__title):not(.button):not(.add_to_cart_button) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/**
 * Ocultar badges/etiquetas de "Promoção", etc
 */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
  display: none !important;
}

/* ========================================
   📱 RESPONSIVO - MOBILE
   ======================================== */

@media (max-width: 640px) {
  /**
   * Container menor em mobile
   */
  .woocommerce-shop .site-content,
  .archive.post-type-archive-product .site-content,
  .tax-product_cat .site-content,
  .tax-product_tag .site-content {
    padding: 24px 16px !important;
  }
  
  /**
   * Grid: 2 colunas em mobile
   */
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  
  /**
   * Título menor em mobile
   */
  .woocommerce ul.products li.product h2,
  .woocommerce-page ul.products li.product h2,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.85rem !important;
    min-height: 44px !important;
    padding: 12px !important;
  }
  
  /**
   * Imagem menor em mobile
   */
  .woocommerce ul.products li.product a img,
  .woocommerce-page ul.products li.product a img,
  .woocommerce ul.products li.product img,
  .woocommerce-page ul.products li.product img {
    height: 180px !important;
  }
  
  /**
   * Botão menor em mobile
   */
  .woocommerce .products .product .button,
  .woocommerce-page .products .product .button,
  .woocommerce .products .product .add_to_cart_button,
  .woocommerce-page .products .product .add_to_cart_button {
    font-size: 12px !important;
    padding: 8px 12px !important;
    margin-bottom: 12px !important;
  }
}

/* ========================================
   🔥 FORÇA BRUTA - CENTRALIZAÇÃO
   ======================================== */

/**
 * CRÍTICO: ÚLTIMO RECURSO - FORÇA TEXT-ALIGN CENTER
 * Aplicado DEPOIS de tudo para sobrescrever qualquer CSS externo
 */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title,
body.woocommerce ul.products li.product h2,
body.woocommerce-page ul.products li.product h2,
body.archive ul.products li.product h2,
body.post-type-archive-product ul.products li.product h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* ========================================
   🔥 CORREÇÃO BOTÕES CORTADOS NA LOJA
   ======================================== */

/**
 * PROBLEMA IDENTIFICADO:
 * O CSS estava forçando a loja a imitar o layout do single product,
 * causando 3 problemas:
 * 
 * 1️⃣ Cards com estrutura rígida
 * 2️⃣ Container com altura limitada e overflow: hidden
 * 3️⃣ Botões sem altura mínima garantida
 * 
 * SOLUÇÃO: Permitir layout fluido nos cards da loja
 */

/* Remove corte do container */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  overflow: visible !important;
  height: auto !important;
}

/* Garante espaço interno do card com flexbox */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
}

/* Empurra botão pra base corretamente */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce-page ul.products li.product .button,
.woocommerce-page ul.products li.product .add_to_cart_button {
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 18px !important;
  line-height: normal !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

/* Evita corte do texto dentro do botão */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
  white-space: nowrap !important;
}