/* ============================================================================
   «О компании» — бенто-раскладка (хендофф design_handoff_about_bento, 29.07.2026).
   Файл подключается только на /o-kompanii (addStyle в jv_about.php), поэтому
   правки .wrapper-middle ниже безопасны — они не утекают на другие страницы.

   Namespace: .abx-*  (старый .ab-* больше не используется; правила под него
   в custom.css остались мёртвыми селекторами и ни на что не влияют).

   Токены — из jv-variables.css. Бренд-оранжевый берём сайтовый (--jv-primary
   #E94E1B), а не #F25B24 из макета: на всём сайте акцент один.
   ========================================================================= */

:root {
  --abx-gap: 14px;
  --abx-r-panel: 30px;
  --abx-r-tile: 24px;
  --abx-r-btn: 15px;
  --abx-shadow: 0 4px 10px rgba(0, 0, 0, .1);
  --abx-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---- серая подложка страницы (бенто читается только на не-белом фоне) ----
   #258: фон должен доходить до линии-разделителя под шапкой, а .page-wrapper
   даёт сверху margin 20px — гасим его отрицательным margin и возвращаем padding-ом. */
.wrapper-middle { background: var(--jv-bg-surface); margin-top: -20px; padding-top: 20px; }
@media (max-width: 1890px) {
  /* .page-wrapper даёт padding 0 20px — выводим фон за него, отступ отдаём внутрь */
  .wrapper-middle { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 540px) {
  /* на телефоне кромка у .page-wrapper уже 16px (custom.css) — с -20px фон
     вылезал на 4px за край и давал горизонтальную прокрутку */
  .wrapper-middle { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

/* ---- крошки (штатный компонент темы) ---- */
.abx-crumb { padding: 6px 0 2px; }
.abx-crumb .breadcrumb { font-size: 14px; margin-bottom: 0; }
.abx-crumb .breadcrumb > li > a,
.abx-crumb .breadcrumb > li:last-child,
.abx-crumb .breadcrumb > li:last-child > a,
.abx-crumb .breadcrumb > li:last-child > span { font-size: 14px !important; }

/* ============================ каркас ============================ */
.abx {
  font-family: var(--jv-font-family);
  color: var(--jv-text-secondary);
  overflow-x: clip;
}
.abx__wrap {
  max-width: 1840px;
  margin: 0 auto;
  /* #300: было padding-top:8px — крошки на «О компании» стояли в 28px от шапки
     против 20px на остальных страницах и читались как съехавшие. Верхний
     отступ снят: крошки внутри этой обёртки и должны начинаться там же, где
     везде; для секций ниже отбивку даёт gap. */
  padding: 0 0 60px;
  display: flex;
  flex-direction: column;
  gap: var(--abx-gap);
}
.abx-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: var(--abx-gap);
}
.abx-bento, .abx-bento * { min-width: 0; }
/* запас под шапку при переходе по внутренним якорям (#ab-more, #partner) */
.abx-bento [id] { scroll-margin-top: 110px; }

.abx-s3  { grid-column: span 3; }
.abx-s4  { grid-column: span 4; }
.abx-s5  { grid-column: span 5; }
.abx-s7  { grid-column: span 7; }
.abx-s8  { grid-column: span 8; }
.abx-s12 { grid-column: span 12; }

/* ---- общие примитивы ---- */
.abx-tile {
  background: var(--jv-bg-white);
  border-radius: var(--abx-r-tile);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.abx-tile--dark { background: var(--jv-text-secondary); color: #fff; }
.abx-tile--accent { background: var(--jv-primary); color: #fff; }

.abx-panel {
  background: var(--jv-bg-white);
  border-radius: var(--abx-r-panel);
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.abx-panel--dark { background: var(--jv-text-secondary); color: #fff; }

.abx-eyebrow {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--jv-text-muted);
}
.abx-eyebrow--on-dark { color: rgba(255, 255, 255, .6); }
.abx-eyebrow--on-accent { color: rgba(255, 255, 255, .75); }
.abx-eyebrow--accent { color: var(--jv-primary); letter-spacing: .14em; }

.abx-h2 {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--jv-text-primary);
}
.abx-h2--on-dark { color: #fff; }

.abx-arr { font-size: 17px; line-height: 1; }

.abx-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--jv-primary);
  text-decoration: none;
}
.abx-link:hover { color: var(--jv-primary-hover); }

.abx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* сбрасываем UA-стили <button>: без этого buttonface даёт серую заливку под --outline */
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--abx-r-btn);
  padding: 15px 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--jv-transition-fast, .18s) var(--abx-ease),
              color var(--jv-transition-fast, .18s) var(--abx-ease),
              border-color .18s var(--abx-ease),
              transform .18s var(--abx-ease);
}
.abx-btn:focus-visible { outline: 2px solid var(--jv-primary); outline-offset: 2px; }
.abx-btn--light { background: #fff; color: var(--jv-text-secondary); }
.abx-btn--light:hover { color: var(--jv-text-secondary); transform: translateY(-2px); }
.abx-btn--outline { border-color: rgba(255, 255, 255, .55); color: #fff; }
.abx-btn--outline:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.abx-btn--primary { background: var(--jv-primary); color: #fff; }
.abx-btn--primary:hover { background: var(--jv-primary-hover); color: #fff; }
.abx-btn--lg { padding: 18px 28px; font-size: 16px; }

/* декоративные круги в плитках (лежат ПОД текстом — иначе накрывают подпись) */
.abx-blob { position: absolute; z-index: 0; border-radius: 999px; pointer-events: none; }
.abx-facts__sales > *:not(.abx-blob):not(.abx-facts__pic),
.abx-facts__range > *:not(.abx-blob):not(.abx-facts__pic) { position: relative; z-index: 1; }
.abx-blob--wash { right: -60px; bottom: -70px; width: 200px; height: 200px; background: #FEEDE6; }
.abx-blob--grey { right: -50px; top: -50px; width: 150px; height: 150px; background: var(--jv-bg-surface); }

/* ============================ 1. Герой ============================ */
.abx-hero {
  background: var(--jv-primary);
  color: #fff;
  border-radius: var(--abx-r-panel);
  padding: 44px 48px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
/* #268, #269: «с 2008 года» и «jazzway» должны стоять по верхнему краю друг с другом
   и с надзаголовком «ПРОДАЖИ» в правой плитке. Разные кегли ровняем общей line-height,
   а верх строки совпадает с плиткой за счёт одинакового padding-top (см. .abx-facts__sales). */
.abx-hero__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; line-height: 1; }
.abx-hero__eyebrow {
  font-size: 13px; font-weight: 500; line-height: inherit;
  letter-spacing: .14em; text-transform: uppercase; opacity: .75;
}
.abx-hero__brand { font-size: 13px; font-weight: 700; line-height: inherit; letter-spacing: -.01em; }
.abx-hero__body { display: flex; flex-direction: column; gap: 22px; }
.abx-hero__h1 {
  margin: 0;
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.03em;
  color: #fff;
}
.abx-hero__lead {
  margin: 0;
  max-width: 640px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.5;
  color: rgba(255, 255, 255, .92);
}
.abx-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }

/* ======================= 2. Три плитки фактов ======================= */
.abx-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abx-gap);
}
.abx-facts__sales {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  min-height: 190px;
  gap: 14px;
  /* #269: верх надзаголовка «ПРОДАЖИ» встаёт на одну линию с «С 2008 ГОДА» в герое
     (у героя padding-top 44px) */
  padding-top: 44px;
}
.abx-facts__num {
  font-size: clamp(34px, 4vw, 56px); font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: var(--jv-text-primary);
}
.abx-facts__cap { font-size: 15px; line-height: 1.4; color: var(--jv-text-secondary); max-width: 260px; }
/* #265, #266: иллюстрации-светильники в плитках (лежат над кругом, но под текстом) */
.abx-facts__pic { position: absolute; z-index: 0; pointer-events: none; user-select: none; }
.abx-facts__pic--track { right: 10px; bottom: -18px; width: 190px; height: auto; }
/* #318: светильник смотрел «наружу» плитки (шинопровод у левого края картинки,
   корпус вправо) и висел с зазором от края. Зеркалим по X — свет уходит внутрь
   плитки, к тексту — и прижимаем к правому краю. */
.abx-facts__pic--spot { right: 0; top: 6px; width: 96px; height: auto; transform: scaleX(-1); }
.abx-facts__office { justify-content: space-between; gap: 18px; min-height: 190px; padding: 26px 28px; }
.abx-facts__city { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.abx-facts__note { margin-top: 8px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .7); }
.abx-facts__range {
  position: relative; overflow: hidden;
  justify-content: space-between; gap: 18px; min-height: 190px; padding: 26px 28px;
}
.abx-facts__claim {
  font-size: 30px; font-weight: 700; line-height: 1.05;
  letter-spacing: -.02em; color: var(--jv-text-primary); position: relative; z-index: 1;
}

/* ========================== 3. О бренде ========================== */
.abx-intro { gap: 22px; }
/* #267: было `columns: 2` — при разной длине абзацев браузер балансирует высоту
   и вторая колонка начиналась не от верха. Обычная сетка держит верхний край. */
.abx-intro__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: 44px;
  row-gap: 16px;
}
.abx-intro__cols p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--jv-text-secondary);
}

/* ======================= 4. География продаж ======================= */
/* карта убрана (#261) — панель работает как текстовый блок с переходом в «Где купить» */
.abx-geo { justify-content: center; gap: 18px; }
.abx-geo__lead { margin: 0; max-width: 720px; font-size: 17px; line-height: 1.55; color: var(--jv-text-secondary); }
.abx-geo__btn { align-self: flex-start; margin-top: 8px; }

/* ==================== 5. Партнёрская колонка ==================== */
.abx-side { display: grid; grid-auto-rows: minmax(0, 1fr); gap: var(--abx-gap); }
.abx-side__partners { justify-content: center; gap: 10px; padding: 32px; }
.abx-side__num { font-size: clamp(40px, 4.4vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.abx-side__cap { font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .9); }
.abx-side__cta { justify-content: space-between; gap: 20px; padding: 30px 32px; }
.abx-side__text { font-size: 15px; line-height: 1.5; color: var(--jv-text-secondary); }

/* ==================== 6. Заголовки секций + цифры ==================== */
/* #264: заголовок и лид стояли в одну строку по краям панели — лид «отлетал»
   к правому краю и читался как чужой. Ставим лид под заголовок. */
.abx-sechead { display: flex; flex-direction: column; gap: 10px; padding: 26px 4px 6px; }
.abx-sechead__lead { margin: 0; max-width: 780px; font-size: 16px; line-height: 1.55; color: var(--jv-text-secondary); }

.abx-fig { justify-content: center; gap: 12px; min-height: 160px; padding: 30px 32px; }
.abx-fig__num {
  font-size: clamp(30px, 3.4vw, 48px); font-weight: 700; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: var(--jv-text-primary);
}
.abx-fig__cap { font-size: 15px; line-height: 1.45; opacity: .85; max-width: 260px; }
.abx-tile--dark .abx-fig__num { color: #fff; }

/* ====================== 7. Контроль качества ====================== */
.abx-quality { justify-content: space-between; gap: 32px; min-height: 380px; padding: 40px 42px; }
.abx-quality__body { display: flex; flex-direction: column; gap: 16px; }
.abx-quality__body p { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.abx-quality__facts {
  display: flex; gap: 28px; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 22px;
}
.abx-quality__n { display: block; font-size: 26px; font-weight: 700; line-height: 1; }
.abx-quality__c { display: block; margin-top: 6px; font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .6); }

/* ==================== 8. Коллаж фото лаборатории ==================== */
.abx-lab {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--abx-gap);
  min-height: 420px;
}
/* фото — абсолютом внутри плитки: иначе их натуральная высота (3000px+) попадает
   в intrinsic-размер грид-строки и коллаж растягивает весь ряд бенто */
.abx-lab figure { position: relative; margin: 0; min-height: 0; border-radius: var(--abx-r-tile); overflow: hidden; }
.abx-lab img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.abx-lab__a { grid-row: span 2; }
.abx-lab__d { grid-column: span 2; }

/* ========================= 9. Испытания ========================= */
.abx-test { gap: 14px; padding: 28px 30px; transition: box-shadow .2s var(--abx-ease); }
.abx-test:hover { box-shadow: var(--abx-shadow); }
.abx-test__ico { display: inline-flex; }
.abx-test__ico img { width: 44px; height: 44px; border-radius: 12px; display: block; }
.abx-test__title {
  margin: 0; font-size: 19px; font-weight: 600; line-height: 1.25;
  letter-spacing: -.01em; color: var(--jv-text-primary);
}
.abx-test__desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--jv-text-secondary); }

/* ======================= 10. Сотрудничество ======================= */
.abx-coop {
  background: var(--jv-primary);
  color: #fff;
  padding: 44px 46px;
  margin-top: 26px;
  gap: 32px;
  box-shadow: var(--abx-shadow);
}
.abx-coop__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.abx-coop__intro { display: flex; flex-direction: column; gap: 14px; }
.abx-coop__intro .abx-h2 { font-size: 38px; letter-spacing: -.03em; }
.abx-coop__lead { margin: 0; max-width: 620px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.abx-coop__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--abx-gap); }
.abx-coop__item {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .18s var(--abx-ease);
}
.abx-coop__item:hover { background: rgba(255, 255, 255, .22); }
.abx-coop__n { font-size: 13px; font-weight: 600; line-height: 1; color: rgba(255, 255, 255, .8); }
.abx-coop__item p { margin: 0; font-size: 15px; line-height: 1.45; color: #fff; }

/* ====================== 11. Контактная полоса ====================== */
.abx-contact {
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; padding: 36px 42px; margin-top: 12px;
}
.abx-contact__left { display: flex; flex-direction: column; gap: 8px; }
.abx-contact__title { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--jv-text-primary); }
.abx-contact__addr { font-size: 15px; line-height: 1.5; color: var(--jv-text-secondary); }
.abx-contact__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.abx-contact__tel {
  font-size: 22px; font-weight: 600; line-height: 1;
  color: var(--jv-text-primary); text-decoration: none;
}
.abx-contact__tel:hover { color: var(--jv-primary); }

/* ============================ адаптив ============================ */
@media (max-width: 1280px) {
  .abx-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .abx-bento > * { grid-column: span 6; }
  .abx-fig, .abx-test { grid-column: span 3; }
  .abx-side { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
  .abx-hero { min-height: 0; justify-content: flex-start; gap: 32px; padding: 36px 38px; }
  .abx-lab { grid-template-rows: 220px 220px; min-height: 0; align-self: start; }
  .abx-quality { min-height: 0; }
  .abx-intro__cols { column-gap: 32px; }
}

@media (max-width: 900px) {
  /* #367: было `columns: 1` — свойство многоколоночной вёрстки, а блок по #267
     переехал на display:grid, где оно не действует. Правило молча ничего не
     делало, и на 385px текст оставался в двух колонках по 145px. */
  .abx-intro__cols { grid-template-columns: minmax(0, 1fr); }
  .abx-side { grid-template-columns: minmax(0, 1fr); }
  .abx-coop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .abx__wrap { gap: 12px; padding-bottom: 40px; }
  .abx-bento { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .abx-bento > * { grid-column: span 1; }
  .abx-fig, .abx-test { grid-column: span 1; }
  /* #478: плитки с цифрами на мобилке — по 2 в ряд («Продажи» широкая сверху) */
  .abx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abx-facts__sales { grid-column: 1 / -1; }
  /* #477: иллюстрации-светильники в плитках на мобилке меньше — не подлезали под текст */
  .abx-facts__pic--track { width: 120px; right: 6px; bottom: -12px; }
  .abx-facts__pic--spot { width: 60px; top: auto; bottom: 8px; }
  .abx-facts__city { font-size: 20px; }
  .abx-facts__claim { font-size: 22px; }
  .abx-facts__office, .abx-facts__range { min-height: 150px; padding: 20px 18px; }
  .abx-hero { padding: 28px 22px; gap: 28px; border-radius: var(--abx-r-tile); }
  .abx-blob--wash { width: 150px; height: 150px; right: -50px; bottom: -55px; }
  .abx-blob--grey { width: 110px; height: 110px; right: -35px; top: -35px; }
  .abx-hero__actions .abx-btn { flex: 1 1 100%; }
  .abx-panel, .abx-coop { padding: 24px 22px; border-radius: 22px; }
  .abx-quality { padding: 26px 24px; min-height: 0; }
  .abx-tile { padding: 22px 20px; min-height: 0; }
  .abx-fig { min-height: 0; }
  .abx-h2 { font-size: 26px; }
  .abx-coop__intro .abx-h2 { font-size: 26px; }
  .abx-test__title { font-size: 17px; }
  .abx-sechead { padding: 18px 2px 4px; }
  .abx-lab { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 200px 200px 200px; }
  .abx-lab__a { grid-row: span 1; grid-column: span 2; }
  .abx-lab__d { grid-column: span 2; }
  .abx-coop__grid { grid-template-columns: minmax(0, 1fr); }
  .abx-coop { margin-top: 14px; }
  .abx-contact { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 8px; }
  .abx-contact__right { justify-content: space-between; }
  .abx-contact__right .abx-btn { flex: 1 1 100%; }
}