/**
 * Instant Variation Switch - CSS
 * Smooth loading states and transitions
 */

/* Hide price initially until JS updates it (prevents flash of wrong discount) */
/* Only on product page - not inside modals */
.layout--twocol-section .product-price:not(.price-loaded),
.commerce-product--full .product-price:not(.price-loaded),
.commerce-product--default .product-price:not(.price-loaded),
.layout--twocol-section .field--name-price:not(.price-loaded),
.layout--twocol-section .commerce-price:not(.price-loaded) {
  visibility: hidden;
}

/* Price loading state - subtle pulse animation */
.product-price.loading-price,
.field--name-price.loading-price,
.commerce-price.loading-price {
  opacity: 0.6;
  animation: price-pulse 0.8s ease-in-out infinite;
}

@keyframes price-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.3; }
}

/* Smooth price transition */
.product-price,
.field--name-price,
.commerce-price {
  transition: opacity 0.2s ease;
}

/* Original price strikethrough */
.original-price {
  text-decoration: line-through;
  color: #999;
  font-size: 0.85em;
  margin-inline-start: 8px;
}

/* Discount badge */
.discount-badge {
  background: #e53935;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: bold;
  margin-inline-start: 8px;
}

/* Stock status */
.in-stock {
  font-weight: 500;
}




/* Swatch selection state */
.color-swatch.selected,
.color-swatch.active,
.product-color-swatch.selected,
.product-color-swatch.active,
.color_field__swatch.selected,
.color_field__swatch.active {
  outline: 2px solid var(--nm-primary, #333);
  outline-offset: 2px;
}

/* Smooth swatch transition */
.color-swatch,
.product-color-swatch,
.color_field__swatch {
  transition: transform 0.15s ease, outline 0.15s ease;
  cursor:nu pointer;
}

.color-swatch:hover,
.product-color-swatch:hover,
.color_field__swatch:hover {
  transform: scale(1.1);
}