/* REL'EF constructor wizard, styled in the Aurum design language:
   borderless soft fills (--card / #f2f2ef), radius tokens, black active states,
   uppercase small labels, generous air. */

.ctor-app {
  position: fixed; inset: var(--nav-h) 0 0 0; display: flex; background: var(--paper); z-index: 3;
}

/* ---------- stage (left): inset rounded card like the product gallery ---------- */
.ctor-stage {
  position: relative; width: 50%; height: calc(100% - 20px);
  margin: 0 0 20px 20px; border-radius: var(--radius-card);
  background: var(--card); overflow: hidden;
}
.ctor-canvas, .ctor-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ctor-prodinfo { position: absolute; left: 24px; bottom: 22px; z-index: 5; }
.ctor-material { display: none; }   /* the spec line above already names the metal */
.ctor-sheethead { display: none; }   /* the sheet, and its header, are mobile-only */
.ctor-prodname { font-size: 14px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink-dim); }
.ctor-place { font-size: 14px; letter-spacing: -0.02em; margin-top: 3px; color: var(--ink); }
.ctor-prodprice { font-size: 16px; margin-top: 4px; color: var(--ink-dim); }
.ctor-prodprice span { color: var(--ink); }
.ctor-stagebtns { position: absolute; right: 20px; bottom: 20px; z-index: 5; display: flex; gap: 8px; }
.ctor-share {
  background: var(--ink); color: #fff; font-size: 14px;
  padding: 12px 22px; border-radius: 12px;
  transition: opacity .25s var(--ease-io);
}
.ctor-share:hover { opacity: .85; }
.ctor-stl {
  background: var(--paper); color: var(--ink); font-size: 14px;
  padding: 12px 18px; border-radius: 12px;
  transition: background .25s var(--ease-io);
}
.ctor-stl:hover { background: #f2f2ef; }
.ctor-toast {
  position: absolute; right: 20px; bottom: 72px; z-index: 6; background: var(--ink); color: #fff;
  font-size: 13px; padding: 8px 14px; border-radius: 10px; opacity: 0;
  transition: opacity .25s var(--ease-io); pointer-events: none;
}
.ctor-toast.show { opacity: 1; }
.ctor-roads-status {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 6;
  background: rgba(28, 28, 28, .85); color: #fff; font-size: 12px;
  padding: 8px 16px; border-radius: 10px; white-space: nowrap;
}

/* ---------- panel (right): all sections in one scroll, no wizard ---------- */
.ctor-panel { width: 50%; height: 100%; display: flex; flex-direction: column; background: var(--paper); }
.ctor-grab { display: none; }   /* the sheet, and its handle, are mobile-only */

.ctor-stepbody { flex: 1 1 auto; overflow-y: auto; padding: 8px 32px 24px; }
.ctor-stepbody section[data-step] { padding: 6px 0 22px; border-top: 1px solid var(--line); margin-top: 4px; }
.ctor-stepbody section[data-step]:first-child { border-top: 0; margin-top: 0; }
.ctor-stepbody section[data-step][hidden] { display: none; }

.ctor-seclabel {
  font-size: 14px; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--ink-dim); margin: 30px 0 12px;
}
.ctor-seclabel:first-child { margin-top: 8px; }

/* form cards: compact grid so every option is on screen at once */
.ctor-formrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ctor-formcard {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  border: 1px solid transparent; border-radius: 14px; padding: 8px 8px 10px;
  background: var(--card); transition: background .25s var(--ease-io), border-color .25s var(--ease-io);
}
.ctor-formcard:hover { background: #f2f2ef; }
.ctor-formcard.sel { border-color: var(--ink); background: #f2f2ef; }
.ctor-formcard img {
  width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; object-fit: cover;
}
.ctor-formcard .fc-text b { display: block; font-weight: 400; font-size: 14px; letter-spacing: -0.02em; margin-top: 8px; text-align: center; }
.ctor-formcard .fc-text i { display: none; }

/* pills: the product page's size-pill recipe */
.ctor-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.ctor-pill {
  flex: 1; height: 40px; padding: 0 14px; border-radius: 10px;
  background: #f2f2ef; font-size: 14px; white-space: nowrap;
  transition: background .25s, color .25s;
}
.ctor-pill.sel { background: var(--ink); color: #fff; }
#ctor-weightsw .ctor-pill {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: auto; padding: 10px 12px 11px; gap: 1px; line-height: 1.25; font-size: 16px;
}
.pill-dim, .pill-price { font-size: 11px; color: var(--ink-dim); }
.pill-dim { margin-top: 3px; }
.ctor-pill.sel .pill-dim, .ctor-pill.sel .pill-price { color: rgba(255, 255, 255, .72); }
.ctor-dims { margin-top: 12px; font-size: 13px; color: var(--ink-dim); line-height: 1.6; }

/* option cards (shoulder / band) */
.ctor-cards { display: flex; gap: 12px; }
.ctor-card {
  flex: 1; border: 1px solid transparent; border-radius: 16px; background: var(--card);
  padding: 26px 0 18px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: background .25s var(--ease-io), border-color .25s var(--ease-io);
}
.ctor-card:hover:not(:disabled) { background: #f2f2ef; }
.ctor-card.sel { border-color: var(--ink); background: #f2f2ef; }
.ctor-card:disabled { opacity: .35; cursor: default; }
.ctor-card svg { width: 72px; height: 52px; stroke: var(--ink-faint); stroke-width: 5; fill: none; }
.ctor-card.sel svg { stroke: var(--ink); stroke-width: 6; }
.ctor-card .cl { font-size: 13px; color: var(--ink-dim); }
.ctor-card.sel .cl { color: var(--ink); }

/* sliders and rows */
.ctor-trow { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 16px; }
.ctor-trow b { font-size: 16px; font-weight: 400; letter-spacing: -0.02em; }
.ctor-dlabel { font-size: 14px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink-dim); margin: 30px 0 12px; }
input[type=range].ctor-relief {
  -webkit-appearance: none; appearance: none; width: 100%; height: 2px; border-radius: 2px; outline: none;
  background: linear-gradient(to right, var(--ink) 50%, var(--line) 50%);
  /* the slider owns horizontal drags: without this the step carousel swipes away
     the moment a finger moves sideways on the knob (vertical scroll still works) */
  touch-action: pan-y;
}
input[type=range].ctor-relief::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: none; cursor: pointer;
}
input[type=range].ctor-relief::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: none; }
.ctor-hint { margin-top: 14px; font-size: 13px; color: var(--ink-dim); line-height: 1.6; }
/* pointer, not width: a touch laptop deserves the wheel wording, and telling a
   phone about the right mouse button is just noise */
.ctor-hint-touch { display: none; }
@media (pointer: coarse) {
  .ctor-hint-mouse { display: none; }
  .ctor-hint-touch { display: inline; }
}

/* location step */
.ctor-searchwrap { position: relative; margin-bottom: 12px; }
.ctor-search {
  width: 100%; height: 48px; border: 0; border-radius: 12px;
  font-size: 15px; padding: 0 18px; outline: none; background: var(--card); color: var(--ink);
}
.ctor-search:focus { background: #f2f2ef; }
.ctor-search::placeholder { color: var(--ink-faint); }
.ctor-sugg {
  position: absolute; top: 52px; left: 0; right: 0; background: var(--paper); z-index: 30;
  border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .1);
  display: none; max-height: 260px; overflow-y: auto;
}
.ctor-sugg div { padding: 12px 18px; font-size: 13px; cursor: pointer; }
.ctor-sugg div:hover { background: var(--card); }
.ctor-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ctor-chip {
  height: 34px; padding: 0 14px; border-radius: 10px; background: #f2f2ef;
  font-size: 13px; transition: background .25s, color .25s;
}
.ctor-chip:hover { background: var(--ink); color: #fff; }
.ctor-maprow { position: relative; border-radius: var(--radius-card); overflow: hidden; }
.ctor-map { width: 100%; display: block; cursor: grab; background: #ededed; touch-action: none; }
.ctor-map:active { cursor: grabbing; }
.ctor-mapmode {
  position: absolute; left: 12px; top: 12px; display: flex;
  border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.ctor-mapmode button {
  height: 32px; padding: 0 12px; background: var(--paper); font-size: 12px;
  transition: background .25s, color .25s;
}
.ctor-mapmode button + button { border-left: 1px solid var(--line); }
.ctor-mapmode button.sel { background: var(--ink); color: #fff; }
.ctor-mapzoom {
  position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.ctor-maprotate {
  position: absolute; right: 12px; top: 138px; display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.ctor-maprotate button {
  width: 36px; height: 36px; background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s;
}
.ctor-maprotate button:hover { background: var(--card); }
.ctor-maprotate button + button { border-top: 1px solid var(--line); }
.ctor-maprotate svg { width: 17px; height: 17px; color: var(--ink); }
.ctor-mapzoom button {
  width: 36px; height: 36px; background: var(--paper); font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s;
}
.ctor-mapzoom button:hover { background: var(--card); }
.ctor-mapzoom button + button { border-top: 1px solid var(--line); }
.ctor-cneedle { transition: transform .15s; }
.ctor-scalebar {
  position: absolute; left: 12px; bottom: 12px; background: rgba(255, 255, 255, .8);
  font-size: 11px; color: #333; padding: 2px 8px; border-radius: 6px;
}
.ctor-mapattr {
  position: absolute; right: 8px; bottom: 8px; font-size: 10px; color: var(--ink-dim);
  background: rgba(255, 255, 255, .7); padding: 1px 8px; border-radius: 6px;
}
.ctor-bearing-row { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.ctor-bearing-row span { flex: 0 0 auto; font-size: 14px; color: var(--ink-dim); }
.ctor-bearing-row b { font-weight: 400; color: var(--ink); }

/* size step + order form */
.ctor-h2 { font-size: 28px; letter-spacing: -0.04em; line-height: 1.1; margin: 8px 0 16px; }
.ctor-body { font-size: 14px; line-height: 1.6; color: var(--ink-dim); margin-bottom: 18px; }
.ctor-flabel { font-size: 14px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink-dim); margin: 18px 0 10px; }
.ctor-select {
  width: 100%; height: 48px; border: 0; border-radius: 12px;
  font-size: 15px; padding: 0 18px; background-color: var(--card); appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%23787878' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat; background-position: right 18px center;
}
.ctor-sizeinfo { font-size: 14px; margin-top: 20px; color: var(--ink-dim); }
.ctor-sizeinfo div { margin-bottom: 8px; }
.ctor-sizeinfo b { color: var(--ink); font-weight: 400; }
.ctor-sizehelp { margin-top: 14px; border-radius: 12px; background: var(--card); }
.ctor-sizehelp summary {
  cursor: pointer; list-style: none; padding: 13px 18px; font-size: 14px; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
}
.ctor-sizehelp summary::-webkit-details-marker { display: none; }
.ctor-sizehelp summary::after { content: '+'; font-size: 17px; color: var(--ink-dim); }
.ctor-sizehelp[open] summary::after { content: '\2212'; }
.ctor-sizehelp-body { padding: 0 18px 16px; }
.ctor-sizehelp-body p { font-size: 13px; line-height: 1.6; color: var(--ink-dim); margin-bottom: 10px; }
.ctor-sizehelp-body p b { color: var(--ink); font-weight: 400; }
.ctor-sizetable { width: 100%; border-collapse: collapse; margin: 4px 0 12px; font-size: 12px; }
.ctor-sizetable th {
  text-align: left; font-weight: 400; color: var(--ink-dim); padding: 6px 8px 6px 0; white-space: nowrap;
}
.ctor-sizetable td { text-align: center; padding: 6px 4px; color: var(--ink); border-left: 1px solid var(--line); }
.ctor-sizetable tr + tr th, .ctor-sizetable tr + tr td { border-top: 1px solid var(--line); }
.ctor-radio-row { display: flex; gap: 22px; margin-bottom: 12px; }
.ctor-radio-row label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ctor-radio-row input { accent-color: var(--ink); }
.ctor-orderbtn-main {
  width: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; border-radius: 12px; padding: 15px;
  font-size: 16px; margin-top: 20px; transition: opacity .25s;
}
.ctor-orderbtn-main:hover { opacity: .85; }
.ctor-orderbtn-main.alt { background: #f2f2ef; color: var(--ink); margin-top: 10px; }
.ctor-orderbtn-main.alt:hover { opacity: 1; background: var(--line); }
.ctor-orderback { width: 100%; padding: 12px; margin-top: 6px; font-size: 14px; color: var(--ink-dim); }
.ctor-orderback:hover { color: var(--ink); }
.ctor-orderdone { padding: 40px 0; text-align: center; }
.ctor-orderdone .ctor-body { max-width: 320px; margin: 0 auto; }
.ctor-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ctor-shots img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 12px; background: var(--card); display: block;
}
.ctor-shots-note { font-size: 13px; color: var(--ink-dim); margin-bottom: 14px; }
.ctor-ordersum { background: var(--card); border-radius: 12px; padding: 4px 16px; margin-bottom: 12px; }
.os-row {
  display: flex; justify-content: space-between; gap: 16px; padding: 8px 0;
  font-size: 13px; color: var(--ink-dim); border-bottom: 1px solid var(--line);
}
.os-row:last-child { border-bottom: 0; }
.os-row b { color: var(--ink); font-weight: 400; text-align: right; }
.os-total {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--card); border-radius: 12px; padding: 13px 16px; margin-bottom: 14px;
  font-size: 13px; color: var(--ink-dim);
}
.os-total b { font-weight: 400; font-size: 16px; color: var(--ink); white-space: nowrap; }

/* footer: permanent order CTA */
.ctor-stepfoot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 20px;
  padding: 14px 32px 20px; border-top: 1px solid var(--line);
}
.ctor-nextbtn {
  background: var(--ink); color: #fff; font-size: 15px;
  padding: 14px 30px; border-radius: 12px; white-space: nowrap;
  transition: opacity .25s;
}
.ctor-nextbtn:hover { opacity: .85; }
.ctor-footrow { display: flex; gap: 10px; width: 100%; }
.ctor-nextbtn.wide { flex: 1 1 auto; }
.ctor-nextbtn[hidden] { display: none; }
.ctor-dots { display: none; }
.ctor-morebtn, .ctor-backbtn { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1023.98px) {
  /* app-like configurator: the render owns everything above the controls, and
     the controls live in a sheet you can drag down to look at the piece. Steps
     still swipe horizontally inside the sheet; the CTA row never leaves.
     --sheet is the sheet's height; JS resolves it to px and snaps it, but this
     default has to hold before the module runs. */
  .ctor-app { flex-direction: column; --sheet: 58dvh; }
  .ctor-stage {
    position: absolute; left: 0; right: 0; top: 0; bottom: var(--sheet);
    width: auto; height: auto; margin: 0; border-radius: 0;
    /* must ease in lockstep with the panel height below, or the render and the
       sheet drift apart for the length of the animation */
    transition: bottom .28s var(--ease-io);
  }
  .ctor-app.sheet-moving .ctor-stage { transition: none; }
  /* Small and quiet at the top of the render, where the progress bars used to
     be. The spec string ("ПОДВЕСКА · S 12 ММ · ДВА УШКА · ЦЕПЬ 45 СМ · СЕРЕБРО
     925") stays off the phone: it only restates the controls you just touched,
     wrapped to two lines across the piece, and the checkout slide already
     carries the full summary. */
  /* Spans the render so the place can sit at the top and the metal/weight at
     the bottom left, clear of the share button. pointer-events must go, or this
     box would swallow every orbit drag. */
  .ctor-prodinfo {
    inset: 12px 16px auto 16px; bottom: 10px; top: 12px;
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: space-between; pointer-events: none;
  }
  .ctor-prodname { display: none; }
  .ctor-place {
    font-size: 11px; margin: 0; max-width: 100%; color: var(--ink-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ctor-material { display: inline; }
  .ctor-prodprice { font-size: 11px; flex: 0 0 auto; color: var(--ink-dim); }
  .ctor-prodprice span { color: inherit; }
  .ctor-gramslabel { display: none; }   /* "4.6 г" reads fine after the metal */
  /* where you are, held still in the header while the slides move under it */
  .ctor-sheethead {
    display: block; flex: 0 0 auto;
    padding: 2px 20px 10px; border-bottom: 1px solid var(--line);
  }
  .ctor-sheetstep { display: flex; align-items: baseline; gap: 10px; }
  .ctor-steptitle {
    font-size: 14px; letter-spacing: -0.02em; text-transform: uppercase;
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* JS tags the one label that got hoisted into the header. Not a CSS selector:
     in "Размер" it is nested two divs deep and is followed by a second label
     ("Цепь") that has to stay, so neither :first-child nor :first-of-type finds
     the right one. */
  .ctor-stepbody .ctor-seclabel.hoisted { display: none; }
  /* ten presets wrapped into three rows and ate the step. One swipeable row
     instead, bleeding to both edges so it reads as scrollable.
     overscroll-behavior matters more than it looks: without it, a swipe that
     reaches the end of the chips chains to .ctor-stepbody and flips the step
     out from under the finger. */
  .ctor-chips {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: -20px; padding-inline: 20px;
  }
  .ctor-chips::-webkit-scrollbar { display: none; }
  .ctor-chip { flex: 0 0 auto; }
  .ctor-stagebtns { right: 12px; bottom: 12px; }
  .ctor-share, .ctor-stl { font-size: 12px; padding: 7px 13px; border-radius: 10px; }
  .ctor-panel {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
    width: 100%; height: var(--sheet); flex: 0 0 auto; min-height: 0;
    border-radius: 18px 18px 0 0; box-shadow: 0 -4px 24px rgba(0, 0, 0, .12);
    transition: height .28s var(--ease-io);
  }
  .ctor-app.sheet-moving .ctor-panel { transition: none; }
  /* grab handle: the whole strip is the target, the pill is just the cue */
  .ctor-grab {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 100%; height: 26px; padding: 0;
    background: none; border: 0; touch-action: none; cursor: grab;
  }
  .ctor-grab:active { cursor: grabbing; }
  .ctor-grab span { width: 38px; height: 4px; border-radius: 2px; background: var(--line); }
  .ctor-stepbody {
    display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; padding: 0;
  }
  .ctor-stepbody section[data-step] {
    flex: 0 0 100%; scroll-snap-align: start; overflow-y: auto;
    margin: 0; border-top: 0; border-right: 1px solid var(--line);
    padding: 12px 20px 12px;
  }
  /* the step number and title now live in the sheet header, which holds still
     while the slides move under it — the slide itself no longer prints them */
  /* the home indicator sits over the last ~34px on a notched iPhone, and this
     row holds the pay button — it has to clear it */
  .ctor-stepfoot { padding: 12px 20px max(14px, env(safe-area-inset-bottom)); }
  /* only Далее until the last step; the pay CTA takes over at the end */
  .ctor-morebtn {
    display: block; flex: 1 1 auto; background: var(--ink); color: #fff;
    font-size: 15px; padding: 14px 24px; border-radius: 12px;
    transition: opacity .25s;
  }
  .ctor-morebtn:hover { opacity: .85; }
  .ctor-backbtn {
    display: block; flex: 0 0 auto; background: #f2f2ef; color: var(--ink);
    font-size: 15px; padding: 14px 22px; border-radius: 12px;
    transition: background .25s;
  }
  .ctor-backbtn:hover { background: var(--line); }
  .ctor-footrow:not(.atend) .ctor-nextbtn.wide { display: none; }
  .ctor-footrow.atend .ctor-morebtn { display: none; }
  .ctor-footrow.atstart .ctor-backbtn { display: none; }
  /* step segments over the render. They jump between steps, so they are real
     buttons — but the bar itself is 3px tall, which is no target at all. The
     padding grows the box to 27x32 and the negative margin puts the bar back
     exactly where it was; ::before draws it inside the padding. */
  /* in the sheet header now, in flow — the render carries the place instead */
  .ctor-dots { display: flex; position: static; gap: 6px; margin-bottom: 14px; }
  /* box-sizing is border-box globally, so height+padding cannot be used to grow
     this: the padding would eat the 3px and leave a zero-tall bar. Size the
     button outright and draw the bar with ::before instead. */
  .ctor-dot {
    position: relative; width: 32px; height: 27px; padding: 0;
    margin: -12px -3px; background: none; border-radius: 0;
  }
  .ctor-dot::before {
    content: ''; position: absolute; left: 3px; right: 3px; top: 12px; height: 3px;
    border-radius: 2px; background: rgba(28, 28, 28, .18); transition: background .25s;
  }
  .ctor-dot.done::before { background: rgba(28, 28, 28, .45); }
  .ctor-dot.on::before { background: var(--ink); }
}
@media (max-width: 809.98px) {
  .ctor-formrow { grid-template-columns: repeat(2, 1fr); }
  /* square photos pushed the second row of forms below the fold — 4:3 puts all
     four on screen without scrolling, which is the whole point of this step */
  .ctor-formcard img { aspect-ratio: 4 / 3; }
  .ctor-formcard .fc-text b { font-size: 13px; margin-top: 6px; }
  .ctor-cards { flex-wrap: wrap; }
  .ctor-card { min-width: 40%; }
  .ctor-pill { flex: 1 1 30%; }
}