/* KEYYORA FEATURED EXPERIENCE V27
   - animated multicolor border
   - subtle image sheen/breathing
   - category label above product title
   - full-card exact-product click target
*/

#alm-featured.keyyora-featured-v27 .alm-featured-card{
  isolation:isolate!important;
}

/* More alive changing border around the ACTIVE featured product */
#alm-featured.keyyora-featured-v27 .alm-featured-card.alm-v24-front::after,
#alm-featured.keyyora-featured-v27 .alm-featured-card.active::after{
  content:""!important;
  position:absolute!important;
  inset:-1px!important;
  z-index:8!important;
  border-radius:inherit!important;
  padding:1.6px!important;
  pointer-events:none!important;

  background:
    linear-gradient(
      100deg,
      #65baff 0%,
      #7f6dff 17%,
      #d979ff 34%,
      #ff85b7 49%,
      #f0c96d 65%,
      #64dfc2 82%,
      #65baff 100%
    )!important;

  background-size:340% 100%!important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask-composite:exclude!important;

  filter:
    drop-shadow(0 0 4px rgba(103,171,255,.58))
    drop-shadow(0 0 9px rgba(138,105,255,.24))!important;

  animation:keyyoraV27Border 5.4s linear infinite!important;
}

/* Subtle colored aura; avoids changing the existing card geometry */
#alm-featured.keyyora-featured-v27 .alm-featured-card.alm-v24-front,
#alm-featured.keyyora-featured-v27 .alm-featured-card.active{
  box-shadow:
    inset 0 1px rgba(255,255,255,.04),
    0 18px 42px rgba(0,0,0,.24),
    0 0 22px rgba(88,145,255,.08)!important;
}

/* Image gets a quiet premium "breathing" motion */
#alm-featured.keyyora-featured-v27
.alm-featured-card.alm-v24-front .alm-featured-media,
#alm-featured.keyyora-featured-v27
.alm-featured-card.active .alm-featured-media{
  position:relative!important;
  overflow:hidden!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.035),
    0 10px 28px rgba(0,0,0,.22)!important;
}

#alm-featured.keyyora-featured-v27
.alm-featured-card.alm-v24-front .alm-featured-media img,
#alm-featured.keyyora-featured-v27
.alm-featured-card.active .alm-featured-media img{
  animation:keyyoraV27ImageBreath 6.8s ease-in-out infinite!important;
  will-change:transform;
}

/* Soft light sweep across the image every few seconds */
#alm-featured.keyyora-featured-v27
.alm-featured-card.alm-v24-front .alm-featured-media::after,
#alm-featured.keyyora-featured-v27
.alm-featured-card.active .alm-featured-media::after{
  content:"";
  position:absolute;
  top:-25%;
  bottom:-25%;
  left:-44%;
  width:28%;
  z-index:4;
  pointer-events:none;
  opacity:0;
  transform:skewX(-18deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.15),
      rgba(120,184,255,.12),
      transparent
    );
  animation:keyyoraV27Sheen 6.2s ease-in-out infinite;
}

/* Category name above the current product name */
#alm-featured.keyyora-featured-v27 .keyyora-featured-category-v27{
  display:inline-flex!important;
  align-items:center!important;
  max-width:100%!important;
  min-height:21px!important;
  margin:0 0 6px!important;
  padding:4px 7px!important;
  border-radius:999px!important;

  border:1px solid rgba(239,200,111,.18)!important;
  background:
    linear-gradient(
      135deg,
      rgba(225,181,83,.10),
      rgba(116,102,218,.07)
    )!important;

  color:#e9c978!important;
  font-size:8.6px!important;
  font-weight:800!important;
  line-height:1.25!important;
  letter-spacing:.15px!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;

  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    0 0 13px rgba(227,190,98,.04)!important;
}

/* Transparent click target across the WHOLE visible featured card.
   It deliberately uses customer-product-card so the existing customer
   product flow opens the exact product id attached to this card. */
#alm-featured.keyyora-featured-v27 .keyyora-featured-click-v27{
  all:unset!important;
  position:absolute!important;
  inset:0!important;
  z-index:30!important;
  display:block!important;
  box-sizing:border-box!important;
  width:auto!important;
  height:auto!important;
  border-radius:inherit!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
}

#alm-featured.keyyora-featured-v27
.alm-featured-card:not(.active):not(.alm-v24-front)
.keyyora-featured-click-v27{
  pointer-events:none!important;
}

#alm-featured.keyyora-featured-v27
.alm-featured-card.active
.keyyora-featured-click-v27,
#alm-featured.keyyora-featured-v27
.alm-featured-card.alm-v24-front
.keyyora-featured-click-v27{
  pointer-events:auto!important;
}

/* Visible tap feedback without disturbing the carousel */
#alm-featured.keyyora-featured-v27
.alm-featured-card:has(.keyyora-featured-click-v27:active){
  filter:brightness(1.055)!important;
}

/* Dots feel connected to the animated card palette */
#alm-featured.keyyora-featured-v27 .alm-featured-dot.active{
  width:27px!important;
  border-radius:999px!important;
  background:
    linear-gradient(
      90deg,
      #68baff,
      #8b70ff,
      #e5b963
    )!important;
  box-shadow:0 0 11px rgba(120,143,255,.22)!important;
}

@keyframes keyyoraV27Border{
  to{background-position:340% 0}
}

@keyframes keyyoraV27ImageBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.025)}
}

@keyframes keyyoraV27Sheen{
  0%,58%{
    left:-44%;
    opacity:0;
  }
  64%{
    opacity:.7;
  }
  82%{
    left:118%;
    opacity:.25;
  }
  100%{
    left:118%;
    opacity:0;
  }
}

@media(max-width:390px){
  #alm-featured.keyyora-featured-v27 .keyyora-featured-category-v27{
    min-height:19px!important;
    margin-bottom:5px!important;
    padding:3px 6px!important;
    font-size:7.7px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #alm-featured.keyyora-featured-v27 .alm-featured-card::after,
  #alm-featured.keyyora-featured-v27 .alm-featured-media::after,
  #alm-featured.keyyora-featured-v27 .alm-featured-media img{
    animation:none!important;
  }
}