/* --- متغيرات الألوان من الباليت --- */
:root {
  --kh-deep:    #2A0A4A;  /* 900 Deep Purple */
  --kh-dark:    #4B1A7A;  /* 800 Deep Purple */
  --kh-mid:     #8B30A8;  /* 600 Deep Purple */
  --kh-accent:  #9070D0;  /* 400 Vivid Lavender */
  --kh-soft:    #BCA0E8;  /* 200 Vivid Lavender */
  --kh-pale:    #F0EAFF;  /* 50  Vivid Lavender */
  --kh-lilac:   #A888D0;  /* 600 Soft Lilac */
}

/* --- إزالة البوردر وتحسين الهيدر --- */
:is(header.bg-secondary) {
  border-bottom: none !important;
  background: linear-gradient(135deg, #fdfcff 0%, #f8f4ff 100%) !important;
  box-shadow: 0 1px 0 rgba(139, 48, 168, 0.08),
              0 4px 20px rgba(42, 10, 74, 0.06) !important;
  backdrop-filter: blur(8px);
}

/* --- روابط الناف بار --- */
:is(nav) :is(a.text-foreground, ul li a) {
  color: var(--kh-dark) !important;
  font-weight: 400;
  letter-spacing: 0.025em;
  position: relative;
  padding-bottom: 3px;
  text-decoration: none !important;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* خط Hover — متحرك من المنتصف */
:is(nav) :is(a.text-foreground, ul li a)::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  right: 50%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--kh-accent), var(--kh-mid));
  border-radius: 2px;
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

:is(nav) :is(a.text-foreground, ul li a):hover {
  color: var(--kh-mid) !important;
}

:is(nav) :is(a.text-foreground, ul li a):hover::after {
  left: 0;
  right: 0;
}

/* --- أيقونات الهيدر --- */
:is(header) :is(button, a) svg.text-foreground {
  color: var(--kh-dark) !important;
  transition: color 0.25s ease,
              transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

:is(header) :is(button, a):hover svg.text-foreground {
  color: var(--kh-mid) !important;
  transform: scale(1.12);
}

/* --- Cart Badge --- */
:is(span[data-cart-badge]) {
  background: linear-gradient(135deg, var(--kh-mid), var(--kh-dark)) !important;
  box-shadow: 0 2px 8px rgba(139, 48, 168, 0.35) !important;
}

/* --- اللوجو --- */
/* :is(header) img {
  transition: opacity 0.25s ease, transform 0.3s ease;
}
:is(header) a:hover img {
  opacity: 0.88;
  transform: scale(1.02);
} */

/* --- Drawer موبايل --- */
:is(#mobile-drawer) {
  border-top: 2px solid var(--kh-accent) !important;
}

:is(#mobile-drawer) :is(a, button).text-foreground {
  color: var(--kh-dark) !important;
  transition: color 0.2s ease,
              background 0.2s ease,
              padding-right 0.25s ease;
  border-radius: 8px;
  margin: 0 8px;
  padding: 10px 12px;
}

:is(#mobile-drawer) :is(a, button).text-foreground:hover {
  color: var(--kh-mid) !important;
  background: var(--kh-pale) !important;
  padding-right: 20px;
}

/* --- Search Dialog --- */
:is(#search-dialog) :is(input[type="text"]) {
  caret-color: var(--kh-mid) !important;
}

:is(#search-dialog) :is(input[type="text"]):focus {
  outline: none;
  border-color: var(--kh-accent) !important;
}

/* --- Sticky Header Shadow عند الـ Scroll --- */
:is(.sticky) :is(header.bg-secondary) {
  box-shadow: 0 2px 24px rgba(42, 10, 74, 0.1),
              0 1px 0 rgba(139, 48, 168, 0.12) !important;
}

img,
.embla__slide,
.embla__container,
.product-card {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.embla {
    overflow: hidden;
    perspective: 1200px;
}

.embla__slide img,
.product-card img,
img[class*="object-cover"] {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.4s ease-in-out,
                box-shadow 0.4s ease-in-out;
    transform: scale(1);
    filter: brightness(1) saturate(1);
}

.embla__slide:hover img,
.product-card:hover img,
img[class*="object-cover"]:hover {
    transform: scale(1.04);
    filter: brightness(1.06) contrast(1.02);
    box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.2);
}

.embla__container {
    transition: transform 0.65s cubic-bezier(0.2, 0.9, 0.4, 1.05) !important;
}

.embla__slide {
    transition: opacity 0.5s cubic-bezier(0.2, 0.85, 0.4, 1),
                transform 0.55s cubic-bezier(0.2, 0.85, 0.4, 1);
    opacity: 0;
    transform: scale(0.97) translateY(6px);
}

.embla__slide.is-selected {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
    transition-delay: 0.05s;
}

.embla__slide:not(.is-selected) {
    transition-delay: 0s;
    opacity: 0;
    transform: scale(0.97) translateY(-4px);
}

.embla__slide.is-selected::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, 
                rgba(255, 255, 255, 0.12) 0%, 
                transparent 80%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    animation: luxuryGlow 0.7s ease-out 0.1s forwards;
}

@keyframes luxuryGlow {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.embla__dots {
    gap: 10px;
}

.embla__dots button {
    transition: all 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
}

.embla__dots button[aria-selected="true"] {
    transform: scale(1.3);
    background-color: #D4AF37 !important;
    width: 24px;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .embla__slide {
        min-height: 350px !important;
    }
    
    .embla__slide:hover img {
        transform: scale(1.02);
    }
    
    .embla__container {
        transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.4, 1) !important;
    }
}

.product-card img {
    border-radius: 8px;
}

.product-card:hover {
    cursor: pointer;
}

.product-card:hover img {
    filter: brightness(1.03) saturate(1.01);
    box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 0.15);
}