/* SS Horizontal Suwak for "Recently Viewed" strip */
.ss-hscroll-wrap {
  position: relative;
}
.ss-hscroll {
  display: flex;
  gap: clamp(8px, 1.2vw, 14px);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px; /* room for scrollbar */
}
.ss-hscroll > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
/* Nav buttons */
.ss-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  border: none;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: opacity .2s ease, background .2s ease;
  opacity: .9;
}
.ss-nav-btn:hover { background: rgba(0,0,0,.7); }
.ss-nav-btn[disabled] { opacity: .25; cursor: default; }
.ss-nav-prev { left: 6px; }
.ss-nav-next { right: 6px; }
.ss-nav-btn svg {
  width: 18px; height: 18px; display: block;
}
/* Make sure buttons don't overlap headings */
.ss-hscroll-wrap .ss-hscroll { padding-left: 2.2rem; padding-right: 2.2rem; }

/* Ensure the scrollbar is visible and thin */
.ss-hscroll {
  scrollbar-width: thin;
}
.ss-hscroll::-webkit-scrollbar { height: 8px; }
.ss-hscroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.28); border-radius: 9999px; }
.ss-hscroll::-webkit-scrollbar-track { background: transparent; }