/* N2 Shoppe coupon/voucher announcement ticker - SAFE CSS ONLY
   Fixed label stays fully visible on the left.
   Coupon text is clipped inside its own viewport and moves LEFT -> RIGHT.
   No JavaScript/MutationObserver is used. */

/* Main announcement row */
header .bg-slate-900 .flex.items-center.gap-3.font-medium.min-w-0.flex-1.overflow-hidden{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
}

/* Fixed label + separator. These never move. */
header .bg-slate-900 .flex.items-center.gap-3.font-medium.min-w-0.flex-1.overflow-hidden > span:first-child,
header .bg-slate-900 .flex.items-center.gap-3.font-medium.min-w-0.flex-1.overflow-hidden > span:nth-child(2){
  position:relative!important;
  z-index:5!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
  background:#0f172a!important;
}

/* Dedicated clipping window AFTER the fixed label. */
.n2-coupon-viewport{
  display:block!important;
  position:relative!important;
  z-index:1!important;
  min-width:0!important;
  flex:1 1 0%!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}

/* Text moves only inside the viewport, so it cannot overlap the fixed label. */
.n2-coupon-ticker{
  display:inline-block!important;
  width:max-content!important;
  max-width:none!important;
  min-width:max-content!important;
  white-space:nowrap!important;
  position:relative!important;
  will-change:transform;
  transform:translate3d(-50%,0,0);
  animation:n2CouponTickerLTR 24s linear infinite!important;
}

.n2-coupon-ticker:hover{
  animation-play-state:paused!important;
}

@keyframes n2CouponTickerLTR{
  0%{transform:translate3d(-50%,0,0)}
  100%{transform:translate3d(0,0,0)}
}

@media (max-width:767px){
  .n2-coupon-ticker{animation-duration:20s!important;}
}

@media (prefers-reduced-motion:reduce){
  .n2-coupon-ticker{animation-duration:34s!important;}
}