/* «Мебель на заказ» — калькулятор в новом стиле. Макет design-mockups/mebel-na-zakaz.html
   («да» владельца 25.09.2026: каркас фанера и скрыт, наценка 50 %, «Примеры работ» оставить,
   расход ткани показывать, вторая глубина для углового и П-образного).
   Считает НЕ эта страница: цену и расход даёт рабочий калькулятор ERP в скрытой рамке
   (/kalkulyator-divana/), формулы не тронуты. Логика — js/zakaz-calc.js. */
:root {
  --zc-accent: #C8763C;
  --zc-page: #0F0A08; --zc-card: #17100C; --zc-strong: #F5ECE2; --zc-text: #E9DFD3; --zc-nav: #CFC3B4;
  --zc-muted: #A08E7C; --zc-line: rgba(200,118,60,.18); --zc-field: rgba(255,240,225,.06);
  --zc-on: #2A1F18; --zc-sh: 0 1px 4px rgba(0,0,0,.4);
  --zc-ico: invert(92%) sepia(8%) saturate(300%) hue-rotate(340deg);
}
html[data-theme="light"] {
  --zc-page: #F4EEE5; --zc-card: #FFFFFF; --zc-strong: #20150E; --zc-text: #2B1E16; --zc-nav: #4A3A2E;
  --zc-muted: #6E5B4B; --zc-line: rgba(140,85,40,.16); --zc-field: #F3EDE4;
  --zc-on: #FFFFFF; --zc-sh: 0 1px 4px rgba(60,35,15,.14);
  --zc-ico: invert(10%) sepia(20%) saturate(600%) hue-rotate(340deg);
}
.zc, .zc-hero, .zc-ex { font-family: 'Onest', system-ui, sans-serif; color: var(--zc-text); }
.zc *, .zc-hero *, .zc-ex * { box-sizing: border-box; }
.zc a, .zc-hero a, .zc-ex a { color: inherit; text-decoration: none; }
:where(.zc) button { font-family: inherit; line-height: 1.3; color: inherit; background: transparent; border: 0; cursor: pointer; margin: 0; }
.zc-type, .zc-fab, .zc-chip, .zc-seg button { font-family: 'Onest', system-ui, sans-serif; line-height: 1.3; text-transform: none; letter-spacing: 0; }
.zc :focus-visible, .zc-ex :focus-visible { outline: 2px solid var(--zc-accent); outline-offset: 2px; }
.zc-wrap { max-width: 1600px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.zc-sec { background: var(--zc-page); }

/* первый экран */
.zc-hero .zc-wrap { padding-top: 56px; padding-bottom: 36px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.zc-crumbs { font-size: 13px; color: var(--zc-muted); display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.zc-crumbs a:hover { color: var(--zc-accent); }
.zc-hero h1 { font-family: 'Unbounded', sans-serif !important; font-weight: 200 !important; font-size: clamp(34px, 4vw, 56px) !important;
  letter-spacing: -.02em !important; line-height: 1.05 !important; text-transform: none !important; color: var(--zc-strong); margin: 18px 0 0; }
.zc-hero h1 em { font-style: normal; font-weight: 300; color: var(--zc-accent); display: block; }
.zc-hero p { font-size: 17px; line-height: 1.6; color: var(--zc-nav); margin: 18px 0 0; max-width: 640px; font-family: inherit; }
.zc-facts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; max-width: 520px; }
.zc-facts span { padding: 9px 16px; border-radius: 999px; background: var(--zc-field); font-size: 13px; color: var(--zc-text); }

/* калькулятор */
.zc .zc-wrap { padding-bottom: 96px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; align-items: start; }
.zc-form, .zc-sum { min-width: 0; }
.zc-form { background: var(--zc-card); border: 1px solid var(--zc-line); border-radius: 24px; padding: 12px 36px; }
.zc-step { padding: 30px 0; border-bottom: 1px solid var(--zc-line); }
.zc-step:last-child { border-bottom: 0; }
.zc-sh { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.zc-sh b { font-family: 'Unbounded', sans-serif; font-weight: 300; font-size: 13px; color: var(--zc-accent); }
.zc-sh h2, .zc-sh h3 { font-family: 'Unbounded', sans-serif !important; font-weight: 300 !important; font-size: 21px !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--zc-strong); margin: 0; line-height: 1.2; }
.zc-sh small { margin-left: auto; font-size: 13px; color: var(--zc-muted); }
.zc-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.zc-type { border-radius: 16px; background: var(--zc-field); padding: 18px 10px 14px; text-align: center; border: 1px solid transparent !important; transition: border-color .15s, background .15s; }
.zc-type img { height: 40px; width: auto; max-width: 90%; filter: var(--zc-ico); opacity: .9; display: inline-block; }
.zc-type span { display: block; font-size: 14px; color: var(--zc-nav); margin-top: 12px; }
.zc-type:hover { border-color: rgba(200,118,60,.4) !important; }
.zc-type[aria-pressed="true"] { border-color: var(--zc-accent) !important; background: rgba(200,118,60,.10); }
.zc-type[aria-pressed="true"] span { color: var(--zc-strong); }
.zc-dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.zc-dims.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zc-fld > label, .zc-lbl { display: block; font-size: 13px; color: var(--zc-muted); margin-bottom: 8px; }
.zc-inp { height: 56px; border-radius: 14px; background: var(--zc-field); display: flex; align-items: center; gap: 8px; padding: 0 18px; border: 1px solid transparent; }
.zc-inp:focus-within { border-color: rgba(200,118,60,.6); }
.zc-inp input { flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important;
  font: 400 20px 'Onest', system-ui, sans-serif; color: var(--zc-strong); padding: 0 !important; -moz-appearance: textfield; }
.zc-inp input::-webkit-outer-spin-button, .zc-inp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zc-inp span { font-size: 13px; color: var(--zc-muted); }
.zc-rng { margin-top: 12px; }
.zc-rng input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; margin: 8px 0; padding: 0;
  background: linear-gradient(90deg, var(--zc-accent) var(--p, 50%), var(--zc-line) var(--p, 50%)) !important; border: 0 !important; outline: 0; cursor: pointer; }
.zc-rng input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--zc-card); border: 2px solid var(--zc-accent); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.zc-rng input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--zc-card); border: 2px solid var(--zc-accent); }
.zc-rng input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--zc-accent); outline-offset: 2px; }
.zc-rng > div { display: flex; justify-content: space-between; font-size: 11px; color: var(--zc-muted); }
.zc-hint { font-size: 12px; color: var(--zc-muted); margin-top: 8px; line-height: 1.45; }
.zc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.zc-chip { white-space: nowrap; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--zc-line) !important; font-size: 13px; color: var(--zc-nav); transition: border-color .15s, background .15s; }
.zc-chip:hover { border-color: rgba(200,118,60,.5) !important; }
.zc-chip[aria-pressed="true"] { border-color: var(--zc-accent) !important; color: var(--zc-strong); background: rgba(200,118,60,.10); }
.zc-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 22px; }
.zc-seg { display: flex; padding: 4px; border-radius: 999px; background: var(--zc-field); }
.zc-seg button { flex: 1; text-align: center; padding: 11px 6px; border-radius: 999px; font-size: 14px; color: var(--zc-muted); transition: background .15s; }
.zc-seg button[aria-pressed="true"] { background: var(--zc-on); box-shadow: var(--zc-sh); color: var(--zc-strong); }
#zcArmBlock { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zc-step-n { display: inline-flex; align-items: center; gap: 6px; padding: 4px; border-radius: 999px; background: var(--zc-field); }
.zc-step-n button { width: 40px; height: 40px; border-radius: 50%; font-size: 20px; color: var(--zc-strong); display: flex; align-items: center; justify-content: center; }
.zc-step-n button:hover { background: rgba(200,118,60,.12); }
.zc-step-n output { min-width: 34px; text-align: center; font: 400 18px 'Onest', system-ui, sans-serif; color: var(--zc-strong); }
.zc-fabrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.zc-fab { border-radius: 14px; background: var(--zc-field); padding: 14px 12px; border: 1px solid transparent !important; text-align: left; }
.zc-fab i { display: block; height: 36px; border-radius: 8px; margin-bottom: 10px; }
.zc-fab b { display: block; font-weight: 400; font-size: 14px; color: var(--zc-strong); }
.zc-fab small { font-size: 12px; color: var(--zc-muted); }
.zc-fab[aria-pressed="true"] { border-color: var(--zc-accent) !important; background: rgba(200,118,60,.10); }
.zc-sub { font-size: 13px; color: var(--zc-muted); margin: 22px 0 0; }
.zc-sub:first-child { margin-top: 0; }
.zc [hidden] { display: none !important; }

/* итог */
.zc-sum { position: sticky; top: 108px; background: var(--zc-card); border: 1px solid var(--zc-line); border-radius: 24px; padding: 30px; }
.zc-k { font-size: 12px; letter-spacing: .3em; color: var(--zc-accent); }
.zc-price { font-family: 'Unbounded', sans-serif; font-weight: 200; font-size: 46px; letter-spacing: -.02em; color: var(--zc-strong); margin: 14px 0 6px; line-height: 1.1; }
.zc-price.is-wait { opacity: .45; }
.zc-note { font-size: 13px; line-height: 1.55; color: var(--zc-muted); margin: 0; }
.zc-spec { margin: 22px 0; border-top: 1px solid var(--zc-line); }
.zc-spec div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--zc-line); font-size: 14px; }
.zc-spec span { color: var(--zc-muted); }
.zc-spec b { font-weight: 400; color: var(--zc-strong); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.zc-lead input[type="text"], .zc-lead input[type="tel"] { display: block; width: 100%; height: 52px; border-radius: 999px; background: var(--zc-field) !important;
  border: 1px solid transparent !important; padding: 0 20px !important; font: 400 15px 'Onest', system-ui, sans-serif; color: var(--zc-strong); margin-top: 10px; outline: 0; box-shadow: none !important; }
.zc-lead input:focus { border-color: rgba(200,118,60,.6) !important; }
.zc-lead input::placeholder { color: var(--zc-muted); opacity: 1; }
.zc-b1 { display: flex; width: 100%; align-items: center; justify-content: center; height: 56px; border-radius: 999px; background: var(--zc-accent) !important; color: #fff !important; font-size: 16px; margin-top: 14px; transition: background .15s; }
.zc-b1:hover { background: #B8692F !important; }
.zc-b1:disabled { opacity: .7; cursor: default; }
.zc-b2 { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px; border: 1px solid rgba(200,118,60,.6); color: var(--zc-strong) !important; font-size: 15px; margin-top: 10px; }
.zc-b2:hover { background: rgba(200,118,60,.06); }
.zc-small { font-size: 12px; color: var(--zc-muted); text-align: center; margin: 12px 0 0; }
.zc-engine { position: absolute; left: -10000px; top: 0; width: 1280px; height: 900px; border: 0; visibility: hidden; pointer-events: none; }
.zc-bar { display: none; }

/* примеры работ */
.zc-ex { background: var(--zc-page); }
.zc-ex .zc-wrap { padding-top: 8px; padding-bottom: 96px; }
.zc-ex-h { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 24px; }
.zc-ex-h h2 { font-family: 'Unbounded', sans-serif !important; font-weight: 200 !important; font-size: clamp(28px, 3vw, 40px) !important;
  letter-spacing: -.02em !important; text-transform: none !important; color: var(--zc-strong); margin: 0; line-height: 1.1; }
.zc-ex-h a { font-size: 14px; color: var(--zc-accent); white-space: nowrap; }
.zc-ex-p { font-size: 16px; line-height: 1.6; color: var(--zc-nav); margin: -10px 0 26px; max-width: 760px; }
.zc-ex-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.zc-ex-h .zc-k { margin-bottom: 12px; }
.zc-ex-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.zc-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #1A120D; isolation: isolate; }
.zc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; z-index: -1; }
.zc-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,10,8,0) 35%, rgba(15,10,8,.55) 62%, rgba(15,10,8,.9) 100%); }
.zc-card:hover img { transform: scale(1.04); }
.zc-card-t { position: absolute; left: 20px; right: 56px; bottom: 18px; display: block; color: #F5ECE2; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.zc-card-t small { display: block; font-size: 12px; letter-spacing: .08em; color: rgba(245,236,226,.75); }
.zc-card-t b { display: block; font-family: 'Unbounded', sans-serif; font-weight: 300; font-size: 19px; color: #F5ECE2; margin: 4px 0 6px; }
.zc-card-t em { font-style: normal; font-size: 14px; color: #F4D27A; }
.zc-card i { position: absolute; right: 18px; bottom: 18px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(245,236,226,.45);
  display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 15px; color: #F5ECE2; transition: background .2s, border-color .2s; }
.zc-card:hover i { background: var(--zc-accent); border-color: var(--zc-accent); }

@media (max-width: 1200px) {
  .zc .zc-wrap { grid-template-columns: minmax(0, 1fr) 360px; }
  .zc-fabrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .zc-hero .zc-wrap { display: block; padding-top: 28px; padding-bottom: 22px; }
  .zc-facts { justify-content: flex-start; margin-top: 16px; }
  .zc .zc-wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-left: 16px; padding-right: 16px; padding-bottom: 110px; }
  .zc-form { padding: 4px 18px; border-radius: 20px; }
  .zc-seg button { padding: 11px 2px; font-size: 13px; }
  .zc-fld > label, .zc-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zc-sum { position: static; border-radius: 20px; padding: 24px 20px; }
  .zc-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zc-dims, .zc-dims.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zc-row2, #zcArmBlock { grid-template-columns: minmax(0, 1fr); }
  .zc-fabrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zc-ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .zc-card { border-radius: 14px; aspect-ratio: 1 / 1; }
  .zc-card-t { left: 12px; right: 12px; bottom: 12px; }
  .zc-card-t b { font-size: 15px; }
  .zc-card-t em { font-size: 13px; }
  .zc-card i { display: none; }
  .zc-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--zc-card); border-top: 1px solid var(--zc-line);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); align-items: center; justify-content: space-between; gap: 12px;
    transform: translateY(110%); transition: transform .2s ease; font-family: 'Onest', system-ui, sans-serif; }
  .zc-bar.is-on { transform: none; }
  .zc-bar small { display: block; font-size: 11px; color: var(--zc-muted); }
  .zc-bar b { font-family: 'Unbounded', sans-serif; font-weight: 300; font-size: 21px; color: var(--zc-strong); }
  .zc-bar a { height: 48px; padding: 0 20px; border-radius: 999px; background: var(--zc-accent); color: #fff !important; display: flex; align-items: center; font-size: 14px; text-decoration: none; }
  html.zc-bar-on .telegram-float-btn { bottom: 92px !important; }
}