/* ============================================================
   Полка «Готовые картинки» — общий компонент двух страниц:
   на главной (лента фонда, разные стили) и на странице стиля
   (та же лента, состав — один стиль).
   Перенесено из макетов, принятых владельцем 2026-09-04
   (preview-polka-gotovoe.html, preview-stil-polka.html).
   Свои размеры и отступы не выдумываем: ряд повторяет штатную
   полку каталога (.lib-shelf-row).
   ============================================================ */

.gp { padding-top: 14px; padding-bottom: 20px; border-top: 1px solid var(--ap-rule, #d6d6d6); }

.gp-head {
  display: inline-flex; align-items: center; gap: .5em; margin-bottom: 4px;
  color: #111; font-family: var(--ap-serif); font-size: 20px; font-weight: 600; line-height: 1.25;
  text-decoration: none;
}
.gp-head svg { color: var(--ap-muted, #636366); }

/* Подзаголовок держим в одну строку: на смартфоне полная фраза ломалась
   на две и полка «толстела» относительно соседних. Ниже 735 показываем
   короткий вариант — тот же смысл в одну строку. */
.gp-sub { margin: 0 0 12px; font-size: 14px; color: var(--ap-muted, #636366); white-space: nowrap; }
.gp-sub .gp-short { display: none; }
@media (max-width: 734px) {
  .gp-sub .gp-long { display: none; }
  .gp-sub .gp-short { display: inline; }
}

/* Свойства ряда — те же, что у штатной полки (.lib-shelf-row): без снапа
   первая картинка стояла на 24 px правее соседних полок. */
.gp-row {
  display: flex; gap: var(--ap-shelf-gap, 14px);
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.gp-row::-webkit-scrollbar { display: none; }

.gp-item {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - (var(--ap-shelf-cols, 5.38) - 1) * var(--ap-shelf-gap, 14px)) / var(--ap-shelf-cols, 5.38));
  position: relative; display: block; border-radius: 2.5px; overflow: hidden;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.1);
}
.gp-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

@media (max-width: 734px) {
  .gp { padding-left: 0; padding-right: 0; }
  .gp-head, .gp-sub { margin-left: var(--ap-edge); }
  .gp-row { padding-left: var(--ap-edge); padding-right: var(--ap-edge); }
}

/* На странице стиля полка живёт внутри карточки: там свой ритм блоков,
   поэтому верхняя линия и поля берутся у соседних секций страницы. */
.sp .gp { border-top: none; padding-top: 0; }
.sp .gp-head { font-family: inherit; font-size: 17px; }