/* Small overrides Tailwind's CDN utility classes can't express. */

img.product-thumb {
  background-color: #f3f4f6;
}

/* Announcement ticker: two copies of the same content placed side by side,
   scrolled left by exactly one copy-width so the loop is seamless. */
.ticker-track {
  display: inline-flex;
  animation: ticker-scroll 15s linear infinite;
}

.ticker-item {
  display: inline-block;
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation: none;
  }
}
/* Fades the hero banner's left and right edges into the section background. */
.hero-banner-fade {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

/* Alpine: keep collapsed panels hidden until Alpine has initialised. */
[x-cloak] { display: none !important; }