/* ==========================================================================
   Tauba Service — интернет-магазин благих дел
   Стили перенесены один-в-один из дизайн-прототипа (TaubaService Магазин)
   ========================================================================== */

:root {
  --ac: #0E5C4A;
  --ac-d: #0A4437;
  --ac-s: #EEF4F1;
  --acg: linear-gradient(115deg, #0E5C4A 0%, #0A4437 42%, #101613 100%);
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: #fff;
  color: #0F1512;
  font-family: Montserrat, system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ac); text-decoration: none }
a:hover { color: var(--ac-d) }
button, input, textarea, select { font-family: inherit }
input::placeholder, textarea::placeholder { color: #A8AEA9 }

@keyframes sheetUp   { from { transform: translateY(24px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes fadeIn    { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop       { 0% { transform: scale(1) } 45% { transform: scale(1.18) } 100% { transform: scale(1) } }
@keyframes riseIn    { from { transform: translateY(10px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes drawerIn  { from { transform: translateX(100%) } to { transform: translateX(0) } }
@keyframes drawerOut { from { transform: translateX(0) } to { transform: translateX(100%) } }
@keyframes scrimIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes scrimOut  { from { opacity: 1 } to { opacity: 0 } }
@keyframes menuIn    { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: translateY(0) } }
@keyframes menuOut   { from { opacity: 1; transform: translateY(0) } to { opacity: 0; transform: translateY(-10px) } }
@keyframes glassIn   { from { opacity: 0; transform: translateY(12px) scale(.97) } to { opacity: 1; transform: translateY(0) scale(1) } }
@keyframes sheen     { 0% { transform: translateX(-120%) } 100% { transform: translateX(320%) } }

[data-rail]::-webkit-scrollbar { display: none }

/* --------------------------------------------------------------------------
   Каркас страницы
   -------------------------------------------------------------------------- */

.shell { min-height: 100vh; display: flex; flex-direction: column; background: #fff }
.main { flex: 1 }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px) }

/* Заполняет ближайшего позиционированного предка — так же, как <image-slot> в прототипе */
.frame { position: absolute; inset: 0; overflow: hidden }
.frame img { width: 100%; height: 100%; display: block; object-fit: cover }

/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */

.hdr {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.7) 100%);
  backdrop-filter: blur(26px) saturate(200%);
  -webkit-backdrop-filter: blur(26px) saturate(200%);
  border-bottom: 1px solid rgba(232,230,225,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.hdr__in {
  max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px);
  height: 66px; display: flex; align-items: center; gap: clamp(10px, 2.5vw, 26px);
}

.brand { display: flex; align-items: center; gap: 9px; cursor: pointer; flex-shrink: 0 }
.brand__logo { width: 34px; height: 34px; display: block; object-fit: contain }
.brand__txt { display: flex; flex-direction: column; line-height: 1 }
.brand__a { font-size: 14px; font-weight: 700; letter-spacing: .14em }
.brand__b { font-size: 9px; font-weight: 500; letter-spacing: .34em; color: #7A827D; margin-top: 3px }

.nav { align-items: center; gap: 26px; margin-left: 14px }
.nav__l { font-size: 14px; font-weight: 500; color: #0F1512; cursor: pointer; transition: color .16s }
.nav__l:hover { color: var(--ac) }

.hdr__right { margin-left: auto; display: flex; align-items: center; gap: 8px }
.hdr__tel { flex-direction: column; align-items: flex-end; line-height: 1.15; margin-right: 6px; color: #0F1512 }
.hdr__tel:hover { color: #0F1512 }
.hdr__tel-k { font-size: 10px; font-weight: 500; letter-spacing: .06em; color: #7A827D; text-transform: uppercase }
.hdr__tel-v { font-size: 14px; font-weight: 600 }

.cart-btn {
  position: relative; height: 42px; min-width: 42px; padding: 0 14px; border-radius: 12px;
  border: 1px solid #E8E6E1; background: #fff; display: flex; align-items: center; gap: 8px;
  cursor: pointer; transition: border-color .16s, background .16s;
}
.cart-btn:hover { border-color: #0F1512 }
.cart-btn__n { font-size: 13px; font-weight: 700; animation: pop .3s ease }

.burger {
  height: 42px; width: 42px; border-radius: 12px; border: 1px solid #E8E6E1; background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}

.mmenu { border-top: 1px solid #E8E6E1; background: #fff; padding: 10px clamp(16px, 4vw, 32px) 20px }
.mmenu--in { animation: menuIn .26s cubic-bezier(.22, 1, .36, 1) }
.mmenu--out { animation: menuOut .22s ease forwards }
.mmenu__list { display: flex; flex-direction: column }
.mmenu__l { padding: 15px 2px; font-size: 16px; font-weight: 600; border-bottom: 1px solid #F2F1ED; cursor: pointer }
.mmenu__l:last-child { border-bottom: none }
.mmenu__tel {
  display: block; margin-top: 16px; padding: 15px; text-align: center; border-radius: 12px;
  background: var(--ac-s); color: var(--ac); font-size: 16px; font-weight: 600;
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; font-weight: 600; white-space: nowrap;
}

/* Основная — градиент со «съездом» фона по ховеру */
.btn-p {
  background-color: var(--ac); background-image: var(--acg);
  background-size: 240% 100%; background-position: 0 0; color: #fff;
  transition: background-position .6s cubic-bezier(.4, 0, .2, 1), box-shadow .3s, transform .12s;
}
.btn-p:hover { background-position: 100% 0; color: #fff; box-shadow: 0 14px 30px -16px rgba(15,21,18,.6) }
.btn-p:active { transform: translateY(1px) }
.btn-p--sm:hover { box-shadow: 0 12px 26px -14px rgba(15,21,18,.6) }

/* Контурная */
.btn-o {
  border: 1px solid #E8E6E1; background: #fff; color: #0F1512;
  transition: border-color .16s, background .16s, color .16s;
}
.btn-o:hover { border-color: #0F1512 }

/* Контурная в акцентном цвете */
.btn-a {
  border: 1px solid var(--ac); background: #fff; color: var(--ac);
  transition: background .18s, color .18s, border-color .18s;
}
.btn-a:hover { background-image: var(--acg); border-color: transparent; color: #fff }

/* Размеры */
.s-56 { height: 56px; border-radius: 14px; font-size: 16px }
.s-58 { height: 58px; border-radius: 14px; font-size: 16px }
.s-52 { height: 52px; border-radius: 13px; font-size: 15px }
.s-48 { height: 48px; border-radius: 12px; font-size: 15px }
.s-46 { height: 46px; border-radius: 12px; font-size: 14px }
.s-40 { height: 40px; border-radius: 11px; font-size: 13px }
.pad-26 { padding: 0 26px }
.pad-24 { padding: 0 24px }
.pad-22 { padding: 0 22px }
.pad-20 { padding: 0 20px }
.pad-15 { padding: 0 15px }

/* --------------------------------------------------------------------------
   Поля ввода
   -------------------------------------------------------------------------- */

.field {
  width: 100%; border-radius: 14px; border: 1px solid #E8E6E1; background: #fff;
  font-size: 16px; color: #0F1512; outline: none;
  transition: border-color .16s, box-shadow .16s;
}
.field:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-s) }
.field--h56 { height: 56px; padding: 0 16px }
.field--h54 { height: 54px; padding: 0 16px }
.field--area { padding: 14px 16px; line-height: 1.5; resize: vertical }
.field--area-sm { padding: 13px 16px; line-height: 1.5; resize: vertical }

.search { position: relative; display: flex; align-items: center }
.search__icon { position: absolute; left: 16px; pointer-events: none }
.search__in { padding-left: 44px }

.lbl { display: flex; flex-direction: column; gap: 7px }
.lbl__t { font-size: 13px; font-weight: 600; color: #4C5450 }
.lbl__opt { font-weight: 400; color: #A8AEA9 }
.form-err { margin: 0; font-size: 13px; font-weight: 600; color: #C2453A }

/* Кнопка на время отправки заявки */
@keyframes spin { to { transform: rotate(360deg) } }
.btn-load { gap: 11px; cursor: progress }
.btn-load:hover { background-position: 0 0; box-shadow: none }
.btn-load:active { transform: none }
.spinner {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s } }
.form-note { margin: 0; font-size: 12px; line-height: 1.6; color: #A8AEA9; text-align: center; text-wrap: pretty }

/* --------------------------------------------------------------------------
   Типографика секций
   -------------------------------------------------------------------------- */

.h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -.02em }
.h1 { margin: 0; font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: -.025em }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.sec-head__r { display: flex; align-items: center; gap: 14px }
.sec-more { font-size: 14px; font-weight: 600; color: var(--ac); cursor: pointer; white-space: nowrap }
.sub { margin: 8px 0 0; font-size: 15px; color: #7A827D }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #7A827D }
.crumbs span[data-nav] { cursor: pointer }
.crumbs__cur { color: #0F1512 }

.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
  background: var(--ac-s); color: var(--ac); font-size: 12px; font-weight: 600; letter-spacing: .01em;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ac) }

/* --------------------------------------------------------------------------
   Главная — герой
   -------------------------------------------------------------------------- */

.hero { background: #FAF9F7; border-bottom: 1px solid #E8E6E1 }
.hero__in {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 32px) clamp(32px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.hero__h1 {
  margin: 18px 0 0; font-size: clamp(30px, 5.2vw, 52px); line-height: 1.08;
  font-weight: 700; letter-spacing: -.025em; text-wrap: balance;
}
.hero__p {
  margin: 18px 0 0; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6;
  color: #4C5450; max-width: 30em; text-wrap: pretty;
}
.hero__form { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap }
.hero__search { flex: 1 1 260px }
.hero__marks { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 20px }
.mark { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: #4C5450 }
.hero__pic { position: relative; aspect-ratio: 4/3; min-height: 240px }
.hero__pic img { border-radius: 22px }

/* --------------------------------------------------------------------------
   Главная — секции
   -------------------------------------------------------------------------- */

.sec { max-width: 1200px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) clamp(16px, 4vw, 32px) 0 }
.sec--60 { padding-top: clamp(32px, 5vw, 60px) }
.sec--68 { padding-top: clamp(36px, 5vw, 68px) }

/* Лента направлений: четыре плитки на экран, остальные — прокруткой.
   Сеткой они ломались в неровную вторую строку с одиноким блоком.
   Селектор удвоен, чтобы перебить базовые .rail ниже по файлу. */
.rail.cats {
  --cat-gap: clamp(10px, 1.4vw, 16px);
  --per-view: 4;
  gap: var(--cat-gap);
  /* поля под подъём плитки по ховеру — иначе overflow-x срежет тень */
  margin-top: 14px;
  padding: 6px 0 10px;
}
.cat {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--cat-gap)) / var(--per-view));
  scroll-snap-align: start;
  cursor: pointer; border: 1px solid #E8E6E1; border-radius: 16px; overflow: hidden; background: #fff;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
@media (max-width: 1080px) { .rail.cats { --per-view: 3 } }
@media (max-width: 700px) { .rail.cats { --per-view: 2 } }
.cat:hover { box-shadow: 0 14px 30px -20px rgba(15,21,18,.4); transform: translateY(-2px); border-color: #DAD7D0 }
.cat__pic { position: relative; aspect-ratio: 1/1; background: #FAF9F7 }
.cat__body { padding: 12px 13px 14px }
.cat__name { font-size: 14px; font-weight: 600; line-height: 1.3; text-wrap: pretty }
.cat__price { margin-top: 5px; font-size: 12px; color: #7A827D }

.card {
  display: flex; flex-direction: column; border: 1px solid #E8E6E1; border-radius: 20px;
  overflow: hidden; background: #fff;
  transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1), border-color .3s;
}
.card:hover { box-shadow: 0 24px 50px -28px rgba(15,21,18,.5); transform: translateY(-4px); border-color: #DCD9D2 }
.card__pic { position: relative; aspect-ratio: 4/3; background: #FAF9F7; cursor: pointer; overflow: hidden }
.card__zoom { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.4, 0, .2, 1) }
.card__pic:hover .card__zoom { transform: scale(1.06) }
.card__tag {
  position: absolute; top: 12px; left: 12px; padding: 6px 11px; border-radius: 999px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #0F1512; pointer-events: none;
}
.card__body { padding: 18px; display: flex; flex-direction: column; flex: 1; gap: 9px }
.card__name { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; cursor: pointer; text-wrap: pretty }
.card__teaser { margin: 0; font-size: 13px; line-height: 1.55; color: #7A827D; text-wrap: pretty }
.card__foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 10px }
.card__price-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 2px; border-bottom: 1px solid #F2F1ED;
}
.card__price { font-size: 22px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap }
.card__with { font-size: 11px; font-weight: 500; color: #A8AEA9; white-space: nowrap }
.card__btns { display: flex; gap: 8px }
.card__order { flex: 1 }
.card__add {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; border: 1px solid #E8E6E1;
  background: #fff; color: #0F1512; font-size: 20px; font-weight: 500; cursor: pointer;
  transition: border-color .18s, background .18s;
}
.card__add:hover { border-color: var(--ac); background: var(--ac-s) }
.card__more {
  height: 38px; border-radius: 11px; border: 1px solid #E8E6E1; background: #fff; color: #4C5450;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .18s, color .18s;
}
.card__more:hover { border-color: #0F1512; color: #0F1512 }

/* Лента «Чаще всего заказывают» — четыре карточки на экран, остальные прокруткой.
   Селектор удвоен, чтобы перебить базовые .rail ниже по файлу. */
.rail.popular {
  --pop-gap: clamp(12px, 1.6vw, 20px);
  --per-view: 4;
  gap: var(--pop-gap);
  /* поля под подъём карточки по ховеру — иначе overflow-x срежет тень */
  margin-top: 14px;
  padding: 6px 0 12px;
}
.rail.popular .card {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--pop-gap)) / var(--per-view));
  scroll-snap-align: start;
}
@media (max-width: 1080px) { .rail.popular { --per-view: 3 } }
@media (max-width: 900px) { .rail.popular { --per-view: 2 } }
/* на телефоне карточка с кнопками не влезает в половину экрана — показываем
   одну и краешек следующей, чтобы прокрутка была очевидна */
@media (max-width: 700px) { .rail.popular { --per-view: 1.15 } }

/* Шаги «как оформить заказ» */
.steps { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(12px, 1.6vw, 20px) }
.step { padding: 24px; border-radius: 18px; background: #FAF9F7; border: 1px solid #E8E6E1 }
.step__n {
  width: 34px; height: 34px; border-radius: 10px; background-image: var(--acg); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700;
}
.step__t { margin: 14px 0 6px; font-size: 17px; font-weight: 600 }
.step__p { margin: 0; font-size: 14px; line-height: 1.6; color: #4C5450; text-wrap: pretty }

/* Доп. услуги */
.extras { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(12px, 1.6vw, 20px) }
.extras--page { margin-top: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(12px, 1.6vw, 18px) }
.extra {
  display: flex; flex-direction: column; padding: 24px; border-radius: 18px;
  border: 1px solid #E8E6E1; background: #fff; transition: border-color .2s;
}
.extra:hover { border-color: #DAD7D0 }
.extra__t { margin: 0; font-size: 18px; font-weight: 600 }
.extra__p { margin: 10px 0 20px; font-size: 14px; line-height: 1.6; color: #4C5450; text-wrap: pretty }
.extra__btn { margin-top: auto; align-self: flex-start; height: 46px; padding: 0 20px; border-radius: 12px; font-size: 15px }
.extra__btn--page { align-self: stretch; height: 48px; padding: 0; border-radius: 12px; font-size: 15px }

/* Видео-отчёты */
.vid-head__l { max-width: 34em }
.vid-head__p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: #7A827D; max-width: 34em; text-wrap: pretty }
.vid-head__r { display: flex; align-items: center; gap: 10px }
.vid-count {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  background: var(--ac-s); color: var(--ac); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.rail-nav { display: flex; gap: 6px }
.rail-btn {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid #E8E6E1; background: #fff;
  color: #0F1512; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .18s, background .18s, opacity .18s;
}
.rail-btn:hover { border-color: var(--ac); background: var(--ac-s) }
.rail-btn:disabled { cursor: default; opacity: .35 }
.rail-btn:disabled:hover { border-color: #E8E6E1; background: #fff }
.rail {
  margin-top: 22px; display: flex; gap: clamp(12px, 1.6vw, 18px); overflow-x: auto;
  scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding-bottom: 4px;
  /* иначе догрузка картинок/метаданных уводит ленту с первой карточки */
  overflow-anchor: none;
}
.vid {
  position: relative; flex: 0 0 clamp(210px, 58vw, 250px); scroll-snap-align: start;
  border: 1px solid #E8E6E1; border-radius: 18px; overflow: hidden; background: #101613; cursor: pointer;
  transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1), border-color .3s;
}
.vid:hover { box-shadow: 0 24px 50px -28px rgba(15,21,18,.5); transform: translateY(-4px); border-color: #DCD9D2 }
.vid video { width: 100%; aspect-ratio: 3/4; display: block; object-fit: cover; background: #101613; pointer-events: none }
.vid__ov {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(15,21,18,.05) 40%, rgba(15,21,18,.5) 100%);
  transition: background .3s;
}
.vid:hover .vid__ov { background: linear-gradient(180deg, rgba(15,21,18,.15) 40%, rgba(15,21,18,.6) 100%) }
.vid__play {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -12px rgba(15,21,18,.7);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.vid:hover .vid__play { transform: scale(1.09) }

/* Отзывы */
.reviews-sec { margin-top: clamp(36px, 5vw, 68px); background: #FAF9F7; border-top: 1px solid #E8E6E1; border-bottom: 1px solid #E8E6E1 }
.reviews-sec__in { max-width: 1200px; margin: 0 auto; padding: clamp(32px, 5vw, 60px) clamp(16px, 4vw, 32px) }
.reviews { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(12px, 1.6vw, 18px) }
.review { margin: 0; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid #E8E6E1 }
.review__stars { color: #B08A3E; font-size: 14px; letter-spacing: .14em }
.review__p { margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: #2A312D; text-wrap: pretty }

/* О нас + FAQ (две колонки на главной) */
.about-faq {
  max-width: 1200px; margin: 0 auto; padding: clamp(36px, 5vw, 68px) clamp(16px, 4vw, 32px) 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 4vw, 56px); align-items: start;
}
.about__p { margin: 16px 0 0; font-size: 16px; line-height: 1.7; color: #4C5450; text-wrap: pretty }
.about__p + .about__p { margin-top: 14px }
.tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px }
.tag { padding: 9px 15px; border-radius: 999px; background: var(--ac-s); color: var(--ac); font-size: 13px; font-weight: 600 }

.faq { margin-top: 18px; border-top: 1px solid #E8E6E1 }
.faq--page { margin-top: 20px }
.faq__i { border-bottom: 1px solid #E8E6E1 }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 2px; cursor: pointer }
.faq--page .faq__q { padding: 19px 2px }
.faq__qt { font-size: 15px; font-weight: 600; line-height: 1.4; text-wrap: pretty }
.faq--page .faq__qt { font-size: 16px }
.faq__sign {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #FAF9F7; color: var(--ac);
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600;
}
.faq--page .faq__sign { width: 24px; height: 24px; font-size: 16px }
.faq__a { margin: 0; padding: 0 2px 18px; font-size: 14px; line-height: 1.65; color: #4C5450; text-wrap: pretty; animation: fadeIn .16s ease }
.faq--page .faq__a { padding-bottom: 20px; font-size: 15px; line-height: 1.7 }
.faq__i[data-open="0"] .faq__a { display: none }

/* --------------------------------------------------------------------------
   Каталог
   -------------------------------------------------------------------------- */

.cat-head { max-width: 1200px; margin: 0 auto; padding: 20px clamp(16px, 4vw, 32px) 0 }
.cat-head__h1 { margin: 14px 0 0; font-size: clamp(26px, 4vw, 38px); font-weight: 700; letter-spacing: -.025em }
.cat-search { margin-top: 22px }
.cat-search .field { height: 52px; padding: 0 48px 0 44px }
.search__clear {
  position: absolute; right: 8px; width: 34px; height: 34px; border-radius: 10px; border: none;
  background: #F2F1ED; color: #4C5450; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: background .16s;
}
.search__clear:hover { background: #E4E2DC }

.filters { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip {
  height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
  border: 1px solid #E8E6E1; background: #fff; color: #0F1512;
}
.chip--on { border-color: var(--ac); background-image: var(--acg); color: #fff }
.sort { display: flex; align-items: center; gap: 8px }
.sort__l { font-size: 13px; color: #7A827D }
.sort select {
  height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid #E8E6E1; background: #fff;
  font-size: 14px; font-weight: 500; color: #0F1512; cursor: pointer; outline: none;
}
.cat-grid {
  max-width: 1200px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 32px) 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(12px, 1.6vw, 20px);
}
.empty { max-width: 1200px; margin: 0 auto; padding: 60px clamp(16px, 4vw, 32px); text-align: center }
.empty__t { margin: 0; font-size: 17px; font-weight: 600 }
.empty__p { margin: 8px 0 20px; font-size: 15px; line-height: 1.6; color: #7A827D; text-wrap: pretty }
.empty__btn { height: 48px; padding: 0 22px; border-radius: 12px; font-size: 15px }

/* --------------------------------------------------------------------------
   Карточка услуги
   -------------------------------------------------------------------------- */

.pr-crumbs { max-width: 1200px; margin: 0 auto; padding: 20px clamp(16px, 4vw, 32px) 0 }
.pr {
  max-width: 1200px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 32px) 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 3.5vw, 48px); align-items: start;
}
.pr__pic { position: relative; aspect-ratio: 4/3; background: #FAF9F7; border-radius: 20px; overflow: hidden; border: 1px solid #E8E6E1 }
.pr__grp { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ac) }
.pr__h1 { margin: 10px 0 0; font-size: clamp(26px, 4vw, 40px); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance }
.pr__price-row { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.pr__price { font-size: clamp(26px, 4vw, 34px); font-weight: 700; letter-spacing: -.02em }
.pr__stock {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--ac-s); color: var(--ac); font-size: 13px; font-weight: 600;
}
.pr__p { margin: 18px 0 0; font-size: 16px; line-height: 1.7; color: #4C5450; text-wrap: pretty }
.pr__p--note { margin-top: 12px }
.pr__p--tail { margin-top: 20px }
.pr__block { margin-top: 22px }
.pr__block-t { margin: 0; font-size: 16px; font-weight: 700 }
.pr__ul { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px }
.pr__li { display: flex; gap: 11px; font-size: 15px; line-height: 1.6; color: #2A312D; text-wrap: pretty }
.pr__bullet { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--ac); margin-top: 9px }
.pr__cta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px }
.pr__order { flex: 1 1 220px }
.pr__add { flex: 0 1 auto; height: 56px; padding: 0 22px; border-radius: 14px; font-size: 15px }
.pr__wa {
  flex: 1 1 100%; height: 52px; border-radius: 14px; border: 1px solid #E8E6E1; background: #fff;
  color: #0F1512; font-size: 15px; font-weight: 600; display: flex; align-items: center;
  justify-content: center; gap: 9px; transition: border-color .18s, background .18s;
}
.pr__wa:hover { border-color: var(--ac); background: var(--ac-s); color: #0F1512 }
.pr__pay { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: #7A827D; text-wrap: pretty }
.pr__trust {
  margin-top: 26px; padding: 20px; border-radius: 16px; background: #FAF9F7; border: 1px solid #E8E6E1;
  display: flex; flex-direction: column; gap: 12px;
}
.pr__trust-i { display: flex; gap: 11px }
.pr__trust-i svg { flex-shrink: 0; margin-top: 2px }
.pr__trust-i span { font-size: 14px; line-height: 1.55; color: #2A312D }
.pr__facts { margin-top: 22px; padding: 22px; border-radius: 16px; background: var(--ac-s) }
.pr__facts-t { margin: 0; font-size: 16px; font-weight: 700; color: var(--ac) }
.pr__facts-ol { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px }
.pr__fact-n {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--ac);
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.pr__specs-t { margin: 28px 0 0; font-size: 18px; font-weight: 700 }
.pr__specs { margin: 12px 0 0; display: flex; flex-direction: column }
.pr__spec { display: flex; justify-content: space-between; gap: 16px; padding: 12px 2px; border-bottom: 1px solid #F2F1ED }
.pr__spec dt { font-size: 14px; color: #7A827D }
.pr__spec dd { margin: 0; font-size: 14px; font-weight: 600; text-align: right }

.rel-h2 { margin: 0; font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; letter-spacing: -.02em }
.rel { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(12px, 1.6vw, 18px) }
.relc {
  display: flex; flex-direction: column; border: 1px solid #E8E6E1; border-radius: 18px;
  overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s;
}
.relc:hover { box-shadow: 0 16px 36px -22px rgba(15,21,18,.45); transform: translateY(-3px) }
.relc__pic { position: relative; aspect-ratio: 4/3; background: #FAF9F7; cursor: pointer }
.relc__body { padding: 15px; display: flex; flex-direction: column; flex: 1; gap: 8px }
.relc__name { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; cursor: pointer; text-wrap: pretty }
.relc__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px }
.relc__price { font-size: 17px; font-weight: 700; white-space: nowrap; flex-shrink: 0 }

/* --------------------------------------------------------------------------
   Оформление / Спасибо / Инфо-страницы
   -------------------------------------------------------------------------- */

.narrow { max-width: 560px; margin: 0 auto; padding: 26px clamp(16px, 4vw, 32px) 0 }
.back { font-size: 14px; font-weight: 500; color: #7A827D; cursor: pointer }
.co__h1 { margin: 14px 0 0; font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: -.025em }
.co__p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: #7A827D; text-wrap: pretty }
.co__sum { margin-top: 22px; padding: 16px; border-radius: 16px; background: #FAF9F7; border: 1px solid #E8E6E1 }
.co__row { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: 14px }
.co__row span:first-child { color: #4C5450 }
.co__row span:last-child { font-weight: 600; white-space: nowrap }
.co__total { margin-top: 10px; padding-top: 12px; border-top: 1px solid #E8E6E1; display: flex; justify-content: space-between; align-items: center }
.co__total-k { font-size: 14px; font-weight: 600 }
.co__total-v { font-size: 20px; font-weight: 700 }
.co__form { margin-top: 20px; display: flex; flex-direction: column; gap: 14px }

.thanks { max-width: 560px; margin: 0 auto; padding: clamp(40px, 8vw, 90px) clamp(16px, 4vw, 32px); text-align: center; animation: riseIn .3s ease }
.thanks__ic { width: 68px; height: 68px; margin: 0 auto; border-radius: 50%; background: var(--ac-s); display: flex; align-items: center; justify-content: center }
.thanks__h1 { margin: 22px 0 0; font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: -.025em }
.thanks__p { margin: 14px 0 0; font-size: 17px; line-height: 1.65; color: #4C5450; text-wrap: pretty }
.thanks__ph { margin: 14px 0 0; font-size: 15px; color: #7A827D }
.thanks__ph b { font-weight: 600; color: #0F1512 }
.thanks__cta { margin-top: 28px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }

.page { max-width: 840px; margin: 0 auto; padding: 26px clamp(16px, 4vw, 32px) 0 }
.page__body { margin-top: 18px }
.page__p { margin: 16px 0 0; font-size: 17px; line-height: 1.75; color: #4C5450; text-wrap: pretty }
.page__body .page__p:first-child { margin-top: 0 }
.page__lead { margin: 10px 0 0; font-size: 16px; line-height: 1.65; color: #4C5450; max-width: 34em; text-wrap: pretty }
.page__pic { margin-top: 24px; position: relative; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden; border: 1px solid #E8E6E1; background: #FAF9F7 }

.contacts { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px }
.ccard { padding: 24px; border-radius: 18px; border: 1px solid #E8E6E1; background: #fff }
.ccard__k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #7A827D }
.ccard__tel { display: block; margin-top: 10px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #0F1512 }
.ccard__socials { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px }
.ccard__soc { padding: 10px 16px; border-radius: 999px; background: var(--ac-s); color: var(--ac); font-size: 14px; font-weight: 600 }
.ccard__addr { margin: 10px 0 0; font-size: 16px; line-height: 1.6; font-weight: 600 }
.ccard__hours { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: #4C5450 }

/* --------------------------------------------------------------------------
   Подвал
   -------------------------------------------------------------------------- */

.ftr { margin-top: clamp(40px, 6vw, 80px); background: #0F1512; color: #fff }
.ftr__in {
  max-width: 1200px; margin: 0 auto; padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 32px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(24px, 3vw, 40px);
}
.ftr__brand { display: flex; align-items: center; gap: 9px }
.ftr__brand-b { color: rgba(255,255,255,.55) }
.ftr__about { margin: 16px 0 0; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.6); max-width: 26em; text-wrap: pretty }
.ftr__tel { display: inline-block; margin-top: 16px; font-size: 18px; font-weight: 700; color: #fff }
.ftr__tel:hover { color: #fff }
.ftr__k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45) }
.ftr__list { margin-top: 14px; display: flex; flex-direction: column; gap: 9px }
.ftr__l { font-size: 14px; color: rgba(255,255,255,.75); cursor: pointer; transition: color .16s; width: fit-content }
.ftr__l:hover { color: #fff }
.ftr__l--gap { margin-top: 6px }
.ftr__addr { margin: 14px 0 0; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.75) }
.ftr__socials { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px }
.ftr__soc { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 13px; font-weight: 500 }
.ftr__soc:hover { color: #fff }
.ftr__bottom { border-top: 1px solid rgba(255,255,255,.1) }
.ftr__bottom-in {
  max-width: 1200px; margin: 0 auto; padding: 18px clamp(16px, 4vw, 32px);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: 12px; color: rgba(255,255,255,.4);
}

/* --------------------------------------------------------------------------
   Мобильная навигация и липкая панель
   -------------------------------------------------------------------------- */

.mnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
  display: none; grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.86) 100%);
  backdrop-filter: blur(26px) saturate(200%); -webkit-backdrop-filter: blur(26px) saturate(200%);
  border-top: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 -1px 0 rgba(15,21,18,.05), 0 -18px 40px -26px rgba(15,21,18,.4), inset 0 1px 0 rgba(255,255,255,.9);
  padding-bottom: env(safe-area-inset-bottom);
}
.mnav__b {
  position: relative; height: 60px; border: none; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; color: #7A827D; transition: color .18s, transform .12s;
}
.mnav__b--on { color: var(--ac) }
.mnav__b span { font-size: 10px; font-weight: 600; letter-spacing: .01em }
.mnav__b--wa:active { transform: scale(.94) }
.mnav__n {
  position: absolute; top: 8px; left: calc(50% + 7px); min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background-image: var(--acg); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; animation: pop .3s ease;
}
.mnav-pad { height: calc(60px + env(safe-area-inset-bottom)) }

.sbar {
  position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 70;
  padding: 10px clamp(12px, 4vw, 20px); background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  border-top: 1px solid #E8E6E1; display: none; gap: 10px; align-items: center; animation: riseIn .24s ease;
}
@media (max-width: 899px) {
  .mnav { display: grid }
  .sbar { display: flex }
}
.sbar__go { height: 52px; padding: 0 24px; border-radius: 14px; font-size: 16px }
.sbar__l { flex: 1; min-width: 0 }
.sbar__k { font-size: 12px; color: #7A827D }
.sbar__v { font-size: 17px; font-weight: 700; letter-spacing: -.01em }

/* --------------------------------------------------------------------------
   Оверлеи
   -------------------------------------------------------------------------- */

/* Модалка WhatsApp */
.wa-scrim {
  position: fixed; inset: 0; z-index: 110; background: rgba(15,21,18,.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 5vw, 32px); animation: fadeIn .2s ease;
}
.wa-box {
  position: relative; width: 100%; max-width: 400px; overflow: hidden; border-radius: 26px;
  border: 1px solid rgba(255,255,255,.7);
  background: linear-gradient(160deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.97) 60%);
  backdrop-filter: blur(30px) saturate(200%); -webkit-backdrop-filter: blur(30px) saturate(200%);
  box-shadow: 0 32px 70px -30px rgba(15,21,18,.55), inset 0 1px 0 rgba(255,255,255,.95);
  padding: 28px 24px 22px; text-align: center; animation: glassIn .34s cubic-bezier(.22, 1, .36, 1);
}
.wa-box__sheen {
  position: absolute; top: 0; left: 0; width: 38%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  pointer-events: none; animation: sheen 1.5s cubic-bezier(.4, 0, .2, 1) .15s both;
}
.wa-box__ic {
  position: relative; width: 62px; height: 62px; margin: 0 auto; border-radius: 50%;
  background: var(--ac-s); border: 1px solid rgba(255,255,255,.8);
  display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.wa-box__h2 { position: relative; margin: 18px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em }
.wa-box__p { position: relative; margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: #4C5450; text-wrap: pretty }
.wa-box__ph { position: relative; margin: 10px 0 0; font-size: 14px; font-weight: 600; color: #0F1512 }
.wa-box__cta { position: relative; margin-top: 22px; display: flex; flex-direction: column; gap: 9px }
.wa-box__go { height: 54px; border-radius: 15px; font-size: 16px; gap: 9px; box-shadow: 0 14px 30px -16px rgba(15,21,18,.55) }
.wa-box__stay {
  height: 50px; border-radius: 15px; border: 1px solid rgba(15,21,18,.12); background: rgba(255,255,255,.6);
  color: #4C5450; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .18s, color .18s;
}
.wa-box__stay:hover { background: #fff; color: #0F1512 }

/* Лайтбокс видео */
.lb {
  position: fixed; inset: 0; z-index: 100; background: rgba(9,13,11,.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: clamp(12px, 3vw, 28px); animation: fadeIn .2s ease;
}
.lb__box { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(560px, 100%); width: 100% }
.lb__video { width: 100%; max-height: 74vh; border-radius: 18px; background: #000; display: block; animation: riseIn .28s cubic-bezier(.22, 1, .36, 1) }
.lb__bar { display: flex; align-items: center; gap: 10px }
.lb__btn {
  width: 46px; height: 46px; border-radius: 13px; border: 1px solid rgba(255,255,255,.24);
  background: transparent; color: #fff; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: background .18s, border-color .18s;
}
.lb__btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5) }
.lb__pos { min-width: 64px; text-align: center; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.75) }
.lb__close {
  margin-left: 6px; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px;
  border-radius: 13px; border: 1px solid rgba(255,255,255,.24); background: transparent; color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: background .18s, border-color .18s;
}
.lb__close:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5) }

/* Корзина-шторка */
.dr-scrim { position: fixed; inset: 0; z-index: 95; background: rgba(15,21,18,.45); display: flex; justify-content: flex-end }
.dr-scrim--in { animation: scrimIn .28s ease }
.dr-scrim--out { animation: scrimOut .28s ease forwards }
.dr {
  width: min(430px, 100%); height: 100%; background: #fff; display: flex; flex-direction: column;
  box-shadow: -24px 0 60px -30px rgba(15,21,18,.6);
}
.dr--in { animation: drawerIn .36s cubic-bezier(.22, 1, .36, 1) }
.dr--out { animation: drawerOut .28s cubic-bezier(.4, 0, 1, 1) forwards }
.dr__head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px clamp(16px, 4vw, 24px); border-bottom: 1px solid #E8E6E1;
}
.dr__h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em }
.dr__sub { margin: 4px 0 0; font-size: 13px; color: #7A827D }
.dr__close {
  flex-shrink: 0; display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px;
  border-radius: 12px; border: 1px solid #E8E6E1; background: #fff; color: #4C5450; font-size: 14px;
  font-weight: 600; cursor: pointer; transition: border-color .18s, color .18s, background .18s;
}
.dr__close:hover { border-color: #0F1512; color: #0F1512; background: #FAF9F7 }
.dr__body { flex: 1; overflow: auto; padding: 8px clamp(16px, 4vw, 24px) }
.dr__row { display: flex; gap: 13px; padding: 16px 0; border-bottom: 1px solid #F2F1ED }
.dr__pic { position: relative; width: 66px; height: 66px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: #FAF9F7; border: 1px solid #E8E6E1 }
.dr__info { flex: 1; min-width: 0 }
.dr__top { display: flex; align-items: flex-start; gap: 10px }
.dr__name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.35; text-wrap: pretty }
.dr__rm { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: #B6BCB8; cursor: pointer; transition: color .16s }
.dr__rm:hover { color: #C2453A }
.dr__qty-row { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px }
.dr__qty { display: flex; align-items: center; gap: 4px }
.dr__qb { width: 34px; height: 34px; border-radius: 10px; border: 1px solid #E8E6E1; background: #fff; font-size: 16px; cursor: pointer; transition: border-color .16s }
.dr__qb:hover { border-color: #0F1512 }
.dr__qn { min-width: 26px; text-align: center; font-size: 15px; font-weight: 600 }
.dr__sum { font-size: 16px; font-weight: 700; white-space: nowrap }
.dr__empty { padding: 56px 20px; text-align: center }
.dr__empty-t { margin: 0; font-size: 17px; font-weight: 600 }
.dr__empty-p { margin: 8px 0 22px; font-size: 15px; line-height: 1.6; color: #7A827D; text-wrap: pretty }
.dr__foot {
  flex-shrink: 0; padding: 18px clamp(16px, 4vw, 24px) calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid #E8E6E1; background: #FAF9F7;
}
.dr__total { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.dr__total-k { font-size: 15px; font-weight: 600 }
.dr__total-v { font-size: 25px; font-weight: 700; letter-spacing: -.02em }
.dr__go { margin-top: 14px; width: 100% }
.dr__note { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: #7A827D; text-align: center; text-wrap: pretty }

/* Нижняя шторка с формой заявки */
.sh-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(15,21,18,.42); display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .18s ease }
.sh {
  width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; background: #fff;
  border-radius: 22px 22px 0 0; padding: 22px clamp(18px, 4vw, 26px) calc(26px + env(safe-area-inset-bottom));
  animation: sheetUp .26s cubic-bezier(.22, 1, .36, 1);
}
.sh__grip { width: 38px; height: 4px; border-radius: 2px; background: #E8E6E1; margin: 0 auto 18px }
.sh__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px }
.sh__h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; text-wrap: pretty }
.sh__sub { margin: 6px 0 0; font-size: 14px; color: #7A827D }
.sh__close {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; border: 1px solid #E8E6E1;
  background: #fff; color: #7A827D; cursor: pointer;
}
.sh__form { margin-top: 20px; display: flex; flex-direction: column; gap: 12px }

/* --------------------------------------------------------------------------
   Переключатели десктоп/мобайл — точка перелома прототипа: ширина окна < 900px.
   Идут последними, чтобы перекрывать display у самих компонентов (.burger и др.)
   -------------------------------------------------------------------------- */

.only-desk.only-desk { display: none }
.only-mob.only-mob { display: none }
@media (min-width: 900px) { .only-desk.only-desk { display: flex } }
@media (max-width: 899px) { .only-mob.only-mob { display: flex } }