.sayas-market {
  padding-bottom: clamp(.75rem, 2vw, 1.25rem);
}

.sold-sayas {
  width: min(var(--page-width), calc(100% - clamp(2rem, 7vw, 5rem)));
  padding: clamp(1rem, 2vw, 1.5rem) 0 1.5rem;
  scroll-margin-top: calc(var(--header-offset) + 2rem);
}

.sold-sayas-heading {
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  padding: clamp(1.25rem, 4vw, 2.75rem) clamp(1rem, 4vw, 2rem);
  border-radius: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--bg-soft));
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-soft));
  color: var(--ink);
  text-align: center;
}

.sold-sayas-heading h2 {
  font-family: var(--display-font);
  word-spacing: normal;
  text-wrap: balance;
  margin: 0 0 .65rem;
}

.sold-sayas-heading p {
  max-width: 35rem;
  margin: 0 auto;
  font-size: .875rem;
  line-height: 1.55;
}

.sold-sayas-heading .sold-sayas-label {
  color: var(--accent-deep);
  margin-bottom: .65rem;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.sold-sayas-status,
.sold-saya-caption {
  color: var(--muted);
}

.sold-sayas-status {
  text-align: center;
}

.sold-sayas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.sold-saya {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--surface);
  box-shadow: var(--paper-shadow), 0 18px 36px rgba(78, 43, 35, .08);
  scroll-margin-top: calc(var(--header-offset, 6rem) + 2rem);
}

.sold-saya:target {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.sold-saya-media {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  aspect-ratio: 4 / 5;
  place-items: center;
  background: var(--bg-soft);
}

.sold-saya-media img,
.sold-saya-media video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.sold-saya-media video {
  background: var(--ink);
}

.sold-saya figcaption {
  padding: 1rem 1.15rem 1.25rem;
  overflow-wrap: anywhere;
}

.sold-saya h3 {
  margin: 0;
  font: 600 1.65rem/1.15 var(--display-font);
}

.sold-saya-caption {
  margin: .4rem 0 0;
  white-space: pre-line;
}

.saya-rail--extended {
  --bar-top: 5.35rem;
  --skirt-width: clamp(170px, 17vw, 225px);
  padding: 0;
}

.saya-rail--extended::before { top: var(--bar-top); }

.saya-rail--extended .saya-rail-list {
  width: 100%;
  min-height: 405px;
  gap: 0;
  padding: calc(var(--bar-top) - 4px) clamp(54px, 6vw, 90px) 1rem;
  transform: none;
}

.saya-rail--extended .saya-rail-item {
  --rail-selected: 0;
  --rail-turn: var(--rail-scroll-turn, var(--rail-selected));
  --rail-fold: var(--rail-scroll-fold, 1);
  --rail-front-blend: clamp(0, calc((var(--rail-turn) - .18) * 1.6), 1);
  flex: 1 1 0;
  z-index: 1;
  transform-style: flat;
  transition: none;
}

.saya-rail--extended .saya-rail-item:has(+ .is-active),
.saya-rail--extended .is-active + .saya-rail-item {
  z-index: 3;
}

.saya-rail--extended .saya-rail-item.is-active {
  --rail-selected: 1;
  z-index: 5;
}

.saya-rail--extended .saya-rail-item.is-before,
.saya-rail--extended .saya-rail-item.is-after { transform: none; }
.saya-rail--extended .is-before .saya-rail-skirt { transform: translateX(-42px); }
.saya-rail--extended .is-after .saya-rail-skirt { transform: translateX(42px); }

.saya-rail--extended .saya-rail-skirt {
  left: 50%;
  width: var(--skirt-width);
  margin: 0;
  translate: -50% 0;
  pointer-events: none;
  transition: filter 380ms ease, transform 450ms cubic-bezier(.2,.8,.2,1);
}

.saya-rail--extended .saya-rail-skirt img {
  object-position: center top;
  transform-origin: center top;
  rotate: var(--rail-sway, 0rad);
  transition: opacity 400ms ease-in-out, transform 440ms cubic-bezier(.25,.65,.35,1);
}

.saya-rail--extended .saya-rail-item .saya-rail-profile {
  opacity: clamp(0, calc((1 - var(--rail-front-blend)) * 3), 1);
  transform: rotateY(calc(var(--rail-turn) * 28deg)) scale(calc(.8 - var(--rail-turn) * .06)) scaleX(var(--rail-fold, 1));
}

.saya-rail--extended .saya-rail-item .saya-rail-front {
  z-index: 1;
  opacity: var(--rail-front-blend);
  transform: rotateY(calc((1 - var(--rail-turn)) * -36deg)) scale(calc(.82 + var(--rail-turn) * .18)) scaleX(var(--rail-fold, 1));
}

@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
  .saya-rail-section { display: block; }

  .saya-rail--extended {
    --skirt-width: clamp(229.5px, 22.95vw, 303.75px);
  }

  .saya-rail--extended .saya-rail-list { min-height: 0; }

  .sayas-market > .sayas-sidebar { margin-top: 0; }

  .sayas-market > .sayas-catalogue {
    grid-row: 1;
    grid-template-rows: none;
  }

  .sayas-market .sayas-toolbar { padding-top: 0; }
}

@media (max-width: 960px), (hover: none), (pointer: coarse) {
  .saya-rail--extended {
    --bar-top: 4.35rem;
    --skirt-width: clamp(172px, 57vw, 232px);
    --rail-slot: clamp(52px, 18.5vw, 80px);
  }

  .saya-rail--extended .saya-rail-list {
    justify-content: flex-start;
    min-height: 330px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    padding-inline: max(0px, calc((100% - var(--rail-slot)) / 2));
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .saya-rail--extended .saya-rail-list::-webkit-scrollbar { display: none; }

  .saya-rail--extended .saya-rail-item {
    flex: 0 0 var(--rail-slot);
    scroll-snap-align: center;
    scroll-snap-stop: normal;
    opacity: var(--rail-presence, 1);
  }

  .saya-rail--extended .saya-rail-skirt,
  .saya-rail--extended .saya-rail-skirt img {
    transition: none;
  }

  .saya-rail--extended .saya-rail-list:has(.is-active) .saya-rail-item:not(
    .is-active,
    :has(+ .is-active),
    :has(+ .saya-rail-item + .is-active),
    .is-active + .saya-rail-item,
    .is-active + .saya-rail-item + .saya-rail-item
  ) {
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .saya-rail--extended .saya-rail-item {
    --rail-turn: var(--rail-selected);
    --rail-fold: 1;
  }
  .saya-rail--extended .saya-rail-item,
  .saya-rail--extended .saya-rail-skirt,
  .saya-rail--extended .saya-rail-skirt img { transition: none; }
}
