/* ===== Базовый сброс ===== */
html {
  /* Раньше шрифт масштабировался только от ширины (vw), а блоки — только от высоты (vh).
     Если окно узкое И невысокое одновременно (например, окно в углу экрана),
     эти два масштаба «спорили» и текст вылезал за границы.
     Теперь размер шрифта считается от vmin — меньшей из сторон окна,
     поэтому текст плавно уменьшается, если сжимается ЛЮБАЯ сторона: и ширина, и высота. */
  font-size: clamp(13px, 1.6vmin + 7px, 19px);

  scroll-behavior: smooth; /* плавная прокрутка при переходе по якорным ссылкам (#order-form, #unusual-orders и т.п.) */
}

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

html, body {
  overflow-x: hidden; /* страховка от горизонтального скролла при сильном сжатии окна */
}

body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: #000000;
}

a {
  color: #000000;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ===== Блок 1: верхняя шапка ===== */
.topbar {
  min-height: clamp(56px, 12vmin, 96px);
  padding: 10px 0;

  background-color: #393f4b;
  background-image: url("");
  background-size: cover;
  background-position: center;

   color: red;
  display: flex;
  align-items: center;
}

.topbar__inner {
  width: 80%;
  margin: 0 auto;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 8px;
  column-gap: 16px;
}

.topbar__logo {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.topbar__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.topbar__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.topbar__link {
  font-size: 0.95rem;
}

.topbar__login {
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 8px 18px;
  background-color: #FFFF00;
  border: none;
  border-radius: 4px;
}

/* ===== Блок 2: навигация по разделам ===== */
.catnav {
  min-height: clamp(48px, 7vmin, 80px);
  padding: 8px 0;
  background-color: #910029;

  display: flex;
  align-items: center;
}

.catnav__inner {
  width: 60%;
  margin: 0 auto;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 8px;
}

.catnav__link {
  flex: 1 1 auto;
  text-align: center;

  padding: 10px 4px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #ECF4F7;
}

/* ===== Блок 3: два контейнера рядом ===== */
.hero {
  width: 65%;
  min-height: clamp(260px, 42vmin, 420px);
  margin: clamp(24px, 4vmin, 56px) auto 0;

  display: flex;
  gap: 2%;
}

.hero__left,
.hero__right {
  background-color: #ECF4F7;
  border-radius: 16px;
  color: #000000;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

.hero__left {
  width: calc((100% - 2%) * 0.65);
}

.hero__right {
  width: calc((100% - 2%) * 0.35);
}

/* --- Левый контейнер: верхняя половина (текст) --- */
.hero__left-top {
  flex: 1 1 50%;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: clamp(12px, 2vmin, 24px);
}

.hero__left-title {
  width: 100%;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: justify;
  text-align-last: left;
}

/* --- Левый контейнер: нижняя половина (6 фото) --- */
.hero__left-bottom {
  flex: 1 1 50%;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  gap: 8px;
  padding: 8px clamp(8px, 2vmin, 16px);
}

.hero__photo {
  width: clamp(40px, 10vmin, 90px);
  height: clamp(40px, 10vmin, 90px);
  object-fit: contain; /* было cover — логотип теперь вписывается целиком, без обрезки */
  border-radius: 8px;
}

/* --- Правый контейнер: верхняя секция (тёмный фон, текст + 5 фото) --- */
.hero__right-top {
  flex: 1 1 50%;
  min-height: 0;
  background-color: #910029;

  display: flex;
  flex-direction: column;
}

.hero__right-top-text {
  flex: 1 1 50%;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: clamp(15px, 2vmin, 20px);
}

.hero__right-top-title {
  width: 100%;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  color: #ECF4F7;
  text-align: justify;
  text-align-last: left;
}

.hero__right-top-photos {
  flex: 1 1 50%;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  gap: 6px;
  padding: 6px clamp(6px, 1.5vmin, 12px);
}

.hero__icon {
  width: clamp(24px, 5vmin, 56px);
  height: clamp(24px, 5vmin, 56px);
  object-fit: contain; /* было cover */
  border-radius: 6px;
}

/* --- Правый контейнер: нижняя секция (текст + кнопка) --- */
.hero__right-bottom {
  flex: 1 1 50%;
  min-height: 0;

  display: flex;
  flex-direction: column;
}

.hero__right-bottom-text {
  flex: 1 1 50%;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: clamp(10px, 2vmin, 20px);
}

.hero__right-bottom-title {
  width: 100%;
  font-size: 1.2rem;
  font-weight: 700;
  color: #000000;
  line-height: 1.25;
  text-align: justify;
  text-align-last: left;
}

.hero__right-bottom-action {
  flex: 1 1 50%;
  min-height: 0;
  display: flex;
  padding: clamp(12px, 2vmin, 20px);
}

.hero__cta {
  width: 100%;
  height: 100%;
  min-height: 36px;

  background-color: #910029;
  color: #ECF4F7;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ===== Крупный текст после блока 3 ===== */
.lead-text {
  width: 65%;
  margin: clamp(48px, 9vmin, 96px) auto;
}

.lead-text__text {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: justify;
  text-align-last: left;
}

/* ===== Блок 4: форма заявки ===== */
.order {
  position: relative; /* точка отсчёта для баннера успешной отправки */
  width: 65%;
  margin: clamp(24px, 4vmin, 56px) auto 0;

  background-color: #ECF4F7;
  border-radius: 16px;
  padding: clamp(20px, 3vmin, 40px);
}

/* --- Баннер "менеджер свяжется с вами" --- */
.order__banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  z-index: 5;

  display: none;
  align-items: center;
  gap: 14px;

  width: min(420px, calc(100% - clamp(28px, 6vmin, 80px)));
  background-color: #910029;
  color: #ECF4F7;
  border-radius: 10px;
  padding: 18px 22px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);

  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.order__banner.is-visible {
  display: flex;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.order__banner-text {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
}

.order__banner-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;

  background: transparent;
  border: none;
  color: #ECF4F7;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Форма во время показа баннера: замутнена и недоступна для заполнения --- */
.order.order--blurred .order__form {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

.order__form {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vmin, 32px);
  transition: filter 0.25s ease;
}

.order__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 40px;
}

.order__title {
  font-size: 1.6rem;
  font-weight: 800;
}

.order__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.order__label {
  font-size: 0.78rem;
  color: #6b6b6b;
}

.order__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.order__row--three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.order__input,
.order__textarea {
  width: 100%;
  background-color: #FFFFFF;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.85rem;
  font-family: inherit;
  color: #000000;
}

.order__input::placeholder,
.order__textarea::placeholder {
  color: #9a9a9a;
}

.order__field {
  display: flex;
  flex-direction: column;
}

.order__field--grow {
  flex: 1 1 240px;
}

.order__error {
  min-height: 1.1em;
  margin-top: 4px;
  font-size: 0.8rem;
  color: #d10000;
}

.order__input.is-invalid,
.order__textarea.is-invalid {
  border-color: #d10000;
}

.order__textarea {
  width: 100%;
  min-height: clamp(120px, 16vmin, 200px);
  resize: vertical;
}

.order__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
}

.order__checkbox input {
  width: 18px;
  height: 18px;
  accent-color: #910029;
  cursor: pointer;
}

.order__label--methods {
  margin-top: 4px;
}

/* --- Кнопки выбора способа связи: активна максимум одна --- */
.order__methods {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.order__method {
  flex: 1 1 0;
  min-width: 100px;

  background-color: #910029;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: #ECF4F7;
  cursor: pointer;
}

.order__method.is-active {
  background-color: #6e0020;
  border-color: #ECF4F7;
}

/* --- Низ формы: согласие + кнопка отправки --- */
.order__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

.order__consent {
  max-width: 380px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #6b6b6b;
}

.order__submit {
  background-color: #FFFF00;
  color: #000000;
  border: none;
  border-radius: 8px;
  padding: 16px 32px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* ===== Блок 5: заголовок раздела ===== */
.section-title {
  width: 65%; /* та же ширина, что у блоков 3, 4, 6 */
  margin: clamp(56px, 9vmin, 112px) auto 0; /* было clamp(24px,4vmin,56px) — увеличенный отступ сверху */
}

.section-title__text {
  font-size: 2.4rem;
  font-weight: 800;
}

/* ===== Блок 6: карточки необычных заказов (4:3) ===== */
.unusual {
  width: 65%;
  margin: clamp(20px, 3vmin, 40px) auto 0;
}

.unusual__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2%;
}

.unusual-card {
  aspect-ratio: 3 / 4;
  background-color: #ECF4F7;
  border-radius: 16px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

.unusual-card__top {
  flex: 0 0 75%;
  min-height: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 1.5vmin, 16px);
}

.unusual-card__photos {
  height: 100%;
  aspect-ratio: 1 / 1;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}

.unusual-card__photo {
  width: 100%;
  height: 100%;
  object-fit: contain; /* было cover */
  border-radius: 4px;
}

.unusual-card__bottom {
  flex: 0 0 25%;
  min-height: 0;

  display: flex;
  align-items: center;
  padding: 0 clamp(10px, 2vmin, 18px);
}

.unusual-card__brand {
  font-weight: 700;
  font-size: 1rem;
}

/* ===== Блок 99: контакты ===== */
.contacts {
  width: 65%; /* сам блок — та же ширина, что у блоков 3–6 */
  margin: clamp(64px, 10vmin, 128px) auto 0; /* было clamp(32px,5vmin,64px) — увеличено в 2 раза */
}

.contacts__inner {
  width: 70%; /* внутренний контейнер — 70% от ширины блока */
  margin: 0; /* было margin:0 auto (по центру) — теперь без auto, контейнер смещён к левому краю блока */
}

.contacts__title {
  font-size: 2.4rem;
  font-weight: 800;
  margin-bottom: clamp(24px, 3.5vmin, 44px);
}

.contacts__info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 40px;
}

.contacts__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contacts__label {
  font-size: 0.82rem;
  font-weight: 700;
}

.contacts__value {
  font-size: 0.95rem;
}

.contacts__help {
  margin-top: clamp(96px, 14vmin, 176px); /* было clamp(64px,10vmin,128px) — отступ до "Помощь в подборе..." увеличен ещё раз */
}

.contacts__help-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.contacts__chat {
  --contacts-size: clamp(48px, 6vmin, 64px);

  display: flex;
  flex-wrap: nowrap; /* было wrap — теперь всегда один горизонтальный ряд */
  align-items: center;
  gap: 16px;
}

.contacts__avatar {
  width: var(--contacts-size);
  height: var(--contacts-size);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.contacts__bubble {
  flex: 0 0 23vw; /* было 10vw — расширено примерно в 2.3 раза, как просили */
  width: 23vw;
  height: var(--contacts-size);

  background-color: #F2F2F2;
  border-radius: 12px;
  padding: 0 16px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contacts__bubble-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #6b6b6b;
}

.contacts__bubble-text {
  font-size: 0.9rem;
  color: #000000;
}

.contacts__messengers {
  height: var(--contacts-size);
  display: flex;
  align-items: center;
  gap: 10px;
}

.contacts__messenger {
  width: var(--contacts-size);
  height: var(--contacts-size);
  border-radius: 50%;
  object-fit: contain; /* было cover — иконка мессенджера вписывается целиком */
}

/* ===== Футер ===== */
.site-footer {
  margin-top: 10vh; /* отступ от блока контактов — 10% высоты экрана */
  min-height: 30vh; /* высота футера — минимум 30% высоты экрана, растёт вместе с контентом */
  background-color: #FFFF00;
  color: #000000; /* весь текст на футере — чёрный */

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 4vmin, 48px) 0 clamp(16px, 2.5vmin, 28px);
}

.footer__inner {
  width: 65%; /* тот же контейнер, что у блоков 3–6 */
  margin: 0 auto;

  display: flex;
  gap: 2%;
}

.footer__logo {
  width: calc((100% - 2%) * 0.32); /* 32% от ширины .footer__inner с учётом отступа */

  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__logo-text {
  font-size: 1.7rem;
  font-weight: 800;
  color: #000000;
}

.footer__nav {
  width: calc((100% - 2%) * 0.68); /* оставшиеся 68% от ширины .footer__inner */

  display: flex;
  align-items: center; /* колонки центрированы по высоте контейнера */
  justify-content: space-between; /* колонки равномерно распределены по ширине */
  gap: 16px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* кнопки внутри колонки — по левому краю */
  gap: 10px;
}

.footer__link {
  font-size: 0.82rem;
  color: #000000;
}

.footer__copy {
  text-align: center; /* строго по центру экрана, так как .site-footer занимает всю ширину */
  font-size: 0.78rem;
  color: #000000;
}

@media (max-width: 860px) {
  .topbar__inner,
  .catnav__inner {
    width: 92%;
  }

  .catnav__inner {
    justify-content: center;
  }

  .hero {
    width: 92%;
    flex-direction: column;
    min-height: 0;
  }

  .hero__left,
  .hero__right {
    width: 100%;
  }

  .hero__right {
    margin-top: 2%;
  }

  .hero__left-top,
  .hero__left-bottom,
  .hero__right-top-text,
  .hero__right-top-photos,
  .hero__right-bottom-text,
  .hero__right-bottom-action {
    flex: 1 1 auto;
    padding-top: clamp(10px, 3vmin, 20px);
    padding-bottom: clamp(10px, 3vmin, 20px);
  }

  .order,
  .lead-text {
    width: 92%;
  }

  .order__row--three {
    grid-template-columns: 1fr;
  }

  .order__submit {
    width: 100%;
    text-align: center;
  }

  .section-title,
  .unusual {
    width: 92%;
  }

  .unusual__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 4%;
  }

  .contacts {
    width: 92%;
  }

  .contacts__inner {
    width: 100%;
  }

  .contacts__bubble {
    flex: 1 1 220px;
    width: auto;
  }

  .footer__inner {
    width: 92%;
    flex-direction: column;
  }

  .footer__logo,
  .footer__nav {
    width: 100%;
  }

  .footer__nav {
    justify-content: space-between;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .unusual__grid {
    grid-template-columns: 1fr;
  }
}