/* ===================== ИЗОБРАЖЕНИЯ ДЛЯ ГРАВИРОВКИ =====================
   /oformlenie-pamyatnikov/izobrazheniya-gravirovki. Подключается через ViewData["CssPage"] и грузится
   после всех бандлов. Остальные блоки страницы — общие: svc-memorial-*, svc-oform-* (service.css).
   Здесь только своё: каталог разделов с кодами, сетка популярных рисунков с подборкой, «свой вариант»,
   схема подготовки, размер в квизе. Мобильные правила — в конце этого же файла. */

/* — 2. Разделы каталога: квадратные фото, код и количество вариантов поверх — */
.ig-cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ig-cat__pic { background: #000; }
.ig-cat__stub {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(236,232,223,.55);
}
.ig-cat__stub [data-lucide] { width: 64px; height: 64px; stroke-width: 1.2; }
.ig-cat__code,
.ig-cat__count {
  position: absolute;
  top: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1.2;
  z-index: 1;
}
.ig-cat__code { left: 12px; color: #fff; background: rgba(20,24,26,.62); letter-spacing: .02em; }
.ig-cat__count { right: 12px; color: var(--green-700); background: rgba(255,255,255,.92); font-weight: 600; }
.ig-cat .svc-mem-design-card__foot { grid-template-columns: auto 1fr; align-items: start; }
.ig-cat__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--green-700);
  text-decoration: none;
}
.ig-cat__more:hover { text-decoration: underline; }
.ig-cat__more [data-lucide] { width: 16px; height: 16px; }

/* — 3. Популярные рисунки: код, «В подборку», «Примерить» — */
.ig-pop__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.ig-pop__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: #fff;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ig-pop__card.is-picked { border-color: var(--green-500); box-shadow: 0 0 0 2px rgba(46,140,75,.18); }
.ig-pop__pic {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  overflow: hidden;
  cursor: zoom-in;
  background: #000;
}
.ig-pop__pic picture,
.ig-pop__pic picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ig-pop__pic--stub { cursor: default; display: grid; place-items: center; }
.ig-pop__stub-code {
  font-family: 'Lora', Georgia, serif;
  font-size: 30px;
  letter-spacing: .06em;
  color: rgba(236,232,223,.7);
}
.ig-pop__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 16px; flex: 1 1 auto; }
.ig-pop__code {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--green-700);
  background: var(--green-50);
}
.ig-pop__name { margin: 2px 0 8px; font-size: 16px; line-height: 1.3; color: var(--ink); }
.ig-pop__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.ig-pop__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ig-pop__btn [data-lucide] { width: 15px; height: 15px; flex-shrink: 0; }
.ig-pop__btn--pick { border: 1px solid var(--line); background: #fff; color: var(--ink-3); }
.ig-pop__btn--pick:hover { border-color: var(--green-500); color: var(--green-700); }
.ig-pop__btn--pick[aria-pressed="true"] { border-color: var(--green-600); color: var(--green-700); background: var(--green-50); }
.ig-pop__btn--pick[aria-pressed="true"] [data-lucide] { fill: currentColor; }
.ig-pop__btn--try { border: 1px solid var(--green-600); background: var(--green-600); color: #fff; }
.ig-pop__btn--try:hover, .ig-pop__btn--try:active, .ig-pop__btn--try:focus { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.ig-pop__btn--try:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }

.ig-picks {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px 18px;
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #EEF2EA;
  border: 1px solid rgba(46,140,75,.14);
}
.ig-picks__ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--green-600);
}
.ig-picks__ico [data-lucide] { width: 20px; height: 20px; fill: currentColor; }
.ig-picks__text { min-width: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.ig-picks__actions { display: flex; align-items: center; gap: 14px; }
.ig-picks__clear {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px dashed currentColor;
}

/* — 4. Пары «из каталога → на граните»: четыре пары, по две в ряд (сетка из общей секции) — */
.ig-pairs .svc-oform-pair__shot:first-child { background: #F7F5F0; }

/* — 6. Свой вариант: что можно прислать — */
.ig-own__lead { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--ink); }
.ig-own__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ig-own__list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 15px;
  color: var(--ink-2);
}
.ig-own__list [data-lucide] { width: 17px; height: 17px; color: var(--green-600); }

/* — 8. Стороны памятника: вертикальный кадр стелы и номер стороны — */
.ig-sides .ig-sides__pic { aspect-ratio: 4 / 5; }
.ig-sides__num {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--green-600);
  z-index: 1;
}

/* — 9. Подготовка: шесть пунктов вокруг готовой гравировки — */
.ig-prep__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.ig-prep__col { display: grid; gap: 14px; }
.ig-prep__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: #fff;
}
.ig-prep__ico {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--green-600);
  background: var(--green-50);
}
.ig-prep__ico [data-lucide] { width: 20px; height: 20px; }
.ig-prep__name { margin: 0 0 4px; font-size: 16.5px; line-height: 1.3; color: var(--ink); }
.ig-prep__text { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.ig-prep__center { margin: 0; }
.ig-prep__pic {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, #2A2E30 0%, #1B1E20 100%);
  box-shadow: 0 20px 40px -24px rgba(20,24,26,.45);
}
.ig-prep__pic--stub { display: grid; place-items: center; color: rgba(236,232,223,.5); }
.ig-prep__pic--stub [data-lucide] { width: 64px; height: 64px; stroke-width: 1.2; }
.ig-prep__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--green-700);
}
.ig-prep__caption [data-lucide] { width: 18px; height: 18px; }

/* — 11. Ссылка «Подробнее о технологии» под шагами — */
.ig-steps__more { margin: 22px 0 0; text-align: center; }
.ig-steps__more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--green-700);
  text-decoration: none;
  border-bottom: 1px dashed rgba(44,122,63,.4);
  padding-bottom: 2px;
}
.ig-steps__more [data-lucide] { width: 16px; height: 16px; }

/* — 12. Композиции: вертикальный кадр стелы — */
.ig-comps__pic.svc-mem-design-card__pic { aspect-ratio: 3 / 4; }

/* — 13. Стоимость: вместо цифр — текст, шрифт меньше — */
.svc-mem-price-card__price.ig-price__text { font-size: 21px; line-height: 1.25; }

.ig-inline-link { color: var(--green-700); text-decoration: underline; text-underline-offset: 2px; }

/* — 16. Квиз: размер картинкой — стела и светлое пятно рисунка — */
.ig-quiz .quiz-opt.ig-size-opt {
  grid-template-columns: 38px 1fr 22px;
  grid-template-areas: "ico lbl chk";
}
.ig-size {
  grid-area: ico;
  position: relative;
  width: 30px;
  height: 38px;
  justify-self: center;
  border-radius: 10px 10px 3px 3px;
  background: #2A2E30;
}
.ig-size__art {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: #D9D3C6;
}
.ig-size--small .ig-size__art { width: 8px; height: 8px; top: 70%; left: 70%; }
.ig-size--medium .ig-size__art { width: 14px; height: 14px; }
.ig-size--large .ig-size__art { width: 20px; height: 22px; }
.ig-size--full .ig-size__art { width: 26px; height: 32px; border-radius: 8px 8px 2px 2px; }
.ig-quiz__check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 15px;
  color: var(--ink-2);
  cursor: pointer;
}
.ig-quiz__check input { width: 18px; height: 18px; accent-color: var(--green-600); flex-shrink: 0; }

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


/* Imported engraving catalogue: whole artwork, a real grid and incremental loading. */
.ig-page .ig-pop__pic > img { display:block; width:100%; height:100%; object-fit:contain; padding:10px; background:#000; }
.ig-page .ig-cats .ig-cat__pic picture > img.cover { box-sizing:border-box; object-fit:contain; padding:32px 14px 14px; background:#000; }
.ig-cat__code { max-width:65%; font-size:11px; }
.ig-filter-count { font-size:11px; opacity:.75; margin-left:4px; }
.ig-catalog-tools { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:24px 0; }
.ig-catalog-search { display:grid; gap:8px; width:100%; max-width:480px; font-size:14px; }
.ig-catalog-search input { box-sizing:border-box; width:100%; min-width:0; border:1px solid var(--line); border-radius:12px; padding:12px 16px; font:inherit; background:#fff; color:var(--ink); }
.ig-catalog-search input:focus { outline:2px solid var(--green-600); outline-offset:2px; }
.ig-catalog-status { margin:0 0 12px; white-space:nowrap; color:var(--muted); }
.ig-catalog-more { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:28px; }
.ig-catalog-more p { margin:0; color:var(--muted); }
.ig-catalog-more button { padding:13px 24px; }
.ig-pop { scroll-margin-top:100px; }
.ig-image-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.ig-image-tag {
  appearance:none; border:1px solid #a9c7ad; border-radius:999px;
  background:#edf5ee; color:#225e32; padding:7px 12px;
  font:inherit; font-size:13px; line-height:1.3; cursor:pointer;
  text-align:left; white-space:normal;
}
.ig-image-tag:hover, .ig-image-tag:active { background:#28763a; border-color:#28763a; color:#fff; }
.ig-image-tag:focus-visible { outline:2px solid #28763a; outline-offset:3px; }
.ig-pop__body .ig-image-tags--card { margin:6px 0 12px; gap:6px; }
.ig-image-tags--card .ig-image-tag { max-width:100%; overflow-wrap:anywhere; }
.ig-catalog-tools { scroll-margin-top:100px; }
.ig-topic-links { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; margin:18px 0 8px; }
.ig-topic-links__label { font-size:14px; color:var(--muted); }
.ig-topic-link { appearance:none; border:0; background:transparent; color:var(--green-700); font:inherit; font-size:14px; line-height:1.4; padding:7px 0; cursor:pointer; text-align:left; text-decoration:underline; text-underline-offset:4px; }
.ig-topic-link.is-on { color:var(--ink); font-weight:700; text-decoration:none; }
.ig-topic-link:hover { color:var(--green-600); }
.ig-topic-link:focus-visible { outline:2px solid var(--green-600); outline-offset:3px; border-radius:3px; }
.ig-topic-link__count { font-size:12px; opacity:.7; margin-left:3px; }
.ig-topic-sort { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; }
.ig-pop .granit-lightbox__figure { min-width:0; max-height:calc(100dvh - 100px); overflow-y:auto; background:#000; }
.ig-pop .granit-lightbox .granit-lightbox__img {
  min-height:0; flex-shrink:0; max-width:100%; max-height:calc(100dvh - 300px); background:#000;
}
.ig-pop .granit-lightbox__meta,
.ig-pop .granit-lightbox__counter { background:#fff; }
.ig-pop .granit-lightbox__caption { min-width:0; }
@media (max-width:767px) {
  .ig-image-tags { gap:6px; margin-top:12px; }
  .ig-image-tag { padding:8px 11px; }
  .ig-pop .granit-lightbox__figure { width:100%; }
  .ig-pop .granit-lightbox .granit-lightbox__img { max-height:calc(100dvh - 370px); }
  .ig-pop .granit-lightbox .granit-lightbox__meta { grid-template-columns:minmax(0,1fr); gap:12px; padding:16px 16px 10px; }
  .ig-pop .granit-lightbox .granit-lightbox__cta { justify-self:stretch; justify-content:center; white-space:normal; }
}
@media(max-width:1199px) {
 .ig-page .ig-pop__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:767px) {
 .ig-page .ig-cats .ig-cats__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .ig-page .ig-cats .ig-cat { display:flex; flex-direction:column; align-items:stretch; padding:0; gap:0; }
 .ig-page .ig-cats .ig-cat .ig-cat__pic { width:100%; aspect-ratio:1; border-radius:0; }
 .ig-page .ig-cats .ig-cat .svc-mem-design-card__text { display:block; }
 .ig-page .ig-cat .svc-mem-design-card__foot { display:block; padding:12px; }
 .ig-cat .svc-mem-design-card__ico, .ig-cat .svc-mem-design-card__desc, .ig-cat__code { display:none; }
 .ig-page .ig-cat .svc-mem-design-card__name { font-size:16px; line-height:1.25; }
 .ig-cat__count { font-size:11px; top:8px; right:8px; }
 .ig-cat__more { font-size:12px; }
 .ig-page .ig-pop__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; overflow:visible; }
 .ig-pop__body { padding:10px; }
 .ig-pop__name { font-size:14px; }
 .ig-pop__actions { gap:6px; }
 .ig-pop__btn { padding:8px; font-size:12px; }
 .ig-catalog-tools { flex-direction:column; align-items:stretch; gap:12px; margin:18px 0; }
 .ig-catalog-status { margin:0; }
 .ig-page .svc-oform-filters { display:flex; flex-wrap:wrap; gap:6px; }
 .ig-page .svc-oform-filters__btn { font-size:12px; padding:8px 10px; }
 .ig-filter-count { display:none; }
}

.ig-catalog-tools .ig-catalog-search { flex:1; }