/* ── Главная ───────────────────────────────────────────────────────────
   Величины сняты с макета «INMOST — главная страница» (v4 продающая).
   В макете всё лежало в inline-стилях одного артборда; здесь то же самое
   классами, чтобы работали наведение, адаптив и живые товары. */

.home section{width:min(100% - 80px,var(--container));margin:20px auto 0}
.home__pad{background:var(--white);border-radius:var(--radius-hero);
  padding:56px 44px}

/* Шапка секции: заголовок слева, действие справа */
.hsec{display:flex;align-items:end;justify-content:space-between;gap:28px}
.hsec--out{margin:44px 0 28px}
.hsec--in{margin-bottom:36px}
.hsec h2{margin:0 0 10px;font-size:clamp(28px,3vw,38px);font-weight:600;
  line-height:1.14;letter-spacing:-.03em}
.hsec p{max-width:650px;margin:0;font-size:17px;color:var(--muted)}
.hsec__all{display:inline-flex;align-items:center;gap:10px;font-size:14px;
  font-weight:600;white-space:nowrap}
.hsec__all:hover{text-decoration:underline;text-underline-offset:4px}

/* ── Первый экран ─────────────────────────────────────────────────── */
.mhero{background:var(--white);border-radius:var(--radius-hero);overflow:hidden}
.mhero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
.mhero__text{display:flex;flex-direction:column;justify-content:center;
  padding:72px 56px}
.mhero__tag{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;
  margin:0 0 26px;padding:7px 14px;background:rgba(229,196,200,.42);
  border-radius:var(--radius-pill);font-size:12px;font-weight:600;
  letter-spacing:.02em;color:var(--burgundy)}
.mhero__t{max-width:15ch;margin:0 0 22px;font-size:clamp(38px,4.2vw,58px);
  line-height:1.04;font-weight:600;letter-spacing:-.035em;color:var(--ink);
  text-wrap:pretty}
.mhero__lead{max-width:480px;margin:0 0 34px;font-size:18px;line-height:1.6;
  color:var(--muted);text-wrap:pretty}
.mhero__act{display:flex;align-items:center;flex-wrap:wrap;gap:16px 20px}
.mhero__note{margin:16px 0 0;font-size:13px;color:var(--muted)}
.mhero__art{position:relative;min-height:560px;background:var(--porcelain)}
/* Композиция снимка смещена вправо: при кадрировании по центру в полосу
   попадала пустая стена, а предметы жались к краю. Сдвигаем кадр так,
   чтобы товары встали посередине полосы. */
.mhero__art img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:88% 50%}
.mhero__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--border)}
.mhero__facts div{padding:24px 28px;border-right:1px solid var(--border)}
.mhero__facts div:last-child{border-right:0}
.mhero__n{margin:0 0 6px;font-size:24px;font-weight:600;letter-spacing:-.02em;
  color:var(--burgundy)}
.mhero__d{margin:0;font-size:13px;color:var(--muted)}

/* Кнопки главной */
.hbtn{display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:0 30px;background:var(--burgundy);color:var(--white);
  border-radius:var(--radius-pill);font-size:15px;font-weight:600}
.hbtn:hover{background:var(--burgundy-hover);color:var(--white)}
.hlink{display:inline-flex;align-items:center;gap:10px;font-size:15px;
  font-weight:600;color:var(--burgundy)}
.hlink:hover{text-decoration:underline;text-underline-offset:4px}

/* ── Карточки-переходы: разделы и страны ──────────────────────────── */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.gcard{display:flex;flex-direction:column;padding:32px;background:var(--white);
  border:1px solid var(--border);border-radius:var(--radius-surface);
  color:var(--ink);transition:background .25s ease,border-color .25s ease}
.gcard:hover{background:rgba(229,196,200,.18);border-color:var(--blush);
  color:var(--ink)}
.gcard--wide{padding:40px}
.gcard__n{font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--burgundy)}
.gcard h3{margin:18px 0 12px;font-size:clamp(22px,2.1vw,28px);line-height:1.14;
  font-weight:600;letter-spacing:-.02em}
.gcard--wide h3{margin:0 0 12px;font-size:clamp(24px,2.4vw,32px);
  line-height:1.12;letter-spacing:-.025em}
.gcard p{margin:0 0 20px;font-size:15px;color:var(--muted)}
.gcard--wide p{margin:0 0 22px}
.gcard__go{display:inline-flex;align-items:center;gap:10px;margin-top:auto;
  font-size:14px;font-weight:600;color:var(--burgundy)}
.gcard__head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.gcard__mark{display:grid;place-items:center;width:44px;height:44px;
  background:var(--burgundy);border-radius:var(--radius-pill);
  color:var(--white);font-size:16px;font-weight:600}

/* ── Подбор под задачу ────────────────────────────────────────────── */
.quiz{background:var(--burgundy);color:var(--white);
  border-radius:var(--radius-hero);padding:56px 48px}
.quiz .hsec{margin-bottom:32px}
.quiz .hsec p{max-width:600px;color:rgba(255,255,255,.72)}
.quiz__tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.quiz__tab{min-height:48px;padding:0 22px;background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius-pill);font:inherit;font-size:15px;font-weight:600;
  cursor:pointer;transition:background .2s ease,color .2s ease,
  border-color .2s ease}
.quiz__tab[aria-selected="true"]{background:var(--white);color:var(--burgundy);
  border-color:var(--white)}
.quiz__pane{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:32px;align-items:center;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-surface);
  padding:32px}
.quiz__pane[hidden]{display:none}
.quiz__label{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blush)}
.quiz__t{margin:0 0 12px;font-size:26px;font-weight:600;line-height:1.16;
  letter-spacing:-.025em}
.quiz__p{margin:0 0 26px;font-size:16px;line-height:1.6;
  color:rgba(255,255,255,.72)}
.quiz__go{display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 26px;background:var(--white);color:var(--burgundy);
  border-radius:var(--radius-pill);font-size:15px;font-weight:600}
.quiz__go:hover{background:var(--blush);color:var(--burgundy)}
.quiz__two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
/* Плитка внутри бордового блока живёт на белой подложке */
.quiz__two .tile{background:var(--white);color:var(--ink);
  border-radius:var(--radius-panel);overflow:hidden}
.quiz__two .tile__body{padding:18px 20px 22px}

/* ── Лента товаров ────────────────────────────────────────────────── */
.rail{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(248px,calc((100% - 54px) / 4));gap:18px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  cursor:grab;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start;min-width:0}
.rail__nav{display:flex;align-items:center;gap:12px}
.rail__btn{display:grid;place-items:center;width:48px;height:48px;
  background:transparent;border:1px solid var(--border-strong);
  border-radius:var(--radius-pill);color:var(--ink);cursor:pointer}
.rail__btn:hover{border-color:var(--burgundy);background:rgba(229,196,200,.28)}
.rail__btn svg{width:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.rail__btn[disabled]{opacity:.35;cursor:default}
.rail__btn[disabled]:hover{border-color:var(--border-strong);background:none}

/* Быстрые переходы к подразделам */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  background:var(--porcelain);border-radius:var(--radius-pill);font-size:14px;
  font-weight:600;color:var(--ink)}
.chip:hover{background:rgba(229,196,200,.42);color:var(--burgundy)}
.chip--main{gap:8px;background:var(--burgundy);color:var(--white)}
.chip--main:hover{background:var(--burgundy-hover);color:var(--white)}

/* Оговорка под лентой БАД: обязательна по закону, поэтому не прячется
   в подвал, но и не спорит с товарами — мелкий кегль, приглушённый тон. */
.disclaimer{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--border);
  font-size:13px;line-height:1.55;color:var(--muted)}
.disclaimer a{font-weight:600;color:var(--burgundy)}
.disclaimer a:hover{text-decoration:underline;text-underline-offset:3px}

/* Карточка-переход со снимком: раздел без товарных фотографий. Снимок
   редакционный и показывает категорию, поэтому подпись под ним честно
   говорит, что фотографии средств ещё готовятся. */
.ecard{display:grid;grid-template-rows:auto 1fr;background:var(--white);
  border:1px solid var(--border);border-radius:var(--radius-surface);
  overflow:hidden;color:var(--ink);
  transition:border-color .25s ease,transform .25s ease}
.ecard:hover{border-color:var(--blush);color:var(--ink)}
.ecard__ph{display:block;aspect-ratio:16/10;background:var(--porcelain);
  overflow:hidden}
.ecard__ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease}
.ecard:hover .ecard__ph img{transform:scale(1.03)}
.ecard__body{display:flex;flex-direction:column;padding:28px}
.ecard__t{margin:14px 0 10px;font-size:clamp(22px,2.1vw,26px);line-height:1.16;
  font-weight:600;letter-spacing:-.02em}
.ecard__d{margin:0 0 20px;font-size:15px;line-height:1.55;color:var(--muted)}
.ecard__note{margin:20px 0 0;font-size:13px;color:var(--muted)}
@media (max-width:767px){
  .ecard__body{padding:20px}
  .ecard__ph{aspect-ratio:16/9}
}

/* ── Что видно до покупки ─────────────────────────────────────────── */
.before{background:rgba(229,196,200,.38);border-radius:var(--radius-hero);
  padding:56px 48px}
.before__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px}
.before__cell{padding:24px;background:var(--white);
  border-radius:var(--radius-panel)}
.before__t{margin:0 0 6px;font-size:15px;font-weight:600}
.before__d{margin:0;font-size:14px;color:var(--muted)}

/* ── Как проходит заказ ───────────────────────────────────────────── */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.flow__step{padding:28px;background:var(--porcelain);
  border-radius:var(--radius-surface)}
.flow__head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px}
.flow__ic{display:grid;place-items:center;width:48px;height:48px;
  background:var(--white);border-radius:var(--radius-pill);
  color:var(--burgundy)}
.flow__ic svg{width:24px;height:24px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.flow__n{font-size:13px;font-weight:600;color:var(--text-faint)}
.flow__step h3{margin:0 0 8px;font-size:18px;font-weight:600;
  letter-spacing:-.015em}
.flow__step p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}

/* ── Тёмный блок с условиями ──────────────────────────────────────── */
.offer{background:var(--ink);color:var(--white);
  border-radius:var(--radius-hero);padding:64px 48px}
.offer h2{margin:0 0 14px;font-size:clamp(28px,3vw,38px);font-weight:600;
  line-height:1.14;letter-spacing:-.03em}
.offer__lead{max-width:520px;margin:0 0 30px;font-size:17px;line-height:1.6;
  color:rgba(255,255,255,.72)}
.offer__act{display:flex;align-items:center;flex-wrap:wrap;gap:16px 20px}
.offer__go{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 28px;background:var(--white);color:var(--ink);
  border-radius:var(--radius-pill);font-size:15px;font-weight:600}
.offer__go:hover{background:var(--blush);color:var(--ink)}
.offer__ask{display:inline-flex;align-items:center;gap:10px;font-size:15px;
  font-weight:600;color:var(--white)}
.offer__ask:hover{color:var(--blush)}
.offer dl{display:grid;gap:0;margin:0}
.offer dl > div{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);
  gap:20px;padding:18px 0;border-top:1px solid rgba(255,255,255,.16)}
.offer dl > div:first-child{border-top:0;padding-top:0}
.offer dt{font-size:14px;font-weight:600;color:var(--blush)}
.offer dd{margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.78)}

/* ── Вопросы ──────────────────────────────────────────────────────── */
.faq__list{display:grid;gap:0}
.faq__item{border-top:1px solid var(--border)}
.faq__item:first-child{border-top:0}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:100%;padding:22px 0;background:0;border:0;font:inherit;font-size:17px;
  font-weight:600;line-height:1.4;letter-spacing:-.015em;color:var(--ink);
  text-align:left;cursor:pointer}
.faq__q:hover{color:var(--burgundy)}
.faq__sign{flex:none;display:grid;place-items:center;width:32px;height:32px;
  border:1px solid var(--border);border-radius:var(--radius-pill);
  font-size:18px;font-weight:400;color:var(--burgundy)}
.faq__a{margin:0 0 22px;padding-right:52px;font-size:15px;line-height:1.6;
  color:var(--muted)}
.faq__a[hidden]{display:none}
.faq__ask{display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  font-size:15px;font-weight:600;color:var(--burgundy)}
.faq__ask:hover{text-decoration:underline;text-underline-offset:4px}

/* ── Опт ──────────────────────────────────────────────────────────── */
.opt{display:flex;align-items:center;gap:28px;padding:36px 44px;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-hero)}
.opt__ic{flex:none;display:grid;place-items:center;width:64px;height:64px;
  background:var(--porcelain);border-radius:var(--radius-pill);
  color:var(--burgundy)}
.opt__ic svg{width:32px;height:32px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.opt__body{flex:1}
.opt h2{margin:0 0 8px;font-size:clamp(22px,2.1vw,28px);font-weight:600;
  line-height:1.16;letter-spacing:-.025em}
.opt p{margin:0;font-size:15px;color:var(--muted)}
.opt__go{flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 26px;background:var(--burgundy);color:var(--white);
  border-radius:var(--radius-pill);font-size:15px;font-weight:600}
.opt__go:hover{background:var(--burgundy-hover);color:var(--white)}

/* ── Рассылка ─────────────────────────────────────────────────────── */
.sub{margin-bottom:64px !important;background:var(--white);
  border-radius:var(--radius-hero);padding:48px 44px}
.sub__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;
  align-items:center}
.sub h2{margin:0 0 10px;font-size:clamp(24px,2.4vw,32px);font-weight:600;
  line-height:1.16;letter-spacing:-.025em}
.sub__lead{margin:0;font-size:16px;color:var(--muted)}
.sub__form{display:flex;gap:12px}
.sub__form input{flex:1;min-width:0;min-height:52px;padding:0 18px;
  background:var(--porcelain);border:1px solid var(--border);
  border-radius:var(--radius-pill);font:inherit;font-size:15px;color:var(--ink)}
.sub__form input:focus{border-color:var(--burgundy);
  outline:1px solid var(--burgundy)}
.sub__form button{flex:none;min-height:52px;padding:0 26px;
  background:var(--burgundy);color:var(--white);border:0;
  border-radius:var(--radius-pill);font:inherit;font-size:15px;font-weight:600;
  cursor:pointer}
.sub__form button:hover{background:var(--burgundy-hover)}
.sub__note{margin:12px 0 0;font-size:13px;color:var(--muted)}

/* ── Плашка внизу, появляется после первого экрана ────────────────── */
.sticky{position:fixed;z-index:40;bottom:20px;left:0;right:0;display:flex;
  justify-content:center;pointer-events:none}
.sticky[hidden]{display:none}
.sticky__in{display:flex;align-items:center;gap:24px;
  max-width:min(100% - 40px,900px);padding:14px 14px 14px 26px;
  background:var(--ink);color:var(--white);border-radius:var(--radius-pill);
  box-shadow:0 18px 40px rgba(20,15,17,.24);pointer-events:auto}
.sticky__t{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.sticky__go{display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 24px;background:var(--white);color:var(--ink);
  border-radius:var(--radius-pill);font-size:14px;font-weight:600;
  white-space:nowrap}
.sticky__go:hover{background:var(--blush);color:var(--ink)}

/* ── Планшет ──────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .rail{grid-auto-columns:minmax(240px,calc((100% - 36px) / 3))}
}
@media (max-width:1024px){
  .home section{width:calc(100% - 48px)}
  .mhero__grid{grid-template-columns:minmax(0,1fr)}
  .mhero__art{display:none}
  .mhero__text{padding:56px 40px}
  .mhero__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mhero__facts div:nth-child(2){border-right:0}
  .mhero__facts div:nth-child(3),.mhero__facts div:nth-child(4){
    border-top:1px solid var(--border)}
  .cards3{grid-template-columns:minmax(0,1fr)}
  .cards2,.quiz__pane,.sub__grid{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quiz__pane{gap:28px}
}

/* ── Телефон ──────────────────────────────────────────────────────── */
@media (max-width:767px){
  .home section{width:calc(100% - 32px);margin-top:16px}
  .home__pad,.quiz,.before,.offer,.opt,.sub{padding:36px 20px}
  .mhero__text{padding:40px 24px}
  /* 32 по эталону: clamp снизу давал 38, и заголовок съедал первый
     экран телефона целиком */
  .mhero__t{font-size:32px;line-height:1.06;margin-bottom:14px}
  /* Ссылки-действия «Все», «Весь каталог», «Подобрать под задачу» —
     это кнопки без рамки, а не слова в тексте. Кегль оставляем как
     в макете, растёт только зона нажатия: строкой в 22 пикселя палец
     промахивается. Внутритекстовые ссылки не трогаем — там правило
     нажатия другое. */
  .hsec__all,.hlink,.offer__ask,.faq__ask{min-height:44px}
  .mhero__facts{grid-template-columns:minmax(0,1fr)}
  .mhero__facts div{border-right:0;border-top:1px solid var(--border)}
  .mhero__facts div:first-child{border-top:0}
  .hbtn,.offer__go{width:100%}
  .hsec{flex-direction:column;align-items:start;gap:18px}
  .hsec--out{margin:32px 0 20px}
  .hsec--in{margin-bottom:24px}
  /* Дорожка без minmax: нижняя граница 0 разрешала браузеру ужимать
     колонки, и двенадцать плиток втискивались в экран полосками
     по 17 пикселей вместо того, чтобы уехать в прокрутку */
  .rail{grid-auto-columns:calc(72% - 12px);gap:14px}
  /* Стрелки на телефоне не нужны: лента листается пальцем */
  .rail__nav .rail__btn{display:none}
  .before__grid,.flow{grid-template-columns:minmax(0,1fr)}
  .quiz__two{gap:14px}
  .opt{flex-direction:column;align-items:start;gap:20px}
  .opt__go{width:100%}
  .sub__form{flex-direction:column}
  .sub__form button{width:100%}
  .faq__a{padding-right:0}
  /* Плашка не должна закрывать липкую панель покупки */
  .sticky{bottom:12px}
  .sticky__in{gap:14px;padding:10px 10px 10px 18px}
  .sticky__t{font-size:13px}
}