html { scroll-behavior: smooth; }
body { color: #2D2D2D; }

.ribbon-cyan, .ribbon-yellow {
  position: absolute;
  top: 18px;
  right: -38px;
  width: 150px;
  padding: 5px 0;
  transform: rotate(45deg);
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.ribbon-cyan { background: #3FD0E0; }
.ribbon-yellow { background: #EBE23C; }
.ribbon-label {
  display: block;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #0D0E10;
  text-transform: uppercase;
}

a, button { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #16277E;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* "Just Landed" cards keep the same 2/3/5-up widths as before, but as a
   horizontally scrolling row (driven by the prev/next arrows) instead of a
   wrapping grid, so more than one screenful of inventory can be reached. */
#just-landed-grid { scroll-snap-type: x mandatory; }
#just-landed-grid > article {
  flex: none;
  width: calc((100% - 1rem) / 2);
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  #just-landed-grid > article { width: calc((100% - 2rem) / 3); }
}
@media (min-width: 1024px) {
  #just-landed-grid > article { width: calc((100% - 4rem) / 5); }
}