/* DJ NIKOLAS — Mix + Compact Promo v1.8.3 */

/* Section spacing for mixes */
.mixes-section{
  margin-top: 22px;
}
.mixes-section .mixes-intro{
  max-width: 860px;
  color:#aeb8ca;
  margin:8px 0 18px;
}

/* More premium compact promo box */
.product-card .promo-box{
  position:relative;
  max-width: 360px;
  margin: 14px auto 10px;
  padding: 14px 14px 12px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(3,8,24,.86), rgba(8,11,25,.92)),
    radial-gradient(circle at top right, rgba(132,56,255,.18), transparent 42%);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow:
    0 16px 34px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  isolation:isolate;
}

.product-card .promo-box::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1.5px;
  background: linear-gradient(130deg,
      rgba(78,245,255,.95),
      rgba(112,91,255,.95),
      rgba(232,82,255,.92),
      rgba(78,245,255,.95));
  background-size: 220% 220%;
  animation: promoNeonFlow183 6s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:.92;
  z-index:-1;
  box-shadow:
    0 0 20px rgba(95,130,255,.24),
    0 0 36px rgba(177,86,255,.20);
}

.product-card .promo-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.product-card .promo-kicker{
  font-size:12px;
  letter-spacing:.22em;
  font-weight:900;
  color:#7ef1ff;
}
.product-card .promo-discount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  padding:7px 10px;
  border-radius:999px;
  color:#ffd9ff;
  font-weight:900;
  font-size:12px;
  letter-spacing:.04em;
  border:1px solid rgba(213,114,255,.35);
  background:linear-gradient(180deg, rgba(130,55,255,.22), rgba(80,25,116,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.product-card .promo-price-stack{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap:14px;
  align-items:end;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.product-card .promo-price-stack small{
  display:block;
  margin-bottom:4px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#8f9ab0;
  font-weight:800;
}
.product-card .promo-price-old{
  font-size:18px;
  font-weight:900;
  line-height:1.08;
  color:#95a1b7;
  text-decoration:line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255,110,140,.7);
}
.product-card .promo-price-now{
  font-size: clamp(28px, 4.7vw, 38px);
  line-height:1;
  color:#fff7b3;
  letter-spacing:-.03em;
  text-shadow: 0 0 16px rgba(255,222,113,.14);
  font-weight: 1000;
}
.product-card .promo-now{
  text-align:right;
}
.product-card .promo-countdown{
  margin-top:10px;
}
.product-card .promo-countdown > small{
  display:block;
  margin-bottom:8px;
  color:#b7c3d7;
  font-weight:700;
}
.product-card .promo-clock{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:7px;
}
.product-card .promo-time-unit{
  min-height:58px;
  border-radius:14px;
  border:1px solid rgba(67,160,255,.18);
  background:linear-gradient(180deg, rgba(4,10,24,.95), rgba(8,12,25,.78));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.product-card .promo-time-unit b{
  display:block;
  font-size:30px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.04em;
  color:#ebf6ff;
}
.product-card .promo-time-unit em{
  margin-top:4px;
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#8ea2b9;
  font-style:normal;
  font-weight:800;
}
.product-card .promo-countdown-text{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:#8fa0b8;
}
.product-card .promo-order-limit{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
.product-card .promo-order-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.product-card .promo-order-row small{
  color:#93a4ba;
  font-weight:700;
}
.product-card .promo-order-row strong{
  font-size:15px;
  color:#7ef1ff;
  font-weight:1000;
}
.product-card .promo-order-bar{
  margin:9px 0 8px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.product-card .promo-order-bar i{
  display:block;
  height:100%;
  border-radius:inherit;
  background: linear-gradient(90deg, #7ef1ff, #7f8dff, #dd5dff);
  box-shadow:0 0 12px rgba(126,241,255,.35);
}
.product-card .promo-order-limit > span{
  display:block;
  color:#c4d2e6;
  font-size:12px;
}

/* Make box feel smaller / more square on cards */
.product-card .promo-box{
  width: 100%;
}
.product-card .product-body > .promo-box + .price,
.product-card .product-body > .promo-box + .actions{
  margin-top: 0;
}

/* Mix cards: a little accent */
.product-card[data-product-type="mix"] .cover > span{
  background:linear-gradient(180deg, rgba(86,192,255,.22), rgba(133,77,255,.22));
  border-color: rgba(121,198,255,.34);
  color:#e9fbff;
}

nav a[href="#mixes"]{
  position:relative;
}
nav a[href="#mixes"]::after{
  content:"NEW";
  position:absolute;
  top:-7px;
  right:-10px;
  font-size:8px;
  font-weight:900;
  line-height:1;
  letter-spacing:.14em;
  padding:4px 5px;
  border-radius:999px;
  color:#08101f;
  background:linear-gradient(90deg,#6cf0ff,#c468ff);
  box-shadow:0 4px 12px rgba(196,104,255,.25);
}

@keyframes promoNeonFlow183{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}

@media (max-width: 700px){
  .product-card .promo-box{
    max-width: 100%;
    padding: 12px;
    border-radius:20px;
  }
  .product-card .promo-price-old{
    font-size:16px;
  }
  .product-card .promo-price-now{
    font-size: clamp(24px, 8vw, 32px);
  }
  .product-card .promo-clock{
    gap:6px;
  }
  .product-card .promo-time-unit{
    min-height:54px;
    border-radius:12px;
  }
  .product-card .promo-time-unit b{
    font-size:24px;
  }
  .product-card .promo-countdown > small,
  .product-card .promo-countdown-text,
  .product-card .promo-order-limit > span{
    font-size:11px;
  }
}