/* ==========================================================================
   Студия красоты «Мята» — стили
   1. Токены          5. Секции
   2. Сброс и базис    6. Виджет записи
   3. Утилиты          7. Отзывы, атмосфера, контакты, подвал
   4. Компоненты       8. Адаптив и prefers-reduced-motion
   ========================================================================== */

/* ============ 1. Токены ============ */

:root {
  /* палитра */
  --c-bg:          #FBF8F6;
  --c-surface:     #FFFFFF;
  --c-accent:      #7FB6A5;
  --c-accent-dark: #4E8A7A;
  --c-accent-2:    #E8C4C0;
  --c-text:        #2E2A28;
  --c-text-2:      #7C736E;
  --c-line:        #EFE7E2;

  /* производные */
  --c-accent-soft: #EAF3F0;
  --c-accent-2-soft: #FBEFEE;
  --c-tint:        #F6F1ED;

  /* типографика: модульная шкала ~1.22 */
  --fs-xs:   0.8125rem;  /* 13 */
  --fs-sm:   0.9375rem;  /* 15 */
  --fs-base: 1.0625rem;  /* 17 */
  --fs-md:   1.25rem;    /* 20 */
  --fs-lg:   clamp(1.375rem, 1.15rem + 0.9vw, 1.625rem);
  --fs-xl:   clamp(1.75rem, 1.35rem + 1.7vw, 2.375rem);
  --fs-2xl:  clamp(2.125rem, 1.5rem + 2.8vw, 3.25rem);
  --fs-3xl:  clamp(2.625rem, 1.6rem + 4.6vw, 4.5rem);

  --lh-tight: 1.15;
  --lh-head:  1.2;
  --lh-base:  1.6;
  --lh-snug:  1.45;

  --measure:      68ch;
  --measure-narrow: 56ch;

  /* отступы, шаг 4px */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 28px;  --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-28: 112px;

  --section-y: clamp(56px, 7vw, 112px);

  /* скругления */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  20px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-full: 999px;

  /* тени — мягкие, рассеянные */
  --sh-1: 0 2px 8px rgba(46, 42, 40, .04), 0 8px 24px rgba(46, 42, 40, .04);
  --sh-2: 0 4px 14px rgba(46, 42, 40, .05), 0 16px 40px rgba(46, 42, 40, .06);
  --sh-3: 0 8px 24px rgba(46, 42, 40, .07), 0 28px 64px rgba(46, 42, 40, .08);
  --sh-accent: 0 8px 24px rgba(79, 138, 122, .22);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .32s;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;
}

/* ============ 2. Сброс и базис ============ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: 'Onest', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: var(--lh-head); letter-spacing: -.02em; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--c-accent-dark);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--c-accent); color: #fff; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ============ 3. Утилиты ============ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--c-accent-dark);
  color: #fff;
  border-radius: var(--r-full);
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

.link {
  color: var(--c-accent-dark);
  text-decoration: underline;
  text-decoration-color: rgba(78, 138, 122, .35);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s var(--ease), color .2s var(--ease);
}
.link:hover { text-decoration-color: currentColor; }

/* появление снизу с лёгким масштабом */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(.985);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; will-change: auto; }

/* mesh-пятна */
.mesh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mesh__blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
}
.mesh__blob--1 { width: 460px; height: 460px; top: -140px; right: -60px; background: radial-gradient(circle at 35% 35%, #9ED0C1, #7FB6A5 60%, transparent 72%); }
.mesh__blob--2 { width: 380px; height: 380px; top: 200px; right: 280px; background: radial-gradient(circle at 50% 50%, #F3D4D1, #E8C4C0 62%, transparent 74%); opacity: .55; }
.mesh__blob--3 { width: 340px; height: 340px; top: 380px; left: -160px; background: radial-gradient(circle at 50% 50%, #DCEAE5, #BEDCD3 60%, transparent 74%); }
.mesh__blob--4 { width: 420px; height: 420px; top: -120px; left: -120px; background: radial-gradient(circle at 50% 50%, #CFE6DE, #9ED0C1 58%, transparent 72%); opacity: .45; }
.mesh__blob--5 { width: 360px; height: 360px; bottom: -140px; right: -100px; background: radial-gradient(circle at 50% 50%, #F6DEDB, #E8C4C0 60%, transparent 74%); opacity: .45; }

/* ============ 4. Компоненты ============ */

/* --- кнопки --- */
.btn {
  --btn-py: 12px;
  --btn-px: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 46px;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn__icon { width: 18px; height: 18px; flex: none; }
.btn__icon--left { transform: rotate(180deg); }

.btn--primary { background: var(--c-accent-dark); color: #fff; box-shadow: var(--sh-accent); }
.btn--primary:hover { background: #427567; transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost { background: transparent; border-color: var(--c-line); color: var(--c-text); }
.btn--ghost:hover { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent-dark); }

.btn--soft { background: var(--c-accent-soft); color: var(--c-accent-dark); }
.btn--soft:hover { background: #DCEBE6; }

.btn--lg { --btn-py: 16px; --btn-px: 30px; min-height: 56px; font-size: var(--fs-base); }
.btn--sm { --btn-py: 9px; --btn-px: 16px; min-height: 44px; font-size: var(--fs-xs); }

.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* --- шапка --- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 246, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--c-line); box-shadow: 0 4px 20px rgba(46, 42, 40, .04); }

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-height: var(--header-h);
}

.logo {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--s-2);
  margin-right: auto;
  color: var(--c-text);
}
.logo__mark { grid-row: 1 / 3; width: 30px; height: 30px; color: var(--c-accent); }
.logo__text { font-size: var(--fs-md); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.logo__sub { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-2); line-height: 1.2; }
.logo--footer .logo__text { font-size: var(--fs-lg); }

.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav__list { display: flex; align-items: center; gap: var(--s-1); }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-3);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__link:hover { color: var(--c-text); background: var(--c-tint); }
.nav__link.is-active { color: var(--c-accent-dark); font-weight: 500; }
.nav__cta, .nav__phone { display: none; }

.header__cta { flex: none; }

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: none;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-text);
}
.burger svg { width: 22px; height: 22px; }
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: block; }

/* --- секции --- */
.section { position: relative; padding-block: var(--section-y); }
.section--tint { background: var(--c-tint); }
.section--booking { background: linear-gradient(180deg, var(--c-bg), #F4EFEB 60%, var(--c-bg)); overflow: hidden; }

.section__head { max-width: var(--measure); margin-bottom: var(--s-12); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  max-width: none;
}
.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
}
.section__title { font-size: var(--fs-xl); max-width: var(--measure-narrow); }
.section__head--center .section__title { margin-inline: auto; }
.section__lead {
  margin-top: var(--s-4);
  max-width: var(--measure);
  color: var(--c-text-2);
  font-size: var(--fs-base);
}
.section__head--center .section__lead { margin-inline: auto; }

/* --- герой --- */
.hero { position: relative; padding-top: clamp(32px, 5vw, 72px); padding-bottom: var(--section-y); }
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  margin-bottom: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  box-shadow: var(--sh-1);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); flex: none; }

.hero__title { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -.035em; }
.hero__lead {
  margin-top: var(--s-6);
  max-width: 44ch;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--c-text-2);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }

.trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--c-line);
}
.trust__num { display: block; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; }
.trust__label { display: block; margin-top: var(--s-1); font-size: var(--fs-xs); line-height: 1.35; color: var(--c-text-2); }

.hero__art { position: relative; }
.hero__collage { width: 100%; height: auto; }
.hero__badge {
  position: absolute;
  left: 0;
  bottom: 6%;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--c-surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
}
.hero__badge-icon { width: 26px; height: 26px; color: var(--c-accent-dark); flex: none; }
.hero__badge-text { font-size: var(--fs-xs); line-height: 1.35; color: var(--c-text-2); }
.hero__badge-text b { display: block; color: var(--c-text); font-weight: 500; font-size: var(--fs-sm); }

/* --- табы --- */
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-2);
  margin-bottom: var(--s-8);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  box-shadow: var(--sh-1);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-5);
  background: transparent;
  border: 0;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text-2);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.tab svg { width: 20px; height: 20px; flex: none; }
.tab:hover { color: var(--c-text); background: var(--c-tint); }
.tab[aria-selected="true"] { background: var(--c-accent-dark); color: #fff; box-shadow: var(--sh-accent); }

.tabs__panel[hidden] { display: none; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-5);
}
.card {
  display: flex;
  flex-direction: column;
  padding: var(--s-7);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: #E3D8D2; }
.card__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: var(--s-5);
  background: var(--c-accent-soft);
  border-radius: var(--r-sm);
  color: var(--c-accent-dark);
}
.card__icon svg { width: 26px; height: 26px; }
.card__title { font-size: var(--fs-md); }
.card__text { margin-top: var(--s-3); font-size: var(--fs-sm); line-height: 1.55; color: var(--c-text-2); }
.card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-5);
}
.card__dur { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--c-text-2); }
.card__dur svg { width: 16px; height: 16px; }
.card__price { font-size: var(--fs-md); font-weight: 700; white-space: nowrap; }
.card__price small { font-size: var(--fs-xs); font-weight: 400; color: var(--c-text-2); }

/* --- чипы-фильтры --- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.chip {
  min-height: 44px;
  padding: var(--s-2) var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.chip:hover { border-color: var(--c-accent); color: var(--c-accent-dark); }
.chip.is-active { background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: #fff; font-weight: 500; }
.chips--sm .chip { min-height: 44px; font-size: var(--fs-xs); padding: var(--s-2) var(--s-4); }

/* --- прайс --- */
.price__list {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.price-row {
  /* Строка прайса — это <button>. Без явного сброса браузер рисует свою
     серую плашку с рамкой и сжимает её по содержимому: строки получаются
     разной ширины и идут «лесенкой». */
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 120px auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-top: 1px solid var(--c-line);
  transition: background-color .25s var(--ease);
}
/* Кнопка всегда единственный ребёнок своего <li>, поэтому :first-child на
   ней срабатывал бы у КАЖДОЙ строки и снимал границы со всего списка. */
.price__list li:first-child .price-row { border-top: 0; }
.price-row:hover { background: #FCFAF9; }
.price-row__name { font-weight: 500; }
.price-row__cat { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--c-text-2); font-weight: 400; }
.price-row__dur { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--c-text-2); }
.price-row__dur svg { width: 16px; height: 16px; flex: none; }
.price-row__price { font-size: var(--fs-md); font-weight: 700; white-space: nowrap; }
.price-row__price small { font-size: var(--fs-xs); font-weight: 400; color: var(--c-text-2); }
.price__empty { padding: var(--s-10); text-align: center; color: var(--c-text-2); }

/* --- мастера --- */
.masters { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-5); }
.master {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.master:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.master__photo { background: var(--c-accent-soft); }
.master__photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.master__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-6); }
.master__name { font-size: var(--fs-md); }
.master__role { margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--c-accent-dark); font-weight: 500; }
.master__exp {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: var(--s-1) var(--s-3);
  background: var(--c-accent-2-soft);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  color: #8A5F5B;
}
.master__about { margin-top: var(--s-4); font-size: var(--fs-sm); line-height: 1.55; color: var(--c-text-2); }
.master__days { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--c-text-2); }
.master__btn { margin-top: auto; padding-top: var(--s-5); }
.master__btn .btn { width: 100%; }

/* ============ 6. Виджет записи ============ */

.widget {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin-inline: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  overflow: hidden;
}

.widget__top { padding: var(--s-6) clamp(20px, 3vw, 40px) 0; }

.progress { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s-4); }
.progress::-webkit-scrollbar { display: none; }
.progress__step {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  white-space: nowrap;
}
.progress__num {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  flex: none;
  background: var(--c-tint);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 500;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.progress__num svg { width: 14px; height: 14px; }
.progress__step + .progress__step::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--c-line);
  flex: none;
  margin-right: var(--s-1);
}
.progress__step.is-current { color: var(--c-text); font-weight: 500; }
.progress__step.is-current .progress__num { background: var(--c-accent-dark); color: #fff; }
.progress__step.is-done .progress__num { background: var(--c-accent-soft); color: var(--c-accent-dark); }

.progress__track { height: 4px; background: var(--c-line); border-radius: var(--r-full); overflow: hidden; }
.progress__fill {
  display: block;
  height: 100%;
  width: 16.66%;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-dark));
  border-radius: var(--r-full);
  transition: width .45s var(--ease);
}

.widget__body { padding: var(--s-8) clamp(20px, 3vw, 40px); }
.step[hidden] { display: none; }
.step__title { font-size: var(--fs-lg); }
.step__hint { margin-top: var(--s-2); margin-bottom: var(--s-6); font-size: var(--fs-sm); color: var(--c-text-2); max-width: var(--measure); }

.step__legend { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-5); font-size: var(--fs-xs); color: var(--c-text-2); }
.legend__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.legend__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.legend__dot--free { background: var(--c-accent); }
.legend__dot--busy { background: var(--c-accent-2); }
.legend__dot--off { background: var(--c-line); }

/* выбор услуги / мастера */
.pick { display: grid; gap: var(--s-3); }
.pick--services { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pick--masters { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.pick__btn {
  display: flex;
  gap: var(--s-4);
  width: 100%;
  min-height: 44px;
  padding: var(--s-4) var(--s-5);
  text-align: left;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.pick__btn:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.pick__btn.is-active { border-color: var(--c-accent-dark); background: var(--c-accent-soft); }
.pick__btn.is-active .pick__name { color: var(--c-accent-dark); }

.pick__main { flex: 1; min-width: 0; }
.pick__name { font-weight: 500; font-size: var(--fs-sm); }
.pick__meta { margin-top: var(--s-1); font-size: var(--fs-xs); color: var(--c-text-2); }
.pick__price { font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }

.pick__avatar {
  width: 56px; height: 56px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-accent-soft);
}
.pick__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.pick__avatar--any { display: grid; place-items: center; color: var(--c-accent-dark); background: var(--c-accent-2-soft); }
.pick__avatar--any svg { width: 26px; height: 26px; }

/* лента дат */
.dates {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding: var(--s-1) var(--s-1) var(--s-4);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.dates::-webkit-scrollbar { height: 6px; }
.dates::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: var(--r-full); }

.date {
  flex: none;
  width: 74px;
  min-height: 92px;
  padding: var(--s-3) var(--s-2);
  scroll-snap-align: start;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  text-align: center;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.date__dow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-2); }
.date__num { display: block; margin: var(--s-1) 0; font-size: var(--fs-md); font-weight: 700; line-height: 1.1; }
.date__month { font-size: 11px; color: var(--c-text-2); }
.date__state { display: block; margin-top: var(--s-1); font-size: 10px; line-height: 1.2; color: var(--c-text-2); }
.date:hover:not(:disabled) { border-color: var(--c-accent); transform: translateY(-2px); }
.date.is-active { background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: #fff; }
.date.is-active .date__dow, .date.is-active .date__month, .date.is-active .date__state { color: rgba(255, 255, 255, .8); }
.date:disabled { cursor: not-allowed; background: var(--c-tint); color: var(--c-text-2); opacity: .8; }
.date--busy:disabled { background: var(--c-accent-2-soft); border-color: #F0DBD9; }
.date--today .date__month { color: var(--c-accent-dark); font-weight: 500; }

/* сетка слотов */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--s-2); }
.slot {
  min-height: 48px;
  padding: var(--s-3) var(--s-2);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.slot:hover:not(:disabled) { border-color: var(--c-accent); }
.slot:disabled { background: var(--c-tint); color: #B3A9A3; cursor: not-allowed; text-decoration: line-through; }
.slot.is-span { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-dark); }
.slot.is-active { background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: #fff; }
.slot.is-active-span { background: #A8CDC2; border-color: #A8CDC2; color: #24463D; }

.empty { padding: var(--s-8); text-align: center; color: var(--c-text-2); background: var(--c-tint); border-radius: var(--r-md); }

/* форма */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.field { display: flex; flex-direction: column; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__label { margin-bottom: var(--s-2); font-size: var(--fs-sm); font-weight: 500; }
.field__opt { font-weight: 400; color: var(--c-text-2); }
.field__input {
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field__input::placeholder { color: #B3A9A3; }
.field__input:hover { border-color: #E2D7D1; }
.field__input:focus { outline: none; border-color: var(--c-accent-dark); background: var(--c-surface); box-shadow: 0 0 0 3px rgba(127, 182, 165, .25); }
.field__input:focus-visible { outline: none; }
.field__input--area { min-height: 96px; resize: vertical; line-height: 1.5; }
.field.has-error .field__input { border-color: #C0574F; background: #FDF5F4; }
.field__error { margin-top: var(--s-2); font-size: var(--fs-xs); color: #A8443C; min-height: 0; }
.field__error:empty { margin-top: 0; }

.check { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; padding: var(--s-1) 0; }
.check__input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.check__box {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  flex: none;
  margin-top: 1px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xs);
  color: #fff;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.check__box svg { width: 16px; height: 16px; opacity: 0; transition: opacity .2s var(--ease); }
.check__input:checked + .check__box { background: var(--c-accent-dark); border-color: var(--c-accent-dark); }
.check__input:checked + .check__box svg { opacity: 1; }
.check__input:focus-visible + .check__box { outline: 3px solid var(--c-accent-dark); outline-offset: 3px; }
.check__text { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.5; }
.has-error .check__box { border-color: #C0574F; }

/* итог */
.summary {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--s-3) var(--s-5);
  padding: var(--s-6);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.summary__key { font-size: var(--fs-sm); color: var(--c-text-2); }
.summary__val { display: flex; align-items: baseline; gap: var(--s-3); font-size: var(--fs-sm); font-weight: 500; }
.summary__val b { font-weight: 500; }
.summary__edit {
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px dashed rgba(78, 138, 122, .5);
  font-size: var(--fs-xs);
  color: var(--c-accent-dark);
  white-space: nowrap;
}
.summary__edit:hover { border-bottom-color: var(--c-accent-dark); }
.summary__total { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.summary__total b { font-size: var(--fs-md); }

/* успех */
.done { text-align: center; max-width: 520px; margin-inline: auto; }
.done__icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin: 0 auto var(--s-5);
  background: var(--c-accent-soft);
  border-radius: 50%;
  color: var(--c-accent-dark);
}
.done__icon svg { width: 34px; height: 34px; }
.done__lead { margin-top: var(--s-3); margin-bottom: var(--s-6); color: var(--c-text-2); font-size: var(--fs-sm); }
.summary--done { text-align: left; }
.done__note { margin-top: var(--s-5); margin-bottom: var(--s-5); font-size: var(--fs-xs); color: var(--c-text-2); line-height: 1.55; }

/* низ виджета */
.widget__foot {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) clamp(20px, 3vw, 40px);
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
}
.widget__cart { flex: 1; min-width: 0; font-size: var(--fs-xs); color: var(--c-text-2); line-height: 1.4; }
.widget__cart b { color: var(--c-text); font-weight: 500; }
.btn--back { margin-right: auto; }
.widget__foot .btn--back + .widget__cart { text-align: right; }

/* ============ 7. Отзывы, атмосфера, контакты, подвал ============ */

.slider { position: relative; }
.slider__nav { display: flex; gap: var(--s-2); flex: none; }
.slider__btn {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-text);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.slider__btn svg { width: 20px; height: 20px; }
.slider__btn:hover:not(:disabled) { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent-dark); }
.slider__btn:disabled { opacity: .4; cursor: not-allowed; }

.slider__track {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: var(--s-2) var(--gutter) var(--s-6);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.slider__track::-webkit-scrollbar { display: none; }

.review {
  flex: none;
  width: min(400px, 82vw);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  padding: var(--s-7);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.review:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.review__stars { display: flex; gap: 2px; margin-bottom: var(--s-4); color: var(--c-accent); }
.review__stars svg { width: 18px; height: 18px; }
.review__stars svg.is-off { color: var(--c-line); }
.review__text { font-size: var(--fs-sm); line-height: 1.6; color: var(--c-text); }
.review__foot { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; padding-top: var(--s-5); }
.review__avatar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  background: var(--c-accent-2-soft);
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: #8A5F5B;
}
.review__name { font-size: var(--fs-sm); font-weight: 500; }
.review__service { font-size: var(--fs-xs); color: var(--c-text-2); }

/* атмосфера */
.zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-5); }
.zone {
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.zone:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.zone img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.zone__body { padding: var(--s-5) var(--s-6) var(--s-6); }
.zone__title { font-size: var(--fs-base); }
.zone__note { margin-top: var(--s-2); font-size: var(--fs-xs); line-height: 1.5; color: var(--c-text-2); }

/* контакты */
.contacts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.info { display: grid; gap: var(--s-6); }
.info__item { display: flex; gap: var(--s-4); }
.info__icon { width: 24px; height: 24px; flex: none; margin-top: 2px; color: var(--c-accent-dark); }
.info__title { font-size: var(--fs-base); }
.info__text { margin-top: var(--s-1); font-size: var(--fs-sm); line-height: 1.55; }
.info__muted { color: var(--c-text-2); }

.callback {
  margin-top: var(--s-8);
  padding: var(--s-7);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.callback__title { font-size: var(--fs-md); }
.callback__lead { margin-top: var(--s-2); margin-bottom: var(--s-5); font-size: var(--fs-sm); color: var(--c-text-2); }
.callback__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); }
.callback__ok { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--c-accent-dark); }

.contacts__map { position: sticky; top: calc(var(--header-h) + 24px); }
.map {
  width: 100%;
  height: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
  background: var(--c-surface);
}
.map__note { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--c-text-2); text-align: center; }

/* подвал */
.footer { background: var(--c-tint); border-top: 1px solid var(--c-line); padding-block: var(--s-16) var(--s-8); }
.footer__inner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-10); }
.footer__tagline { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.5; }
.footer__title { font-size: var(--fs-sm); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-2); margin-bottom: var(--s-4); }
.footer__list { display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--c-text-2); }
.footer__list a { display: inline-block; min-height: 28px; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
}
.footer__copy { font-size: var(--fs-xs); color: var(--c-text-2); }
.footer__disclaimer { font-size: 11px; line-height: 1.5; color: #9A918B; max-width: 62ch; }

/* плавающая кнопка (моб.) */
.fab {
  display: none;
  position: fixed;
  left: var(--s-4);
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 90;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: var(--s-3) var(--s-5);
  background: var(--c-accent-dark);
  color: #fff;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  box-shadow: 0 8px 28px rgba(46, 42, 40, .22);
  transform: translateY(140%);
  transition: transform .35s var(--ease);
}
.fab__icon { width: 20px; height: 20px; }
.fab.is-visible { transform: translateY(0); }

/* ============ 8. Адаптив ============ */

@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__art { order: -1; max-width: 520px; }
  .hero__title { max-width: 14ch; }
  .contacts { grid-template-columns: minmax(0, 1fr); }
  .contacts__map { position: static; }
}

@media (max-width: 960px) {
  .nav__link { padding: 0 var(--s-2); font-size: var(--fs-xs); }
  .price-row { grid-template-columns: minmax(0, 1fr) 110px 110px auto; }
}

@media (max-width: 860px) {
  .burger { display: inline-flex; }
  .header__cta { display: none; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 99;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--s-4);
    padding: var(--s-6) var(--gutter) var(--s-10);
    background: var(--c-bg);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s var(--ease), visibility .35s var(--ease);
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    min-height: 56px;
    padding: 0 var(--s-2);
    font-size: var(--fs-md);
    color: var(--c-text);
    border-bottom: 1px solid var(--c-line);
    border-radius: 0;
  }
  .nav__cta { display: inline-flex; margin-top: var(--s-4); }
  .nav__phone {
    display: block;
    text-align: center;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--c-accent-dark);
    padding: var(--s-3);
  }
  .footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
  .footer__brand { grid-column: 1 / -1; }
  .fab { display: flex; }
}

@media (max-width: 720px) {
  :root { --header-h: 64px; }

  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .section__head--row { flex-direction: column; align-items: flex-start; }

  .price-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'name price' 'dur btn';
    row-gap: var(--s-3);
    padding: var(--s-5);
  }
  .price-row__name { grid-area: name; }
  .price-row__dur { grid-area: dur; }
  .price-row__price { grid-area: price; text-align: right; }
  .price-row__action { grid-area: btn; justify-self: end; }

  .form { grid-template-columns: minmax(0, 1fr); }
  .callback__row { grid-template-columns: minmax(0, 1fr); }

  .widget__foot { flex-wrap: wrap; }
  .widget__cart { order: 3; flex-basis: 100%; text-align: left !important; }
  .btn--next { flex: 1; }

  .summary { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); padding: var(--s-5); }
  .summary__key { margin-top: var(--s-3); }
  .summary__key:first-child { margin-top: 0; }

  .review { width: min(400px, 86vw); }
}

@media (max-width: 520px) {
  .hero__badge { left: auto; right: 0; bottom: 0; padding: var(--s-3) var(--s-4); }
  .hero__actions .btn { width: 100%; }
  .trust { margin-top: var(--s-8); padding-top: var(--s-6); }

  .tabs__list { border-radius: var(--r-md); }
  .tab { flex: 1 1 calc(50% - 4px); justify-content: center; padding: var(--s-2) var(--s-3); font-size: var(--fs-xs); }

  .card, .review { padding: var(--s-5); }
  .master__body { padding: var(--s-5); }

  .widget { border-radius: var(--r-md); }
  .widget__body { padding: var(--s-6) var(--s-4); }
  .widget__top { padding: var(--s-5) var(--s-4) 0; }
  .widget__foot { padding: var(--s-4); }

  .pick--services, .pick--masters { grid-template-columns: minmax(0, 1fr); }
  .slots { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
  .date { width: 68px; }

  .zones { grid-template-columns: minmax(0, 1fr); }
  .footer__inner { grid-template-columns: minmax(0, 1fr); }
  .fab { font-size: var(--fs-xs); }
}

@media (max-width: 380px) {
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slot { font-size: var(--fs-xs); padding: var(--s-3) var(--s-1); }
  .price-row { padding: var(--s-4); }
  .btn--lg { --btn-px: 20px; }
}

/* ============ движение ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .fab { transform: translateY(0); }
  .fab:not(.is-visible) { display: none; }
  .slider__track { scroll-behavior: auto; }
}