/* ShuGuDu — фирменный стиль сайта.
   Все цвета и размеры собраны здесь наверху: поменяешь тут — поменяется везде. */

:root {
  /* Цвета */
  --ink: #2f2e33;
  --ink-soft: #55535f;
  --ink-mute: #8d8a99;
  --cream: #fcfbff;
  --card: #ffffff;
  --line: #e6e1f2;
  --accent: #a19be2;
  --accent-deep: #9b5aa0;
  --accent-soft: #efe9fb;
  --ok: #2f7a5b;

  /* Шрифты */
  --font-display: Georgia, "Times New Roman", "PT Serif", serif;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Сетка */
  --wrap: 1120px;
  --gap: 20px;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 2px 14px rgba(47, 46, 51, .07);
  --shadow-lift: 0 10px 30px rgba(47, 46, 51, .12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Спрятанное атрибутом hidden (карточки под фильтром, «Новинок пока нет») не должно
   возвращаться своими display: flex / grid */
[hidden] { display: none !important; }

a { color: var(--accent-deep); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(38px, 8.6vw, 70px); line-height: 1.05; }
h2 { font-size: clamp(34px, 5.8vw, 60px); line-height: 1.06; }
h3 { font-size: clamp(21px, 2.6vw, 26px); }

p { margin: 0 0 1em; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 18px;
}

.section { padding: 56px 0; }
.section--tight { padding: 36px 0; }
.section--accent { background: var(--accent-soft); }
.section--ink { background: var(--ink); color: var(--cream); }
.section--ink h2, .section--ink h3 { color: #fff; }

.lead { font-size: clamp(19px, 2.2vw, 23px); color: var(--ink-soft); max-width: 52ch; }

.eyebrow {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 14px;
}

/* ---------- Панель сверху ---------- */
/* Всегда видна (решение владельца 15.09.2026): логотип, строка разделов, текущий раздел — пилюлей,
   «Где купить», полоска прочитанного. На телефоне разделы — второй строкой, листаются пальцем. */

html { scroll-padding-top: 84px; }
.panel {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252, 251, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.panel__bar { display: flex; align-items: center; gap: 14px; min-height: 66px; }
.panel .logo { flex: none; }
.panel__nav { display: flex; gap: 4px; margin-left: auto; }
.panel__chip {
  padding: 8px 14px; border-radius: 999px; font-size: 15px; white-space: nowrap;
  color: var(--ink); text-decoration: none; transition: background .2s ease, color .2s ease;
}
.panel__chip:hover { background: var(--accent-soft); }
.panel__chip[aria-current], .panel__chip.is-here { background: linear-gradient(90deg, var(--ink) 40%, #8f89d6 100%); color: #fff; }
.panel__buy {
  flex: none; padding: 10px 18px; border-radius: 999px; background: linear-gradient(90deg, var(--ink) 40%, #8f89d6 100%); color: #fff;
  font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(47, 46, 51, .2);
}
.panel__buy.is-here { box-shadow: 0 0 0 3px var(--accent), 0 6px 16px rgba(47, 46, 51, .2); }
.panel__progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; transform-origin: 0 50%;
  transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--accent-deep), var(--accent));
}
@media (max-width: 999px) {
  html { scroll-padding-top: 122px; }
  .panel__bar { flex-wrap: wrap; min-height: 0; padding-top: 10px; column-gap: 12px; }
  .panel__buy { margin-left: auto; padding: 8px 15px; font-size: 14px; }
  .panel__nav {
    order: 3; flex: 0 0 calc(100% + 36px); margin: 8px -18px 0; padding: 0 18px 10px; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent);
  }
  .panel__nav::-webkit-scrollbar { display: none; }
  .panel__chip { background: var(--accent-soft); font-size: 14.5px; padding: 7px 14px; }
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.logo__mark { width: 34px; color: var(--accent); flex: none; }

.logo__name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: .02em;
}

.logo__name sup { font-size: .5em; vertical-align: super; color: var(--ink-mute); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 17px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
/* Главная кнопка — переход графит → сиреневый, как «Арт.» на слайдах рич-контента */
.btn--primary { background: linear-gradient(90deg, var(--ink) 40%, #8f89d6 100%); color: #fff; }
.btn--primary:hover { background: linear-gradient(90deg, var(--ink) 15%, var(--accent) 100%); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--wb { background: #cb11ab; color: #fff; }
.btn--ozon { background: #005bff; color: #fff; }
.btn--wb:hover, .btn--ozon:hover { filter: brightness(1.08); }
/* Л'Этуаль — фирменный синий обводкой: заливкой он почти как у Ozon, кнопки бы слились */
.btn--letu { background: #fff; color: #0921ff; border: 1.5px solid #0921ff; }
.btn--letu:hover { background: #0921ff; color: #fff; }

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

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Главный экран ---------- */
/* Как слайд 1 рич-контента (решение владельца 14.09.2026): серо-фиолетовый фон, девушка справа
   без рамки. Фон снят с края слайда сверху вниз, 21 точка, — поэтому край фото растворяется в нём
   без шва. Фото — правая часть слайда 1 (правее x = 730, 710×900): assets/img/brand/hero-rich.jpg. */

.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, rgb(47, 46, 51) 0%, rgb(47, 46, 51) 5%, rgb(47, 46, 51) 10%, rgb(47, 46, 51) 15%, rgb(47, 46, 51) 20%, rgb(47, 46, 51) 25%, rgb(47, 46, 51) 30%, rgb(47, 46, 51) 35%, rgb(49, 48, 53) 40%, rgb(49, 48, 53) 45%, rgb(57, 56, 64) 50%, rgb(65, 64, 77) 55%, rgb(69, 68, 85) 60%, rgb(78, 76, 98) 65%, rgb(86, 83, 111) 70%, rgb(94, 91, 123) 75%, rgb(101, 99, 136) 80%, rgb(109, 107, 148) 85%, rgb(118, 115, 161) 90%, rgb(126, 122, 173) 95%, rgb(133, 129, 185) 100%);
}
.hero__grid { display: flex; align-items: center; min-height: clamp(560px, 50vw, 720px); }
.hero__grid > div:first-child { position: relative; z-index: 1; max-width: min(560px, 52vw); padding: 56px 0; }
.hero__title { margin-bottom: .35em; color: #fff; }
.hero .lead { color: rgba(255, 255, 255, .84); }
.hero__note { font-size: 15px; color: rgba(255, 255, 255, .62); margin-top: 16px; }
.hero .btn--primary { background: #fff; color: var(--ink); }
.hero .btn--primary:hover { background: var(--accent-soft); }
.hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.hero .btn--ghost:hover { border-color: #fff; }
.hero .rating { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); box-shadow: none; }
.hero .rating__meta { color: rgba(255, 255, 255, .7); }
.hero .rating__stars { color: #c9c4f5; }
.hero__about { max-width: 52ch; color: var(--ink-soft); }
.hero__about p { margin-bottom: .8em; }
.hero__about p:last-child { margin-bottom: 0; }

.hero__media {
  position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 710 / 900; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 899px) {
  .hero { background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 55%, #3b3946 100%); }
  .hero__grid { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero__grid > div:first-child { max-width: none; padding: 34px 0 6px; }
  .hero__media {
    position: relative; height: auto; width: calc(100% + 36px); margin: 0 -18px; aspect-ratio: 4 / 3.4;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%);
            mask-image: linear-gradient(180deg, transparent 0, #000 24%);
  }
  .hero__media img { object-position: 68% 22%; }
}

/* Плашка рейтинга */

.rating {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px 9px 14px;
  box-shadow: var(--shadow);
  margin-bottom: 22px;
}
.rating__score { font-family: var(--font-display); font-size: 28px; line-height: 1; }
.rating__stars { color: var(--accent); letter-spacing: 2px; font-size: 14px; }
.rating__meta { font-size: 14px; color: var(--ink-mute); line-height: 1.35; }

/* ---------- Сетки ---------- */

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
.grid--cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }

@media (min-width: 620px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 940px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--cards { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Плитки (магазины, «О бренде», «Сотрудничество») ---------- */

.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.tile h3 { margin-bottom: .35em; }
.tile p { margin: 0; color: var(--ink-soft); font-size: 17px; }


/* ---------- Карточка товара в каталоге ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.card__media { aspect-ratio: 1 / 1; background: var(--accent-soft); position: relative; }

/* Позиции стартового набора — без белой плашки: только фото и текст */

.card--bare {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  gap: 18px;
  align-items: center;
}
.card--bare:hover { box-shadow: none; transform: none; }
.card--bare:hover .card__title { color: var(--accent-deep); }
.card--bare .card__media { border-radius: var(--radius-sm); overflow: hidden; }
.card--bare .card__body { padding: 0; }
.card--bare .card__meta { color: var(--ink-soft); font-size: 17px; }

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

.card__badge {
  position: absolute; top: 10px; left: 10px;
  background: linear-gradient(90deg, rgba(47, 46, 51, .92) 35%, rgba(143, 137, 214, .92) 100%); color: #fff;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}

.card__body { padding: 14px 15px 17px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__title { font-family: var(--font-display); font-size: 20px; line-height: 1.25; }
.card__meta { font-size: 15px; color: var(--ink-mute); }
.card__foot { margin-top: auto; padding-top: 10px; font-size: 15px; color: var(--accent-deep); }

/* Заглушка вместо фото */
.ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  text-align: center;
  color: var(--accent-deep);
  background:
    repeating-linear-gradient(45deg, rgba(161,155,226,.07) 0 12px, transparent 12px 24px),
    var(--accent-soft);
  font-size: 12.5px;
  padding: 12px;
  line-height: 1.4;
}

/* ---------- Фильтры ---------- */

.filters { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-group__label { font-size: 15px; color: var(--ink-mute); min-width: 74px; }

.chip {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 7px 15px;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: all .14s ease;
}
.chip:hover { border-color: var(--ink-mute); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.filter-count { font-size: 15px; color: var(--ink-mute); }
.chip__num { opacity: .55; margin-left: 7px; font-size: 14px; }

/* Метки «Хит» и «Новинка» на карточках каталога */

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.tag {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.tag--best { background: var(--accent-soft); color: var(--accent-deep); }
.tag--new { background: var(--ink); color: #fff; }

/* Плашка цвета у коричневых ресниц (решение владельца 14.09.2026): на широком экране — на фото
   справа сверху, на телефоне и планшете — в строке меток рядом с «Хит»: там фото мелкое */
.card__shade {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 7px; border-radius: 999px;
  background: var(--shade); color: #fff;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.card__shade::before, .tag--shade::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .9);
}
.card__shade::before { width: 10px; height: 10px; }
.tag--shade { display: none; align-items: center; gap: 5px; background: var(--shade); color: #fff; font-weight: 600; }
@media (max-width: 939px) {
  .card__shade { display: none; }
  .tag--shade { display: inline-flex; }
}


.empty { padding: 40px 0; text-align: center; color: var(--ink-mute); }

/* ---------- Страница товара ---------- */

.product { display: grid; gap: 28px; padding: 32px 0 10px; }
.product > * { min-width: 0; }   /* иначе ряд миниатюр распирает колонку шире экрана телефона */
@media (min-width: 900px) {
  .product { grid-template-columns: 1.02fr .98fr; gap: 46px; padding: 44px 0 20px; align-items: start; }
}

/* Галерея — вертикальная рамка 3:4, как на карточках WB (900×1200). Квадратные слайды
   для Л'Этуаль — те же слайды 3:4 с полями по 150 px по бокам: рамка срезает ровно поля. */
.gallery__main {
  aspect-ratio: 3 / 4;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery__main img, .gallery__main video { width: 100%; height: 100%; object-fit: cover; }
/* Обложка пинцета — квадрат без полей: кадр сдвинут влево, чтобы рамка не срезала «АНТИ-» */
.gallery__main img[src*="products/pincet/00."],
.gallery__thumb img[src*="products/pincet/00."] { object-position: 30% 50%; }
/* Квадратное фото глаза (00-glaz.* в папке товара) — целиком, без обрезки: сверху и снизу
   поля цвета рамки (решение владельца 14.09.2026) */
.gallery__main img[src*="/00-glaz."],
.gallery__thumb img[src*="/00-glaz."] { object-fit: contain; }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.gallery__thumb {
  flex: none; width: 60px; height: 80px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--accent-soft); cursor: pointer; padding: 0;
}
.gallery__thumb[aria-pressed="true"] { border-color: var(--ink); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.specs { width: 100%; border-collapse: collapse; margin: 18px 0 24px; }
.specs td { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 17px; vertical-align: top; }
.specs td:first-child { color: var(--ink-mute); width: 46%; }

.buy-note { font-size: 15px; color: var(--ink-mute); margin-top: 12px; }

/* ---------- Вопрос-ответ ---------- */

.qa { border-top: 1px solid var(--line); }
.qa__item { border-bottom: 1px solid var(--line); }
.qa__q {
  width: 100%; text-align: left; background: none; border: 0;
  font: inherit; font-size: 19px; color: var(--ink);
  padding: 18px 40px 18px 0; cursor: pointer; position: relative;
}
.qa__q::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 22px; color: var(--accent); line-height: 1;
}
.qa__q[aria-expanded="true"]::after { content: "−"; }
.qa__a { display: none; padding: 0 0 18px; color: var(--ink-soft); max-width: 68ch; }
.qa__a.is-open { display: block; }

/* ---------- Форма ---------- */

.form { display: grid; gap: 14px; max-width: 520px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 15px; color: var(--ink-soft); }
.field input, .field textarea {
  font: inherit; font-size: 17px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field textarea { min-height: 110px; resize: vertical; }

.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-mute); }
.consent input { margin-top: 3px; flex: none; width: 17px; height: 17px; }

.form-status { font-size: 15.5px; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--accent-deep); }

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

.footer { background: var(--ink); color: #cac6d8; padding: 46px 0 30px; margin-top: 40px; font-size: 16px; }
.footer a { color: #efeaf8; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__grid { display: grid; gap: 26px; }
/* «Магазины» и «Связаться» — двумя столбцами и на телефоне, логотип над ними (решение владельца 15.09.2026) */
.footer__grid { grid-template-columns: 1fr 1fr; }
.footer__grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__grid > :first-child { grid-column: auto; }
}
.footer h4 { font-family: var(--font-display); font-weight: 400; color: #fff; margin: 0 0 12px; font-size: 19px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer__legal { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.13); font-size: 14px; color: #9995a8; }
.footer .logo { color: #fff; margin-bottom: 12px; }
.footer .logo__mark { color: var(--accent); }

/* ---------- Юридические страницы ---------- */

.doc { max-width: 74ch; padding: 34px 0 10px; }
.doc h2 { margin-top: 1.6em; }
.doc ol, .doc ul { padding-left: 22px; }
.doc li { margin-bottom: .5em; }
.doc__note {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 16px;
}

/* Пометка о незаполненных данных — видна только пока сайт не готов */
.todo {
  background: #fff4c2;
  border: 1px dashed #c9a227;
  color: #6a5300;
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: 13px;
  display: inline-block;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
}
.skip-link:focus { left: 12px; top: 12px; z-index: 60; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Витрина эффектов (фото глаз из карточек) ---------- */

.effects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 620px) { .effects { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 940px) { .effects { grid-template-columns: repeat(4, 1fr); } }

.effect {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  padding-bottom: 15px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.effect:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.effect img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* строка о лидерстве в первом экране */
.hero__claim {
  margin-top: 18px; padding-left: 14px;
  border-left: 3px solid var(--accent-deep);
  font-size: 16px; line-height: 1.5; color: var(--ink);
}
.effect__name {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  padding: 13px 15px 4px;
}
.effect__text { display: block; padding: 0 15px; font-size: 16px; color: var(--ink-soft); line-height: 1.45; }
.effect__count { display: block; padding: 8px 15px 0; font-size: 15px; color: var(--accent-deep); }

/* Логотип-каллиграфия бренда (с упаковки и карточек) */
.logo__word { width: auto; height: 34px; }
.logo__word--white { filter: invert(1) brightness(2); }
.logo__tm { font-size: 11px; color: var(--ink-mute); align-self: flex-start; margin-top: 4px; }
.footer .logo__tm { color: #9995a8; }

/* Фото бренда в блоках «Первый раз?» и «О бренде» */
.starter { display: grid; gap: 24px; align-items: start; }
@media (min-width: 860px) {
  /* Слева — палетка и пинцет с описаниями, справа — фото девушки:
     оно тянется во всю высоту колонки, от верха палетки до конца текста. */
  .starter { grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: stretch; }
}

/* Страница «О бренде»: широкий кадр глаз, под ним текст по центру */
.about__band { width: 100%; border-radius: var(--radius); display: block; margin-top: 16px; }
.about { max-width: 74ch; margin: 0 auto; text-align: center; }
.about h1 { margin: 30px 0 .35em; }
.about p { font-size: clamp(18px, 2vw, 21px); line-height: 1.65; color: var(--ink-soft); margin: 0; }
.starter__photo {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  object-fit: cover;
}
.starter__photo { aspect-ratio: 4/5; }
/* «Первый раз?»: фото девушки целиком — ничего не срезано (contain), низом к низу колонки. Фон кадра —
   цвет раздела (make_starter_girl.py), поэтому краёв не видно (правки владельца 13.09.2026) */
.starter__photo--bare { border: 0; border-radius: 0; object-fit: contain; object-position: 0% 100%; }
@media (min-width: 860px) {
  /* Высоту раздела задаёт текст слева: фото вписывается в неё (height: 0 + min-height), а не растягивает.
     Справа фото заходит до края экрана — девушка остаётся крупной */
  .section:has(.starter) { overflow-x: clip; }
  .section:has(.starter) .starter__photo--bare {
    aspect-ratio: auto; height: 0; min-height: 100%; max-width: none;
    width: calc(100% + 18px + max(0px, (100vw - var(--wrap)) / 2));
  }
}
.starter__kit { width: 100%; border-radius: var(--radius); display: block; }
.starter__item { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.starter__item .card__meta { color: var(--ink-soft); font-size: 17px; }
.starter__item:hover .card__title { color: var(--accent-deep); }
.starter__kit { margin-bottom: 4px; }
.starter__col { display: flex; flex-direction: column; gap: 12px; }
.starter__row { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.starter__note { margin-top: 20px; color: var(--ink-soft); font-size: 16px; }

/* ---------- Блок «Клей уже нанесён»: пучок крупно, подписи со стрелками ---------- */
/* Оформление — вариант 1 «Пилюли и лента» (выбор владельца 14.09.2026): фон как у страницы, подписи
   на пилюлях графит → сиреневый, как «Арт.» на слайдах, за пучком мягкое сиреневое свечение,
   преимущества — тёмной лентой во всю ширину. Раскладку сцены считает build.py → glue_block();
   на телефоне стрелок нет: номера на пучке, подписи списком. */
.anat-sec { overflow-x: clip; }       /* лента преимуществ шире .wrap — без прокрутки вбок */
.anat-head .eyebrow { letter-spacing: .22em; color: var(--accent-deep); }
.anat-head h2 { margin: 6px 0 0; max-width: 13ch; font-size: clamp(36px, 6vw, 64px); line-height: 1.08; }
.anat-head h2 em { color: var(--accent-deep); }   /* *…* в content.json → лиловый курсив */

.anat { position: relative; aspect-ratio: 1120 / 740; max-width: 1120px; margin: 36px auto 0; }
.anat__img { position: absolute; left: var(--x); top: var(--y); width: var(--w); isolation: isolate; }
/* мягкое сиреневое свечение за пучком */
.anat__img::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 52%; width: 125%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #e4ddfa 0%, rgba(239, 233, 251, .7) 38%, rgba(239, 233, 251, 0) 70%);
}
.anat__img > img { width: 100%; height: auto; }
.anat__glue, .anat__lines {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
}
.anat__glue rect {
  fill: rgba(161, 155, 226, .12); stroke: var(--accent-deep); stroke-width: 5; stroke-dasharray: 16 12;
}
.anat__lines > path { fill: none; stroke: var(--accent-deep); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.anat__lines > circle { fill: #fff; stroke: var(--accent-deep); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.anat__pin {
  position: absolute; transform: translate(-50%, -50%); visibility: hidden;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-deep); color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
}
.anat__call { position: absolute; left: var(--x); top: var(--y); width: var(--w); }
.anat__call--left { text-align: right; }
.anat__call--lens { text-align: center; }
.anat__call h3 {
  display: inline-block; margin: 0 0 12px; padding: 9px 20px 11px; border-radius: 18px;
  background: linear-gradient(90deg, var(--ink) 40%, #8f89d6 100%); color: #fff;
  font-size: clamp(20px, 2.1vw, 24px); line-height: 1.08; text-wrap: balance;
  box-shadow: 0 8px 20px rgba(47, 46, 51, .18);
}
.anat__call h3 em { font-style: italic; color: #d9d5ff; }
.anat__call p {
  margin: 0; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.55; color: var(--ink-soft); text-wrap: pretty;
}
.anat__lens {
  width: var(--lw); aspect-ratio: 1; margin: 0 auto 14px; border-radius: 50%; overflow: hidden;
  border: 5px solid var(--ink); box-shadow: 0 0 0 3px #fff, 0 16px 36px rgba(47, 46, 51, .22);
}
.anat__lens img { width: 100%; height: 100%; object-fit: cover; }

/* Четыре преимущества — тёмной лентой во всю ширину экрана, как полоса внизу слайда 2: лента выходит
   за поля .wrap (542 px — половина его ширины без полей) и прижата к низу раздела (−56 px = отступ .section) */
.perks {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  margin: 52px calc(50% - 50vw) -56px; padding: 40px max(18px, calc(50vw - 542px));
  background: linear-gradient(90deg, var(--ink) 0%, #3a3846 45%, #7b76b8 100%);
}
.perk { text-align: center; }
.perk svg {
  width: 50px; height: 50px; padding: 12px; margin: 0 auto 12px; border-radius: 50%;
  background: rgba(255, 255, 255, .13); color: #fff;
}
.perk h3 { font-size: 23px; line-height: 1.2; margin: 0 0 .4em; text-wrap: balance; color: #fff; }
.perk p { margin: 0; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .76); text-wrap: pretty; }
@media (max-width: 999px) { .perks { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 899px) {
  .anat-head h2 { max-width: 20ch; }
  .anat { aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 560px; }
  .anat__img { position: relative; left: auto; top: auto; width: 100%; }
  .anat__lines { display: none; }
  .anat__pin { visibility: visible; }
  .anat__call {
    position: static; width: auto; order: var(--n);
    display: flex; gap: 14px; align-items: flex-start; text-align: left;
  }
  .anat__call::before {
    content: attr(data-n); flex: none; width: 26px; height: 26px; margin-top: 4px; border-radius: 50%;
    display: grid; place-items: center; background: var(--accent-deep); color: #fff; font-size: 13px; font-weight: 600;
  }
  .anat__lens { width: 76px; margin: 0; flex: none; }
  .anat__txt { min-width: 0; }
  .anat__call p { font-size: 18px; }
}
@media (max-width: 640px) { .perks { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 420px) {
  .perks { grid-template-columns: 1fr; }
  .perk { text-align: left; display: grid; grid-template-columns: 50px 1fr; column-gap: 14px; }
  .perk svg { grid-row: span 2; margin: 2px 0 0; }
}

/* Шаги инструкции: фото сверху, текст под ним — без белых плашек. Оформление — вариант 1 (выбор
   владельца 14.09.2026): фон раздела светлеет кверху, «Шаг N» — пилюлей на нижнем крае фото. */

.steps-sec { background: linear-gradient(180deg, var(--cream) 0%, var(--accent-soft) 45%, #e3dbf8 100%); }
.steps-sec h2 em, .steps-sec .lead em { color: var(--accent-deep); }   /* *…* в content.json */
.steps-sec h2 em { white-space: nowrap; }                             /* «за 5 минут» не рвётся */
.grid--steps { gap: 28px; }

.step { display: flex; flex-direction: column; }
.step__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
/* .step .step__num, а не .step__num: номер — тоже <p>, и правило .step p ниже перебило бы цвет и отступы */
.step .step__num {
  position: relative; align-self: flex-start; margin: -21px 0 14px 14px; padding: 9px 18px;
  border-radius: 999px; background: linear-gradient(90deg, var(--ink) 40%, #8f89d6 100%); color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(47, 46, 51, .25);
}
.step h3 { margin-bottom: .3em; }
.step p { margin: 0; color: var(--ink-soft); font-size: 17px; }

/* ---------- Видео-инструкция: сразу после «Четырёх шагов» (15.09.2026) ---------- */
/* Тёмный раздел, как лента преимуществ: слева текст, справа вертикальное видео в рамке со свечением */

.howto { background: linear-gradient(135deg, var(--ink) 0%, #3a3846 50%, #6f6aa8 100%); color: #fff; }
.howto__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: center; }
.howto .eyebrow { color: #c9c4f5; }
.howto h2 { color: #fff; }
.howto h2 em { color: #d9d5ff; white-space: nowrap; }
.howto .lead { color: rgba(255, 255, 255, .82); }
.howto .btn--primary { background: #fff; color: var(--ink); }
.howto .btn--primary:hover { background: var(--accent-soft); }
.howto__frame {
  width: 100%; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 6px rgba(201, 196, 245, .18), 0 30px 60px rgba(0, 0, 0, .35);
}
.howto__video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 859px) {
  .howto__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .howto__frame { margin: 0 auto; width: min(340px, 100%); }
}

/* ---------- Сотрудничество: выбор направления и формы ---------- */

.dirs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.chip--lg { padding: 11px 24px; font-size: 17px; color: var(--ink); }
.chip--lg:hover { border-color: var(--accent); }

.apply { max-width: 640px; margin: 30px auto 0; }
.apply__box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.apply__box .form { max-width: none; }
.apply__lead { color: var(--ink-soft); font-size: 16px; margin: -4px 0 18px; }

/* ---------- «Где купить» — внизу каждой страницы ---------- */
/* Значки площадок и «Служба заботы» (решение владельца 15.09.2026) — build.py → where_block */

.where { padding: 56px 0 60px; text-align: center; background: linear-gradient(180deg, var(--cream) 0%, var(--accent-soft) 100%); }
.where h2 { margin: 0 0 .3em; }
.where .lead { margin: 0 auto; }
.where__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 34px; margin-top: 30px; }
.where__shop {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--ink); font-size: 15px; text-decoration: none; transition: transform .18s ease;
}
.where__shop img { width: 76px; height: 76px; border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 12px 26px rgba(47, 46, 51, .16); }
.where__shop:hover { transform: translateY(-3px); }
.where + .footer { margin-top: 0; }
@media (max-width: 480px) {
  .where__row { gap: 16px 12px; }
  .where__shop { width: calc(25% - 9px); font-size: 12.5px; line-height: 1.25; }
  .where__shop img { width: 62px; height: 62px; }
}

/* «Служба заботы» — небольшая тёмная плашка (владелец 15.09.2026: «сделать меньше»), кнопки мессенджеров */
.care {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px;
  max-width: 680px; margin: 30px auto 0; padding: 16px 18px 16px 26px; border-radius: 22px; text-align: left; color: #fff;
  background: linear-gradient(135deg, var(--ink) 30%, #7e78c4 100%); box-shadow: 0 14px 30px rgba(47, 46, 51, .2);
}
.care__eyebrow { margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #c9c4f5; }
.care h3 { margin: 0; color: #fff; font-size: 21px; line-height: 1.2; }
.care h3 em { color: #d9d5ff; white-space: nowrap; }   /* «Напиши нам» не рвётся */
.care__txt p:last-child { margin: 2px 0 0; font-size: 15px; color: rgba(255, 255, 255, .75); }
.care__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.care__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 18px 8px 9px;
  border-radius: 999px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.care__btn:hover { background: var(--accent-soft); transform: translateY(-2px); }
.care__btn svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: linear-gradient(90deg, var(--ink) 40%, #8f89d6 100%); color: #fff; }
@media (max-width: 640px) {
  .care { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; text-align: center; }
  .care__btns { flex-wrap: nowrap; }
  .care__btn { flex: 1; }
}

/* ---------- «Хиты» — сразу после первого экрана ---------- */
/* Плашки сами сменяются раз в 3 секунды (решение владельца 15.09.2026), листаются пальцем */

.hits { padding-bottom: 40px; }
.hits__track {
  display: flex; gap: 18px; margin-top: 26px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.hits__track::-webkit-scrollbar { display: none; }
.hit { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; }
.hit__photo-link { display: block; }
.hit__photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; }
.hit__body {
  position: relative; margin-left: -64px; padding: 36px 38px 38px; border-radius: 26px; color: #fff;
  background: linear-gradient(135deg, var(--ink) 30%, #7e78c4 100%); box-shadow: 0 24px 50px rgba(47, 46, 51, .24);
}
.hit__tag {
  display: inline-block; padding: 5px 13px; border-radius: 999px; background: rgba(255, 255, 255, .15);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.hit__name { margin: 16px 0 6px; color: #fff; font-size: clamp(28px, 3.3vw, 42px); line-height: 1.08; }
.hit__meta { margin: 0 0 12px; color: #d9d5ff; }
.hit__text { margin: 0 0 24px; color: rgba(255, 255, 255, .8); font-size: 17px; }
.hit__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.hit__btn { padding: 12px 22px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; text-decoration: none; }
.hit__btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
@media (max-width: 759px) {
  .hit { grid-template-columns: 1fr; align-items: stretch; }
  .hit__body { margin: -44px 12px 0; padding: 22px 22px 24px; }
  .hit__name { font-size: 27px; }
  .hit__text { font-size: 16px; }
}

/* Точки под листающимися плашками («Хиты», шаги): текущая растягивается в пилюлю */
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: #d6d0ea; cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
.dots button[aria-current="true"] { width: 30px; background: linear-gradient(90deg, var(--ink) 40%, #8f89d6 100%); }

/* Шаги на телефоне — листаются вправо по одному */
@media (max-width: 619px) {
  .grid--steps {
    display: flex; gap: 14px; margin-left: -18px; margin-right: -18px; padding: 0 18px 6px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none;
  }
  .grid--steps::-webkit-scrollbar { display: none; }
  .grid--steps > .step { flex: 0 0 84%; scroll-snap-align: start; }
}
@media (min-width: 620px) { .grid--steps + .dots { display: none; } }

/* Преимущества: на компьютере — четыре колонки; на телефоне — бегущая строка (копия пунктов видна только там) */
.perks__track { display: contents; }
.perk[aria-hidden] { display: none; }
@media (max-width: 619px) {
  .perks { display: block; overflow: hidden; padding: 22px 0; }
  .perks__track { display: flex; width: max-content; animation: perks-run 24s linear infinite; }
  .perk, .perk[aria-hidden] { display: flex; align-items: center; gap: 12px; padding-right: 30px; text-align: left; }
  .perk svg { width: 40px; height: 40px; padding: 9px; margin: 0; flex: none; grid-row: auto; }
  .perk h3 { margin: 0; font-size: 18px; white-space: nowrap; }
  .perk p { display: none; }
}
@media (max-width: 619px) and (prefers-reduced-motion: reduce) { .perks { overflow-x: auto; } }
@keyframes perks-run { to { transform: translateX(-50%); } }

/* Кнопка «наверх» — после первого экрана */
.to-top {
  position: fixed; right: 16px; bottom: 18px; z-index: 45; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: linear-gradient(90deg, var(--ink) 40%, #8f89d6 100%); box-shadow: 0 10px 24px rgba(47, 46, 51, .3);
}
.to-top svg { width: 24px; height: 24px; }

/* ---------- «Не держатся?» (help.html) ---------- */
/* Вариант B «Тёмные плашки» (выбор владельца 15.09.2026; просьба — «как чёрно-белый лист, добавь цвета и
   выделений»): причина — графитовая плашка, как «Хиты», фото в круге с крупным номером, признак — пилюлей,
   главное выделено (*звёздочки* в content.json), «Как проверить себя» — светлая вставка. */

.fix-top { padding: 56px 0 40px; background: linear-gradient(180deg, var(--cream) 0%, var(--accent-soft) 100%); }
.fix-top h1 em, .fix-qa h2 em { color: var(--accent-deep); }
.fix-top .lead { max-width: 60ch; }
.fix-jump { margin-top: 30px; }
.fix-jump__title { margin: 0 0 12px; font-family: var(--font-display); font-size: 24px; color: var(--ink); }
.fix-jump__row { display: flex; flex-wrap: wrap; gap: 10px; }
.fix-jump__chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1.5px #d6cff0; color: var(--ink);
  font-size: 16px; line-height: 1.25; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease;
}
.fix-jump__chip:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--accent), 0 8px 18px rgba(47, 46, 51, .12); }
.fix-jump__chip b {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(90deg, var(--ink) 40%, #8f89d6 100%); color: #fff; font-size: 14px;
}

.fix-list {
  padding: 48px 0 16px;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--cream) 18%, var(--cream) 82%, var(--accent-soft) 100%);
}
.fix {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 40px; align-items: start;
  max-width: 980px; margin: 0 auto 28px; padding: 36px 40px 38px; border-radius: 30px; color: #fff;
  background: linear-gradient(135deg, var(--ink) 30%, #7e78c4 100%); box-shadow: 0 24px 50px rgba(47, 46, 51, .24);
}
.fix__media { position: relative; }
.fix__lens {
  width: 190px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 5px solid #fff;
  box-shadow: 0 0 0 7px rgba(201, 196, 245, .22);
}
.fix__lens img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fix__num {
  position: absolute; right: -8px; top: -14px; font-family: var(--font-display); font-style: italic;
  font-size: 68px; line-height: 1; color: #d9d5ff;
}
.fix__sym {
  display: inline-block; margin: 4px 0 14px; padding: 7px 16px 8px; border-radius: 16px;
  background: rgba(255, 255, 255, .15); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3;
}
.fix h3 { margin: 0 0 .45em; color: #fff; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.fix__do { margin: 0; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.fix__key { font-weight: 600; color: #fff; background: linear-gradient(transparent 58%, rgba(161, 155, 226, .6) 58%); }
.fix__check {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 18px 22px; border-radius: 20px;
  background: var(--accent-soft); color: var(--ink);
}
.fix__check svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: linear-gradient(90deg, var(--ink) 40%, #8f89d6 100%); color: #fff; }
.fix__check p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.fix__check .fix__check-title {
  margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep);
}

/* «Не нашла свою причину?» — тёмный раздел с кнопками мессенджеров */
.fix-cta { padding: 60px 0; text-align: center; color: #fff; background: linear-gradient(135deg, var(--ink) 0%, #3a3846 50%, #6f6aa8 100%); }
.fix-cta h2 { margin: 0 0 .3em; color: #fff; }
.fix-cta h2 em { color: #d9d5ff; }
.fix-cta p { margin: 0 auto 26px; max-width: 46ch; font-size: 20px; color: rgba(255, 255, 255, .82); }
.fix-cta .care__btns { justify-content: center; }
.fix-cta .care__btn { gap: 10px; padding: 12px 24px 12px 14px; font-size: 17px; }
.fix-cta .care__btn svg { width: 30px; height: 30px; padding: 6px; }

/* «Ещё вопросы» — сиреневый фон, плюсик в пилюле */
.fix-qa { background: linear-gradient(180deg, var(--cream) 0%, var(--accent-soft) 100%); }
.fix-qa .qa { border-top-color: #d6cff0; }
.fix-qa .qa__item { border-bottom-color: #d6cff0; }
.fix-qa .qa__q { font-family: var(--font-display); font-size: 21px; }
.fix-qa .qa__q::after {
  right: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(90deg, var(--ink) 40%, #8f89d6 100%); color: #fff; font-family: var(--font-text); font-size: 20px;
}

@media (max-width: 759px) {
  .fix-top { padding: 32px 0 28px; }
  .fix-jump__chip { font-size: 15px; }
  .fix { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 20px 22px; margin-bottom: 20px; border-radius: 24px; }
  .fix__lens { width: 132px; }
  .fix__num { left: 116px; right: auto; top: auto; bottom: -2px; font-size: 58px; }
  .fix h3 { font-size: 26px; }
  .fix__do { font-size: 17px; }
  .fix__check { padding: 16px; }
}