/* ===================== МЕТАЛЛИЧЕСКИЕ ОГРАДЫ =====================
   /ograda/metall. Подключается через ViewData["CssPage"] после бандлов,
   поэтому здесь только своё (классы om-*) и точечные правки общих блоков внутри .om-page.
   Общие блоки (svc-oform-*, svc-memorial-*, svc-stekla-*, svc-ready-showcase) — в bundles/service.css. */

.om-page .om-note,
.om-page .om-center { margin: 20px 0 0; font-size: 14px; color: var(--muted); }
.om-page .om-center { text-align: center; }
.om-note { display: flex; align-items: center; gap: 8px; }
.om-note [data-lucide] { width: 16px; height: 16px; color: var(--green-600); flex: 0 0 auto; }
.om-subtitle { margin: 28px 0 14px; font-size: 18px; font-weight: 700; color: var(--ink); }
.om-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(46,140,75,.1);
  color: var(--green-700);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}

/* ——— Схема ограды (каталог, высоты) — пока нет кадров ——————————— */
.om-fence-svg__ground { stroke: #b9c2bc; stroke-width: 2; }
.om-fence-svg__metal { fill: #2b2f31; }
.om-fence-svg--simple .om-fence-svg__metal { fill: #3a4043; }
.om-fence-svg__decor { fill: none; stroke: #2b2f31; stroke-width: 2.4; stroke-linecap: round; }
.om-fence-svg--classic .om-fence-svg__decor { fill: #2b2f31; stroke: none; }

/* ——— 2. Каталог ——————————————————————————————————————————————— */
.om-model { display: flex; flex-direction: column; }
.om-model .svc-ready-showcase__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.om-model__scheme {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(180deg, #eef2ef 0%, #e3e9e4 70%, #d7ded8 100%);
}
.om-model__scheme svg { position: static; width: 86%; height: auto; margin-bottom: 6%; }
.om-model .svc-ready-showcase__foot { margin-bottom: 14px; }
.om-model__btn { justify-content: center; margin-top: auto; }
.om-fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.om-fav [data-lucide] { width: 18px; height: 18px; }
.om-fav:hover { color: #c0392b; border-color: #e3b5ae; }
.om-fav.is-on { color: #c0392b; background: #fdf0ee; border-color: #e3b5ae; }
.om-fav.is-on svg { fill: currentColor; }

/* ——— 3. По эскизу ————————————————————————————————————————————— */
.om-custom__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 16px 0 22px;
}
.om-custom__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 700;
  color: var(--ink);
}
.om-custom__label [data-lucide] { width: 17px; height: 17px; color: var(--green-600); }
.om-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.om-chip {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  color: var(--ink-2);
}

/* ——— 5. Промо: размеры участка —————————————————————————————————— */
.om-dims__card {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #f4f8f5 0%, #fff 60%);
}
.om-dims__card:not(:has(.om-dims__pic)) { grid-template-columns: minmax(0, 1fr); }
.om-dims__pic { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.om-dims__body { min-width: 0; }
.om-dims__title { margin: 14px 0 8px; font-size: 28px; line-height: 1.2; color: var(--ink); }
.om-dims__text { margin: 0 0 18px; color: var(--ink-3); }
.om-dims__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.om-field { display: grid; gap: 6px; width: 120px; }
.om-field__label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.om-dims__x { padding-bottom: 14px; font-size: 20px; color: var(--muted); }
.om-dims__btn { margin-left: 8px; }
.om-dims__need {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 18px 0 14px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--ink-3);
}
.om-dims__need li { display: flex; align-items: center; gap: 6px; }
.om-dims__need [data-lucide] { width: 16px; height: 16px; color: var(--green-600); }
.om-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px dashed rgba(44,122,63,.4);
  color: var(--green-700);
  font-weight: 600;
  font-size: 14.5px;
}
.om-link [data-lucide] { width: 17px; height: 17px; }

/* ——— 7. Состав: снизу тоже четыре карточки ————————————————————— */
.svc-memorial-compose__parts--bottom.om-parts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ——— 8. Высоты: четыре карточки в ряд, схема вместо кадра ————————— */
.om-heights__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.om-heights__scheme {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(180deg, #eef2ef 0%, #e0e7e1 100%);
}
.om-heights__scheme svg { width: 90%; height: auto; margin-bottom: 4%; }
.om-heights__stone { fill: #8d9690; }

/* ——— 10. Цвета ———————————————————————————————————————————————— */
.om-colors {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.om-color {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: #fff;
}
.om-color__swatch {
  display: block;
  height: 56px;
  margin-bottom: 8px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
}
.om-color__name { font-weight: 700; color: var(--ink); }
.om-color__note { font-size: 13px; color: var(--muted); }
.om-coat__row .svc-oform-chain__item { flex: 1 1 0; }

/* ——— 11. Калитка ——————————————————————————————————————————————— */
.om-gate__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.om-gate__card {
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: #fff;
}
.om-gate__pic { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.om-gate__body { padding: 20px 22px 22px; }
.om-gate__name { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 20px; color: var(--ink); }
.om-gate__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(46,140,75,.1);
  color: var(--green-700);
}
.om-gate__ico [data-lucide] { width: 19px; height: 19px; }
.om-gate__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--ink-3); }
.om-gate__list li { display: flex; align-items: flex-start; gap: 8px; }
.om-gate__list [data-lucide] { width: 17px; height: 17px; margin-top: 3px; color: var(--green-600); flex: 0 0 auto; }
.om-spots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.om-spot {
  padding: 14px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: #fff;
  text-align: center;
}
.om-spot__plan { display: block; width: 100%; max-width: 140px; height: auto; margin: 0 auto 10px; }
.om-spot__line { fill: #f4f7f5; stroke: #2b2f31; stroke-width: 2.4; }
.om-spot__stone { fill: #8d9690; }
.om-spot__gap { stroke: #f4f7f5; stroke-width: 4; }
.om-spot__name { font-weight: 700; color: var(--ink); }
.om-spot__text { font-size: 13px; color: var(--muted); }

/* ——— 12. Цены: четыре тарифа ———————————————————————————————————— */
.om-page .om-pricing__tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ——— 13. Калькулятор ——————————————————————————————————————————— */
.om-calc__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 28px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
}
.om-calc__form { display: grid; gap: 22px; min-width: 0; }
.om-calc__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
.om-calc__label [data-lucide] { width: 17px; height: 17px; color: var(--green-600); }
.om-calc__dims { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.om-calc__perimeter { padding-bottom: 14px; color: var(--ink-3); }
.om-calc__perimeter b { color: var(--green-700); }
.om-calc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.om-calc__chip {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.om-calc__chip:hover { border-color: var(--green-500); color: var(--green-700); }
.om-calc__chip.is-on { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.om-calc__row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.om-calc__result {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: 18px;
  background: #f2f7f3;
}
.om-calc__result-label { font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.om-calc__price { font-family: 'Lora', Georgia, serif; font-size: 30px; font-weight: 600; line-height: 1.15; color: var(--green-700); }
.om-calc__lines { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--ink-3); }
.om-calc__lines li { display: flex; justify-content: space-between; gap: 10px; }
.om-calc__lines b { font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.om-calc__cta { justify-content: center; margin-top: auto; }
.om-calc__note { margin: 0; font-size: 12.5px; color: var(--muted); }

/* ——— 16. Установка: сетка 4×2 вместо ленты из пяти ——————————————— */
.om-install__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 16px;
}
.om-page .om-install__card { flex: none; max-width: none; }
.om-install__pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; }
.om-install .svc-granit-install__card-title { display: flex; align-items: center; gap: 8px; }
.om-install .svc-granit-install__card-title [data-lucide] { width: 18px; height: 18px; color: var(--green-600); flex: 0 0 auto; }
.om-install__card--extra {
  padding: 14px;
  border: 1px dashed var(--green-500);
  border-radius: 16px;
  background: #f4f8f5;
}

/* ——— 18. Квиз ——————————————————————————————————————————————————— */
.om-quiz-model {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-bottom: 14px;
  padding: 7px 10px 7px 12px;
  border-radius: 999px;
  background: rgba(46,140,75,.1);
  color: var(--green-700);
  font-size: 14px;
}
.om-quiz-model [data-lucide] { width: 16px; height: 16px; flex: 0 0 auto; }
.om-quiz-model button {
  border: 0;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}
.om-quiz-pics .om-quiz-pic { width: 76px; height: 52px; }
.om-quiz-svg { width: 100%; height: 100%; fill: currentColor; }
.om-quiz-svg__line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.om-quiz-svg__stone { fill: #9aa39d; }
.om-quiz-dims { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.om-quiz-perimeter { margin: 12px 0 0; color: var(--ink-3); }
.om-quiz-perimeter b { color: var(--green-700); }
.om-quiz-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.om-quiz-check input { width: 18px; height: 18px; accent-color: var(--green-600); }
.om-quiz-dims .quiz-mem-input:disabled { background: #f3f4f3; color: var(--muted); }

/* ——— Планшет ———————————————————————————————————————————————————— */

/* ——— Телефон ————————————————————————————————————————————————————— */