:root{
  --bg:#e6e4e1;
  --card:#f6f4f1;
  --page-ink:#1d1d1b;
  --ink:#1d1d1b;
  --muted:#6f6b66;
  --line:rgba(29,29,27,.12);
  --dark:#16161a;
  --dark-ink:#f3f1ee;
  --header-bg:rgba(246,244,241,.72);
  --header-ink:#1d1d1b;
  --footer-bg:#f6f4f1;
  --footer-ink:#1d1d1b;
  --accent:#16161a;
  --sage:#7f9a6b;
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --page-bg-image:none;
}

*{ box-sizing:border-box; }

html, body{ margin:0; padding:0; }

/* Фон: старая серая газетная бумага в духе «Ежедневного пророка» — крупные
   заломы и мелкие морщины (рельеф из шума с косым светом), следы сгибов,
   серый налёт, пятна, волокна и зерно, потемневшие края и крапинки краски,
   белая вуаль высветляет всю фактуру, по краям — мягкие тёмные пятна боке.
   Золотая пыль — отдельными движущимися слоями в body::before/::after. */
body{
  min-height:100dvh;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle 56px at 3% 14%, rgba(0,0,0,.16) 0, rgba(0,0,0,.13) 68%, rgba(0,0,0,0) 100%),
    radial-gradient(circle 24px at 12% 4%, rgba(0,0,0,.2) 0, rgba(0,0,0,.16) 68%, rgba(0,0,0,0) 100%),
    radial-gradient(circle 70px at 97% 10%, rgba(0,0,0,.13) 0, rgba(0,0,0,.1) 68%, rgba(0,0,0,0) 100%),
    radial-gradient(circle 30px at 99% 46%, rgba(0,0,0,.18) 0, rgba(0,0,0,.14) 68%, rgba(0,0,0,0) 100%),
    radial-gradient(circle 44px at 1% 58%, rgba(0,0,0,.15) 0, rgba(0,0,0,.12) 68%, rgba(0,0,0,0) 100%),
    radial-gradient(circle 64px at 5% 95%, rgba(0,0,0,.12) 0, rgba(0,0,0,.1) 68%, rgba(0,0,0,0) 100%),
    radial-gradient(circle 36px at 93% 93%, rgba(0,0,0,.17) 0, rgba(0,0,0,.14) 68%, rgba(0,0,0,0) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cg fill='%232a2a2a' opacity='.55'%3E%3Cellipse cx='98' cy='120' rx='1.4' ry='.9' transform='rotate(25 98 120)'/%3E%3Cellipse cx='260' cy='45' rx='1' ry='.8'/%3E%3Cellipse cx='430' cy='140' rx='1.7' ry='1' transform='rotate(-50 430 140)'/%3E%3Cellipse cx='175' cy='260' rx='1.1' ry='.8'/%3E%3Cellipse cx='380' cy='280' rx='1.8' ry='1' transform='rotate(40 380 280)'/%3E%3Cellipse cx='60' cy='300' rx='.9' ry='.7'/%3E%3Cellipse cx='300' cy='470' rx='1.3' ry='.9' transform='rotate(-15 300 470)'/%3E%3Cellipse cx='480' cy='440' rx='1' ry='.8'/%3E%3Cellipse cx='220' cy='380' rx='1.5' ry='.9' transform='rotate(60 220 380)'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(90deg, transparent calc(50% - 10px), rgba(0,0,0,.07) calc(50% - 1px), rgba(255,255,255,.5) calc(50% + 1px), transparent calc(50% + 12px)),
    linear-gradient(0deg, transparent calc(38% - 8px), rgba(255,255,255,.4) calc(38% - 1px), rgba(0,0,0,.06) calc(38% + 1px), transparent calc(38% + 10px)),
    linear-gradient(118deg, transparent calc(64% - 6px), rgba(0,0,0,.05) 64%, rgba(255,255,255,.3) calc(64% + 2px), transparent calc(64% + 9px)),
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)),
    radial-gradient(ellipse 120% 100% at 50% 45%, transparent 52%, rgba(60,60,60,.02) 80%, rgba(40,40,40,.05) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  1 0 0 0 -.58'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25  0 0 0 0 .25  0 0 0 0 .25  -1.1 0 0 0 .62'/%3E%3C/filter%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .45' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .3  0 0 0 0 .3  1.3 0 0 0 -.72'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.02' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='2.2'%3E%3CfeDistantLight azimuth='225' elevation='45'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.36' intercept='.7'/%3E%3CfeFuncG type='linear' slope='.36' intercept='.7'/%3E%3CfeFuncB type='linear' slope='.36' intercept='.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.0045' numOctaves='5' seed='23' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='9'%3E%3CfeDistantLight azimuth='225' elevation='38'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.3' intercept='.76'/%3E%3CfeFuncG type='linear' slope='.3' intercept='.76'/%3E%3CfeFuncB type='linear' slope='.3' intercept='.76'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(200,200,198,.02), rgba(200,200,198,.02));
  background-size:100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 520px 520px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 640px 640px, 260px 260px, 480px 480px, 1100px 1100px, 100% 100%;
  background-blend-mode:normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, multiply, multiply, multiply, multiply, multiply, multiply;
  color:var(--page-ink);
  font-family:'Manrope','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; cursor:pointer; }
a{ color:inherit; }

.icon{
  display:block;
  flex:none;
  width:16px;
  height:16px;
  background-color:var(--icon-color, currentColor);
  -webkit-mask:var(--icon) no-repeat center / contain;
  mask:var(--icon) no-repeat center / contain;
}
.icon-telegram{
  --icon:url('/images/icons/telegram.svg');
  background-color:transparent;
  background:var(--icon) no-repeat center / contain;
  -webkit-mask:none;
  mask:none;
}
.icon-pin{ --icon:url('/images/icons/pin.svg'); }
.icon-clock{ --icon:url('/images/icons/clock.svg'); }
.icon-phone{ --icon:url('/images/icons/phone.svg'); }
.icon-vk,
.icon-instagram,
.icon-whatsapp,
.icon-viber{
  background-color:transparent;
  background:var(--icon) no-repeat center / contain;
  -webkit-mask:none;
  mask:none;
}
.icon-vk{ --icon:url('/images/icons/vk.svg'); }
.icon-instagram{ --icon:url('/images/icons/instagram.svg'); }
.icon-whatsapp{ --icon:url('/images/icons/whatsapp.svg'); }
.icon-viber{ --icon:url('/images/icons/viber.svg'); }
.icon-check{ --icon:url('/images/icons/check.svg'); --icon-color:var(--sage); width:20px; height:20px; }

.arrow{
  width:18px;
  height:18px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- shell ---------- */
.shell{
  height:100dvh;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:clamp(14px, 2vw, 26px);
}
/* Масштаб десктопа под холст 1890×960 (--fit выставляет main.js). */
html.is-fit .shell{
  width:calc(100vw / var(--fit));
  height:calc(100dvh / var(--fit));
  transform:scale(var(--fit));
  transform-origin:0 0;
}

/* ---------- top bar ---------- */
/* Цвет/прозрачность шапки настраиваются в админке (--header-bg/--header-ink). */
.bar{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(24px, 3vw, 48px);
  padding:14px 20px;
  border-radius:var(--radius-xl);
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--header-ink);
}

.brand{
  cursor:pointer;
  display:flex;
  flex-direction:column;
  line-height:1.15;
  min-width:0;
  color:inherit;
}
.brand-name{
  font-size:22px;
  font-weight:700;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.brand-tagline{
  font-size:12px;
  color:color-mix(in srgb, var(--header-ink) 62%, transparent);
  white-space:nowrap;
}

.bar-menu{
  display:flex;
  align-items:center;
  gap:8px;
  max-width:min(56vw, 720px);
  color:inherit;
  overflow-x:auto;
  scrollbar-width:none;
}
.bar-menu::-webkit-scrollbar{ display:none; }
.bar-menu:empty{ display:none; }

.bar-menu button{
  flex:none;
  border:1px solid color-mix(in srgb, var(--header-ink) 12%, transparent);
  background:color-mix(in srgb, var(--header-ink) 6%, transparent);
  color:color-mix(in srgb, var(--header-ink) 62%, transparent);
  padding:9px 18px;
  border-radius:999px;
  font-size:14px;
  white-space:nowrap;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.bar-menu button:hover{
  background:color-mix(in srgb, var(--header-ink) 12%, transparent);
  color:var(--header-ink);
}
.bar-menu button.is-active{
  background:var(--header-ink);
  color:var(--header-solid, var(--header-bg));
}

.bar-cta{
  flex:none;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 20px;
  border:0;
  border-radius:999px;
  background:var(--dark);
  color:var(--dark-ink);
  font-size:14px;
  font-weight:600;
  transition:transform .18s ease, opacity .18s ease;
}
.bar-cta:hover{ transform:translateY(-1px); }
body[data-screen="booking"] .bar-cta{ opacity:.45; pointer-events:none; }

/* Нижнее меню — только для телефона, на десктопе не показывается. */
.mobile-nav{ display:none; }

/* ---------- screens ---------- */
.stage{
  flex:1 1 auto;
  min-height:0;
  display:flex;
}

.card{
  flex:1 1 auto;
  min-height:0;
  display:none;
  flex-direction:column;
  gap:clamp(14px, 2vh, 26px);
  padding:clamp(18px, 2.6vw, 5px);
  border-radius:var(--radius-xl);
  /* background:var(--card); */
  background-image:var(--page-bg-image);
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
body[data-screen="showcase"] #screenShowcase,
body[data-screen="booking"] #screenBooking{ display:flex; }
#screenShowcase{ background:transparent; }
/* Фон экрана услуг — тот же полупрозрачный цвет с размытием, что и у шапки. */
#screenServices{
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

/* ---------- showcase ---------- */
.intro{ flex:none; }
.intro h1{
  margin:0;
  font-size:clamp(28px, 3.6vw, 60px);
  line-height:.95;
  letter-spacing:-.045em;
  font-weight:500;
}
.intro p{
  margin:10px 0 0;
  max-width:48ch;
  font-size:15px;
  color:var(--muted);
}

.showcase{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  justify-content:center;
  gap:clamp(12px, 1.6vw, 22px);
  padding:3vh 0;
}

.shot{
  flex:none;
  margin:0;
  height:100%;
  aspect-ratio:9 / 16;
  border-radius:var(--radius-lg);
  background:rgba(29,29,27,.05);
}
@media (min-width:821px){
  .shot.is-landscape{
    flex:1 1 55%;
    min-width:0;
    height:auto;
    max-height:100%;
    align-self:center;
    aspect-ratio:16 / 9;
  }
}
.shot img{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  object-fit:cover;
  opacity:0;
  transition:opacity .35s ease;
}
.shot img.is-ready{ opacity:1; }

.shot{ position:relative; }
#screenShowcase{ overflow:visible; }

/* Пар стартует от края кружки внутри фото и уходит за верхнюю границу картинки. */
.shot-steam{
  display:none;
  position:absolute;
  z-index:2;
  left:20%;
  top:-30%;
  width:66%;
  height:52%;
  pointer-events:none;
}
.shot.has-steam .shot-steam{ display:block; }
.shot-steam span{
  --peak:1;
  --blur:7px;
  --sway:-14%;
  position:absolute;
  bottom:0;
  left:34%;
  width:32%;
  height:34%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.95) 0%, rgba(255,255,255,.45) 40%, transparent 70%);
  filter:blur(var(--blur)) drop-shadow(0 0 8px rgba(60,40,30,.12));
  opacity:0;
  animation:steam-rise 6.5s ease-in-out infinite;
}
/* Дальний клуб: мельче, чётче, бледнее и медленнее. */
.shot-steam span:nth-child(2){
  --peak:.7;
  --blur:4px;
  --sway:12%;
  left:22%;
  width:22%;
  height:26%;
  animation-duration:8s;
  animation-delay:1.6s;
}
/* Ближний клуб: крупный и размытый, будто ближе к зрителю. */
.shot-steam span:nth-child(3){
  --peak:.85;
  --blur:13px;
  --sway:-8%;
  left:40%;
  width:40%;
  height:40%;
  animation-duration:7s;
  animation-delay:3.3s;
}
.shot-steam span:nth-child(4){
  --peak:.75;
  --blur:6px;
  --sway:16%;
  left:50%;
  width:26%;
  height:30%;
  animation-duration:7.5s;
  animation-delay:5s;
}
@keyframes steam-rise{
  0%{ opacity:0; transform:translate(0, 20%) scale(.6, .5); }
  20%{ opacity:var(--peak); }
  50%{ transform:translate(var(--sway), -90%) scale(1, 1) skewX(-6deg); }
  75%{ opacity:calc(var(--peak) * .55); }
  100%{ opacity:0; transform:translate(calc(var(--sway) * -1), -190%) scale(1.45, 1.35) skewX(6deg); }
}
@media (prefers-reduced-motion: reduce){
  .shot.has-steam .shot-steam{ display:none; }
}

.showcase-side{
  flex:0 1 840px;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto auto minmax(0, 1fr);
  gap:clamp(12px, 1.6vw, 22px);
}

.thumbs{
  display:flex;
  align-items:flex-start;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
}
.thumbs::-webkit-scrollbar{ display:none; }
/* Подсказка «есть ещё превью»: лента уходит влево и возвращается, затем пауза. */
@keyframes thumbs-hint{
  0%, 55%, 100%{ translate:0 0; }
  20%{ translate:-28px 0; }
  38%{ translate:8px 0; }
}

.thumbs button{
  flex:none;
  width:clamp(90px, 8vw, 130px);
  aspect-ratio:9 / 16;
  padding:0;
  border:0;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:rgba(29,29,27,.05);
  scroll-snap-align:start;
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease;
}
.thumbs button img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.thumbs button::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 0 var(--dark);
  transition:box-shadow .18s ease;
}
.thumbs button:hover{ transform:translateY(-2px); }
.thumbs button.is-active::after{ box-shadow:inset 0 0 0 2.5px var(--dark); }
.thumbs button.is-active{ transform:none; }
.thumbs .thumb-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  font-size:12px;
  line-height:1.25;
  color:var(--muted);
  text-align:center;
}

.infocard{
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:16px;
  padding:clamp(18px, 2vw, 28px);
  border-radius:var(--radius-lg);
  background:var(--dark);
  color:var(--dark-ink);
  overflow:hidden;
}
@media (min-width:821px){
  /* Кнопка в правом нижнем углу, текст на всю ширину и обтекает её слева. */
  .infocard{
    --cta-w:210px;
    --cta-h:64px;
    position:relative;
    margin-right:2.5cm;
  }
  .infocard-main{ height:100%; }
  /* Превью крупнее — чёрный блок (строка 1fr) за счёт этого становится ниже. */
  /* Лента ровно на 5 превью, чтобы 6-е не торчало обрезанным; остальные — прокруткой. */
  .thumbs{
    --thumb-w:clamp(110px, 10vw, 170px);
    max-width:calc(5 * var(--thumb-w) + 4 * 12px);
  }
  .thumbs button{ width:var(--thumb-w); }
  .thumbs.is-hint button{ animation:thumbs-hint 4s ease-in-out 1.5s infinite; }
  .infocard-main::before{
    content:"";
    float:right;
    width:var(--cta-w);
    height:100%;
    shape-outside:inset(calc(100% - var(--cta-h)) 0 0 0);
  }
}
.infocard-main{
  flex:1 1 auto;
  min-width:0;
  overflow-y:auto;
  max-height:100%;
  scrollbar-width:thin;
}
.infocard-title{
  margin:0;
  font-size:clamp(24px, 2.6vw, 40px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:500;
}
.infocard-text{
  margin:12px 0 0;
  font-size:14px;
  line-height:1.55;
  opacity:.78;
}
.infocard-cta{
  align-self:flex-end;
  margin-left:0;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:color-mix(in srgb, var(--dark-ink) 18%, var(--dark));
  color:color-mix(in srgb, var(--dark-ink) 70%, transparent);
  transition:color .2s ease, text-shadow .2s ease, transform .18s ease;
}
.infocard-cta::before{
  content:"";
  position:absolute;
  z-index:-2;
  left:50%;
  top:50%;
  width:200%;
  aspect-ratio:1;
  translate:-50% -50%;
  background:conic-gradient(from 0deg, transparent 0 65%, var(--dark-ink) 90%, transparent 100%);
  animation:cta-border-run 2.6s linear infinite;
}
.infocard-cta::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:1.5px;
  border-radius:inherit;
  background:var(--dark);
}
.infocard-cta:hover{
  color:#fff;
  text-shadow:0 0 10px color-mix(in srgb, var(--dark-ink) 70%, transparent);
}
@media (min-width:821px){
  .infocard-cta{
    position:absolute;
    right:clamp(18px, 2vw, 28px);
    bottom:clamp(18px, 2vw, 28px);
    padding:16px 26px;
    font-size:16px;
  }
  .infocard-cta .arrow{ width:20px; height:20px; }
}
@keyframes cta-border-run{
  to{ rotate:360deg; }
}
@media (prefers-reduced-motion: reduce){
  .infocard-cta::before{ animation:none !important; }
}

.showcase-empty{
  margin:0;
  font-size:14px;
  color:var(--muted);
}

/* ---------- контакты и липкая кнопка: только телефон ---------- */
.reviews-contacts,
.sticky-book{ display:none; }

/* ---------- экраны «Услуги» и «Фото до и после» ---------- */
body[data-screen="services"] #screenServices,
body[data-screen="gallery"] #screenGallery{
  display:flex;
  overflow-y:auto;
}

.ba-viewer{
  --info-w:clamp(360px, 32vw, 510px);
  --info-gap:.8cm;
  --thumbs-h:calc(clamp(64px, 11vh, 115px) + 6px);
  --main-h:min(calc(100cqh - var(--thumbs-h)), calc((100cqw - var(--info-w) - var(--info-gap)) * 16 / 9));
  flex:1 1 auto;
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--info-gap);
  container-type:size;
}
.ba-viewer[hidden]{ display:none; }
.ba-info-col{
  flex:none;
  width:var(--info-w);
  align-self:flex-start;
  margin-top:calc((100cqh - var(--main-h) - var(--thumbs-h)) / 2 + 4cm);
}
.ba-info{
  box-sizing:border-box;
  aspect-ratio:8 / 3;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  gap:10px;
  padding:clamp(16px, 2vw, 28px);
  border-radius:var(--radius-lg);
  background:var(--dark);
  color:var(--dark-ink);
}
/* На десктопе тёмные окна с текстом (главная и «до/после») полупрозрачные
   с размытием, как на телефоне. */
@media (min-width:821px){
  .infocard,
  .ba-info{
    background:color-mix(in srgb, var(--dark) 82%, transparent);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
}
.ba-name{
  margin:0 0 10px;
  font-size:clamp(24px, 2.6vw, 40px);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:500;
}
.ba-price{
  align-self:flex-end;
  margin:auto 0 0;
  font-size:clamp(17px, 1.4vw, 21px);
  font-weight:600;
}
.ba-desc{
  margin:0;
  font-size:clamp(15px, 1.2vw, 17px);
  line-height:1.55;
}
.ba-price[hidden],
.ba-desc[hidden]{ display:none; }
.ba-media-col{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  /* gap:clamp(10px, 1.6vh, 18px); */
}
.ba-main{
  position:relative;
  flex:none;
  height:var(--main-h);
  aspect-ratio:9 / 16;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:rgba(29,29,27,.05);
  cursor:pointer;
  user-select:none;
}
.ba-img{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:opacity .45s ease;
}
.ba-main[data-view="after"] .ba-img-before,
.ba-main[data-view="before"] .ba-img-after{ opacity:0; }
.ba-toggle{
  position:absolute;
  bottom:clamp(14px, 2vw, 28px);
  left:50%;
  translate:-50% 0;
  display:flex;
  padding:4px;
  border-radius:999px;
  background:rgba(22,22,26,.5);
  backdrop-filter:blur(8px);
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.ba-toggle button{
  padding:8px 18px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.85);
  font:inherit;
  font-size:clamp(13px, 1.1vw, 16px);
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:background .25s, color .25s;
}
.ba-toggle button:hover{ color:#fff; }
.ba-toggle button.is-active{
  background:#fff;
  color:#1d1d1b;
}

.ba-thumbs{
  flex:none;
  width:0;
  min-width:100%;
  display:flex;
  gap:6px;
  margin:0;
  padding:4px;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:none;
}
.ba-thumbs::-webkit-scrollbar{ display:none; }
.ba-thumbs[hidden]{ display:none; }
.ba-thumbs li{ flex:none; display:flex; }
.ba-thumbs li:first-child{ margin-left:auto; }
.ba-thumbs li:last-child{ margin-right:auto; }
.ba-thumb{
  height:clamp(64px, 11vh, 115px);
  aspect-ratio:1 / 2;
  padding:0;
  border:2px solid rgba(29,29,27,.55);
  border-radius:6px;
  background-color:rgba(29,29,27,.08);
  /* Аккуратная рамка: мягкий чёрный кант и лёгкая тень,
     чтобы превью не сливались с фоном. */
  box-shadow:0 1px 3px rgba(0,0,0,.14);
  background-size:cover;
  background-position:center;
  cursor:pointer;
  transition:aspect-ratio .3s ease, opacity .2s;
}
.ba-thumb:not(.is-active){ opacity:.8; }
.ba-thumb:hover{ opacity:1; }
.ba-thumb.is-active{ aspect-ratio:5 / 3; }

/* Экран «Услуги и прайс» в виде прайс-листа: заголовок по центру и ряд карточек. */
.pricing-head{
  flex:none;
  margin-top:clamp(8px, 3vh, 36px);
  text-align:center;
}
.pricing-head h2{
  margin:0;
  font-size:clamp(28px, 3.2vw, 46px);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.1;
}
.pricing-head p{
  margin:10px 0 0;
  font-size:16px;
  color:var(--muted);
}

.service-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, 300px);
  grid-auto-rows:1fr;
  justify-content:center;
  align-items:stretch;
  gap:clamp(20px, 2vw, 32px);
  margin:clamp(8px, 2vh, 20px) 0 0;
  padding:4px 4px 24px;
  list-style:none;
}

.price-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:32px 24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  text-align:center;
  transition:border-color .2s ease;
}
.price-card:hover{ border-color:var(--ink); }
.price-card-name{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  margin:0;
  font-size:26px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.2;
}
.price-card-desc{
  min-height:68px;
  margin:10px 0 0;
  font-size:15px;
  line-height:1.5;
  color:var(--muted);
}
.price-card-price{
  margin:3.5cm 0 0;
  font-size:34px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
}
.price-card-from{
  font-size:.5em;
  font-weight:500;
  letter-spacing:0;
  color:var(--muted);
}
.price-card-icon{
  width:28px;
  height:28px;
  margin-bottom:20px;
}
.price-card-icon svg{ width:100%; height:100%; fill:var(--ink); }
.price-card-duration{
  margin:6px 0 0;
  font-size:14px;
  color:var(--muted);
}
.price-card-cta{
  position:relative;
  isolation:isolate;
  margin:24px 0 0;
  padding:14px 20px;
  width:100%;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb, var(--ink) 4%, var(--card));
  color:var(--ink);
  font-size:14px;
  font-weight:600;
  transition:background .18s ease, border-color .18s ease;
}
.price-card-cta:hover{ background:color-mix(in srgb, var(--ink) 10%, var(--card)); border-color:var(--ink); }
.price-card-cta-wave{
  position:absolute;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}
.price-card-cta-wave rect{
  fill:none;
  stroke:#fff;
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:6 94;
  animation:price-cta-pulse 2.4s linear infinite;
  animation-play-state:paused;
}
.price-card-cta:hover .price-card-cta-wave{ opacity:1; }
.price-card-cta:hover .price-card-cta-wave rect{ animation-play-state:running; }
@keyframes price-cta-pulse{
  to{ stroke-dashoffset:-100; }
}
@media (prefers-reduced-motion: reduce){
  .price-card-cta-wave rect{ animation:none !important; }
}

/* Отзывы на экране «Контакты». */
.reviews-contacts h2{
  margin:0 0 12px;
  font-size:20px;
  font-weight:600;
  letter-spacing:-.02em;
}
.reviews-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.review-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--card);
}
.review-photo{
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border-radius:calc(var(--radius-md) - 6px);
}
.review-rating{
  color:var(--ink);
  letter-spacing:3px;
  font-size:13px;
}
.review-text{
  margin:0;
  font-size:14px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
}
.review-text.is-clampable{ cursor:pointer; }
.review-text.is-expanded{
  -webkit-line-clamp:unset;
  line-clamp:unset;
  overflow:visible;
}
.review-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  color:var(--muted);
}
.review-name{ font-weight:600; color:var(--ink); }

/* ---------- booking ---------- */
#screenBooking{ overflow-y:auto; }

.booking-head{ flex:none; }
.booking-head h2{
  margin:0;
  font-size:clamp(26px, 4vw, 54px);
  line-height:1;
  letter-spacing:-.035em;
  font-weight:500;
}
.booking-head p{
  margin:8px 0 0;
  font-size:14px;
  color:var(--muted);
}
.booking-progress{ display:none; }

.booking-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.booking-step-item{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
}
.booking-step-item + .booking-step-item::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--line);
  margin-right:7px;
}
.booking-step-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(29,29,27,.2);
  border:1.5px solid transparent;
  flex:none;
}
body[data-booking-progress="1"] .booking-step-item:nth-child(-n+1),
body[data-booking-progress="2"] .booking-step-item:nth-child(-n+2),
body[data-booking-progress="3"] .booking-step-item:nth-child(-n+3),
body[data-booking-progress="4"] .booking-step-item:nth-child(-n+3){ color:var(--ink); }
body[data-booking-progress="2"] .booking-step-item:nth-child(-n+1) .booking-step-dot,
body[data-booking-progress="3"] .booking-step-item:nth-child(-n+2) .booking-step-dot,
body[data-booking-progress="4"] .booking-step-item:nth-child(-n+3) .booking-step-dot{
  width:12px;
  height:12px;
  background:var(--sage);
  border-color:var(--sage);
}
body[data-booking-progress="1"] .booking-step-item:nth-child(1) .booking-step-dot,
body[data-booking-progress="2"] .booking-step-item:nth-child(2) .booking-step-dot,
body[data-booking-progress="3"] .booking-step-item:nth-child(3) .booking-step-dot{
  background:transparent;
  border-color:var(--ink);
}

.booking-grid{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(300px, .9fr) minmax(0, 1.1fr);
  gap:clamp(12px, 1.6vw, 22px);
}

.calendar,
.slots-panel{
  min-height:0;
  padding:clamp(14px, 1.4vw, 20px);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.6);
  border:1px solid var(--line);
  overflow-y:auto;
}

.cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.month{
  font-size:18px;
  font-weight:600;
  letter-spacing:-.02em;
  text-transform:lowercase;
}
.cal-nav{ display:flex; gap:6px; }
.cal-nav button{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  transition:background .18s ease;
}
.cal-nav button:hover{ background:rgba(29,29,27,.06); }
.cal-nav .arrow{ width:14px; height:14px; }

.cal-weekdays,
.cal-days{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:6px;
}
.cal-weekdays{
  margin-bottom:6px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  text-align:center;
}
.cal-days button{
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:var(--muted);
  font-size:17px;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.cal-days button.empty{ visibility:hidden; }
.cal-days button.past{ opacity:.35; cursor:default; }
.cal-days button.available{
  color:var(--ink);
  background:rgba(29,29,27,.1);
  border-color:rgba(29,29,27,.22);
  font-weight:700;
}
.cal-days button.available:hover{ background:rgba(29,29,27,.2); border-color:var(--ink); }
.cal-days button.available.selected{
  background:var(--dark);
  color:var(--dark-ink);
  border-color:var(--dark);
}
.cal-legend{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
}
.cal-legend .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(29,29,27,.18);
}

.slots-empty{
  font-size:14px;
  color:var(--muted);
}
#slotsContent{ display:none; }

.booking-pane + .booking-pane{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}

.slots-sub{
  margin:4px 0 14px;
  font-size:13px;
  color:var(--muted);
}
.slots-sub-mobile{ display:none; }

.service-select{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  padding-bottom:6px;
}
.service-select button{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:1 1 150px;
  min-width:150px;
  gap:4px;
  padding:12px 14px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:transparent;
  transition:border-color .18s ease, background .18s ease;
}
.service-select button:hover{ background:rgba(29,29,27,.04); }
.service-select button.active{
  background:var(--dark);
  color:var(--dark-ink);
  border-color:var(--dark);
}
.service-name{ width:100%; text-align:center; font-size:14px; font-weight:700; }
.service-desc{ font-size:12px; line-height:1.4; opacity:.7; }
.service-duration{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  opacity:.7;
}
.service-duration .icon{ width:13px; height:13px; }
.service-price{ margin-top:auto; padding-top:6px; font-size:13px; font-weight:600; opacity:.9; }

.booking-summary{
  margin:0 0 10px;
  font-size:14px;
  font-weight:600;
}
.booking-summary-desc{
  margin:-6px 0 12px;
  font-size:13px;
  color:var(--muted);
}

.time-grid{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  padding-bottom:6px;
  opacity:0;
  transition:opacity .25s ease;
}
.time-grid.show{ opacity:1; }
.time-grid button{
  flex:0 0 auto;
  padding:11px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:transparent;
  font-size:14px;
  white-space:nowrap;
  transition:background .16s ease, border-color .16s ease;
}
.time-grid button:hover{ background:rgba(29,29,27,.05); }
.time-grid button.active{
  background:var(--dark);
  color:var(--dark-ink);
  border-color:var(--dark);
}
.time-grid button.busy{
  opacity:.45;
  text-decoration:line-through;
}
.time-grid-empty{
  margin:0;
  font-size:13px;
  color:var(--muted);
}

.booking-fields{
  display:grid;
  gap:8px;
}
.booking-fields label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}
.booking-fields input{
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.7);
  font:inherit;
  font-size:15px;
  color:var(--ink);
}
.booking-fields input:focus{
  outline:none;
  border-color:var(--dark);
}

.booking-error{
  margin:10px 0 0;
  font-size:13px;
  color:#b4453a;
}

.confirm-btn{
  width:100%;
  margin-top:14px;
  padding:15px 20px;
  border:0;
  border-radius:999px;
  background:rgba(29,29,27,.15);
  color:var(--ink);
  font-size:15px;
  font-weight:600;
  cursor:default;
  transition:background .18s ease, color .18s ease;
}
.confirm-btn.ready{
  background:var(--dark);
  color:var(--dark-ink);
  cursor:pointer;
}
.confirm-note{
  margin:10px 0 0;
  font-size:12px;
  color:var(--muted);
}

.success-msg{ display:none; text-align:center; }
.success-msg.show{ display:block; }
.success-msg .check{
  width:52px;
  height:52px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(127,154,107,.16);
}
.success-msg h3{
  margin:0 0 8px;
  font-size:22px;
  font-weight:600;
  letter-spacing:-.02em;
}
.success-msg p{
  margin:0 0 16px;
  font-size:14px;
  color:var(--muted);
}

.telegram-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 20px;
  border-radius:999px;
  background:var(--dark);
  color:var(--dark-ink);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}
.booking-telegram{ align-self:flex-start; flex:none; }
.booking-again{
  display:block;
  margin:12px auto 0;
  padding:10px 18px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  font-size:13px;
}

/* ---------- footer ---------- */
.foot{
  flex:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 22px;
  padding:0 clamp(4px, 1vw, 14px);
  color:var(--muted);
  font-size:12px;
}
.foot[hidden]{ display:none; }
.foot-salon,
.foot-col,
.foot-bottom{
  display:flex;
  align-items:center;
  gap:6px 14px;
  flex-wrap:wrap;
  min-width:0;
}
.foot-bottom{ margin-left:auto; }
.salon-name{ font-weight:700; color:var(--ink); }
.salon-text{
  max-width:34ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.foot-title{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:10px;
  opacity:.7;
}
.foot .row{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.foot .row[hidden]{ display:none; }
.foot .icon{ width:13px; height:13px; --icon-color:var(--muted); }
.foot a{ text-decoration:none; }
/* Вспышка ссылки на соцсеть или телефон, очередь задаёт startSocialBlink() в main.js:
   иконка подпрыгивает, по тексту пробегает золотой блик. */
.foot .row.is-blink .icon{ animation:social-pop .9s ease-in-out; }
.foot .row.is-blink a{
  background:linear-gradient(100deg, var(--muted) 0%, var(--muted) 35%, #c8a24a 44%, #f3dc8e 50%, #c8a24a 56%, var(--muted) 65%, var(--muted) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:social-shine .9s ease-in-out;
}
@keyframes social-pop{
  0%, 100%{ transform:none; }
  30%{ transform:translateY(-2px) scale(1.3); }
  60%{ transform:scale(.95); }
}
@keyframes social-shine{
  from{ background-position:100% 0; }
  to{ background-position:0 0; }
}
.foot a:hover{ text-decoration:underline; }

/* ---------- tablet ---------- */
@media (max-width:1080px){
  .bar-menu{ max-width:44vw; }
}

/* ---------- phone ---------- */
@media (max-width:820px){
  body{ overflow:auto; --tabbar-h:64px; }

  .shell{
    height:auto;
    min-height:100dvh;
    gap:12px;
    padding:12px;
    padding-bottom:calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom));
  }

  /* Шапки нет — разделы переключаются нижним меню, как в мобильном приложении. */
  .bar{ display:none; }

  .mobile-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:60;
    display:flex;
    min-height:var(--tabbar-h);
    padding:6px 8px env(safe-area-inset-bottom);
    background:var(--header-bg);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-top:1px solid color-mix(in srgb, var(--header-ink) 10%, transparent);
    color:var(--header-ink);
    transform:translateY(100%);
    transition:transform .3s ease;
  }
  body.nav-shown .mobile-nav{ transform:none; }
  .mobile-nav-item{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:6px 4px;
    border:0;
    background:transparent;
    font-size:11px;
    font-weight:600;
    color:color-mix(in srgb, var(--header-ink) 50%, transparent);
    transition:color .18s ease;
  }
  .mobile-nav-item.is-active{ color:var(--header-ink); }
  .mobile-nav-icon{
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .stage{ display:block; }
  .screen{ display:none; }

  .card{
    min-height:0;
    padding:0;
    border-radius:0;
    background:transparent;
    background-image:none;
    overflow:visible;
    gap:22px;
  }
  #screenServices{
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  body[data-screen="showcase"] #screenShowcase,
  body[data-screen="services"] #screenServices,
  body[data-screen="gallery"] #screenGallery,
  body[data-screen="booking"] #screenBooking{ display:flex; }

  .intro{ display:none; }

  /* Hero как в мобильных приложениях: картинка, поверх её низа — тёмная карточка. */
  .showcase{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0;
  }
  /* Главная картинка — во всю ширину экрана, пропорции 9:16 сохраняются. */
  .shot{
    margin:-12px -12px 0;
    height:auto;
    aspect-ratio:9 / 16;
    border-radius:var(--radius-xl);
    overflow:hidden;
  }
  .shot.is-landscape{ aspect-ratio:16 / 9; }
  .shot-steam{ top:0; height:26%; }
  .showcase-side{ display:contents; }

  .infocard{
    order:1;
    position:relative;
    z-index:2;
    margin:-64px 10px 0;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    border-radius:var(--radius-lg);
    background:color-mix(in srgb, var(--dark) 55%, transparent);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    overflow:visible;
    /* padding-top:36px; */
  }
  .infocard-main{ overflow:visible; max-height:none; }
  /* Кнопка записи центром на верхней кромке подложки — на стыке с картинкой. */
  .infocard-cta{
    position:absolute;
    top:0;
    right:18px;
    z-index:3;
    translate:0 -50%;
  }
  .infocard-title{ font-size:26px; }
  .infocard-text{
    font-size:14px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    line-clamp:3;
    overflow:hidden;
    cursor:pointer;
  }
  .infocard-text.is-expanded{
    display:block;
    -webkit-line-clamp:unset;
    line-clamp:none;
    overflow:visible;
  }
  .infocard-text[hidden]{ display:none; }

  .thumbs{
    order:2;
    margin-top:-14px;
    padding:0 2px 2px;
    gap:10px;
  }
  .thumbs button{
    width:80px;
    aspect-ratio:9 / 16;
    border-radius:var(--radius-md);
  }

  .showcase-empty{ padding:0 4px; }

  /* Липкая кнопка записи — только на главном экране. */
  .sticky-book{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom));
    z-index:50;
    display:none;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:16px 20px;
    border:0;
    border-radius:999px;
    background:var(--dark);
    color:var(--dark-ink);
    font-size:15px;
    font-weight:600;
    box-shadow:0 12px 30px rgba(20,20,22,.3);
  }

  /* Экран «Услуги и прайс»: карточки всех услуг + обычная кнопка записи. */
  .booking-head{ padding:0 4px; }
  body[data-screen="services"] #screenServices,
  body[data-screen="gallery"] #screenGallery{ overflow:visible; }
  /* Фото до/после как на главном экране: картинка во всю ширину (9:16),
     на её низ наезжает тёмная карточка с текстом, под ней — миниатюры. */
  .ba-viewer{ flex-direction:column; align-items:stretch; gap:0; min-height:0; padding:0; container-type:normal; }
  .ba-media-col{ display:contents; }
  .ba-main{
    order:0;
    width:auto;
    height:auto;
    margin:-12px -12px 0;
    border-radius:var(--radius-xl);
  }
  /* Переключатель «До/После» — выше карточки, которая наезжает на картинку. */
  .ba-toggle{ bottom:80px; }
  .ba-info-col{
    order:1;
    position:relative;
    z-index:2;
    width:auto;
    align-self:stretch;
    margin:-64px 10px 0;
    padding:18px;
    border-radius:var(--radius-lg);
    background:color-mix(in srgb, var(--dark) 55%, transparent);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    color:var(--dark-ink);
  }
  .ba-name{ margin:0 0 8px; font-size:26px; }
  .ba-info{ aspect-ratio:auto; padding:0; border-radius:0; background:transparent; }
  .ba-desc{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;
    line-clamp:4;
    overflow:hidden;
    font-size:14px;
    cursor:pointer;
  }
  .ba-desc.is-expanded{
    display:block;
    -webkit-line-clamp:unset;
    line-clamp:none;
  }
  .ba-thumbs{ order:2; margin-top:12px; padding:4px; }
  .ba-thumb{ height:64px; }
  .pricing-head{ margin-top:10; padding:0 4px; }
  .pricing-head p{ font-size:14px; }
  /* Прайс-лист: экран услуг занимает высоту до нижнего меню, список
     прокручивается внутри. Карточка — строка «название · цена · длительность»,
     по тапу раскрывается описание и кнопка записи (main.js). */
  body[data-screen="services"] #screenServices{
    height:calc(100dvh - var(--tabbar-h) - 24px - env(safe-area-inset-bottom));
    gap:12px;
  }
  .pricing-head{ flex:none; }
  /* Карточки услуг — стекло в духе Liquid Glass: на светлом фоне страницы
     тёмное стекло со светлым текстом, на тёмном — светлое с тёмным
     (data-bg-tone ставит main.js). */
  :root{
    --lg-tint:rgba(20,20,24,.26);
    --lg-tint-strong:rgba(20,20,24,.55);
    --lg-ink:#fff;
    --lg-muted:rgba(255,255,255,.72);
    --lg-rim-top:rgba(255,255,255,.55);
    --lg-rim-bottom:rgba(255,255,255,.12);
    --lg-cta-bg:#fff;
    --lg-cta-ink:#1d1d1b;
  }
  html[data-bg-tone="dark"]{
    --lg-tint:rgba(255,255,255,.16);
    --lg-tint-strong:rgba(255,255,255,.6);
    --lg-ink:#1d1d1b;
    --lg-muted:rgba(29,29,27,.68);
    --lg-rim-top:rgba(255,255,255,.8);
    --lg-rim-bottom:rgba(255,255,255,.25);
    --lg-cta-bg:#1d1d1b;
    --lg-cta-ink:#fff;
  }
  .service-cards{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0;
    padding:2px 4px 16px;
    overflow-y:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .service-cards::-webkit-scrollbar{ display:none; }
  .price-card{
    flex:none;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:baseline;
    column-gap:12px;
    position:relative;
    padding:16px 18px;
    border:0;
    border-radius:22px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 45%),
      var(--lg-tint);
    -webkit-backdrop-filter:blur(14px) saturate(180%);
    backdrop-filter:blur(14px) saturate(180%);
    box-shadow:
      inset 0 1px 0 var(--lg-rim-top),
      inset 0 0 20px rgba(255,255,255,.06),
      0 8px 24px rgba(0,0,0,.12);
    color:var(--lg-ink);
    text-align:left;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  /* Светлый ободок стекла: ярче сверху, почти гаснет к середине. */
  .price-card::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius:inherit;
    background:linear-gradient(180deg, var(--lg-rim-top), var(--lg-rim-bottom) 45%, rgba(255,255,255,.04) 70%, var(--lg-rim-bottom));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events:none;
  }
  .price-card:hover{ border-color:transparent; }
  .price-card.is-active{ background:var(--lg-tint-strong); }
  .price-card-from,
  .price-card-duration,
  .price-card-desc{ color:var(--lg-muted); }
  .price-card-icon{ display:none; }
  .price-card-name{
    grid-column:1;
    grid-row:1;
    display:block;
    min-height:0;
    font-size:17px;
    font-weight:600;
    letter-spacing:-.01em;
    line-height:1.3;
  }
  .price-card-price{
    grid-column:2;
    grid-row:1;
    margin:0;
    font-size:18px;
    font-weight:700;
    white-space:nowrap;
  }
  .price-card-duration{
    grid-column:1;
    grid-row:2;
    margin:4px 0 0;
    font-size:13px;
  }
  /* Шеврон раскрытия под ценой. */
  .price-card::after{
    content:"";
    grid-column:2;
    grid-row:2;
    justify-self:end;
    align-self:center;
    width:7px;
    height:7px;
    margin:4px 4px 0 0;
    border-right:1.5px solid var(--lg-muted);
    border-bottom:1.5px solid var(--lg-muted);
    transform:rotate(45deg);
    transition:transform .2s ease;
  }
  .price-card-desc{
    display:none;
    grid-column:1 / -1;
    grid-row:3;
    min-height:0;
    margin:12px 0 0;
    font-size:14px;
  }
  .price-card-cta{
    display:none;
    grid-column:1 / -1;
    grid-row:4;
    margin-top:14px;
    border:0;
    background:var(--lg-cta-bg);
    color:var(--lg-cta-ink);
  }
  .price-card.is-open .price-card-desc,
  .price-card.is-open .price-card-cta{ display:block; }
  /* Раскрытая карточка поверх списка, в центре экрана (main.js). */
  .price-popup{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 16px;
    background:rgba(22,22,26,0);
    transition:background-color .25s ease;
  }
  .price-popup.is-visible{ background:rgba(22,22,26,.2); }
  .price-popup .price-card{
    width:100%;
    max-width:420px;
    max-height:100%;
    overflow-y:auto;
    padding:22px 20px;
    border-radius:28px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 45%),
      var(--lg-tint-strong);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    backdrop-filter:blur(24px) saturate(180%);
    box-shadow:
      inset 0 1px 0 var(--lg-rim-top),
      inset 0 0 24px rgba(255,255,255,.08),
      0 24px 60px rgba(0,0,0,.25);
    cursor:default;
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .price-popup .price-card::after{ display:none; }
  .price-popup .price-card-name{ font-size:20px; }
  .price-popup .price-card-price{ font-size:22px; }

  /* Экран «Контакты»: карточки адреса/связи и отзывы, если они есть.
     Весь контент центрируется по экрану — и по вертикали, и по горизонтали. */
  body[data-screen="contacts"] .shell{ justify-content:center; }
  body[data-screen="contacts"] .stage{ display:none; }
  body[data-screen="contacts"] .reviews-contacts:not([hidden]){
    display:flex;
    flex-direction:column;
    gap:14px;
    margin:0 0 22px;
    text-align:center;
  }
  .foot{
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:0;
  }
  body[data-screen="contacts"] .foot{ display:flex; }
  .foot-salon,
  .foot-col,
  .foot-bottom{
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:16px 18px;
    text-align:center;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    background:var(--card);
  }
  .salon-name{ font-size:18px; }
  .salon-text{ white-space:normal; max-width:none; font-size:14px; }
  .foot-title{ font-size:11px; }
  .foot-bottom{ margin-left:0; font-size:12px; }
  .foot .row{ justify-content:center; }

  #screenBooking{ overflow:visible; }
  .booking-head{ display:none; }
  .booking-steps{ display:none; }

  /* Запись на телефоне — одним экраном: календарь, услуги, время и контакты
     идут друг под другом, без пошагового мастера. */
  .booking-grid{ display:block; }
  .calendar,
  .slots-panel{
    overflow:visible;
    background:var(--card);
    border-color:transparent;
  }
  .slots-panel{ margin-top:12px; }

  .slots-sub-desktop{ display:none; }
  .slots-sub-mobile{ display:block; }
}

.booking-consent{
  display:grid;
  gap:8px;
  margin:12px 0 0;
}
.booking-consent .booking-consent-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:12px;
  line-height:1.4;
  color:var(--muted);
  cursor:pointer;
}
.booking-consent .booking-consent-item input{
  flex:none;
  width:16px;
  height:16px;
  margin:1px 0 0;
  padding:0;
  accent-color:var(--dark);
}
.booking-consent a,
.footer-privacy-link{
  color:inherit;
  text-decoration:underline;
}