/*
 * Custom CSS for Velora (Marble Theme)
 */

/* --------------------------------------------------------------------------
   1. PRODUCT IMAGE TRANSITIONS (Smooth Fade on Image Change)
   -------------------------------------------------------------------------- */

.sa-product-gallery .splide__slide {
  transition: opacity 350ms cubic-bezier(0.25, 1, 0.5, 1), visibility 350ms ease !important;
  will-change: opacity;
}

.sa-product-gallery .splide__slide img {
  transition: opacity 350ms ease, transform 350ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.sa-product-gallery .splide__slide.is-active img {
  opacity: 1 !important;
  transform: scale(1);
}

.sa-product-gallery .splide__slide:not(.is-active) img {
  opacity: 0 !important;
  transform: scale(0.985);
}

/* Active thumbnail border indicator */
.splide.thumbnails .splide__slide {
  transition: border-color 200ms ease, opacity 200ms ease !important;
}

.splide.thumbnails .splide__slide.is-active {
  border-color: rgba(var(--cl-accent), 1) !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   2. CONTENT & CODE PROTECTION (Disable Selection & Drag)
   -------------------------------------------------------------------------- */

html, body {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Prevent image dragging and saving */
img {
  -webkit-user-drag: none !important;
  user-drag: none !important;
}

/* Allow typing in inputs, textareas, and search fields so checkout works */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}