.collections {
  --collection-gap: clamp(16px, 1.15vw, 28px);
  background: var(--paper);
  color: var(--ink);
  padding: 64px 0 38px;
}
.collections-heading { display: flex; align-items: end; gap: 28px; padding: 0 var(--gutter) 40px; }
.collections-heading h2 { font-size: clamp(32px, 3.2vw, 52px); font-weight: 400; letter-spacing: -.05em; line-height: 1.1; }
.collections-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.collections-nav p { margin: 0; font-size: 16px; white-space: nowrap; color: var(--muted); }
.collections-nav p span { margin-left: 12px; }
.collections-viewport {
  overflow-x: auto;
  padding: 5px var(--gutter) 18px;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  cursor: grab;
}
.collections-viewport::-webkit-scrollbar { display: none; }
.collections-viewport:focus-visible { outline: 1px solid var(--ink); outline-offset: -2px; }
.collections-track { display: flex; gap: var(--collection-gap); list-style: none; padding: 0; margin: 0; width: max-content; }
.collection-slide { flex: 0 0 auto; width: clamp(280px, 28vw, 570px); }
.collection-card { display: block; color: inherit; text-decoration: none; }
.collection-image { overflow: hidden; background: var(--line); height: clamp(340px, 56svh, 680px); }
.collection-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; user-select: none; -webkit-user-drag: none; }
.collection-card h3 { font-size: clamp(25px, 2.15vw, 40px); font-weight: 400; line-height: 1.15; letter-spacing: -.045em; margin: 18px 0 0; }
.collection-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.collection-card:hover .collection-image img { transform: scale(1.025); }
.collections-viewport.is-dragging { cursor: grabbing; user-select: none; }
.collections-viewport.is-dragging a { cursor: grabbing; }
.collections-controls { display: flex; gap: 8px; }
.collections-controls[hidden] { display: none; }
.collections-controls button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: 23px; cursor: pointer; }
.collections-controls button:hover:not(:disabled),.collections-controls button:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.collections-controls button:disabled { opacity: .3; cursor: default; }
@media (max-width: 700px) {
  .collections { padding-top: 42px; }
  .collections-heading { flex-wrap: wrap; gap: 18px; padding-bottom: 28px; }
  .collection-slide { width: 78vw; }
  .collection-image { height: clamp(300px, 52svh, 540px); }
  .collections-nav { width: 100%; margin-left: 0; }
  .collections-controls { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .collection-image img { transition: none; }
  .collection-card:hover .collection-image img { transform: none; }
}