/* =========================================================================
   retailers.css — the scrolling stockist strip.
   Used by index.html (Where to Buy) and contact.html (under the head office),
   so it lives in its own file rather than inside either page's <style>.
   ========================================================================= */

.hws-rt {
  position: relative;
  overflow: hidden;
  padding: 4px 0;
  /* Fade the ends so logos enter and leave instead of being chopped off */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.hws-rt-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: hws-rt-scroll 46s linear infinite;
}
.hws-rt:hover .hws-rt-track { animation-play-state: paused; }

@keyframes hws-rt-scroll {
  /* The list is rendered twice; sliding exactly half the track loops seamlessly */
  to { transform: translateX(-50%); }
}

.hws-rt-tile {
  flex: none;
  width: 178px; height: 96px;
  display: grid; place-items: center;
  padding: 14px 18px;
  background: var(--paper-soft);
  border: 1.5px solid rgba(61, 47, 35, 0.12);
  border-radius: 16px;
}
/* max-height is given in pixels, not 100%. The tile is a grid whose single row
   is auto-sized, so a percentage max-height has nothing definite to resolve
   against and Chrome drops it — the logos then rendered at natural size and
   spilled out of the tile. 96px tall minus 14px padding top and bottom = 68. */
.hws-rt-tile img {
  max-width: 100%; max-height: 68px;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 760px) {
  .hws-rt-track { animation-duration: 26s; gap: 10px; }
  .hws-rt-tile { width: 140px; height: 78px; padding: 11px 14px; }
  .hws-rt-tile img { max-height: 56px; }   /* 78 - 11 - 11 */
}

/* Someone who has asked for less motion gets a strip they can scroll by hand. */
@media (prefers-reduced-motion: reduce) {
  .hws-rt { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hws-rt-track { animation: none; }
}