/* Конструктор гравировки — страница /services/lazernaya-gravirovka/ (sg 22.10.2026) */
.sge-section{ margin-bottom:24px; }
.sge-section .sge-head h2{ margin:0 0 8px; text-align:left; }
.sge-section .sge-head p{ margin:0 0 20px; color:#6B7080; max-width:720px; }
.sge{
  --ink:#20242D; --muted:#6B7080; --line:#E3E5EC; --soft:#F5F6FA; --accent:#B8892F; --accent-soft:rgba(184,137,47,.10);
  --cta:#E8444F; --ok:#2C7549; --ok-soft:rgba(44,117,73,.10); --bad:#C8323A; --bad-soft:rgba(200,50,58,.08);
  --stage:#EEEFF3; --grid:rgba(52,64,92,.06);
  color:var(--ink); font-size:15px; line-height:1.45; position:relative;
}
.sge{ overflow-x:clip; max-width:100%; }
.sge-section{ overflow-x:clip; }
.sge *, .sge *::before, .sge *::after{ box-sizing:border-box; }
.sge button, .sge input, .sge textarea, .sge select{ font:inherit; color:inherit; }
.sge button{ cursor:pointer; }
.sge [hidden]{ display:none !important; }
.sge :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.sge-top{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.sge-picker{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.sge-picker span{ font-size:13px; color:var(--muted); }
.sge-picker select{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 14px; min-width:300px; max-width:100%; }

.sge-layout{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:20px; align-items:start; }
.sge-stage{ position:sticky; top:12px; height:clamp(520px, calc(100vh - 40px), 820px); min-height:420px; display:flex; flex-direction:column;
  background-color:var(--stage);
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:20px 20px; border-radius:20px; overflow:hidden; }
.sge-stage-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; font-size:13px; color:var(--muted); }
.sge-stage-head b{ color:var(--ink); font-weight:600; }
.sge-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); cursor:pointer; white-space:nowrap; margin:0; }
.sge-toggle input{ accent-color:var(--accent); margin:0; }
.sge-canvas-wrap{ flex:1; min-height:0; position:relative; display:flex; }
.sge-canvas{ flex:1; min-height:0; padding:4px 10px; display:flex; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.sge-canvas.is-zoomed{ touch-action:none; cursor:grab; }
.sge-canvas.is-zoomed:active{ cursor:grabbing; }
.sge-zoom{ position:absolute; right:12px; bottom:10px; display:flex; flex-direction:column; align-items:flex-end; gap:6px; z-index:2; }
.sge-zrow{ display:flex; align-items:center; gap:6px; }
.sge-zbtn{ height:40px; min-width:40px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink);
  font-size:20px; line-height:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 2px 8px -2px rgba(0,0,0,.18); }
.sge-zbtn:disabled{ opacity:.4; cursor:default; }
.sge-zlens{ font-size:14px; font-weight:600; }
.sge-zlens svg{ width:20px; height:20px; flex:none; }
.sge-zlens[aria-pressed="true"] .sge-zplus{ display:none; }
.sge-zlens[aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
.sge-zlevel{ font-size:12.5px; font-weight:600; color:var(--muted); background:rgba(255,255,255,.85); border-radius:999px; padding:3px 8px; font-variant-numeric:tabular-nums; }
.sge-zhint{ position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:3; background:rgba(32,36,45,.88); color:#fff; font-size:13px; padding:7px 14px; border-radius:999px; white-space:nowrap; pointer-events:none; max-width:calc(100% - 24px); overflow:hidden; text-overflow:ellipsis; }
.sge-canvas svg{ width:100%; height:100%; display:block; }
.sge-status{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:10px 16px 14px; font-size:12.5px; color:var(--muted); }
.sge .pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-weight:600; font-size:12.5px; }
.sge .pill.ok{ background:var(--ok-soft); color:var(--ok); }
.sge .pill.bad{ background:var(--bad-soft); color:var(--bad); }
.sge .pill.idle{ background:#fff; color:var(--muted); }

.sge-panel{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.sge-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.sge-card h3{ text-align:left; margin:0; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-family:inherit; }
.sge .zones{ display:grid; gap:8px; }
.sge .zone-btn{ display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; background:var(--soft); border:1.5px solid transparent; border-radius:14px; padding:10px 12px; min-width:0; }
.sge .zone-btn:hover{ border-color:var(--line); }
.sge .zone-btn[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-soft); }
.sge .zone-btn .zl{ display:flex; flex-direction:column; min-width:0; }
.sge .zone-btn .zn{ font-weight:600; font-size:14.5px; }
.sge .zone-btn .zs{ font-size:12.5px; color:var(--muted); }
.sge .zone-btn .zs.bad{ color:var(--bad); }
.sge .zone-btn .zp{ font-variant-numeric:tabular-nums; font-size:14px; white-space:nowrap; color:var(--muted); }
.sge .zone-btn.used .zp{ color:var(--ink); font-weight:600; }

.sge .field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.sge .field > .lbl{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13.5px; font-weight:600; margin:0; }
.sge .field > .lbl span{ font-weight:400; color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.sge textarea{ width:100%; min-height:104px; resize:vertical; background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:10px 12px; line-height:1.4; }
.sge .hint{ font-size:12.5px; color:var(--muted); }
.sge .fonts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sge .font-btn{ background:var(--soft); border:1.5px solid transparent; border-radius:12px; padding:8px 10px; text-align:left; display:flex; flex-direction:column; gap:2px; min-width:0; }
.sge .font-btn[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-soft); }
.sge .font-btn .fs{ font-size:21px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sge .font-btn .fh{ font-size:11.5px; color:var(--muted); }
.sge input[type=range]{ width:100%; accent-color:var(--accent); margin:0; }
.sge .ends{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-top:-4px; }
.sge .seg{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:var(--soft); border-radius:12px; padding:3px; gap:3px; }
.sge .seg button{ border:0; background:transparent; border-radius:9px; padding:8px; font-size:13.5px; color:var(--muted); }
.sge .seg button[aria-pressed="true"]{ background:#fff; color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.sge .seg button:disabled{ opacity:.45; cursor:not-allowed; }
.sge .upload{ display:flex; align-items:center; gap:12px; border:1.5px dashed var(--line); border-radius:14px; padding:12px; cursor:pointer; position:relative; margin:0; }
.sge .upload:hover{ border-color:var(--accent); }
.sge .upload input{ position:absolute; width:1px; height:1px; opacity:0; }
.sge .upload .ico{ width:40px; height:40px; border-radius:10px; background:var(--soft); display:grid; place-items:center; flex:none; font-size:22px; color:var(--accent); }
.sge .upload .ut{ display:flex; flex-direction:column; min-width:0; }
.sge .upload .ut b{ font-weight:600; font-size:14px; }
.sge .logo-row{ display:flex; align-items:center; gap:12px; min-width:0; }
.sge .logo-thumb{ width:64px; height:64px; border-radius:10px; flex:none; display:grid; place-items:center; padding:6px; border:1px solid var(--line); }
.sge .logo-thumb img{ max-width:100%; max-height:100%; }
.sge .logo-row .ln{ flex:1; min-width:0; font-size:13.5px; }
.sge .logo-row .ln b{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sge .check{ display:flex; align-items:center; gap:8px; font-size:13.5px; margin:0; }
.sge .check input{ accent-color:var(--accent); width:16px; height:16px; margin:0; }
.sge .link-btn{ background:none; border:0; padding:0; color:var(--bad); font-size:13.5px; text-decoration:underline; text-underline-offset:3px; align-self:flex-start; }
.sge .price-line{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:12px; }
.sge .price-line b{ color:var(--ink); font-variant-numeric:tabular-nums; }

.sge-bar{ position:static; margin-top:20px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:14px 18px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.sge-total{ display:flex; flex-direction:column; min-width:0; flex:1 1 240px; }
.sge-total .t{ font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; }
.sge-total .b{ font-size:13px; color:var(--muted); }
.sge-total .b.is-bad{ color:var(--bad); }
.sge-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.sge-btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:12px 20px; font-weight:600; font-size:15px; text-decoration:none; white-space:nowrap; border:1.5px solid transparent; }
.sge-btn--main{ background:var(--cta); color:#fff; border-color:var(--cta); }
.sge-btn--main:disabled{ opacity:.45; cursor:not-allowed; }
.sge-btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.sge-btn--ghost:hover{ border-color:var(--ink); color:var(--ink); }
.sge-links{ display:none; }
.sge-note{ margin:10px 4px 0; font-size:13px; color:var(--muted); }
.sge-toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:1000; background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px; font-size:14px; max-width:calc(100% - 32px); text-align:center; }

/* схема */
.sge .zone .halo{ fill:none; stroke:rgba(255,255,255,.8); stroke-width:4; vector-effect:non-scaling-stroke; }
.sge .zone .guide{ fill:rgba(37,99,201,.07); stroke:#2563C9; stroke-width:1.6; stroke-dasharray:6 4; vector-effect:non-scaling-stroke; }
.sge .zone.idle .guide{ fill:none; stroke-opacity:.5; }
.sge .zone.idle .halo{ stroke:rgba(255,255,255,.4); }
.sge .zone.bad .guide{ stroke:#D32F2F; fill:rgba(211,47,47,.10); stroke-dasharray:none; }
.sge .zone .hit{ fill:transparent; stroke:none; cursor:pointer; }
.sge .noguides .zone .guide, .sge .noguides .zone .halo{ display:none; }
.sge .art .ln{ vector-effect:non-scaling-stroke; }

@media (max-width: 980px){
  .sge-layout{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .sge-stage{ position:relative; top:auto; height:46vh; min-height:300px; }
  .sge .zones{ grid-template-columns:1fr 1fr; }
  .sge .zone-btn{ flex-direction:column; align-items:flex-start; gap:4px; padding:9px 10px; }
  .sge .zone-btn .zn{ font-size:13.5px; line-height:1.25; }
  .sge .zone-btn .zp{ font-size:13px; }
  .sge-picker, .sge-picker select{ width:100%; min-width:0; }
  .sge-bar{ position:static; box-shadow:none; border-radius:16px; padding:12px 14px; gap:10px; }
  .sge-total .t{ font-size:20px; }
  .sge-bar{ flex-wrap:nowrap; }
  .sge-total{ flex:1 1 auto; }
  .sge-total .b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sge-actions .sge-btn--ghost{ display:none; }
  .sge-btn{ padding:11px 16px; font-size:14px; }
  .sge-links{ display:flex; gap:8px; margin-top:10px; }
  .sge-links .sge-btn{ flex:1 1 0; }
  .sge-zbtn{ height:38px; min-width:38px; }
  .sge-zoom{ right:8px; bottom:8px; }
  .sge-zrow{ flex-direction:column-reverse; }
  .sge-zlevel{ display:none; }
  .sge-zlens{ width:38px; padding:0; justify-content:center; }
  .sge-zlens span{ display:none; }
  .sge-status{ font-size:11.5px; padding:6px 12px 10px; }
  /* iOS увеличивает страницу при фокусе на полях с шрифтом меньше 16px — отсюда «гуляние» влево-вправо */
  .sge textarea, .sge select{ font-size:16px; }
  .sge .fonts{ gap:6px; }
  .sge .font-btn .fs{ font-size:19px; }
}

/* sg 22.10.2026: цены считает конструктор — раздел «Стоимость гравировки» в тексте услуги скрыт (в коде страницы остаётся для поисковиков) */
#services-detail h2:first-of-type,
#services-detail h2:first-of-type ~ :not(h2):has(~ h2:nth-of-type(2)){ display:none; }

/* телефон: мини-превью у верхнего края и полноэкранный просмотр */
.sge-fclose{ border:0; background:var(--ink); color:#fff; border-radius:999px; padding:8px 16px; font-size:14px; font-weight:600; }
.sge-mini{ position:fixed; left:0; right:0; top:0; z-index:9990; padding:6px 8px 0; transform:translateY(-120%); transition:transform .22s ease; pointer-events:none; overflow:visible; }
.sge-mini.is-on{ transform:none; pointer-events:auto; }
.sge-mini-in{ width:100%; display:flex; align-items:center; gap:10px; height:104px; padding:6px 8px 6px 6px; border:1px solid var(--line); border-radius:16px; text-align:left;
  background-color:var(--stage); background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:14px 14px;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.45); }
.sge-mini-art{ flex:1 1 auto; min-width:0; height:100%; border-radius:11px; overflow:hidden; display:flex; }
.sge-mini-art svg{ width:100%; height:100%; display:block; }
.sge-mini-info{ flex:0 0 auto; width:112px; display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); line-height:1.25; }
.sge-mini-name{ color:var(--ink); font-weight:600; font-size:12.5px; }
.sge-mini-st{ align-self:flex-start; border-radius:999px; padding:2px 7px; font-weight:600; font-size:11.5px; }
.sge-mini-st.ok{ background:var(--ok-soft); color:var(--ok); } .sge-mini-st.bad{ background:var(--bad-soft); color:var(--bad); } .sge-mini-st.idle{ background:#fff; }
.sge-mini-sum{ color:var(--ink); font-weight:700; font-size:15px; }
.sge-mini-open{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink); }
.sge-mini-open svg{ width:18px; height:18px; }
.sge-full{ position:fixed; inset:0; z-index:9995; background:var(--stage); }
.sge-full .sge-stage{ position:absolute; inset:0; height:auto; min-height:0; border-radius:0; padding-bottom:env(safe-area-inset-bottom); }
.sge-full .sge-stage-head{ padding-top:max(12px, env(safe-area-inset-top)); }
html.sge-lock, html.sge-lock body{ overflow:hidden; }
@media (min-width: 981px){ .sge-mini{ display:none; } }

/* жёсткое правило: на странице конструктора нет горизонтальной прокрутки (sg 22.10.2026) */
html{ overflow-x:hidden; }
body{ overflow-x:clip; max-width:100%; }
.sge, .sge-section{ touch-action:manipulation; }
.sge textarea.is-sample{ color:#9AA0AE; font-style:italic; }
.sge-note b{ color:var(--ink); }