/* RUN365 — обычная страница: доставка, возврат, лояльность, вакансии,
   оферта, истории брендов.
   Требует run365-tokens.css + run365-base.css.
   В теме → page.php, условие is_page(). */

.r365-page { padding-top: 26px; padding-bottom: 60px; }
/* Ширина колонки одна на весь текстовый блок страницы. Единица ch
   считается шрифтом самого элемента, поэтому «72ch» у заголовка в 58px
   давало ширину больше страницы — заголовок вставал слева, пока текст
   стоял по центру. Держим одно число в пикселях: это те же 72 знака
   при основном шрифте страницы. */
.r365-page,
.r365-single { --col: 750px; }

.r365-page .r365-crumbs,
.r365-single .r365-crumbs { max-width: var(--col); margin: 0 auto; }

.r365-page__title {
  max-width: var(--col);
  margin: 6px auto 26px;
  font-size: clamp(28px, 4.2vw, 58px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.05;
}

/* Широкая страница: кабинет и то, что собрано в конструкторе.
   Колонку в 750px там держит только текст, а раскладка идёт во всю
   ширину контейнера — заголовок и крошки, центрованные по узкой
   колонке, оказывались смещены вправо относительно карточек под ними.
   Здесь они выравниваются по тому же левому краю, что и содержимое. */
.r365-page--wide .r365-crumbs,
.r365-page--wide .r365-page__title {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ============ текст страницы ============

   Ширина ограничена 72 символами: на широком экране строка иначе
   растягивается на весь контейнер, и глаз теряет начало следующей.
   Таблицы, картинки и врезки этому ограничению не подчиняются —
   им нужна вся ширина. */

/* Колонка текста стоит по центру страницы, а не прижата к левому краю.
   Ширину держит сам контейнер, а не каждый его ребёнок: правила ниже
   задают спискам, заголовкам и цитатам «margin: 0», и боковые auto,
   расставленные на детях, они сбрасывали — часть блоков вставала по
   центру, часть уезжала влево. Контейнеру никто margin не переписывает. */
.r365-prose {
  max-width: var(--col, 750px);
  margin-left: auto;
  margin-right: auto;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-hover);
}

/* Таблицы и картинки шире колонки: вытягиваем их симметрично за её
   поля, но не дальше ширины обёртки страницы. */
.r365-prose > table,
.r365-prose > figure,
.r365-prose > .wp-block-image,
.r365-prose > .r365-cards,
.r365-prose > .n2-section-outer-content {
  /* 100% здесь — ширина самой колонки, поэтому мерим от окна:
     минус поля обёртки, чтобы таблица не упиралась в край экрана. */
  width: min(1040px, calc(100vw - 80px));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Отступы между блоками задаются в одном месте — иначе правило для
   конкретного тега (у него специфичность выше) молча отменяло общее,
   и абзацы слипались, а списки теряли воздух сверху. */
.r365-prose > * { margin: 0; }
.r365-prose > * + * { margin-top: 1.1em; }

.r365-prose h2,
.r365-prose h3,
.r365-prose h4 {
  color: var(--text);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.r365-prose > h2 { margin-top: 1.8em; font-size: clamp(22px, 2.4vw, 30px); }
.r365-prose > h3 { margin-top: 1.5em; font-size: clamp(18px, 1.9vw, 22px); }
.r365-prose > h4 { margin-top: 1.3em; font-size: 17px; }
.r365-prose > :first-child { margin-top: 0; }

/* Первый абзац крупнее — он почти всегда вводный. */
.r365-prose > p:first-child { font-size: 18px; color: var(--text); }

.r365-prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.r365-prose a:hover { color: var(--text); }

.r365-prose strong,
.r365-prose b { color: var(--text); font-weight: 700; }

.r365-prose ul,
.r365-prose ol { padding-left: 22px; }
.r365-prose li { margin: 0 0 8px; }
.r365-prose li::marker { color: var(--text-lab); }
.r365-prose ul ul,
.r365-prose ol ol { margin-top: 8px; }

.r365-prose img { max-width: 100%; height: auto; border-radius: var(--r-md); display: block; }
.r365-prose figure { margin-top: 0; margin-bottom: 0; }
.r365-prose figcaption { font-size: 13px; color: var(--text-lab); padding-top: 8px; }

.r365-prose blockquote {
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  font-size: 18px;
  line-height: 1.55;
  color: var(--text);
}

.r365-prose hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2em 0;
}

/* ============ наследие визуального редактора ============ */

/* Кнопки .iksweb расставлены прямо в тексте четырёх страниц вместе
   с их собственным <style>: чёрная заливка, а поверх неё наш акцентный
   цвет ссылок с подчёркиванием — читать было невозможно. Перебиваем:
   селектор с двумя классами специфичнее правила из контента.

   На «Возврате» эти две ссылки — единственное содержимое страницы,
   то есть развилка «где покупали». Поэтому не кнопка в строке текста,
   а карточка выбора: по ней понятно, что это следующий шаг. */
.r365-prose .iksweb,
.r365-prose a.iksweb {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.r365-prose .iksweb:hover,
.r365-prose a.iksweb:hover {
  background: var(--surface);
  border-color: var(--text);
  color: var(--text);
  transform: translateY(-1px);
}

/* Стрелка вместо подчёркивания: она и говорит, что ведёт дальше. */
.r365-prose .iksweb::after {
  content: '→';
  margin-left: auto;
  font-size: 18px;
  color: var(--text-lab);
  transition: color .15s ease, transform .15s ease;
}
.r365-prose .iksweb:hover::after { color: var(--text); transform: translateX(3px); }

/* Каждая кнопка сидит в своём абзаце, а обернуть их в общий контейнер
   мы не можем — содержимое набрано в редакторе. Поэтому карточки идут
   в столбик во всю ширину колонки: узкие, поставленные в ряд, они не
   добирали её до конца и висели слева от пустого места. */
.r365-prose p:has(> .iksweb:only-child) { display: block; }
.r365-prose p:has(> .iksweb:only-child) + p:has(> .iksweb:only-child) { margin-top: 10px; }

/* таблицы: в оферте и доставке их много */
.r365-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.r365-prose th,
.r365-prose td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
.r365-prose th { font-weight: 700; color: var(--text); background: #fbfbf9; }
.r365-prose tr:last-child td { border-bottom: 0; }

/* Длинные документы — оферта и политика — читаются как договор:
   мельче кегль, плотнее строки, нумерация не спорит с заголовками. */
.page-id-191437 .r365-prose,
.page-id-79384 .r365-prose { font-size: 15px; line-height: 1.6; }


/* Страница, собранная в конструкторе, оформляет себя сама: ни ширины,
   ни типографики от нас ей не нужно — только не мешать. */
.r365-built { width: 100%; }
.r365-built img { max-width: 100%; height: auto; }

/* ============ наследие визуального редактора ============

   Тексты писали в старом редакторе: заголовки — не h2, а «жирный текст
   размером 18pt цветом #999999», отступы — инлайновым padding-left.
   Переписывать содержимое страниц не наша задача, но самое вредное
   стоит погасить: серый на белом читается плохо, а 18pt рядом с нашим
   кеглем выглядит случайным. */

.r365-prose [style*="color: #999"],
.r365-prose [style*="color:#999"],
.r365-prose [style*="color: #808080"],
.r365-prose [style*="color:#808080"] { color: var(--text) !important; }

/* Псевдозаголовок — жирная строка сама по себе, без обёртки в абзац.
   Даём ей вид подзаголовка: в потоке она и так стоит отдельной строкой. */
.r365-prose > strong {
  display: block;
  margin-top: 1.5em;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}
.r365-prose > span[style*="font-size"] {
  display: block;
  margin-top: 1.8em;
  font-size: clamp(20px, 2.2vw, 26px) !important;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
}
.r365-prose > span[style*="font-size"] strong { font-weight: 800; }

/* инлайновые отступы наследия оставляем, но соразмерными */
.r365-prose [style*="padding-left: 30px"] { padding-left: 0 !important; }

/* ============ телефон ============ */

@media (max-width: 860px) {
  .r365-page { padding-bottom: 40px; }
  .r365-page__title { margin-bottom: 18px; }
  .r365-prose { font-size: 16px; }
  .r365-prose > p:first-child { font-size: 17px; }

  /* широкую таблицу листаем вбок, а не ломаем ячейки */
  .r365-prose table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ============ страница «не найдено» ============ */

.r365-404 {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Высота экрана минус шапка и футер: карточка стоит посередине,
     а не липнет к шапке на большом мониторе. */
  min-height: min(560px, 64vh);
  /* Только вертикальные: боковые поля даёт обёртка .r365-wrap, а сокращённая
     запись padding их обнуляла — на телефоне поле поиска и кнопка упирались
     в края экрана. */
  padding-top: 40px;
  padding-bottom: 60px;
}

.r365-404__card {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.r365-404__code {
  font-size: clamp(64px, 12vw, 132px);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
  color: var(--text);
  /* Цифры — фон, а не сообщение: смысл несёт заголовок под ними. */
  opacity: .09;
  margin-bottom: -14px;
}

.r365-404__title {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.1;
}

.r365-404__note {
  margin: 12px 0 0;
  max-width: 44ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-mut);
}

/* ============ поиск ============ */

.r365-404__search {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  margin-top: 26px;
}

.r365-404__input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  color: var(--text);
  transition: border-color .15s ease;
}
.r365-404__input:focus { outline: none; border-color: var(--text); }
.r365-404__input::placeholder { color: var(--text-lab); }

.r365-404__submit { flex: 0 0 auto; }

/* ============ разделы ============ */

.r365-404__picks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.r365-404__pick {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: var(--surface);
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.r365-404__pick:hover { border-color: var(--text); background: var(--page); }

/* ============ помощь ============ */

.r365-404__help {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  width: 100%;
  max-width: 460px;
}

.r365-404__ai {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 21px;
  background: var(--ink);
  color: var(--ink-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease;
}
.r365-404__ai:hover { opacity: .88; }

.r365-404__phone {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.r365-404__phone:hover { border-color: var(--text); }

@media (max-width: 560px) {
  .r365-404 { min-height: 0; padding-top: 24px; padding-bottom: 44px; }
  .r365-404__search { flex-direction: column; }
  .r365-404__submit { width: 100%; justify-content: center; }
}