/* ===================== ФОТО НА СТЕКЛЕ =====================
   /oformlenie-pamyatnikov/foto-na-stekle. Подключается через ViewData["CssPage"] после бандлов,
   поэтому здесь только своё (классы fs-*) и точечные правки общих блоков внутри .fs-page.
   Общие блоки раздела (svc-oform-*, svc-memorial-*, svc-stekla-*) — в bundles/service.css. */

.fs-anchor { display: block; height: 0; scroll-margin-top: 90px; }

/* — 4. Промо без ленты заявок: отступы как у обычной секции — */
.fs-page .fs-promo { padding-top: 8px; padding-bottom: 8px; }
.fs-page .fs-promo .svc-memorial-steps { margin-top: 16px; }

/* ——— 5. Конструктор размера ——————————————————————————————————————— */
.fs-sizer__card {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--card, #fff);
}
.fs-sizer__controls { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.fs-sizer__group + .fs-sizer__group { padding-top: 22px; border-top: 1px solid var(--line); }
.fs-sizer__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}
.fs-sizer__label svg { width: 30px; height: 30px; flex-shrink: 0; color: var(--green-600); }
/* Строка: подпись — ползунок с границами — поле — «см» */
.fs-sizer__row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 88px 24px;
  align-items: start;
  gap: 12px;
  margin-bottom: 10px;
}
.fs-sizer__row-label { padding-top: 10px; font-size: 15px; font-weight: 500; color: var(--ink); }
.fs-sizer__range { min-width: 0; padding-top: 6px; }
.fs-sizer__range input {
  --fs-fill: 50%;
  display: block;
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.fs-sizer__range input::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--green-600) var(--fs-fill), #E7E7E3 var(--fs-fill));
}
.fs-sizer__range input::-moz-range-track { height: 5px; border-radius: 3px; background: #E7E7E3; }
.fs-sizer__range input::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--green-600); }
.fs-sizer__range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9.5px;
  border-radius: 50%;
  border: 0;
  background: var(--green-600);
  box-shadow: 0 2px 6px rgba(29,92,46,.3);
}
.fs-sizer__range input::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: var(--green-600);
  box-shadow: 0 2px 6px rgba(29,92,46,.3);
}
.fs-sizer__range input:focus-visible { outline: none; }
.fs-sizer__range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(46,140,75,.25); }
.fs-sizer__range input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(46,140,75,.25); }
.fs-sizer__range-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}
.fs-sizer__num {
  width: 100%;
  height: 46px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: var(--ink);
  -moz-appearance: textfield;
}
.fs-sizer__num::-webkit-inner-spin-button,
.fs-sizer__num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fs-sizer__num:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(46,140,75,.15); }
.fs-sizer__unit { padding-top: 13px; font-size: 14px; color: var(--muted); }
.fs-sizer__ratio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2px 0 6px;
  font-size: 15px;
}
.fs-sizer__check { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-3); cursor: pointer; }
.fs-sizer__check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fs-sizer__check-box {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: #fff;
  transition: background .15s ease, border-color .15s ease;
}
.fs-sizer__check-box [data-lucide], .fs-sizer__check-box svg { width: 16px; height: 16px; opacity: 0; }
.fs-sizer__check input:checked + .fs-sizer__check-box { background: var(--green-600); border-color: var(--green-600); }
.fs-sizer__check input:checked + .fs-sizer__check-box svg { opacity: 1; }
.fs-sizer__check input:focus-visible + .fs-sizer__check-box { box-shadow: 0 0 0 3px rgba(46,140,75,.25); }
.fs-sizer__ratio-val { font-size: 14px; color: var(--muted); }
.fs-sizer__presets { margin-top: 14px; }
.fs-sizer__presets-title { margin-bottom: 10px; font-size: 15px; font-weight: 500; color: var(--ink); }
.fs-sizer__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-sizer__chip {
  min-width: 86px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 16px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.fs-sizer__chip:hover { border-color: var(--green-500); color: var(--green-700); }
.fs-sizer__chip.is-on { background: var(--green-600); border-color: var(--green-600); color: #fff; }

.fs-sizer__verdict {
  padding: 16px 18px;
  border-radius: 16px;
  background: #EEF2EA;
  border: 1px solid rgba(46,140,75,.14);
}
.fs-sizer__verdict--over { background: #FBF1E6; border-color: rgba(192,122,44,.3); }
.fs-sizer__verdict-title { font-size: 17px; font-weight: 600; color: var(--ink); }
.fs-sizer__verdict--over .fs-sizer__verdict-title { color: #9A5A17; }
.fs-sizer__verdict-text { margin: 6px 0 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.fs-sizer__readout { font-size: 13px; line-height: 1.4; color: var(--muted); }
.fs-sizer__cta { align-self: flex-start; }

.fs-sizer__stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1024 / 1194; /* как фото фона; STAGE_ASPECT в JS */
  justify-self: center;
  align-self: center;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #EEF3F6 0%, #F6F4EE 78%, #E7E2D6 100%);
  touch-action: none;
}
.fs-sizer__ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4%;
  background: #D8D1C1;
}
/* Сетка высот слева: 0 — у земли (4 % сцены), 200 см — на 200/210 высоты над землёй. */
.fs-sizer__scale {
  position: absolute;
  left: 8px;
  top: 4.6%;
  bottom: 4%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10.5px;
  z-index: 1;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 0 6px rgba(0,0,0,.4);
  pointer-events: none;
}
.fs-sizer__person {
  position: absolute;
  left: 6%;
  bottom: 0.6%; /* подошвы на полосе земли, человек перед ней */
  z-index: 1;
  height: 81.4%; /* 178 см на сцене 210 см; точную высоту ставит fsSizer.personStyle() */
  width: auto;
  aspect-ratio: 390 / 1491;
  isolation: isolate;
}
.fs-sizer__person::after {
  /* тень под ногами */
  content: "";
  position: absolute;
  left: -15%; right: -15%; bottom: -1.2%;
  height: 3%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.35), rgba(0,0,0,0));
  z-index: -1;
}
.fs-sizer__person picture,
.fs-sizer__person img { display: block; height: 100%; width: auto; }
.fs-sizer__monument {
  position: absolute;
  left: 62%;
  bottom: 4%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: width .25s ease, height .25s ease;
}
.fs-sizer__stela {
  position: relative;
  z-index: 1;
  top: var(--fs-stela-drop, 0);
  width: var(--fs-stela-w, 80%);
  height: var(--fs-stela-h, 90%);
  border-radius: 6px 6px 0 0;
  background:
    radial-gradient(120% 70% at 30% 15%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    linear-gradient(160deg, rgba(255,255,255,.04) 0%, rgba(0,0,0,.18) 100%),
    url("/assets/ai/fs-sizer-granite.jpg") 0 0 / 90% auto repeat,
    #1C1F21;
  /* гранит — фото текстуры от владельца (public/images/ai/текстура-гранита.png → fs-sizer-granite.jpg) */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 12px 26px rgba(20,24,26,.18);
}
.fs-sizer__base {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  filter: drop-shadow(0 6px 8px rgba(20,24,26,.25));
}
/* Тумба — фото гранита, растянутое под ширину стелы + 20 см */
.fs-sizer__base picture { position: absolute; inset: 0; display: block; }
.fs-sizer__base img { display: block; width: 100%; height: 100%; object-fit: fill; }
/* Фон сцены — участок с оградой; низ кадра (плитка) у нижнего края сцены */
.fs-sizer__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fs-sizer__bg picture { position: static; display: block; width: 100%; height: 100%; }
.fs-sizer__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.fs-sizer__ground { display: none; }
.fs-sizer__glass {
  position: absolute;
  z-index: 2;
  border-radius: 3px;
  overflow: hidden;
  cursor: grab;
  outline: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 6px 14px rgba(0,0,0,.35);
  transition: width .2s ease, height .2s ease;
  touch-action: none;
}
.fs-sizer__glass.is-drag { cursor: grabbing; transition: none; }
.fs-sizer__glass:focus-visible { box-shadow: 0 0 0 3px var(--green-500), 0 6px 14px rgba(0,0,0,.35); }
.fs-sizer__glass.is-over { box-shadow: 0 0 0 2px #E0892F, 0 6px 14px rgba(0,0,0,.35); }
.fs-sizer__glass::after {
  /* блик стекла */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 38%);
  pointer-events: none;
}
.fs-sizer__glass picture { position: static; inset: auto; display: block; width: 100%; height: 100%; }
.fs-sizer__portrait, .fs-sizer__glass img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; pointer-events: none; user-select: none; }
.fs-sizer__glass-label {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  color: #fff;
  background: rgba(20,24,26,.6);
  pointer-events: none;
}
/* Строки надписи под стеклом — условно, чтобы было видно, сколько места остаётся. */
.fs-sizer__text {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
/* Каждая планка — 23,8 % высоты блока: три строки по 0,0675 и два промежутка по 0,0405 ширины стелы (см. textStyle) */
.fs-sizer__text span { display: block; height: 23.8%; border-radius: 2px; background: rgba(236,232,223,.5); width: 100%; }
.fs-sizer__text span:nth-child(1) { width: 70%; }
.fs-sizer__text span:nth-child(3) { width: 45%; }
.fs-sizer__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.fs-sizer__note [data-lucide] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

/* ——— 6. Технологии: таблица не должна распирать страницу на телефоне ——— */
.fs-page .fs-tech .svc-stekla-compare__wrap { max-width: 100%; min-width: 0; }

/* ——— 7. Долговечность: четыре карточки в ряд и честная разница по технологиям ——— */
.fs-page .fs-durability .svc-stekla-why__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fs-page .fs-durability .svc-stekla-why__card { grid-column: auto; }
.fs-durability__diff {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-2, #eee);
}
.fs-durability__diff div { display: grid; grid-template-columns: 78px 1fr; gap: 8px; }
.fs-durability__diff dt { font-size: 12.5px; font-weight: 600; color: var(--green-700); }
.fs-durability__diff dd { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.fs-warranty {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.fs-warranty__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card, #fff);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.fs-warranty__item--accent { background: #EEF2EA; border-color: rgba(46,140,75,.18); color: var(--ink); font-weight: 600; }
.fs-warranty__ico {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--green-600);
  background: #fff;
}
.fs-warranty__ico [data-lucide] { width: 20px; height: 20px; }

/* ——— 9. Кнопка «Получить макет» под списком ——— */
.fs-center-cta { margin: 24px 0 0; text-align: center; }

/* ——— 12. Подставка: галочки зелёные (в «исправлении надписи» они оранжевые) ——— */
.fs-stand .svc-oform-fix__cases [data-lucide] { color: var(--green-600); }
.fs-stand__fits-title { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--ink); }

/* ——— 13. Сравнение: карточка текущей страницы ——— */
.fs-other--current { border-color: rgba(46,140,75,.35); box-shadow: 0 0 0 1px rgba(46,140,75,.2); }
.fs-other__here { display: inline-block; margin-top: 10px; font-size: 13.5px; color: var(--muted); }

/* ——— 14. Прайс: три колонки, цифры справа ——— */
.fs-pricelist td:nth-child(2),
.fs-pricelist th:nth-child(2) { text-align: right; padding-left: 16px; }
.fs-pricelist td:nth-child(2) { font-weight: 600; color: var(--ink); white-space: nowrap; }

/* ——— 15. Факторы цены отдельной секцией ——— */
.fs-cost .svc-memorial-pricing__factors { margin-top: 0; }
.fs-cost .svc-oform-finish__extra { margin: 16px 0 24px; }

/* ——— 16. Прочность ——— */
.fs-strength__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 28px;
  align-items: start;
}
.fs-strength__grid--no-media { grid-template-columns: 1fr; }
.fs-strength__grid--no-media .fs-strength__list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fs-strength__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fs-strength__point {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card, #fff);
}
.fs-strength__ico {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--green-600);
  background: var(--green-50);
}
.fs-strength__ico [data-lucide] { width: 20px; height: 20px; }
.fs-strength__name { font-size: 16px; font-weight: 600; color: var(--ink); }
.fs-strength__text { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.fs-page .fs-strength__media { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }

/* ——— 18. Срок изготовления крупно ——— */
.fs-term {
  margin: 24px 0 0;
  padding: 18px 20px;
  max-width: 420px;
  border-radius: 18px;
  background: #EEF2EA;
  border: 1px solid rgba(46,140,75,.14);
  text-align: left;
}
.fs-term__head { display: flex; align-items: center; gap: 10px; }
.fs-term__ico { color: var(--green-600); display: inline-flex; }
.fs-term__ico [data-lucide] { width: 24px; height: 24px; }
.fs-term__num { font-family: 'Lora', Georgia, serif; font-size: 26px; font-weight: 600; color: var(--green-700); line-height: 1.2; }
.fs-term__lead { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--ink); }
.fs-term__text { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

/* ——— 19. Квиз: размер картинками ——— */
.fs-quiz-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-quiz-final .quiz-mem-photos + .quiz-mem-photos,
.fs-quiz-final__note { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line, #E7E4DC); }
.fs-quiz-hint { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.fs-size-ico {
  position: relative;
  background: #2A2E30 !important;
  border-radius: 6px 6px 3px 3px !important;
  width: 30px !important;
  height: 40px !important;
}
.fs-size-ico__glass {
  position: absolute;
  left: 50%;
  top: 14%;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(135deg, #BFD6E4, #8FB3C9);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6);
}
.fs-size-ico--s .fs-size-ico__glass { width: 30%; height: 22%; }
.fs-size-ico--m .fs-size-ico__glass { width: 52%; height: 38%; }
.fs-size-ico--l .fs-size-ico__glass { width: 80%; height: 66%; top: 8%; }
.fs-size-ico--x .fs-size-ico__glass { width: 56%; height: 44%; border-radius: 50% 50% 3px 3px; }

/* ——— мобильные ——— */

/* Каталог заказов: кнопка «Показать все» под сеткой */
.fs-orders-more { display: flex; justify-content: center; margin-top: 20px; }

/* Галереи «Наши работы» и «Каталог заказов» на телефоне: 2 колонки вместо 3,
   подпись мельче и не заезжает под значок лупы в правом нижнем углу. */

/* Каталог заказов: «кирпичная» раскладка — превью целиком, без обрезки. Превью старого сайта маленькие
   (299×168 и 420×560), поэтому колонок столько, чтобы колонка была не шире превью. */
.fs-page #zakazy .fs-orders-grid { column-count: 5; column-gap: 12px; }
.fs-page #zakazy .fs-orders-item { display: block; width: 100%; margin: 0 0 12px; break-inside: avoid; aspect-ratio: auto; height: auto; }
.fs-page #zakazy .fs-orders-item img { display: block; width: 100%; height: auto; }

/* — 16а. Видео (Kinescope): карточки 16:9, название до двух строк, длительность на кадре — */
.fs-videos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fs-videos__card {
  display: flex; flex-direction: column; gap: 12px; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer; color: inherit; font: inherit; min-width: 0;
}
.fs-videos__media {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: #1b2022; box-shadow: 0 6px 20px rgba(20,24,26,.08);
}
.fs-videos__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.fs-videos__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 45%); }
.fs-videos__play {
  position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--green-700);
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .2s, background .2s;
}
.fs-videos__play svg { width: 24px; height: 24px; margin-left: 3px; fill: currentColor; }
.fs-videos__dur {
  position: absolute; right: 10px; bottom: 10px; z-index: 1; padding: 3px 8px; border-radius: 6px;
  background: rgba(0,0,0,.65); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.fs-videos__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--ink);
}
.fs-videos__card:hover .fs-videos__media img { transform: scale(1.04); }
.fs-videos__card:hover .fs-videos__play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.fs-videos__card:hover .fs-videos__title { color: var(--green-700); }
.fs-videos__card:focus-visible { outline: 2px solid var(--green-600); outline-offset: 4px; border-radius: 16px; }