@layer sections {
  .shelf { overflow: clip; }
  .shelf__viewport {
    --card-w: clamp(16.5rem, 24vw, 23rem);
    overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
    padding: 0.5rem var(--gutter) 2.5rem; margin-inline: auto; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain;
  }
  .shelf__viewport::-webkit-scrollbar { display: none; }
  .shelf__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .shelf__viewport.is-dragging a { pointer-events: none; }
  .shelf__track { display: flex; gap: clamp(1rem, 0.5rem + 1.6vw, 2rem); list-style: none; margin: 0; padding: 0; width: max-content; }
  .shelf__viewport:focus-visible { outline-offset: -4px; }
  .shelf__item { flex: 0 0 var(--card-w); scroll-snap-align: start; }
  .shelf__item .pcard__media { aspect-ratio: 4 / 5.2; }

  .shelf__item--end { flex-basis: calc(var(--card-w) * 0.8); display: grid; }
  .shelf__more {
    display: grid; place-content: center; justify-items: center; gap: 1.25rem; text-decoration: none; text-align: center;
    border: 1px dashed color-mix(in oklab, var(--fg) 30%, transparent); border-radius: var(--radius-l); min-height: 20rem; padding: 2rem;
    transition: background var(--dur-m), color var(--dur-m), border-color var(--dur-m);
  }
  .shelf__more-art { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--c-gold); color: var(--c-ink); transition: transform 0.8s var(--ease-spring); }
  .shelf__more-art .icon { width: 1.8rem; height: 1.8rem; }
  .shelf__more:hover { background: var(--fg); color: var(--bg); border-style: solid; }
  .shelf__more:hover .shelf__more-art { transform: rotate(45deg) scale(1.1); }

  .shelf__controls { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
  .shelf__progress { position: relative; flex: 1; max-width: 28rem; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
  .shelf__progress span { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0.2)); background: var(--accent); border-radius: inherit; transition: transform 0.25s linear; }
  .shelf__buttons { display: flex; gap: 0.6rem; }
  .shelf__buttons .icon-btn:disabled { opacity: 0.35; pointer-events: none; }
  @media (max-width: 749px) {
    .shelf__viewport { --card-w: 74vw; }
    .shelf__buttons { display: none; }
    .shelf__progress { max-width: none; }
  }
}