/* ─── Global ─────────────────────────────────────────────────── */
#sale-banner-section { 
  background: #f5f3ef;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sale-wrapper {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

/* ─── Card ───────────────────────────────────────────────────── */
.sale-card {
  position: relative;
  overflow: hidden;
  background: #f9f6f0;
  cursor: pointer;
  transition: transform 0.32s cubic-bezier(.23, 1.4, .32, 1),
    box-shadow 0.32s ease;
}

/* DISABLED: card-level hover — kept but overridden by pointer-events below */
.sale-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 20px 50px rgba(124, 58, 237, 0.18);
}

/* NEW: cancel card hover when not on interactive zones */
.sale-card.no-card-hover:hover {
  transform: none;
  box-shadow: none;
}

/* ─── Background image layer ─────────────────────────────────── */
.sale-card .card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 0.6s ease;
  cursor: pointer;
}

/* KEPT original */
.sale-card:hover .card-bg {
  transform: scale(1.05);
}

/* NEW: bg zooms only when card-bg itself is hovered */
.sale-card .card-bg:hover {
  transform: scale(1.05);
}

/* Cabin card bg */
.sale-card.cabin .card-bg {
  background-image: url('../img/home/Rectangle 11987.png');
}

/* Handbag card bg */
.sale-card.handbag .card-bg {
  background-image: url('../img/home/Rectangle 11986.png');
}

/* ─── Card body ──────────────────────────────────────────────── */
.sale-card .card-inner {
  position: relative;
  z-index: 1;
  padding: 28px 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 680px;
  /* NEW: prevent card-inner from triggering card hover */
  pointer-events: none;
}

/* NEW: re-enable pointer events on direct interactive children inside card-inner */
.sale-card .card-inner>* {
  pointer-events: auto;
}

/* ─── Badge / label ──────────────────────────────────────────── */
.sale-label {
  
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0px;
  text-transform: uppercase;
  line-height: 40px;
  color: #7c3aed;
  margin-bottom: 2px;
}

/* ─── Discount headline ──────────────────────────────────────── */
.sale-discount {
  
  font-size: 54px;
  font-weight: bold;
  line-height: 46px;
  color: blue;
  letter-spacing: 0px;
  margin-bottom: 0;
}

.sale-discount span {
  color: blue;
}

/* ─── Product image ──────────────────────────────────────────── */
.sale-product-img {
  width: 100%;
  max-width: 230px;
  margin: auto auto 0;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.18));
  transition: transform 0.45s cubic-bezier(.23, 1.4, .32, 1);
}

/* KEPT original */
.sale-card:hover .sale-product-img {
  transform: translateY(-8px) rotate(-2deg) scale(1.04);
}

/* KEPT original */
.sale-card.handbag:hover .sale-product-img {
  transform: translateY(-8px) rotate(2deg) scale(1.04);
}

/* ─── Arrow CTA button ───────────────────────────────────────── */
.sale-arrow {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 80px;
  height: 80px;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.22s, transform 0.22s;
  /* NEW: isolate arrow hover to itself only */
  pointer-events: auto;
}

/* KEPT original */
.sale-card:hover .sale-arrow {
  background: #7c3aed;
  transform: scale(1.12);
}

/* NEW: arrow reacts only when hovered directly */
.sale-arrow:hover {
  background: #7c3aed !important;
  transform: scale(1.12) !important;
}

/* NEW: reset arrow when card is hovered but NOT the arrow */
.sale-card:hover .sale-arrow:not(:hover) {
  background: #1a1a1a;
  transform: none;
}

.sale-arrow svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Divider line between cards ─────────────────────────────── */
.sale-divider {
  width: 2px;
  background: #7c3aed;
  opacity: 0.18;
}

/* ─── Outer border wrap ──────────────────────────────────────── */
.sale-outer {
  overflow: hidden;
  gap: 20px;
  display: flex;
}

/* ─── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 767.98px) {
  .sale-outer {
    flex-direction: column;
  }

  .sale-divider {
    width: 100%;
    height: 2px;
  }

  .sale-card {
    border: none;
    border-radius: 0;
  }

  .sale-card .card-inner {
    min-height: 280px;
  }

  .sale-product-img {
    max-width: 180px;
  }
}

@media (max-width: 479.98px) {
  .sale-discount {
    font-size: 3rem;
  }

  .sale-card .card-inner {
    min-height: 240px;
    padding: 20px 20px 28px;
  }

  .sale-product-img {
    max-width: 140px;
  }
}

/* NEW: cancel bg zoom when arrow is hovered */
.sale-card:has(.sale-arrow:hover) .card-bg {
  transform: none !important;
}