/* beauty_6: первый экран как рабочее пространство — панель подбора визита, холст с работами, панель инструментов. */

:root{
  --bg:#15110f;
  --surface:color-mix(in srgb, var(--bg) 93%, #fff);
  --surface-2:color-mix(in srgb, var(--bg) 88%, #fff);
  --surface-3:color-mix(in srgb, var(--bg) 80%, #fff);
  --edge:rgba(255, 255, 255, .07);
  --edge-strong:rgba(255, 255, 255, .14);
  --ink:#f3efe9;
  --muted:color-mix(in srgb, var(--ink) 62%, transparent);
  --faint:color-mix(in srgb, var(--ink) 40%, transparent);
  --accent:#f2e14c;
  --accent-ink:#1a1712;
  --accent-soft:rgba(242, 225, 76, .08);
  --accent-edge:rgba(242, 225, 76, .55);
  --sky:linear-gradient(90deg, #c9ecff, #eaf7ff);
  --glow:rgba(170, 58, 26, .5);
  --error:#ffb4a8;
  --bar-glass:color-mix(in srgb, var(--bg) 85%, transparent);
  --foot-glass:var(--surface);

  --font:"Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter:clamp(16px, 3vw, 48px);
  --max:1200px;
  --ease:cubic-bezier(.2, .8, .2, 1);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --lift:inset 0 1px 0 rgba(255, 255, 255, .05);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at 70% 0%, rgba(120, 40, 20, .28), transparent 70%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body.is-locked{ overflow:hidden; }

img{ display:block; max-width:100%; }

a{ color:inherit; }

button,
input,
select{ font:inherit; color:inherit; }

button{ cursor:pointer; }

[hidden]{ display:none !important; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Карточка раздела: в этом шаблоне «стекло» — плотная тёмная плашка. */
.glass{
  background:var(--surface);
  border:1px solid var(--edge);
  box-shadow:var(--lift);
}

/* ---------- Оболочка всех страниц: колонка иконок слева, содержимое справа ---------- */

.shell{
  display:grid;
  grid-template-columns:64px minmax(0, 1fr);
  gap:16px;
  padding:20px;
}

.shell__main{ min-width:0; }

/* На главной видно рабочее пространство, на остальных — шапка страницы и один раздел */
body.is-home .pages,
body.is-inner .studio{ display:none; }

body.is-inner .pages > .sec:not([data-current]){ display:none; }

body.is-home .foot{ margin-top:20px; }

/* ---------- Рабочее пространство (главная) ---------- */

.studio{
  display:grid;
  grid-template-columns:340px auto minmax(0, 1fr);
  gap:16px;
  height:calc(100vh - 40px);
  height:calc(100svh - 40px);
  min-height:640px;
}

/* Колонка иконок */

.rail{
  position:sticky;
  top:20px;
  align-self:start;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  height:calc(100vh - 40px);
  height:calc(100svh - 40px);
  min-height:0;
}

.rail__group{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:8px;
  border:1px solid var(--edge);
  border-radius:999px;
  background:var(--surface);
  box-shadow:var(--lift);
}

.rail__logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--ink);
  color:var(--bg);
  font-size:19px;
  font-weight:700;
  text-decoration:none;
}

.rail__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  color:var(--muted);
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease;
}

.rail__btn:hover{
  background:var(--surface-2);
  color:var(--ink);
}

.rail__btn.is-active{
  background:var(--accent);
  color:var(--accent-ink);
}

.rail__btn svg,
.rail__phone svg{ width:20px; height:20px; }

.rail__phone{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin-top:auto;
  border:1px solid var(--edge-strong);
  border-radius:50%;
  background:var(--surface-2);
  text-decoration:none;
}

.rail__phone:hover{ background:var(--surface-3); }

/* Левая колонка: карточка бренда и панель */

.studio__left{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
}

.brand-card{
  position:relative;
  z-index:30;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:64px;
  padding:8px 10px 8px 8px;
  border:1px solid var(--edge);
  border-radius:999px;
  background:var(--surface);
  box-shadow:var(--lift);
}

.brand-card__mark{
  display:flex;
  flex:none;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--surface-2);
  font-size:17px;
  font-weight:700;
}

.brand{
  display:flex;
  flex:1;
  flex-direction:column;
  min-width:0;
  line-height:1.2;
  text-decoration:none;
}

.brand__name{
  overflow:hidden;
  font-size:calc(18px * var(--k, 1));
  font-weight:600;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.brand__tag{
  overflow:hidden;
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.brand-card__toggle{
  display:flex;
  flex:none;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
}

.brand-card__toggle:hover{ background:var(--surface-2); }

.brand-card__toggle svg{ width:20px; height:20px; }

.menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  display:flex;
  flex-direction:column;
  padding:8px;
  border:1px solid var(--edge-strong);
  border-radius:24px;
  background:var(--surface);
  box-shadow:0 24px 48px rgba(0, 0, 0, .45);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.brand-card.is-open .menu{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .2s ease, transform .2s ease;
}

.menu a{
  padding:12px 14px;
  border-radius:14px;
  font-size:16px;
  text-decoration:none;
}

.menu a:hover,
.menu a.is-active{ background:var(--surface-2); }

.panel{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:16px;
  border:1px solid var(--edge);
  border-radius:32px;
  background:var(--surface);
  box-shadow:var(--lift);
  scrollbar-width:thin;
  scrollbar-color:var(--surface-3) transparent;
}

.panel__head{ padding:6px 6px 18px; }

.panel__title{
  margin:0;
  font-size:calc(22px * var(--k, 1));
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.02em;
  text-wrap:balance;
}

.panel__sub{
  margin:6px 0 0;
  color:var(--muted);
  font-size:calc(14px * var(--k, 1));
  line-height:1.45;
}

.field-block{ margin-top:22px; }

.field-block__label{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  font-size:14px;
}

.field-block__label svg{
  width:16px;
  height:16px;
  color:var(--muted);
}

.field-block__hint{
  margin:10px 2px 0;
  color:var(--muted);
  font-size:13px;
}

.select-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:66px;
  padding:10px 16px 10px 18px;
  border:1px solid var(--edge);
  border-radius:18px;
  background:var(--surface-2);
  cursor:pointer;
}

.select-card:hover{ border-color:var(--edge-strong); }

.select-card:focus-within{ border-color:var(--accent-edge); }

.select-card__text{
  display:flex;
  flex:1;
  flex-direction:column;
  min-width:0;
}

.select-card__title{
  overflow:hidden;
  font-size:16px;
  font-weight:500;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.select-card__sub{
  color:var(--muted);
  font-size:13px;
}

.select-card__chev{
  flex:none;
  width:18px;
  height:18px;
}

.select-card__native{
  position:absolute;
  inset:0;
  width:100%;
  opacity:0;
  cursor:pointer;
}

.segment{
  display:grid;
  grid-auto-columns:minmax(0, 1fr);
  grid-auto-flow:column;
  gap:2px;
  padding:4px;
  border-radius:999px;
  background:var(--surface-2);
}

.segment button{
  min-width:0;
  height:44px;
  padding:0 10px;
  overflow:hidden;
  border:0;
  border-radius:999px;
  background:none;
  color:var(--muted);
  font-size:15px;
  white-space:nowrap;
  text-overflow:ellipsis;
  transition:background-color .2s ease, color .2s ease;
}

.segment button:hover{ color:var(--ink); }

.segment button[aria-checked="true"]{
  background:var(--surface-3);
  color:var(--ink);
  box-shadow:var(--lift), 0 4px 12px rgba(0, 0, 0, .25);
}

.segment__ghost{
  height:44px;
  border-radius:999px;
  background:var(--surface-3);
  opacity:.4;
  animation:ghost 1.2s ease-in-out infinite alternate;
}

.tiles{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:92px;
  padding:10px 6px;
  border:1px solid var(--edge);
  border-radius:18px;
  background:var(--surface-2);
  color:var(--muted);
  transition:border-color .2s ease, background-color .2s ease, color .2s ease;
}

.tile:hover{
  border-color:var(--edge-strong);
  color:var(--ink);
}

.tile__time{
  font-size:22px;
  font-weight:600;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

.tile__sub{ font-size:12px; }

.tile[aria-checked="true"]{
  border-color:var(--accent-edge);
  background:var(--accent-soft);
  color:var(--ink);
}

.tile--ghost{
  border-color:transparent;
  animation:ghost 1.2s ease-in-out infinite alternate;
}

@keyframes ghost{
  from{ opacity:.35; }
  to{ opacity:.8; }
}

.link-btn{
  margin-top:10px;
  padding:4px 2px;
  border:0;
  background:none;
  color:var(--muted);
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:4px;
}

.link-btn:hover{ color:var(--ink); }

.cta{
  width:100%;
  height:56px;
  margin-top:24px;
  border:0;
  border-radius:999px;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:16px;
  font-weight:600;
  transition:opacity .2s ease, transform .2s ease;
}

.cta:hover{ transform:translateY(-1px); }

.cta:disabled{
  opacity:.3;
  cursor:not-allowed;
  transform:none;
}

.panel__note{
  margin:10px 0 0;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

/* Инструменты холста */

.tools{
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:76px;
}

.tools__btn{
  height:52px;
  padding:0 20px;
  border:1px solid var(--edge);
  border-radius:999px;
  background:var(--surface);
  box-shadow:var(--lift);
  color:var(--muted);
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
}

.tools__btn:hover{
  background:var(--surface-2);
  color:var(--ink);
}

.tools__btn[aria-pressed="true"]{
  border-color:transparent;
  background:var(--accent);
  color:var(--accent-ink);
}


/* Холст */

.canvas{
  position:relative;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto;
  gap:12px;
  min-width:0;
  min-height:0;
  padding:0 0 4px;
  border-radius:32px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 72%, var(--glow), transparent 70%),
    radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1.4px) 0 0 / 22px 22px;
}

.canvas__top{
  position:relative;
  display:flex;
  justify-content:center;
  min-height:64px;
}

.segment--view{
  align-self:start;
  padding:5px;
  border:1px solid var(--edge);
  background:var(--surface);
  box-shadow:var(--lift);
}

.segment--view button{
  height:52px;
  padding:0 26px;
  font-size:16px;
}

.segment--view.is-disabled{ opacity:.45; }

.segment--view button:disabled{ cursor:default; }

.segment--view button:disabled:hover{ color:var(--muted); }

.canvas__book{
  position:absolute;
  top:0;
  right:0;
  display:flex;
  align-items:center;
  gap:10px;
  height:62px;
  padding:0 26px 0 22px;
  border:0;
  border-radius:999px;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:16px;
  font-weight:600;
  box-shadow:0 12px 30px rgba(0, 0, 0, .3);
  transition:transform .2s ease;
}

.canvas__book:hover{ transform:translateY(-1px); }

.canvas__book svg{ width:20px; height:20px; }

.stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:0;
}

/* Подиум: две пунктирные эллипсы под фото */
.stage__rings{
  position:absolute;
  left:50%;
  bottom:0;
  width:min(92%, 860px);
  aspect-ratio:3 / 1;
  border-radius:50%;
  background:repeating-conic-gradient(rgba(255, 255, 255, .09) 0 3.5deg, transparent 3.5deg 8deg);
  -webkit-mask:radial-gradient(closest-side, transparent 64%, #000 65% 80%, transparent 81% 86%, #000 87% 97%, transparent 98%);
  mask:radial-gradient(closest-side, transparent 64%, #000 65% 80%, transparent 81% 86%, #000 87% 97%, transparent 98%);
  transform:translateX(-50%);
  pointer-events:none;
}

.stage__frame{
  position:relative;
  height:min(94%, 900px);
  aspect-ratio:9 / 16;
  max-width:92%;
  margin:0;
  overflow:hidden;
  border-radius:28px;
  background:var(--surface-2);
  box-shadow:0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px var(--edge);
}

/* Формат 16:9 из настроек админки */
.stage__frame--wide{
  width:min(92%, 1100px);
  height:auto;
  max-height:94%;
  aspect-ratio:16 / 9;
}

.stage__frame.is-entering{ animation:enter .55s var(--ease) both; }

@keyframes enter{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to{ opacity:1; transform:none; }
}

.stage__frame > img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.stage__frame--quote{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:24px;
  height:auto;
  aspect-ratio:auto;
  width:min(620px, 88%);
  padding:clamp(28px, 4vw, 48px);
  background:var(--surface);
}

.stage__quote{
  margin:0;
  font-size:clamp(20px, 1.9vw, 28px);
  font-weight:500;
  line-height:1.4;
  letter-spacing:-.01em;
}

.stage__who{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:14px;
}

.stage__who img{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
}

.stage__who strong{
  display:block;
  color:var(--ink);
  font-size:15px;
  font-weight:600;
}

.stage__stars{
  color:var(--accent);
  letter-spacing:.14em;
}

.stage__caption{
  position:absolute;
  left:8px;
  bottom:8px;
  max-width:min(300px, 40%);
}

.stage__caption-title{
  display:block;
  font-size:18px;
  font-weight:600;
  line-height:1.3;
}

.stage__caption-sub{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:14px;
}

/* Описание в две строки, полностью — по нажатию */
.text-clamp{
  display:-webkit-box;
  overflow:hidden;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.text-clamp.is-clamped{
  cursor:pointer;
  pointer-events:auto;
}

.text-clamp.is-open{
  display:block;
  overflow:visible;
  -webkit-line-clamp:unset;
}

/* Пустые строки подписи не занимают места… */
.stage__caption-title:empty,
.stage__caption-sub:empty,
.stage__caption-price:empty{ display:none; }

/* …кроме плашек на компьютере: там размер постоянный —
   заголовок в одну строку, описание на две строки, строка цены. */
.stage__caption--overlay .stage__caption-title,
.stage__caption--side .stage__caption-title{
  display:block;
  min-height:1.3em;
  overflow:hidden;
  line-height:1.3;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.stage__caption--overlay .stage__caption-sub,
.stage__caption--side .stage__caption-sub{
  min-height:2.9em;
  line-height:1.45;
}

.stage__caption--overlay .stage__caption-sub:empty,
.stage__caption--side .stage__caption-sub:empty,
.stage__caption--overlay .stage__caption-title:empty,
.stage__caption--side .stage__caption-title:empty{ display:block; }

.stage__caption--overlay .stage__caption-price,
.stage__caption--side .stage__caption-price{
  display:block;
  min-height:1.4em;
  line-height:1.4;
  text-align:right;
}

.stage__caption-price{
  display:block;
  margin-top:6px;
  font-size:14px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* 16:9 — плашка у левого нижнего угла фото, частично выходит за его край.
   Координаты ставит скрипт, плашка поднимается вверх на свою высоту. */
.stage.has-thumbs .stage__caption--overlay,
.stage__caption--overlay{
  bottom:auto;
  right:auto;
  z-index:3;
  width:min(380px, 46%);
  max-width:none;
  padding:14px 20px 16px;
  border:1px solid var(--edge-strong);
  border-radius:22px;
  background:color-mix(in srgb, var(--surface) 62%, transparent);
  box-shadow:var(--lift), 0 12px 30px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  transform:translateY(-100%);
  pointer-events:none;
}

.stage__caption--overlay .stage__caption-title{ font-size:20px; }

/* 9:16 — подпись слева от фото, по центру его высоты, на такой же плашке, как у 16:9.
   Заголовок по центру, описание слева, цена справа. */
.stage.has-thumbs .stage__caption--side,
.stage__caption--side{
  left:auto;
  bottom:auto;
  max-width:none;
  padding:16px 20px 18px;
  border:1px solid var(--edge-strong);
  border-radius:22px;
  background:color-mix(in srgb, var(--surface) 62%, transparent);
  box-shadow:var(--lift), 0 12px 30px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  transform:translateY(-50%);
}

.stage__caption--side .stage__caption-title{
  font-size:24px;
  letter-spacing:-.02em;
  text-align:center;
}

.stage__caption--side .stage__caption-sub{
  margin-top:8px;
  font-size:15px;
}

.stage__caption--side .stage__caption-price{
  margin-top:10px;
  text-align:right;
}

/* Галерея работ: лента фото и миниатюры */

/* Под фото остаётся место только на ленту миниатюр */
.stage.has-thumbs .stage__frame{
  height:min(calc(100% - 84px), 900px);
  margin-bottom:12px;
}

.stage.has-thumbs .stage__frame--wide{
  height:auto;
  max-height:calc(100% - 84px);
}

/* Фото во всю высоту: подпись поднимается наверх, чтобы не наезжать на миниатюры */
.stage.has-thumbs .stage__caption{
  top:8px;
  bottom:auto;
}

.is-gallery{
  -webkit-user-select:none;
  user-select:none;
}

.gallery__track{
  display:flex;
  height:100%;
  touch-action:pan-y;
  cursor:grab;
  transition:transform .55s cubic-bezier(.22, 1, .36, 1);
  will-change:transform;
}

.gallery__track:active{ cursor:grabbing; }

.gallery__slide{
  flex:0 0 100%;
  height:100%;
}

.gallery__slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

.gallery__nav{
  position:absolute;
  top:50%;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255, 255, 255, .88);
  color:var(--accent-ink);
  box-shadow:0 8px 20px rgba(0, 0, 0, .3);
  transform:translateY(-50%);
  transition:transform .2s ease, opacity .2s ease;
}

.gallery__nav:hover{ transform:translateY(-50%) scale(1.08); }

.gallery__nav:disabled{
  opacity:.35;
  cursor:not-allowed;
  transform:translateY(-50%);
}

.gallery__nav svg{
  width:22px;
  height:22px;
  stroke-width:2;
}

.gallery__nav--prev{ left:14px; }

.gallery__nav--next{ right:14px; }

.stage__thumbs{
  position:relative;
  z-index:1;
  display:flex;
  flex:none;
  gap:4px;
  max-width:min(92%, 640px);
  height:68px;
  padding:3px;
  overflow-x:auto;
  scrollbar-width:none;
}

.stage__thumbs::-webkit-scrollbar{ display:none; }

.gallery__thumb{
  flex:none;
  width:35px;
  height:100%;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:10px;
  background:var(--surface-2);
  opacity:.55;
  transition:width .3s ease-out, opacity .3s ease-out, box-shadow .3s ease-out;
}

.gallery__thumb:hover{ opacity:.85; }

.gallery__thumb.is-active{
  width:120px;
  opacity:1;
  box-shadow:0 0 0 2px var(--accent);
}

.gallery__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

/* Галерея на отдельной странице */

.page-gallery{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:clamp(16px, 3vw, 32px);
  border:1px solid var(--edge);
  border-radius:32px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 60%, var(--glow), transparent 70%),
    radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1.4px) 0 0 / 22px 22px;
}

.page-gallery + .process__track{ margin-top:18px; }

/* На странице галереи сверху без текста: заголовок скрыт визуально,
   но остаётся для поисковиков и скринридеров */
#process .sec-head{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

#worksViewSwitch{
  align-self:center;
  margin:0 auto;
}

.page-gallery__frame{
  position:relative;
  height:min(72vh, 760px);
  aspect-ratio:9 / 16;
  max-width:100%;
  margin:0;
  overflow:hidden;
  border-radius:28px;
  background:var(--surface-2);
  box-shadow:0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px var(--edge);
}

.page-gallery__frame.is-wide{
  width:min(100%, 1100px);
  height:auto;
  aspect-ratio:16 / 9;
}

.page-gallery__caption{
  width:min(100%, 640px);
  min-height:24px;
}

.page-gallery__count{
  color:var(--muted);
  font-size:13px;
  font-variant-numeric:tabular-nums;
}

.page-gallery__title{
  margin:4px 0 0;
  font-size:22px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.02em;
}

.page-gallery__price{
  display:block;
  margin-top:4px;
  font-size:15px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.page-gallery__text{
  margin:6px 0 0;
  color:var(--muted);
  font-size:15px;
}

/* Сравнение до/после */

.ba{
  --pos:50%;
  position:relative;
  overflow:hidden;
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
}

.ba__layer{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
}

.ba__before{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); }

.ba__line{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--pos);
  width:2px;
  margin-left:-1px;
  background:#fff;
  pointer-events:none;
}

.ba__knob{
  position:absolute;
  top:50%;
  left:var(--pos);
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--accent);
  color:var(--accent-ink);
  box-shadow:0 6px 20px rgba(0, 0, 0, .35);
  transform:translate(-50%, -50%);
  cursor:ew-resize;
  touch-action:none;
}

.ba__knob svg{ width:22px; height:22px; stroke-width:2; }

.ba__tag{
  position:absolute;
  top:14px;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(0, 0, 0, .45);
  color:#fff;
  font-size:12px;
  font-weight:600;
  pointer-events:none;
}

.ba__tag--before{ left:14px; }

.ba__tag--after{ right:14px; }

/* Нижняя панель */

.toolbar{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  min-height:66px;
  padding:8px 10px;
  border:1px solid var(--edge);
  border-radius:999px;
  background:var(--surface);
  box-shadow:var(--lift), 0 16px 40px rgba(0, 0, 0, .3);
}

.toolbar__btn,
.toolbar .chan{
  display:flex;
  flex:none;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  text-decoration:none;
}

.toolbar__btn:hover,
.toolbar .chan:hover{ background:var(--surface-2); }

.toolbar__btn:disabled{
  opacity:.3;
  cursor:default;
}

.toolbar__btn:disabled:hover{ background:none; }

.toolbar__btn svg,
.toolbar .chan svg{ width:21px; height:21px; }

.toolbar .chan text{
  fill:currentColor;
  stroke:none;
  font-family:var(--font);
  font-size:9px;
  font-weight:800;
}

.toolbar__count{
  min-width:64px;
  padding:0 8px;
  font-size:16px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}

.toolbar__sep{
  flex:none;
  width:1px;
  height:28px;
  margin:0 8px;
  background:var(--edge-strong);
}

.toolbar__contacts{
  display:flex;
  gap:2px;
}

.toolbar__contacts:empty,
.toolbar__contacts:empty + .toolbar__sep{ display:none; }

.toolbar__book{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:52px;
  height:52px;
  padding:0;
  border:0;
  border-radius:999px;
  background:var(--accent);
  color:var(--accent-ink);
  font-weight:600;
}

.toolbar__book svg{ width:21px; height:21px; flex:none; }

.toolbar__book span{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
}

/* ---------- Шапка внутренней страницы ---------- */

.page-bar{
  position:relative;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  max-width:calc(var(--max) + 2 * var(--gutter));
  margin:0 auto;
  padding:0 var(--gutter);
}

.page-bar .brand-card{
  flex:0 1 380px;
  min-width:0;
}

.page-bar__actions{
  display:flex;
  flex:none;
  align-items:center;
  gap:10px;
}

.page-bar__book{
  height:62px;
  padding:0 28px;
  border:0;
  border-radius:999px;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:16px;
  font-weight:600;
}

body.is-inner .pages > .sec[data-current]{ padding-top:clamp(36px, 5vw, 64px); }

/* ---------- Разделы ---------- */

.sec{
  max-width:calc(var(--max) + 2 * var(--gutter));
  margin:0 auto;
  padding:clamp(80px, 9vw, 128px) var(--gutter) 0;
}

.sec-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px 40px;
  margin-bottom:clamp(24px, 3vw, 40px);
}

.sec-title{
  margin:0;
  font-size:clamp(36px, 4.4vw, 64px);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
}

#processTitle{ font-size:calc(clamp(36px, 4.4vw, 64px) * var(--k, 1)); }

.sec-note{
  max-width:36ch;
  margin:0;
  color:var(--muted);
  font-size:15px;
}

.sec-empty{
  margin:0;
  color:var(--muted);
}

/* Как проходит приём */

.process__track{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}

.step-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px 12px 22px;
  border-radius:28px;
}

.step-card__media{
  aspect-ratio:9 / 16;
  margin:0 0 6px;
  overflow:hidden;
  border-radius:18px;
}

.step-card__media.is-wide{ aspect-ratio:16 / 9; }

.step-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.step-card__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin-left:8px;
  border-radius:50%;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:14px;
  font-weight:700;
}

.step-card__title{
  margin:0;
  padding:0 8px;
  font-size:calc(19px * var(--k, 1));
  font-weight:600;
  line-height:1.25;
}

.step-card__text{
  margin:0;
  padding:0 8px;
  color:var(--muted);
  font-size:calc(15px * var(--k, 1));
}

/* Услуги и цены */

.price{
  margin:0;
  padding:8px;
  list-style:none;
  border-radius:28px;
}

.price__row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 240px auto;
  grid-template-areas:"main meta act";
  align-items:center;
  gap:12px 32px;
  padding:20px 22px;
  border-radius:20px;
  cursor:pointer;
  transition:background-color .2s ease;
}

.price__row + .price__row{ box-shadow:0 -1px 0 var(--edge); }

.price__row:hover{ background:var(--surface-2); }

.price__row:hover + .price__row{ box-shadow:none; }

.price__main{ grid-area:main; min-width:0; }

.price__name{
  margin:0;
  font-size:clamp(17px, 1.5vw, 20px);
  font-weight:600;
  line-height:1.3;
}

.price__desc{
  max-width:62ch;
  margin:6px 0 0;
  color:var(--muted);
  font-size:15px;
}

.price__desc.is-clamped{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.price__more{
  margin-top:6px;
  padding:0;
  border:0;
  background:none;
  font-size:14px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:4px;
}

.price__meta{
  grid-area:meta;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  font-variant-numeric:tabular-nums;
}

.price__dur{
  color:var(--muted);
  font-size:15px;
}

.price__cost{
  margin-left:auto;
  font-size:18px;
  font-weight:700;
  white-space:nowrap;
}

.price__act{
  grid-area:act;
  min-height:44px;
  padding:0 20px;
  border:1px solid var(--edge-strong);
  border-radius:999px;
  background:var(--surface-2);
  font-size:14px;
  font-weight:600;
}

.price__row:hover .price__act{
  border-color:transparent;
  background:var(--accent);
  color:var(--accent-ink);
}

/* Отзывы */

.wall{
  columns:3 280px;
  column-gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}

.review{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:0 0 14px;
  padding:24px;
  border-radius:24px;
  break-inside:avoid;
}

.review__rating{
  color:var(--accent);
  font-size:14px;
  letter-spacing:.12em;
}

.review__text{
  margin:0;
  font-size:16px;
  line-height:1.6;
  white-space:pre-line;
}

.review__who{
  display:flex;
  align-items:center;
  gap:12px;
}

.review__photo{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
}

.review__name{
  display:block;
  font-size:15px;
  font-weight:600;
}

.review__date{
  display:block;
  color:var(--muted);
  font-size:13px;
}

.more{
  display:block;
  min-height:52px;
  margin:6px auto 0;
  padding:0 28px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
}

.more:hover{ background:var(--surface-2); }

/* ---------- Подвал: одна строка на всю ширину ---------- */

.foot{
  margin-top:clamp(64px, 7vw, 96px);
  padding:0 20px calc(20px + var(--safe-b));
}

.foot__inner{
  padding:22px 28px 16px;
  border:1px solid var(--edge);
  border-radius:28px;
  background:var(--foot-glass);
  box-shadow:var(--lift);
}

.foot__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr);
  align-items:center;
  gap:16px 40px;
  padding-bottom:16px;
}

.foot__col{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.foot__salon{
  font-size:17px;
  font-weight:600;
  line-height:1.3;
}

.foot__text{
  max-width:40ch;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.foot__title{
  color:var(--muted);
  font-size:12px;
}

.foot__links{
  display:flex;
  flex-wrap:wrap;
  gap:0 18px;
}

.foot__row{
  font-size:14px;
  line-height:1.6;
  overflow-wrap:anywhere;
}

.foot__row a,
.foot__bottom a{ text-decoration:none; }

.foot__row a:hover,
.foot__bottom a:hover{
  text-decoration:underline;
  text-underline-offset:4px;
}

.foot__bottom{
  display:flex;
  flex-wrap:wrap;
  gap:4px 24px;
  padding-top:14px;
  border-top:1px solid var(--edge);
  color:var(--muted);
  font-size:12px;
}

/* Кнопка записи, когда первый экран прокручен */

.float-book{
  position:fixed;
  right:24px;
  bottom:calc(24px + var(--safe-b));
  z-index:35;
  height:56px;
  padding:0 28px;
  border:0;
  border-radius:999px;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:16px;
  font-weight:600;
  box-shadow:0 16px 40px rgba(0, 0, 0, .4);
  opacity:0;
  transform:translateY(20px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s var(--ease);
}

body.is-past .float-book{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

/* ---------- Панель записи ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 24px;
  border:1px solid transparent;
  border-radius:999px;
  background:none;
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  transition:background-color .2s ease, opacity .2s ease;
}

.btn--solid{
  background:var(--accent);
  color:var(--accent-ink);
}

.btn--line{
  border-color:var(--edge-strong);
  background:var(--surface-2);
}

.btn--line:hover{ background:var(--surface-3); }

.btn--block{ width:100%; }

.btn:disabled{
  opacity:.3;
  cursor:not-allowed;
}

.sheet{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  justify-content:flex-end;
}

.sheet__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0, 0, 0, .5);
  opacity:0;
  transition:opacity .35s ease;
}

.sheet__panel{
  position:relative;
  display:flex;
  flex-direction:column;
  width:min(540px, 100%);
  height:100%;
  border-left:1px solid var(--edge);
  background:var(--surface);
  color:var(--ink);
  box-shadow:-24px 0 60px rgba(0, 0, 0, .45);
  transform:translateX(100%);
  transition:transform .45s var(--ease);
  outline:none;
}

.sheet.is-open .sheet__backdrop{ opacity:1; }

.sheet.is-open .sheet__panel{ transform:none; }

.sheet__head{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:14px;
  padding:20px 22px 16px;
  border-bottom:1px solid var(--edge);
}

.sheet__title{
  margin:0;
  font-size:26px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.02em;
}

.sheet__close{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid var(--edge);
  border-radius:50%;
  background:var(--surface-2);
}

.sheet__close:hover{ background:var(--surface-3); }

.sheet__close svg,
.cal__nav svg{ width:20px; height:20px; }

.ticket{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr);
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}

.ticket button{
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  padding:9px 14px;
  border:1px dashed var(--edge-strong);
  border-radius:16px;
  background:none;
  text-align:left;
}

.ticket li.is-set button{
  border:1px solid var(--accent-edge);
  background:var(--accent-soft);
}

.ticket__k{
  color:var(--muted);
  font-size:11px;
}

.ticket__v{
  overflow:hidden;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.ticket li:not(.is-set) .ticket__v{
  opacity:.5;
  font-weight:500;
}

.sheet__body{
  position:relative;
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:0 22px calc(32px + var(--safe-b));
}

.step{
  padding:22px 0;
  border-bottom:1px solid var(--edge);
}

.step:last-child{ border-bottom:0; }

.step__title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  font-size:15px;
  font-weight:600;
}

.step__n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--surface-3);
  font-size:13px;
  font-weight:700;
}

.svc-pick{
  display:grid;
  gap:8px;
}

.svc-opt{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:4px 16px;
  width:100%;
  padding:14px 16px;
  border:1px solid var(--edge);
  border-radius:18px;
  background:var(--surface-2);
  text-align:left;
}

.svc-opt:hover{ border-color:var(--edge-strong); }

.svc-opt.selected{
  border-color:var(--accent-edge);
  background:var(--accent-soft);
}

.svc-opt__name{
  font-size:15px;
  font-weight:600;
  line-height:1.35;
}

.svc-opt__dur{
  grid-column:1;
  color:var(--muted);
  font-size:13px;
}

.svc-opt__price{
  grid-column:2;
  grid-row:1 / span 2;
  font-size:15px;
  font-weight:700;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.cal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.cal__month{
  font-size:16px;
  font-weight:600;
}

.cal__month::first-letter{ text-transform:uppercase; }

.cal__nav{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid var(--edge);
  border-radius:50%;
  background:var(--surface-2);
}

.cal__nav:hover{ background:var(--surface-3); }

.cal__nav:disabled{
  opacity:.3;
  cursor:default;
}

.cal__weekdays,
.cal__days{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:4px;
}

.cal__weekdays span{
  padding:4px 0;
  color:var(--faint);
  font-size:12px;
  text-align:center;
}

.day{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1;
  max-height:52px;
  width:100%;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  font-size:15px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  cursor:default;
}

.day.disabled{ opacity:.25; }

.day.available{
  background:var(--surface-2);
  cursor:pointer;
}

.day.available:hover{ background:var(--surface-3); }

.day.today{ box-shadow:inset 0 0 0 1px var(--edge-strong); }

.day.selected,
.day.selected:hover{
  background:var(--accent);
  color:var(--accent-ink);
  box-shadow:none;
}

.cal__legend{
  display:flex;
  align-items:center;
  gap:8px;
  margin:12px 0 0;
  color:var(--muted);
  font-size:13px;
}

.cal__dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--surface-3);
}

.slots-date{
  margin:0 0 12px;
  color:var(--muted);
  font-size:14px;
}

.time-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:8px;
}

.time{
  min-height:46px;
  padding:0 8px;
  border:1px solid var(--edge);
  border-radius:999px;
  background:var(--surface-2);
  font-size:15px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.time:hover{ border-color:var(--edge-strong); }

.time.unavailable{
  border-style:dashed;
  background:none;
  color:var(--faint);
}

.time.selected,
.time.selected:hover{
  border:1px solid transparent;
  background:var(--accent);
  color:var(--accent-ink);
}

.time-legend{
  margin:12px 0 0;
  color:var(--muted);
  font-size:13px;
}

.booking-empty{
  grid-column:1 / -1;
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.fields{
  display:grid;
  gap:12px;
  margin-bottom:16px;
}

.field{
  display:grid;
  gap:6px;
}

.field__label{
  color:var(--muted);
  font-size:13px;
}

.field input{
  width:100%;
  min-height:54px;
  padding:0 18px;
  border:1px solid var(--edge);
  border-radius:16px;
  background:var(--surface-2);
  font-size:16px;
  outline:none;
  transition:border-color .2s ease;
}

.field input::placeholder{ color:var(--faint); }

.field input:focus{ border-color:var(--accent-edge); }

.booking-consent{
  display:grid;
  gap:10px;
  margin-bottom:16px;
}

.booking-consent-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  cursor:pointer;
}

.booking-consent-item input{
  flex:none;
  width:18px;
  height:18px;
  margin:1px 0 0;
  accent-color:var(--accent);
}

.booking-error{
  margin:0 0 14px;
  padding:10px 16px;
  border-radius:14px;
  background:rgba(255, 120, 100, .12);
  color:var(--error);
  font-size:14px;
}

#confirmBtn{ min-height:56px; font-size:16px; }

.booking-note{
  margin:12px 0 0;
  color:var(--muted);
  font-size:13px;
  text-align:center;
}

.success{
  padding:40px 0 8px;
  text-align:center;
}

.success__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:66px;
  height:66px;
  border-radius:50%;
  background:var(--accent);
  color:var(--accent-ink);
}

.success__mark svg{
  width:30px;
  height:30px;
  stroke-width:2;
}

.success__title{
  margin:20px 0 8px;
  font-size:28px;
  font-weight:600;
  letter-spacing:-.02em;
}

.success__hint{
  max-width:40ch;
  margin:0 auto 24px;
  color:var(--muted);
  font-size:15px;
}

.success__actions{
  display:grid;
  gap:10px;
}

.success__again{
  margin-top:20px;
  padding:8px 12px;
  border:0;
  background:none;
  font-size:15px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* ---------- Узкий ноутбук ---------- */

@media (max-width:1280px){
  .studio{ grid-template-columns:310px auto minmax(0, 1fr); }

  .toolbar__contacts,
  .toolbar__sep--contacts{ display:none; }
}

/* ---------- Планшет и телефон: холст сверху, панель под ним ---------- */

@media (max-width:1023px){
  .shell{
    display:block;
    padding:12px 12px 0;
  }

  .studio{
    display:flex;
    flex-direction:column;
    gap:12px;
    height:auto;
    min-height:0;
  }

  .page-bar{ padding:0; }

  .page-bar__book{ display:none; }

  .page-bar .brand-card{ flex:1 1 auto; }

  .rail{ display:none; }

  .studio__left{ display:contents; }

  .brand-card{ order:1; }

  .canvas{
    order:2;
    height:clamp(480px, 78svh, 780px);
    padding:12px 12px 0;
    border:1px solid var(--edge);
    grid-template-rows:auto minmax(0, 1fr);
  }

  .tools{
    order:3;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-self:center;
    margin-top:0;
  }

  .panel{
    order:4;
    flex:none;
    overflow:visible;
  }

  .canvas__top{
    justify-content:center;
    min-height:52px;
  }

  /* Над фото вместо переключателя «до/после» — заголовок и подзаголовок */
  .canvas__top .segment--view{ display:none !important; }

  .canvas__top .panel__head{
    flex:1;
    padding:6px 6px 2px;
  }

  .canvas__top .panel__title{ text-align:center; }

  /* На странице «До и после» на телефоне сверху без текста: заголовок скрыт визуально,
     но остаётся для поисковиков и скринридеров */
  #works .sec-note{ display:none; }

  #works .sec-head{
    position:absolute;
    width:1px;
    height:1px;
    margin:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }

  .segment--view button{
    height:42px;
    padding:0 16px;
    font-size:14px;
  }

  /* На телефоне запись — в нижней панели */
  .canvas__book{ display:none; }

  .foot{ padding:0 12px calc(12px + var(--safe-b)); }

  .foot__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:start;
    gap:18px 24px;
  }

  /* Фото сразу под переключателем «до/после», а не по центру холста */
  .canvas{ gap:8px; }

  /* Фото и подпись идут друг за другом с одинаковыми отступами */
  .stage{
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
  }

  .stage__frame{
    flex:none;
    height:min(78%, 640px);
    margin:28px 0 0;
  }

  .stage__frame--wide,
  .stage__frame--quote{
    width:min(94%, 900px);
    height:auto;
  }

  .stage.has-thumbs .stage__frame{ height:min(calc(78% - 96px), 560px); }

  .stage.has-thumbs .stage__frame--wide{
    height:auto;
    max-height:none;
  }

  .stage.has-thumbs .stage__caption{ margin-top:18px; }

  .stage__caption{
    position:static;
    width:min(94%, 440px);
    max-width:none;
    margin-top:28px;
  }

  /* 9:16 на телефоне и планшете — плашка внутри фото у нижнего края */
  .stage.has-thumbs .stage__caption--inside,
  .stage .stage__caption--inside{
    position:absolute;
    margin:0;
    padding:12px 16px 14px;
    border-radius:18px;
  }

  .stage__caption--inside .stage__caption-title{ font-size:18px; }

  /* Нижняя панель прилипает к низу экрана */
  .toolbar{
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(10px + var(--safe-b));
    z-index:35;
    justify-content:space-between;
    min-height:62px;
    padding:6px;
    transition:transform .35s var(--ease), opacity .35s ease;
  }

  .toolbar.is-hidden{
    opacity:0;
    transform:translateY(calc(100% + 24px));
    pointer-events:none;
  }

  .toolbar__contacts,
  .toolbar__sep--contacts{ display:flex; }

  .toolbar__sep--contacts{ display:block; }

  .toolbar__book{
    width:auto;
    padding:0 20px 0 16px;
  }

  .toolbar__book span{
    position:static;
    width:auto;
    height:auto;
    overflow:visible;
    clip:auto;
  }

  body{ padding-bottom:calc(88px + var(--safe-b)); }

  body.is-home .float-book{ display:none; }

  /* На внутренних страницах кнопка записи всегда внизу экрана */
  body.is-inner .float-book{
    left:10px;
    right:10px;
    bottom:calc(10px + var(--safe-b));
    height:58px;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }

  body.is-inner.is-near-foot .float-book{
    opacity:0;
    transform:translateY(20px);
    pointer-events:none;
  }


  .price__row{ grid-template-columns:minmax(0, 1fr) 190px auto; gap:12px 24px; }
}

@media (max-width:640px){
  .shell{ padding:10px 10px 0; }

  .canvas{
    height:clamp(460px, 76svh, 680px);
    padding:10px 10px 0;
    border-radius:26px;
  }

  .canvas__top{ min-height:0; }

  .segment--view{ max-width:100%; }

  .stage__frame{
    height:calc(100% - 110px);
    width:auto;
    max-width:94%;
  }

  .stage__frame--wide{
    width:94%;
    height:auto;
  }

  .stage.has-thumbs .stage__frame{ height:calc(100% - 210px); }

  .stage.has-thumbs .stage__frame--wide{ height:auto; }

  .stage__thumbs{
    max-width:94%;
    height:60px;
  }

  .page-gallery{
    margin:0 calc(var(--gutter) * -1 + 4px);
    border-radius:26px;
  }

  .page-gallery{ padding:8px 8px 16px; }

  .page-gallery__frame{ height:min(82svh, calc((100vw - 44px) * 16 / 9)); }

  .page-gallery__frame.is-wide{
    width:100%;
    height:auto;
  }

  .page-gallery__title{ font-size:19px; }

  .gallery__nav{
    width:38px;
    height:38px;
  }

  .stage__frame--quote{
    width:100%;
    height:auto;
  }

  .stage__caption-title{ font-size:16px; }

  /* Открытое фото в галереях — почти на весь экран: холст растёт под фото */
  .canvas{
    height:auto;
    padding-bottom:16px;
  }

  .stage.has-thumbs .stage__frame.is-gallery,
  .stage__frame.is-gallery{
    height:min(82svh, calc((100vw - 44px) * 16 / 9));
    width:auto;
    max-width:100%;
    margin-top:12px;
  }

  .stage.has-thumbs .stage__frame.is-gallery.stage__frame--wide,
  .stage__frame.is-gallery.stage__frame--wide{
    width:100%;
    height:auto;
    max-height:none;
  }

  .stage__thumbs{ max-width:100%; }

  .panel{
    padding:14px;
    border-radius:26px;
  }

  .toolbar__contacts,
  .toolbar__sep--contacts{ display:none; }

  .toolbar__count{ min-width:52px; font-size:15px; }

  .sec{ padding-top:72px; }

  .process__track{
    display:grid;
    grid-auto-flow:column;
    grid-template-columns:none;
    grid-auto-columns:82%;
    gap:12px;
    margin:0 calc(var(--gutter) * -1);
    padding:0 var(--gutter) 4px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding:0 var(--gutter);
    scrollbar-width:none;
  }

  .process__track::-webkit-scrollbar{ display:none; }

  .step-card{ scroll-snap-align:start; }

  .price{
    padding:4px;
    border-radius:24px;
  }

  .price__row{
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:
      "main main"
      "meta act";
    gap:12px 14px;
    padding:18px 16px;
  }

  .price__meta{
    justify-content:flex-start;
    gap:14px;
  }

  .price__cost{ margin-left:0; font-size:17px; }

  .price__act{ min-height:42px; padding:0 16px; }

  .wall{ columns:1; }

  .review{
    margin-bottom:12px;
    padding:20px;
  }

  .foot{ padding:0 10px calc(10px + var(--safe-b)); }

  .foot__inner{
    padding:20px 18px 14px;
    border-radius:24px;
  }

  .foot__grid{
    grid-template-columns:minmax(0, 1fr);
    gap:16px;
  }

  .foot__bottom{
    flex-direction:column;
    gap:4px;
  }

  /* Панель записи выезжает снизу */
  .sheet{ align-items:flex-end; }

  .sheet__panel{
    width:100%;
    height:calc(100% - 24px);
    height:calc(100dvh - 24px);
    border-left:0;
    border-top:1px solid var(--edge);
    border-radius:26px 26px 0 0;
    box-shadow:0 -16px 48px rgba(0, 0, 0, .45);
    transform:translateY(100%);
  }

  .sheet__panel::before{
    content:"";
    position:absolute;
    top:8px;
    left:50%;
    width:40px;
    height:4px;
    margin-left:-20px;
    border-radius:4px;
    background:var(--edge-strong);
  }

  .sheet__head{ padding:22px 16px 14px; }

  .sheet__title{ font-size:24px; }

  .ticket button{ padding:8px 10px; border-radius:14px; }

  .ticket__v{ font-size:13px; }

  .sheet__body{ padding:0 16px calc(28px + var(--safe-b)); }

  .day{ font-size:14px; }

  .time-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }

  .time{ min-height:44px; font-size:14px; padding:0 4px; }
}

@media (max-width:380px){
  .time-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .segment--view button{ padding:0 12px; }
  .toolbar__book{ padding:0 14px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.01ms !important;
  }
}