/* Библиотека блоков наполнения alias-pack.ru (20.10.2026).
   Вид — с принятых страниц /stretch_belaja, /otryvnaya-lenta, /stretch; справочник блоков — evo/blocks/README.md.
   Всё внутри .ab-page; цвета и размеры — только из переменных ниже. */

:root {
  --ab-purple: #8e4b82;
  --ab-purple-soft: #bb93b4;
  --ab-blue: #204194;
  --ab-ink: #333;
  --ab-muted: #6b6b6b;
  --ab-grey: #f7f6f6;
  --ab-lav: #f4f5fa;
  --ab-tint: rgba(161, 173, 217, .1);
  --ab-line: rgba(51, 51, 51, .2);
  --ab-grad: linear-gradient(90deg, #efe4f6 0%, #e5e5f9 100%);
  --ab-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --ab-gap: 20px;
  --ab-sec: 60px;            /* отступ между секциями */
  --ab-h2: 30px;
  --ab-h3: 22px;
  --ab-text: 16px;
  --ab-lead: 18px;
}
@media (max-width: 991px) { :root { --ab-sec: 44px; --ab-h2: 24px; --ab-h3: 18px; } }
@media (max-width: 767px) { :root { --ab-sec: 32px; --ab-h2: 20px; --ab-h3: 16px; --ab-text: 14px; --ab-lead: 15px; } }

/* ---------- основа ---------- */
#pageContent.ab-page { padding-bottom: 0; color: var(--ab-ink); }
.ab-page .ab-sec { padding: var(--ab-sec) 0 0; }
.ab-page .ab-sec:first-of-type { padding-top: 10px; }
.ab-page .ab-band { margin-top: var(--ab-sec); padding: var(--ab-sec) 0; }
.ab-page .ab-band + .ab-band { margin-top: 0; }
.ab-page .ab-band--grey { background: var(--ab-grey); }
.ab-page .ab-band--tint { background: var(--ab-tint); }
.ab-page .ab-h2 { font-weight: 500; font-size: var(--ab-h2) !important; line-height: 1.2; letter-spacing: -.02em;
  color: var(--ab-purple) !important; margin: 0 0 30px; text-transform: none; }
.ab-page .ab-h2--center { text-align: center; }
.ab-page .ab-h3 { font-weight: 500; font-size: var(--ab-h3); line-height: 1.2; color: var(--ab-purple); text-transform: none;
  margin: 0 0 14px; }
.ab-page .ab-h3--blue { color: var(--ab-blue); text-align: center; margin: 40px 0 20px; }
.ab-page .ab-text, .ab-page .ab-text p, .ab-page .ab-text li { font-size: var(--ab-text); line-height: 1.45; }
.ab-page .ab-text p { margin: 0 0 14px; }
.ab-page .ab-text p:last-child { margin-bottom: 0; }
.ab-page .ab-text h3 { font-weight: 500; font-size: var(--ab-h3); line-height: 1.2; color: var(--ab-purple); text-transform: none; margin: 26px 0 12px; }
.ab-page .ab-text--lead, .ab-page .ab-text--lead p, .ab-page .ab-text--lead li { font-size: var(--ab-lead); line-height: 1.4; }
.ab-page .ab-narrow { max-width: 900px; }
#pageContent.ab-page .ab-list { list-style: none; list-style-image: none; padding: 0; margin: 0 0 14px; }
#pageContent.ab-page .ab-list li { position: relative; padding: 0 0 8px 26px; font-size: var(--ab-text); line-height: 1.4; }
#pageContent.ab-page .ab-list li::before { content: ''; position: absolute; left: 0; top: .3em; width: 13px; height: 13px;
  background: url(/img/tick.png) no-repeat center / contain; }   /* галочка ✓ старого сайта (и группы, и товары) */
.ab-page .ab-note { font-weight: 600; font-size: var(--ab-lead); line-height: 1.3; color: var(--ab-blue); margin: 24px 0 0; }
.ab-page figure { margin: 0; }
.ab-page .ab-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-page .ab-zoom { overflow: hidden; }
.ab-page .ab-zoom img { transition: transform 1s ease; }
.ab-page .ab-zoom:hover img { transform: scale(1.08); }
.ab-page .ab-icon { display: block; width: 48px; height: 48px; object-fit: contain; }

/* ---------- intro: текст + главное фото ---------- */
.ab-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.ab-intro__text { align-self: center; max-width: 560px; }
.ab-intro__media { min-height: 300px; max-height: 460px; }
.ab-intro__media--contain .ab-img { object-fit: contain; }
@media (max-width: 991px) {
  .ab-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ab-intro__text { max-width: none; }
  .ab-intro__media { min-height: 0; height: 320px; order: -1; }
}
@media (max-width: 767px) { .ab-intro__media { height: 240px; } }

/* ---------- keys: ключевые свойства, иконки в ряд ---------- */
.ab-keys__grid { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: var(--ab-gap); }
.ab-keys__item { text-align: center; hyphens: auto; overflow-wrap: break-word; }
.ab-keys__item .ab-icon { margin: 0 auto 14px; }
.ab-keys__item p { margin: 0; font-size: var(--ab-text); line-height: 1.3; }
@media (max-width: 991px) { .ab-keys__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ab-keys__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- tiles: преимущества плитками (фиолетовые/серые + фото) ---------- */
.ab-tiles__grid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; grid-auto-rows: 210px; }
.ab-tiles__grid--short { grid-auto-rows: 150px; }
.ab-tile { position: relative; padding: 20px; background: var(--ab-grey); }
.ab-tile p { overflow-wrap: break-word; hyphens: auto; margin: 0; font-size: 20px; line-height: 1.2; padding-right: 30px; }
.ab-tile .ab-icon { position: absolute; right: 20px; bottom: 20px; width: 36px; height: 36px; }
.ab-tile--purple { background: var(--ab-purple); color: #fff; }
.ab-tile--photo { grid-column: span 2; padding: 0; }
@media (max-width: 991px) { .ab-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; } }
@media (max-width: 767px) {
  .ab-tiles__grid { grid-auto-rows: 140px; }
  .ab-tile { padding: 15px; }
  .ab-tile p { font-size: 14px; }
  .ab-tile .ab-icon { right: 15px; bottom: 15px; width: 24px; height: 24px; }
}

/* ---------- specs: характеристики — фото + текст, карточки параметров ---------- */
.ab-specs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.ab-specs__media { min-height: 320px; }
.ab-specs__text { align-self: center; max-width: 520px; }
.ab-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ab-gap); }
.ab-card { background: #fff; padding: 24px 16px; border: 1px solid #f0f0f0; border-radius: 8px; box-shadow: var(--ab-shadow);
  text-align: center; display: flex; flex-direction: column; justify-content: center; }
.ab-card__label { font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--ab-purple); text-transform: uppercase;
  letter-spacing: .03em; margin-bottom: 6px; }
.ab-card__value { font-size: 18px; line-height: 1.3; }
@media (max-width: 991px) {
  .ab-specs__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ab-specs__media { min-height: 0; height: 280px; }
  .ab-specs__media--tall { height: 420px; }   /* вертикальный кадр: целиком, а не полосой из середины */
  .ab-specs__media--tall .ab-img { object-fit: contain; }
  .ab-specs__text { max-width: none; }
  .ab-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
}
@media (max-width: 767px) {
  .ab-card { padding: 16px 10px; }
  .ab-card__label { font-size: 12px; }
  .ab-card__value { font-size: 15px; }
}

/* ---------- table: таблица параметров ---------- */
.ab-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ab-page .ab-table { width: 100%; border-collapse: collapse; margin: 0; background: var(--ab-lav); }
.ab-page .ab-table caption { caption-side: bottom; padding: 10px 0 0; font-size: 14px; color: var(--ab-muted); text-align: left; }
.ab-page .ab-table th, .ab-page .ab-table td { border: 2px solid #fff; padding: 14px 16px; font-size: var(--ab-text); line-height: 1.2;
  text-align: center; vertical-align: middle; color: var(--ab-blue); }
.ab-page .ab-table thead th { background: var(--ab-purple); color: #fff; font-weight: 400; }
.ab-page .ab-table tbody tr:nth-child(odd) td, .ab-page .ab-table tbody tr:nth-child(odd) th { background: var(--ab-grad); }
.ab-page .ab-table tbody th { font-weight: 500; }
.ab-page .ab-table .ab-table__group td { background: #e0d3e6 !important; color: var(--ab-ink); font-weight: 600; }
@media (max-width: 767px) { .ab-page .ab-table th, .ab-page .ab-table td { padding: 10px 8px; font-size: 12px; } }

/* ---------- compare: сравнение вариантов (цвета, типы) ---------- */
.ab-compare__grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--ab-gap); }
.ab-compare__item { background: var(--ab-grey); padding: 24px 20px; text-align: center; }
.ab-compare__item .ab-h3 { margin-bottom: 8px; color: var(--ab-ink); font-size: 18px; }
.ab-compare__item p { margin: 0; font-size: 15px; line-height: 1.35; }
.ab-swatch { display: block; width: 36px; height: 36px; border-radius: 50%; margin: 0 auto 14px; border: 1px solid #ccc; }
.ab-swatch--white { background: #fff; }
.ab-swatch--black { background: #111; border-color: #111; }
.ab-swatch--clear { background: linear-gradient(135deg, #e8f0f8, #fff); }
.ab-swatch--purple { background: var(--ab-purple); border-color: var(--ab-purple); }
.ab-swatch--blue { background: var(--ab-blue); border-color: var(--ab-blue); }
@media (max-width: 767px) { .ab-compare__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- uses: где применяется — карточки со списками + синие выводы ---------- */
.ab-uses__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ab-gap); }
.ab-use { position: relative; background: var(--ab-grey); padding: 20px 20px 70px; }
.ab-use .ab-h3 { font-size: 16px; text-transform: uppercase; text-align: center; letter-spacing: .02em; }
.ab-use .ab-icon { position: absolute; right: 20px; bottom: 20px; width: 36px; height: 36px; opacity: .8; }
#pageContent.ab-page .ab-use .ab-list li { font-size: 14px; }
.ab-use--blue { background: var(--ab-blue); padding-bottom: 20px; }
.ab-use--blue p { color: #fff; font-size: var(--ab-text); line-height: 1.3; margin: 0; }
@media (max-width: 991px) { .ab-uses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ab-uses__grid { grid-template-columns: minmax(0, 1fr); } .ab-use { padding-bottom: 60px; } }

/* ---------- industries: отрасли — вкладки с фото ---------- */
.ab-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ab-gap); align-items: start; }
.ab-tabs__list { display: flex; flex-direction: column; gap: 10px; }
.ab-tabs__btn { display: block; width: 100%; text-align: left; border: 0; background: var(--ab-lav); color: var(--ab-purple);
  font-family: inherit; font-weight: 500; font-size: 22px; line-height: 1.2; margin: 0; padding: 14px 20px; cursor: pointer; }
.ab-tabs__btn[aria-selected="true"] { background: var(--ab-purple); color: #fff; }
.ab-tabs__btn:focus-visible { outline: 2px solid var(--ab-blue) !important; outline-offset: 2px; }
.ab-tabs__panel { height: 380px; }
.ab-tabs__panel > figure { margin: 0; height: 100%; }
.ab-tabs__panel[hidden] { display: none; }
.ab-tabs__panel p { margin: 12px 0 0; font-size: var(--ab-text); }
@media (max-width: 991px) { .ab-tabs__btn { font-size: 18px; } }
@media (max-width: 767px) {
  .ab-tabs { grid-template-columns: minmax(0, 1fr); }
  .ab-tabs__list { display: none; }
  .ab-tabs__panel, .ab-tabs__panel[hidden] { display: block; height: auto; margin-bottom: 16px; background: var(--ab-lav); }
  .ab-tabs__panel .ab-img { height: 220px; }
  .ab-tabs__panel::before { content: attr(data-title); display: block; padding: 10px; background: var(--ab-purple); color: #fff; font-weight: 500; }
}

/* ---------- media: текст с фото сбоку ---------- */
.ab-media { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.ab-media--left .ab-media__img { order: -1; }
.ab-media__img { max-height: 420px; }
.ab-media__img--contain .ab-img { object-fit: contain; max-height: 420px; }
@media (max-width: 991px) { .ab-media { grid-template-columns: minmax(0, 1fr); gap: 20px; } .ab-media__img { order: -1; max-height: 300px; } }

/* ---------- why: почему ALIAS ---------- */
.ab-why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ab-gap); }
.ab-why__item { position: relative; background: var(--ab-lav); padding: 20px 20px 64px; min-height: 148px; }
.ab-why__item p { margin: 0; font-size: var(--ab-text); line-height: 1.25; text-align: center; hyphens: auto; overflow-wrap: break-word; }
.ab-why__item .ab-icon { position: absolute; right: 20px; bottom: 20px; width: 32px; height: 32px; }
/* prems — свойства группы: 3 колонки, пункт с точкой, иконка в углу, вывод синей плиткой (вид /stretch на старом сайте) */
.ab-prems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ab-gap); list-style: none; margin: 0; padding: 0; }
.ab-prem { position: relative; min-height: 192px; padding: 20px 34px 74px; background: var(--ab-grey); }
.ab-prem p { position: relative; margin: 0; font-size: var(--ab-text); line-height: 1.2; color: var(--ab-ink); }
.ab-prem p::before { content: ""; position: absolute; left: -14px; top: 7px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ab-purple); }
.ab-prem .ab-icon { position: absolute; right: 20px; bottom: 20px; width: 44px; height: 44px; }
.ab-prem--blue { padding: 20px 70px 20px 20px; background: var(--ab-blue); }
.ab-prem--blue p { color: #fff; }
.ab-prem--blue p::before { content: none; }
@media (max-width: 991px) { .ab-prems { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .ab-prems { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ab-prem { min-height: 125px; padding: 15px 15px 50px 29px; }
  .ab-prem .ab-icon { right: 15px; bottom: 15px; width: 24px; height: 24px; }
  .ab-prem--blue { min-height: 0; padding: 15px; }
}
.ab-why__more { text-align: center; margin: 24px 0 0; }
.ab-why__more a { font-size: var(--ab-lead); color: var(--ab-purple); text-decoration: underline; }
@media (max-width: 991px) { .ab-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ab-why__item { min-height: 0; } }

/* ---------- faq: вопросы и ответы ---------- */
.ab-faq { border-top: 1px solid var(--ab-line); }
.ab-faq__item { border-bottom: 1px solid var(--ab-line); }
.ab-faq__q { position: relative; display: block; padding: 20px 56px 20px 0; cursor: pointer; list-style: none;
  font-size: 20px; line-height: 1.25; color: var(--ab-ink); }
.ab-faq__q::-webkit-details-marker { display: none; }
/* тонкий «+» в фиолетовом прямоугольнике, как на старом сайте */
.ab-faq__q::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 35px; height: 27px;
  background: var(--ab-purple) no-repeat center / 27px 27px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M7.1 18.4V17h8.5V8.5H17V17h8.5v1.4H17v8.5h-1.4v-8.5z' fill='%23fff'/%3E%3C/svg%3E"); }
.ab-faq__item[open] .ab-faq__q::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M7.1 17h19.8v1.4H7.1z' fill='%23fff'/%3E%3C/svg%3E"); }
.ab-faq__q:focus-visible { outline: 2px solid var(--ab-blue) !important; }
.ab-faq__a { padding: 0 0 20px; }
@media (max-width: 767px) { .ab-faq__q { font-size: 16px; padding: 16px 50px 16px 0; } }

/* ---------- cats: плитки подкатегорий (страница группы) ---------- */
.ab-cats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ab-gap); }
.ab-cat { position: relative; height: 210px; overflow: hidden; background: #333; }
.ab-cat .ab-img { position: absolute; inset: 0; transition: transform 1s ease; }
.ab-cat::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); pointer-events: none; }
.ab-cat:hover .ab-img { transform: scale(1.08); }
.ab-cat__title { position: absolute; left: 20px; right: 70px; bottom: 16px; z-index: 2; color: #fff !important; font-size: 22px;
  line-height: 1.2; font-weight: 500; text-decoration: none !important; }
.ab-cat__title::after { content: ''; position: absolute; inset: -400px -70px -16px -20px; }   /* вся плитка — ссылка */
.ab-cat__arrow { position: absolute; right: 16px; bottom: 14px; z-index: 2; width: 34px; height: 34px; border: 1px solid #fff;
  border-radius: 50%; pointer-events: none; }
.ab-cat__arrow::before { content: ''; position: absolute; left: 11px; top: 12px; width: 9px; height: 9px; border-top: 2px solid #fff;
  border-right: 2px solid #fff; transform: rotate(45deg); }
#pageContent.ab-page .ab-cat__links { position: absolute; z-index: 3; left: 14px; top: 14px; right: 14px; display: flex; flex-wrap: wrap;
  gap: 6px; list-style: none; list-style-image: none; margin: 0; padding: 0; }
#pageContent.ab-page .ab-cat__links li { padding: 0; }
.ab-cat__links a { display: block; padding: 4px 8px; background: rgba(142, 75, 130, .85); color: #fff !important; font-size: 12px;
  line-height: 1.2; text-decoration: none !important; }
.ab-cat__links a:hover { background: var(--ab-purple); }
@media (max-width: 767px) { .ab-cats { grid-template-columns: minmax(0, 1fr); } .ab-cat { height: 190px; } .ab-cat__title { font-size: 17px; } .ab-cat__links a { font-size: 11px; } }

/* ---------- cols: текст в две колонки ---------- */
.ab-cols { columns: 2; column-gap: 40px; }
.ab-cols p { break-inside: avoid; }
@media (max-width: 991px) { .ab-cols { columns: 1; } }

/* ---------- props: свойства-аккордеоны ---------- */
.ab-props { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 10px var(--ab-gap); align-items: start; }
.ab-prop { background: #fff; }
.ab-prop__q { position: relative; display: block; list-style: none; cursor: pointer; background: var(--ab-purple); color: #fff;
  font-weight: 500; font-size: 16px; line-height: 1.25; padding: 16px 56px 16px 20px; }
.ab-prop__q::-webkit-details-marker { display: none; }
.ab-prop__q::after { content: '+'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;
  border: 1px solid #fff; border-radius: 50%; text-align: center; line-height: 27px; font-size: 20px; }
.ab-prop[open] .ab-prop__q::after { content: '\2212'; }
.ab-prop__a { padding: 20px; background: var(--ab-grey); }
@media (max-width: 767px) { .ab-props { grid-template-columns: minmax(0, 1fr); } }

/* ---------- kinds: виды в колонках с фото ---------- */
/* pick — «что можно купить»: строки-аккордеон слева (открыта одна), фото справа меняется под раскрытый пункт (старый .items_plus_horiz) */
.ab-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ab-gap); align-items: start; }
.ab-pick__item { margin-bottom: 10px; background: var(--ab-lav); }
.ab-pick__q { position: relative; display: block; list-style: none; cursor: pointer; min-height: 56px; padding: 15px 56px 15px 20px;
  font-size: 20px; line-height: 1.3; color: var(--ab-purple); }
.ab-pick__q::-webkit-details-marker { display: none; }
.ab-pick__q::after { content: ""; position: absolute; right: 11px; top: 11px; width: 34px; height: 34px;
  background: no-repeat center / 34px 34px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M7.1 18.4V17h8.5V8.5H17V17h8.5v1.4H17v8.5h-1.4v-8.5z' fill='%238E4A82'/%3E%3C/svg%3E"); }
.ab-pick__item[open] { background: var(--ab-purple); }
.ab-pick__item[open] .ab-pick__q { color: #fff; }
.ab-pick__item[open] .ab-pick__q::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M7.1 17h19.8v1.4H7.1z' fill='%23fff'/%3E%3C/svg%3E"); }
.ab-pick__q:focus-visible { outline: 2px solid var(--ab-blue); outline-offset: 2px; }
.ab-pick__a { padding: 0 20px 20px; font-size: var(--ab-text); line-height: 1.4; color: #fff; }
.ab-pick__img { position: sticky; top: 120px; text-align: center; }
.ab-pick__img img { max-width: 100%; height: auto; }
@media (max-width: 991px) { .ab-pick { grid-template-columns: minmax(0, 1fr); } .ab-pick__img { position: static; order: -1; } }
@media (max-width: 767px) { .ab-pick__q { font-size: 16px; min-height: 0; padding: 10px 50px 10px 15px; } .ab-pick__q::after { top: 50%; margin-top: -17px; }
  .ab-pick__a { font-size: 14px; padding: 0 15px 15px; } }

/* text + aside — текст слева, вывод синей плашкой справа (старый .premblue.hauto, «Доставка, документы и заказ») */
.ab-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ab-gap); align-items: start; }
.ab-callout { padding: 20px 70px 20px 20px; background: var(--ab-blue); }
.ab-page .ab-callout p { margin: 0; font-size: var(--ab-text); line-height: 1.2; color: #fff; }
@media (max-width: 991px) { .ab-split { grid-template-columns: minmax(0, 1fr); } .ab-callout { padding-right: 20px; } }

/* bars — «где применяется»: фиолетовые плашки в две колонки, порядок по столбцам, иконка справа (старый .item_plus.noa) */
.ab-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 3), auto);
  grid-auto-flow: column; gap: 10px var(--ab-gap); list-style: none; margin: 0; padding: 0; }
.ab-bar { position: relative; display: flex; align-items: center; min-height: 56px; padding: 15px 60px 15px 20px;
  background: var(--ab-purple); color: #fff; font-weight: 500; font-size: 20px; line-height: 1.2; }
.ab-bar .ab-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; }
@media (max-width: 991px) { .ab-bars { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; } }
@media (max-width: 767px) { .ab-bar { font-size: 16px; padding-right: 50px; } .ab-bar .ab-icon { width: 30px; height: 30px; } }

.ab-kinds { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--ab-gap); }
/* вид старого /stretch (.vidi): серая карточка, плашка-заголовок, мелкий текст, квадратное фото целиком внизу */
.ab-kind { display: flex; flex-direction: column; background: var(--ab-grey); transition: box-shadow .3s; }
.ab-kind:hover { box-shadow: 3px 4px 15px rgba(0, 0, 0, .25); }
.ab-page .ab-kind__title, #pageContent .ab-kind__title { background: rgba(142, 74, 130, .7); color: #fff !important; font-weight: 500; font-size: 16px; line-height: 1.2;
  text-transform: none; padding: 10px 20px; margin: 0; transition: background .3s; }
.ab-kind:hover .ab-kind__title { background: var(--ab-purple); }
.ab-kind__text { padding: 20px 20px 0; flex: 1; }
#pageContent.ab-page .ab-kind__text p, #pageContent.ab-page .ab-kind__text li { font-size: 14px; line-height: 1.3; }
#pageContent.ab-page .ab-kind__text .ab-list li { padding: 0 0 0 .9em; margin-bottom: 1em; }
#pageContent.ab-page .ab-kind__text .ab-list li::before { content: "-"; width: auto; height: auto; top: 0; background: none; }
.ab-page .ab-kind__img { aspect-ratio: 1; margin: 20px; }
.ab-kind__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991px) { .ab-kinds { grid-template-columns: minmax(0, 1fr); } .ab-page .ab-kind__img { width: calc(100% - 40px); max-width: 323px; } }

/* ---------- more: «Узнать больше» ---------- */
/* сайт наследует box-sizing от html (*{box-sizing:inherit}), а обёртка ::details-content в Chrome цепочку рвёт:
   без этого .container внутри «Узнать больше» становится шире экрана на свои поля (на 375 — прокрутка вбок) */
.ab-page details > * { box-sizing: border-box; }
.ab-more > summary { display: block; list-style: none; text-align: center; margin-top: var(--ab-sec); }
.ab-more > summary::-webkit-details-marker { display: none; }
.ab-more > summary span { cursor: pointer; font-size: var(--ab-lead); color: var(--ab-purple); text-decoration: underline; }
.ab-more[open] > summary { display: none; }

/* ---------- raw: готовая разметка (калькуляторы) ---------- */
.ab-raw { margin-top: 0; }
.ab-keys__item .ab-keys__t { font-weight: 600; margin-bottom: 6px; }
#pageContent.ab-page ul[role="list"] { list-style: none; list-style-image: none; padding: 0; margin: 0; }

/* ---------------------------------------------------------------- группы (#pageContent.ab-page--group): вид старого /stretch (.stretch2026)
   Товарные страницы не трогаем — у них свой принятый вид. Решения пользователя 20.10 по скринам «старый | новый». */
.ab-page .ab-note--plain { font-weight: 400; font-size: var(--ab-text); }
/* плитки категорий: стрелка-ромб старого сайта */
#pageContent.ab-page--group .ab-cat__arrow { width: 44px; height: 44px; border: 0; border-radius: 0;
  background: url(/img/stretch/i_more.svg) no-repeat center / contain; }
#pageContent.ab-page--group .ab-cat__arrow::before, #pageContent.ab-page--group .ab-cat__arrow::after { content: none; }
/* текст + фото на серой полосе: фото на всю высоту полосы, без полей сверху и снизу */
#pageContent.ab-page--group .ab-band.ab-s-media { padding: 0; }
#pageContent.ab-page--group .ab-band .ab-media { align-items: stretch; gap: var(--ab-gap); }
#pageContent.ab-page--group .ab-band .ab-media__body { padding: 40px 30px 40px 0; max-width: 580px; }
#pageContent.ab-page--group .ab-band .ab-media--left .ab-media__body { padding: 40px 0 40px 30px; }
#pageContent.ab-page--group .ab-band .ab-media__img { max-height: none; height: 100%; }
#pageContent.ab-page--group .ab-band .ab-media__img .ab-img { width: 100%; height: 100%; object-fit: cover; }
/* списки — галочки старого сайта */
/* аккордеон свойств: тонкий «+» без кружка */
#pageContent.ab-page--group .ab-prop__q::after { content: ""; border: 0; border-radius: 0; width: 34px; height: 34px; right: 11px;
  background: no-repeat center / 34px 34px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M7.1 18.4V17h8.5V8.5H17V17h8.5v1.4H17v8.5h-1.4v-8.5z' fill='%23fff'/%3E%3C/svg%3E"); }
#pageContent.ab-page--group .ab-prop[open] .ab-prop__q::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M7.1 17h19.8v1.4H7.1z' fill='%23fff'/%3E%3C/svg%3E"); }
/* таблица подбора: задача и тип плёнки — влево, число — по центру */
#pageContent.ab-page--group .ab-table tbody td { text-align: left; }
#pageContent.ab-page--group .ab-table tbody td:last-child { text-align: center; }
/* «Почему покупают»: плитки с точкой, текст влево, без иконок; неполный ряд растягивается на всю ширину */
#pageContent.ab-page--group .ab-why__grid { display: flex; flex-wrap: wrap; }
#pageContent.ab-page--group .ab-why__item { flex: 1 1 calc(25% - 15px); min-height: 130px; padding: 20px 34px; background: var(--ab-grey); }
#pageContent.ab-page--group .ab-why__item p { position: relative; text-align: left; }
#pageContent.ab-page--group .ab-why__item p::before { content: ""; position: absolute; left: -14px; top: 7px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--ab-purple); }
#pageContent.ab-page--group .ab-why__item .ab-icon { display: none; }
@media (max-width: 991px) {
  #pageContent.ab-page--group .ab-band .ab-media__body, #pageContent.ab-page--group .ab-band .ab-media--left .ab-media__body { padding: 30px 0; max-width: none; }
  #pageContent.ab-page--group .ab-band .ab-media__img { height: auto; max-height: 360px; }
  #pageContent.ab-page--group .ab-why__item { flex-basis: calc(50% - 10px); }
}
@media (max-width: 767px) { #pageContent.ab-page--group .ab-why__item { flex-basis: 100%; min-height: 0; } }
#pageContent.ab-page--group .ab-table { table-layout: fixed; }
#pageContent.ab-page--group .ab-s-why .ab-narrow { max-width: none; }
.ab-page .ab-nobr { white-space: nowrap; }

/* ---------------------------------------------------------------- товары (#pageContent.ab-page--product): вид старых /stretch_belaja, /otryvnaya-lenta
   Сверка пар «старый | новый» 20.10. */
#pageContent.ab-page--product .ab-s-specs .ab-h3--blue { color: var(--ab-purple); }
#pageContent.ab-page--product .ab-intro__text .ab-text p, #pageContent.ab-page--product .ab-intro__text .ab-text li { font-size: var(--ab-text); }
#pageContent.ab-page--product .ab-tiles__grid { gap: var(--ab-gap); grid-auto-rows: 270px; }
#pageContent.ab-page--product .ab-tiles__grid--short { grid-auto-rows: 150px; }
@media (min-width: 992px) {
  #pageContent.ab-page--product .ab-table { width: auto; min-width: 78%; margin: 0 auto; }
}
@media (max-width: 991px) { #pageContent.ab-page--product .ab-tiles__grid { grid-auto-rows: 200px; } }
@media (max-width: 767px) { #pageContent.ab-page--product .ab-tiles__grid { gap: 10px; grid-auto-rows: 150px; } }

/* cards — карточки подкатегорий раздела /products/*: плашка с названием, товар на белом; при наведении — тень,
   серая плашка и список подкатегорий поверх фото (старый .new-product-category-2 разделов) */
.ab-cards { display: grid; grid-template-columns: repeat(3, 288px); justify-content: center; gap: 25px 20px; list-style: none; margin: 0; padding: 0; }
.ab-card { position: relative; border: 1px solid #e8e8e8; background: #fff; transition: box-shadow .3s; }
.ab-page .ab-card__title { display: block; min-height: 90px; padding: 25px 20px; background: var(--ab-purple-soft); color: #fff;
  font-size: 16px; line-height: 20px; text-decoration: none; transition: background .3s, color .3s; }
.ab-card__body { position: relative; height: 200px; }
.ab-card__body .ab-img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .3s; }
.ab-card__links, .ab-page .ab-card__more { position: absolute; inset: 0; margin: 0; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s; }
.ab-card__links { list-style: none; }
.ab-card__links li { position: relative; padding-left: 13px; margin-bottom: 4px; font-size: 14px; line-height: 1.3; }
.ab-card__links li::before { content: ""; position: absolute; left: 0; top: .45em; width: 6px; height: 6px; background: var(--ab-purple); }
.ab-page .ab-card__links a { color: var(--ab-blue); }
.ab-page .ab-card__more { display: flex; align-items: center; justify-content: center; color: var(--ab-blue); font-size: 16px; }
.ab-card:hover, .ab-card:focus-within { box-shadow: 3px 4px 15px rgba(0, 0, 0, .25); }
.ab-card:hover .ab-card__title, .ab-card:focus-within .ab-card__title { background: #f4f4f4; color: var(--ab-purple); font-weight: 500; }
.ab-card:hover .ab-img, .ab-card:focus-within .ab-img { opacity: .2; }
.ab-card:hover .ab-card__links, .ab-card:focus-within .ab-card__links, .ab-card:hover .ab-card__more { opacity: 1; visibility: visible; }
@media (max-width: 991px) { .ab-cards { grid-template-columns: repeat(2, 288px); } }
@media (max-width: 640px) { .ab-cards { grid-template-columns: minmax(0, 320px); } }
/* без мыши подкатегории не спрятаны: списком под фото */
@media (hover: none) {
  .ab-card__body { height: auto; }
  .ab-card__body .ab-img { height: 200px; }
  .ab-card__links { position: static; opacity: 1; visibility: visible; padding: 0 20px 16px; }
  .ab-card:hover .ab-img { opacity: 1; }
}
/* видео из raw-фрагмента: 16:9, по центру */
.ab-video { max-width: 720px; margin: 0 auto; }
.ab-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
/* cards: общие стили сайта для ul/li в #pageContent (отступы, ✓, центр) сюда не должны попадать */
#pageContent.ab-page .ab-cards, #pageContent.ab-page .ab-card__links { margin: 0; padding: 0; list-style: none; list-style-image: none; }
#pageContent.ab-page .ab-card { margin: 0; padding: 0; text-align: left; }
#pageContent.ab-page .ab-card__links { padding: 20px; }
#pageContent.ab-page .ab-card__links li { padding: 0 0 0 13px; margin: 0 0 4px; text-align: left; }
@media (hover: none) { #pageContent.ab-page .ab-card__links { padding: 0 20px 16px; } }
/* группы: длинные описания в сравнении — влево */
#pageContent.ab-page--group .ab-compare__item p { text-align: left; }
/* cards: ряды по центру, до 4 в ряд (per_row в данных ограничивает, у «Клейких лент» — 3, как на старом сайте) */
#pageContent.ab-page .ab-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px 20px;
  max-width: calc(var(--per-row, 4) * 288px + (var(--per-row, 4) - 1) * 20px); margin: 0 auto; }
.ab-card { width: 288px; border-radius: 0; }
@media (max-width: 640px) { .ab-card { width: 100%; max-width: 320px; } }
/* cats: нечётная последняя плитка — по центру ряда, а не одна слева */
@media (min-width: 768px) {
  .ab-cats > .ab-cat:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--ab-gap) / 2); }
}

/* Пункты-карточки начинаются с заглавной (решение 20.10): старые тексты писались списком «водонепроницаемость; …»,
   в отдельной плитке строчная выглядит ошибкой. Текст в данных не меняется. */
.ab-keys__item p::first-letter, .ab-why__item p::first-letter, .ab-tile p::first-letter, .ab-prem p::first-letter,
.ab-bar > span::first-letter, .ab-compare__item p::first-letter, .ab-use li::first-letter { text-transform: uppercase; }

/* Секции блоков, вставленные в страницу со своей разметкой (blocks/spin/insert.py, /palletoupakovshchiki): отступ от предыдущей полосы. */
.ab-insert { padding-top: clamp(40px, 6vw, 82px); }