/* ============================================================
   CONSTRUCTOR — мобильный экран (v6)
   Полноэкранное приложение: шапка · чипсы разделов · скролл ·
   нижняя панель · оверлей схемы. Показывается только ≤760px,
   десктопная разметка страницы там скрыта целиком.
   ============================================================ */
.m6-app { display: none; }

@media (max-width: 760px) {
  /* Мобильный экран заменяет только десктопную сетку конструктора. Шапка сайта,
     хлебные крошки, заголовок и подвал остаются такими же, как на других
     страницах. Класс cn-m6 ставится, только когда экран отрисован. */
  body.cn-m6 .cn-layout { display: none !important; }

  /* Шапка страницы и разделы — одно полотно, без отдельной подложки у заголовка */
  body.cn-m6 { background: var(--paper); }

  .cn-m6 .m6-app {
    display: block;
    background: var(--paper); color: var(--ink);
    -webkit-tap-highlight-color: transparent;
  }
}

.m6-app * { box-sizing: border-box; }
.m6-app button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.m6-app input { font: inherit; color: inherit; }
.m6-app [hidden] { display: none !important; }

/* ---------- полотно разделов ---------- */
.m6-scroll { display: block; padding: 0; background: var(--paper); }
.m6-app .sec { padding: 18px 16px 22px; }
.m6-app .sec + .sec { border-top: 1px solid var(--line); }
/* Заголовок раздела: рукописный номер и название в одну строку */
.m6-app .hd {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px;
}
.m6-app .hd .n {
  flex: none;
  font-family: 'English111VivaceBT', cursive;
  font-size: 30px; line-height: 1; color: var(--accent);
}
.m6-app .hd h2 {
  flex: 1; min-width: 0; margin: 0;
  font-family: 'Cormorant', serif; font-size: 26px; font-weight: 400; line-height: 1.05;
}
.m6-app .see {
  flex: none; align-self: center;
  height: 30px; padding: 0 11px 0 9px; border-radius: 999px;
  border: 1px solid var(--line-2); display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.m6-app .see svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.m6-app .see:active { background: var(--cream-2); }

/* ---------- контролы ---------- */
.m6-app .lbl {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 700; margin: 0 0 9px;
}
.m6-app .lbl b { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 600; }
.m6-app .lbl--gap { margin-top: 14px; }
/* Разделитель между подблоками. `.rows + .sub` — цвет под списком тканей:
   без этого он прилипает к последней карточке. */
.m6-app .sub + .sub,
.m6-app .rows + .sub { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }

.m6-app .rows { display: flex; flex-direction: column; gap: 8px; }
.m6-app .row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  text-align: left; transition: 0.18s;
}
.m6-app .row b { font-size: 15px; font-weight: 600; line-height: 1.2; }
.m6-app .row span { grid-column: 1; font-size: 12px; color: var(--muted); line-height: 1.35; }
.m6-app .row span:empty { display: none; }
.m6-app .row[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }

.m6-app .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m6-app .tile {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px;
  text-align: left; min-height: 76px; transition: 0.18s;
}
.m6-app .tile b { font-size: 14.5px; font-weight: 600; line-height: 1.15; }
.m6-app .tile span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--muted);
}
.m6-app .tile span:empty { display: none; }
.m6-app .tile[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; background: #FCFBF8; }
.m6-app .tile.wide { grid-column: 1 / 3; flex-direction: row; align-items: center; gap: 10px; min-height: 60px; }
.m6-app .tile.wide b { flex: none; }
.m6-app .tile.wide span { flex: 1; }
.m6-app .tile.is-none { opacity: 0.5; }

.m6-app .seg { display: flex; gap: 6px; padding: 4px; background: var(--cream-2); border-radius: 12px; }
.m6-app .seg button {
  flex: 1; min-width: 0; min-height: 48px; padding: 6px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; line-height: 1.15; transition: 0.18s;
}
.m6-app .seg button small { font-size: 9.5px; font-weight: 500; opacity: 0.75; text-align: center; }
.m6-app .seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(60, 45, 20, 0.14); }
/* Совместимые модели выбираются вместе — нажатых кнопок может быть несколько */
.m6-app .seg.multi button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* Flex, а не grid: без подписи строка должна схлопываться в одну, иначе
   название прижимается к верху, а степпер центрируется по пустой второй строке. */
.m6-app .qrow {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 14px; border: 1px solid var(--line); border-radius: 12px;
}
.m6-app .qrow.act { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.m6-app .qrow .q-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m6-app .qrow b { font-size: 15px; font-weight: 600; }
.m6-app .qrow .q-main span { font-size: 11.5px; color: var(--muted); }
.m6-app .qrow .q-main span:empty { display: none; }
.m6-app .stp {
  flex: none; display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--line-2); border-radius: 999px; padding: 2px;
}
.m6-app .stp button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; line-height: 1; color: var(--muted); }
.m6-app .stp button:active { background: var(--cream-2); }
.m6-app .stp button:disabled { opacity: 0.28; }
.m6-app .stp .v { min-width: 20px; text-align: center; font-size: 15px; }

.m6-app .cust { display: none; margin-top: 8px; padding: 14px; border-radius: 12px; background: var(--cream-2); }
.m6-app .cust.on { display: block; }
.m6-app .dims { display: flex; flex-wrap: wrap; gap: 10px; }
.m6-app .dim { flex: 1; min-width: calc(50% - 5px); }
.m6-app .dim--full { flex-basis: 100%; }
.m6-app .dim--full .seg { background: var(--paper); }
.m6-app .dim--full .seg button { min-height: 40px; }
.m6-app .dim label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.m6-app .dim .ct {
  display: flex; align-items: center; height: 46px; padding: 0 4px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
}
.m6-app .dim .ct button { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; font-size: 19px; color: var(--muted); }
.m6-app .dim .ct input {
  flex: 1; min-width: 0; border: 0; background: none; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; font-weight: 500; appearance: textfield; -moz-appearance: textfield;
}
.m6-app .dim .ct input::-webkit-outer-spin-button,
.m6-app .dim .ct input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.m6-app .dim .ct u { text-decoration: none; font-size: 11px; color: var(--muted-2); padding-right: 6px; }
.m6-app .cust .out {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-2);
}
.m6-app .cust .out > span { font-size: 11.5px; color: var(--muted); line-height: 1.35; }

.m6-app .sws { display: flex; gap: 12px; flex-wrap: wrap; }
.m6-app .sw { width: 30px; height: 30px; border-radius: 50%; position: relative; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09) inset; }
.m6-app .sw::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--ink); opacity: 0; transition: 0.18s;
}
.m6-app .sw[aria-pressed="true"]::after { opacity: 1; }

.m6-app .note { display: flex; gap: 9px; margin: 12px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.m6-app .note svg {
  flex: none; width: 14px; height: 14px; margin-top: 1px; opacity: 0.7;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- итог ---------- */
.m6-app .tgl {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  text-align: left; margin-bottom: 12px;
}
.m6-app .tgl b { flex: 1; min-width: 0; }
.m6-app .tgl .bx { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); position: relative; transition: 0.16s; }
.m6-app .tgl .bx::after {
  content: ''; position: absolute; left: 6px; top: 3px; width: 6px; height: 11px;
  border: solid var(--cream); border-width: 0 1.8px 1.8px 0;
  transform: rotate(42deg) scale(0.6); opacity: 0; transition: 0.16s;
}
.m6-app .tgl b { font-size: 14px; font-weight: 600; }
.m6-app .tgl i { flex: none; font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.m6-app .tgl[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.m6-app .tgl[aria-pressed="true"] .bx { background: var(--ink); border-color: var(--ink); }
.m6-app .tgl[aria-pressed="true"] .bx::after { opacity: 1; transform: rotate(42deg) scale(1); }
.m6-app .tgl[aria-pressed="true"] i { color: var(--ink); }

/* Как и у .qrow — flex, чтобы строка без подписи была ровно по центру */
.m6-app .tline {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.m6-app .tline .t-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m6-app .tline b { font-size: 14px; font-weight: 600; }
.m6-app .tline em { font-style: normal; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.m6-app .tline em:empty { display: none; }
.m6-app .tline i { flex: none; font-style: normal; font-size: 14px; font-weight: 600; text-align: right; }
.m6-app .tsum { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0 2px; }
.m6-app .tsum span { font-size: 12px; color: var(--muted); }
.m6-app .tsum b { font-family: 'Cormorant', serif; font-size: 30px; font-weight: 600; }
.m6-app .m6-comment {
  width: 100%; resize: vertical; min-height: 76px; padding: 11px 13px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper);
  font: inherit; font-size: 13.5px; color: var(--ink); line-height: 1.45;
}
.m6-app .m6-comment:focus { outline: none; border-color: var(--ink); }
.m6-app .m6-comment::placeholder { color: var(--muted-2); }

/* ---------- кнопка в корзину ---------- */
/* Селектор с .m6-app обязателен: сброс `.m6-app button` специфичнее одного класса
   и иначе съедает фон и отступы кнопки. */
.m6-app .m6-cta {
  flex: none; height: 46px; padding: 0 22px; border-radius: 999px;
  background: var(--ink); color: var(--cream);
  font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px;
  transition: transform 0.15s;
}
.m6-app .m6-cta:active { transform: scale(0.97); }
.m6-app .m6-cta:disabled { opacity: 0.6; }
.m6-app .m6-cta--wide { width: 100%; justify-content: center; margin-top: 16px; }
.m6-app .m6-cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   Схема — оверлей. Единица сцены = 1 см, кадрирует JS.
   ============================================================ */
/* Пока открыта схема, страница под ней не скроллится */
body.m6-map-open { overflow: hidden; }

/* Схема — поверх всей страницы, поэтому fixed, а не absolute */
.mapover {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; flex-direction: column; background: var(--cream);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.26s, transform 0.26s, visibility 0.26s;
}
.mapover.on { opacity: 1; visibility: visible; transform: none; }
.mo-top {
  flex: none; height: calc(52px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 6px 0 16px;
  display: flex; align-items: center; gap: 10px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.mo-top .l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mo-top .l b { font-family: 'Cormorant', serif; font-size: 18px; font-weight: 600; line-height: 1.1; }
.mo-top .l span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-2);
}
.mo-top .x { width: 44px; height: 44px; display: grid; place-items: center; }
.mo-top .x svg { width: 19px; height: 19px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }

.m6-map {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #FAF7F1 0%, #EFE9DD 62%, #E4DBCA 100%);
}
.m6-map .scene {
  position: absolute; left: 0; top: 0; width: 300px; height: 400px;
  transform-origin: 0 0; --k: 1; --bed: #F2EBE0; --hair: calc(1px / var(--k));
}
.m6-map .scene > * { position: absolute; }
.m6-map .dimlayer { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.m6-map .dimlayer > * { position: absolute; }
.m6-map .grid {
  left: -300px; top: -300px; width: 1100px; height: 1100px;
  background-image:
    linear-gradient(to right, rgba(120, 108, 86, 0.13) 0, rgba(120, 108, 86, 0.13) var(--hair), transparent var(--hair)),
    linear-gradient(to bottom, rgba(120, 108, 86, 0.13) 0, rgba(120, 108, 86, 0.13) var(--hair), transparent var(--hair));
  background-size: 10px 10px;
}
.m6-map .pt {
  transition: left 0.42s cubic-bezier(0.4, 0, 0.2, 1), top 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.42s cubic-bezier(0.4, 0, 0.2, 1), height 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}
.m6-map .p-head { border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #D6C9B3, #C4B69C); }
.m6-map .p-mat {
  border-radius: 5px; background: color-mix(in oklab, var(--bed) 22%, white);
  box-shadow: 0 1px 3px rgba(60, 45, 20, 0.18), 0 0 0 var(--hair) color-mix(in oklab, var(--bed) 45%, white) inset;
}
.m6-map .p-mat .el {
  position: absolute; inset: 3px; border-radius: 3px;
  border: var(--hair) dashed color-mix(in oklab, var(--bed) 55%, white);
  opacity: 0; transition: opacity 0.3s;
}
.m6-map .scene.elastic .p-mat .el { opacity: 1; }
.m6-map .scene.nosheet .p-mat { background: transparent; box-shadow: 0 0 0 var(--hair) rgba(120, 108, 86, 0.45) inset; }
.m6-map .p-duvet {
  border-radius: 5px;
  background: linear-gradient(150deg, color-mix(in oklab, var(--bed) 88%, white), var(--bed) 55%, color-mix(in oklab, var(--bed) 78%, black));
  box-shadow: 0 2px 6px rgba(60, 45, 20, 0.22);
}
.m6-map .p-duvet .fold {
  position: absolute; left: 0; right: 0; top: 0; height: 9px;
  background: color-mix(in oklab, var(--bed) 70%, white);
  border-bottom: var(--hair) solid rgba(0, 0, 0, 0.08);
}
.m6-map .p-duvet .gap {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2.5px; transform: translateX(-50%);
  display: none; background: color-mix(in oklab, var(--bed) 60%, black); opacity: 0.35;
}
.m6-map .scene.family .p-duvet .gap { display: block; }
.m6-map .p-pillows { display: flex; align-items: flex-start; justify-content: center; }
.m6-map .pil {
  border-radius: 3px; flex: none; position: relative;
  background: linear-gradient(160deg, #fff, color-mix(in oklab, var(--bed) 40%, white));
  box-shadow: 0 1px 3px rgba(60, 45, 20, 0.2);
}
.m6-map .pil .in {
  position: absolute; inset: 1.5px; border-radius: 2px; opacity: 0.9;
  border: var(--hair) solid color-mix(in oklab, var(--bed) 45%, white);
}

.m6-map .scene .pt { opacity: 1; }
.m6-map .scene[data-focus="duvet"] .p-mat,
.m6-map .scene[data-focus="duvet"] .p-head,
.m6-map .scene[data-focus="duvet"] .p-pillows { opacity: 0.34; }
.m6-map .scene[data-focus="pillow"] .p-mat,
.m6-map .scene[data-focus="pillow"] .p-head,
.m6-map .scene[data-focus="pillow"] .p-duvet { opacity: 0.34; }
.m6-map .scene[data-focus="sheet"] .p-duvet,
.m6-map .scene[data-focus="sheet"] .p-pillows { opacity: 0.3; }

.m6-map .dimh, .m6-map .dimv { pointer-events: none; }
.m6-map .dimh { border-top: var(--hair) solid #9B917E; }
.m6-map .dimh::before, .m6-map .dimh::after {
  content: ''; position: absolute; top: calc(-2px / var(--k));
  width: var(--hair); height: calc(5px / var(--k)); background: #9B917E;
}
.m6-map .dimh::before { left: 0; }
.m6-map .dimh::after { right: 0; }
.m6-map .dimv { border-left: var(--hair) solid #9B917E; }
.m6-map .dimv::before, .m6-map .dimv::after {
  content: ''; position: absolute; left: calc(-2px / var(--k));
  height: var(--hair); width: calc(5px / var(--k)); background: #9B917E;
}
.m6-map .dimv::before { top: 0; }
.m6-map .dimv::after { bottom: 0; }
.m6-map .dimh > span, .m6-map .dimv > span {
  position: absolute; white-space: nowrap; line-height: 1.4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(10px / var(--k)); color: #6E6555;
  background: rgba(250, 247, 241, 0.92);
  padding: calc(2px / var(--k)) calc(5px / var(--k));
  border-radius: calc(20px / var(--k));
}
.m6-map .dimh > span { left: 50%; top: 0; transform: translate(-50%, -50%); }
.m6-map .dimv > span { top: 50%; left: 0; transform: translate(-50%, -50%) rotate(-90deg); }

.hud-scale {
  position: absolute; right: 14px; bottom: 12px;
  display: flex; align-items: center; gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; color: #8B816F; letter-spacing: 0.06em; text-transform: uppercase;
}
.hud-scale i { display: block; height: 5px; width: 50px; border: 1px solid #A69C89; border-top: 0; }
.hud-hint { position: absolute; left: 14px; bottom: 12px; font-size: 10.5px; color: #8B816F; white-space: nowrap; }

.mo-tabs { flex: none; display: flex; gap: 7px; overflow-x: auto; padding: 11px 14px 0; background: var(--paper); scrollbar-width: none; }
.mo-tabs::-webkit-scrollbar { display: none; }
.mo-tabs button {
  flex: none; height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-2); font-size: 13px; font-weight: 600;
  color: var(--muted); white-space: nowrap; transition: 0.2s;
}
.mo-tabs button.on { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.mo-foot {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); background: var(--paper);
}
.mo-foot .l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mo-foot .l b { font-family: 'Cormorant', serif; font-size: 20px; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-foot .l span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-foot .go { flex: none; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--ink); font-size: 13.5px; font-weight: 600; }
.mo-foot .go:active { background: var(--cream-2); }

@media (prefers-reduced-motion: reduce) {
  .m6-map .pt { transition: none; }
}