/*
  Компоненты информационных страниц (Доставка, Обмен, Реквизиты, О магазине).

  ЗАЧЕМ. Контент этих страниц лежит в БД и был свёрстан инлайн-стилями:
  40-60 атрибутов style= на страницу, своя палитра из 17-29 цветов, шрифт
  Verdana поверх темы и залитые белым карточки, которые в тёмной теме
  превращались в белые пятна. Переменные темы туда не достают в принципе.

  ПРИНЦИП. Ни одного «своего» цвета. Всё берётся из переменных темы, поэтому
  тёмная тема и смена бренд-цвета в админке работают сами, без правок разметки.
  В контенте остаются только классы — это единственное, что заказчик увидит
  в визуальном редакторе админки, и сломать это сложнее, чем инлайн-стиль.

  ИКОНКИ — не картинки, а маски. Заливка идёт currentColor через mask-image,
  поэтому иконка всегда того же цвета, что текст рядом: и в тёмной теме, и при
  смене бренд-цвета. Раньше иконки грузились с img.icons8.com, где цвет зашит
  прямо в URL (/e67e22/) — перекрасить их было физически нельзя, только
  заменить. Заодно ушла зависимость от чужого CDN.

  ПОДКЛЮЧЕНИЕ. Мод zoomagazin_info_pages_css добавляет файл в
  catalog/controller/information/information.php с кэш-бастером по filemtime.
  Статичный бастер не брать: на теме с постоянным ?up3v=1.7 мы уже дважды
  ловили «правка есть, а в браузере старое».
*/

/* ------------------------------------------------------------------ основа */

.zm-info {
	color: var(--up-text-wd-color);
	font-size: 15px;
	line-height: 1.65;
}

.zm-info > *:first-child {
	margin-top: 0;
}

.zm-info > *:last-child {
	margin-bottom: 0;
}

.zm-info p {
	margin: 0 0 12px;
}

.zm-info strong,
.zm-info b {
	font-weight: 600;
}

.zm-info a {
	color: var(--up-color-link);
}

.zm-info a:hover,
.zm-info a:focus {
	color: var(--up-color-link-hover);
}

/* ----------------------------------------------------------------- иконки */

.zm-ico {
	display: inline-block;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	vertical-align: -4px;
}

.zm-ico--truck {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpath d='M16 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpath d='M16 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}

.zm-ico--package {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.27 6.96 12 12.01l8.73-5.05'/%3E%3Cpath d='M12 22.08V12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.27 6.96 12 12.01l8.73-5.05'/%3E%3Cpath d='M12 22.08V12'/%3E%3C/svg%3E");
}

.zm-ico--clock {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

.zm-ico--pin {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.zm-ico--alert {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

.zm-ico--info {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

.zm-ico--card {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cpath d='M1 10h22'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cpath d='M1 10h22'/%3E%3C/svg%3E");
}

.zm-ico--calendar {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

.zm-ico--receipt {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8M8 17h8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8M8 17h8'/%3E%3C/svg%3E");
}

.zm-ico--ban {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.9 4.9 14.2 14.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.9 4.9 14.2 14.2'/%3E%3C/svg%3E");
}

.zm-ico--phone {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.zm-ico--smartphone {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}

.zm-ico--search {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
}

.zm-ico--file-check {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='m9 15 2 2 4-4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='m9 15 2 2 4-4'/%3E%3C/svg%3E");
}

.zm-ico--shield {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

.zm-ico--wallet {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12V7H5a2 2 0 0 1 0-4h14v4'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h16v-5'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12V7H5a2 2 0 0 1 0-4h14v4'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h16v-5'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4z'/%3E%3C/svg%3E");
}

.zm-ico--bank {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M3 10h18M12 2l9 5H3z'/%3E%3Cpath d='M5 10v11M9 10v11M15 10v11M19 10v11'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M3 10h18M12 2l9 5H3z'/%3E%3Cpath d='M5 10v11M9 10v11M15 10v11M19 10v11'/%3E%3C/svg%3E");
}

.zm-ico--copy {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}

.zm-ico--check {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- плашки */

.zm-info__callout {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 24px;
	padding: 16px 18px;
	border: 1px solid var(--up-border-color);
	border-left: 3px solid var(--up-color-link);
	border-radius: var(--up-border-radius-small);
	background: var(--up-bg-gray);
}

.zm-info__callout .zm-ico {
	color: var(--up-color-link);
	margin-top: 1px;
}

.zm-info__callout p:last-child {
	margin-bottom: 0;
}

/* Внутри карточки плашка не должна повторять её рамку и фон. */
.zm-info__card .zm-info__callout {
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 0;
	border-left: 3px solid var(--up-color-link);
	background: var(--up-bg-gray);
	font-size: 13.5px;
	line-height: 1.55;
}

.zm-info__lead {
	font-size: 17px;
	font-weight: 600;
}

.zm-info__lead .zm-info__accent {
	color: var(--up-color-link);
	white-space: nowrap;
}

/* --------------------------------------------------------------- карточки */

.zm-info__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin: 0 0 24px;
}

.zm-info__card {
	display: flex;
	flex-direction: column;
	padding: 22px;
	border: 1px solid var(--up-border-color);
	border-radius: var(--up-border-radius-medium);
	background: var(--up-bg-wd);
}

.zm-info__card-head {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0 0 16px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--up-border-color);
	color: var(--up-color-link);
}

.zm-info__card-head h2,
.zm-info__card-head h3 {
	margin: 0;
	color: var(--up-text-wd-color);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.zm-info__sub {
	margin: 18px 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--up-text-color);
}

.zm-info__sub:first-child {
	margin-top: 0;
}

/* ------------------------------------------------------ строки «цена/срок» */

.zm-info__rows {
	margin: 0 0 4px;
	padding: 0;
	list-style: none;
}

.zm-info__rows li {
	display: flex;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
	padding: 7px 0;
	border-bottom: 1px dashed var(--up-border-color);
}

.zm-info__rows li:last-child {
	border-bottom: 0;
}

.zm-info__rows .zm-info__val {
	flex: 0 0 auto;
	font-weight: 600;
	text-align: right;
}

.zm-info__badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	color: var(--up-color-btn-primary);
	background: var(--up-color-status-in-stock);
}

/* ------------------------------------------------------- обычные списки */

.zm-info__bullets {
	margin: 0 0 4px;
	padding: 0 0 0 20px;
	list-style: disc;
}

.zm-info__bullets li {
	margin: 0 0 5px;
}

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

.zm-info__bullets li::marker {
	color: var(--up-color-link);
}

/* ------------------------------------------------------------ мелкий текст */

.zm-info__note {
	margin: 10px 0 0;
	color: var(--up-text-color);
	font-size: 13px;
	line-height: 1.5;
}

.zm-info__note--tight {
	margin-top: 4px;
}

.zm-info__foot {
	margin: 26px 0 0;
	padding: 16px 18px;
	border-radius: var(--up-border-radius-small);
	background: var(--up-bg-gray);
	color: var(--up-text-color);
	font-size: 13.5px;
	text-align: center;
}

/* ------------------------------------------------------------- список тегов */

.zm-info__tags {
	margin: 8px 0 0;
	color: var(--up-text-color);
	font-size: 13px;
	line-height: 1.9;
}

/* --------------------------------------------------------- пункты выдачи */

.zm-info__section {
	padding: 24px;
	border: 1px solid var(--up-border-color);
	border-radius: var(--up-border-radius-medium);
	background: var(--up-bg-wd);
}

.zm-info__section-head {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0 0 6px;
	color: var(--up-color-link);
}

.zm-info__section-head h2 {
	margin: 0;
	color: var(--up-text-wd-color);
	font-size: 18px;
	font-weight: 700;
}

.zm-info__points {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.zm-info__points li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	padding: 11px 13px;
	border: 1px solid var(--up-border-color);
	border-radius: var(--up-border-radius-small);
	background: var(--up-bg-gray);
	font-size: 14px;
	line-height: 1.45;
}

.zm-info__points .zm-ico {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--up-color-link);
}

/* ---------------------------------------------------------------- шапка */

.zm-info__hero {
	margin: 0 0 24px;
	padding: 20px 22px;
	border: 1px solid var(--up-border-color);
	border-radius: var(--up-border-radius-medium);
	background: var(--up-bg-gray);
	text-align: center;
}

.zm-info__hero p {
	margin: 0;
	color: var(--up-text-color);
	font-size: 15px;
}

.zm-info__hero .zm-info__lead {
	margin: 0 0 6px;
	color: var(--up-text-wd-color);
	font-size: 19px;
}

/* ------------------------------------------------------- плитки по центру */

.zm-info__card--center {
	align-items: center;
	text-align: center;
}

.zm-info__card--center .zm-ico {
	width: 34px;
	height: 34px;
	margin: 2px 0 14px;
	color: var(--up-color-link);
}

.zm-info__tile-title {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.zm-info__card--center p:last-child {
	margin-bottom: 0;
	color: var(--up-text-color);
	font-size: 13.5px;
}

/* --------------------------------------------------------- опасный акцент */

.zm-info__card-head--danger {
	color: var(--up-color-status-out-of-stock);
}

.zm-info__callout--danger {
	border-left-color: var(--up-color-status-out-of-stock);
}

.zm-info__callout--danger .zm-ico {
	color: var(--up-color-status-out-of-stock);
}

.zm-info__callout--danger .zm-info__bullets li::marker {
	color: var(--up-color-status-out-of-stock);
}

/* ------------------------------------------------------------------ шаги */

.zm-info__steps {
	margin: 0 0 4px;
	padding: 0;
	list-style: none;
	counter-reset: zm-step;
}

.zm-info__steps li {
	position: relative;
	margin: 0 0 14px;
	padding: 0 0 0 42px;
	min-height: 30px;
	counter-increment: zm-step;
}

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

.zm-info__steps li::before {
	content: counter(zm-step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--up-bg-btn-primary);
	color: var(--up-color-btn-primary);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

/* ------------------------------------------------------------- реквизиты */

.zm-info__req {
	max-width: 620px;
	margin-right: auto;
	margin-left: auto;
}

.zm-info__iban {
	margin: 6px 0 0;
	padding: 14px 16px;
	border: 1px dashed var(--up-border-color);
	border-radius: var(--up-border-radius-small);
	background: var(--up-bg-gray);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 17px;
	letter-spacing: .02em;
	text-align: center;
	word-break: break-all;
}

.zm-info__copy {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	margin: 10px 0 0;
	padding: 8px 16px;
	border: 1px solid var(--up-border-color);
	border-radius: 999px;
	background: transparent;
	color: var(--up-text-wd-color);
	font: inherit;
	font-size: 13.5px;
	cursor: pointer;
	transition: color .2s linear, border-color .2s linear;
}

.zm-info__copy:hover,
.zm-info__copy:focus {
	border-color: var(--up-color-link-hover);
	color: var(--up-color-link-hover);
}

.zm-info__copy.is-done {
	border-color: var(--up-color-status-in-stock);
	color: var(--up-color-status-in-stock);
}

/* --------------------------------------------------------------- контакты */

.zm-info__contacts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.zm-info__contacts li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	margin: 0 0 12px;
}

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

.zm-info__contacts .zm-ico {
	width: 19px;
	height: 19px;
	margin-top: 2px;
	color: var(--up-color-link);
}

.zm-info__phone {
	color: var(--up-color-link);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

a.zm-info__phone:hover,
a.zm-info__phone:focus {
	color: var(--up-color-link-hover);
}

/* ------------------------------------------------------------------- CTA */

.zm-info__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	align-items: center;
	justify-content: space-between;
	padding: 26px;
	border: 1px solid var(--up-border-color);
	border-radius: var(--up-border-radius-medium);
	background: var(--up-bg-wd);
}

.zm-info__cta-main {
	flex: 1 1 320px;
}

.zm-info__cta-main h2 {
	margin: 0 0 10px;
	color: var(--up-text-wd-color);
	font-size: 18px;
	font-weight: 700;
}

.zm-info__cta-side {
	flex: 0 1 auto;
	padding: 22px;
	border-radius: var(--up-border-radius-small);
	background: var(--up-bg-gray);
	text-align: center;
}

.zm-info__cta-side p {
	margin: 0 0 14px;
	font-weight: 600;
}

.zm-info__btn {
	display: inline-block;
	padding: 0 26px;
	border-radius: 999px;
	background: var(--up-bg-btn-primary);
	color: var(--up-color-btn-primary);
	font-size: 14px;
	font-weight: 700;
	line-height: 44px;
	text-decoration: none;
	transition: background .2s linear, color .2s linear;
}

/* Кнопке нужны селекторы сильнее, чем `.zm-info a`. Тот задан в этом же файле
   и весит (0,0,1,1) — класс плюс тег, а голый `.zm-info__btn` только (0,0,1,0).
   Класс проигрывает, и текст кнопки красился цветом ссылки — оранжевым по
   оранжевому фону, то есть сливался с кнопкой. Ровно та же ловушка, что и в
   теме с ховером верхнего меню: заменить значение мало, надо проверить, что
   правило доживает до элемента. */
.zm-info a.zm-info__btn {
	color: var(--up-color-btn-primary);
}

.zm-info a.zm-info__btn:hover,
.zm-info a.zm-info__btn:focus {
	background: var(--up-bg-btn-primary-hover);
	color: var(--up-color-btn-primary-hover);
}

/* -------------------------------------------------------------- утилиты */

/* Две штуки, которых не хватает компонентам. Держим их классами, а не
   инлайном: инлайн-стиль в контенте — это ровно то, от чего уходили, и он
   вернул бы страницу в состояние, где тёмная тема и бренд-цвет не работают. */
.zm-info__center {
	text-align: center;
}

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

   ⚠️ ЭТА УТИЛИТА ОБЯЗАНА ЛЕЖАТЬ НИЖЕ КОМПОНЕНТОВ. У неё и у компонентов
   одинаковый вес (один класс), поэтому решает порядок в файле. Пока она стояла
   выше, `.zm-info__hero { margin: 0 0 24px }` шорткатом сбрасывал ей
   margin-left/right в ноль — блок сужался, но прижимался влево вместо центра,
   и это было видно только на одной из двух страниц (у плашки правило стоит
   раньше утилиты, у шапки — позже). Утилиты идут после компонентов. */
.zm-info__narrow {
	max-width: 620px;
	margin-right: auto;
	margin-left: auto;
}

.zm-info__grid--top {
	margin-top: 24px;
}

/* ------------------------------------------------------------------ бокс */

.zm-info__box {
	margin: 0 0 16px;
	padding: 14px 16px;
	border-radius: var(--up-border-radius-small);
	background: var(--up-bg-gray);
}

/* ------------------------------------------------------------- мобильные */

@media (max-width: 767px) {
	.zm-info {
		font-size: 14.5px;
	}

	.zm-info__card,
	.zm-info__section {
		padding: 18px;
	}

	/* Строка «условие — цена» на узком экране перестаёт быть строкой:
	   ужимать два столбца до 320px значит рвать оба. */
	.zm-info__rows li {
		display: block;
	}

	.zm-info__rows .zm-info__val {
		display: block;
		margin-top: 2px;
		text-align: left;
	}
}

/* ------------------------------------------------------- юридические тексты */

/*
  Оферта. Полоса текста, а не колонка во всю ширину экрана.

  ЗАЧЕМ. Договор — сплошной текст на 25 КБ, и в контейнере темы строка на
  широком мониторе уходит за 160 символов. Глаз теряет начало следующей строки,
  и документ, который и так читают неохотно, становится нечитаемым совсем.
  70-75 символов — та ширина, на которой строку удерживают без усилия;
  при 16px это примерно 46em.

  ЦЕНТРИРУЕТСЯ БЛОК, А НЕ ТЕКСТ В НЁМ. Полоса стоит по центру страницы,
  но выключка внутри остаётся левой: у сплошного текста ровный левый край —
  это то, по чему глаз возвращается на новую строку, и ломать его нельзя.

  Своих цветов здесь нет намеренно — как и во всём файле, всё через переменные
  темы, чтобы тёмная тема и смена бренд-цвета работали сами.
*/

.zm-legal {
	max-width: 46em;
	margin-right: auto;
	margin-left: auto;
	color: var(--up-text-wd-color);
	font-size: 16px;
	line-height: 1.7;
}

.zm-legal > *:first-child {
	margin-top: 0;
}

.zm-legal > *:last-child {
	margin-bottom: 0;
}

.zm-legal p {
	margin: 0 0 10px;
}

/*
  Шапка документа. Раньше три верхние строки были отцентрованы инлайн-стилями,
  и по центру колонки они вставали правее заголовка страницы, который рисует
  тема, — два заголовка об одном и том же на разных вертикалях. Слева они
  читаются как одна шапка.
*/
.zm-legal h2 {
	margin: 0 0 4px;
	font-size: 24px;
	line-height: 1.25;
}

.zm-legal__subtitle {
	margin: 0 0 4px;
}

/* Дата редакции — служебная строка, не должна спорить с названием. */
.zm-legal__rev {
	margin: 0 0 22px;
	opacity: .65;
	font-size: 14px;
}

/*
  Разделы. Линия сверху вместо крупного кегля: в документе из 13 разделов
  важнее показать границу, чем сделать заголовок заметным.
*/
.zm-legal h3 {
	margin: 34px 0 12px;
	padding-top: 16px;
	border-top: 1px solid var(--up-border-color);
	font-size: 18px;
	line-height: 1.35;
}

/* Реквизиты в конце — отбить от текста договора. */
.zm-legal h3:last-of-type + p {
	padding: 16px 18px;
	border-radius: var(--up-border-radius-small);
	background: var(--up-bg-gray);
}

@media (max-width: 767px) {
	.zm-legal {
		font-size: 15px;
		line-height: 1.65;
	}

	.zm-legal h2 {
		font-size: 21px;
	}

	.zm-legal h3 {
		margin-top: 26px;
		font-size: 17px;
	}
}