/* Конструктор «ПоПлечу»: каркас рабочей поверхности (office/tasks/T-02-karkas.md).
   Все правила живут внутри корня .constructor — его потом переносят в сайт целиком.
   Широкий экран от 900 px: три колонки. Узкий до 899 px: вещь на весь экран, цена сверху,
   нижнее меню и панели снизу.
   Формы: кнопки и карточки — радиус --radius-control, панели и окна — --radius-panel,
   вложенный вариант внутри переключателя — --radius-inner, чипсы цены и круглые кнопки —
   --radius-round. Кружки цвета круглые по смыслу: это образец ткани. */

/* ---- Шрифты: Onest для интерфейса, Unbounded только для названия; кириллица и знак ₽ ---- */

@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/onest-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/onest-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/onest-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/onest-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/onest-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/onest-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/onest-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/onest-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/onest-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/onest-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/onest-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/onest-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/unbounded-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/unbounded-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- Токены: холодный сланцевый серый + один ржаво-терракотовый акцент ---- */

.constructor {
  --color-page: #E7EAED;
  --color-stage: #DCE0E4;
  --color-surface: #F4F5F7;
  --color-raised: #FBFBFC;
  --color-ink: #16191D;
  --color-ink-muted: #59616B;
  --color-line: #CDD3D9;
  --color-line-strong: #A9B1BA;
  --color-accent: #B9441E;
  --color-accent-hover: #9E3818;
  --color-accent-ink: #FDF6F2;
  --color-accent-soft: #F3DED4;
  --color-overlay: rgb(14 17 21 / 0.58);
  --color-inverse: #1D2126;
  --color-inverse-ink: #F1F2F4;
  --garment-outline-base: #000;

  --shadow-raised: 0 10px 28px rgb(28 34 41 / 0.14), 0 2px 6px rgb(28 34 41 / 0.08);
  --shadow-soft: 0 1px 2px rgb(28 34 41 / 0.10);

  --padding-micro: 4px;
  --padding-small: 8px;
  --padding-middle: 16px;
  --padding-large: 24px;

  --radius-inner: 7px;
  --radius-control: 10px;
  --radius-panel: 16px;
  --radius-round: 999px;

  --touch-target: 44px;
  --header-height: 64px;
  --bottom-menu-height: 64px;

  --font-ui: 'Onest', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-brand: 'Unbounded', 'Onest', sans-serif;

  --z-sheet: 20;
  --z-popover: 30;
  --z-checkout: 35;
  --z-notice: 40;
  --z-tour: 50;

  --duration-quick: 140ms;
  --duration-calm: 260ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  .constructor {
    --color-page: #15181C;
    --color-stage: #1C2025;
    --color-surface: #1F2328;
    --color-raised: #272C32;
    --color-ink: #ECEEF1;
    --color-ink-muted: #A3ABB5;
    --color-line: #353B43;
    --color-line-strong: #4C545E;
    --color-accent: #D9643B;
    --color-accent-hover: #E7764E;
    --color-accent-ink: #1B0F0A;
    --color-accent-soft: #3C2419;
    --color-overlay: rgb(0 0 0 / 0.66);
    --color-inverse: #ECEEF1;
    --color-inverse-ink: #16191D;
    --garment-outline-base: #fff;
    --shadow-raised: 0 12px 32px rgb(0 0 0 / 0.5);
    --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.4);
  }
}

/* ---- Корень и сброс внутри него ---- */

.constructor {
  position: fixed;
  inset: 0;
  display: grid;
  /* Колонка не раздувается длинным рядом: иначе на телефоне вещь и чипы уезжают за край */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--header-height) auto minmax(0, 1fr);
  overflow-x: clip;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.constructor *,
.constructor *::before,
.constructor *::after {
  box-sizing: border-box;
}

.constructor p {
  margin: 0;
}

.constructor [hidden] {
  display: none !important;
}

.constructor [role='button'],
.constructor [role='radio'],
.constructor [role='tab'],
.constructor [role='menuitem'] {
  cursor: pointer;
  user-select: none;
}

.constructor [role='button']:focus-visible,
.constructor [role='radio']:focus-visible,
.constructor [role='tab']:focus-visible,
.constructor [role='menuitem']:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.constructor .icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

/* ---- Общие кнопки ---- */

.constructor .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: var(--radius-control);
  color: var(--color-ink);
  transition: background-color var(--duration-quick) var(--ease-out);
}

.constructor .icon-button:hover {
  background: var(--color-page);
}

.constructor .icon-button--inactive {
  color: var(--color-line-strong);
  cursor: not-allowed;
}

.constructor .icon-button--inactive:hover {
  background: transparent;
}

.constructor .text-button {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-small);
  min-height: var(--touch-target);
  padding: 0 var(--padding-middle);
  border-radius: var(--radius-control);
  border: 1px solid var(--color-line);
  background: var(--color-raised);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out);
}

.constructor .text-button:hover {
  border-color: var(--color-line-strong);
}

.constructor .accent-button,
.constructor .order-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--padding-small);
  min-height: var(--touch-target);
  padding: 0 var(--padding-middle);
  border-radius: var(--radius-control);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out);
}

.constructor .accent-button:hover,
.constructor .order-button:hover {
  background: var(--color-accent-hover);
}

.constructor .text-button:active,
.constructor .accent-button:active,
.constructor .order-button:active,
.constructor .cut-card:active,
.constructor .size-option:active {
  transform: translateY(1px);
}

.constructor .price-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--padding-small);
  border-radius: var(--radius-round);
  background: var(--color-page);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- Шапка ---- */

.constructor-header {
  display: flex;
  align-items: center;
  gap: var(--padding-middle);
  min-width: 0;
  padding: 0 var(--padding-large);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  position: relative;
  z-index: var(--z-popover);
}

.constructor .brand-mark {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.constructor .history-controls {
  display: flex;
  gap: var(--padding-micro);
}

.constructor .header-commerce {
  display: flex;
  align-items: center;
  gap: var(--padding-middle);
  margin-left: auto;
  padding: var(--padding-micro);
  border-radius: var(--radius-control);
}

.constructor .help-actions {
  display: flex;
  align-items: center;
  gap: var(--padding-small);
}

.constructor .order-area {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--padding-small);
}

.constructor .price-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  padding: 0 var(--padding-small);
  border-radius: var(--radius-control);
  transition: background-color var(--duration-quick) var(--ease-out);
}

.constructor .price-toggle:hover {
  background: var(--color-page);
}

.constructor .price-toggle-icon {
  display: none;
}

.constructor .price-toggle-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.constructor .price-toggle-amount {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.constructor .price-toggle-hint {
  font-size: 12px;
  color: var(--color-ink-muted);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.constructor .order-button-price {
  padding-left: var(--padding-small);
  border-left: 1px solid color-mix(in srgb, var(--color-accent-ink) 40%, transparent);
  font-variant-numeric: tabular-nums;
}

/* Раскрытие цены */
.constructor .price-breakdown {
  position: absolute;
  top: calc(100% + var(--padding-small));
  right: 0;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: var(--padding-middle);
  padding: var(--padding-middle);
  border-radius: var(--radius-panel);
  background: var(--color-raised);
  box-shadow: var(--shadow-raised);
  z-index: var(--z-popover);
}

.constructor .price-breakdown-title {
  font-weight: 600;
}

.constructor .price-breakdown-lines {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
}

.constructor .price-breakdown-line,
.constructor .price-breakdown-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--padding-middle);
}

.constructor .price-breakdown-text {
  display: flex;
  flex-direction: column;
}

.constructor .price-breakdown-detail {
  font-size: 13px;
  color: var(--color-ink-muted);
}

.constructor .price-breakdown-amount,
.constructor .price-breakdown-total-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.constructor .price-breakdown-total {
  padding-top: var(--padding-small);
  border-top: 1px solid var(--color-line);
  font-weight: 700;
}

.constructor .price-breakdown-note {
  font-size: 13px;
  color: var(--color-ink-muted);
}

/* ---- Рабочая область: три колонки ---- */

.constructor-workspace {
  display: grid;
  grid-template-columns: minmax(200px, 232px) minmax(0, 1fr) minmax(300px, 344px);
  min-width: 0;
  min-height: 0;
  max-width: 100%;
}

.constructor .sheet-header {
  display: none;
}

/* Левая колонка: инструменты */
.constructor .tool-panel {
  display: flex;
  flex-direction: column;
  gap: var(--padding-middle);
  min-width: 0;
  min-height: 0;
  padding: var(--padding-large) var(--padding-middle);
  background: var(--color-surface);
  border-right: 1px solid var(--color-line);
  overflow-x: clip;
  overflow-y: auto;
}

/* Колонка листается целиком: ребёнок не сжимается в ноль и не рисуется поверх соседа */
.constructor .tool-panel > * {
  flex: none;
  min-width: 0;
}

.constructor .tool-list {
  display: flex;
  flex-direction: column;
  gap: var(--padding-micro);
}

.constructor .tool-item {
  display: flex;
  align-items: center;
  gap: var(--padding-small);
  min-height: var(--touch-target);
  padding: 0 var(--padding-small);
  border-radius: var(--radius-control);
  font-weight: 500;
  transition: background-color var(--duration-quick) var(--ease-out);
}

.constructor .tool-item:hover {
  background: var(--color-page);
}

.constructor .tool-item--active {
  background: var(--color-accent-soft);
}

.constructor .upcoming-note {
  padding: var(--padding-middle);
  border-radius: var(--radius-control);
  border: 1px dashed var(--color-line-strong);
  font-size: 14px;
  color: var(--color-ink-muted);
}

/* Центр: стороны слева от вещи, вещь по центру */
.constructor .stage {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--padding-large);
  padding: var(--padding-large);
  background: var(--color-stage);
  min-height: 0;
  overflow: hidden;
}

.constructor .stage-toolbar,
.constructor .stage-bottom-row {
  display: none;
}

.constructor .side-list {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
  align-self: center;
}

/* Широкий экран: стороны выше кадра листаются в своей колонке, а не обрезаются сценой */
@media (min-width: 900px) {
  .constructor .side-list {
    align-self: stretch;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

.constructor .side-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--padding-micro);
  padding: var(--padding-small);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  text-align: center;
  transition: box-shadow var(--duration-quick) var(--ease-out);
}

.constructor .side-item--active {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.constructor .side-item-preview {
  width: 64px;
  height: 74px;
}

.constructor .side-item-text {
  display: flex;
  flex-direction: column;
}

.constructor .side-item-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.constructor .side-item-price {
  font-size: 12px;
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.constructor .garment-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--padding-small);
  min-height: 0;
  min-width: 0;
}

/* Высота макета идёт от ширины по пропорции вещи, а не от высоты колонки:
   иначе блок выше рисунка, и вещь с подписью разъезжаются */
.constructor .garment-view--main {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  aspect-ratio: var(--garment-aspect-ratio, 93.3 / 79.2);
  min-height: 0;
  min-width: 0;
  max-width: min(640px, 100%);
  /* Строка подписи под рисунком остаётся в кадре */
  max-height: calc(100% - var(--padding-large));
}

.constructor .stage-caption {
  flex: none;
  font-size: 13px;
  color: var(--color-ink-muted);
  text-align: center;
}

/* ---- Рисунок вещи: перекраска одной переменной ----
   Единица рисунка — сантиметр ткани, поэтому толщины линий и подписи заданы в сантиметрах */

.constructor .garment-view {
  --garment-color: #1A1A1A;
  overflow: visible;
}

.constructor .garment-fill {
  fill: var(--garment-color);
  stroke: color-mix(in srgb, var(--garment-color) 72%, var(--garment-outline-base));
  stroke-width: 0.25;
  stroke-linejoin: round;
  transition: fill var(--duration-calm) var(--ease-out), stroke var(--duration-calm) var(--ease-out);
}

.constructor .garment-fill--patch {
  stroke: none;
}

.constructor .garment-shade {
  fill: rgb(0 0 0 / 0.07);
}

.constructor .garment-seam {
  fill: none;
  stroke: color-mix(in srgb, var(--garment-color) 80%, var(--garment-outline-base));
  stroke-width: 0.2;
}

.constructor .garment-stitch {
  fill: none;
  stroke: color-mix(in srgb, var(--garment-color) 70%, var(--garment-outline-base));
  stroke-width: 0.18;
  stroke-dasharray: 0.8 0.7;
}

.constructor .garment-rib {
  fill: none;
  stroke: color-mix(in srgb, var(--garment-color) 84%, var(--garment-outline-base));
  stroke-width: 1.3;
  stroke-linecap: round;
  transition: stroke var(--duration-calm) var(--ease-out);
}

.constructor .garment-rib-band {
  fill: rgb(0 0 0 / 0.1);
  stroke: color-mix(in srgb, var(--garment-color) 76%, var(--garment-outline-base));
  stroke-width: 0.18;
}

.constructor .garment-inner {
  fill: color-mix(in srgb, var(--garment-color) 78%, #000);
  transition: fill var(--duration-calm) var(--ease-out);
}

.constructor .garment-inner--deep {
  fill: color-mix(in srgb, var(--garment-color) 45%, #000);
}

.constructor .garment-pocket {
  fill: rgb(0 0 0 / 0.06);
  stroke: color-mix(in srgb, var(--garment-color) 76%, var(--garment-outline-base));
  stroke-width: 0.2;
}

.constructor .garment-drawstring {
  fill: none;
  stroke: color-mix(in srgb, var(--garment-color) 55%, #fff);
  stroke-width: 0.55;
  stroke-linecap: round;
}

.constructor .garment-wash {
  filter: blur(2.4px);
}

.constructor .garment-wash-light {
  fill: rgb(255 255 255 / 0.13);
}

.constructor .garment-wash-dark {
  fill: rgb(0 0 0 / 0.14);
}

.constructor .garment-view .garment-part--back,
.constructor .garment-view--back .garment-part--front {
  display: none;
}

.constructor .garment-view--back .garment-part--back {
  display: inline;
}

/* Рамка печати: тихий пунктир; на тёмной ткани светлый, на светлой тёмный */
.constructor .garment-view {
  --print-frame-color: rgb(22 25 29 / 0.55);
  --print-frame-halo: rgb(255 255 255 / 0.7);
}

.constructor .garment-view--dark-fabric {
  --print-frame-color: rgb(255 255 255 / 0.6);
  --print-frame-halo: rgb(0 0 0 / 0.55);
}

.constructor .print-frame-outline {
  fill: none;
  stroke: var(--print-frame-color);
  stroke-width: 1.25;
  stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
}

/* Обводка держит подпись читаемой, когда на рукаве она выходит за край ткани */
.constructor .print-frame-caption {
  fill: var(--print-frame-color);
  stroke: var(--print-frame-halo);
  stroke-width: 0.45px;
  stroke-linejoin: round;
  paint-order: stroke;
  font-family: var(--font-ui);
  font-size: 2.6px;
  font-weight: 500;
}

/* ---- Правая колонка: настройки вещи ---- */

.constructor .settings-panel {
  display: flex;
  flex-direction: column;
  gap: var(--padding-large);
  min-width: 0;
  min-height: 0;
  padding: var(--padding-large);
  background: var(--color-surface);
  border-left: 1px solid var(--color-line);
  overflow-x: clip;
  overflow-y: auto;
}

.constructor .settings-panel > * {
  flex: none;
  min-width: 0;
}

.constructor .settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--padding-large);
}

.constructor .settings-section--print {
  padding-top: var(--padding-large);
  border-top: 1px solid var(--color-line);
}

.constructor .field {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
}

.constructor .field-label {
  font-size: 13px;
  font-weight: 600;
}

.constructor .field-value {
  margin-left: var(--padding-micro);
  font-weight: 400;
  color: var(--color-ink-muted);
}

.constructor .field-hint {
  font-size: 12px;
  color: var(--color-ink-muted);
}

/* Изделие: переключатель-сегмент */
.constructor .segmented-control {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--padding-micro);
  padding: var(--padding-micro);
  border-radius: var(--radius-control);
  background: var(--color-page);
}

.constructor .segmented-option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 40px;
  padding: var(--padding-micro) var(--padding-small);
  border-radius: var(--radius-inner);
  text-align: center;
  line-height: 1.2;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink-muted);
  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);
}

.constructor .segmented-option--active {
  background: var(--color-raised);
  color: var(--color-ink);
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}

/* Крой: карточки с ценой «от» */
.constructor .cut-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: var(--padding-small);
}

.constructor .cut-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--padding-micro);
  min-width: 0;
  min-height: 60px;
  padding: var(--padding-small);
  border-radius: var(--radius-control);
  text-align: center;
  border: 1px solid var(--color-line);
  background: var(--color-raised);
  transition: box-shadow var(--duration-quick) var(--ease-out), border-color var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out);
}

.constructor .cut-card:hover {
  border-color: var(--color-line-strong);
}

.constructor .cut-card--active {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.constructor .cut-card-name {
  max-width: 100%;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.constructor .cut-card-price {
  max-width: 100%;
  font-size: 13px;
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* Цвет: кружки ткани */
.constructor .swatch-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--padding-micro);
}

.constructor .color-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: var(--radius-round);
  flex: none;
}

.constructor .color-swatch-fill {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-round);
  background: var(--swatch-color);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.16);
  transition: box-shadow var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out);
}

.constructor .color-swatch:hover .color-swatch-fill {
  transform: scale(1.06);
}

.constructor .color-swatch--active .color-swatch-fill {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.16), 0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-ink);
}

.constructor .more-colors-button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--padding-middle);
  border-radius: var(--radius-round);
  border: 1px solid var(--color-line);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.constructor .more-colors-button--active {
  background: var(--color-page);
}

.constructor .extra-colors {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
}

.constructor .extra-colors-label {
  font-size: 12px;
  color: var(--color-ink-muted);
}

/* Размер вещи */
.constructor .size-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: var(--padding-small);
}

.constructor .size-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-line);
  background: var(--color-raised);
  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out);
}

.constructor .size-option:hover {
  border-color: var(--color-line-strong);
}

.constructor .size-option--active {
  background: var(--color-inverse);
  border-color: var(--color-inverse);
  color: var(--color-inverse-ink);
}

.constructor .size-option-label {
  font-size: 14px;
  font-weight: 600;
}

.constructor .size-option-chest {
  font-size: 11px;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

/* Размер принта */
.constructor .print-size-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--padding-small);
}

.constructor .print-size-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--padding-small);
  min-height: 72px;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-line);
  background: var(--color-raised);
  transition: box-shadow var(--duration-quick) var(--ease-out), border-color var(--duration-quick) var(--ease-out);
}

.constructor .print-size-option--active {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.constructor .print-size-option--inactive {
  opacity: 0.45;
  cursor: not-allowed;
}

.constructor .print-size-option-name {
  font-size: 14px;
  font-weight: 600;
}

.constructor .print-size-option-dimensions {
  font-size: 12px;
  color: var(--color-ink-muted);
}

.constructor .print-size-option-price {
  margin-top: auto;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Нижнее меню и кнопка чата: только узкий экран ---- */

.constructor .bottom-menu {
  display: none;
}

/* ---- Сообщение человеку ---- */

.constructor .notice {
  position: absolute;
  top: calc(var(--header-height) + var(--padding-middle));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(440px, calc(100% - 2 * var(--padding-middle)));
  padding: 12px var(--padding-middle);
  border-radius: var(--radius-control);
  background: var(--color-inverse);
  color: var(--color-inverse-ink);
  box-shadow: var(--shadow-raised);
  font-size: 14px;
  z-index: var(--z-notice);
}

/* ---- Обучающий тур ---- */

.constructor .tour {
  position: fixed;
  inset: 0;
  z-index: var(--z-tour);
}

.constructor .tour-spotlight {
  position: fixed;
  top: var(--spotlight-top, 0);
  left: var(--spotlight-left, 0);
  width: var(--spotlight-width, 0);
  height: var(--spotlight-height, 0);
  border-radius: var(--radius-panel);
  box-shadow: 0 0 0 9999px var(--color-overlay);
  pointer-events: none;
}

.constructor .tour--dialog {
  background: var(--color-overlay);
}

.constructor .tour--dialog .tour-spotlight {
  display: none;
}

.constructor .tour-bubble {
  position: fixed;
  top: var(--bubble-top, 50%);
  left: var(--bubble-left, 50%);
  width: min(340px, calc(100vw - 2 * var(--padding-middle)));
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
  padding: var(--padding-middle);
  border-radius: var(--radius-panel);
  background: var(--color-raised);
  box-shadow: var(--shadow-raised);
}

.constructor .tour-step-count {
  font-size: 12px;
  color: var(--color-ink-muted);
}

.constructor .tour-text {
  font-size: 16px;
  font-weight: 500;
}

.constructor .tour-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--padding-small);
  margin-top: var(--padding-small);
}

/* Последняя подсказка тура на телефоне: кнопка чата светится поверх затемнения */
.constructor .chat-launcher--hint {
  z-index: calc(var(--z-tour) + 1);
}

.constructor .chat-launcher--hint .chat-button {
  box-shadow: 0 0 0 4px var(--color-accent);
}

/* ---- Плавность только при согласии на движение ---- */

@media (prefers-reduced-motion: no-preference) {
  .constructor .notice:not([hidden]) {
    animation: constructor-notice-in var(--duration-calm) var(--ease-out);
  }

  .constructor .chat-launcher--hint .chat-button {
    animation: constructor-hint-pulse 1.4s var(--ease-out) infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .constructor *,
  .constructor *::before,
  .constructor *::after {
    transition: none !important;
  }
}

@keyframes constructor-notice-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes constructor-hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-accent); }
  50% { box-shadow: 0 0 0 6px var(--color-accent); }
}

/* ---- Средний широкий экран: шапка теснее, цена — иконкой рядом с кнопкой ---- */

@media (min-width: 900px) and (max-width: 1179px) {
  .constructor-header {
    gap: var(--padding-small);
    padding: 0 var(--padding-middle);
  }

  .constructor .header-commerce {
    gap: var(--padding-small);
  }

  .constructor .help-actions .text-button {
    padding: 0 12px;
  }

  .constructor .help-actions .text-button .icon {
    display: none;
  }

  .constructor .price-toggle-text {
    display: none;
  }

  .constructor .price-toggle-icon {
    display: block;
  }

  .constructor-workspace {
    grid-template-columns: 184px minmax(0, 1fr) 300px;
  }

  .constructor .stage {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--padding-middle);
    padding: var(--padding-middle);
  }
}

/* ---- Узкий экран до 899 px ---- */

@media (max-width: 899px) {
  .constructor {
    --header-height: 56px;
    grid-template-rows: var(--header-height) auto minmax(0, 1fr) calc(var(--bottom-menu-height) + env(safe-area-inset-bottom));
  }

  .constructor-header {
    gap: var(--padding-small);
    padding: 0 12px;
  }

  .constructor .brand-mark {
    font-size: 14px;
  }

  .constructor .history-controls--header,
  .constructor .help-actions {
    display: none;
  }

  .constructor .header-commerce {
    gap: 0;
    padding: 0;
  }

  .constructor .order-area {
    gap: var(--padding-micro);
  }

  .constructor .price-toggle {
    padding: 0;
  }

  .constructor .price-toggle-text {
    display: none;
  }

  .constructor .price-toggle-icon {
    display: block;
  }

  .constructor .order-button {
    padding: 0 12px;
    font-size: 14px;
  }

  .constructor .price-breakdown {
    position: fixed;
    top: calc(var(--header-height) + var(--padding-small));
    left: 12px;
    right: 12px;
    width: auto;
  }

  .constructor-workspace {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
  }

  .constructor .stage {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    /* Вещь не схлопывается в ноль, когда сверху полка, а снизу стороны и цвета */
    grid-template-rows: var(--touch-target) minmax(180px, 1fr) auto auto;
    grid-template-areas:
      'toolbar'
      'garment'
      'sides'
      'bottom';
    gap: var(--padding-small);
    padding: var(--padding-small) 12px;
  }

  .constructor .stage-toolbar {
    grid-area: toolbar;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .constructor .garment-area {
    grid-area: garment;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .constructor .side-list {
    grid-area: sides;
    flex-direction: row;
    flex-wrap: nowrap;
    align-self: stretch;
    /* Ряд сторон листается внутри колонки, а не растягивает страницу */
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .constructor .side-item {
    flex-direction: row;
    flex: none;
    gap: var(--padding-small);
    padding: var(--padding-micro) 12px var(--padding-micro) var(--padding-micro);
    min-height: 52px;
    text-align: left;
    scroll-snap-align: start;
  }

  .constructor .side-item-preview {
    width: 38px;
    height: 44px;
  }

  .constructor .side-item-name {
    font-size: 12px;
    white-space: nowrap;
  }

  .constructor .side-item-price {
    font-size: 11px;
    white-space: nowrap;
  }

  .constructor .stage-bottom-row {
    grid-area: bottom;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--padding-small);
    min-width: 0;
    max-width: 100%;
  }

  /* Кружки листаются, кнопка «Ещё цвета» остаётся в том же ряду и внутри экрана */
  .constructor .color-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--padding-small);
    row-gap: var(--padding-small);
    min-width: 0;
    max-width: 100%;
  }

  .constructor .swatch-list--strip {
    grid-column: 1;
    grid-row: 1;
    flex-wrap: nowrap;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .constructor .color-strip .more-colors-button {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-height: var(--touch-target);
  }

  .constructor .extra-colors--strip {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
  }

  .constructor .extra-colors--strip .extra-colors-label {
    max-width: 72px;
    line-height: 1.2;
  }

  .constructor .chat-launcher {
    position: relative;
  }

  .constructor .chat-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-round);
    background: var(--color-inverse);
    color: var(--color-inverse-ink);
    box-shadow: var(--shadow-raised);
  }

  .constructor .chat-button .icon {
    width: 24px;
    height: 24px;
  }

  .constructor .chat-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--padding-small));
    width: 248px;
    display: flex;
    flex-direction: column;
    gap: var(--padding-micro);
    padding: var(--padding-micro);
    border-radius: var(--radius-panel);
    background: var(--color-raised);
    box-shadow: var(--shadow-raised);
    z-index: var(--z-popover);
  }

  .constructor .chat-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--padding-small);
    min-height: 48px;
    padding: 0 12px;
    border-radius: var(--radius-control);
    font-weight: 500;
  }

  .constructor .chat-menu-item:hover {
    background: var(--color-page);
  }

  /* Панели снизу: над меню, вещь остаётся видна сверху */
  .constructor .tool-panel,
  .constructor .settings-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--bottom-menu-height) + env(safe-area-inset-bottom));
    max-height: 62dvh;
    display: none;
    padding: var(--padding-middle);
    border: none;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    box-shadow: var(--shadow-raised);
    z-index: var(--z-sheet);
  }

  .constructor .tool-list {
    display: none;
  }

  .constructor .sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: calc(-1 * var(--padding-small)) 0 0;
  }

  .constructor .sheet-title {
    font-size: 16px;
    font-weight: 600;
  }

  .constructor.constructor--sheet-templates .tool-panel,
  .constructor.constructor--sheet-add .tool-panel,
  .constructor.constructor--sheet-layers .tool-panel {
    display: flex;
  }

  .constructor.constructor--sheet-product .settings-panel,
  .constructor.constructor--sheet-sides .settings-panel {
    display: flex;
  }

  .constructor.constructor--sheet-product .settings-section--print,
  .constructor.constructor--sheet-sides .settings-section--product {
    display: none;
  }

  .constructor .settings-section--print {
    padding-top: 0;
    border-top: none;
  }

  .constructor .settings-section {
    gap: var(--padding-middle);
  }

  .constructor .more-colors-button {
    min-height: var(--touch-target);
  }

  .constructor .bottom-menu {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-surface);
    border-top: 1px solid var(--color-line);
    position: relative;
    z-index: var(--z-sheet);
  }

  .constructor .bottom-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--bottom-menu-height);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-ink-muted);
  }

  .constructor .bottom-menu-item .icon {
    width: 22px;
    height: 22px;
  }

  .constructor .bottom-menu-item--active {
    color: var(--color-ink);
  }

  .constructor .bottom-menu-item--active .icon {
    color: var(--color-accent);
  }

  .constructor .bottom-menu-add-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-top: -20px;
    border-radius: var(--radius-round);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    box-shadow: var(--shadow-raised);
    transition: transform var(--duration-quick) var(--ease-out);
  }

  .constructor .bottom-menu-add-circle .icon {
    width: 26px;
    height: 26px;
    color: inherit;
  }

  .constructor .bottom-menu-item--add.bottom-menu-item--active .bottom-menu-add-circle {
    transform: rotate(45deg);
  }

  .constructor .notice {
    top: calc(var(--header-height) + var(--padding-small));
  }
}

@media (max-width: 374px) {
  .constructor .brand-mark {
    font-size: 13px;
  }

  .constructor .order-button {
    padding: 0 10px;
    gap: 6px;
  }
}

/* ---- Холст: фото, текст, слои (office/tasks/T-03-holst.md) ---- */

.constructor .tool-section {
  display: flex;
  flex-direction: column;
  gap: var(--padding-middle);
}

.constructor .tool-section-title {
  font-size: 13px;
  font-weight: 600;
}

.constructor .tool-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--padding-small);
}

.constructor .add-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--padding-small);
}

.constructor .add-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--padding-micro);
  min-height: 76px;
  border-radius: var(--radius-control);
  background: var(--color-page);
  font-weight: 600;
}

.constructor .add-button:hover {
  background: var(--color-accent-soft);
}

.constructor .link-button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
}

.constructor .link-button--inactive {
  color: var(--color-line-strong);
  pointer-events: none;
}

.constructor .layer-editor {
  display: none;
  flex-direction: column;
  gap: var(--padding-middle);
  min-width: 0;
}

.constructor.constructor--layer-selected .layer-editor {
  display: flex;
}

.constructor .layer-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--padding-small);
}

.constructor .layer-editor-title {
  font-size: 16px;
  font-weight: 600;
}

.constructor .editor-tab-panel {
  display: none;
  flex: none;
  flex-direction: column;
  gap: var(--padding-middle);
  min-width: 0;
}

.constructor .layer-editor--placement .editor-tab-panel--placement,
.constructor .layer-editor--text .editor-tab-panel--text,
.constructor .layer-editor--style .editor-tab-panel--style {
  display: flex;
}

.constructor .editor-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--padding-small);
  min-width: 0;
}

.constructor .editor-action {
  display: flex;
  align-items: center;
  gap: var(--padding-small);
  min-width: 0;
  min-height: var(--touch-target);
  padding: 0 var(--padding-small);
  border-radius: var(--radius-control);
  background: var(--color-page);
  font-size: 14px;
  font-weight: 500;
}

.constructor .editor-action span {
  min-width: 0;
}

.constructor .editor-action:hover {
  background: var(--color-accent-soft);
}

.constructor .editor-action--danger {
  color: var(--color-accent);
}

.constructor .text-input,
.constructor .hex-input {
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-raised);
  color: inherit;
  font: inherit;
  padding: 10px 12px;
}

.constructor input.text-input,
.constructor input.hex-input {
  min-height: var(--touch-target);
}

.constructor textarea.text-input {
  resize: vertical;
  min-height: 72px;
}

.constructor .text-input::placeholder {
  color: var(--color-ink-muted);
}

.constructor .text-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.constructor .hex-field {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
}

.constructor .range-input {
  width: 100%;
  height: 28px;
  accent-color: var(--color-accent);
  /* Жест слайдера не уходит в прокрутку панели */
  touch-action: none;
}

.constructor .font-list {
  display: flex;
  flex-direction: column;
  gap: var(--padding-micro);
  max-height: 220px;
  overflow: auto;
}

.constructor .font-option {
  display: flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0 12px;
  border-radius: var(--radius-control);
  font-size: 18px;
}

.constructor .font-option--active {
  background: var(--color-accent-soft);
}

.constructor .text-style-row,
.constructor .toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--padding-small);
}

.constructor .toggle-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-round);
  border: 1px solid var(--color-line);
  background: var(--color-raised);
  font-weight: 600;
}

.constructor .toggle-chip--bold {
  font-weight: 700;
}

.constructor .toggle-chip--italic {
  font-style: italic;
}

.constructor .toggle-chip--active {
  background: var(--color-ink);
  color: var(--color-inverse-ink);
  border-color: var(--color-ink);
}

.constructor .warning-plate {
  padding: 8px 12px;
  border-radius: var(--radius-control);
  background: #F3E2B8;
  color: #3E2E10;
  font-size: 13px;
  font-weight: 500;
}

.constructor .layer-list {
  display: flex;
  flex-direction: column;
  gap: var(--padding-micro);
}

.constructor .layer-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--padding-micro);
  min-height: 52px;
  padding: var(--padding-micro);
  border-radius: var(--radius-control);
}

.constructor .layer-item--active {
  background: var(--color-accent-soft);
}

.constructor .layer-item-main {
  display: flex;
  align-items: center;
  gap: var(--padding-small);
  flex: 1 1 140px;
  min-width: 0;
}

.constructor .layer-item-thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-inner);
  background: var(--color-page) center / cover no-repeat;
  font-weight: 700;
  overflow: hidden;
}

.constructor .layer-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.constructor .layer-item-name {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.constructor .layer-item-detail {
  font-size: 12px;
  color: var(--color-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.constructor .layer-item-action {
  width: 36px;
  height: 36px;
}

.constructor .clear-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
  padding: var(--padding-middle);
  border-radius: var(--radius-control);
  background: var(--color-page);
}

.constructor .clear-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--padding-small);
}

.constructor .garment-area {
  position: relative;
}

.constructor .garment-view--main {
  touch-action: none;
  cursor: grab;
}

.constructor .photo-loading {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--padding-small);
  padding: 8px 14px;
  border-radius: var(--radius-round);
  background: var(--color-raised);
  box-shadow: var(--shadow-raised);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.constructor .photo-loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-line);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-round);
}

.constructor .design-layers {
  overflow: hidden;
}

.constructor .design-photo-missing {
  fill: rgb(255 255 255 / 0.28);
  stroke: var(--print-frame-color);
  stroke-width: 0.15;
}

.constructor .design-photo-missing-label {
  fill: var(--print-frame-color);
  font-family: var(--font-ui);
}

.constructor .selection-outline {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.75;
  vector-effect: non-scaling-stroke;
}

.constructor .selection-handle-hit {
  fill: transparent;
}

.constructor .selection-handle-dot {
  fill: var(--color-raised);
  stroke: var(--color-accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.constructor .selection-handle-icon {
  display: none;
}

.constructor .add-fan {
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--padding-small));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--padding-small);
  z-index: 1;
}

.constructor .add-fan-item {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--padding-micro);
}

.constructor .add-fan-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-round);
  background: var(--color-raised);
  box-shadow: var(--shadow-raised);
}

.constructor .add-fan-label {
  padding: 2px 8px;
  border-radius: var(--radius-round);
  background: var(--color-raised);
  box-shadow: var(--shadow-soft);
  font-size: 12px;
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .constructor .photo-loading-spinner {
    animation: constructor-photo-spin 0.8s linear infinite;
  }
}

@keyframes constructor-photo-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 899px) {
  .constructor .tool-panel .tool-section--add,
  .constructor .tool-panel .tool-section--templates,
  .constructor .tool-panel .tool-section--layers,
  .constructor .tool-panel .layer-editor {
    display: none;
  }

  .constructor.constructor--sheet-templates .tool-panel .tool-section--templates,
  .constructor.constructor--sheet-layers .tool-panel .tool-section--layers {
    display: flex;
  }

  .constructor.constructor--sheet-add .tool-panel {
    display: none;
  }

  .constructor.constructor--layer-selected:not(.constructor--template-dock):not(.constructor--sheet-layers):not(.constructor--sheet-templates):not(.constructor--sheet-product):not(.constructor--sheet-sides):not(.constructor--sheet-add) .tool-panel {
    display: flex;
  }

  .constructor.constructor--layer-selected:not(.constructor--template-dock):not(.constructor--sheet-layers):not(.constructor--sheet-templates):not(.constructor--sheet-product):not(.constructor--sheet-sides):not(.constructor--sheet-add) .tool-panel > .sheet-header {
    display: none;
  }

  .constructor.constructor--layer-selected:not(.constructor--template-dock):not(.constructor--sheet-layers):not(.constructor--sheet-templates):not(.constructor--sheet-product):not(.constructor--sheet-sides):not(.constructor--sheet-add) .tool-panel .layer-editor {
    display: flex;
    max-height: 46dvh;
    overflow: auto;
  }
}

/* ---- Шаблоны: полка, форма, галерея ---- */

/* Карточка не уже длинного слова: в узкой колонке одна, на листе телефона две, все одного размера */
.constructor .catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  align-items: stretch;
  gap: var(--padding-small);
  min-width: 0;
}

/* Сегменты — лента над полкой: слово не рвётся, карточки аудитории сразу под лентой */
.constructor .segment-list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--padding-small);
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.constructor .segment-chip,
.constructor .catalog-card,
.constructor .gallery-card,
.constructor .template-slot,
.constructor .pickup-point {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-raised);
  color: var(--color-ink);
  cursor: pointer;
}

.constructor .segment-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 44px;
  padding: var(--padding-small);
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.constructor .pickup-point {
  min-height: 44px;
  padding: var(--padding-small);
  font-size: 13px;
}

.constructor .segment-chip--active,
.constructor .pickup-point--active,
.constructor .template-slot--active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.constructor .catalog-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--padding-micro);
  min-width: 0;
  height: 108px;
  padding: var(--padding-small);
  overflow: hidden;
  text-align: left;
}

.constructor .catalog-card-mark,
.constructor .catalog-card-name,
.constructor .catalog-card-note {
  min-width: 0;
  overflow-wrap: break-word;
}

.constructor .catalog-card-mark {
  color: var(--color-accent);
  font-size: 12px;
  line-height: 1.2;
}

.constructor .catalog-card-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
}

.constructor .catalog-card-note,
.constructor .catalog-empty-text,
.constructor .gallery-card-caption {
  color: var(--color-ink-muted);
  font-size: 13px;
  line-height: 1.2;
}

.constructor .catalog-empty {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
  padding: var(--padding-middle);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-panel);
}

.constructor .template-form {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
}

.constructor .template-form-body,
.constructor .template-slots,
.constructor .template-extras,
.constructor .replace-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
}

.constructor .template-fonts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--padding-micro);
}

.constructor .template-slot {
  min-height: 44px;
  padding: var(--padding-small);
}

.constructor .template-extras[hidden],
.constructor .template-form[hidden],
.constructor .catalog-empty[hidden],
.constructor .replace-confirm[hidden] {
  display: none;
}

.constructor .replace-confirm {
  position: fixed;
  left: 50%;
  bottom: var(--padding-large);
  transform: translateX(-50%);
  width: min(420px, calc(100% - var(--padding-large) * 2));
  z-index: var(--z-notice);
  padding: var(--padding-middle);
  border-radius: var(--radius-panel);
  background: var(--color-raised);
  box-shadow: var(--shadow-raised);
}

.constructor .replace-confirm-actions,
.constructor .checkout-actions {
  display: flex;
  gap: var(--padding-small);
  justify-content: flex-end;
}

.constructor .work-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
  padding: var(--padding-small) var(--padding-middle) 0;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
}

.constructor .gallery-grid {
  display: flex;
  gap: var(--padding-small);
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.constructor .gallery-grid {
  align-items: flex-end;
  scroll-snap-type: x proximity;
  padding-bottom: var(--padding-small);
}

.constructor .gallery-card {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  width: 120px;
  height: 132px;
  overflow: hidden;
  scroll-snap-align: start;
}

.constructor .gallery-card-garment {
  flex: 1;
  width: 100%;
  min-height: 0;
  height: auto;
}

.constructor .gallery-card-caption {
  flex: none;
  max-height: 3.6em;
  padding: var(--padding-small);
  overflow: hidden;
}

.constructor .template-text {
  font-weight: 600;
}

.constructor .template-photo-placeholder {
  fill: #cbbfb6;
}

.constructor .template-photo-placeholder--gray {
  fill: #8e939a;
}

.constructor .template-photo-zoom {
  fill: rgb(22 25 29 / 0.16);
  stroke: #16191d;
  stroke-width: 0.15;
}

.constructor .template-dock {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
  padding-bottom: var(--padding-middle);
  border-bottom: 1px solid var(--color-line);
}

.constructor .template-mini-preview {
  display: none;
}

.constructor .template-mini-view {
  width: 100%;
  height: auto;
  background: var(--color-stage);
  border-radius: var(--radius-control);
}

.constructor .sheet-back-label {
  display: none;
}

.constructor .template-photo-label {
  fill: #16191d;
  font-family: Onest, sans-serif;
}

/* ---- Хвост заказа: окно поверх конструктора, на узком экране на весь кадр ---- */

.constructor .checkout {
  position: fixed;
  inset: 0;
  z-index: var(--z-checkout);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-middle);
  background: var(--color-overlay);
}

.constructor .checkout[hidden] {
  display: none;
}

.constructor .checkout-panel {
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: min(92dvh, 900px);
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.constructor .checkout-body {
  display: flex;
  flex-direction: column;
  gap: var(--padding-middle);
  min-height: 0;
  overflow: auto;
  padding: 0 var(--padding-large) var(--padding-large);
}

.constructor .checkout-header,
.constructor .preview-stage,
.constructor .checkout-step {
  display: flex;
  gap: var(--padding-small);
}

.constructor .checkout-header {
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: var(--padding-large) var(--padding-large) var(--padding-small);
}

.constructor .checkout-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.constructor .checkout-step {
  flex-direction: column;
  gap: var(--padding-middle);
}

.constructor .checkout-lead {
  color: var(--color-ink-muted);
}

.constructor .checkout-money-note {
  padding: var(--padding-small) var(--padding-middle);
  border-radius: var(--radius-control);
  background: var(--color-accent-soft);
  color: var(--color-ink);
  font-weight: 600;
}

.constructor .checkout-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--padding-small);
}

.constructor .field-block {
  display: flex;
  flex-direction: column;
  gap: var(--padding-micro);
}

.constructor .checkout-price,
.constructor .checkout-price-lines,
.constructor .manager-channels,
.constructor .design-photo-list {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
}

.constructor .checkout-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--padding-small);
}

.constructor .checkout-price-total,
.constructor .payment-total,
.constructor .success-lead {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.constructor .success-note {
  color: var(--color-ink-muted);
}

.constructor .manager-preview {
  margin: 0;
  padding: var(--padding-middle);
  border-radius: var(--radius-control);
  background: var(--color-page);
  white-space: pre-wrap;
}

.constructor .manager-channel {
  justify-content: flex-start;
  width: 100%;
}

.constructor .payment-option,
.constructor .pickup-point {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: var(--padding-small) var(--padding-middle);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-raised);
  font-weight: 600;
}

.constructor .payment-option--active,
.constructor .pickup-point--active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.constructor .pickup-point-address,
.constructor .design-photo-name,
.constructor .size-table-row {
  color: var(--color-ink-muted);
  font-weight: 400;
  font-size: 13px;
}

.constructor .checkout-copy {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
  padding-top: var(--padding-middle);
  border-top: 1px solid var(--color-line);
}

.constructor .checkout .segmented-control {
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr;
}

.constructor .accent-button--wait {
  opacity: 0.55;
  pointer-events: none;
}

.constructor .checkout-step[hidden] {
  display: none;
}

.constructor .preview-stage {
  align-items: center;
}

.constructor .preview-frames {
  display: flex;
  flex: 1;
  gap: var(--padding-small);
  min-width: 0;
}

.constructor .preview-frame {
  flex: 1;
  min-width: 0;
}

.constructor .preview-garment {
  width: 100%;
  height: auto;
  background: var(--color-stage);
  border-radius: var(--radius-control);
}

.constructor .preview-nav {
  display: none;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-round);
  background: var(--color-raised);
  cursor: pointer;
}

.constructor .field-error {
  margin: 0;
  color: var(--color-accent);
  font-size: 13px;
}

.constructor .pickup-list,
.constructor .courier-fields,
.constructor .checkout-lines,
.constructor .metrics-form,
.constructor .size-table {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
}

.constructor .payment-options {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
}

@media (max-width: 899px) {
  .constructor.constructor--sheet-templates .tool-panel {
    top: var(--header-height);
    max-height: none;
    border-radius: 0;
  }

  .constructor--sheet-templates .tool-panel .sheet-back-label {
    display: inline;
  }

  .constructor--sheet-templates .tool-panel .sheet-close-icon {
    display: none;
  }

  .constructor--sheet-templates .tool-panel .sheet-close {
    width: auto;
    padding: 0 var(--padding-middle);
  }

  /* Форма шаблона — нижний слот колонки, не второй лист поверх вещи и сторон */
  .constructor.constructor--template-dock:not(.constructor--sheet-product):not(.constructor--sheet-sides):not(.constructor--sheet-templates):not(.constructor--sheet-layers):not(.constructor--sheet-add) .work-gallery {
    display: none;
  }

  .constructor.constructor--template-dock:not(.constructor--sheet-product):not(.constructor--sheet-sides):not(.constructor--sheet-templates):not(.constructor--sheet-layers):not(.constructor--sheet-add) .constructor-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(168px, 38%);
    min-height: 0;
  }

  .constructor.constructor--template-dock:not(.constructor--sheet-product):not(.constructor--sheet-sides):not(.constructor--sheet-templates):not(.constructor--sheet-layers):not(.constructor--sheet-add) .settings-panel {
    display: flex;
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    max-height: none;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: auto;
  }

  .constructor.constructor--template-dock:not(.constructor--sheet-product):not(.constructor--sheet-sides) .settings-section {
    display: none;
  }

  .constructor .template-dock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    align-items: start;
    padding-bottom: 0;
    border-bottom: none;
  }

  .constructor .template-dock-header {
    grid-column: 1 / -1;
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-surface);
  }

  .constructor.constructor--template-dock .template-dock-header .sheet-back-label {
    display: inline;
  }

  .constructor.constructor--template-dock .template-dock-header .sheet-close-icon {
    display: none;
  }

  .constructor.constructor--template-dock .template-dock-header .sheet-close {
    width: auto;
    padding: 0 var(--padding-middle);
  }

  .constructor .template-form {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }

  .constructor .template-mini-preview {
    display: block;
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 44px;
  }

  .constructor.constructor--sheet-product .template-dock,
  .constructor.constructor--sheet-sides .template-dock {
    display: none;
  }

  .constructor .replace-confirm {
    bottom: calc(var(--bottom-menu-height) + var(--padding-middle) + env(safe-area-inset-bottom));
  }

  .constructor .checkout {
    padding: 0;
    align-items: stretch;
  }

  .constructor .checkout-panel {
    width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }

  .constructor .checkout-body {
    padding-bottom: calc(var(--padding-large) + env(safe-area-inset-bottom));
  }

  .constructor .checkout-actions {
    flex-direction: column;
  }

  .constructor .checkout-actions .accent-button,
  .constructor .checkout-actions .text-button,
  .constructor .checkout-step > .accent-button,
  .constructor .metrics-form > .accent-button,
  .constructor .checkout-step--design > .accent-button,
  .constructor .checkout-step--payment > .accent-button {
    width: 100%;
  }

  .constructor .preview-nav {
    display: flex;
  }

  .constructor .preview-frame {
    display: none;
  }

  .constructor .preview-frame--active {
    display: block;
  }
}

@media (min-width: 900px) {
  .constructor .checkout-pair {
    grid-template-columns: 1fr 1fr;
  }
}