/* Start:/local/components/custom/page.text/templates/.default/style.css?17873458161252*/
/* Справочная страница сайта (/about/, /delivery/, /guarantee/, /privacy-policy/).
   Колонка и заголовок повторяют «Покупателям» (.buyers в style/main.css): это
   соседние страницы одного смысла, и разъехавшаяся ширина между ними читалась бы
   как небрежность. Типографика тела — .zt-prose из css/prose.css. */

.page-text {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 20px 80px;
}

.page-text__title {
    font-family: var(--font-family-display);
    font-weight: 300;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text-color);
    margin: 0 0 24px;
}

/* Первому заголовку текста не нужны те же 40px сверху, что заголовку в середине
   статьи (сверху уже 24px от h1), но и вплотную к h1 он читается как подзаголовок,
   а не как начало раздела — оставляем 16px. */
.page-text__body > h2:first-child,
.page-text__body > h3:first-child {
    margin-top: 16px;
}

/* End */


/* Start:/local/templates/box/css/prose.css?17873458164113*/
/* Типографика длинного текста, пришедшего HTML из кабинета (markdown → html).
   Общая для «Ювелирного гида» (guide.detail) и справочных страниц (page.text):
   раньше эти правила жили только в style.css гида, и вторая копия в новом
   компоненте разошлась бы с первой на первой же правке.

   Файл лежит в шаблоне, а не в папке компонента, потому что компонентов-потребителей
   несколько — тот же приём, что у related-blocks.css. Подключается из template.php
   каждого через $this->addExternalCss(SITE_TEMPLATE_PATH . '/css/prose.css').

   Токены — из local/templates/box/style/constructor.css (mercury-монохром).
   Никаких новых hex: только переменные. */

.zt-prose {
    font-family: var(--font-family-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-color-2);
}

.zt-prose p {
    margin: 0 0 20px;
}

.zt-prose h2,
.zt-prose h3 {
    font-family: var(--font-family-display);
    font-weight: 500;
    color: var(--text-color);
    margin: 40px 0 16px;
}

.zt-prose h2 {
    font-size: 24px;
}

.zt-prose h3 {
    font-size: 20px;
}

.zt-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 24px 0;
}

.zt-prose ul,
.zt-prose ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.zt-prose li {
    margin-bottom: 8px;
}

.zt-prose a {
    color: var(--text-color);
    text-decoration-color: var(--border-color);
}

.zt-prose a:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
}

/* Таблицы markdown-редактор умеет вставлять, и в справочных страницах они
   встречаются (сроки доставки, тарифы). Без правил ниже таблица приезжает
   голой и распирает контейнер на мобиле. */
.zt-prose table {
    width: 100%;
    margin: 0 0 24px;
    border-collapse: collapse;
    font-size: 15px;
}

.zt-prose th,
.zt-prose td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.zt-prose th {
    font-weight: 500;
    color: var(--text-color);
}

/* Обёртка на случай широкой таблицы: горизонтальная прокрутка внутри блока,
   а не у всей страницы. */
.zt-prose__scroll {
    overflow-x: auto;
}

/* Ряд логотипов (платёжные системы на «Доставке и оплате») — абзац, в котором
   несколько картинок подряд. Без ограничения высоты они приезжают в натуральную
   величину: у visa.png это 300×300 с прозрачными полями вокруг маленького знака,
   и ряд рассыпается по высоте. markdown размеры задать не даёт, поэтому решаем
   CSS: одна высота на все, поля обрезаются сами. */
.zt-prose p:has(img + img) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.zt-prose p:has(img + img) img {
    /* Рамка, а не фиксированная высота: у visa/mastercard/jcb знак занимает малую
       часть квадратного файла (прозрачные поля), у mir.png полей нет. Ограничение
       по обеим сторонам уравнивает их визуально — знаки выходят соразмерными,
       как на прежней вёрстке страницы. */
    max-height: 40px;
    max-width: 90px;
    width: auto;
    margin: 0;
    border-radius: 0;
    object-fit: contain;
}

/* End */
/* /local/components/custom/page.text/templates/.default/style.css?17873458161252 */
/* /local/templates/box/css/prose.css?17873458164113 */