/* Блок «Примерка» (js/tryon/tryon.js, макет владельца 19.10): токены base.css/ux-v3 — тёмная тема по умолчанию, светлая через [data-theme]. */
.tryon { display: grid; gap: 14px; min-width: 0; color: var(--text); font-family: var(--f-body); }
.tryon .to-title { margin: 0; font: 700 clamp(26px, 4vw, 36px)/1.1 var(--f-display); }
.tryon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* сцена: карточка, внутри — фигура (слева сверху) и панель эскиза (справа) */
.to-stage { position: relative; border-radius: var(--r-panel, 24px); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.to-3d { position: relative; width: 100%; height: min(68vh, 620px); touch-action: pan-y; cursor: grab; } /* один палец мимо активного эскиза — прокрутка страницы */
.to-3d canvas { display: block; width: 100% !important; height: 100% !important; }
.tryon.to-armed .to-3d { cursor: copy; }
.to-load { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-2); font-size: 14px; }
.to-view { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 80px); }
.to-chip { font: 500 13px var(--f-body); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass-bg); color: var(--text); cursor: pointer; backdrop-filter: blur(10px); }
.to-chip[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--bg); }

/* рамка активного эскиза (AlmasZXC-0c7): 2D поверх сцены по проекции углов декали; сама рамка пальцы не ловит, только ручки */
.to-sel { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.to-sel[hidden] { display: none; }
.to-sel-f { position: absolute; inset: 0; width: 100% !important; height: 100% !important; overflow: visible; }
.to-sel-f polygon { fill: none; stroke: var(--mark); stroke-width: 1.5; stroke-dasharray: 5 4; }
.to-sel-f line { stroke: var(--mark); stroke-width: 1.5; }
.to-hd, .to-hr { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; pointer-events: auto; touch-action: none; display: grid; place-items: center; }
.to-hd::after { content: ""; width: 12px; height: 12px; border-radius: 3px; background: #FFFFFF; border: 2px solid var(--mark); box-sizing: border-box; }
.to-hd[data-hd="0"], .to-hd[data-hd="2"] { cursor: nwse-resize; }
.to-hd[data-hd="1"], .to-hd[data-hd="3"] { cursor: nesw-resize; }
.to-hr { left: -13px; top: -13px; width: 26px; height: 26px; cursor: grab; }
.to-hr::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--mark); border: 2px solid #FFFFFF; box-sizing: border-box; }
.to-sel.drag .to-hr { cursor: grabbing; }
.to-sel.tiny .to-hd { display: none; } /* рамка меньше пальца: размер — щипком, колесом или ползунком */
.to-dim { position: absolute; left: 0; top: 0; margin-top: -11px; white-space: nowrap; translate: -50% 0; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #FFFFFF; font: 600 12px/16px var(--f-body); }
@media (pointer: coarse) { .to-hd, .to-hr { left: -18px; top: -18px; width: 36px; height: 36px; } }

/* подсказка одной строкой и тост «Эскиз удалён · Вернуть» — внизу сцены */
.to-sh { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); box-sizing: border-box; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--line); font-size: 13px; color: var(--text); pointer-events: none; }
.to-sh:empty, .tryon.to-toasting .to-sh { display: none; }
.to-toast { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 14px; white-space: nowrap; z-index: 2; }
.to-toast[hidden] { display: none; }
.to-toast button { padding: 6px 12px; border-radius: 999px; border: 0; background: var(--mark); color: #111111; font: 600 14px var(--f-body); cursor: pointer; }

/* панель активного эскиза справа внутри сцены: шапка (миниатюра + подпись), размер, поворот, инструменты — всё только для активного */
.to-panel { position: absolute; right: 10px; top: 10px; width: 236px; box-sizing: border-box; display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px; border-radius: var(--r-card, 16px);
  background: var(--glass-bg); backdrop-filter: blur(14px); border: 1px solid var(--line); z-index: 1; }
.to-panel[hidden] { display: none; }
.to-panel > * { grid-column: 1 / -1; }
.to-pempty { margin: 0; font-size: 13px; color: var(--text-2); }
.to-ph { display: flex; align-items: center; gap: 10px; min-width: 0; }
.to-ph img { flex: 0 0 auto; width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: var(--surface-2); border: 1.5px solid var(--mark); box-sizing: border-box; }
.to-ph.txt img { background: #F1EEE9; }
.to-ph span { font: 600 13px/1.3 var(--f-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.to-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; }
.to-f { display: grid; grid-template-columns: 1fr 64px; gap: 6px 8px; align-items: center; font-size: 12px; color: var(--text-2); }
.to-f input[type="text"] { width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 600 14px var(--f-body); text-align: center; }
.to-f input[type="range"] { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--mark); height: 18px; }
.to-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; font: 600 13px var(--f-body); }
.to-ic:hover { border-color: var(--text-2); }
.to-ic[aria-pressed="true"] { border-color: var(--mark); color: var(--mark); }
.to-ic.busy { opacity: .5; }
.to-ic .tx { display: none; }
.to-ic .i { display: contents; }
.to-row > .to-ic { pointer-events: none; background: transparent; border-color: transparent; color: var(--text-2); width: 22px; }
.tryon .to-mrow { grid-column: 1; grid-template-columns: 1fr; }
.to-mrow > .to-ic { display: none; }
.tryon .to-del { grid-column: 2; align-self: end; }
.to-tools { display: flex; flex-wrap: wrap; gap: 6px; }

/* лента «Для примерки» */
.to-rib { display: grid; gap: 8px; }
.to-rib-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.to-rib-h b { font-size: 15px; }
.to-n { font-size: 12px; color: var(--action); }
.to-strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.to-th { position: relative; flex: 0 0 auto; }
.to-th-b { position: relative; display: grid; gap: 6px; width: 96px; padding: 6px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; text-align: center; touch-action: pan-x; }
.to-th-b img { width: 100%; height: 64px; object-fit: contain; border-radius: 8px; background: var(--surface-2); pointer-events: none; }
.to-th.txt .to-th-b img { background: #F1EEE9; padding: 4px; box-sizing: border-box; } /* надпись чёрным по прозрачному — на светлой подложке */
.to-th-b .cap { font-size: 11px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.to-th-b[aria-pressed="true"] { border-color: var(--mark); box-shadow: 0 0 0 1px var(--mark); }
.to-th-b.pl::after { content: ""; position: absolute; left: 8px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--mark); box-shadow: 0 0 0 2px var(--surface); } /* размещён на теле */
.to-th-add { flex: 0 0 auto; width: 56px; display: grid; place-items: center; padding: 0; border-radius: 14px; border: 1.5px dashed var(--line); background: transparent; color: var(--text); cursor: pointer; }
.to-th-add:hover, .to-th-add[aria-expanded="true"] { border-color: var(--mark); }
.to-addm { display: flex; gap: 8px; }
.to-addm[hidden] { display: none; }
.to-addm .to-chip { backdrop-filter: none; }
.to-th-x { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; }
.to-th-x svg { width: 12px; height: 12px; }
.to-ghost { position: fixed; left: 0; top: 0; z-index: var(--z-pop, 40); width: 64px; height: 64px; pointer-events: none; opacity: .85; border-radius: 10px; overflow: hidden; border: 2px solid var(--line); }
.to-ghost.over { border-color: var(--mark); }
.to-ghost img { width: 100%; height: 100%; object-fit: contain; }

/* плитки «Добавить …» */
.to-adds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.to-tile { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 58px; padding: 10px 12px 10px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font: 600 14px var(--f-body); cursor: pointer; text-align: left; }
.to-tile:hover { border-color: var(--text-2); }
.to-tile, label.to-tile { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; }
.to-tile > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.to-tile > input[hidden] { display: none !important; }
.to-tile i { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); }
.to-tile i.on, .to-tile:hover i { background: var(--text); color: var(--bg); }
.to-tile[aria-expanded="true"] { border-color: var(--mark); }
.to-sub { margin: 0 0 6px; font-size: 13px; color: var(--text-2); }
.to-libs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.to-lb { flex: 0 0 auto; width: 64px; height: 64px; padding: 0; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--line); background: var(--surface-2); cursor: pointer; }
.to-lb img { width: 100%; height: 100%; object-fit: cover; }
.to-lb[aria-pressed="true"] { border-color: var(--mark); }

/* надписи: в потоке (компьютер) или листом снизу (телефон) */
.to-insc { display: grid; gap: 12px; padding: 14px; border-radius: var(--r-panel, 24px); border: 1px solid var(--mark); background: var(--surface); min-width: 0; }
.to-insc-h { display: flex; justify-content: space-between; align-items: center; }
.to-insc-h b { font-size: 16px; }
.to-x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; }
.to-field { display: grid; gap: 8px; font-size: 15px; color: var(--text); }
.to-field input, .to-field textarea { width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: var(--r-field, 12px); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 400 16px var(--f-body); resize: vertical; }
.to-field input:focus, .to-field textarea:focus { outline: none; border-color: var(--text-2); }
.to-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.to-cats .to-chip { flex: 0 0 auto; backdrop-filter: none; }
.to-cats .to-chip:not([aria-pressed="true"]) { background: transparent; }
.to-note { margin: 0; font-size: 12px; color: var(--text-2); }
.to-note:empty { display: none; }
.to-fonts { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
.to-font { position: relative; flex: 0 0 auto; width: min(76vw, 300px); min-height: 104px; box-sizing: border-box; padding: 14px 54px 12px 16px; border-radius: 18px; border: 2px solid transparent;
  background: #FFFFFF; color: #111111; scroll-snap-align: start; display: grid; align-content: space-between; gap: 8px; }
.to-font.sel { border-color: var(--mark); }
.to-fs { font-size: 30px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.to-font small { font-size: 11px; color: #6E6A64; }
.to-plus { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 0; background: #111111; color: #FFFFFF; cursor: pointer; }
.to-plus:disabled { opacity: .5; }

/* описание, Pinterest, ошибки, CTA */
.to-desc { margin-top: 6px; }
.to-pin { justify-self: start; display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 999px; background: #EFE3CF; color: #1A1714; font: 600 14px var(--f-body); text-decoration: none; }
.to-pin:hover { background: #F5ECDD; }
.to-err { margin: 0; color: var(--danger); font-size: 14px; }
.to-err:empty { display: none; }
.tryon .to-cta { justify-self: start; }

@media (max-width: 720px) {
  .to-3d { height: 62vh; min-height: 340px; }
  /* телефон: панель — узкая полоска иконок справа (миниатюра активного, см, °, ⋯, ✕); «см»/«°»/«⋯» открывают маленький ползунок или меню слева от неё, поверх сцены */
  .to-panel { width: auto; grid-template-columns: auto; padding: 6px; gap: 6px; justify-items: center; }
  .to-panel.none { display: none; }
  .to-ph span { display: none; }
  .to-ph img { width: 34px; height: 34px; }
  .tryon .to-row, .tryon .to-mrow { position: relative; grid-template-columns: auto; grid-column: 1; }
  .to-panel .to-row > .to-ic { display: inline-grid; pointer-events: auto; background: var(--surface-2); border-color: var(--line); color: var(--text); width: 34px; }
  .to-panel .to-ic .tx { display: grid; place-items: center; }
  .to-panel .to-ic .i { display: none; }
  .tryon .to-del { grid-column: 1; }
  .to-panel .to-row.open > .to-ic { border-color: var(--mark); color: var(--mark); }
  .to-row:not(.open) > .to-f, .to-row:not(.open) > .to-tools { display: none; }
  .to-row.open > .to-f, .to-row.open > .to-tools { position: absolute; right: calc(100% + 8px); top: 0; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
  .to-row.open > .to-f { width: min(220px, 60vw); }
  .to-row.open > .to-tools { flex-wrap: nowrap; }
  .to-adds { grid-template-columns: 1fr; }
  .to-tile { min-height: 52px; }
  /* надписи — лист снизу */
  .to-insc.open { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet, 60); max-height: 78vh; overflow-y: auto; border-radius: 22px 22px 0 0; border: 1px solid var(--line); border-bottom: 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 40px rgba(0, 0, 0, .45); }
  .to-insc.open::before { content: ""; justify-self: center; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin-top: -6px; }
}
.try-page { padding-block: 28px 56px; }