/* Add custom CSS styles below */ 


/* ===== Countdown strip above العروض ===== */
#msale-bar{
  background:#0f172a; color:#fff; border-radius:14px;
  padding:12px 16px; margin:18px 0 24px; box-shadow:0 6px 16px rgba(0,0,0,.12);
}
#msale-bar .ms-head{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:10px;
}
#msale-bar .ms-title{font-weight:800; font-size:1.05rem;}
#msale-bar .ms-timer{font-weight:700; background:#e11d48; padding:.2rem .55rem; border-radius:999px;}
#msale-bar .ms-more{
  margin-inline-start:auto; text-decoration:none; font-weight:700;
  background:#111827; color:#fff; padding:.4rem .8rem; border-radius:999px;
}
#msale-bar .ms-more:hover{opacity:.9}

/* products row */
#msale-bar .ms-row{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px;
}
#msale-bar .ms-card{
  background:#fff; color:#0b1220; border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; border:1px solid rgba(0,0,0,.06);
}
#msale-bar .ms-imgwrap{
  position:relative; aspect-ratio:1.4/1; background:#f7f7f7; overflow:hidden;
}
#msale-bar .ms-imgwrap img{ width:100%; height:100%; object-fit:cover; display:block; }
#msale-bar .ms-body{ padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
#msale-bar .ms-name{ font-weight:700; font-size:.95rem; line-height:1.3; max-height:2.6em; overflow:hidden; }
#msale-bar .ms-price{ font-weight:800; color:#0f172a; }
#msale-bar .ms-actions{ display:flex; gap:8px; margin-top:6px; }
#msale-bar .ms-btn{
  flex:1; text-align:center; text-decoration:none; font-weight:700; padding:.45rem .6rem;
  border-radius:10px; background:#e11d48; color:#fff;
}
#msale-bar .ms-btn.secondary{ background:#111827; }
#msale-bar .ms-btn:hover{ filter:brightness(.95); }

/* keep العروض heading + pill tidy after we insert the new bar */
.msale-lowered{ margin-top:12px !important; }

/* === Megasale: progress bar + last-10 pulse === */
#msale-bar .ms-progress{
  position:relative; height:8px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.15); margin-top:10px;
}
#msale-bar .ms-progress .ms-progress-bar{
  height:100%; width:0%;
  background:linear-gradient(90deg,#22c55e,#eab308,#e11d48);
  transition:width .3s linear;
}

/* Pulse the timer text in the last 10 minutes */
#msale-bar.last-10 .ms-timer{
  animation: msale-pulse 1s ease-in-out infinite;
}
@keyframes msale-pulse{
  0%{ transform:scale(1); filter:none; }
  50%{ transform:scale(1.06); filter:brightness(1.15); }
  100%{ transform:scale(1); filter:none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #msale-bar.last-10 .ms-timer{ animation:none; }
  #msale-bar .ms-progress .ms-progress-bar{ transition:none; }
}