/**
 * Khan Dry Fruit — Diagonal Ribbon + Timer Spacing (3 Oct 2026)
 * 1. Discount as diagonal corner ribbon (like reference screenshot)
 * 2. Timer card: no empty space on right
 */

/* ===== Diagonal Corner Ribbon for Discount ===== */
.nv-product-card {
  position: relative !important;
  overflow: hidden !important;
}

.nv-product-card .nv-discount-badge,
.nv-product-card .nv-small-discount,
span.nv-discount-badge,
span.nv-small-discount {
  position: absolute !important;
  top: 22px !important;
  left: -38px !important;
  transform: rotate(-45deg) !important;
  display: block !important;
  min-width: 140px !important;
  text-align: center !important;
  background: linear-gradient(90deg, #dc2626 0%, #f97316 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  padding: 7px 0 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.45) !important;
  border: none !important;
  border-radius: 0 !important;
  z-index: 10 !important;
  white-space: nowrap !important;
}

/* ===== Timer Card: Fill Width, No Empty Right Space ===== */
@media (max-width: 768px) {
  .nv-dotd-premium__clock,
  .nv-camp-premium__clock {
    width: 100% !important;
    max-width: 100% !important;
  }

  .nv-dotd-premium__units,
  .nv-camp-premium__units {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: space-between !important;
    padding: 0 4px !important;
  }

  .nv-dotd-premium__unit,
  .nv-camp-premium__unit {
    flex: 1 1 0 !important;
  }

  .nv-dotd-premium__unit b,
  .nv-camp-premium__unit b {
    width: 100% !important;
  }
}

/* ===== Diagonal Ribbon for DOTD/Campaign Cards ===== */
.nv-deal-card {
  position: relative !important;
  overflow: hidden !important;
}

.nv-deal-card .nv-deal-card__off,
span.nv-deal-card__off {
  position: absolute !important;
  top: 22px !important;
  left: -38px !important;
  transform: rotate(-45deg) !important;
  display: block !important;
  min-width: 140px !important;
  text-align: center !important;
  background: linear-gradient(90deg, #dc2626 0%, #f97316 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  padding: 7px 0 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.45) !important;
  border: none !important;
  border-radius: 0 !important;
  z-index: 10 !important;
  white-space: nowrap !important;
}