/* ============================================================
   New Releases — single-row carousel (arrows + auto-slideshow).
   Cards are the normal fish/menu cards injected by shop.js into
   #new-releases-grid; here we override the wrapping grid from
   layout.css into one non-wrapping, snap-scrolling row.
   The `#id.class` selectors outrank layout.css's `#id` rules.
   ============================================================ */

.nr-carousel {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
}

.nr-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nr-viewport::-webkit-scrollbar { display: none; }

/* Override the centered wrapping grid → single row */
#new-releases-grid.nr-track {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 1.25rem;
  padding: 0.5rem 0.25rem;
}
/* 3 cards per view on desktop (two 1.25rem gaps) */
#new-releases-grid.nr-track > * {
  flex: 0 0 calc((100% - 2.5rem) / 3);
  max-width: none;
  scroll-snap-align: start;
}

.nr-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  line-height: 1;
  color: #fff;
  background: rgba(15, 25, 40, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: background 0.15s ease, opacity 0.15s ease;
}
.nr-arrow:hover { background: rgba(20, 34, 54, 0.9); }
.nr-arrow--prev { left: -10px; }
.nr-arrow--next { right: -10px; }
.nr-arrow[hidden] { display: none; }
.nr-arrow:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 900px) {
  #new-releases-grid.nr-track > * { flex-basis: calc((100% - 1.25rem) / 2); }
}
@media (max-width: 600px) {
  #new-releases-grid.nr-track > * { flex-basis: 86%; }
  .nr-arrow { width: 40px; height: 40px; }
}