/* телефон: не подсвечивать всю карточку при тапе по кнопкам внутри */
*{-webkit-tap-highlight-color:transparent}
:root{--bg:#1a130c;--panel:#241a10;--ink:#f3ead9;--mut:#c9b79a;--gold:#c9a227;--line:#4a3826;--serif:Georgia,'Times New Roman',serif;--sans:system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.6}
.blk{padding:70px 0}.blk .w{max-width:1140px;margin:0 auto;padding:0 22px}
.sec-head{text-align:center;margin-bottom:34px}
.sec-head .kick{font:600 .82rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.sec-head h2{font:500 clamp(1.8rem,4vw,2.8rem) var(--serif);margin:0}
.alt{background:var(--panel)}
/* ── module.css всех модулей ── */
/* hero */
/* ── БЛОК OKF «Hero» v1 ── */
.hro {
  position: relative; min-height: 100svh; display: flex;
  align-items: center; justify-content: center; overflow: hidden;
  /* запасной тёмный фон: текст hero белый (#fff), и без фонового фото
     (bg:null) он оказывался «белым по белому» и пропадал. Теперь hero
     без картинки деградирует в читаемую тёмную панель. */
  background: var(--hro-fallback, #2b2115);
}
.hro-bg { position: absolute; inset: 0; z-index: 0; }
.hro-bg img { width: 100%; height: 100%; object-fit: cover; }
.hro-overlay { position: absolute; inset: 0; background: rgba(0,0,0,var(--hro-ov, 0.45)); z-index: 1; }
.hro-copy { position: relative; z-index: 2; text-align: var(--hro-align, center); padding: 24px; max-width: 640px; }
.hro-kicker { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hro-accent, #c9a227); margin: 0 0 12px; }
.hro-title { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 500; margin: 0 0 16px; color: #fff; line-height: 1.15; }
.hro-sub { font-size: 1.1rem; color: rgba(255,255,255,.85); margin: 0 0 28px; line-height: 1.6; }
.hro-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: var(--hro-align, center); }
.hro-btn {
  display: inline-block; padding: 12px 28px; border-radius: 8px;
  font-size: 1rem; font-weight: 600; text-decoration: none; transition: opacity .15s;
}
.hro-btn:hover { opacity: .85; }
.hro-btn.primary { background: var(--hro-accent, #c9a227); color: #fff; }
.hro-btn.ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
@media (max-width: 600px) {
  .hro { min-height: 85svh; }
  .hro-copy { padding: 16px; }
  .hro-title { font-size: 1.8rem; }
  .hro-sub { font-size: .95rem; }
}

/* gallery */
/* ── БЛОК OKF «Галерея-плеер» v1 (референс simplyrooms.nyc).
   Сверху большое фото (стрелки+точки НА снимке), снизу 3–4 миниатюры.
   Перекраска: --gly-*. --gly-thn = сколько миниатюр видно (3.3). */
.gly {
  --gly-acc: #8b5a2b;
  --gly-line: #e2dbcd;
  --gly-aspect: 4 / 3;
  --gly-thn: 3.3;
  max-width: 720px; margin: 0 auto;
}
.gly-stage {
  position: relative; overflow: hidden;
  aspect-ratio: var(--gly-aspect);
  border-radius: 16px; background: #eee;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.gly-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gly-prev, .gly-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.18); color: #fff; font-size: 1.5rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.gly-prev { left: 8px; }
.gly-next { right: 8px; }
.gly-prev:hover, .gly-next:hover { background: rgba(0,0,0,.35); }
.gly-dots {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
  display: flex; justify-content: center; gap: 7px;
}
.gly-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.55); cursor: pointer;
  box-shadow: 0 0 3px rgba(0,0,0,.4);
  transition: transform .15s, background .15s;
}
.gly-dot.on { background: #fff; transform: scale(1.3); }
/* точек много (10+) — ужимаются, не разъезжаются */
.gly-dots { flex-wrap: nowrap; max-width: 80%; margin: 0 auto; }
.gly-thumbs {
  display: flex; gap: 10px; margin-top: 12px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 6px; -webkit-overflow-scrolling: touch;
}
.gly-th {
  flex: 0 0 calc((100% - (var(--gly-thn) - 1) * 10px) / var(--gly-thn));
  aspect-ratio: 4 / 3; scroll-snap-align: start;
  border: 2px solid transparent; border-radius: 12px;
  padding: 0; overflow: hidden; cursor: pointer; background: #eee;
}
.gly-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gly-th.on { border-color: var(--gly-acc); }
/* лайтбокс */
.gly-lb {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(10, 8, 5, .94);
  display: flex; align-items: center; justify-content: center;
}
.gly-lb img { max-width: 96vw; max-height: 92vh; object-fit: contain; }
.gly-lb button {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.45);
  color: #fff; font-size: 1.4rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gly-lb-x { top: 14px; right: 14px; }
.gly-lb-p { left: 10px; top: 50%; transform: translateY(-50%); }
.gly-lb-n { right: 10px; top: 50%; transform: translateY(-50%); }

/* hotspots */
/* ── БЛОК OKF «Точки/полигоны на изображении» v1. НЕ токенами тем —
   настройками --hgb-stroke/--hgb-sw/--hgb-hit (владелец сам решает
   цвет и толщину обводки метки, независимо от темы сайта). */
.hgb {
  --hgb-stroke: #00ff00;
  --hgb-sw: 2px;
  --hgb-hit: 44px;
  max-width: 640px; margin: 0 auto;
}
.hgb-ctl { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 6px; }
.hgb-mode {
  position: absolute; z-index: 3; top: 10px; left: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.2); cursor: pointer;
}
.hgb-ctl button {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15); background: #fff;
  color: #333; font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.hgb-ctl button:hover { border-color: var(--hgb-stroke); color: var(--hgb-stroke); }
.hgb-wrap { position: relative; overflow: hidden; border-radius: 14px; }
.hgb-stage {
  position: relative; transform-origin: center center; transition: transform .15s;
}
.hgb-img {
  width: 100%; height: auto; display: block;
  aspect-ratio: var(--hgb-aspect, auto);
  -webkit-user-drag: none; pointer-events: none;
}
.hgb-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hgb-svg-hit .hgb-hit { pointer-events: auto; cursor: pointer; }
.hgb-hit {
  fill: transparent; stroke: transparent;
  stroke-width: var(--hgb-hit); vector-effect: non-scaling-stroke;
}
/* :focus без -visible ловим отдельно и гасим — иначе в части браузеров
   обычный клик мышью тоже ставит :focus, и вылезает ДЕФОЛТНЫЙ чёрный
   квадратный контур браузера (по невидимой 44px-зоне хвата --hgb-hit,
   а не по видимому кружку — отсюда и квадрат вместо круга). */
.hgb-hit:focus { outline: none; }
.hgb-hit:focus-visible { outline: 2px dashed var(--hgb-stroke); outline-offset: 2px; }
.hgb-vis {
  fill: rgba(0,0,0,0.001);           /* полигон целиком «нажимаем» глазами тоже */
  stroke: var(--hgb-stroke); stroke-width: var(--hgb-sw);
  vector-effect: non-scaling-stroke;
  transition: stroke-width .15s, filter .15s;
}
.hgb-pulse .hgb-vis { animation: hgb-breathe 3s ease-in-out infinite; }
.hgb-vis.on { stroke-width: calc(var(--hgb-sw) * 1.3); animation: none; }
@keyframes hgb-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hgb-pulse .hgb-vis { animation: none; } }
.hgb-caption {
  margin-top: 10px; padding: 12px 14px;
  border: 1px solid #e2dbcd; border-radius: 12px; background: #fbf8f2;
  font-size: .92rem; line-height: 1.6; color: #2b2115;
}
.hgb-caption b { display: block; margin-bottom: 4px; color: var(--hgb-stroke); }

/* ══════════════════════════════════════════════════════════════════
   12 ТИПОВ ПОДСКАЗКИ (popup) — владелец выбирает per-метка в picker.
   below/caption — уже стилизован выше. Остальные 11 — здесь.
   ══════════════════════════════════════════════════════════════════ */

/* 2. TOAST */
.hgb-toast { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%,10px); z-index: 6;
  background: #1e1a14; color: #fff; padding: 9px 16px; border-radius: 999px; font-size: .82rem;
  white-space: nowrap; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
  max-width: 88%; overflow: hidden; text-overflow: ellipsis; }
.hgb-toast.on { opacity: 1; transform: translate(-50%,0); pointer-events: auto; }

/* 3. HOVER */
.hgb-tip-hover { position: absolute; z-index: 6; pointer-events: none; max-width: 190px;
  background: var(--hgb-stroke); color: #fff; padding: 8px 12px; border-radius: 10px;
  font-size: .82rem; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.hgb-tip-hover.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.hgb-tip-hover b { display: block; margin-bottom: 2px; }

/* 4. LEFT */
.hgb-tip-left { position: absolute; z-index: 6; pointer-events: none;
  background: #fff; border: 2px solid var(--hgb-stroke); color: #2b2115;
  padding: 10px 14px; border-radius: 10px; font-size: .82rem; max-width: 220px;
  box-shadow: 0 4px 14px rgba(0,0,0,.2); opacity: 0; transform: translateX(6px);
  transition: opacity .18s, transform .18s; }
.hgb-tip-left.on { opacity: 1; transform: translateX(0); pointer-events: auto; }
.hgb-tip-left b { display: block; margin-bottom: 4px; color: var(--hgb-stroke); }

/* 5. CARD (модалка с фото) */
.hgb-scrim { position: fixed; inset: 0; background: rgba(10,8,5,.5); z-index: 45; opacity: 0; pointer-events: none; transition: opacity .2s; }
.hgb-scrim.on { opacity: 1; pointer-events: auto; }
.hgb-card { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.94); z-index: 50;
  background: #fff; border-radius: 16px; overflow: hidden; max-width: 420px; width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.hgb-card.on { opacity: 1; transform: translate(-50%,-50%) scale(1); pointer-events: auto; }
.hgb-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.hgb-card-body { padding: 16px 18px; }
.hgb-card-body h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--hgb-stroke); }
.hgb-card-body p { margin: 0; font-size: .88rem; line-height: 1.6; color: #6b6156; }
.hgb-card-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 1.1rem; cursor: pointer; }

/* 6. LENS (лупа) */
.hgb-lens { position: absolute; width: 130px; height: 130px; border-radius: 50%; z-index: 6;
  border: 3px solid #fff; box-shadow: 0 4px 18px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.1);
  background-repeat: no-repeat; opacity: 0; pointer-events: none; transition: opacity .15s; }
.hgb-lens.on { opacity: 1; }

/* 7. CALLOUT (выноска-линия) */
.hgb-callout { position: absolute; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .18s; }
.hgb-callout.on { opacity: 1; pointer-events: auto; }
.hgb-callout svg { position: absolute; overflow: visible; }
.hgb-callout-box { position: absolute; background: #fff; border: 1.5px solid var(--cc, var(--hgb-stroke));
  border-radius: 10px; padding: 8px 12px; font-size: .8rem; max-width: 190px; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.hgb-callout-box b { display: block; color: var(--cc, var(--hgb-stroke)); margin-bottom: 2px; }

/* 8. DRAWER (боковая панель) */
.hgb-drawer { position: fixed; top: 0; right: 0; width: 300px; max-width: 88vw; height: 100%; z-index: 50;
  background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,.25);
  transform: translateX(105%); transition: transform .25s ease; display: flex; flex-direction: column; }
.hgb-drawer.on { transform: translateX(0); }
.hgb-dr-head { padding: 16px 18px; border-bottom: 1px solid #e2dbcd; display: flex; justify-content: space-between; align-items: center; }
.hgb-dr-head h3 { margin: 0; font-size: 1rem; }
.hgb-dr-body { padding: 16px 18px; font-size: .88rem; line-height: 1.6; color: #6b6156; flex: 1; }
.hgb-dr-nav { padding: 14px 18px; border-top: 1px solid #e2dbcd; display: flex; justify-content: space-between; }
.hgb-drawer button { border: 1px solid #e2dbcd; background: #fff; border-radius: 8px; padding: 7px 12px; font-size: .82rem; cursor: pointer; }
.hgb-dr-x { border: 0 !important; background: none !important; font-size: 1.2rem !important; }

/* 9. STORY (полноэкранная история) */
.hgb-story { position: fixed; inset: 0; z-index: 60; background: #000; display: none; flex-direction: column; }
.hgb-story.on { display: flex; }
.hgb-story-prog { display: flex; gap: 4px; padding: 10px 12px 0; }
.hgb-story-prog i { flex: 1; height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.hgb-story-prog i b { display: block; height: 100%; width: 0; background: #fff; }
.hgb-story-prog i.done b { width: 100%; }
.hgb-story-prog i.active b { width: 100%; transition: width 3.5s linear; }
.hgb-story-img { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.hgb-story-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hgb-story-text { padding: 18px 20px 28px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.hgb-story-text b { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.hgb-story-text p { margin: 0; font-size: .88rem; opacity: .9; line-height: 1.5; }
.hgb-story-tap { position: absolute; top: 0; bottom: 0; width: 35%; z-index: 2; cursor: pointer; }
.hgb-story-tap.l { left: 0; } .hgb-story-tap.r { right: 0; }
.hgb-story-x { position: absolute; top: 14px; right: 14px; z-index: 5; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.2); color: #fff; font-size: 1.1rem; cursor: pointer; }

/* 10. SHEET (bottom sheet) */
.hgb-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,.25); transform: translateY(105%); transition: transform .25s ease;
  max-height: 46vh; display: flex; flex-direction: column; }
.hgb-sheet.on { transform: translateY(0); }
.hgb-sheet-handle { width: 40px; height: 4px; background: #e2dbcd; border-radius: 3px; margin: 10px auto 4px; }
.hgb-sheet-body { padding: 6px 20px 26px; overflow-y: auto; }
.hgb-sheet-body h3 { margin: 6px 0 8px; font-size: 1.05rem; }
.hgb-sheet-body p { margin: 0; font-size: .88rem; line-height: 1.6; color: #6b6156; }

/* 11. ACCORDION (список под фото) */
.hgb-acclist { margin-top: 16px; border-top: 1px solid #e2dbcd; }
.hgb-acc-it { border-bottom: 1px solid #e2dbcd; }
.hgb-acc-it summary { padding: 12px 4px; cursor: pointer; font-size: .88rem; list-style: none; }
.hgb-acc-it summary::-webkit-details-marker { display: none; }
.hgb-acc-it p { margin: 0 0 12px; padding: 0 4px; font-size: .82rem; color: #6b6156; line-height: 1.6; }
.hgb-acc-it.flash { background: #fff7e0; }

/* подпись под лупой — какая именно деталь приближена */
.hgb-lens-cap { position: absolute; left: 0; right: 0; bottom: -26px; text-align: center;
  font-size: .72rem; color: #2b2115; background: #fff; border-radius: 999px; padding: 2px 8px;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
/* своё фото в боковой панели */
.hgb-dr-body img { width: 100%; border-radius: 10px; margin-bottom: 12px; display: block; }

/* 13. LABEL (постоянная подпись без клика, как на карте) */
.hgb-label-tag { position: absolute; transform: translate(8px, -50%); z-index: 4; pointer-events: none;
  background: #fff; border: 1.5px solid var(--lc, var(--hgb-stroke)); color: #2b2115;
  font-size: .72rem; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.15); }

/* 14. SPOTLIGHT (гасим всё, кроме метки; подпись в углу экрана) */
.hgb-spot { position: fixed; inset: 0; z-index: 48; opacity: 0; pointer-events: none; transition: opacity .25s;
  background: radial-gradient(circle 90px at var(--sx,50%) var(--sy,50%), transparent 0%, transparent 60%, rgba(0,0,0,.78) 100%); }
.hgb-spot.on { opacity: 1; pointer-events: auto; }
.hgb-spot-cap { position: absolute; top: 20px; right: 20px; max-width: 260px;
  background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.hgb-spot-cap b { display: block; margin-bottom: 6px; color: var(--hgb-stroke); font-size: 1rem; }
.hgb-spot-cap p { margin: 0; font-size: .85rem; color: #6b6156; line-height: 1.5; }

/* 12. RADIAL (лучевое меню) */
.hgb-radial { position: absolute; z-index: 6; }
.hgb-rm-item { position: absolute; width: 38px; height: 38px; border-radius: 50%; background: #fff;
  border: 1.5px solid #e2dbcd; display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  box-shadow: 0 3px 10px rgba(0,0,0,.2); cursor: pointer; opacity: 0; transform: scale(.3);
  transition: opacity .18s, transform .18s; }
.hgb-radial.on .hgb-rm-item { opacity: 1; transform: scale(1); }

/* reviews */
/* ── БЛОК OKF «Отзывы» v1: тихо, без звёзд. Перекраска: --rvw-*. */
.rvw {
  --rvw-ink: #2b2115;
  --rvw-mut: #8a7f70;
  --rvw-acc: #8b5a2b;
  --rvw-line: #e2dbcd;
  --rvw-bg: #fbf8f2;
  max-width: 720px; margin: 0 auto; padding: 8px 0;
}
.rvw-title {
  font-size: 1.4rem; font-weight: 500; color: var(--rvw-acc);
  margin: 0 0 16px; text-align: center;
}
.rvw-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.rvw-it {
  margin: 0; padding: 16px 18px;
  background: var(--rvw-bg); border: 1px solid var(--rvw-line);
  border-radius: 14px;
}
.rvw-it blockquote {
  margin: 0; font-size: .95rem; line-height: 1.65; color: var(--rvw-ink);
  font-style: italic;
}
.rvw-it blockquote::before { content: '« '; color: var(--rvw-acc); }
.rvw-it blockquote::after  { content: ' »'; color: var(--rvw-acc); }
.rvw-it figcaption { margin-top: 10px; font-size: .8rem; color: var(--rvw-mut); }
@media (min-width: 700px) { .rvw-grid { grid-template-columns: 1fr 1fr; } }

/* faq */
/* ── БЛОК OKF «ЧаВо» v1. Перекраска: --faq-*. */
.faq {
  --faq-ink: #2b2115;
  --faq-mut: #6b6156;
  --faq-acc: #8b5a2b;
  --faq-line: #e2dbcd;
  max-width: 640px; margin: 0 auto; padding: 8px 0;
}
.faq-title {
  font-size: 1.4rem; font-weight: 500; color: var(--faq-acc);
  margin: 0 0 12px; text-align: center;
}
.faq-it { border-bottom: 1px solid var(--faq-line); }
.faq-it summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 2px; cursor: pointer; list-style: none;
  font-size: .98rem; font-weight: 500; color: var(--faq-ink);
}
.faq-it summary::-webkit-details-marker { display: none; }
.faq-it summary:hover { color: var(--faq-acc); }
.faq-car { font-style: normal; color: var(--faq-mut); transition: transform .2s; font-size: .8rem; }
.faq-it[open] .faq-car { transform: rotate(180deg); }
.faq-it[open] summary { color: var(--faq-acc); }
.faq-a { padding: 0 2px 16px; }
.faq-a p { margin: 0 0 .7em; font-size: .92rem; line-height: 1.7; color: var(--faq-mut); }
@media (max-width: 480px) { .faq-it summary { padding: 16px 2px; } }  /* палец */

/* order_cta */
/* ── БЛОК OKF «Кнопки заказа» v1: фирменные цвета мессенджеров. */
.oct { max-width: 560px; margin: 0 auto; }
.oct-row { display: flex; flex-wrap: wrap; gap: 10px; }
.oct-btn {
  flex: 1 1 160px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 16px; border-radius: 999px;
  font-size: .92rem; font-weight: 600; letter-spacing: .03em;
  text-decoration: none; color: #fff; position: relative;
  transition: transform .15s, opacity .2s;
}
.oct-btn:hover { transform: translateY(-1px); }
.oct-wa   { background: #25D366; }
.oct-tg   { background: #229ED9; }
.oct-chat { background: #6b5a3a; }
.oct-btn.soon { opacity: .55; cursor: default; pointer-events: none; }
.oct-soon {
  position: absolute; top: -7px; right: 12px;
  background: #fff; color: #8a7f70; font-style: normal;
  font-size: .62rem; padding: 1px 8px; border-radius: 999px;
  border: 1px solid #d9d2c5; letter-spacing: .06em;
}
.oct.locked .oct-row { opacity: .4; pointer-events: none; }
.oct-code {
  display: block; margin-top: 10px; padding: 8px 12px;
  background: rgba(0,0,0,.05); border-radius: 8px;
  font-size: .82rem; color: #6b6156; text-align: center;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) { .oct-btn { flex-basis: 100%; } }  /* столбик в палец */

/* footer */
/* ── БЛОК OKF «Подвал» v1 (референс delo.cl) ─────────────────────────
   Самодостаточен: Tailwind переписан руками, внешних шрифтов и иконок
   нет. Перекраска снаружи: --fdl-bg1, --fdl-bg2, --fdl-accent. */
.fdl {
  --fdl-bg1: #1f2937;          /* footer-start delo.cl */
  --fdl-bg2: #111827;          /* footer-end delo.cl */
  --fdl-ink: #fff;
  --fdl-mut: #9ca3af;          /* gray-400 */
  --fdl-dim: #6b7280;          /* gray-500 */
  --fdl-line: #1f2937;         /* gray-800 для нижней черты */
  --fdl-accent: #fb7e0c;       /* delo-orange (hover ссылок) */
  background: linear-gradient(to right, var(--fdl-bg1), var(--fdl-bg2));
  color: var(--fdl-ink);
  padding: 80px 0;
  font-family: inherit;
  line-height: 1.6;
}
.fdl-wrap { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.fdl-grid { display: grid; grid-template-columns: 1fr; gap: 44px; text-align: center; }
.fdl-main { grid-column: auto; }
.fdl-logo { font-size: 1.9rem; font-weight: 700; margin: 0 0 16px; letter-spacing: .01em; }
.fdl-company { margin-bottom: 40px; }
.fdl-company p { margin: 0 0 8px; }
.fdl-name { color: var(--fdl-ink); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: -.02em; }
.fdl-id { color: var(--fdl-mut); font-size: .875rem; font-family: ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.fdl-addr { color: var(--fdl-mut); font-size: .75rem; margin-top: 8px; }
.fdl-socs { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.fdl-soc {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 10px 15px -3px rgba(0,0,0,.3);
  transition: transform .3s ease; text-decoration: none;
}
.fdl-soc:hover { transform: scale(1.15); }
.fdl-col h4 {
  font-size: 1.05rem; font-weight: 600; margin: 0 0 30px;
  display: inline-block; padding-bottom: 8px;
  border-bottom: 1px solid #374151;          /* gray-700 */
  text-transform: uppercase; letter-spacing: .08em;
}
.fdl-col ul { list-style: none; margin: 0; padding: 0; }
.fdl-col li { margin-bottom: 16px; }
.fdl-col a {
  color: var(--fdl-mut); font-size: .875rem; font-weight: 500;
  text-decoration: none; transition: color .2s;
  display: inline-flex; align-items: center; gap: 10px;
}
.fdl-col a:hover { color: var(--fdl-accent); }
.fdl-phone { padding-top: 16px; }
.fdl-phone a { color: #25D366; font-weight: 700; font-size: 1.1rem; }
.fdl-phone a:hover { color: #4ade80; }
.fdl-copy {
  border-top: 1px solid var(--fdl-line);
  margin-top: 80px; padding-top: 40px;
  text-align: center; color: var(--fdl-dim);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .2em; line-height: 2;
}
.fdl-copy p { margin: 0; }
/* ≥768px — сетка оригинала: логотип-блок в две колонки + колонки ссылок */
@media (min-width: 768px) {
  .fdl-grid { grid-template-columns: 2fr 1fr 1fr; gap: 64px; text-align: left; }
  .fdl-socs { justify-content: flex-start; }
}

/* ── БЛОК OKF «Вьювер 360 + фотолента» v1 (module.css из C:\OKF\blocks\viewer360\v1) ── */
.v3g {
  --v3g-bg: #f6f2ea;
  --v3g-ink: #2b2115;
  --v3g-acc: #8b5a2b;
  --v3g-aspect: 4 / 5;
  max-width: 720px; margin: 0 auto;
}
.v3g-stage {
  position: relative; overflow: hidden;
  aspect-ratio: var(--v3g-aspect);
  background: var(--v3g-bg); border-radius: 14px;
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.v3g-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transform-origin: center center; pointer-events: none;
}
.v3g-stage button {
  position: absolute; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15); background: rgba(255,255,255,.88);
  color: var(--v3g-ink); font-size: 1.15rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.v3g-stage button:hover { border-color: var(--v3g-acc); color: var(--v3g-acc); }
.v3g-zoomctl { position: absolute; right: 10px; top: 10px; z-index: 2; display: flex; flex-direction: column; gap: 8px; }
.v3g-zoomctl button { position: static; }
.v3g-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.v3g-next { right: 8px; top: 50%; transform: translateY(-50%); }
.v3g-count {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  font-size: .75rem; color: var(--v3g-ink); opacity: .7;
  font-variant-numeric: tabular-nums;
}
.v3g-thumbs {
  display: flex; gap: 8px; margin-top: 10px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 6px; -webkit-overflow-scrolling: touch;
}
.v3g-th {
  flex: 0 0 calc((100% - 7 * 8px) / 8);
  aspect-ratio: 1 / 1; scroll-snap-align: start;
  border: 1px solid rgba(0,0,0,.15); border-radius: 10px;
  background: var(--v3g-bg); padding: 0; overflow: hidden; cursor: pointer;
}
.v3g-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3g-th.on { border-color: var(--v3g-acc); box-shadow: 0 0 0 1px var(--v3g-acc); }
.v3g-th360 { font-size: .8rem; color: var(--v3g-acc); font-weight: 600; }
@media (max-width: 560px) {
  .v3g-th { flex-basis: calc((100% - 4.5 * 8px) / 5.5); }
  .v3g-stage button { width: 44px; height: 44px; }
}
.v3g-lb {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(10, 8, 5, .94);
  display: flex; align-items: center; justify-content: center;
}
.v3g-lb img { max-width: 96vw; max-height: 92vh; object-fit: contain; }
.v3g-lb button {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.45);
  color: #fff; font-size: 1.4rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.v3g-lb-x { top: 14px; right: 14px; }
.v3g-lb-p { left: 10px; top: 50%; transform: translateY(-50%); }
.v3g-lb-n { right: 10px; top: 50%; transform: translateY(-50%); }

/* перекраска модулей под тему kashtan */
.rvw,.faq{--rvw-bg:transparent}
.hgb{--hgb-stroke:#c9a227}
/* голос владельца 2026-07-06: отзывы и FAQ сливались с тёмным фоном —
   светлые чернила, золотой акцент, тёмные карточки */
.rvw{--rvw-ink:#f3ead9;--rvw-mut:#c9b79a;--rvw-acc:#c9a227;--rvw-line:#4a3826;--rvw-bg:#1f1710}
/* голос 2026-07-06: на мобильном отзывы — лента со свайпом, один на экран */
@media (max-width:699px){
  .rvw-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .rvw-it{flex:0 0 92%;scroll-snap-align:center}
}
.faq{--faq-ink:#f3ead9;--faq-mut:#c9b79a;--faq-acc:#c9a227;--faq-line:#4a3826}
/* «Заказать» на карточке: еле заметная, золото при наведении (голос 2026-07-06) */
.card-order{display:inline-block;margin-top:10px;background:transparent;color:#8a7a5c;
  border:1px solid #4a3826;font-weight:700;text-decoration:none;border-radius:999px;
  padding:7px 20px;font-size:.9rem;transition:all .2s}
.card-order:hover{background:#c9a227;border-color:#c9a227;color:#1a130c}
/* скрыть полосы прокрутки у лент (свайп работает, полосы не видно) */
.v3g-thumbs,.rvw-grid,#m-neighbors,.gly-thumbs{scrollbar-width:none}
.v3g-thumbs::-webkit-scrollbar,.rvw-grid::-webkit-scrollbar,#m-neighbors::-webkit-scrollbar,.gly-thumbs::-webkit-scrollbar{display:none}
/* v3g под kashtan: тёмная сцена, золотой акцент */
.v3g{--v3g-bg:#241a10;--v3g-ink:#f3ead9;--v3g-acc:#c9a227}
.v3g-th,.v3g-stage{border:1px solid #4a3826}
/* голос владельца 2026-07-06: кнопки +/− и ‹ › видны сразу (золото на тёмном),
   при нажатии — светло-зелёная вспышка, чтобы было видно, что нажал */
.v3g-stage button{background:rgba(26,19,12,.72);border-color:#c9a227;color:#c9a227}
.v3g-stage button:hover{border-color:#e2c15a;color:#e2c15a}
.v3g-stage button:active{background:#c9a227;border-color:#c9a227;color:#1a130c;transition:none}
/* голос владельца 2026-07-06: заголовок карточки святыни — не в цвет кольца,
   а нейтральный тёмно-коричневый (кольцо цветное — текст нет) */
.hgb-card-body h3{color:#2b2115}
/* голос владельца 2026-07-06:
   1) контент hero (заголовок + кнопки) — чуть ниже;
   2) фон hero — вниз на ~75px: обрезались голова Иисуса и медальоны. */
/* текст и кнопки — к нижнему краю hero, чтобы не перекрывать Лик и крест */
.hro{align-items:flex-end}
.hro-copy{transform:none;padding-bottom:4vh}
/* крест «дальше»: фото целиком, без обрезки (contain), по бокам тёмные поля;
   петелька — под верх; чуть выше и чуть крупнее (голос 2026-07-06) */
.hro-bg img{object-fit:contain;object-position:50% 0;transform:translateY(-8vh) scale(1.05);transform-origin:50% 0}
/* плотнее: «Крест Афонский» ближе к «Ручная работа мастеров» */
.hro-title{margin-bottom:6px !important}
.hro-sub{margin-bottom:20px !important}
/* меньше пустого места между hero и «Изделия / Наши кресты» */
#prods{padding-top:30px}
/* голос 2026-07-06: плашки — на ПК сетка, на телефоне лента со свайпом */
@media (max-width:699px){
#m-neighbors{display:flex !important;grid-template-columns:none !important;overflow-x:auto;
  scroll-snap-type:x proximity;padding-bottom:10px;-webkit-overflow-scrolling:touch}
#m-neighbors>a,#m-neighbors>div{flex:0 0 78vw;scroll-snap-align:center}
}
/* названия в 2 строки максимум — карточки не съезжают («Трёхсоставной» длинный) */
#m-neighbors img+div{min-height:2.8em;display:flex;align-items:center;justify-content:center}
.qty-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}
.qty-row button{width:28px;height:28px;border-radius:50%;border:1px solid #4a3826;
  background:transparent;color:#8a7a5c;font-size:.95rem;cursor:pointer;line-height:1;transition:all .2s}
.qty-row button:hover{border-color:#c9a227;color:#c9a227}
/* ценник приглушён, как кнопка (голос 2026-07-06) */
.qty-row div{color:#8a7a5c !important;font-weight:600}
.qty-row button:active{background:#c9a227;border-color:#c9a227;color:#1a130c}
.qty-row .qty-n{min-width:22px;font-weight:700;color:#f3ead9;font-variant-numeric:tabular-nums}
#order-bar{position:fixed;left:50%;transform:translateX(-50%) translateY(150%);bottom:14px;z-index:90;
  display:flex;align-items:center;gap:14px;background:rgba(26,19,12,.94);border:1px solid #c9a227;
  border-radius:999px;padding:10px 10px 10px 20px;transition:transform .25s;max-width:94vw}
#order-bar.on{transform:translateX(-50%) translateY(0)}
#order-bar .ob-txt{font-size:.9rem;color:#f3ead9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#order-bar a{background:#c9a227;color:#1a130c;font-weight:700;text-decoration:none;
  border-radius:999px;padding:9px 18px;white-space:nowrap}

/* ── БЛОК OKF «Переключатель языков» v1 (module.css из C:\OKF\blocks\langswitch\v1) ── */
.lsw {
  --lsw-bg: #fff;
  --lsw-ink: #2b2115;
  --lsw-mut: #8a7f70;
  --lsw-acc: #8b5a2b;
  --lsw-line: #d9d2c5;
  position: relative; display: inline-block;
  font-style: normal;
}
.lsw-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--lsw-line); background: var(--lsw-bg);
  color: var(--lsw-ink); font-size: .82rem; letter-spacing: .08em;
  cursor: pointer;
}
.lsw-btn:hover { border-color: var(--lsw-acc); color: var(--lsw-acc); }
.lsw-car { font-size: .6rem; opacity: .6; }
.lsw-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  min-width: 180px; max-height: 60vh; overflow-y: auto;
  background: var(--lsw-bg); border: 1px solid var(--lsw-line);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.14);
  display: none; padding: 6px;
}
.lsw-menu.open { display: block; }
.lsw-it {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 9px 12px;
  border: 0; background: none; border-radius: 8px;
  color: var(--lsw-ink); font-size: .92rem; cursor: pointer;
  font-style: normal;
}
.lsw-it:hover { background: rgba(0,0,0,.05); color: var(--lsw-acc); }
.lsw-it.on { color: var(--lsw-acc); font-weight: 600; }
.lsw-it.draft .lsw-name { color: var(--lsw-mut); }
.lsw-note { font-size: .68rem; color: var(--lsw-mut); font-style: normal; white-space: nowrap; }
@media (max-width: 560px) {
  .lsw-it { padding: 12px 12px; }
}
/* голос владельца 2026-07-06: языки в правом верхнем углу, поверх hero;
   перекраска под kashtan (тёмная кнопка, золотой акцент) */
#m-lang{position:fixed;top:14px;right:16px;z-index:100}
#m-lang .lsw{--lsw-bg:rgba(26,19,12,.78);--lsw-ink:#f3ead9;--lsw-mut:#c9b79a;--lsw-acc:#c9a227;--lsw-line:#4a3826}
#m-lang .lsw-btn{backdrop-filter:blur(4px)}
#m-lang .lsw-it:hover{background:rgba(255,255,255,.08)}
/* тихая плашка «перевод в работе» */
.lsw-toast{position:fixed;top:60px;right:16px;z-index:100;background:rgba(26,19,12,.92);
  color:#f3ead9;border:1px solid #4a3826;border-radius:10px;padding:10px 14px;
  font-size:.85rem;opacity:0;transition:opacity .3s;pointer-events:none}
.lsw-toast.show{opacity:1}

/* ── БЛОК OKF «Видео-Short» v1: вертикаль 9:16, 2/3 экрана телефона.
   Перекраска: --vsh-bg1, --vsh-bg2, --vsh-acc. */
.vsh {
  --vsh-bg1: #2b2115;
  --vsh-bg2: #6b4a26;
  --vsh-acc: #f0e6d6;
  position: relative; overflow: hidden; cursor: pointer;
  aspect-ratio: 9 / 16;
  height: 66vh; max-height: 660px; max-width: 92vw;
  margin: 0 auto; border-radius: 16px; background: #000;
}
.vsh-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.vsh-ph {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, var(--vsh-bg1), var(--vsh-bg2));
}
.vsh-play {
  position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.18);
  color: var(--vsh-acc); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.vsh-play span {
  width: 68px; height: 68px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; padding-left: 5px;
  transition: transform .25s;
}
.vsh:hover .vsh-play span { transform: scale(1.1); }
.vsh-title { font-size: .95rem; font-weight: 500; text-shadow: 0 1px 6px rgba(0,0,0,.6); padding: 0 18px; }
.vsh.on iframe { width: 100%; height: 100%; border: 0; display: block; }

/* загрузка после клика: кольцо-спиннер на кнопке */
.vsh.loading .vsh-play span{font-size:0;padding:0;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:vshspin .8s linear infinite}
@keyframes vshspin{to{transform:rotate(360deg)}}

/* ── БЛОК OKF «Видео YouTube 16:9» v1. Перекраска: --vyt-*. */
.vyt {
  --vyt-bg1: #2b2115;
  --vyt-bg2: #6b4a26;
  --vyt-acc: #f0e6d6;
  position: relative; overflow: hidden; cursor: pointer;
  aspect-ratio: 16 / 9;
  width: 100%; max-width: 720px;
  margin: 0 auto; border-radius: 14px; background: #000;
}
.vyt video, .vyt.on iframe { width: 100%; height: 100%; border: 0; display: block; }
.vyt-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.vyt-ph { width: 100%; height: 100%; background: linear-gradient(120deg, var(--vyt-bg1), var(--vyt-bg2)); }
.vyt-play {
  position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.18);
  color: var(--vyt-acc); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.vyt-play span {
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; padding-left: 5px;
  transition: transform .25s;
}
.vyt:hover .vyt-play span { transform: scale(1.1); }
.vyt-title { font-size: .95rem; font-weight: 500; text-shadow: 0 1px 6px rgba(0,0,0,.6); padding: 0 18px; }

/* загрузка после клика: кольцо-спиннер на кнопке */
.vyt.loading .vyt-play span{font-size:0;padding:0;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:vytspin .8s linear infinite}
@keyframes vytspin{to{transform:rotate(360deg)}}

/* видео под kashtan */
.vsh{--vsh-bg1:#241a10;--vsh-bg2:#4a3826;--vsh-acc:#f3ead9}
.vyt{--vyt-bg1:#241a10;--vyt-bg2:#4a3826;--vyt-acc:#f3ead9}

/* голос 2026-07-07: short почти во весь экран телефона */
@media (max-width:600px){.vsh{height:80vh;max-height:none;max-width:96vw}}

/* голос 2026-07-07: вспышка аккордеона под тёмную тему — не молочное стекло */
.hgb-acc-it.flash{background:rgba(201,162,39,.10)}
/* зум-кнопки святынь — золотые, как в 360 */
.hgb-ctl button{background:rgba(26,19,12,.72);border:1px solid #c9a227;color:#c9a227}
.hgb-ctl button:hover{border-color:#e2c15a;color:#e2c15a}
.hgb-ctl button:active{background:#c9a227;border-color:#c9a227;color:#1a130c}

/* голос 2026-07-07: телефон — крест целиком, воздух сверху, шапка не режется */
@media (max-width:600px){.hro-bg img{transform:none;object-position:50% 12%}.hro{min-height:92svh}}