/**
 * Split from numart_main.css for maintainability.
 */

/* ========================================
   PRODUCT COLOR SWATCHES - Below product image (hover to preview)
   ======================================== */
.product-color-swatches {
  display: flex;
  flex-wrap: nowrap; /* Single line, no wrap */
  overflow: hidden; /* Hide excess swatches */
  justify-content: flex-start; /* flex-start = RIGHT in RTL (for Arabic products) */
  gap: 5px;
  width: 100%;
  max-width: 320px; /* Match product card width */
  box-sizing: border-box;
  min-height: 26px; /* Consistent height even when empty */
  align-items: center;
  position: relative;
}

/* Fade effect for RTL - fade on LEFT side (swatches start from right, overflow to left) */
html[dir="rtl"] .product-color-swatches:not(.empty-swatches)::after {
  content: '';
  position: absolute;
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

/* Fade effect for LTR pages */
html:not([dir="rtl"]) .product-color-swatches:not(.empty-swatches)::after {
  content: '';
  position: absolute;
  right: 0;
  left: auto;
  top: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

/* Fade effect for LTR (English) products in RTL page - fade on RIGHT side */
article.product.product-ltr .product-color-swatches:not(.empty-swatches)::after {
  content: '';
  position: absolute;
  right: 0;
  left: auto;
  top: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

/* Empty swatches container - maintain consistent height */
.product-color-swatches.empty-swatches {
  min-height: 26px;
  height: 26px;
}

/* Hide fade when only a few swatches that fit */
.product-color-swatches.few-swatches::after {
  display: none;
}

/* Hide fade when 1-5 swatches (they fit without scrolling) */
.product-color-swatches:has(.color-swatch:only-child)::after,
.product-color-swatches:has(.color-swatch:nth-child(2):last-child)::after,
.product-color-swatches:has(.color-swatch:nth-child(3):last-child)::after,
.product-color-swatches:has(.color-swatch:nth-child(4):last-child)::after,
.product-color-swatches:has(.color-swatch:nth-child(5):last-child)::after {
  display: none !important;
}

.product-color-swatches .color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  /* Ensure background color is visible */
  background-color: #ccc; /* Fallback if no color set */
}

.product-color-swatches .color-swatch:hover,
.product-color-swatches .color-swatch.active {
  transform: scale(1.2);
  border-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   LTR (English) Product Title - Switch alignment to left
   ========================================================================== */
article.product.product-ltr .product-color-swatches {
  direction: ltr; /* Switch to LTR so flex-start = LEFT */
  justify-content: flex-start;
}

article.product.product-ltr .product-info {
  direction: ltr;
  text-align: left !important;
}

article.product.product-ltr .price,
article.product.product-ltr .field--name-variation-price {
  text-align: left !important;
  direction: ltr !important;
}

article.product.product-ltr .product-title,
article.product.product-ltr .product-title a {
  text-align: left !important;
  direction: ltr !important;
  /* Ensure overflow clips from right (end) for LTR text */
  unicode-bidi: embed;
  color: var( --nm-primary-color);
}