/*
 * Блок «Для печати» в карточке товара (Catalog/product/_print.tpl) и PDF-версия карточки (_pdf.tpl).
 * Модульная статика: на сайт попадает через git, в public_html/static_modules раскладывается командой
 * `php7.4 public_html/index.php Base StaticModules`. Значения брейкпоинтов и цветов — из static/scss/_settings.
 */

/* ---------- Блок «Для печати» ---------- */

.product-print .product-print__title {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 20px;
}

.product-print__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.product-print__link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  font-family: "ProximaN", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-transform: none;
  color: #001e4d;
  text-align: left;
  cursor: pointer;
  transition: color 0.4s;
}

.product-print__link + .product-print__link {
  margin-top: 12px;
}

.product-print__link:hover {
  color: #ff9e00;
}

/* Иконка красится цветом текста ссылки — SVG служит маской */
.product-print__icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.product-print__icon--pdf {
  -webkit-mask-image: url("icons/print-pdf.svg");
  mask-image: url("icons/print-pdf.svg");
}

.product-print__icon--print {
  -webkit-mask-image: url("icons/print-page.svg");
  mask-image: url("icons/print-page.svg");
}

/* Пока собирается PDF, повторные клики не принимаем */
.product-print.is-loading .product-print__link {
  opacity: 0.5;
  cursor: progress;
}

/* Отступы блока — в ритме блоков карточки (respond-property 35/30/40/40/60/60 по сетке сайта) */
@media (max-width: 783px) {
  .product-print {
    margin-top: 35px;
    margin-bottom: 35px;
  }

  .product-print .product-print__title {
    margin-bottom: 12px;
  }
}

@media (min-width: 784px) and (max-width: 999px) {
  .product-print {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

@media (min-width: 1000px) and (max-width: 1479px) {
  .product-print {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

@media (min-width: 1480px) and (max-width: 3000px) {
  .product-print {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

/* ---------- PDF-версия карточки ----------
 * html2pdf кладёт её в контейнер шириной 190 мм (A4 без полей) прямо в body, поэтому стили не опираются
 * ни на .product-page, ни на медиа-запросы: PDF должен получаться одинаковым на телефоне и на десктопе.
 */

.product-pdf {
  width: 100%;
  font-family: "ProximaN", sans-serif;
  font-size: 12px;
  line-height: 1.35;
  color: #000;
  background: #fff;
  text-align: left;
  /* Раскладка текста должна совпадать с отрисовкой на canvas (см. withPreciseCanvasText в product-print.js),
     иначе слова встают с неровными пробелами */
  text-rendering: geometricPrecision;
}

.product-pdf * {
  box-sizing: border-box;
}

/* Плагин разрывов html2pdf переносит на следующую страницу целиком элементы с break-inside: avoid
   (если они помещаются на лист). Блок переносим вместе с заголовком, чтобы тот не отрывался от содержимого. */
.product-pdf .product-pdf__section,
.product-pdf .block-container,
.product-pdf img,
.product-pdf p,
.product-pdf li,
.product-pdf tr,
.product-pdf h2,
.product-pdf h3,
.product-pdf h4,
.product-pdf .product-pdf__char,
.product-pdf .item-list,
.product-pdf .icon-item-wrapper {
  break-inside: avoid;
  page-break-inside: avoid;
}

.product-pdf img {
  max-width: 100%;
  height: auto;
}

.product-pdf strong,
.product-pdf b {
  font-weight: 500;
}

.product-pdf__title {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 20px;
}

.product-pdf__image {
  margin-bottom: 20px;
  text-align: center;
}

.product-pdf__image img {
  max-height: 320px;
}

.product-pdf__section {
  margin-bottom: 20px;
}

.product-pdf__chars {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.product-pdf__char {
  width: 50%;
  padding: 0 10px;
  margin-bottom: 12px;
}

.product-pdf__char ul li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 2px;
}

.product-pdf__char ul li:before {
  content: '–';
  position: absolute;
  left: 0;
}

.product-pdf__char-name {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}

.product-pdf h2 {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 500;
  margin: 0 0 10px;
  text-align: left;
}

.product-pdf h2.styled-header {
  font-size: 18px;
  text-align: center;
  margin-bottom: 14px;
}

.product-pdf h3 {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;
  margin: 0 0 8px;
}

.product-pdf h4 {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  margin: 0 0 4px;
}

.product-pdf p {
  font-size: 12px;
  margin: 0 0 6px;
}

.product-pdf .blocks-container {
  margin-top: 20px;
}

.product-pdf .block-container {
  margin-bottom: 20px;
}

.product-pdf .image-block-left-right-container {
  display: flex;
  align-items: flex-start;
}

.product-pdf .left-image {
  flex: 0 0 40%;
  max-width: 40%;
  text-align: center;
}

.product-pdf .left-image img {
  max-height: 300px;
}

.product-pdf .right-content {
  flex: 1 1 auto;
  margin-left: 20px;
}

.product-pdf .item-list {
  display: flex;
  margin-bottom: 10px;
}

.product-pdf .point {
  flex: 0 0 22px;
  padding-top: 3px;
}

.product-pdf .point span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.product-pdf .item-description {
  flex: 1 1 auto;
}

.product-pdf .block-image-right-container ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
}

.product-pdf .block-image-right-container ul li:before {
  content: '—';
  position: absolute;
  left: 0;
}

.product-pdf .icons-list {
  display: flex;
  flex-wrap: wrap;
  margin: 12px -10px 0;
}

.product-pdf .icons-list li {
  width: 33.333%;
  padding: 0 10px;
}

.product-pdf .icon-item-wrapper {
  display: flex;
  align-items: center;
  padding: 6px 0;
}

.product-pdf .icon {
  flex: 0 0 36px;
  width: 36px;
}

.product-pdf .name {
  margin-left: 12px;
  font-weight: 500;
}

.product-pdf .content-raw ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}

.product-pdf .content-raw ul li {
  position: relative;
  width: 48%;
  padding-left: 16px;
  margin-bottom: 6px;
}

.product-pdf .content-raw ul li:before {
  content: '–';
  position: absolute;
  left: 0;
  color: #f5b142;
  font-weight: 500;
}

.product-pdf .content-raw ol {
  list-style: decimal;
  margin: 10px 0;
  padding-left: 18px;
}

.product-pdf .content-raw ol li {
  margin-bottom: 6px;
}

/* Таблицы из редактора приходят с инлайновыми width/height — перебиваем, чтобы влезли в ширину листа.
   Слишком широкие таблицы JS ужимает (fitTables в product-print.js): уменьшает кегль и ставит .is-compact */
.product-pdf table {
  width: 100% !important;
  height: auto !important;
  margin: 6px 0 12px;
  border-collapse: collapse;
  table-layout: auto;
  background: #fff;
  font-size: 9px;
}

.product-pdf th,
.product-pdf td {
  width: auto !important;
  height: auto !important;
  padding: 4px 3px;
  border: 1px solid #001e4d;
  font-size: inherit;
  line-height: 1.15;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
}

.product-pdf table.is-compact th,
.product-pdf table.is-compact td {
  padding: 3px 1px;
}

.product-pdf th *,
.product-pdf td * {
  font-size: inherit;
}

.product-pdf th p,
.product-pdf td p {
  margin: 0;
}

.product-pdf th br,
.product-pdf td br {
  display: none;
}

.product-pdf th,
.product-pdf thead td,
.product-pdf tbody:first-child > tr:first-child td {
  font-weight: 500;
}

.product-pdf sup {
  font-size: 6px;
  vertical-align: super;
}

/* Нижний отступ последнего элемента выталкивал полоску пустоты на лишнюю страницу */
.product-pdf .blocks-container:last-child .block-container:last-child,
.product-pdf .block-container:last-child > .block-content > :last-child,
.product-pdf .content-raw > :last-child {
  margin-bottom: 0;
}

/* Элементы интерфейса страницы, которые не нужны на бумаге */
.product-pdf .change-orientation,
.product-pdf .table-full-width-wrapper {
  display: none !important;
}