/* A shelf always remains one row; horizontal motion moves real cards. */
.va-showcase { margin: 38px 0; min-width: 0; }
.va-showcase__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.va-showcase__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(22px, 2.4vw, 27px); line-height: 1.2; }
.va-showcase__hammer { flex: 0 0 auto; color: var(--accent); }
.va-showcase__controls { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.va-showcase__arrow, .va-showcase__pause {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface-1);
  color: var(--ink-black); cursor: pointer; font: inherit; font-size: 12px;
}
.va-showcase__arrow { width: 36px; padding: 0; }
.va-showcase__pause { padding: 7px 12px; }
.va-showcase__arrow:disabled { opacity: .35; cursor: default; }
.va-showcase__pause:disabled { color: var(--ink-2); cursor: default; }
.va-showcase__arrow:focus-visible, .va-showcase__pause:focus-visible, .va-showcase__rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* ОДИН РАЗМЕР КАРТОЧКИ НА ВСЕ ВИТРИНЫ. Прежде ширина считалась долей ряда:
   «Популярные лоты» стоят в колонке каталога и выходили мельче, чем
   «Рекомендуем вам» и «Вы ранее интересовались» на главной во всю ширину, а
   на телефоне одни шли по две в ряд, другие — по 76 % экрана. Заказчик:
   «сделать тем же размером, что и популярные лоты». Теперь ширина одна —
   та, что у «Популярных» в каталоге; на широком экране в ряд просто
   помещается больше карточек. */
.va-showcase { --shelf-card: 222px; }
.va-showcase__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--shelf-card);
  gap: 20px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: 0; scrollbar-width: thin;
  scrollbar-color: var(--line) transparent; padding: 3px 0 12px;
}
.va-showcase__item { position: relative; min-width: 0; scroll-snap-align: start; }
.va-showcase__item .item-card { height: 100%; }
.va-showcase__item .item-card__photo { box-shadow: var(--shadow-photo); }
.va-showcase[data-rotation="fade"] .va-showcase__rail { transition: opacity .2s ease; }
.va-showcase__rail--changing { opacity: 0; }
#collageGrid.va-showcase__rail { grid-template-columns: none; }
.va-showcase__ad {
  position: absolute; left: 9px; bottom: 10px; z-index: 4; padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.65); border-radius: 6px;
  background: rgba(255,255,255,.94); color: #403b48; font-size: 10px; line-height: 1.2;
  pointer-events: none;
}
.va-showcase__state { padding: 22px; margin: 24px 0; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface-1); color: var(--ink-2); }
.va-showcase__state p { margin-top: 0; }
.va-showcase[hidden], .va-showcase__pause[hidden] { display: none; }
/* A collection collage uses the same 3:4 footprint as neighbouring lots. */
.collage__grid { aspect-ratio: 3 / 4; }
.collage__grid i { position: relative; min-width: 0; min-height: 0; background: var(--photo); }
.collage__grid img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
@media (max-width: 760px) { .va-showcase__rail { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; } }
@media (max-width: 560px) {
  .va-showcase { margin: 30px 0; }
  .va-showcase__head { flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
  .va-showcase__title { font-size: 23px; width: 100%; }
  .va-showcase__controls { margin-left: auto; }
  .va-showcase__rail { grid-auto-columns: calc((100% - 14px) / 2); gap: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .va-showcase__arrow:not(:disabled):hover, .va-showcase__pause:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .va-showcase * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .va-showcase__rail--changing { opacity: 1; }
}