/* Раздел «С этим товаром» карточки товара (related.js): лента подобранных позиций и окно подбора.
   Габарит фото - 120 px, подпись под фото по ширине фотографии: наименование и цена (решение автора задачи 04.11.2026).
   Цвет - только у меток и основной кнопки, как в остальной карточке (решение 14 проекта этапа). */

:root { --rl-w: 120px; }      /* габарит фото плитки: от него же ширина подписи и положение стрелок */

/* ---------- лента раздела ---------- */
.rl { display: grid; gap: var(--s-4); min-width: 0; }
.rl-hd { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.rl-hd h3 { margin: 0; font-size: var(--fs-lg); font-weight: 650; }
.rl-hd h3 small { display: block; margin-top: var(--s-1); color: var(--text-3); font-size: var(--fs-sm); font-weight: 400; }
.rl-wrap { position: relative; min-width: 0; }
.rl-strip { display: flex; gap: var(--s-5); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scroll-behavior: smooth; padding: 2px 2px var(--s-4); scrollbar-width: thin; }
.rl-strip::-webkit-scrollbar { height: 8px; }
.rl-strip::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-full); }
/* плитка - кнопка без вида кнопки: фото квадратом, под ним наименование и цена по ширине фотографии */
.rl-tile { flex: none; width: var(--rl-w); display: grid; gap: var(--s-3); align-content: start; scroll-snap-align: start;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rl-ph { width: var(--rl-w); height: var(--rl-w); display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }
.rl-ph img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rl-ph.none { color: var(--text-3); }
.rl-ph.none .ui-ico { width: 38%; height: 38%; }
.rl-nm { font-size: var(--fs-xs); line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rl-sub { font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.rl-sub small { color: var(--text-3); font-weight: 400; }
.rl-tile:hover .rl-nm { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.rl-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-lg); }
/* стрелки прокрутки - мышью; на касание лента листается пальцем */
.rl-ar { position: absolute; top: calc(var(--rl-w) / 2 - 18px); width: 36px; height: 36px; display: grid; place-items: center;
  padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--text-2);
  box-shadow: var(--shadow-sm); cursor: pointer; }
.rl-ar .ui-ico { width: 20px; height: 20px; }
.rl-ar:hover { background: var(--hover); color: var(--text); }
.rl-ar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rl-ar.l { left: -10px; }
.rl-ar.r { right: -10px; }
@media (pointer: coarse) { .rl-ar { display: none; } }
.rl-empty { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; padding: var(--s-6);
  border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--text-3); font-size: var(--fs-sm); }

/* ---------- окно «С этим товаром»: подбор позиций ---------- */
.rl-pick { display: grid; gap: var(--s-6); min-width: 0; }
.rl-pick p { margin: 0; }
.rl-sel { display: flex; gap: var(--s-4); overflow-x: auto; padding: 2px 2px var(--s-3); scrollbar-width: thin; }
.rl-s { flex: none; width: 76px; display: grid; gap: var(--s-2); }
.rl-sph { position: relative; width: 76px; height: 76px; overflow: hidden; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface-2); color: var(--text-3); display: grid; place-items: center; }
.rl-sph img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rl-x { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--text-2); cursor: pointer; }
.rl-x .ui-ico { width: 14px; height: 14px; }
.rl-x:hover { background: var(--st-bad-soft); color: var(--st-bad); }
.rl-s .rl-snm { font-size: 11px; line-height: 1.25; color: var(--text-2); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rl-mv { display: flex; gap: 2px; }
.rl-mv button { flex: 1; min-height: 26px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--surface); color: var(--text-3); cursor: pointer; }
.rl-mv .ui-ico { width: 14px; height: 14px; }
.rl-mv button:hover { background: var(--hover); color: var(--text); }
.rl-mv button[disabled] { opacity: .45; cursor: not-allowed; }
.rl-list { display: grid; gap: var(--s-2); max-height: 44vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.rl-row { display: flex; align-items: center; gap: var(--s-5); width: 100%; padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: inherit; font: inherit;
  text-align: left; cursor: pointer; }
.rl-row:hover { background: var(--hover); }
.rl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rl-row.on { background: var(--accent-soft); border-color: var(--accent-line); }
.rl-rph { flex: none; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-3); }
.rl-rph img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rl-rph .ui-ico { width: 20px; height: 20px; }
.rl-tx { display: grid; gap: 2px; min-width: 0; flex: 1; }
.rl-tx b { font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.rl-tx small { color: var(--text-3); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.rl-ck { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--line-2);
  border-radius: var(--r-xs); color: transparent; }
.rl-ck .ui-ico { width: 16px; height: 16px; }
.rl-row.on .rl-ck { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.rl-cnt { font-size: var(--fs-sm); color: var(--text-2); }
.rl-cnt b { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .rl-strip { gap: var(--s-4); }
  .rl-row { min-height: 44px; }
  .rl-x, .rl-mv button { min-height: 32px; }      /* касание: кнопки плитки выбранного не меньше 32 px */
  .rl-list { max-height: 50vh; }
}
@media (hover: none) { .rl-pick .ui-input { font-size: 16px; } }      /* касание: страница не увеличивается при вводе */