/* ==========================================================================
   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 {
  /* Tamanho derivado do controle "Títulos → Tamanho" (--font-size-heading, 32px
     por padrão → ~13px aqui). Assim o seletor de tamanho da tipografia escala os
     títulos de seção da home. Casing NÃO é forçado: renderiza como digitado. */
  font-size: calc(var(--font-size-heading, 32px) * 0.4);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: none;
  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: fluxo natural — sem crop */
.noord-trending-carousel ul.products li.product .noord-product-image-wrapper img:not(.noord-hover-image) {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  transition: opacity 0.4s ease !important;
  opacity: 1 !important;
  z-index: 1 !important;
}

/* Imagem de hover: cobre a área da imagem principal */
.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;
}

/* ── Hover panel (Farm Rio style) ──
   O JS cria .noord-card-hover-panel dentro de .noord-product-image-wrapper
   com as variações e o botão dentro. Sobe do fundo da imagem no hover.
   ── */

.noord-trending-carousel ul.products li.product .noord-card-hover-panel {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: #f5f5f0 !important;
  padding: 12px 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  transform: translateY(100%) !important;
  transition: transform 0.28s ease !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

.noord-trending-carousel ul.products li.product:hover .noord-card-hover-panel {
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* ── Variações dentro do hover panel ── */

.noord-trending-carousel .noord-card-hover-panel .noord-loop-variations {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 0 !important;
}

/* ── Pill de tamanho (Farm Rio style) ── */

.noord-trending-carousel .noord-swatch-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 6px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(0, 0, 0, 0.22) !important;
  background: #ffffff !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--color-text, #111111) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.noord-trending-carousel .noord-swatch-text:hover {
  border-color: var(--color-text, #111111) !important;
  background: #f5f5f5 !important;
}

/* ── Swatch de cor ── */

.noord-trending-carousel .noord-swatch-color {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

/* ── Botão dentro do hover panel ── */

.noord-trending-carousel .noord-card-hover-panel .button,
.noord-trending-carousel .noord-card-hover-panel a.add_to_cart_button,
.noord-trending-carousel .noord-card-hover-panel a.product_type_variable,
.noord-trending-carousel .noord-card-hover-panel a.product_type_simple {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #333333 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
  line-height: 1 !important;
}

.noord-trending-carousel .noord-card-hover-panel .button:hover,
.noord-trending-carousel .noord-card-hover-panel a.add_to_cart_button:hover,
.noord-trending-carousel .noord-card-hover-panel a.product_type_variable:hover,
.noord-trending-carousel .noord-card-hover-panel a.product_type_simple:hover {
  opacity: 0.82 !important;
  background: #333333 !important;
  color: #ffffff !important;
}

.noord-trending-carousel .noord-card-hover-panel .button.loading {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.noord-trending-carousel .noord-card-hover-panel .added_to_cart {
  display: none !important;
}

/* ── 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;
  }
}

/* ── Estado vazio (SÓ no preview do Page Builder) ──────────────────────────
   Quando o filtro escolhido não casa com nenhum produto a seção fica oculta
   no site, mas aqui explicamos o motivo em vez de sumir sem aviso. */

.noord-section-empty {
  margin: 0 var(--trending-side-pad);
  padding: 32px 28px;
  border: 1px dashed var(--color-border, #e0e0da);
  border-radius: 4px;
  background: var(--color-bg-alt, #efefea);
  text-align: center;
}

.noord-section-empty__title {
  margin: 0 0 8px;
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--color-text, #111111);
}

.noord-section-empty__reason {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text, #111111);
}

.noord-section-empty__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted, #666);
}

@media (max-width: 768px) {
  .noord-section-empty {
    padding: 24px 18px;
  }
}