/* =============================================================================
   prim-parket-overrides.css — правки под брендинг «Прайм Паркет»
   Подключается последним, перекрывает стили Hakwood.
   ========================================================================== */

/* ── 1. ЛОГОТИП В ШАПКЕ ───────────────────────────────────────────────────────

   Исходные стили Hakwood рассчитаны ТОЛЬКО на inline-SVG:
     #header .logo svg(width:var(--header-logo-width);
                       aspect-ratio:var(--header-logo-aspectRatio))
   Правил для <img class="logo"> нет вообще, поэтому картинка брала
   высоту из HTML-атрибута и раздувалась на 1200+ px.

   Здесь: чёрный вариант логотипа, ширина -35%, вписывание в шапку.        */

#header .logo,
#headerLogoOnly .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--header-height);
  overflow: hidden;          /* логотип не вылезает за пределы шапки */
  padding: 4px 0;
}

#header .logo img,
#headerLogoOnly .logo img {
  display: block;
  width: auto;
  height: auto;

  /* уменьшаем на 35% от штатного размера логотипа Hakwood */
  max-width: calc(var(--header-logo-width) * 0.65);

  /* логотип у нас квадратный (1950×1722), а у Hakwood был вытянутый
     (261×30). Из-за aspect-ratio исходный CSS растягивал картинку
     до 300×700 px — она вылезала за шапку. Ограничиваем по высоте,
     это и есть «-35%» для нашего пропорционального логотипа. */
  max-height: calc(var(--header-height) * 0.72);

  /* пропорции сохраняем — иначе логотип «садится боком» */
  aspect-ratio: 1950 / 1722;
  object-fit: contain;
  object-position: center;
}

/* На главной логотип гаснет до прокрутки (это поведение Hakwood) —
   но нам он нужен всегда, поэтому принудительно показываем. */
body.body--home #header:not(.header--scrolled) .logo,
body.body--home #headerLogoOnly .logo {
  opacity: 1;
  pointer-events: auto;
}

/* ── ВОДЯНОЙ ЗНАК В ПЕРВОМ ЭКРАНЕ ───────────────────────────────────────────

   Hakwood держит в hero-секции огромный полупрозрачный логотип (class="logo",
   но внутри #heroHome, а не в шапке). Под наш квадратный логотип он
   превращался в 300×700 px и ломал сетку. Это декорация — скрываем.     */

#heroHome .logo,
#heroHeader .logo {
  display: none !important;
}

/* ── 2. ОТСТУП В ШАПКЕ МЕНЮ ──────────────────────────────────────────────────

   Между пунктами первой строки нет явного gap — они идут вплотную.
   Добавляем воздуха, и отдельно увеличиваем интервал между
   «Изготовление на заказ» и «О компании».                                    */

#header .menu-level0 > li + li {
  margin-left: 0.35rem;
}

/* увеличенный отступ: «Изготовление на заказ» → «О компании» */
#header .menu--right > li:nth-child(2) {
  margin-left: 1.75rem !important;
  position: relative;
}

/* тонкий разделитель, чтобы разделение читалось */
#header .menu--right > li:nth-child(2)::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 50%;
  width: 1px;
  height: 1.6em;
  transform: translateY(-50%);
  background: currentColor;
  opacity: 0.22;
  pointer-events: none;
}

/* ── 3. ПРОЧИЕ МЕЛКИЕ ПРАВКИ ──────────────────────────────────────────────── */

/* логотип в подвале не должен наследовать размеры шапки */
footer .logo img,
.footer .logo img {
  max-width: 180px;
  max-height: none;
}

/* =============================================================================
   4. МОБИЛЬНАЯ АДАПТАЦИЯ
   -----------------------------------------------------------------------------
   Замеры через tools/mobile_probe.html показали: горизонтальной прокрутки
   нет, картинки целы, логотип в рамках на всех ширинах. Не хватает двух
   вещей — размера интерактивных целей и вертикальных отступов.

   Всё ниже применяется только на узких экранах, поэтому десктоп
   не затрагивается.
   ========================================================================== */

/* ── 4.1 Логотип на узких экранах ────────────────────────────────────────── */

@media screen and (max-width: 1024px) {
  #header .logo img,
  #headerLogoOnly .logo img {
    max-width: calc(var(--header-logo-width) * 0.52);
    max-height: calc(var(--header-height) * 0.66);
  }

  /* отступ между пунктами на мобильных не нужен: меню раскрывается
     в панель и пункты идут в столбик. Убрать и разделитель. */
  #header .menu--right > li:nth-child(2) {
    margin-left: 0 !important;
  }

  #header .menu--right > li:nth-child(2)::before {
    display: none;
  }
}

/* на телефонах логотип ещё мельче — шапка всего 60 px */
@media screen and (max-width: 480px) {
  #header .logo,
  #headerLogoOnly .logo {
    padding: 6px 0;
  }

  #header .logo img,
  #headerLogoOnly .logo img {
    max-width: calc(var(--header-logo-width) * 0.46);
    max-height: calc(var(--header-height) * 0.7);
  }
}

/* ── 4.2 БУРГЕР ──────────────────────────────────────────────────────────────

   У Hakwood зоны переключения такие:
     • до 1439 px — раскрытое меню скрыто, показан бургер;
     • от 1440 px — меню раскрыто, бургер остаётся в разметке.

   В первой зоне бургер у них 46×19 px: на телефоне и на планшете
   такой цели мимо. Растягиваем до 44×44 — ровно зона, где он и
   нужен. Свыше 1440 не трогаем: там курсор мыши, мелкая цель
   законна, а насильственный размер сдвинул бы логотип.

   Иконку внутри (.icon) оставляем прежней — растёт только
   невидимая зона нажатия, высота шапки не меняется.               */

@media screen and (max-width: 1439px) {
  #header .hamburger-button,
  #headerLogoOnly .hamburger-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
}

/* ── 4.3 ЦЕЛИ КАСАНИЯ ───────────────────────────────────────────────────────

   Правило 44×44 px — рекомендация для пальца, ниже 30 px промахнуться
   легко. В шапке Hakwood кнопки 23×26 и 26×26 px: визуально так и
   задумано, но на телефоне это слишком мелко.

   Увеличиваем САМИ кнопки, иконки внутри оставляем прежними —
   иначе шапка станет выше, чем рассчитано в --header-height.       */

/* кнопки справа от логотипа (корзина образцов, прочее).
   Норма 44 px действует до 1439 px — это последняя ширина, где
   экран ещё трогают пальцем (планшет в горизонтали, крупный
   телефон). Выше 1440 px меню раскрыто, курсор мыши, мелкая цель
   законна. */
@media screen and (max-width: 1439px) {
  #header .buttons > button,
  #header .buttons > a,
  #header .buttons button,
  #headerLogoOnly .buttons > button,
  #headerLogoOnly .buttons > a {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (max-width: 1024px) {
  /* кнопки-ссылки в тексте (например «закрыть поиск») */
  .partButton,
  .partButton span.buttonLabel {
    min-height: 44px;
  }

  .partButton {
    display: inline-flex;
    align-items: center;
  }

  /* пункты раскрытого меню: попасть пальцем по ссылке */
  #header-container .menu a,
  #header .menu a {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  /* строка поиска: поле 39 px и кнопка 40 px — чуть ниже нормы,
     а на телефоне поле должно быть и шире, и выше */
  .searchBarForm,
  .inputAndResetContainer {
    min-height: 44px;
  }

  .searchBarInput {
    min-height: 44px;
  }

  .searchBarButton {
    min-width: 44px;
    min-height: 44px;
  }

  /* стрелки карусели: у Hakwood ровно 40 px — впритык */
  .sliderButton {
    min-width: 44px;
    min-height: 44px;
  }

  /* выпадающие списки (код телефона, страна) */
  .dropDownButton {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── 4.3 ПАНЕЛЬ КОНТАКТОВ ───────────────────────────────────────────────────

   Hakwood держит справа выдвижную панель с адресом и телефоном.
   В закрытом виде она уехала за экран на translateX(100%) — при
   320 px это ровно за край, но поле поиска внутри наезжает на
   шапку. Ограничиваем ширину и добавляем отступ, чтобы панель
   открывалась целиком.                                                    */

/* панель и её элементы — с 1440 px она больше не нужна: там меню
   раскрыто и контакты видны сразу. До 1439 — касание, держим норму. */
@media screen and (max-width: 1439px) {
  .fixedContactContainer {
    width: min(360px, 100vw);
    max-width: 100vw;
  }

  /* крестик закрытия — 40 px, доводим до нормы */
  .fixedContactContainer .closeButton {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* боковая вкладка «Свяжитесь с нами» */
  .fixedContactContainer .labelButton {
    min-width: 44px;
  }

  .fixedContactContainer .labelButton span {
    font-size: 12px;
    letter-spacing: 0.02em;
  }
}

@media screen and (max-width: 1024px) {
  .fixedContactContainer .brand-office-line {
    font-size: 1rem;
    line-height: 1.5;
  }
}

/* ── 4.4 ТИПОГРАФИКА И ОТСТУПЫ ───────────────────────────────────────────────

   Hakwood свёрстан под большой экран: на телефоне заголовки
   остаются крупными, а текстовые блоки идут впритык к краям.
   Смягчаем.                                                                */

@media screen and (max-width: 767px) {
  :root {
    --basicContainer-padding: 1.15rem;
    --base-spacing-horizontal: 1.15rem;
    /* уменьшаем базовый шрифт на мобильных */
    --base-font-size: 15px;
  }

  /* заголовки: без переносов, с балансировкой строк */
  h1, h2, h3 {
    overflow-wrap: normal;
    hyphens: manual;
    text-wrap: balance;
    word-break: keep-all;
  }

  /* навигация и меню: без переносов */
  .customNavigation a,
  .menu a,
  .partButton,
  .partButton span,
  .sliderButton,
  .dropDownButton {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  /* текстовые блоки: переносы только по словам, без переносов внутри слова */
  p, li, td, th, .partContentText, .brand-office-line {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }

  /* длинные слова (URL, названия) — переносить только при необходимости */
  a {
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* таблицы: не растягивать слова */
  table {
    table-layout: fixed;
    width: 100%;
  }

  td, th {
    word-break: keep-all;
    overflow-wrap: normal;
  }

  /* карточки товаров: название не переносить */
  .productCardTitle,
  .partHeading {
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: manual;
  }

  /* формы: не растягивать инпуты */
  input, textarea, select {
    font-size: 16px; /* iOS не зумит */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── 4.5 ТАБЛИЦЫ ────────────────────────────────────────────────────────────

   В узком экране таблица шире вьюпорта и уезжает вбок. Разрешаем
   ей скроллиться внутри себя — страница при этом не дёргается.    */

@media screen and (max-width: 767px) {
  .tableData,
  .partContentTable,
  .tableWrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tableData table {
    width: 100%;
  }
}

/* ── 4.6 КАРУСЕЛИ ───────────────────────────────────────────────────────────

   Карусель Hakwood — это flex-строка шириной во много экранов.
   На телефоне она должна листаться пальцем, а не обрезаться.   */

@media screen and (max-width: 1024px) {
  .carousel-list {
    -webkit-overflow-scrolling: touch;
  }

  .carousel-list .carousel-item {
    flex-shrink: 0;
  }
}

/* ── 4.7 ПРОЧЕЕ ───────────────────────────────────────────────────────────── */

/* фокус с клавиатуры должен быть виден и на телефоне */
@media (hover: none) {
  a:active,
  button:active {
    opacity: 0.7;
  }
}

/* не даём iOS увеличивать текст при повторном тапе */
@media screen and (max-width: 767px) {
  input,
  textarea,
  select,
  button {
    font-size: 1rem;      /* иначе iOS зумит страницу при фокусе */
  }
}

/* ── 4.8 СТРАНИЦА «КОНТАКТЫ»: КАРТОЧКИ, МАРШРУТЫ, КАРТА ─────────────────────

   Страница переработана 10.10.2026. Вместо одного вертикального списка
   ссылок — сетка карточек 2×2 (телефон, мобильный, почта, часы), адрес
   с кнопками маршрута и карта.

   Почему карточки, а не строки: телефон, почта и часы — величины
   разного порядка, а рядом ещё и «мобильный», и адрес. В строках они
   спорили друг с другом: номера браузер красил в системный синий
   (#0000EE) и растягивали строку на всю ширину. Карточка даёт всем
   блокам одинаковый вес, а фону --brand-color-warm-grey-light —
   то самое тёплое зерно, которое сайт использует в секциях theme-brownLight.

   Синий цвет ссылок здесь убран осознанно: цвет задаётся явно, иначе
   tel:/mailto: остаются системными. Это была единственная «чужая»
   краска на странице.                                                */

.contactCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--base-spacing-20, 16px);
}

.contactCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--base-spacing-30, 24px);
  background-color: var(--brand-color-warm-grey-light);
  border-radius: var(--border-radius, 1em);
}

.contactCardLabel {
  font-size: 0.75rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-color-brown-dark);
  opacity: 0.55;
}

/* значение — главное в карточке; у ссылок 44 px под палец */
.contactCardValue {
  display: inline-block;
  min-height: 44px;
  padding: 4px 0;
  font-size: clamp(1.15rem, 0.85rem + 0.8vw, 1.5rem);
  line-height: 1.35;
  color: var(--brand-color-brown-dark);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: max(1px, 0.06em);
  overflow-wrap: anywhere;   /* длинная почта не должна рвать карточку */
}

.contactCardValue--text {
  text-decoration: none;     /* «10:00 — 18:00» не ссылка, подчёркивание врало бы */
}

@media (hover: hover) {
  a.contactCardValue:hover {
    text-decoration-color: rgba(44, 33, 27, 0.45);
  }
}

.contactCardNote {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--brand-color-brown-dark);
  opacity: 0.65;
}

/* кнопки маршрута — тот же приём, что и ссылки-подчёркивания в CTA:
   капслок, разрядка, шеврон, высота не меньше 44 px под палец */
.contactRoutes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--base-spacing-30, 24px);
  margin-top: var(--base-spacing-30, 24px);
}

.contactRoute {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 44px;
  font-size: 0.875rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-color-brown-dark);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: max(1px, 0.08em);
}

.contactRoute .icon {
  display: inline-flex;
  width: 1.15em;
  height: 1.15em;
}

.contactRoute .icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

@media (hover: hover) {
  .contactRoute:hover {
    text-decoration-color: rgba(44, 33, 27, 0.45);
  }
}

/* Шаблон прятал #contactLocations .image: в исходной разметке там висела
   пустая заглушка <div class="image"></div>, и index.css задал ей
   display:none плюс отрицательные поля под «вылетающую» за колонку
   картинку. В новой разметке в этом блоке живёт карта, поэтому правило
   откатываем — конкретнее, чем у шаблона (добавлен второй класс). */
#contactLocations .image.image--right {
  display: block;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

/* карта: скруглённая рамка в стиле сайта, серый фон — пока карта грузится
   (или если гость офлайн), пустого белого прямоугольника не будет.
   aspect-ratio 4/3 на широкой колонке даёт 780 px высоты — карта не должна
   быть выше текста рядом, поэтому ограничиваем max-height. */
.contactMap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 300px;
  max-height: 560px;
  overflow: hidden;
  border-radius: var(--border-radius, 1em);
  background-color: var(--brand-color-warm-grey, #ece9e2);
}

.contactMap iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media screen and (max-width: 900px) {
  /* телефон: карточки в столбик, иначе номер в 1.5 rem не помещается */
  .contactCards {
    grid-template-columns: 1fr;
  }

  /* сетка сама ставит картинку первой (order:-1) — для карты это наоборот:
     сначала адрес и кнопки, потом карта */
  #contactLocations .image {
    order: 0;
  }

  .contactMap {
    aspect-ratio: 16 / 11;
    min-height: 240px;
    max-height: 420px;
  }
}

@media screen and (max-width: 767px) {
  .contactCard {
    padding: var(--base-spacing-20, 16px);
  }
}

/* ── 4.9 КОНТАКТЫ В ПОДВАЛЕ И В ПЛАШКЕ «СВЯЖИТЕСЬ С НАМИ» ───────────────────
   Телефон — главное действие, поэтому он в подвале заметнее
   остального текста и на телефоне занимает всю ширину колонки.
   Адрес и часы — обычным текстом, они читаются, а не нажимаются. */

#footer-main .column--contacts .list--contacts {
  margin: 0;
  padding: 0;
  list-style: none;
}

#footer-main .column--contacts li {
  margin-bottom: var(--base-spacing-10, 8px);
  line-height: 1.4;
}

#footer-main .column--contacts .contactPhone {
  /* --base-fontSize-h4 на этом сайте — это 36px: для заголовка
     нормально, для телефона в подвале гигантский. Размер задаём
     своими rem, телефон должен читаться, а не кричать. */
  font-size: 1.25rem;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* 44 px — минимальная область нажатия, чтобы по телефону можно
   было попасть пальцем. На узком экране телефон становится
   главным действием страницы, там это критично. */
#footer-main .column--contacts a[href^='tel:'],
#footer-main .column--contacts a[href^='mailto:'] {
  display: inline-block;
  min-height: 44px;
  padding: 11px 0;
}

#footer-main .column--contacts .contactAddress,
#footer-main .column--contacts .contactHours {
  font-size: var(--base-fontSize-small, 0.875rem);
  opacity: 0.8;
}

#footer-main .column--contacts a:not(.contactPhone) {
  text-decoration: none;
}

#footer-main .column--contacts a:not(.contactPhone):hover {
  text-decoration: underline;
}

/* плашка в углу экрана */
.fixedContactContainer .contactPhone {
  display: inline-block;
  min-height: 44px;
  line-height: 1.45;
  font-size: 1.25rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.fixedContactContainer p {
  margin-bottom: var(--base-spacing-10, 8px);
}

/* подвал на телефоне: колонка контактов идёт первой —
   иначе телефон уезжает под самый конец страницы */
@media screen and (max-width: 900px) {
  #footer-main .column--contacts {
    order: -1;
  }

  #footer-main .column--contacts .contactPhone {
    font-size: 1.25rem;
    display: block;
  }
}

/* ── КАЖДЫЙ ЭЛЕМЕНТ АДРЕСА — СВОЯ СТРОКА ──
 *
 * В разметке это соседние <span> без разделителей:
 *
 *   <p><span class="brand-office-line">Салон в Иркутске</span>
 *      <span class="brand-office-line">ул. Александра Невского, 23</span>
 *      <span class="brand-office-line">Октябрьский район</span></p>
 *
 * Без display:block они слипаются в одну строку:
 * «Салон в Иркутскеул. Александра Невского, 23Октябрьский район».
 * Блок встречается 448 раз, то есть на всех 111 страницах: и в
 * плашке «Свяжитесь с нами», и в разделе «Как нас найти».
 *
 * Комментарий здесь обязателен целиком, и это не формальность.
 * Если закрыть его на первой строке, дальнейшие строки « * …»
 * браузер считает продолжением селектора, склеивает с ними
 * наше правило — и молча выбрасывает весь блок целиком.
 * Именно так и вышло: правило было в файле, а в браузере его
 * не было, и css_lint ошибок не показывал.
 */
.brand-office-line {
  display: block;
}

/* версия: 4 — адресные строки разложены по строкам */
/* ── ПЕРВЫЙ И ПОСЛЕДНИЙ ЭКРАН ГЛАВНОЙ БЕЗ КАРТИНКИ ───────────────────────
 *
 * Заказчик попросил убрать картинки с первого и последнего экрана
 * главной: на обоих стояла одна и та же картинка — эскиз клиента, в
 * начале кадром 1500x1164, в конце его же обрезкой 16:9. Разметку
 * меняет tools/remove_home_edge_images.py, здесь только цвета.
 *
 * Первый экран светлый от природы: фон #dadbd4, текст #2c211b.
 * Ломается только градиент :after — он затемнял низ экрана, чтобы
 * подпись читалась поверх фотографии. Фотографии больше нет, и под
 * тёмным текстом осталась бы тёмная полоса.
 *
 * С последним наоборот: .homeFullscreenBlock залит в
 * --base-color-black (#1f2328), и подписи в нём белые. Чёрный текст
 * на почти чёрном не читался бы, поэтому фон меняется на светлый —
 * тот же, что у первого экрана: края страницы выглядят одинаково.
 */

/* было затемнение под фотографию */
#heroHome:after {
  content: none;
}

/* Без фотографии текст по центру. Раньше он стоял во второй строке
 * сетки, под картинкой высотой 100vh, и придерживался нижнего края.
 * Теперь верхней строки нет, а .text идёт обычным блоком и прижался
 * бы к верху — поэтому он сам становится сеткой и центрирует
 * содержимое.
 *
 * Отступы обнуляются оба. padding-top:calc((133vw - 100vh) / 3) —
 * формула под текст, наложенный на фотографию высотой 100vh: чем
 * шире экран, тем больше отступ. На экране 1920 она даёт 491px и
 * уводит заголовок за пределы первого экрана. Без фотографии
 * формула не имеет смысла. */
#heroHome .text {
  grid-row: 1 / -1;
  display: grid;
  place-content: center;
  padding: 0;
}

.homeFullscreenBlock--textOnly {
  background-color: #dadbd4;
}

.homeFullscreenBlock--textOnly .text .partHeading,
.homeFullscreenBlock--textOnly .text .partHeading.h3 a {
  color: #2c211b;
}

/* ------------------------------------------------------------------
   Иконки-ссылки в правом углу шапки
   ------------------------------------------------------------------
   header.css задаёт размер и цвет иконок только кнопкам:

     #header .buttons button svg { max-width:30px; max-height:30px;
                                  width:100%; height:100%;
                                  fill:currentColor }
     #header .buttons button svg { max-width:26px; max-height:26px }
     #header .buttons .shoppingCartBasket { position:relative;
                                           color:currentColor }

   Две иконки (Галерея цветов, Контакты) переделаны из кнопок в
   ссылки — они под эти правила не попадают, и результат был:
   иконка фактуры 16x16 вместо 26x26 и тёмная вместо текущего
   цвета (потому что у правил partshoppingcart специфичность ниже, а
   размер и цвет шли именно отсюда), а у Контактов не осталось ни
   одного правила вовсе — svg без width/height схлопывался в 0x0, и
   иконки не было видно. Шапка из-за этого выглядела кривой.

   Ниже — те же правила, но и для ссылок. Значения взяты из
   header.css как есть, чтобы иконки совпали с поиском. */

#header .buttons > a.headerIcon--js,
#headerLogoOnly .buttons > a.headerIcon--js {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

#header .buttons > a.headerIcon--js svg,
#headerLogoOnly .buttons > a.headerIcon--js svg {
  max-width: 26px;
  max-height: 26px;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

#header .buttons > a.headerIcon--js .shoppingCartBasket,
#headerLogoOnly .buttons > a.headerIcon--js .shoppingCartBasket {
  position: relative;
  color: currentColor;
}

/* ------------------------------------------------------------------
   Логотип в подвале
   ------------------------------------------------------------------
   Внизу каждой страницы Hakwood ставит круглую эмблему-отпечаток
   инлайновым <svg class="fingerprint">. Она заменена на логотип
   Прайм Паркет (tools/replace_footer_logo.py), и теперь это <img>.

   Правило в footer.css заточено под тег — «#footer-bottom
   svg.fingerprint { max-width:60px; margin-left:auto;
   margin-right:auto }». Под картинку оно не подходит: у тега svg
   размер идёт по viewBox, а img без width и height растянется по
   собственному файлу — то есть на 1170 пикселей поперёк подвала.
   Поэтому правило дублируется для .footerLogo, с теми же размерами
   и отступами, что были у эмблемы. */

#footer-bottom .footerLogo {
  display: block;
  width: auto;
  height: auto;
  max-width: 60px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 900px) {
  #footer-bottom .footerLogo {
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------
   ЛОГОТИП ПОВЁРНУТ НА 45° — ТАК ЗАДУМАНО
   ------------------------------------------------------------------
   Знак Прайм Паркет лежит в romбоме, и подпись «Прайм Паркет» идёт
   по диагонали. Так он выглядит и в шапке, и в подвале — заказчик
   подтвердил 08.10.2026, что это фирменное начертание.

   Поворот задан самим рисунком (prim-parket-logo-black.png), а не
   CSS: transform у картинки и у ссылки — none. Правом не «чинить»
   это не нужно. Размеры логотипа задаются только max-width/max-height
   в этом файле. */

/* версия: 7 — логотип Прайм Паркет в подвале вместо эмблемы Hakwood */

/* ------------------------------------------------------------------
   ТЕЛЕФОН: ПОСЛЕДНЯЯ ИКОНКА НЕ НАЕЗЖАЕТ НА ЛОГОТИП
   ------------------------------------------------------------------
   На экранах до 667 px шапка 60 px, логотип отцентрован, а .buttons
   позиционируется absolute у правого края. Три иконки по 44 px с
   зазором 15 px занимают 162 px и левым краем заходят на логотип:
   на 390 px — на 18 px, на 360 px — на 33 px, на 320 px — на 53 px.
   Налезает именно поиск, потому что он первый в ряду.

   header.css в том же брейкпоинте прятал последнюю кнопку
   (#header .buttons button:last-child), но две иконки (Галерея
   цветов и Контакты) давно переписаны в ссылки — правило перестало
   совпадать ни с чем, и все три иконки остались на месте.

   Решение: на телефоне прячем последнюю иконку — «Контакты». Первым
   пунктом гамбургер-меню она и так есть, а поиск и Галерея цветов
   остаются в правом углу. На планшетах (668–1023 px) три иконки
   помещаются в свободное место справа от логотипа и не прячутся.

   Специфичность равна правилу «#header .buttons > a.headerIcon--js»
   из этого же файла (один id, два класса, один тег), поэтому блок
   стоит ниже него: при равной специфичности выигрывает порядок. */

@media screen and (max-width: 667px) {
  #header .buttons > a:last-child,
  #header .buttons > button:last-child {
    display: none;
  }
}

/* версия: 8 — на телефоне скрыта последняя иконка шапки (не наезжает на логотип) */

/* ── 4.10 СТРАНИЦА «ДВЕРИ»: ГАЛЕРЕИ ПОЛОТЕН И СХЕМЫ ─────────────────────────

   Страница переработана 10.10.2026 вокруг двух тем: массивные двери и
   двери в эмали. Фотографии полотен — вертикальные, и у каждой двери свой
   рост: дверь выше пола. Поэтому галерея не режет их под общий кадр
   (обрезанная дверь — это уже не дверь), а ставит на общую линию по
   нижнему краю: получается ряд, как в шоуруме.                          */

.doorGallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--base-spacing-20, 16px);
  align-items: end;
}

.doorGallery figure {
  margin: 0;
}

.doorGallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius, 1em);
}

/* схемы и чертежи: белый лист садится на тёплую подложку карточки —
   mix-blend-mode: multiply растворяет белый фон чертежа в карточке,
   поэтому схема выглядит напечатанной, а не вклеенной */
.doorSchemes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--base-spacing-20, 16px);
}

.doorSchemes figure {
  margin: 0;
  padding: var(--base-spacing-30, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-color-warm-grey-light);
  border-radius: var(--border-radius, 1em);
}

.doorSchemes img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

/* Схемы идут одна под другой на всю ширину и в высоту занимают
   больше двух экранов. В раскладке «текст слева, схемы справа»
   короткий текст растягивался на всю высоту схем, и рядом с ним
   оставалась колонка пустоты почти в две тысячи пикселей.
   Поэтому текст идёт сверху во всю ширину, а схемы — под ним. */
#door-details {
  display: block !important;
}

#door-details .text {
  max-width: 78ch;
}

#door-details .image {
  margin-top: var(--base-spacing-40, 40px);
}

@media screen and (min-width: 1500px) {
  #door-details .doorSchemes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Снимок петли крупным планом. Во всю ширину страницы он вырастал
   в баннер на полтора экрана, поэтому ширина ограничена. */
#door-details .doorSchemes--photo {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* широкий лист с чертежами — на всю ширину галереи */
.doorSchemes figure:last-child {
  grid-column: 1 / -1;
}

/* третья карточка — фотография вместо чертежа: своя подложка и без multiply,
   чтобы снимок не темнел на тёплом фоне карточки */
.doorSchemes figure.doorSchemes--photo {
  padding: 0;
  background-color: transparent;
}

.doorSchemes figure.doorSchemes--photo img {
  mix-blend-mode: normal;
}

/* Два чертежа рядом — но только на широком экране, где каждому
   достаётся около тысячи пикселей. Уже этого подписи на них —
   размеры, номера выносок, названия деталей — становятся мелкими,
   поэтому ниже схемы идут по одной в строке. */

/* пометка о том, что фотографии — временные иллюстрации */
.doorStockNote {
  max-width: 46ch;
  margin-top: var(--base-spacing-20, 16px);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--brand-color-brown-dark);
  opacity: 0.6;
}

@media screen and (max-width: 900px) {
  .doorGallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 600px) {
  /* телефон: двери идут по одной — полотно остаётся читаемым */
  .doorGallery {
    grid-template-columns: 1fr;
  }

  .doorSchemes figure {
    padding: var(--base-spacing-20, 16px);
  }
}

/* §4.11 Пустое состояние виджета «Ваши образцы» (страница запроса образцов):
   системное info-сообщение перекрашиваем из синего в тёплую палитру */
#ajaxRequestASampleContainer .partMessageInfo .messageContainer {
  background-color: rgba(176, 153, 111, 0.16);
  color: var(--brand-color-brown-dark);
  border-left: 3px solid var(--brand-color-kraft);
}

#ajaxRequestASampleContainer .partMessageInfo .messageContainer svg {
  fill: var(--brand-color-brown-dark);
}

/* якорь «Ваши образцы»: заголовок секции не должен уезжать под липкую шапку (100px) */
#requestASample {
  scroll-margin-top: 110px;
}

/* §4.12 Карточки цветов: секция «многослойная конструкция».
   В index.css для всех [data-anchor-scroll] задано position:absolute; top:0, и у
   соседних секций (productDimensions, productGrades, productMaintenance…) это
   перекрыто собственными правилами position:relative, а у #productmodule такого
   правила нет — блок уезжает в начало страницы и белой подложкой накрывает герой
   (h1 «Amboise» и таблица характеристик обрезаются). Возвращаем секцию в поток. */
#productmodule[data-anchor-scroll] {
  position: relative;
  top: auto;
}

/* версия: 15 — страница «Двери»: галереи полотен, схемы (SVG на русском), фото вместо чертежа, пометка о стоке (§4.10); тёплое пустое состояние виджета образцов и якорь под липкой шапкой (§4.11); секция #productmodule карточек цветов в потоке (§4.12) */


/* §4.13 — кликабельная картинка средств ухода OSMO (статья «Как чистить и ухаживать») */
figure>a.imageLink{display:block}
figure>a.imageLink .imagePlaceholderContainer{transition:opacity .3s}
figure>a.imageLink:hover .imagePlaceholderContainer{opacity:.92}


/* §4.14 — батч статики: maintenance #howtoorder в одну колонку, пустое состояние /news/,
   пустой результат фильтров color-gallery, корзина и форма запроса образцов */

/* maintenance: после удаления картинки HAKWOOD секция «Как заказать» — одна колонка */
#howtoorder .container {
  grid-template-columns: 1fr;
}

#howtoorder .text {
  max-width: 100%;
}

/* color-gallery: пустой результат фильтра/поиска */
.cgEmpty {
  padding: var(--base-spacing-40, 32px) 0;
  margin: 0;
  text-align: center;
  color: var(--brand-color-brown-dark);
  opacity: 0.6;
}

/* /news/: пустое состояние ленты (карточки пишет админка между маркерами) */
.adminEmptyState {
  padding: var(--base-spacing-40, 32px) 0;
  margin: 0;
  text-align: center;
  color: var(--brand-color-brown-dark);
  opacity: 0.6;
}

/* sample-request: корзина образцов */
.srPicker {
  display: flex;
  gap: var(--gap, 16px);
  align-items: stretch;
  margin: var(--base-spacing-30, 24px) 0 var(--base-spacing-20, 16px);
}

.srInput {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7em 1em;
  border: 1px solid rgba(176, 153, 111, 0.55);
  background: #fff;
  font: inherit;
  color: inherit;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.srInput:focus {
  outline: none;
  border-color: var(--brand-color-brown-dark);
}

.srCartList {
  list-style: none;
  margin: 0 0 var(--base-spacing-30, 24px);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 16px);
}

.srChip {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 0.4em 0.45em 1em;
  border: 1px solid rgba(176, 153, 111, 0.55);
  background: #fff;
  font-size: 0.9375rem;
}

.srChipLabel {
  opacity: 0.6;
  font-size: 0.875em;
}

.srChipRemove {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0.1em 0.35em;
  line-height: 1;
  font-size: 1.2em;
  color: var(--brand-color-brown-dark);
  opacity: 0.6;
}

.srChipRemove:hover {
  opacity: 1;
}

/* sample-request: форма заявки */
.srForm {
  margin-top: var(--base-spacing-40, 32px);
  display: grid;
  gap: var(--base-spacing-20, 16px);
  max-width: 720px;
}

.srFormTitle {
  margin: 0;
}

.srField {
  display: grid;
  gap: 0.45em;
}

.srField label {
  font-size: 0.875rem;
}

.srReq {
  color: var(--brand-color-kraft);
  margin-left: 0.15em;
}

.srField input,
.srField textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7em 1em;
  border: 1px solid rgba(176, 153, 111, 0.55);
  background: #fff;
  font: inherit;
  color: inherit;
  border-radius: 0;
}

.srField input:focus,
.srField textarea:focus {
  outline: none;
  border-color: var(--brand-color-brown-dark);
}

.srField textarea {
  resize: vertical;
  min-height: 6em;
}

.srError {
  margin: 0;
  font-size: 0.875rem;
  color: #a03;
}

.srActions {
  display: flex;
  gap: var(--gap, 16px);
  align-items: center;
  flex-wrap: wrap;
}

.srNote {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  opacity: 0.7;
  max-width: 46ch;
}

.srCopyButton {
  justify-self: start;
}

.srSuccess {
  padding: 28px 24px;
  border: 1px solid #e7e0d6;
  border-radius: var(--border-radius, 1em);
  background: #fbf9f6;
  text-align: center;
}

.srSuccessTitle {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #2C211B;
}

/* форма на странице «Контакты» */
.cfIntro {
  max-width: 60ch;
  opacity: 0.8;
}

.cfForm {
  max-width: 640px;
  margin-top: 24px;
}

.cfHp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

.cfField {
  margin-bottom: 16px;
}

.cfField label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 6px;
  color: #2C211B;
}

.cfField input,
.cfField textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cfc4b6;
  border-radius: 8px;
  font: inherit;
  color: #2C211B;
  background: #fff;
  box-sizing: border-box;
}

.cfField input:focus,
.cfField textarea:focus {
  outline: 2px solid #8a6a3f;
  outline-offset: 0;
  border-color: #8a6a3f;
}

.cfReq {
  color: #a03;
}

.cfError {
  margin: 0 0 12px;
  color: #a03;
  font-size: 0.875rem;
}

.cfActions {
  margin-top: 4px;
}

.cfSuccess {
  max-width: 640px;
  padding: 28px 24px;
  border: 1px solid #e7e0d6;
  border-radius: 1em;
  background: #fbf9f6;
  text-align: center;
}

.cfSuccessTitle {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #2C211B;
}

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

@media screen and (max-width: 600px) {
  .srPicker {
    flex-direction: column;
  }

  .srActions {
    align-items: flex-start;
  }
}

/* версия: 16 — §4.14: maintenance #howtoorder в одну колонку; пустое состояние /news/
   (.adminEmptyState) и пустой результат фильтров color-gallery (.cgEmpty); корзина образцов
   и форма заявки sample-request (.sr*) */

/* ── 4.15 ГЛАВНАЯ: HERO-СЕКЦИЯ ПОД ШАПКОЙ ───────────────────────────────────
   Шапка fixed с высотой 100px, а hero-секция начинается с top:0 и имеет
   фон #dadbd4. Из-за этого над шапкой видна тонкая полоса фона hero.
   Добавляем margin-top, чтобы hero начинался под шапкой. */
#heroHome {
    margin-top: var(--header-height, 100px);
}

/* ── 4.16 СКРЫТИЕ АРТЕФАКТА >>> В ЛЕВОМ ВЕРХНЕМ УГЛУ ───────────────────────
   В браузере на главной странице отображается текстовый артефакт ">>>".
   В исходном коде он не найден — генерируется динамически (возможно, DailyCMS).
   Удаляем текстовые узлы с ">>>" через JS (assets/js/fix-artifact.js). */

/* ── 4.17 ПУНКТ «НОВОСТИ» В ВЕРХНЕМ МЕНЮ ───────────────────────────────────
   Клиент просил поставить «Новости» рядом с «Продукция» и выделить
   красным: раздел новый, его не должно быть видно только в подменю
   «База знаний». Класс menuLevelAccent ставит tools\fix_release_audit.py. */
#header .menu-level0.menuLevelAccent > a {
    color: #B3261E;
}
#header .menu-level0.menuLevelAccent > a:hover,
#header .menu-level0.menuLevelAccent > a:focus-visible {
    color: #8C1D17;
}
@media (max-width: 900px) {
    #header .menu-level0.menuLevelAccent > a { color: #B3261E; }
}

/* ── 4.18 ОТСТУПЫ НА СТРАНИЦЕ НОВОСТИ ───────────────────────────────────────
   Клиент: между картинкой новости и текстом нужен отступ, а после
   текстового блока — большой. Без этого текст прилипал к картинке,
   а следующий блок («Обсудим ваш проект») начинался сразу после него. */
#newsImage { margin-bottom: 56px; }
#newsBody  { margin-bottom: 120px; }
#newsBody .coreContent ul {
    margin: 1.2em 0 0;
    padding-left: 1.25em;
}
#newsBody .coreContent li {
    margin-bottom: .45em;
}
@media (max-width: 900px) {
    #newsImage { margin-bottom: 36px; }
    #newsBody  { margin-bottom: 80px; }
}

/* ── 4.19 ССЫЛКА «НОВОСТИ И АКЦИИ» В ПОДВАЛЕ ────────────────────────────────
   Клиент попросил вынести раздел в отдельную страницу, поставить её
   первой в подвале и выделить красным. Стиль задан здесь, чтобы не
   лезть в общие таблицы стилей. */
/* Селектор повторяет чужое правило #footer-main .column .list li a,
   у которого color:inherit. По специфичности (1,1,0) против (1,3,2)
   простое «#footer .footerNewsLink» проигрывало бы и ссылка осталась
   бы чёрной. Поэтому класс добавлен и в цепочку селектора. */
#footer-main .column .list li a.footerNewsLink,
#footer .footerNewsLink {
    color: #B3261E;
    font-weight: 600;
}
#footer-main .column .list li a.footerNewsLink:hover,
#footer-main .column .list li a.footerNewsLink:focus-visible,
#footer .footerNewsLink:hover,
#footer .footerNewsLink:focus-visible {
    color: #8C1D17;
}
#footer .footerNewsItem {
    order: -1;
}

/* ── 4.20 ВЫБОР СОЦСЕТЕЙ К КНОПКЕ «ПОДПИСАТЬСЯ» ───────────────
   Кнопка была пустой: ни обработчика, ни формы за ней.
   Теперь раскрывает список тех сетей, что уже есть в подвале:
   иконки берутся из тех же самих SVG, но рисуем значом. */
#contentNewsletterForm .ppSocialChoice {
    margin-top: 1.5rem;
    padding: 1.25rem 1.25rem 1.4rem;
    background: var(--base-color-white, #fff);
    border: 1px solid var(--brand-color-warm-grey-light, #E2DCD0);
    border-radius: 2px;
    box-shadow: 0 12px 32px rgba(44, 33, 27, .10);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
}
#contentNewsletterForm .ppSocialChoice[hidden] {
    display: none;
}
#contentNewsletterForm .ppSocialChoice.is-open {
    opacity: 1;
    transform: translateY(0);
}
#contentNewsletterForm .ppSocialChoiceTitle {
    margin: 0 0 .9rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--brand-color-brown-dark, #2C211B);
}
#contentNewsletterForm .ppSocialChoiceList {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
#contentNewsletterForm .ppSocialChoiceItem a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .8rem .35rem .7rem;
    border: 1px solid var(--brand-color-warm-grey-light, #E2DCD0);
    border-radius: 2px;
    color: var(--brand-color-brown-dark, #2C211B);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#contentNewsletterForm .ppSocialChoiceItem a:hover,
#contentNewsletterForm .ppSocialChoiceItem a:focus-visible {
    background: var(--brand-color-brown-dark, #2C211B);
    border-color: var(--brand-color-brown-dark, #2C211B);
    color: var(--base-color-white, #fff);
}
#contentNewsletterForm .ppSocialChoiceItem svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    display: block;
}
#contentNewsletterForm .ppSocialChoiceLabel {
    font-size: .78rem;
    line-height: 1.15;
    text-align: center;
}
#contentNewsletterForm .ppSocialChoiceNote {
    margin: .85rem 0 0;
    font-size: .8rem;
    line-height: 1.35;
    color: var(--brand-color-brown-mid, #7A6A5C);
}
@media (max-width: 667px) {
    #contentNewsletterForm .ppSocialChoice {
        padding: 1rem;
    }
    #contentNewsletterForm .ppSocialChoiceList {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (prefers-reduced-motion: reduce) {
    #contentNewsletterForm .ppSocialChoice {
        transition: none;
        transform: none;
    }
}
/* ── 4.21 ЗАПРОС ОБРАЗЦОВ: РАЗВОДКА ПОДБОРКИ И ФОРМЫ ───────────────────────
   Секция была собрана из разных блоков: заголовок стоял по центру,
   содержимое — слева, подборка и форма шли друг за другом во всю
   ширину, из-за чего читалось как черновик. Здесь они разводятся по
   колонкам, а копирование заявки становится запасным действием,
   а не вторым равноправным.

   Заодно убирается провал вверху страницы: из трёх снимков во
   вступлении оставлен один, а сетка под него переведена в одну
   колонку. Раньше третий снимок был растянут на обе строки, а
   картинка внутри сохраняла пропорции — под ней зияла пустота,
   и весь верх страницы выглядел разобранным. */
#introTwoColumnsWithAnchors .image .container {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
}

#introTwoColumnsWithAnchors .image .partContentFileImageGallery {
    grid-column: 1 !important;
    grid-row: auto !important;
}

/* пропорции кадра задаёт .imagePlaceholder через padding-bottom;
   75% соответствует самому снимку 1440×1080, поэтому картинка
   показывается целиком, без обрезки и растяжения */
#introTwoColumnsWithAnchors .image .imagePlaceholder {
    padding-bottom: 75% !important;
}

#requestASample .partHeading {
    text-align: left;
}

#requestASample .container {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

#requestASample .partContentText {
    max-width: 62ch;
}

#ajaxRequestASampleContainer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.75rem 3.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

.srCart .h5 {
    display: inline-block;
    margin-bottom: 0.85rem;
}

/* Кнопка «Добавить» стоит рядом с полем в узкой колонке и
   переносилась на две строки — «ДОБАВИТ / Ь». */
.srPicker .buttonLabel {
    white-space: nowrap;
}

.srCount {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1em 0.6em;
    border: 1px solid rgba(176, 153, 111, 0.55);
    font-size: 0.8125rem;
    opacity: 0.75;
    vertical-align: baseline;
}

.srCount:empty {
    display: none;
}

.srCart {
    position: sticky;
    top: calc(var(--header-height, 100px) + 1rem);
}

.srCartList {
    margin-bottom: 0;
}

.srForm {
    margin-top: 0;
    padding: 1.5rem 1.5rem 1.75rem;
    border: 1px solid rgba(176, 153, 111, 0.45);
    background: #fff;
}

.srFormTitle {
    margin-bottom: 0.25rem;
}

.srActions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
}

/* запасное действие: не соревнуется с основной кнопкой */
.srCopyButton {
    justify-self: start;
    border: 0;
    background: none;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 0.25em;
    opacity: 0.7;
    cursor: pointer;
}

.srCopyButton:hover {
    opacity: 1;
}

.srNote {
    max-width: none;
}

/* Подборка пуста и потому коротка, а форма справа высокая: под
   подборкой оставалась полоса пустоты в четверть экрана. Здесь она
   занята по делу — тем, что происходит после отправки заявки. */
.srNext {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(176, 153, 111, 0.45);
}

.srNextTitle {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
}

.srNextList {
    margin: 0 0 0 1.15rem;
    padding: 0;
    color: var(--brand-color-brown-mid, #7A6A5C);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.srNextList li {
    margin-bottom: 0.6rem;
}

.srNextList li:last-child {
    margin-bottom: 0;
}

.srNextNote {
    display: block;
    margin-top: 1rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--brand-color-brown-mid, #7A6A5C);
    opacity: 0.8;
}

@media screen and (max-width: 900px) {
    #ajaxRequestASampleContainer {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .srCart {
        position: static;
    }
}

/* На узком экране секции строились на именованных линиях сетки, из-за
   чего блок с фотографиями вставал над заголовком, колонки не
   складывались и текст уезжал за правый край. Здесь секции
   переключаются на обычную вертикальную раскладку. */
/* !important обязателен: адаптивные стили сайта подгружаются скриптом
   уже после этого файла и без флага перебивают раскладку секций.

   Колонки сетки у галереи перебивает чужое правило с флагом, поэтому на
   узком экране галерея не складывалась, а схлопывалась в нулевую
   колонку — фотографии просто исчезали. Вместо борьбы с чужой сеткой
   на телефоне декоративные снимки убираются: страница становится
   короче, а форма заявки — ближе к началу. */
@media screen and (max-width: 900px) {
    #introTwoColumnsWithAnchors,
    #howto {
        display: block !important;
    }

    #introTwoColumnsWithAnchors .text,
    #howto .text {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #introTwoColumnsWithAnchors .image {
        display: none !important;
    }

    #requestASample .partContentText {
        max-width: none;
    }
}
/* ── конец 4.21 ─── */

/* ═══ 4.22 — иконки соцсетей ═══

   CMS рисует иконки одним серым квадратом: берёт готовый векторный
   знак, красит в белый и кладёт на серкую подложку, а при наведении
   знак делает чёрным, подложку светлой. На всех 107 страницах
   одинаково и не похоже на приложения, куда ведут ссылки.

   Теперь это картинки: подложка не нужна — она просвечивала бы в
   скруглённых углах, — а при наведении знак слегка приподнимается,
   что заменяет прежнюю смену цвета. Размеры те же, 40 на 40,
   поэтому блок соцсетей в подвале не меняется.

   Селекторы написаны с двумя классами списка — .partSocialMediaIconList
   и .partSocialMediaIconList1, — а не с одним: у правила CMS
   specificity выше, и правило с одним классом проигрывает ему
   независимо от порядка. Из-за этого подложка оставалась седой,
   хотя правило стояло последним. */
.partSocialMediaIconList.partSocialMediaIconList1.flat li a .socialMediaIconList-icon {
    background-color: transparent;
    overflow: visible;
}

.partSocialMediaIconList.partSocialMediaIconList1.flat li a .socialMediaIconList-icon img {
    width: 40px;
    height: 40px;
    max-width: none;
    max-height: none;
    display: block;
    border-radius: 0;
    transition: transform .25s ease, opacity .25s ease;
}

@media (hover: hover) {
    .partSocialMediaIconList.partSocialMediaIconList1.flat li a:hover span.socialMediaIconList-icon img {
        transform: scale(1.08);
        opacity: .88;
    }
}

.partSocialMediaIconList.partSocialMediaIconList1.flat li a:focus-visible span.socialMediaIconList-icon img {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
/* ── конец 4.22 ─── */
/* ═══ 4.23 — заглушка пустого раздела «Статьи» ═══

   Статьи сняты с сайта, перерабатываются и будут опубликованы
   позже. Пока карточек нет, в сетке раздела остаётся одна
   заметка — но сетка отдаёт ей одну колонку из трёх, и текст
   жмётся в узкую полосу. Заметка должна читаться, поэтому
   занимает всю ширину. */
#insightsOverview .list > .adminEmptyState {
    grid-column: 1 / -1;
    max-width: 46rem;
    margin: 0 auto;
}
/* ── конец 4.23 ─── */