/* =========================================================
   PROF BEAUTY Uzbekistan — общая основа всех страниц.

   Все размеры заданы в rem, а 1rem привязан к ширине экрана,
   поэтому вёрстка масштабируется целиком. 1rem = 1px при ширине:
     обычные страницы       320 · 540 · 1560 · 1920
     html.scale-tablet      320 · 540 · 768 · 1560 · 1920   (главная, лояльность)
     html.scale-multi       320 · 576 · 768 · 1000 · 1920   (каталог, товар, сервис, аренда)
   Раскладки: телефон до 767px, планшет 768–991px, десктоп от 992px.
   ========================================================= */

:root {
  --c-bg: #F7F6F8;
  --c-text: #25262B;
  --c-head: #00374D;
  --c-dark: #29282A;
  --c-black: #000;
  --c-accent: #E84C61;
  --c-powder: #E1C2C1;
  --c-light: #EEF3F8;
  --c-site: #F5F7F9;
  --c-white: #FFF;
  --c-gray: #898787;
  --c-glacier: #96C0CC;
  --shine: linear-gradient(89.37deg, rgba(255, 255, 255, 0) 27.3%, rgba(255, 255, 255, .6) 98.84%);
  --line-grad: linear-gradient(90deg, #E84C61, #00374D);
}

/* ---------- Масштаб ---------- */
html { font-size: .3125vw; }
@media (min-width: 540px) { html { font-size: .1851851852vw; } }
@media (min-width: 768px) { html { font-size: .0641025641vw; } }
@media (min-width: 1440px) { html { font-size: .0520833333vw; } }

@media (min-width: 768px) { html.scale-tablet { font-size: .1302083333vw; } }
@media (min-width: 992px) { html.scale-tablet { font-size: .0641025641vw; } }
@media (min-width: 1440px) { html.scale-tablet { font-size: .0520833333vw; } }

html.scale-multi { font-size: .3125vw; }
@media (min-width: 576px) { html.scale-multi { font-size: .1736111111vw; } }
@media (min-width: 768px) { html.scale-multi { font-size: .1302083333vw; } }
@media (min-width: 992px) { html.scale-multi { font-size: .1vw; } }
@media (min-width: 1200px) { html.scale-multi { font-size: .0520833333vw; } }

/* ---------- Сброс ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background-color: var(--c-bg); }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-text);
  font-weight: var(--fw-regular);
  font-size: 16rem;
  line-height: 140%;
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; }
img { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
body.is-locked { overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ---------- Каркас ---------- */
.page { overflow: hidden; }
.container { padding: 0 10rem; margin: 0 auto; }
@media (min-width: 992px) { .container { max-width: 1560rem; } }
/* узкий контейнер страниц старого образца: о нас, статьи, новости, контакты */
.container-narrow { padding: 0 10rem; margin: 0 auto; }
@media (min-width: 768px) and (max-width: 991px) { .container-narrow { padding: 0 24rem; } }
@media (min-width: 992px) { .container-narrow { max-width: 1320rem; } }

.section { margin: 154rem 0; scroll-margin-top: 100px; }
@media (max-width: 767px) { .section { margin: 42rem 0; } }

.section-title {
  font-family: var(--font-accent);
  font-weight: var(--fw-accent);
  font-size: 50rem;
  line-height: 60rem;
  text-transform: uppercase;
  color: var(--c-head);
  margin: 0 0 40rem;
  position: relative;
}
.section-title--center { text-align: center; }
.section-title--dark { color: var(--c-head); }
.section-subtitle {
  font-family: var(--font-main);
  color: var(--c-head);
  font-size: 26rem;
  line-height: 28rem;
  text-align: center;
  margin-top: -30rem;
  margin-bottom: 40rem;
}
@media (max-width: 767px) {
  .section-title {
    font-family: var(--font-main);
    font-weight: var(--fw-medium);
    font-size: 16rem;
    line-height: 17rem;
    margin-bottom: 14rem;
    text-transform: none;
  }
  .section-title--center { margin-left: auto; margin-right: auto; max-width: calc(100vw - 30rem); }
  .section-subtitle { font-size: 10rem; line-height: 12rem; margin-top: -12rem; margin-bottom: 14rem; }
}

@media (max-width: 991px) {
  .scale-tablet .section-title { font-size: 24rem; line-height: 30rem; margin-bottom: 14rem; }
  .scale-tablet .section-subtitle { display: none; }
}
@media (max-width: 767px) {
  .scale-tablet .section-title { font-size: 16rem; line-height: 17rem; text-transform: none; }
  .scale-tablet .section-subtitle { display: block; }
}
.scale-multi .section-title { font-family: var(--font-main); font-size: 22rem; line-height: 24rem; }
@media (min-width: 576px) { .scale-multi .section-title { font-size: 32rem; line-height: 34rem; } }
@media (min-width: 768px) { .scale-multi .section-title { font-family: var(--font-accent); font-size: 24rem; line-height: 30rem; } }
@media (min-width: 992px) { .scale-multi .section-title { font-size: 30rem; line-height: 34rem; } }
@media (min-width: 1200px) { .scale-multi .section-title { font-size: 50rem; line-height: 60rem; } }
.scale-multi .section-subtitle { font-size: 16rem; line-height: 20rem; }
@media (min-width: 576px) { .scale-multi .section-subtitle { font-size: 18rem; line-height: 24rem; } }
@media (min-width: 992px) { .scale-multi .section-subtitle { font-size: 22rem; line-height: 24rem; } }
@media (min-width: 1200px) { .scale-multi .section-subtitle { font-size: 26rem; line-height: 32rem; } }
@media (max-width: 1199.98px) { .scale-multi .section-subtitle { text-align: center; } }
@media (max-width: 767.98px) { .scale-multi .section-subtitle { position: static; margin-top: 0; margin-bottom: 16rem; } }
.scale-multi .container { max-width: 450rem; }
@media (min-width: 768px) { .scale-multi .container { max-width: 666rem; } }
@media (min-width: 992px) { .scale-multi .container { max-width: 840rem; } }
@media (min-width: 1200px) { .scale-multi .container { max-width: 1560rem; } }

/* показать / скрыть по ширине */
.only-mobile { display: none !important; }
@media (max-width: 767px) {
  .only-mobile { display: block !important; }
  .hide-mobile { display: none !important; }
}
@media (max-width: 991px) { .hide-tablet-down { display: none !important; } }
.show-sm-up, .show-md-up, .show-lg-up, .show-xl-up,
.show-sm-down, .show-md-down, .show-lg-down, .show-xl-down,
.show-sm-only, .show-md-only, .show-lg-only, .show-xl-only { display: none !important; }
@media (min-width: 576px) { .show-sm-up { display: block !important; } }
@media (min-width: 768px) { .show-md-up { display: block !important; } }
@media (min-width: 992px) { .show-lg-up { display: block !important; } }
@media (min-width: 1200px) { .show-xl-up, .show-xl-only { display: block !important; } }
@media (max-width: 575.98px) { .show-sm-down { display: block !important; } }
@media (max-width: 767.98px) { .show-md-down { display: block !important; } }
@media (max-width: 991.98px) { .show-lg-down { display: block !important; } }
@media (max-width: 1199.98px) { .show-xl-down { display: block !important; } }
@media (min-width: 576px) and (max-width: 767.98px) { .show-sm-only { display: block !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .show-md-only { display: block !important; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .show-lg-only { display: block !important; } }

/* ---------- Кнопки ---------- */
.btn {
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-main);
  font-weight: var(--fw-medium);
  font-size: 18rem;
  color: #fff;
  padding: 10rem 24rem;
  background: var(--c-accent);
  border-radius: 80rem;
  text-decoration: none;
  border: 0;
  transition: border-color .3s, background-color .3s, color .3s;
  overflow: hidden;
  position: relative;
}
.btn::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 70%;
  height: 100%;
  background: var(--shine);
  opacity: 0;
  transition: opacity .3s;
}
.btn:hover::before { opacity: 1; }
.btn--outline { color: var(--c-accent); background-color: transparent; border: 1px solid var(--c-accent); }
.btn--outline:hover { background-color: var(--c-accent); color: #fff; }
.btn--powder { background: var(--c-powder); }
.btn[disabled] { opacity: .6; cursor: default; }
.btn-wrapper { display: flex; justify-content: center; }
@media (max-width: 767px) {
  .btn { font-size: 13rem; padding: 3rem 8rem; }
  .btn--outline { padding: 1rem 8rem; }
}
.scale-multi .btn { font-size: 14rem; line-height: 18rem; padding: 8rem; }
@media (min-width: 768px) { .scale-multi .btn { font-size: 16rem; line-height: 20rem; } }
@media (min-width: 992px) { .scale-multi .btn { padding: 10rem 24rem; font-size: 18rem; line-height: 22rem; } }
@media (min-width: 1200px) { .scale-multi .btn { font-size: 22rem; line-height: 24rem; } }

/* ---------- Хлебные крошки ---------- */
.crumbs { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8rem; }
.crumbs li { display: inline-flex; align-items: center; font-family: var(--font-main); font-size: 16rem; line-height: 20rem; color: var(--c-text); }
.crumbs li a { text-decoration: none; color: inherit; }
.crumbs li svg { margin-left: 8rem; width: 7rem; height: 13rem; }
.crumbs li svg path { stroke: currentColor; }
.crumbs--white li { color: #fff; }
.crumbs--grey li { color: var(--c-gray); }
.crumbs--absolute { position: absolute; top: 20rem; left: 0; z-index: 1; }
.crumbs--margin { margin-top: -18rem; margin-bottom: 16rem; }
.crumbs--equipment { margin-top: 20rem; margin-left: 30rem; }
@media (max-width: 991px) {
  .crumbs li { font-size: 14rem; line-height: 18rem; }
  .crumbs--margin { margin-bottom: 20rem; }
}
@media (max-width: 767px) {
  .crumbs li { font-size: 12rem; line-height: 15rem; }
  .crumbs--absolute { left: 12rem; }
  .crumbs--margin { margin-bottom: 35rem; }
  .crumbs--equipment { position: absolute; top: 60rem; left: 12rem; z-index: 1; margin: 0; }
  .crumbs--other { margin-top: 20rem; }
}
/* старый вид крошек: мелкие, с разделителем «>» */
.crumbs-old { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4rem; }
.crumbs-old li { font-size: 12rem; line-height: 16rem; color: var(--c-text); }
.crumbs-old li::after { content: '>'; }
.crumbs-old li:last-child::after { display: none; }
.crumbs-old li a { text-decoration: none; color: var(--c-text); border-bottom: 1px solid transparent; transition: border-bottom-color .3s; }
.crumbs-old li a:hover { border-bottom-color: var(--c-text); }

/* =========================================================
   Шапка (от 768px)
   ========================================================= */
.hdr {
  position: relative;
  z-index: 100;
  width: 100%;
  margin: 0 auto 38rem;
  background: rgba(255, 255, 255, .6);
  padding-top: 20rem;
  padding-bottom: 16rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hdr__container { width: 1325rem; margin: 0 auto; display: flex; gap: 60rem; align-items: center; }
.hdr__logo { display: flex; justify-content: center; margin-top: auto; color: var(--c-dark); }
.hdr__logo a { display: block; color: inherit; }
.hdr__logo svg, .hdr__logo img { display: block; width: 100rem; height: 35rem; }
.hdr__wrapper { position: relative; flex: 1; min-width: 0; }
.hdr__city { position: absolute; left: -160rem; top: 1rem; display: flex; align-items: center; gap: 4rem; -webkit-user-select: none; user-select: none; }
.hdr__city span { color: var(--c-dark); font-size: 16rem; font-weight: 400; line-height: 20rem; }
.hdr__city svg { width: 12rem; height: auto; }

.hdr__top { display: flex; align-items: center; gap: 15rem; margin-bottom: 20rem; transition: margin .25s ease-in-out; }
.hdr__nav { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; gap: 36rem; }
.hdr__nav > li { font-family: var(--font-main); font-size: 16rem; line-height: 20rem; color: var(--c-dark); position: relative; }
.hdr__nav > li > a { color: var(--c-dark); display: block; text-decoration: none; transition: color .3s; position: relative; z-index: 2; white-space: nowrap; }
.hdr__nav > li > a:hover { color: #909090; }
.hdr__nav > li.has-drop::after { content: ''; position: absolute; top: 100%; left: -32rem; width: calc(100% + 64rem); height: 6rem; }
.hdr__drop {
  position: absolute;
  top: calc(100% + 6rem);
  left: -32rem;
  z-index: 20;
  min-width: 330rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 30rem;
  overflow: hidden;
  box-shadow: 0 10rem 30rem rgba(41, 40, 42, .1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8rem);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.hdr__nav > li.has-drop:hover .hdr__drop,
.hdr__nav > li.has-drop:focus-within .hdr__drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.hdr__drop li { width: 100%; }
.hdr__drop a {
  display: block;
  width: 100%;
  padding: 10rem 24rem 10rem 32rem;
  font-family: var(--font-main);
  font-size: 16rem;
  line-height: 20rem;
  color: var(--c-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.hdr__drop a:hover { background: var(--c-site); }
.hdr__drop a:active { text-decoration: underline; }

.hdr__meta { margin-left: auto; display: flex; gap: 12rem; align-items: center; }
.hdr__social { display: flex; align-items: center; gap: 6rem; }
.hdr__social a { display: block; text-decoration: none; }
.hdr__social svg, .hdr__social img { display: block; width: 22rem; height: 22rem; }
.hdr__social--extra { margin-left: 36rem; }
.hdr__phone { font-family: var(--font-main); font-weight: var(--fw-medium); font-size: 18rem; line-height: 23rem; color: var(--c-dark); white-space: nowrap; }
.hdr__phone a { color: var(--c-dark); text-decoration: none; }
.hdr__lang { display: flex; align-items: center; gap: 6rem; margin-left: 12rem; font-family: var(--font-main); font-size: 16rem; line-height: 20rem; }
.hdr__lang button { border: 0; background: none; padding: 0; color: #909090; transition: color .3s; }
.hdr__lang button:hover, .hdr__lang button.is-active { color: var(--c-dark); }
.hdr__lang button.is-active { font-weight: var(--fw-medium); }
.hdr__lang i { width: 1px; height: 14rem; background: #c9c9c9; }

.hdr__bottom {
  display: flex;
  gap: 20rem;
  align-items: center;
  height: auto;
  transform: translateY(36px);
  position: relative;
  top: -36px;
  will-change: transform;
  transition: transform .25s ease-in-out, height .25s ease-in-out;
}
.hdr__bottom > * { transition: opacity .5s ease-in-out 25ms, visibility .5s ease-in-out 25ms; }
.hdr__pills { padding: 0; margin: 0; list-style: none; display: flex; gap: 20rem; }
.hdr__pills li { font-family: var(--font-main); font-size: 14rem; line-height: 20rem; color: var(--c-dark); }
.hdr__pills a, .hdr__pills button {
  display: block;
  padding: 7rem 22rem;
  color: var(--c-dark);
  background: transparent;
  text-decoration: none;
  border: 1px solid var(--c-dark);
  border-radius: 20rem;
  white-space: nowrap;
  font: inherit;
  transition: color .3s, border-color .3s, background-color .3s;
}
.hdr__pills a:hover, .hdr__pills button:hover { border-color: var(--c-accent); background-color: var(--c-accent); color: #fff; }
.hdr__pills .is-accent { border-color: transparent; background-color: var(--c-accent); color: #fff; position: relative; overflow: hidden; }
.hdr__pills .is-accent::before { content: ''; position: absolute; right: 0; top: 0; width: 70%; height: 100%; background: var(--shine); opacity: 0; transition: opacity .3s; }
.hdr__pills .is-accent:hover::before { opacity: 1; }

/* при прокрутке шапка закрепляется, а нижний ряд сворачивается */
.hdr.is-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 999; }
.hdr.is-collapsed .hdr__top { margin-bottom: 0; }
.hdr.is-collapsed .hdr__bottom {
  height: 0;
  transform: none;
  pointer-events: none;
  transition-duration: .5s;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black);
  mask-image: linear-gradient(to bottom, transparent, black);
}
.hdr.is-collapsed .hdr__bottom > * { opacity: 0; visibility: hidden; transition-duration: .125s; }
@media (min-width: 992px) { .hdr.is-collapsed .hdr__city { display: none; } }
@media (min-width: 993px) { body.has-fixed-hdr { padding-top: 174rem; } }

@media (max-width: 991px) {
  .hdr__city { left: 0; top: -40rem; }
  .hdr__city svg { width: 12rem; }
  .hdr__city span { font-size: 12rem; line-height: 14rem; }
}
@media (max-width: 767px) { .hdr { display: none; } }

/* планшетный вид шапки на главной и лояльности */
@media (max-width: 991px) {
  .scale-tablet .hdr { padding-right: 15rem; padding-left: 15rem; }
  .scale-tablet .hdr__container { width: 100%; flex-direction: column; gap: 16rem; }
  .scale-tablet .hdr__logo svg, .scale-tablet .hdr__logo img { width: 64rem; height: 22rem; }
  .scale-tablet .hdr__wrapper { width: 100%; }
  .scale-tablet .hdr__pills { gap: 16rem; justify-content: space-between; width: 100%; }
  .scale-tablet .hdr__pills li { font-size: 12rem; line-height: 16rem; }
  .scale-tablet .hdr__pills a, .scale-tablet .hdr__pills button { padding: 3rem 10.75rem; }
  .scale-tablet .hdr__top { gap: 5rem; }
  .scale-tablet .hdr__nav { gap: 12rem; }
  .scale-tablet .hdr__nav > li { font-size: 12rem; line-height: 16rem; }
  .scale-tablet .hdr__social { gap: 6rem; }
  .scale-tablet .hdr__phone { font-size: 16rem; line-height: 20rem; }
  .scale-tablet .hdr__meta { gap: 10rem; }
  .scale-tablet .hdr__lang { font-size: 12rem; line-height: 16rem; margin-left: 6rem; }
}
@media (max-width: 1200px) { .scale-tablet .hdr__social--extra { margin-left: 10rem; display: none; } }

/* шапка страниц каталога, товара, сервиса, аренды: до 1200px — в две строки */
.scale-multi .hdr { padding-top: 16rem; padding-bottom: 20rem; }
.scale-multi .hdr__container { flex-direction: column; width: 728rem; gap: 16rem; align-items: stretch; }
.scale-multi .hdr__logo { justify-content: flex-start; }
.scale-multi .hdr__logo svg, .scale-multi .hdr__logo img { width: auto; height: 22rem; }
.scale-multi .hdr__pills { gap: 16rem; }
.scale-multi .hdr__pills li { font-size: 12rem; line-height: 16rem; }
.scale-multi .hdr__pills a, .scale-multi .hdr__pills button { padding: 3rem 10.75rem; }
.scale-multi .hdr__nav { gap: 20rem; }
.scale-multi .hdr__nav > li { font-size: 12rem; }
.scale-multi .hdr__social--extra { display: none; }
.scale-multi .hdr__phone { font-size: 16rem; line-height: 23rem; }
.scale-multi .hdr__lang { font-size: 12rem; }
@media (min-width: 1200px) {
  .scale-multi .hdr { margin: 0 auto 38rem; padding-top: 20rem; padding-bottom: 16rem; }
  .scale-multi .hdr__container { flex-direction: row; width: 1325rem; gap: 60rem; align-items: center; }
  .scale-multi .hdr__logo { justify-content: center; }
  .scale-multi .hdr__logo svg, .scale-multi .hdr__logo img { width: 100rem; height: 35rem; }
  .scale-multi .hdr__pills { gap: 20rem; }
  .scale-multi .hdr__pills li { font-size: 14rem; line-height: 20rem; }
  .scale-multi .hdr__pills a, .scale-multi .hdr__pills button { padding: 7rem 22rem; }
  .scale-multi .hdr__nav { gap: 36rem; }
  .scale-multi .hdr__nav > li { font-size: 16rem; }
  .scale-multi .hdr__social--extra { display: flex; }
  .scale-multi .hdr__phone { font-size: 18rem; }
  .scale-multi .hdr__lang { font-size: 16rem; }
}

/* =========================================================
   Мобильная шапка и меню (до 767px)
   ========================================================= */
.mhdr {
  position: sticky;
  top: 0;
  z-index: 100;
  display: none;
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 6rem 22rem;
  align-items: center;
  height: 40rem;
}
@media (max-width: 767px) { .mhdr { display: flex; } }
.mhdr__burger { cursor: pointer; width: 12rem; height: 12rem; border: 0; background: none; padding: 0; display: flex; align-items: center; }
.mhdr__burger svg { width: 12rem; height: auto; display: block; }
.mhdr__city { display: flex; align-items: center; gap: 4rem; margin-left: 45rem; }
.mhdr__city svg { width: 8rem; height: auto; }
.mhdr__city span { color: var(--c-dark); font-size: 8rem; line-height: 10rem; font-weight: 400; }
.mhdr__logo { position: absolute; display: flex; justify-content: center; left: 50%; top: 50%; margin-left: -8rem; margin-top: -8rem; }
.mhdr__logo a { display: block; text-decoration: none; color: var(--c-dark); }
.mhdr__logo svg { width: 16rem; height: 16rem; display: block; }
.mhdr__right { margin-left: auto; display: flex; align-items: center; gap: 10rem; }
.mhdr__right button { border: 0; background: none; padding: 0; display: block; font-family: var(--font-main); font-size: 8rem; line-height: 10rem; color: #000; }
.mhdr__lang { display: flex; gap: 4rem; }
.mhdr__lang button { color: #909090; }
.mhdr__lang button.is-active { color: #000; font-weight: var(--fw-medium); }

.mnav__bg, .mnav__panel { opacity: 0; visibility: hidden; transition: visibility .3s, opacity .3s; }
.mnav.is-open .mnav__panel { opacity: 1; visibility: visible; }
.mnav.is-open .mnav__bg { opacity: .4; visibility: visible; }
.mnav__bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 900; background-color: #000; }
.mnav__panel {
  position: fixed;
  left: 0;
  top: 0;
  width: 260rem;
  height: 100%;
  z-index: 1000;
  background-color: #fff;
  border-top-right-radius: 20rem;
  border-bottom-right-radius: 20rem;
  padding: 20rem 28rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mnav__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rem; color: var(--c-dark); }
.mnav__top svg { width: 16rem; height: 16rem; }
.mnav__close { border: 0; background: none; padding: 0; display: flex; }
.mnav__close svg { width: 11rem; height: 11rem; }
.mnav__list { display: flex; gap: 16rem; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mnav__list > li { font-family: var(--font-main); font-size: 16rem; line-height: 20rem; color: var(--c-dark); }
.mnav__list a { color: var(--c-dark); text-decoration: none; }
.mnav__head { display: flex; align-items: center; }
.mnav__toggle { display: flex; align-items: center; justify-content: center; margin-left: 22rem; padding: 0; border: 0; background: transparent; }
.mnav__toggle svg { display: block; width: 17rem; height: 10rem; transition: transform .3s ease; }
.mnav__sub { display: none; padding-top: 12rem; }
.mnav__sub ul { display: flex; flex-direction: column; gap: 12rem; margin: 0; padding: 0; list-style: none; }
.mnav__sub a { display: block; padding: 0 14rem; font-family: var(--font-main); font-size: 14rem; line-height: 18rem; color: var(--c-head); }
.mnav__item.is-open .mnav__sub { display: block; }
.mnav__item.is-open .mnav__toggle svg { transform: rotate(180deg); }
.mnav__item.is-open .mnav__toggle svg path { stroke: var(--c-gray); }
.mnav__lang { display: flex; gap: 12rem; margin-top: 20rem; font-family: var(--font-main); font-size: 14rem; line-height: 18rem; }
.mnav__lang button { border: 0; background: none; padding: 0; color: #909090; }
.mnav__lang button.is-active { color: var(--c-dark); font-weight: var(--fw-medium); }
.mnav__meta { margin-top: auto; padding-top: 20rem; display: flex; gap: 10rem; align-items: center; }
.mnav__phone a { font-family: var(--font-main); color: var(--c-dark); font-size: 15rem; font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; }
.mnav__social { display: flex; gap: 4rem; }
.mnav__social a { text-decoration: none; }
.mnav__social svg, .mnav__social img { width: 24rem; height: 24rem; }
.mnav__tags { margin-top: 10rem; display: flex; gap: 6rem; flex-wrap: wrap; }
.mnav__tags span { padding: 2rem 8rem; border-radius: 6rem; background: var(--c-accent); color: #fff; font-family: var(--font-accent); font-size: 5rem; line-height: 8rem; text-transform: uppercase; letter-spacing: .04em; }

/* =========================================================
   Подвал с формой
   ========================================================= */
.ftr {
  padding: 56rem 0 36rem;
  border-radius: 90rem 90rem 0 0;
  overflow: hidden;
  color: #fff;
  background-color: #010405;
  background-image:
    radial-gradient(ellipse 46% 120% at 100% 86%, #0b4a66 0%, #063b52 22%, #032c3c 42%, rgba(2, 24, 32, 0) 78%),
    radial-gradient(ellipse 30% 50% at 100% 118%, rgba(120, 118, 136, .75) 0%, rgba(58, 58, 70, 0) 100%),
    linear-gradient(90deg, #000 0%, #010405 45%, #011317 100%);
}
.ftr .container { position: relative; }
.ftr-form { display: flex; justify-content: space-between; gap: 70rem; padding-bottom: 22rem; border-bottom: 1px solid; border-image: var(--line-grad) 1; }
.ftr-form__meta { width: 470rem; flex-shrink: 0; flex-grow: 0; display: flex; flex-direction: column; gap: 10rem; }
.ftr-form__title { color: #fffbfb; font-family: var(--font-main); font-size: 48rem; font-weight: var(--fw-medium); line-height: normal; }
.ftr-form__text { color: #fffbfb; font-family: var(--font-main); font-size: 18rem; line-height: normal; }
.ftr-form__inputs { width: 712rem; display: grid; gap: 16rem; grid-template-columns: repeat(3, 1fr); }
.ftr-form__inputs input[name=name] { grid-column: 1; grid-row: 1; }
.ftr-form__inputs input[name=phone] { grid-column: 2; grid-row: 1; }
.ftr-form__inputs input[name=email] { grid-column: 1 / 3; grid-row: 2; }
.ftr-form input[type=text], .ftr-form input[type=tel], .ftr-form input[type=email] {
  color: #fff;
  border-radius: 90rem;
  border: 1px solid #fff;
  text-align: center;
  height: 42rem;
  min-width: 0;
  background-color: transparent;
  font-family: var(--font-main);
  font-size: 18rem;
  outline: none;
}
.ftr-form input::placeholder { color: rgba(255, 255, 255, .85); }
.ftr-form input.is-invalid { border-color: var(--c-accent); }
.ftr-form__agree { grid-column: 1 / 3; grid-row: 3; position: relative; padding-left: 30rem; display: flex; gap: 10rem; color: #fff; font-family: var(--font-main); font-size: 18rem; }
.ftr-form__agree a { color: #fff; text-decoration: none; border-bottom: 1px solid; }
.ftr-form__agree input[type=checkbox] { width: 20rem; height: 20rem; margin: 2rem 0 0; flex-shrink: 0; position: absolute; left: 0; accent-color: var(--c-accent); }
.ftr-form__agree label { display: inline-block; text-align: left; }
.ftr-form__agree.is-invalid label { color: #ff9aa6; }
.ftr-form__button { grid-column: 3; grid-row: 3; align-items: center; display: flex; justify-content: flex-end; }
.ftr-form__state { grid-column: 1 / -1; font-family: var(--font-main); font-size: 18rem; line-height: 23rem; color: #fff; }
.ftr-form__state a { color: #fff; }

.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 46rem; }
.ftr__meta { width: 710rem; display: flex; flex-direction: column; gap: 46rem; }
.ftr__logo { color: #fff; }
.ftr__logo a { color: inherit; display: inline-block; }
.ftr__logo svg, .ftr__logo img { display: block; width: auto; height: 46rem; }
.ftr__contacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28rem; }
.ftr__contact { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; gap: 12rem; }
.ftr__contact--half { grid-column: span 1; }
.ftr__contact-title { color: #fff; font-family: var(--font-main); font-size: 16rem; line-height: 20rem; padding: 6rem 16rem; border-radius: 90rem; border: 1px solid #fff; }
.ftr__contact-value { color: #fff; font-family: var(--font-main); font-size: 16rem; line-height: 20rem; }
.ftr__contact-value a { color: #fff; text-decoration: none; }
.ftr__menu { width: 500rem; padding-top: 44rem; padding-bottom: 6rem; border-bottom: 1px solid; border-image: var(--line-grad) 1; }
.ftr__menu ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 20rem; grid-template-rows: repeat(7, auto); grid-auto-flow: column; }
.ftr__menu li { color: #fff; font-family: var(--font-main); font-size: 16rem; line-height: 20rem; }
.ftr__menu li.ftr__org { font-size: 14rem; display: flex; gap: 10rem; }
.ftr__menu a { color: #fff; text-decoration: none; }
.ftr__sub { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 32rem; }
.ftr__copy { width: 680rem; color: #fff; font-family: var(--font-main); font-size: 14rem; }
.ftr__copy-meta { display: none; gap: 10rem; }
.ftr__socials { width: 500rem; display: flex; gap: 20rem; }
.ftr__socials ul { min-width: 184rem; margin: 0; padding: 0; list-style: none; display: flex; gap: 8rem; }
.ftr__socials a, .ftr__socials svg, .ftr__socials img { display: block; text-decoration: none; }
.ftr__socials svg, .ftr__socials img { width: auto; height: 22rem; }

@media (max-width: 1199.98px) {
  .ftr { padding: 26rem 0; }
  .ftr-form { gap: 20rem; }
  .ftr-form__meta { width: 352rem; }
  .ftr-form__title { font-size: 28rem; }
  .ftr-form__inputs { width: 550rem; grid-template-columns: 180rem 180rem auto; }
  .ftr-form__agree { font-size: 15rem; line-height: 18rem; }
  .ftr__bottom { flex-direction: column; margin-top: 16rem; }
  .ftr__meta { gap: 22rem; }
  .ftr__menu { width: auto; padding-bottom: 12rem; }
  .ftr__menu ul { grid-template-rows: repeat(4, auto); grid-template-columns: 150rem 150rem auto; }
  .ftr__menu li.ftr__org { display: none; }
  .ftr__sub { flex-direction: column; gap: 16rem; margin-top: 0; }
  .ftr__copy { width: auto; font-size: 16rem; display: flex; align-items: center; gap: 20rem; }
  .ftr__copy-meta { display: flex; }
  .ftr__socials { width: auto; padding-right: 20rem; }
  .ftr__socials ul { min-width: 0; }
}
@media (min-width: 992px) and (max-width: 1199.98px) { .ftr .container { max-width: 924rem; } }
@media (max-width: 991.98px) {
  .ftr { padding: 34rem 0 18rem; border-radius: 40rem 40rem 0 0; }
  .ftr-form { flex-direction: row; align-items: flex-start; border-image: linear-gradient(90deg, #E84C61, #E84C61 80%, #00374D) 1; }
  .ftr-form__meta { width: 240rem; }
  .ftr-form__title { font-size: 18rem; }
  .ftr-form__text { font-size: 14rem; }
  .ftr-form__inputs { width: 420rem; gap: 8rem; grid-template-columns: 138rem 150rem auto; }
  .ftr-form input[type=text], .ftr-form input[type=tel], .ftr-form input[type=email] { font-size: 14rem; height: 28rem; }
  .ftr-form__agree { font-size: 12rem; line-height: 14rem; text-align: left; }
  .ftr-form__button { align-items: flex-end; }
  .ftr-form__button .btn { padding: 10rem 16rem; font-size: 16rem; }
  .ftr-form__state { font-size: 14rem; line-height: 18rem; }
  .ftr__menu li { font-size: 14rem; line-height: 18rem; }
  .ftr__contact-value { font-size: 14rem; line-height: 18rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .ftr .container { max-width: 720rem; }
  .ftr-form { padding-bottom: 0; }
  .ftr-form__button .btn { position: relative; top: -10rem; }
}
@media (max-width: 767.98px) {
  .ftr { border-radius: 30rem 30rem 0 0; }
  .ftr-form { flex-direction: column; align-items: center; }
  .ftr-form__meta { width: auto; text-align: center; }
  .ftr-form__title { font-size: 24rem; }
  .ftr-form__text { font-size: 18rem; }
  .ftr-form__inputs { width: auto; grid-template-columns: repeat(4, 1fr); }
  .ftr-form__inputs input[name=name] { grid-column: 2; }
  .ftr-form__inputs input[name=phone] { grid-column: 3; }
  .ftr-form__inputs input[name=email] { grid-column: 2 / 4; }
  .ftr-form__agree { font-size: 16rem; line-height: 18rem; text-align: center; grid-column: span 4; grid-row: 4; }
  .ftr-form__button { grid-column: span 4; grid-row: 3; justify-content: center; }
  .ftr__logo { display: none; }
  .ftr__meta { width: auto; }
  .ftr__contacts { grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid; border-image: var(--line-grad) 1; margin-bottom: 24rem; padding-bottom: 24rem; }
  .ftr__contact { align-items: center; }
  .ftr__menu { display: none; }
  .ftr__copy { order: 2; flex-direction: column; font-size: 12rem; gap: 10rem; }
  .ftr__socials { order: 1; }
}
@media (max-width: 575.98px) {
  .ftr-form__meta { gap: 4rem; }
  .ftr-form__title { font-size: 16rem; }
  .ftr-form__text { font-size: 10rem; }
  .ftr-form__inputs { grid-template-columns: repeat(4, max-content); justify-content: center; }
  .ftr-form__inputs input[name=name], .ftr-form__inputs input[name=phone] { width: 105rem; }
  .ftr-form input[type=text], .ftr-form input[type=tel], .ftr-form input[type=email] { font-size: 10rem; }
  .ftr-form__agree { font-size: 10rem; line-height: 12rem; max-width: 300rem; }
  .ftr-form__agree br { display: none; }
  .ftr-form__button .btn { padding: 4rem 12rem; font-size: 13rem; }
  .ftr-form__state { font-size: 10rem; line-height: 12rem; text-align: center; }
  .ftr__contacts { gap: 16rem; margin-bottom: 20rem; }
  .ftr__contact--half { order: 5; }
  .ftr__contact-title { font-size: 13rem; padding: 4rem 12rem; }
  .ftr__contact-value { font-size: 10rem; line-height: 12rem; text-align: center; }
  .ftr__copy { line-height: normal; font-size: 8rem; }
}

/* ---------- Баннер cookie ---------- */
.cookie {
  position: fixed;
  bottom: 10rem;
  left: 50%;
  margin-left: -510rem;
  width: 1020rem;
  padding: 20rem 36rem;
  background: #fff;
  border-radius: 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24rem;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.cookie.is-active { opacity: 1; visibility: visible; }
.cookie__text { font-family: var(--font-main); font-size: 18rem; line-height: 23rem; color: var(--c-head); }
.cookie__text a { color: var(--c-head); text-decoration: none; border-bottom: 1px solid; }
@media (max-width: 767.98px) {
  .cookie { flex-wrap: wrap; width: auto; left: 10rem; right: 10rem; margin-left: 0; padding: 12rem 20rem; gap: 14rem; }
  .cookie__text { font-size: 10rem; line-height: 12rem; text-align: center; width: 100%; }
}

/* =========================================================
   Модальные окна: заявка и «спасибо»
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); animation: modal-fade .3s ease; }
.modal__box {
  position: relative;
  width: 100%;
  max-width: 440rem;
  max-height: 100%;
  overflow-y: auto;
  border-radius: 30rem;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, .3);
  font-size: 18rem;
  text-align: center;
  color: #31333C;
  animation: modal-in .5s ease;
}
.modal__close { position: absolute; right: 20rem; top: 20rem; z-index: 1; border: 0; background: none; padding: 0; display: flex; }
.modal__close svg { width: 16rem; height: 16rem; }
.modal__wrapper { padding: 40rem 20rem; position: relative; }
.modal__title { font-weight: 700; font-size: 18rem; margin-bottom: 16rem; line-height: 140%; color: var(--c-text); text-align: center; }
.modal__text { margin: 30rem 0; }
.modal__logo { display: flex; justify-content: center; color: #333; }
.modal__logo svg { width: 170rem; height: auto; }
.modal .form-group { margin-bottom: 5rem; }
.modal .form-group input, .modal .form-group textarea, .modal .form-group select {
  font-size: 16rem;
  padding: 19rem;
  text-align: center;
  text-align-last: center;
  width: 100%;
  border: 0;
  background: transparent;
  border-bottom: 1px solid #ABAEB9;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.modal .form-group textarea { padding-top: 10rem; height: 92rem; resize: none; overflow: hidden; }
.modal .form-group.is-invalid input, .modal .form-group.is-invalid textarea { border-bottom-color: var(--c-accent); }
.modal .form-agreement { font-size: 12rem; line-height: 16rem; text-align: center; color: #31333C; margin: 20rem 0 0; }
.modal .form-agreement input { vertical-align: middle; margin: 0 4rem 0 0; accent-color: var(--c-accent); }
.modal .form-agreement a, .modal .form-privacy a { color: inherit; text-decoration: none; border-bottom: 1px solid; }
.modal .form-agreement.is-invalid { color: var(--c-accent); }
.modal .form-button { margin: 20rem 0; }
.modal .form-privacy { font-size: 12rem; line-height: 16rem; text-align: center; color: #31333C; }
.modal .form-state { font-size: 14rem; line-height: 20rem; margin-top: 12rem; }
.modal .form-state a { color: var(--c-accent); }
.modal__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 200rem;
  padding: 14rem 32rem;
  border: 0;
  border-radius: 80rem;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--font-main);
  font-weight: var(--fw-medium);
  font-size: 16rem;
  line-height: 20rem;
  text-transform: uppercase;
  transition: background-color .3s;
}
.modal__button:hover { background: #d43a50; }
@media (max-width: 992px) { .modal__box { font-size: 16rem; } }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: scale(.9) translateY(-20px); } }

/* =========================================================
   Карточка товара
   ========================================================= */
.product-items { --columns: 2; --gap: 8rem; gap: var(--gap); display: flex; flex-wrap: wrap; justify-content: center; }
.product-item {
  width: calc(100% / var(--columns) - var(--gap) + var(--gap) / var(--columns));
  padding: 4rem 4rem 10rem;
  background: #fff;
  border-radius: 29rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.product-item__area { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; border-radius: inherit; }
.product-item__media { position: relative; width: 100%; height: 140rem; background: #EEE; border-radius: 25rem; display: flex; justify-content: center; align-items: flex-end; margin-bottom: 8rem; }
.product-item__image { height: 136rem; display: flex; justify-content: center; align-items: flex-end; }
.product-item__image img, .product-item__image svg { height: auto; width: 100%; display: block; object-fit: contain; object-position: center bottom; }
.product-item__labels { position: absolute; z-index: 2; display: flex; flex-wrap: wrap; flex-direction: column; gap: 0; top: -6rem; right: -4rem; }
.product-item__label { padding: 4rem 12rem; background: #EEE; border-radius: 60rem; font-family: var(--font-main); font-size: 10rem; line-height: 13rem; color: #fff; white-space: nowrap; }
.product-item__label--new { background: var(--c-glacier); }
.product-item__label--hit { background: var(--c-accent); }
.product-item__label--massage, .product-item__label--med { background: var(--c-head); }
.product-item__label--out { background: var(--c-gray); }
.product-item__logo { position: absolute; top: 12rem; left: 12rem; }
.product-item__logo img { width: auto; max-width: 60rem; }
.product-item__guarantee { display: none; }
.product-item__attr { font-family: var(--font-main); font-size: 10rem; line-height: 12rem; color: var(--c-gray); letter-spacing: -.6px; text-align: center; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }
.product-item__media .product-item__attr { display: none; }
.product-item__meta { flex-grow: 1; display: flex; flex-direction: column; }
.product-item__price { font-family: var(--font-main); color: var(--c-dark); text-align: center; font-size: 18rem; font-weight: var(--fw-medium); line-height: 20rem; margin-bottom: 4rem; white-space: nowrap; }
.product-item__price--sale { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.product-item__price-old { text-decoration: line-through; }
.product-item__price-new { color: var(--c-accent); }
.product-item__attrs { padding: 0; margin: 0 0 12rem; display: flex; flex-direction: column; gap: 0; }
.product-item__buttons { margin-top: auto; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 6rem; }
.product-item__buttons .btn { position: relative; z-index: 2; padding: 3rem 8rem; font-size: 12rem; min-width: 106rem; justify-content: center; }
@media (min-width: 576px) {
  .product-items { --gap: 20rem; }
  .product-item { padding: 6rem 6rem 12rem; border-radius: 50rem; gap: 12rem; }
  .product-item__media { height: 200rem; border-radius: 46rem; margin-bottom: 0; }
  .product-item__image { height: 100%; }
  .product-item__image img, .product-item__image svg { width: auto; height: 100%; }
  .product-item__label { font-size: 16rem; line-height: 16rem; }
  .product-item__logo { top: 24rem; left: 22rem; }
  .product-item__logo img { width: 87rem; max-width: 87rem; }
  .product-item__attr { font-size: 14rem; line-height: 18rem; }
  .product-item__price { font-size: 22rem; line-height: 24rem; }
  .product-item__buttons { gap: 10rem; }
  .product-item__buttons .btn { min-width: 160rem; font-size: 16rem; padding: 7rem 24rem; }
}
@media (min-width: 768px) {
  .product-items { --gap: 10rem; }
  .product-item { padding: 10rem 10rem 12rem; gap: 20rem; border-radius: 70rem; }
  .product-item__media { flex-grow: 0; flex-shrink: 0; height: 273rem; border-radius: 60rem; width: auto; }
  .product-item__media .product-item__attr { display: flex; justify-content: flex-start; text-align: left; }
  .product-item__labels { top: -10rem; right: -10rem; }
  .product-item__absolute { position: absolute; left: 30rem; top: 26rem; min-height: 90rem; display: flex; flex-direction: column; width: calc(100% - 60rem); }
  .product-item__logo { position: relative; top: 0; left: 0; margin-top: auto; }
  .product-item__logo img { width: 100rem; max-width: 100rem; }
  .product-item__guarantee { display: block; color: var(--c-gray); font-family: var(--font-main); font-size: 14rem; font-weight: var(--fw-regular); line-height: normal; }
  .product-item__price { font-size: 26rem; line-height: 28rem; margin-bottom: 22rem; }
  .product-item__attrs { display: none; }
  .product-item__buttons .btn { font-size: 18rem; }
}
@media (min-width: 992px) {
  .product-items { --gap: 20rem; max-width: 760rem; margin: 0 auto; }
  .product-item { padding-bottom: 22rem; }
  .product-item__media { width: 100%; height: 350rem; }
  .product-item__absolute { min-height: 106rem; }
  .product-item__label { font-size: 18rem; line-height: 18rem; }
  .product-item__logo img { max-width: none; }
  .product-item__buttons .btn { min-width: 280rem; }
}
@media (min-width: 1200px) {
  .product-items { max-width: 1540rem; --columns: 4; }
}

/* ---------- Форма: состояние отправки ---------- */
.form-note { font-family: var(--font-main); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---------- Плавная прокрутка только там, где это не мешает ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Шапка на планшетной ширине: правки после проверки ---------- */
@media (min-width: 768px) and (max-width: 991px) {
  .scale-tablet .hdr__pills, .scale-multi .hdr__pills { gap: 6rem; }
  .scale-tablet .hdr__pills a, .scale-tablet .hdr__pills button,
  .scale-multi .hdr__pills a, .scale-multi .hdr__pills button { padding: 3rem 8rem; white-space: nowrap; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .scale-multi .hdr__city { display: none; }
}
.crumbs-old li { font-weight: 400; }