/* Shared auto-scrolling brand-logo strip (includes/brands-marquee.blade.php).
   Used by the home page ("Top Brands") and the category listing page ("Top Eyewear Brands")
   so both share one implementation instead of two copies of the same thing. */
.marquee-sec { padding: 10px 0 34px; }
.marquee-head { margin: 0 0 18px; }
.marquee-head h2 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; color: #1d2340; text-transform: none; }
.marquee-head p { margin: 4px 0 0; font-size: 14.5px; color: #6b7191; }

.marquee { position: relative; overflow: hidden; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marqueeScroll 60s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-set { display: flex; flex: 0 0 auto; gap: 18px; padding-right: 18px; }
.marquee-set a { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 168px; height: 84px; padding: 10px 16px; border: 1px solid #e6e9f2; border-radius: 14px; background: #fff; }
.marquee-set img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.marquee-set a:hover { border-color: var(--mq-accent, #07a8a9); }
.marquee-set a:hover img { filter: none; opacity: 1; }

@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; }
  .marquee-set[aria-hidden="true"] { display: none; }
}
@media (max-width: 767.98px) {
  .marquee-head h2 { font-size: 20px; }
  .marquee-set a { width: 132px; height: 72px; }
}