/* Мобильная Мастерская, fotocvet.ru. Все селекторы начинаются с .pb-wsm.
   Глобальных правил нет, @import нет, @font-face нет: гарнитуры берутся из токенов сайта
   (--sans / --font-head), которые объявляет tokens.css страницы.
   Раскладка рассчитана на ширины 320-600px; выше 600px раздел не показывается (десктоп
   живёт в пакетах workshop-restore / -live / -lab / -gallery). */

.pb-wsm * { box-sizing: border-box; }
/* Отступы текстовых узлов задаёт секция, а не браузер. Селекторы под корнем - не глобальные:
   без этого дефолтные margin у <p> раздували карточку акции (замечание оператора 20.09). */
.pb-wsm p,
.pb-wsm h1,
.pb-wsm h2,
.pb-wsm h3,
.pb-wsm figure { margin: 0; }

.pb-wsm {
  /* Типографика сведена на токены сайта (перенос 20.09): макет собран на Golos Text + Lora,
     но workshop.html объявляет гарнитуру под именем 'Golos', а Lora не объявляет вовсе:
     имена бы не совпали и шрифт молча ушёл бы в system-ui. */
  --wsm-font: var(--sans, 'Inter', sans-serif);
  --wsm-font-display: var(--font-head, 'Onest', 'Inter', sans-serif);

  --wsm-ink: #2e1c12;
  --wsm-muted: #7d6f64;
  --wsm-bg: #fafaf7;
  --wsm-card: #fff;
  --wsm-band: var(--bg);
  --wsm-soft: #f9efe1;
  --wsm-accent: #b8652a;
  --wsm-accent-strong: #9a5020;
  --wsm-line: rgba(46, 28, 18, .12);
  --wsm-ink-dark: #1c1410;

  /* Сцена снимка. Одна переменная на всю секцию: меняется в одном месте.
     280px посчитаны по самому плотному шагу - «Ноль обработок». */
  --wsm-scene: 280px;
  --wsm-pad: 16px;

  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--wsm-bg);
  color: var(--wsm-ink);
  font: 400 16px/1.5 var(--wsm-font);
}

.pb-wsm [hidden] { display: none !important; }
/* Стадию «empty» держит CSS, а не только wsm.js: скрипт стоит в хвосте очереди defer за
   script.js и выполняется на 4G в медленном режиме через ~16 с после запроса (первая отрисовка
   на 5-й). Всё это время разметка показывала подвалы ВСЕХ стадий стопкой (телефон оператора
   и визор, 23.09). Правило то же, что applyState для «empty», поэтому со скриптом не спорит. */
.pb-wsm__view[data-state="empty"] [data-when]:not([data-when~="empty"]) { display: none !important; }

/* ── шапка раздела ─────────────────────────────────────────────────────────── */
.pb-wsm__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 56px;
  padding: 0 var(--wsm-pad);
  background: var(--wsm-card);
  border-bottom: 1px solid rgba(46, 28, 18, .10);
}
.pb-wsm__bar--step { gap: 6px; padding: 0 10px 0 6px; }
.pb-wsm__logo { display: block; width: 24px; height: 24px; }
.pb-wsm__brand { font: 500 17px/1 var(--wsm-font-display); }
.pb-wsm__brand em { font-style: normal; color: var(--wsm-accent); }
.pb-wsm__grow { flex: 1; min-width: 0; }
.pb-wsm__title {
  flex: 1;
  min-width: 0;
  font: 600 17px/1.2 var(--wsm-font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-wsm__title--center { text-align: center; }

.pb-wsm__balance {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  background: var(--wsm-soft);
  color: var(--wsm-ink);
  font: 700 14px/1 var(--wsm-font);
  white-space: nowrap;
}
.pb-wsm__balance svg { flex: none; fill: var(--wsm-accent); }
.pb-wsm__balance--zero { background: var(--wsm-band); color: #5c4e3f; }
.pb-wsm__balance--zero svg { fill: var(--wsm-muted); }

/* ── тело раздела ──────────────────────────────────────────────────────────── */
.pb-wsm__views { flex: 1; min-height: 0; display: flex; }
.pb-wsm__view { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pb-wsm__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px var(--wsm-pad) 20px;
}
.pb-wsm__body--scene { gap: 0; padding: 0 0 20px; }
.pb-wsm__body--flush { gap: 0; padding: 0; }
.pb-wsm__stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px var(--wsm-pad) 0;
}
.pb-wsm__lead { margin: 0; font: 400 15px/1.5 var(--wsm-font); color: var(--wsm-muted); text-wrap: pretty; }
.pb-wsm__head { margin: 0; font: 500 26px/1.2 var(--wsm-font-display); }
.pb-wsm__subhead { margin: 0; font: 600 16px/1.3 var(--wsm-font); }

/* ── сцена снимка ──────────────────────────────────────────────────────────── */
.pb-wsm__scene {
  position: relative;
  flex: none;
  height: var(--wsm-scene);
  background: var(--wsm-ink-dark);
}
.pb-wsm__scene-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pb-wsm__scene-img--dim { opacity: .5; }
.pb-wsm__veil { position: absolute; inset: 0; background: rgba(250, 250, 247, .74); }
.pb-wsm__work {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.pb-wsm__work-title { margin: 0; font: 600 18px/1.3 var(--wsm-font); }
.pb-wsm__work-pct { margin: 0; font: 700 15px/1.3 var(--wsm-font); color: var(--wsm-accent); }
.pb-wsm__spin { display: block; width: 56px; height: 56px; fill: var(--wsm-accent); animation: pbWsmSpin 1s linear infinite; }
@keyframes pbWsmSpin { to { transform: rotate(360deg); } }

.pb-wsm__ba {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
}
.pb-wsm__ba-btn {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #3b2c22;
  font: 600 14px/1 var(--wsm-font);
  cursor: pointer;
}
.pb-wsm__ba-btn[aria-pressed="true"] { background: var(--wsm-ink); color: #fff; }

.pb-wsm__scene-btn {
  position: absolute;
  bottom: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  color: var(--wsm-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.pb-wsm__scene-btn--zoom { right: 12px; }
.pb-wsm__scene-btn--swap { right: 12px; }
.pb-wsm__scene-btn--swap.pb-wsm__scene-btn--shift { right: 64px; }

/* ── дропзона ──────────────────────────────────────────────────────────────── */
.pb-wsm__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px var(--wsm-pad) 16px;
  background: var(--wsm-card);
  border: 1px solid var(--wsm-line);
  border-radius: 16px;
}
.pb-wsm__drop-art { display: block; }
.pb-wsm__drop-title { margin: 0; font: 600 17px/1.3 var(--wsm-font); text-align: center; }
.pb-wsm__drop-note { margin: 0; font: 500 14px/1.4 var(--wsm-font); color: var(--wsm-muted); text-align: center; }

/* ── кнопки ────────────────────────────────────────────────────────────────── */
.pb-wsm__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--wsm-line);
  border-radius: 12px;
  background: var(--wsm-card);
  color: var(--wsm-ink);
  font: 600 16px/1.2 var(--wsm-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}
.pb-wsm__btn svg { flex: none; }
/* label вместо button («Выбрать фото»): долгое нажатие не должно выделять подпись. */
label.pb-wsm__btn { -webkit-user-select: none; user-select: none; }
/* Наведение и нажатие - слоем поверх, заливка кнопки не меняется. */
.pb-wsm__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(46, 28, 18, 0);
  transition: background .15s ease;
  pointer-events: none;
}
.pb-wsm__btn:hover::after { background: rgba(46, 28, 18, .06); }
.pb-wsm__btn:active::after { background: rgba(46, 28, 18, .12); }
.pb-wsm__btn--block { width: 100%; }
.pb-wsm__btn--primary {
  min-height: 54px;
  border: 0;
  background: var(--wsm-accent);
  color: #fff;
  font: 600 17px/1.2 var(--wsm-font);
}
.pb-wsm__btn--primary::after { background: rgba(255, 255, 255, 0); }
.pb-wsm__btn--primary:hover::after { background: rgba(255, 255, 255, .12); }
.pb-wsm__btn--primary:active::after { background: rgba(28, 20, 16, .14); }
.pb-wsm__btn--pill { min-height: 48px; border-radius: 999px; }
.pb-wsm__btn--link {
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--wsm-accent);
  font: 500 15px/1.3 var(--wsm-font);
}
.pb-wsm__btn--icon { width: 44px; min-height: 44px; padding: 0; }
.pb-wsm__btn--locked { color: var(--wsm-muted); }
.pb-wsm__btn--danger { color: #8a3f22; }
.pb-wsm__btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.pb-wsm__btn-cost { display: inline-flex; align-items: center; gap: 6px; font: 600 17px/1 var(--wsm-font); }
.pb-wsm__btn-cost svg { fill: #fff; }

.pb-wsm__iconbtn {
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  background: transparent;
  color: var(--wsm-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.pb-wsm__iconbtn--tight { margin-right: -10px; }

/* ── подвал с главным действием ────────────────────────────────────────────── */
.pb-wsm__foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px var(--wsm-pad) 12px;
  background: rgba(250, 250, 247, .96);
  border-top: 1px solid rgba(46, 28, 18, .08);
}
.pb-wsm__foot--tall { padding: 12px var(--wsm-pad) 20px; }
.pb-wsm__foot-row { display: flex; gap: 8px; }
.pb-wsm__foot-row > .pb-wsm__btn { flex: 1; min-height: 50px; }
.pb-wsm__foot-row > .pb-wsm__btn--icon { flex: none; width: 50px; }
/* Время и баланс стоят ПОД кнопкой: под палец - действие, справка ниже. */
.pb-wsm__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font: 500 14px/1.4 var(--wsm-font);
  color: var(--wsm-muted);
}
.pb-wsm__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.pb-wsm__meta svg { flex: none; }
.pb-wsm__foot-note { margin: 0; text-align: center; font: 500 14px/1.4 var(--wsm-font); color: var(--wsm-muted); }

/* ── нижняя панель ─────────────────────────────────────────────────────────── */
.pb-wsm__tabs {
  flex: none;
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 6px 8px 10px;
  background: rgba(255, 250, 242, .98);
  border-top: 1px solid rgba(46, 28, 18, .10);
}
.pb-wsm__tab {
  position: relative;
  min-height: 52px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--wsm-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font: 600 12px/1.1 var(--wsm-font);
  cursor: pointer;
}
.pb-wsm__tab[aria-current="page"] { background: var(--bg-alt); color: var(--wsm-accent); }
.pb-wsm__tab-dot {
  position: absolute;
  top: 6px;
  right: 50%;
  margin-right: -18px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--wsm-accent);
  color: #fff;
  font: 700 11px/18px var(--wsm-font);
  text-align: center;
}

/* Открытый кадр галереи - иммерсивный просмотр: нижняя панель на нём не показывается.
   Дубль правила в wsm.js (hidden), здесь - для серверного рендера без JS. */
.pb-wsm:has(.pb-wsm__view[data-section="gallery"][data-state="opened"]:not([hidden])) .pb-wsm__tabs { display: none; }

/* ── карточка акции ───────────────────────────────────────────────────────── */
.pb-wsm__offer {
  position: relative;
  overflow: hidden;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg-alt);
}
.pb-wsm__offer-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pb-wsm__offer-in { position: relative; }
.pb-wsm__offer-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin: 0 0 8px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--wsm-ink);
  color: #fff;
  font: 700 11px/1 var(--wsm-font);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pb-wsm__offer-timer {
  position: absolute;
  top: 42px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 88px;
  height: 50px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .88);
  font: 700 18px/1 var(--wsm-font);
  font-variant-numeric: tabular-nums;
  color: #2a1a0e;
}
.pb-wsm__offer-row { display: flex; align-items: center; gap: 11px; margin: 0 0 8px; padding-right: 99px; }
.pb-wsm__offer-count {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  min-height: 50px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .7);
}
.pb-wsm__offer-count b { font: 700 27px/1 var(--wsm-font); color: var(--wsm-accent); }
.pb-wsm__offer-count span { font: 600 11px/1.2 var(--wsm-font); color: #5c4e3f; }
.pb-wsm__offer-name { margin: 0 0 4px; font: 600 14px/1.2 var(--wsm-font); color: #5c4e3f; }
.pb-wsm__offer-price { display: flex; align-items: baseline; gap: 7px; margin: 0; }
.pb-wsm__offer-price b { font: 700 23px/1 var(--wsm-font); color: #2a1a0e; }
.pb-wsm__offer-price s { font: 500 14px/1 var(--wsm-font); color: #6b5c4c; }
.pb-wsm__offer .pb-wsm__btn { width: 100%; min-height: 44px; border-radius: 11px; }

/* ── плитки операций ──────────────────────────────────────────────────────── */
.pb-wsm__ops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pb-wsm__op {
  display: grid;
  gap: 3px;
  align-content: center;
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid rgba(46, 28, 18, .14);
  border-radius: 12px;
  background: var(--wsm-card);
  text-align: left;
  cursor: pointer;
}
.pb-wsm__op-name { font: 600 15px/1.25 var(--wsm-font); color: var(--wsm-ink); }
.pb-wsm__op-cost { display: flex; align-items: center; gap: 5px; font: 400 14px/1.25 var(--wsm-font); color: var(--wsm-muted); }
.pb-wsm__op-cost--free { color: #5c4e3f; }
.pb-wsm__op[aria-pressed="true"] { border-color: var(--wsm-accent); }
.pb-wsm__op[data-locked="1"] { background: var(--paper-3); border-color: rgba(46, 28, 18, .1); }
.pb-wsm__op[data-locked="1"] .pb-wsm__op-name { color: var(--wsm-muted); }

/* ── чипы и поле уточнения ────────────────────────────────────────────────── */
.pb-wsm__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pb-wsm__chip {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(46, 28, 18, .16);
  border-radius: 999px;
  background: var(--wsm-card);
  color: var(--wsm-ink);
  font: 600 15px/1 var(--wsm-font);
  cursor: pointer;
}
.pb-wsm__chip[aria-pressed="true"] { background: var(--wsm-ink); border-color: var(--wsm-ink); color: #fff; }
.pb-wsm__field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 13px;
  border: 1px solid rgba(46, 28, 18, .16);
  border-radius: 12px;
  background: var(--wsm-card);
}
.pb-wsm__field svg { flex: none; }
.pb-wsm__field-text { flex: 1; min-width: 0; font: 400 16px/1.4 var(--wsm-font); color: var(--wsm-ink); }
.pb-wsm__hint { margin: 0; font: 400 14px/1.45 var(--wsm-font); color: var(--wsm-muted); text-wrap: pretty; }

/* ── карточки, тумблер, стадии ────────────────────────────────────────────── */
.pb-wsm__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 15px;
  background: var(--wsm-card);
  border: 1px solid rgba(46, 28, 18, .14);
  border-radius: 14px;
}
.pb-wsm__card--soft { background: var(--wsm-soft); border-color: rgba(184, 101, 42, .28); }
.pb-wsm__card--band { background: var(--wsm-band); border-color: transparent; }
.pb-wsm__card-title { margin: 0; display: flex; align-items: center; gap: 9px; font: 600 17px/1.3 var(--wsm-font); }
.pb-wsm__card-text { margin: 0; font: 400 15px/1.5 var(--wsm-font); color: #5c4e3f; text-wrap: pretty; }

.pb-wsm__switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--wsm-band);
}
.pb-wsm__switch .pb-wsm__btn { flex: 1; min-height: 44px; border: 0; background: transparent; }
.pb-wsm__switch .pb-wsm__btn[aria-pressed="true"] { background: var(--wsm-card); }

.pb-wsm__accordion {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 0 13px;
  border: 1px solid rgba(46, 28, 18, .16);
  border-radius: 12px;
  background: var(--wsm-card);
  font: 600 15px/1.3 var(--wsm-font);
  color: var(--wsm-ink);
  text-align: left;
  cursor: pointer;
}
.pb-wsm__accordion-arrow { transition: transform .15s ease; }
.pb-wsm__accordion[aria-expanded="true"] .pb-wsm__accordion-arrow { transform: rotate(180deg); }
.pb-wsm__accordion-body {
  padding: 12px 13px;
  border: 1px solid rgba(46, 28, 18, .16);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: var(--wsm-card);
  font: 400 15px/1.5 var(--wsm-font);
  color: var(--wsm-muted);
}

.pb-wsm__progress { height: 6px; border-radius: 99px; background: var(--bg-alt); overflow: hidden; }
.pb-wsm__progress span { display: block; height: 100%; background: var(--wsm-accent); }
.pb-wsm__stages { display: flex; flex-direction: column; gap: 9px; }
.pb-wsm__stage { margin: 0; display: flex; align-items: center; gap: 9px; font: 500 15px/1.4 var(--wsm-font); color: #5c4e3f; }
.pb-wsm__stage svg { flex: none; }
.pb-wsm__stage[data-stage="active"] { font-weight: 600; color: var(--wsm-ink); }
.pb-wsm__stage[data-stage="wait"] { color: #a1968a; }
.pb-wsm__stage[data-stage="active"] svg { animation: pbWsmSpin 1.4s linear infinite; }

/* ── галерея ──────────────────────────────────────────────────────────────── */
.pb-wsm__filters { display: flex; gap: 7px; padding: 12px var(--wsm-pad); overflow-x: auto; scrollbar-width: none; }
.pb-wsm__filters::-webkit-scrollbar { display: none; }
.pb-wsm__filter {
  flex: none;
  min-height: 44px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: var(--wsm-band);
  color: #5c4e3f;
  font: 600 15px/1 var(--wsm-font);
  cursor: pointer;
}
.pb-wsm__filter[aria-pressed="true"] { background: var(--wsm-ink); color: #fff; }
.pb-wsm__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; align-content: start; }
.pb-wsm__cell { position: relative; border: 0; padding: 0; background: none; cursor: pointer; }
.pb-wsm__cell img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--bg-alt); }
.pb-wsm__cell-badge {
  position: absolute;
  left: 7px;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(46, 28, 18, .72);
  color: #fff;
  font: 600 12px/1 var(--wsm-font);
}
.pb-wsm__cell-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.pb-wsm__cell-play span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(28, 20, 16, .55);
}

/* ── просмотр кадра ───────────────────────────────────────────────────────── */
.pb-wsm__viewer { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #120d0a; color: #fff; }
.pb-wsm__viewer .pb-wsm__iconbtn { color: #fff; }
.pb-wsm__viewer-bar { flex: none; display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 10px; }
.pb-wsm__viewer-title { flex: 1; min-width: 0; font: 600 16px/1.3 var(--wsm-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-wsm__viewer-count { flex: none; font: 500 14px/1 var(--wsm-font); color: rgba(255, 255, 255, .72); }
.pb-wsm__viewer-stage { flex: 1; min-height: 0; display: flex; align-items: center; gap: 6px; }
.pb-wsm__viewer-peek { flex: none; width: 14px; height: 64%; object-fit: cover; opacity: .32; }
.pb-wsm__viewer-main { flex: 1; min-width: 0; height: 100%; display: grid; place-items: center; padding: 0 2px; }
.pb-wsm__viewer-main img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.pb-wsm__viewer-acts { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 14px 12px 26px; }
.pb-wsm__viewer-act {
  min-height: 62px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font: 600 13px/1.1 var(--wsm-font);
  cursor: pointer;
}

/* ── шторка и модалка ─────────────────────────────────────────────────────── */
.pb-wsm__scrim { position: absolute; inset: 0; background: rgba(18, 13, 10, .55); }
.pb-wsm__sheet-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.pb-wsm__sheet {
  position: relative;
  padding: 10px var(--wsm-pad) 22px;
  border-radius: 20px 20px 0 0;
  background: var(--wsm-bg);
}
.pb-wsm__sheet-grip { display: block; width: 44px; height: 4px; margin: 0 auto 8px; border-radius: 99px; background: rgba(46, 28, 18, .22); }
.pb-wsm__sheet-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 56px;
  padding: 0 6px;
  border: 0;
  background: none;
  font: 600 17px/1.3 var(--wsm-font);
  color: var(--wsm-ink);
  text-align: left;
  cursor: pointer;
}
.pb-wsm__sheet-item svg { flex: none; }
.pb-wsm__sheet-item span { flex: 1; min-width: 0; }
.pb-wsm__sheet-item small { flex: none; font: 500 14px/1 var(--wsm-font); color: var(--wsm-muted); }
.pb-wsm__sheet-item--sep { border-top: 1px solid rgba(46, 28, 18, .1); }
.pb-wsm__sheet-item--danger { color: #8a3f22; }

.pb-wsm__modal { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--wsm-pad); }
.pb-wsm__dialog {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px;
  border-radius: 20px;
  background: var(--wsm-bg);
}
.pb-wsm__dialog-title { margin: 0; font: 600 20px/1.3 var(--wsm-font); }

/* ── кабинет ──────────────────────────────────────────────────────────────── */
.pb-wsm__menu { display: flex; flex-direction: column; gap: 8px; }
.pb-wsm__menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 0 14px;
  border: 1px solid var(--wsm-line);
  border-radius: 13px;
  background: var(--wsm-card);
  color: var(--wsm-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.pb-wsm__menu-item--accent { background: var(--wsm-soft); border-color: rgba(184, 101, 42, .3); }
.pb-wsm__menu-item svg { flex: none; }
.pb-wsm__menu-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-wsm__menu-tt b { font: 600 17px/1.25 var(--wsm-font); }
.pb-wsm__menu-tt span { font: 400 14px/1.3 var(--wsm-font); color: var(--wsm-muted); }

.pb-wsm__balance-card { display: flex; align-items: center; gap: 12px; padding: 14px 15px; background: var(--wsm-card); border: 1px solid var(--wsm-line); border-radius: 14px; }
.pb-wsm__balance-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--wsm-soft); }
.pb-wsm__balance-ico svg { fill: var(--wsm-accent); }
.pb-wsm__balance-sum { font: 700 22px/1.1 var(--wsm-font); }
.pb-wsm__balance-note { font: 400 14px/1.35 var(--wsm-font); color: var(--wsm-muted); }

.pb-wsm__plans { display: flex; flex-direction: column; gap: 9px; }
.pb-wsm__plan {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--wsm-card);
  border: 1px solid var(--wsm-line);
  border-radius: 14px;
}
.pb-wsm__plan--featured { border: 1.5px solid var(--wsm-accent); }
.pb-wsm__plan-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pb-wsm__plan-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 17px/1.25 var(--wsm-font); }
.pb-wsm__plan-badge { padding: 3px 8px; border-radius: 999px; background: var(--wsm-soft); font: 700 12px/1 var(--wsm-font); color: #8a5a34; }
.pb-wsm__plan-note { font: 400 15px/1.3 var(--wsm-font); color: #5c4e3f; }
.pb-wsm__plan-buy { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.pb-wsm__plan-sum { font: 700 19px/1 var(--wsm-font); }
.pb-wsm__plan-buy .pb-wsm__btn { min-height: 44px; border-radius: 999px; }
.pb-wsm__plan-buy .pb-wsm__btn--primary { min-height: 44px; font-size: 15px; }

.pb-wsm__list { display: flex; flex-direction: column; background: var(--wsm-card); border: 1px solid var(--wsm-line); border-radius: 14px; overflow: hidden; }
.pb-wsm__row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.pb-wsm__row + .pb-wsm__row { border-top: 1px solid rgba(46, 28, 18, .08); }
.pb-wsm__row-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-wsm__row-tt b { font: 600 16px/1.3 var(--wsm-font); }
.pb-wsm__row-tt span { font: 400 14px/1.35 var(--wsm-font); color: var(--wsm-muted); }
.pb-wsm__row-tt small { font: 400 14px/1.3 var(--wsm-font); color: var(--wsm-muted); }
.pb-wsm__amount { flex: none; font: 700 17px/1 var(--wsm-font); }
.pb-wsm__amount--in { color: var(--wsm-accent); }
.pb-wsm__group-title { margin: 0; font: 600 13px/1.2 var(--wsm-font); letter-spacing: .06em; text-transform: uppercase; color: var(--wsm-muted); }

/* Тумблер: видимая дорожка 52×32, тач-цель добита слоем до 52×44. */
.pb-wsm__toggle { position: relative; flex: none; display: inline-flex; align-items: center; width: 52px; height: 32px; padding: 3px; border: 0; border-radius: 999px; background: var(--wsm-band); cursor: pointer; }
.pb-wsm__toggle::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.pb-wsm__toggle span { display: block; width: 26px; height: 26px; border-radius: 999px; background: #fff; }
.pb-wsm__toggle[aria-pressed="true"] { background: var(--wsm-accent); }
.pb-wsm__toggle[aria-pressed="true"] span { margin-left: auto; }

.pb-wsm__example { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pb-wsm__example figure { position: relative; margin: 0; }
.pb-wsm__example img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--bg-alt); }
.pb-wsm__example figcaption {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(46, 28, 18, .68);
  color: #fff;
  font: 600 12px/1 var(--wsm-font);
}