/* Конструктор памятника /pamjatniki/konstruktor (2026-10-09). Префикс kp-. Палитра — core.css. */
.kp { width: 100%; margin: 0; padding: 24px 16px 48px; }
.kp__head { max-width: 860px; margin-bottom: 24px; }
.kp__title { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin: 8px 0 12px; color: var(--ink); }
.kp__title > .green { white-space: nowrap; }
.kp__lead { font-size: 17px; line-height: 1.6; color: var(--ink-3); margin: 0; }
.kp__grid { display: grid; gap: 24px; }
.kp__preview { min-width: 0; }
.kp__stage { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(20, 24, 26, .06); }
.kp__stage svg { display: block; width: 100%; height: auto; }
.kp__stage-foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-top: 12px; }
.kp__summary { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.kp__dl { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.kp__dl:hover { border-color: var(--green-600); color: var(--green-700); }
.kp__dl svg { width: 16px; height: 16px; }
.kp__note { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }

.kp__panel { display: grid; gap: 14px; min-width: 0; }
.kp__group { margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; min-width: 0; }
.kp__label { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 14px; font-weight: 700; font-size: 16px; color: var(--ink); }
/* Keep fieldset headings inside the card, with the same inset as step 7. */
fieldset.kp__group > legend.kp__label { float: left; width: 100%; }
fieldset.kp__group > legend.kp__label + * { clear: both; }
.kp__num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green-50); color: var(--green-700); font-size: 13px; font-weight: 800; }
.kp__sub { grid-column: 1 / -1; margin: 6px 0 0; font-weight: 700; font-size: 14px; color: var(--ink-3); }
.kp__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.kp__opts + .kp__opts, .kp__fields + .kp__opts, .kp-field + .kp__opts { margin-top: 14px; }
.kp__opts--forms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kp__opts--stones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.kp-opt { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid #D5DAD3; border-radius: 12px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.kp-opt:hover { border-color: var(--green-600); }
.kp-opt.is-on { border-color: var(--green-700); background: var(--green-50); box-shadow: inset 0 0 0 1px var(--green-700); }
.kp-opt--form { flex-direction: column; justify-content: center; gap: 4px; padding: 10px 6px; text-align: center; font-size: 13px; }
.kp-opt__preview { display: block; width: 100%; overflow: hidden; border-radius: 7px; aspect-ratio: 1 / 1; }
.kp-opt--form .kp-opt__preview svg { display: block; width: 100%; height: 100%; }
.kp-swatch { flex: none; width: 30px; height: 30px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.kp-swatch--gabbro { background: radial-gradient(circle at 30% 30%, #3b3e43 0 1px, transparent 2px) 0 0/6px 6px, #17181a !important; }
.kp-swatch--seryj { background: radial-gradient(circle at 40% 40%, #2c2d30 0 1px, transparent 2px) 0 0/5px 5px, radial-gradient(circle, #e2e2df 0 1px, transparent 2px) 2px 3px/7px 7px, #8c8f93 !important; }
.kp-swatch--krasnyj { background: radial-gradient(circle, #2a1a17 0 1.4px, transparent 2px) 0 0/6px 6px, #8e4a3b !important; }
.kp-swatch--korich { background: radial-gradient(circle, #1a120e 0 1.6px, transparent 2.4px) 0 0/7px 7px, #5a3a2a !important; }
.kp-swatch--zelenyj { background: radial-gradient(circle, #0e1813 0 1.2px, transparent 2px) 0 0/5px 5px, #2b3a33 !important; }
.kp-swatch--mramor { background: linear-gradient(125deg, transparent 40%, #9a9ca0 42%, transparent 46%), linear-gradient(60deg, transparent 62%, #b7b8bb 63%, transparent 66%), #ebe9e4 !important; }

.kp-chip { padding: 9px 14px; border: 1px solid #D5DAD3; border-radius: 999px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.kp-chip:hover { border-color: var(--green-600); }
.kp-chip.is-on { background: var(--green-700); border-color: var(--green-700); color: #fff; }

.kp__photo { display: grid; gap: 8px; margin-top: 14px; }
.kp-upload { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border: 1.5px dashed #BFC8BC; border-radius: 12px; background: var(--page); font-weight: 600; font-size: 14.5px; color: var(--green-700); cursor: pointer; }
.kp-upload:hover { border-color: var(--green-600); }
.kp-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.kp-upload svg { width: 18px; height: 18px; }
.kp__hint { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

.kp__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kp__fields + .kp__fields, .kp__fields + .kp-field { margin-top: 10px; }
.kp-field { display: grid; gap: 5px; grid-column: 1 / -1; min-width: 0; }
.kp-field--half { grid-column: auto; }
.kp-field > span { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.kp-field small { font-weight: 400; color: var(--muted); }
.kp-field input, .kp-field textarea { width: 100%; padding: 11px 13px; border: 1px solid #D5DAD3; border-radius: 10px; font: inherit; font-size: 15px; background: #fff; color: var(--ink); }
.kp-field input:focus, .kp-field textarea:focus { outline: 3px solid #b9d7c0; border-color: var(--green-600); }
.kp-form { display: grid; gap: 12px; }
.kp-agree { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink-3); }
.kp-agree input { margin-top: 3px; }
.kp-error { margin: 0; min-height: 0; color: #b42318; font-size: 14px; font-weight: 600; }
.kp-error:empty { display: none; }
.kp-submit { justify-self: start; }
.kp-done { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 12px; background: var(--green-50); color: var(--ink); }
.kp-done svg { width: 28px; height: 28px; color: var(--green-700); flex: none; }
.kp-done p { margin: 4px 0 6px; color: var(--ink-3); }
.kp__send { border-color: var(--green-600); box-shadow: 0 8px 26px rgba(31, 107, 54, .08); }

.kp-steps { width: 100%; margin: 0; padding: 8px 16px 40px; }
.kp-faq { width: 100%; box-sizing: border-box; }
.kp-popular { padding-block: 0 40px; min-width: 0; }
.kp-steps__title { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: clamp(24px, 3vw, 34px); margin: 0 0 18px; }
.kp-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kp-steps__item { position: relative; display: grid; gap: 6px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.kp-steps__ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--green-50); color: var(--green-700); }
.kp-steps__n { position: absolute; top: 18px; right: 20px; font-weight: 800; color: #c9d3c6; }
.kp-steps__item b { font-size: 17px; }
.kp-steps__item span:last-child { color: var(--ink-3); font-size: 14.5px; line-height: 1.5; }

@media (min-width: 768px) {
    .kp__opts--stones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kp-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .kp { padding-top: 32px; }
    .kp__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: start; }
    .kp__preview { position: sticky; top: calc(var(--header-height, 70px) + 16px); }
    .kp-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
    /* На телефоне макет сверху, панель ниже; макет компактнее, чтобы был виден первый выбор. */
    .kp__stage { max-width: 520px; margin: 0 auto; }
}

.kp-swatch { overflow: hidden; }
.kp-swatch__c { display: block; width: 100%; height: 100%; }
.kp-done[hidden], .kp-form[hidden], .kp-upload[hidden], .kp__fields[hidden], .kp__photo[hidden] { display: none !important; }

/* Interactive 3D stage: no cemetery background, pointer/keyboard rotation. */
.kp__stage--3d { background: #f6f6f4; }
.kp-3d-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1 / var(--kp-field-ratio, 1); cursor: grab; touch-action: pan-y; }
.kp-3d-canvas.is-dragging { cursor: grabbing; }
.kp-3d-canvas:focus-visible { outline: 2px solid var(--green-700); outline-offset: -3px; }
.kp-3d-toolbar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; padding: 12px; background: #fff; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.kp-3d-toolbar > div { display: flex; gap: 6px; }
.kp-3d-toolbar button { min-width: 36px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; color: var(--ink); cursor: pointer; }
.kp-3d-toolbar button:hover { background: var(--green-50); }

/* Shared preview modes and face-layout editor. */
.kp-view-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:12px; background:#fff; border-bottom:1px solid var(--line); }
.kp-view-controls > div { display:flex; gap:6px; }
.kp-view-controls button, .kp-layout__tools button { border:1px solid var(--line); border-radius:9px; padding:9px 16px; background:#fff; color:var(--ink); font:inherit; cursor:pointer; }
.kp-view-controls button[aria-pressed=true] { background:var(--green-700); color:white; }
.kp-view-controls label { display:flex; align-items:center; gap:8px; font-size:13px; }
.kp-view-controls input { width:110px; accent-color:var(--green-700); }
.kp-view-controls output { min-width:30px; }
.kp-layout__surface { height:auto; aspect-ratio:1 / var(--kp-field-ratio, 1); touch-action:none; overflow:hidden; }
.kp-layout__surface .kp-layout__svg { width:100%; height:100%; display:block; }
.kp-layout [data-layout-id] { cursor:move; }

.kp-layout[hidden], .kp-3d-canvas[hidden], .kp-3d-toolbar[hidden] { display:none !important; }
.kp__stage { scroll-margin-top:110px; }


.kp-layout { position:relative; }
.kp-layout__surface { position:relative; }
.kp-layout__selection { position:absolute; border:1px dashed #fff; box-shadow:0 0 0 1px rgba(20,50,30,.55); cursor:move; touch-action:none; }
.kp-layout__selection[hidden] { display:none; }
.kp-layout__resize { position:absolute; right:-16px; bottom:-16px; width:32px; height:32px; border:0; padding:0; background:transparent; cursor:nwse-resize; touch-action:none; }
.kp-layout__resize::after { content:''; position:absolute; inset:9px; border-radius:2px; background:#fff; border:1px solid #216b38; box-shadow:0 1px 4px #0005; }
.kp-layout__reset { position:absolute; top:12px; right:12px; width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--green-700); font-size:26px; cursor:pointer; box-shadow:0 2px 8px #0001; }

/* The page already supplies horizontal gutters; avoid a second inset in the quiz. */
.kp-page > .kp-popular + .quiz { margin-top: 8px; }
@media (min-width: 1200px) {
    .kp-page > .quiz .quiz-banner .text { padding-left: 0; }
    .kp-page > .quiz .quiz-card-wrap { margin-left: 0; margin-right: 0; }
    .kp-page > .quiz .quiz-callback { margin-left: 0; margin-right: 0; }
}

.kp-page > .kp-faq { margin-top: 32px; }

@media (min-width: 1200px) {
    .kp-page > .quiz .quiz-trust-bar { margin-left: 0; margin-right: 0; }
}

.kp-portraits { display:grid; grid-template-columns:repeat(auto-fill,minmax(85px,1fr)); gap:10px; margin-top:14px; }
.kp-portraits:empty { display:none; }
.kp-portraits__item { position:relative; min-width:0; }
.kp-portraits__choose { width:100%; height:100%; padding:5px; border:2px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; color:var(--ink); }
.kp-portraits__choose[aria-pressed=true] { border-color:var(--green-700); background:var(--green-50); }
.kp-portraits__choose img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:6px; }
.kp-portraits__choose span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; padding-top:5px; }
.kp-portraits__remove { position:absolute; right:-5px; top:-5px; width:28px; height:28px; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--ink); cursor:pointer; font-size:20px; }

.kp-fonts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:108px; gap:8px; margin-top:12px; max-height:346px; overflow-y:auto; padding:3px; box-sizing:border-box; scrollbar-gutter:stable; align-content:start; }
.kp-font { display:grid; gap:6px; padding:12px; min-width:0; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); text-align:left; cursor:pointer; }
.kp-font > span:first-child { font:12px Arial,sans-serif; color:var(--muted); }
.kp-font__sample { font-size:clamp(16px,1.6vw,23px); line-height:1.35; overflow-wrap:break-word; }
.kp-font[aria-pressed=true] { border-color:var(--green-700); background:var(--green-50); }
.kp-fonts + * { margin-top:12px; }
@media (max-width: 600px) {
  .kp-fonts { grid-auto-rows:82px; max-height:268px; }
  .kp-font { padding:6px 12px; gap:4px; align-content:center; }
}
.kp__group > .kp__sub { margin-top:18px; }

.kp-engravings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; max-height:560px; overflow-y:auto; padding:3px; }
.kp-engraving { min-width:0; border:2px solid var(--line); border-radius:12px; background:#fff; padding:5px; color:var(--ink); cursor:pointer; }
.kp-engraving svg { display:block; width:100%; aspect-ratio:1; background:#252a27; border-radius:7px; }
.kp-engraving span { display:block; font-size:12px; line-height:1.3; margin-top:6px; overflow-wrap:anywhere; }
.kp-engraving[aria-pressed=true] { border-color:var(--green-700); background:var(--green-50); }
.kp-layout__rotate,.kp-layout__flip { position:absolute; width:32px; height:32px; border:1px solid #216b38; border-radius:50%; background:#fff; color:#216b38; font-size:22px; touch-action:none; cursor:pointer; }
.kp-layout__rotate { top:-40px; left:calc(50% - 16px); cursor:grab; }
.kp-layout__flip { top:-40px; right:-34px; }

.kp-layout__rotate,.kp-layout__flip { display:grid; place-items:center; padding:0; line-height:1; }
.kp-layout__rotate svg,.kp-layout__flip svg { display:block; width:18px; height:18px; pointer-events:none; }
.kp-layout__rotate svg { transform:none; }

.kp-3d-canvas,.kp-layout__surface { background-color:#f6f6f4; background-image:url('/assets/konstruktor/watermark.svg'); background-repeat:repeat; background-size:50% auto; }

.kp__send textarea[name="kpComment"] { box-sizing:border-box; line-height:1.5; min-height:69px; height:69px; resize:vertical; }
.kp__send .kp-agree input { accent-color:var(--green-700); }
@media (max-width:767px) {
    .kp__send .kp__fields { grid-template-columns:minmax(0,1fr); }
    .kp__send .kp-field--half { grid-column:1 / -1; }
}

@media (max-width:1199px) {
    .kp-page > .quiz .quiz-banner { padding-left:0; padding-right:0; }
    .kp-page > .quiz .quiz-card-wrap,
    .kp-page > .quiz .quiz-trust-bar,
    .kp-page > .quiz .quiz-callback { margin-left:0; margin-right:0; }
}

@media (max-width:767px) {
    .service-page.kp-page { padding-left:0; padding-right:0; }
}

/* Keep both sizing controls together when the toolbar wraps. */
.kp-view-controls > .kp-view-sizing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 480px;
    max-width: 100%;
}
.kp-view-sizing label { min-width: 0; white-space: nowrap; }
.kp-view-sizing input { min-width: 0; width: 100%; }
@media (max-width: 767px) {
    .kp-view-sizing label { display: grid; grid-template-columns: minmax(0, 1fr) 30px; }
    .kp-view-sizing input { grid-column: 1; grid-row: 2; }
    .kp-view-sizing output { grid-column: 2; grid-row: 2; }
}

.kp-layout__marquee { position:absolute; border:1px solid #2e8c4b; background:rgba(46,140,75,.16); pointer-events:none; z-index:4; }
.kp-layout__marquee[hidden], .kp-layout__selection button[hidden] { display:none !important; }
.kp-layout:focus { outline:none; }
.kp-projects { margin: 24px 0 32px; padding: 24px; border: 1px solid #deded8; border-radius: 20px; background: #fff; }
.kp-projects h2 { margin: 0 0 12px; }
.kp-projects p { line-height: 1.5; margin: 12px 0 18px; }
.kp-projects__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.kp-projects .cta:not(.cta-primary) { border:1px solid #cbd5cd; background:#fff; color:#206c37; }
.kp-projects button:disabled { opacity:.6; cursor:wait; }
.kp-projects { scroll-margin-top:110px; }
.kp-projects input:not([type=checkbox]) { display: block; max-width:100%; box-sizing:border-box; padding:12px; border:1px solid #ccc; border-radius:10px; }
.kp-projects input[data-project-name],
.kp-projects button[data-project-save] { box-sizing:border-box; height:48px; min-height:48px; padding-top:10px; padding-bottom:10px; }
.kp-projects button[data-project-save] { display:inline-flex; align-items:center; justify-content:center; line-height:1.2; padding:0 24px; }
.kp-projects [hidden] { display:none !important; }
.kp-projects__list { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap:12px; margin-top:20px; }
.kp-projects__card { min-width:0; border:1px solid #ddd; border-radius:14px; padding:12px; }
.kp-projects__card img { display:block; width:100%; height:140px; object-fit:contain; }
.kp-projects__card .kp-projects__actions { gap:6px; }
@media(max-width:1199px) { .kp-projects__list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) { .kp-projects__list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .kp-projects__card { padding:8px; } .kp-projects__card img { height:110px; } }
.kp-projects__card h3 { font-size:17px; overflow-wrap:anywhere; }
.kp-projects__cloud { border-top:1px solid #ddd; margin-top:24px; padding-top:20px; }
.kp-projects__cloud summary { cursor:pointer; font-weight:700; }
.kp-projects__cloud form { margin-top:24px; }
.kp-projects__cloud .kp-agree { margin:18px 0; }
@media(max-width:600px) { .kp-projects { padding:16px; } .kp-projects__actions { align-items:stretch; } .kp-projects__actions > input,.kp-projects__actions > label {width:100%;} .kp-projects .cta { white-space:normal; text-align:center; } }

/* Saved projects: same typography and compact white cards as the constructor. */
.kp-projects { padding:28px; border-color:var(--line); }
.kp-projects__heading { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:8px 16px; }
.kp-projects__heading .eyebrow { flex-basis:100%; margin:0; }
.kp-projects__heading h2 { margin:0; }
.kp-projects__badge { padding:7px 12px; border-radius:30px; background:var(--green-50,#eff6ef); color:var(--green-700); font-size:13px; font-weight:600; white-space:nowrap; }
.kp-projects .kp-projects__intro { margin:12px 0 22px; color:var(--ink-3); }
.kp-projects__save { padding:16px; background:#f7f8f5; border-radius:14px; }
.kp-projects__save input[data-project-name] { flex:1; width:auto; min-width:0; max-width:420px; background:#fff; font:inherit; font-size:15px; }
.kp-projects [data-project-status] { font-size:13px; color:var(--ink-3); margin:12px 0 0; min-height:20px; }
.kp-projects__list:empty { display:none; }
.kp-projects__card { padding:10px; border-color:var(--line); background:#fff; }
.kp-projects__card.is-current { border-color:var(--green-600); }
.kp-projects__card img { background:#f7f8f5; border-radius:8px; height:150px; }
.kp-projects__card h3 { font-family:inherit; font-weight:600; font-size:15px; line-height:1.35; margin:12px 0; }
.kp-projects__card .kp-chip { padding:7px 10px; font-size:12px; min-height:32px; }
.kp-projects__card .kp-chip:first-child { color:var(--green-700); border-color:#d7e4d8; background:#f3f7f2; }
.kp-projects .kp-projects__footnote { margin:14px 0 0; color:var(--ink-3); font-size:12px; }
.kp-projects__cloud { margin-top:24px; padding-top:0; border-top:1px solid var(--line); }
.kp-projects__cloud summary { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:20px 0 0; list-style:none; }
.kp-projects__cloud summary::-webkit-details-marker { display:none; }
.kp-projects__cloud summary > span:first-child { flex:none; }
.kp-projects__cloud summary strong { display:block; font-size:16px; }
.kp-projects__cloud summary small { display:block; margin-top:5px; font-size:13px; font-weight:400; color:var(--ink-3); }
.kp-projects__price { font-size:15px; white-space:nowrap; color:var(--green-700); }
@media(max-width:600px) {
 .kp-projects { padding:16px; }
 .kp-projects__heading { align-items:center; flex-wrap:wrap; gap:12px; }
 .kp-projects__heading h2 { font-size:28px; }
 .kp-projects__save { padding:12px; }
 .kp-projects__save input[data-project-name] { flex-basis:100%; max-width:none; }
 .kp-projects__save [data-project-save] { width:100%; }
 .kp-projects__card img { height:120px; }
 .kp-projects__cloud summary { flex-wrap:wrap; gap:10px; }
}