/* ===================== ТОВАРЫ: ШАРЫ И БАЛЯСИНЫ =====================
   /tovary/shary-balyasiny. Подключается через ViewData["CssPage"] = "tovar-shary-balyasiny" после бандлов.
   Общие блоки — _ServiceHero, svc-memorial-design__*, svc-mem-design-card, svc-granit-gallery, svc-oform-*,
   quiz, seo, home-faq. Здесь только раскладка своих блоков: карточки вариантов, блок изделия
   (главный кадр + плитки), сетка сцен комплекса, макро-блок, карточки подбора, мелочи анкеты.
   Вертикальных отступов между секциями на десктопе нет — их задаёт service-page--rhythm (56px). */

.sb-anchor { display: block; height: 0; }

/* — 2. варианты: две группы карточек — */
.sb-group + .sb-group { margin-top: 32px; }
.sb-group__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.sb-group__ico {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: #EEF4EC; color: var(--green-600);
}
.sb-group__ico [data-lucide] { width: 22px; height: 22px; }
.sb-group__title { margin: 0; font-size: 22px; line-height: 1.25; color: var(--ink); }
.sb-group__lead { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); }

.sb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sb-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  overflow: hidden;
  min-width: 0;
  box-shadow: 0 16px 32px -28px rgba(20,24,26,.14);
}
.sb-card__pic {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(160deg, #EEF1EF, #DCE2DE);
}
.sb-card__ph,
.sb-tile__ph { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa39d; }
.sb-card__ph [data-lucide],
.sb-tile__ph [data-lucide] { width: 48px; height: 48px; }
.sb-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; flex: 1; }
.sb-card__title { margin: 0; font-size: 18px; line-height: 1.3; color: var(--ink); }
.sb-card__text { margin: 0 0 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.sb-card__row { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--ink-3); }
.sb-card__row [data-lucide] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--green-600); }

/* — 3, 4. блок изделия: главный кадр + текст и плитки — */
.sb-product__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 32px;
  align-items: start;
}
.sb-product__grid--rev .sb-product__main { order: 2; }
.sb-product__side .svc-memorial-design__head { margin-bottom: 18px; }
.sb-points {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}
.sb-points li { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.sb-points [data-lucide] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--green-600); }
.sb-product__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.sb-tile { margin: 0; min-width: 0; }
.sb-tile__pic {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, #EEF1EF, #DCE2DE);
}
.sb-tile--main .sb-tile__pic { aspect-ratio: 4 / 5; border-radius: 18px; }
.sb-tile--main .sb-tile__ph [data-lucide] { width: 72px; height: 72px; }
.sb-tile__cap { display: flex; flex-direction: column; gap: 2px; padding: 10px 2px 0; }
.sb-tile__name { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.sb-tile__text { font-size: 13px; line-height: 1.4; color: var(--muted); }

/* — 5. сцены комплекса: первая во всю ширину, остальные по две — */
.sb-scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sb-scene { min-width: 0; }
.sb-scene--wide { grid-column: 1 / -1; }
.sb-scene--wide .svc-mem-design-card__pic { aspect-ratio: 21 / 9; }
.sb-scene .svc-mem-design-card__name { font-size: 16px; }
.sb-scene .svc-mem-design-card__desc { font-size: 13.5px; }

/* — 6. макро: тёмная карточка, первый кадр крупно — */
.sb-macro {
  padding: 40px;
  border-radius: 22px;
  background: var(--ink);
  color: #E9EEEA;
}
.sb-macro__head { margin-bottom: 24px; }
.sb-macro__head .eyebrow { color: #9CC9A6; margin-bottom: 14px; }
.sb-macro__head .svc-memorial-design__title { color: #fff; }
.sb-macro__head .svc-memorial-design__sub { color: rgba(233,238,234,.7); }
.sb-macro__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 14px;
}
.sb-macro__item {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(circle at 30% 25%, #3a4144, #1d2224 70%);
  min-width: 0;
}
.sb-macro__item--big { grid-column: span 2; grid-row: span 2; }
.sb-macro__ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(233,238,234,.35); }
.sb-macro__ph [data-lucide] { width: 44px; height: 44px; }
.sb-macro__item--big .sb-macro__ph [data-lucide] { width: 72px; height: 72px; }
.sb-macro__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 28px 16px 14px;
  background: linear-gradient(180deg, rgba(20,24,26,0), rgba(20,24,26,.78));
}
.sb-macro__name { font-size: 15px; font-weight: 700; color: #fff; }
.sb-macro__text { font-size: 12.5px; line-height: 1.35; color: rgba(233,238,234,.8); }

/* — 7. как подобрать — */
.sb-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.sb-feat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 24px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  min-width: 0;
}
.sb-feat__ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: #EEF4EC; color: var(--green-600); margin-bottom: 4px;
}
.sb-feat__ico [data-lucide] { width: 22px; height: 22px; }
.sb-feat__title { margin: 0; font-size: 17px; line-height: 1.3; color: var(--ink); }
.sb-feat__text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }

/* ===================== адаптив ===================== */

/* Ритм 56px задан только для ≥1025px — ниже даём своим блокам отступ сами. */

/* Цифры шапки: длинные слова («Периметр», «Балясины») на телефоне не рвём посередине */

/* — 9. анкета подбора (квиз): подразделы одного шага разделены линией, как ek-quiz-section — */
.sb-quiz-sub { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.sb-quiz-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line, #E7E4DC); }
.sb-quiz-section__title { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 700; color: var(--ink); }
.sb-quiz .quiz-mem-input { margin-top: 12px; }

/* Заголовок квиза на телефоне: при 42px длинное слово не помещается и рвётся посередине */