/* ==========================================================================
   NOORD THEME: TRENDING NOW CAROUSEL
   Referência: MANORS Golf (manorsgolf.com)
   ========================================================================== */

/* Padding lateral: referência MANORS — ~60–80px em laptop, teto em monitores largos */
:root {
  --trending-side-pad: clamp(40px, 5.5vw, 80px);
}

/* ── Seção ── */

.noord-trending-products-section {
  background-color: var(--color-bg, #f5f5f0);
  padding: 60px 0 80px;
  overflow-x: clip; /* clips horizontal overflow sem bloquear scroll interno */
  overflow-y: visible;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ── Header: título + setas na mesma linha ── */

.noord-trending-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  /* Mesmo offset lateral do track (ul.products tem padding-left:
     var(--trending-side-pad)) → título alinhado com a 1ª foto, igual ao
     categories. Não usar max-width centralizado: desalinha em telas largas. */
  padding: 0 var(--trending-side-pad);
}

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

/* ── Botões de navegação ── */

.noord-trending-nav {
  display: flex;
  gap: 8px;
}

.noord-trending-prev,
.noord-trending-next {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-text, #111111);
  color: var(--color-text, #111111);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.noord-trending-prev:hover,
.noord-trending-next:hover {
  background: var(--color-text, #111111);
  color: #ffffff;
}

.noord-trending-prev:disabled,
.noord-trending-next:disabled {
  opacity: 0.3;
  pointer-events: none;
}

.noord-trending-prev *,
.noord-trending-next * {
  pointer-events: none;
}

/* ── Wrapper do shortcode WC: zerar tudo que briga com o carrossel ── */

.noord-trending-carousel .woocommerce,
.noord-trending-carousel .woocommerce-container {
  overflow: visible !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Máscara esquerda: oculta o card que sai pela margem ──
   Cobre 0 → var(--trending-side-pad) com a cor do fundo da seção.
   O card anterior desliza POR BAIXO dela e some, sem aparecer parcialmente.
   ── */

.noord-trending-carousel {
  position: relative;
}

.noord-trending-carousel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--trending-side-pad);
  background: var(--color-bg, #f5f5f0);
  z-index: 3;
  pointer-events: none;
}

/* ── Carrossel: track scrollável ── */

.noord-trending-carousel ul.products {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth;
  scroll-padding-left: var(--trending-side-pad);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: var(--trending-side-pad) !important;
  gap: 16px !important;
  float: none !important;
  width: 100% !important;
}

.noord-trending-carousel ul.products::-webkit-scrollbar {
  display: none !important;
}


/* ── Cards: 4 visíveis + peek do 5º ──
   Fórmula: (100vw - side_pad - 4_gaps) / (4 + peek_fraction)
   4 gaps de 16px = 64px. Peek ≈ 15% do card → divisor 4.15
   ── */

.noord-trending-carousel ul.products li.product {
  flex: 0 0 calc((100vw - var(--trending-side-pad) - 64px) / 3.45) !important;
  width: calc((100vw - var(--trending-side-pad) - 64px) / 3.45) !important;
  min-width: 200px !important;
  scroll-snap-align: start !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

/* ── Imagem com hover na segunda foto ── */

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

/* Imagem principal: PREENCHE a moldura 3/4 inteira (`cover`).
   Todos os cards ficam do mesmo tamanho e a foto vai de borda a borda — sem
   nenhuma faixa de fundo aparecendo.

   ATENÇÃO — antes esta regra era `position: relative; height: auto` ("fluxo
   natural — sem crop"). O wrapper, porém, herda `aspect-ratio: 3/4` de
   `woocommerce/woocommerce.css`, e essa regra NÃO sobrescrevia o aspect-ratio.
   Resultado: em toda foto que não fosse exatamente 3:4, a imagem (em fluxo)
   era mais baixa que a moldura e sobrava uma FAIXA do `background-color`
   colada no rodapé do card. Ex. medido: moldura 480,70px × imagem 408,64px
   = 72px de faixa cinza. Não reintroduzir `height: auto` aqui.

   Consequência de `cover`: fotos mais largas que 3:4 perdem as laterais;
   fotos mais estreitas perdem topo/base. Enquadrar as fotos de produto com
   folga nas bordas (o corte é sempre a partir do centro). */
.noord-trending-carousel ul.products li.product .noord-product-image-wrapper img:not(.noord-hover-image) {
  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;
  opacity: 1 !important;
  z-index: 1 !important;
}

/* Imagem de hover: mesma moldura e mesmo object-fit da principal, senão a foto
   muda de tamanho no meio do cross-fade. */
.noord-trending-carousel ul.products li.product .noord-product-image-wrapper .noord-hover-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: opacity 0.4s ease !important;
  opacity: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

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

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

/* ── Vídeo no loop card ── */

.noord-trending-carousel ul.products li.product .noord-product-image-wrapper .noord-product-video {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  z-index: 1 !important;
}

/* ── Info abaixo do card ── */

.noord-trending-carousel 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-trending-carousel ul.products li.product .price {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--color-text-muted, #666666) !important;
  margin: 0 0 6px 0 !important;
  opacity: 1 !important;
}

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

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

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

/* ── Star rating: oculto no carrossel ── */

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

/* ── Botão e variações: ocultos no card — o JS os move para o hover panel ── */

.noord-trending-carousel ul.products li.product > .button,
.noord-trending-carousel ul.products li.product > a.add_to_cart_button,
.noord-trending-carousel ul.products li.product > a.product_type_variable,
.noord-trending-carousel ul.products li.product > a.product_type_simple,
.noord-trending-carousel ul.products li.product > .added_to_cart,
.noord-trending-carousel 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 cards visíveis + peek do 4º (3 gaps = 48px) ── */

@media (max-width: 1024px) {
  .noord-trending-carousel ul.products li.product {
    flex: 0 0 calc((100vw - var(--trending-side-pad) - 48px) / 2.62) !important;
    width: calc((100vw - var(--trending-side-pad) - 48px) / 2.62) !important;
  }
}

/* ── Mobile: 2 cards visíveis + peek (2 gaps = 24px) ── */

@media (max-width: 768px) {
  .noord-trending-products-section {
    padding: 40px 0 60px;
  }

  .noord-trending-header {
    margin-bottom: 16px;
  }

  .noord-trending-carousel ul.products {
    gap: 12px !important;
    scroll-padding-left: var(--trending-side-pad);
  }

  .noord-trending-carousel ul.products li.product {
    flex: 0 0 calc((100vw - var(--trending-side-pad) - 24px) / 2.15) !important;
    width: calc((100vw - var(--trending-side-pad) - 24px) / 2.15) !important;
    min-width: 140px !important;
  }

  .noord-trending-nav {
    display: flex;
  }

  .noord-trending-prev,
  .noord-trending-next {
    width: 32px;
    height: 32px;
  }
}

/* ── Smartphone pequeno: 1 card + peek ── */

@media (max-width: 480px) {
  .noord-trending-carousel ul.products li.product {
    flex: 0 0 calc((100vw - var(--trending-side-pad) - 12px) / 1.15) !important;
    width: calc((100vw - var(--trending-side-pad) - 12px) / 1.15) !important;
  }
}