/* «Похожие модели» на страницах моделей — 10.10.2026 («Дизайн»), сборка tools/related-block.py.
   Один блок вместо двух старых («Похожие модели» + «Смотрите также»). Пропорции — золотое сечение:
   фото 1,618 : 1; отступы и размеры — ряд Фибоначчи (8, 13, 21, 34, 55, 89). Темы — как у шапки и подвала. */
:root {
  --sfr-bg: #120C08; --sfr-card: #1C140F; --sfr-strong: #F5ECE2; --sfr-nav: #CFC3B4; --sfr-muted: #A08E7C;
  --sfr-line: rgba(200,118,60,.18); --sfr-accent: #C8763C; --sfr-shadow: 0 21px 55px rgba(0,0,0,.35);
}
html[data-theme="light"] {
  --sfr-bg: #F7F2EB; --sfr-card: #FFFFFF; --sfr-strong: #20150E; --sfr-nav: #4A3A2E; --sfr-muted: #6E5B4B;
  --sfr-line: rgba(140,85,40,.16); --sfr-shadow: 0 21px 55px rgba(60,35,20,.10);
}
.sfr { background: var(--sfr-bg); border-top: 1px solid var(--sfr-line); padding: 89px 0 55px; font-family: 'Onest', system-ui, sans-serif; }
.sfr-in { max-width: 1440px; margin: 0 auto; padding: 0 34px; }
.sfr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 21px; margin-bottom: 34px; }
.sfr-ht { display: flex; flex-direction: column; gap: 13px; }
.sfr-nav { display: flex; gap: 8px; }
.sfr-arr { width: 55px; height: 55px; border-radius: 50%; border: 1px solid var(--sfr-line); background: transparent;
  color: var(--sfr-strong); font: 300 18px/1 'Onest', sans-serif; cursor: pointer; transition: border-color .3s ease, color .3s ease, background .3s ease; }
.sfr-arr:hover { border-color: var(--sfr-accent); color: var(--sfr-accent); background: rgba(200,118,60,.06); }
.sfr-k { font: 400 11px/1 'Onest', sans-serif; letter-spacing: .32em; text-transform: uppercase; color: var(--sfr-accent); }
.sfr-h { margin: 0; font: 300 clamp(28px, 3.4vw, 44px)/1.12 'Unbounded', sans-serif; letter-spacing: -.01em; color: var(--sfr-strong); text-transform: none; }

.sfr-row { display: flex; gap: 21px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
.sfr-row::-webkit-scrollbar { display: none; }
.sfr-card { flex: 0 0 calc((100% - 63px) / 4); scroll-snap-align: start; }
.sfr-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 21px; overflow: hidden;
  background: var(--sfr-card); border: 1px solid var(--sfr-line); color: inherit; text-decoration: none;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .3s ease; }
.sfr-card:hover { transform: translateY(-5px); box-shadow: var(--sfr-shadow); border-color: rgba(200,118,60,.45); }
.sfr-card:focus-visible { outline: 2px solid var(--sfr-accent); outline-offset: 3px; }
.sfr-ph { display: block; aspect-ratio: 1.618 / 1; overflow: hidden; background: rgba(200,118,60,.06); }
.sfr-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.sfr-card:hover .sfr-ph img { transform: scale(1.05); }
.sfr-body { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 21px 55px 21px 21px; min-height: 89px; }
.sfr-name { font: 400 17px/1.3 'Onest', sans-serif; color: var(--sfr-strong); }
.sfr-tag { font-size: 13px; line-height: 1.4; color: var(--sfr-muted); }
.sfr-price { margin-top: 3px; font-size: 15px; color: var(--sfr-accent); letter-spacing: .01em; }
.sfr-go { position: absolute; right: 21px; bottom: 21px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--sfr-line); display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--sfr-accent); transition: background .3s ease, color .3s ease, border-color .3s ease; }
.sfr-card:hover .sfr-go { background: var(--sfr-accent); border-color: var(--sfr-accent); color: #fff; }

.sfr-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; margin-top: 55px; padding-top: 34px; border-top: 1px solid var(--sfr-line); }
.sfr-cats-l { margin-right: 13px; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--sfr-muted); }
.sfr-cats a { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--sfr-line);
  font-size: 14px; color: var(--sfr-nav); text-decoration: none; transition: border-color .3s ease, color .3s ease, background .3s ease; }
.sfr-cats a:hover { border-color: var(--sfr-accent); color: var(--sfr-accent); background: rgba(200,118,60,.06); }

@media (max-width: 1023px) { .sfr-card { flex-basis: calc((100% - 42px) / 3); } }
/* телефон: карточки листаются пальцем, видно 1,3 карточки — понятно, что есть ещё */
@media (max-width: 760px) {
  .sfr { padding: 55px 0 34px; }
  .sfr-in { padding: 0 16px; }
  .sfr-head { margin-bottom: 21px; }
  .sfr-nav { display: none; }
  .sfr-row { gap: 13px; margin: 0 -16px; padding: 0 16px 8px; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; }
  .sfr-card { flex: 0 0 76%; }
  .sfr-card:hover { transform: none; }
  .sfr-cats { margin-top: 34px; padding-top: 21px; }
  .sfr-cats-l { width: 100%; margin: 0 0 5px; }
}
@media (prefers-reduced-motion: reduce) { .sfr-card, .sfr-ph img { transition: none; } }