/* ==========================================================================
   NOORD THEME: GRADE DE PRODUTOS (4 COLUNAS)
   Seção da home em linhas e colunas — sem carrossel, sem setas.

   Diferença deliberada para .noord-trending-products-section: aquela sangra
   em 100vw e mostra 3,45 cards por tela; esta fica DENTRO do container. É o
   que deixa a foto menor e cabe mais produto na mesma dobra.
   ========================================================================== */

/* Mesma faixa dos carrosséis: a seção escapa do container (#main, 1320px) e
   ocupa a largura da tela, recuando pelas laterais com --trending-side-pad —
   o mesmo recuo que alinha os cards de "Em Alta" e "Novidades".

   Pedido do Breno (sessão 04): usar a proporção de largura dos demais
   elementos, mesmo que as fotos fiquem maiores. */

.noord-products-grid-section {
  background-color: var(--color-bg, #f5f5f0);
  padding: 60px 0 80px;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: clip;
}

/* ── Header (só existe quando há título cadastrado) ──
   Mesmo recuo lateral da grade → título alinhado com a 1ª foto. */

.noord-products-grid-header {
  margin: 0 0 28px;
  padding: 0 var(--trending-side-pad, clamp(40px, 5.5vw, 80px));
}

.noord-products-grid-header .section-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text, #111111);
  margin: 0;
}

/* ── Container da grade ── */

.noord-products-grid {
  margin: 0;
  padding: 0 var(--trending-side-pad, clamp(40px, 5.5vw, 80px));
}

/* Zera o wrapper que o shortcode do WooCommerce injeta */
.noord-products-grid .woocommerce,
.noord-products-grid .woocommerce-container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── A grade em si ──
   4 colunas no desktop. O gap vertical é maior que o horizontal para as
   linhas respirarem, como na referência. */

.noord-products-grid ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 48px 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.noord-products-grid ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

/* ── Moldura da foto ──
   Mesma proporção 3:4 do resto do site e `cover` nas duas imagens: sem faixa
   de fundo sobrando e sem a foto mudar de tamanho no cross-fade do hover.
   Não trocar por `height: auto` — foi exatamente o que causava a faixa cinza
   nos carrosséis (ver CLAUDE.md, v1.2.36/37). */

.noord-products-grid ul.products li.product .noord-product-image-wrapper {
  width: 100% !important;
  position: relative !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  background-color: #efefea;
  margin-bottom: 12px !important;
  display: block !important;
  border-radius: 3px !important;
}

.noord-products-grid ul.products li.product .noord-product-image-wrapper img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: opacity 0.4s ease !important;
  margin: 0 !important;
}

.noord-products-grid ul.products li.product .noord-product-image-wrapper img:not(.noord-hover-image) {
  opacity: 1 !important;
  z-index: 1 !important;
}

.noord-products-grid ul.products li.product .noord-product-image-wrapper .noord-hover-image {
  opacity: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.noord-products-grid ul.products li.product .noord-product-image-wrapper:hover img:not(.noord-hover-image) {
  opacity: 0 !important;
}

.noord-products-grid ul.products li.product .noord-product-image-wrapper:hover .noord-hover-image {
  opacity: 1 !important;
}

/* Vídeo no card: mesma moldura da foto, senão sobra faixa de fundo embaixo */
.noord-products-grid ul.products li.product .noord-product-image-wrapper .noord-product-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  z-index: 1 !important;
}

/* ── Nome e preço ── */

.noord-products-grid ul.products li.product .woocommerce-loop-product__title {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--color-text, #111111) !important;
  margin: 0 0 3px 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.noord-products-grid ul.products li.product .price {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--color-text-muted, #666666) !important;
  margin: 0 !important;
  opacity: 1 !important;
}

.noord-products-grid ul.products li.product .price .woocommerce-Price-amount {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

.noord-products-grid ul.products li.product .price del {
  color: var(--color-text-light, #999999) !important;
  margin-right: 4px;
}

.noord-products-grid ul.products li.product .price ins {
  text-decoration: none !important;
  color: var(--color-text, #111111) !important;
}

.noord-products-grid ul.products li.product .star-rating,
.noord-products-grid ul.products li.product .woocommerce-product-rating {
  display: none !important;
}

/* ── Hover panel ──
   O trending-carousel.js move as variações e o botão para dentro de
   .noord-card-hover-panel, criado dentro da moldura da foto. Enquanto ele não
   roda, os dois ficam escondidos aqui embaixo do card. */

.noord-products-grid ul.products li.product > .button,
.noord-products-grid ul.products li.product > a.add_to_cart_button,
.noord-products-grid ul.products li.product > a.product_type_variable,
.noord-products-grid ul.products li.product > a.product_type_simple,
.noord-products-grid ul.products li.product > .added_to_cart,
.noord-products-grid ul.products li.product > .noord-loop-variations {
  display: none !important;
}

/* Painel de hover, pills de tamanho, swatch de cor e botao: agora vivem em
   assets/css/base/product-card-hover.css, compartilhados entre carrossel,
   grade da home e loja/categorias/busca. Nao duplicar aqui. */

/* ── Tablet: 3 colunas ── */

@media (max-width: 991px) {
  .noord-products-grid ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 40px 20px !important;
  }
}

/* ── Celular: 2 colunas ──
   O hover panel não faz sentido no toque (não há hover): o botão volta para
   baixo do card, visível. */

@media (max-width: 767px) {
  .noord-products-grid-section {
    padding: 40px 0 56px;
  }

  .noord-products-grid ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px 14px !important;
  }

  .noord-products-grid ul.products li.product .noord-card-hover-panel {
    display: none !important;
  }

  .noord-products-grid ul.products li.product .woocommerce-loop-product__title,
  .noord-products-grid ul.products li.product .price {
    font-size: 12px !important;
  }
}