:root {
  --primary-color: #bc7ca5;
    --primary-color-200: #bf86b0;
    --primary-color-400: #be88b0;
    --primary-color-600: #ca73d7;
    --secondary-color: #a3278c;
    --gradient-bg: linear-gradient( -90deg, #a3278c, #a3278c8c );
    --gradient-bg-0: linear-gradient( 0deg, #a3278ce3, #a3278c );
}

/* ==========================================================================
   Card shell
   ========================================================================== */
#shop-carousel {
  position: relative;
  display: block;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px 0 rgba(20, 20, 20, 0.08);
  overflow: hidden;
}

#shop-carousel .carousel-eyebrow {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  background: #1c1c1c;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
}

/* ==========================================================================
   Slides
   ========================================================================== */
#shop-carousel .carousel-item {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
  transition: 0.4s;
}
#shop-carousel .carousel-item.carousel-item--active {
  position: relative;
  opacity: 1;
  pointer-events: all;
}

.carousel-item--data {
  display: flex;
  align-items: stretch;
  min-height: 320px;
}

/* ==========================================================================
   Right column — image
   ========================================================================== */
#shop-carousel .carousel-col-image {
  flex: 0 0 34%;
  max-width: 34%;
}
#shop-carousel .carousel-image {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  background: #fafafa;
  padding: 24px;
}
#shop-carousel .carousel-image img {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
}
#shop-carousel .carousel-progress {
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  gap: 4px;
}
#shop-carousel .carousel-progress-segment {
  flex: 1 1 0;
  height: 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.15);
  overflow: hidden;
  cursor: pointer;
}
#shop-carousel .carousel-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: #2e7d32;
  border-radius: 3px;
}
#shop-carousel .carousel-progress-fill--active {
  animation: carousel-progress-fill 5s linear forwards;
}
#shop-carousel:hover .carousel-progress-fill--active {
  animation-play-state: paused;
}
@keyframes carousel-progress-fill {
  from { width: 0%; }
  to { width: 100%; }
}
#shop-carousel .carousel-discount-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: #e53935;
  color: #fff;
  border-radius: 100px;
  padding: 8px 6px;
  width: 52px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  box-shadow: 0 6px 14px -6px rgba(229, 57, 53, 0.7);
}
#shop-carousel .carousel-discount-badge span {
  font-size: 15px;
  font-weight: 800;
}
#shop-carousel .carousel-discount-badge small {
  font-size: 9px;
  font-weight: 400;
  opacity: 0.9;
}

/* ==========================================================================
   Middle column — info
   ========================================================================== */
#shop-carousel .carousel-col-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 24px 20px;
  min-width: 0;
}
#shop-carousel .carousel-title-container {
  width: 100%;
}
h3.carousel-title {
  color: #1c1c1c;
  font-weight: 700 !important;
  font-size: 15pt;
  margin: 0;
  line-height: 1.5;
}
h3.carousel-title a:hover {
  text-decoration: none;
}

#shop-carousel .carousel-utilities {
  text-align: right;
}
.carousel-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.carousel-features li {
  color: #555;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.carousel-feature-icon {
  font-size: 13px;
}
.carousel-feature-label {
  color: #777;
}
.carousel-feature-value {
  color: #333;
  font-weight: 600;
}

/* Countdown — boxed digits, accent color for urgency */
.timemande {
  font-size: 12px;
  color: #e53935;
  font-weight: 600;
  margin-bottom: 6px;
}
#shop-carousel .wd-timer {
  display: flex;
  gap: 8px;
  direction: ltr;
}
#shop-carousel .wd-timer .wd-item {
  background: #fff5f5;
  border: 1px solid #ffd4d2;
  border-radius: 8px;
  padding: 6px 10px;
  text-align: center;
  min-width: 46px;
}
#shop-carousel .wd-timer .wd-timer-value {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #e53935;
}
#shop-carousel .wd-timer .wd-timer-text {
  display: block;
  font-size: 10px;
  color: #b1615e;
}

/* ==========================================================================
   Left column — price + CTA
   ========================================================================== */
#shop-carousel .carousel-col-buy {
  flex: 0 0 230px;
  max-width: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 24px 20px;
  border-right: 1px solid #eee;
  background: #fafafa;
}
#shop-carousel .carousel-off {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#shop-carousel .carousel-off .old-price {
  color: #666;
  font-size: 13px;
  text-decoration: line-through;
  white-space: nowrap;
}
#shop-carousel .carousel-off .final-price {
  color: #2e7d32;
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
}

.add-to-cart {
  display: flex;
}
#shop-carousel #add-to-cart {
  width: 100%;
  background: #2e7d32;
  color: white;
  border: none;
  height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  box-shadow: 0 10px 15px -12px #2e7d32;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.2s;
}
#shop-carousel #add-to-cart:hover {
  background: #1b5e20;
  transform: translateY(-2px);
  box-shadow: 0 12px 20px -10px rgba(46, 125, 50, 0.6);
}


/* ==========================================================================
   No-sale (expired offer) overlay
   ========================================================================== */
.carousel-item.no-sale > *:not(.no-sale-image) {
  filter: blur(2px);
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#add-to-cart.disabled {
  pointer-events: all;
  cursor: not-allowed !important;
  filter: grayscale();
  z-index: 1;
}
.carousel-item.no-sale .no-sale-image {
  display: grid;
  place-items: center;
  z-index: 10000;
  transform: rotate(-10deg);
}
.no-sale-image {
  display: none;
  position: absolute;
  inset: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 768px) {
  .carousel-item--data {
    flex-direction: column;
    min-height: 0;
  }
  .timemande {
    display: none;
  }
  #shop-carousel .carousel-col-image {
    flex-basis: auto;
    max-width: 100%;
  }
  #shop-carousel .carousel-image {
    padding: 8px 8px 26px;
  }
  #shop-carousel .carousel-image img {
    max-height: 265px;
  }
  #shop-carousel .carousel-progress {
    bottom: 8px;
  }
  #shop-carousel .carousel-col-info {
    padding: 16px 16px 4px;
    text-align: center;
    align-items: center;
  }
  h3.carousel-title {
    font-size: 13pt;
    text-align: center;
  }
  .carousel-features {
    align-items: center;
  }
  #shop-carousel .wd-timer {
    justify-content: center;
  }
  #shop-carousel .carousel-col-buy {
    flex-basis: auto;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    border-right: none;
    border-top: 1px solid #eee;
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
    gap: 10px;
  }
  #shop-carousel .carousel-off {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
  }
  #shop-carousel .carousel-col-buy .add-to-cart {
    width: 100%;
  }
}