/* =============================================
   KHIZANAT FARAH - LUXURY GOLD ORBIT V4
   Full 360 Degree Product Border Animation
   SALLA STORE
============================================= */

/* 01 - COLORS & SETTINGS */

:root {
  --kf-gold: #C5AA7C;
  --kf-gold-light: #F5E9D5;
  --kf-gold-dark: #A98B5D;
  --kf-text: #29252B;

  /* Full border rotation speed */
  --kf-orbit-speed: 3s;

  /* Product movement */
  --kf-card-lift: -8px;

  /* Product image zoom */
  --kf-image-zoom: 1.045;
}


/* 02 - PRODUCT CARD */

.s-product-card-entry,
.product-card,
.product-item,
salla-product-card {

  position: relative !important;

  background: #FFFFFF !important;

  border: 2px solid #DED0BB !important;

  border-radius: 18px !important;

  overflow: hidden !important;

  box-shadow:
    0 8px 18px rgba(65,45,25,.12),
    0 17px 30px rgba(65,45,25,.09)
    !important;

  transform: translateY(0);

  transition:
    transform .45s ease,
    box-shadow .45s ease,
    border-color .35s ease
    !important;
}


/* 03 - GOLD ORBIT LIGHT */

.s-product-card-entry::after,
.product-card::after,
.product-item::after,
salla-product-card::after {

  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 28px;
  height: 3px;

  z-index: 30;

  pointer-events: none;

  border-radius: 20px;

  background: linear-gradient(
    90deg,
    #C5AA7C,
    #FFF9E9,
    #B99B6B
  );

  box-shadow:
    0 0 7px rgba(197,170,124,.65),
    0 0 13px rgba(197,170,124,.30);

  opacity: 0;

  animation:
    kfGoldOrbit
    var(--kf-orbit-speed)
    linear infinite;

  animation-play-state: paused;
}


/* 04 - FULL FOUR-SIDE ORBIT */

/*
  0%   Top left
  25%  Top right
  50%  Bottom right
  75%  Bottom left
  100% Back to top left
*/

@keyframes kfGoldOrbit {

  /* TOP EDGE */

  0% {
    top: 0;
    left: 0;
    width: 28px;
    height: 3px;
  }

  24% {
    top: 0;
    left: calc(100% - 28px);
    width: 28px;
    height: 3px;
  }

  /* TOP RIGHT CORNER */

  25% {
    top: 0;
    left: calc(100% - 3px);
    width: 3px;
    height: 28px;
  }

  /* RIGHT EDGE */

  49% {
    top: calc(100% - 28px);
    left: calc(100% - 3px);
    width: 3px;
    height: 28px;
  }

  /* BOTTOM RIGHT CORNER */

  50% {
    top: calc(100% - 3px);
    left: calc(100% - 28px);
    width: 28px;
    height: 3px;
  }

  /* BOTTOM EDGE */

  74% {
    top: calc(100% - 3px);
    left: 0;
    width: 28px;
    height: 3px;
  }

  /* BOTTOM LEFT CORNER */

  75% {
    top: calc(100% - 28px);
    left: 0;
    width: 3px;
    height: 28px;
  }

  /* LEFT EDGE */

  99% {
    top: 0;
    left: 0;
    width: 3px;
    height: 28px;
  }

  /* BACK TO START */

  100% {
    top: 0;
    left: 0;
    width: 28px;
    height: 3px;
  }
}


/* 05 - PRODUCT HOVER */

@media (hover: hover) and (pointer: fine) {

  .s-product-card-entry:hover,
  .product-card:hover,
  .product-item:hover,
  salla-product-card:hover {

    transform:
      translateY(var(--kf-card-lift))
      !important;

    border-color: #C5AA7C !important;

    box-shadow:
      0 15px 25px rgba(65,45,25,.18),
      0 28px 45px rgba(65,45,25,.15),
      0 0 15px rgba(197,170,124,.13)
      !important;
  }

  /* Start full-frame orbit */

  .s-product-card-entry:hover::after,
  .product-card:hover::after,
  .product-item:hover::after,
  salla-product-card:hover::after {

    opacity: 1;

    animation-play-state: running;
  }
}


/* 06 - PRODUCT IMAGE */

.s-product-card-image,
.s-product-card-image-container {

  background: #FAF9F7;

  overflow: hidden;
}

.s-product-card-image img,
.s-product-card-image-container img,
.product-card img,
.product-item img,
salla-product-card img {

  transition:
    transform .6s
    cubic-bezier(.22,1,.36,1)
    !important;
}

@media (hover: hover) and (pointer: fine) {

  .s-product-card-entry:hover
  .s-product-card-image img,

  .s-product-card-entry:hover
  .s-product-card-image-container img,

  .product-card:hover img,
  .product-item:hover img,
  salla-product-card:hover img {

    transform:
      scale(var(--kf-image-zoom))
      !important;
  }
}


/* 07 - PRODUCT CONTENT */

.s-product-card-content {

  background: #FFFFFF;

  padding: 16px 15px 18px !important;
}

.s-product-card-content-title,
.s-product-card-content-title a {

  color: var(--kf-text) !important;

  font-weight: 600 !important;

  line-height: 1.75 !important;

  transition: color .3s ease;
}


/* 08 - PRICE */

.s-product-card-price,
.s-product-card-sale-price {

  color: var(--kf-gold-dark) !important;

  font-weight: 800 !important;
}

.s-product-card-content del,
.s-product-card-content .line-through {

  color: #9E9890 !important;

  font-weight: 400 !important;
}


/* 09 - GOLD ADD TO CART */

.s-product-card-entry
salla-add-product-button .s-button-element,

.product-card
salla-add-product-button .s-button-element,

.product-item
salla-add-product-button .s-button-element,

salla-product-card
salla-add-product-button .s-button-element {

  background: linear-gradient(
    135deg,
    #E9DABE,
    #C4AA7C,
    #A88B5D
  ) !important;

  color: #FFFFFF !important;

  border: 1px solid #C4AA7C !important;

  border-radius: 50% !important;

  box-shadow:
    0 5px 14px rgba(160,125,75,.28)
    !important;

  transition:
    transform .3s ease,
    box-shadow .3s ease
    !important;
}


/* 10 - CART ICON */

.s-product-card-entry
salla-add-product-button svg,

.product-card
salla-add-product-button svg,

.product-item
salla-add-product-button svg,

salla-product-card
salla-add-product-button svg {

  color: #FFFFFF !important;

  stroke: currentColor !important;
}


/* 11 - CART BUTTON HOVER */

@media (hover: hover) and (pointer: fine) {

  .s-product-card-entry
  salla-add-product-button
  .s-button-element:hover,

  .product-card
  salla-add-product-button
  .s-button-element:hover,

  .product-item
  salla-add-product-button
  .s-button-element:hover {

    transform: scale(1.12) !important;

    box-shadow:
      0 8px 20px rgba(160,125,75,.38)
      !important;
  }
}


/* 12 - KEYBOARD INTERACTION */

.s-product-card-entry:focus-within::after,
.product-card:focus-within::after,
.product-item:focus-within::after,
salla-product-card:focus-within::after {

  opacity: 1;

  animation-play-state: running;
}


/* 13 - SLIDER SHADOW SPACE */

.s-products-slider .swiper-slide,
.s-products-slider-slider .swiper-slide,
salla-products-slider .swiper-slide {

  padding-top: 12px !important;

  padding-bottom: 36px !important;

  box-sizing: border-box;
}


/* 14 - MOBILE */

@media (max-width: 767px) {

  .s-product-card-entry,
  .product-card,
  .product-item,
  salla-product-card {

    border-radius: 14px !important;

    box-shadow:
      0 6px 16px rgba(65,45,25,.11)
      !important;
  }

  .s-product-card-content {

    padding: 12px 11px 15px !important;
  }

  .s-product-card-content-title,
  .s-product-card-content-title a {

    font-size: 12px !important;

    line-height: 1.65 !important;
  }
}


/* 15 - REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

  .s-product-card-entry,
  .product-card,
  .product-item,
  salla-product-card,
  .s-product-card-entry::after,
  .product-card::after,
  .product-item::after,
  salla-product-card::after {

    animation: none !important;
    transition: none !important;
  }
}

/* END - KHIZANAT FARAH GOLD ORBIT */