/* ============================================================
   RecommendedProducts — horizontal snap carousel, reuses the
   site's existing .noon-product-card visual language.
   Visible cards: 2 (mobile) / 2.2 (tablet) / 4 (desktop).
   Works with mouse drag, touch swipe and wheel (native scroll).
   ============================================================ */

.pdp-carousel-section { display: flex; flex-direction: column; gap: 4px; }

.pdp-carousel-wrap { position: relative; }

.pdp-carousel-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  direction: ltr; /* consistent left-to-right scroll physics; cards keep rtl content */
}
.pdp-carousel-track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }

.pdp-carousel-track > * {
  direction: rtl;
  scroll-snap-align: start;
  flex: 0 0 auto;
  min-width: 155px;
  max-width: 155px;
  width: 155px;
}

@media (min-width: 768px) {
  .pdp-carousel-track { gap: 12px; }
  .pdp-carousel-track > * {
    min-width: 175px;
    max-width: 175px;
    width: 175px;
  }
}

@media (min-width: 1200px) {
  .pdp-carousel-track { gap: 14px; }
  .pdp-carousel-track > * {
    min-width: 195px;
    max-width: 195px;
    width: 195px;
  }
}

.pdp-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--pdp-border);
  background: #fff;
  box-shadow: var(--pdp-shadow-md);
  display: none;
  align-items: center;
  justify-content: center;
  color: #334155;
  cursor: pointer;
  z-index: 3;
}
.pdp-carousel-nav.prev { right: -16px; }
.pdp-carousel-nav.next { left: -16px; }

@media (min-width: 1200px) {
  .pdp-carousel-wrap:hover .pdp-carousel-nav.is-visible { display: flex; }
}

.pdp-carousel-empty { color: var(--pdp-muted); font-size: 0.85rem; padding: 8px 0; }

/* ---------- Variants badge (noon colorVariants) ---------- */
.noon-variants-badge {
  position: absolute; left: 10px; bottom: 52px; z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; background: rgba(255,255,255,0.95);
  border-radius: 999px; box-shadow: 0 1px 5px rgba(0,0,0,0.14);
  pointer-events: none;
}
.noon-variants-badge img { width: 18px; height: 18px; display: block; }
.noon-variants-badge .noon-variants-count { font-size: 0.72rem; font-weight: 800; color: var(--buda-text, #111); line-height: 1; }