/* ozone.biz.ua — вирівнювання під старий сайт (Helix3 + Bootstrap 3) */

/* Колонка контенту на всю ширину, коли бокових позицій на сторінці немає */
#sp-main-body .row > #sp-component:only-child {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

/* Контейнер блоків SP Page Builder — ширини Bootstrap 3, як на старому сайті */
#sp-page-builder .sppb-row-container {
  max-width: 100%;
}
@media (min-width: 768px) {
  #sp-page-builder .sppb-row-container { max-width: 750px; }
}
@media (min-width: 992px) {
  #sp-page-builder .sppb-row-container { max-width: 970px; }
}
@media (min-width: 1200px) {
  #sp-page-builder .sppb-row-container { max-width: 1170px; }
}

/* Галереї як у jw_sigpro: превʼю 330x200 у білій рамці з тінню, щільна сітка */
#sp-component .oz-gallery {
  grid-template-columns: repeat(auto-fill, 336px);
  gap: 13px;
}
#sp-component .oz-gallery a {
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  line-height: 0;
}
#sp-component .oz-gallery img {
  box-sizing: content-box;
  width: 330px;
  height: 200px;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, .35);
  transform: none !important;
}
@media (max-width: 767px) {
  #sp-component .oz-gallery { grid-template-columns: 1fr; justify-items: center; }
  #sp-component .oz-gallery img { max-width: calc(100% - 6px); }
}

/* Заголовок статті і шрифт — як на старому сайті */
body, p, li, td {
  font-family: "Open Sans", sans-serif;
}
#sp-component .article-details h1,
#sp-component .item-page h1,
#sp-component .article-header h1 {
  font-size: 24px;
  margin-bottom: 0;
}

/* Верхня смуга: вирівнювання ліворуч і сині посилання, як у Bootstrap 3 на старому сайті */
#sp-top-bar .sp-column,
#sp-top1 .sp-column,
#sp-top2 .sp-column {
  text-align: left !important;
}
#sp-top-bar a {
  color: #0f3485;
}
#sp-top-bar a:hover {
  color: #d4041c;
}

/* Статті в блогах/категоріях без рамок і внутрішніх відступів (у Helix3 їх не було) */
#sp-component .article,
#sp-component .blog-item {
  border: 0;
  padding: 0;
  box-shadow: none;
  background: none;
}

/* Базові відступи Bootstrap 3 (старий сайт), замість Bootstrap 5 */
p { margin: 0 0 10px; }
h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; }
h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; }
ul, ol { margin-top: 0; margin-bottom: 10px; }
table:not(.table) > tbody > tr > td,
table:not(.table) > tbody > tr > th { padding: 0; }

/* Заголовок статті: як h2 у Helix3 — відступ 8px зверху, висота рядка 24px */
#sp-component .article-details h1,
#sp-component .item-page h1,
#sp-component .article-header h1 {
  margin-top: 8px;
  line-height: 24px;
}

/* ===================== 22.09 піксель-звірка з живим (Bootstrap 3 / Helix3) ===================== */

/* Шрифт усюди як у BS3 (шаблон ставить body{font-family:Helvetica} з вищою вагою) */
html body, html body input, html body button, html body select, html body textarea,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .sppb-addon-title, html body .sppb-btn {
  font-family: "Open Sans", sans-serif;
}

/* Заголовки: розміри/висота рядка Bootstrap 3 (BS5 має h3 28px, h2 32px...) */
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
h1, h2, h3, h4, h5, h6 { line-height: 1.1; }
/* ваги заголовків — з параметрів Helix3 до взлому (Wayback 31.03.2025) */
h1 { font-weight: 800; } h2 { font-weight: 700; } h3, h4 { font-weight: 400; } h5, h6 { font-weight: 600; }
.sppb-addon-title { display: block; }
ul, ol { padding-left: 40px; }

/* Контейнер сторінки: 750 / 970 / 1140 (разом з полями 15px) — як .container у Helix3 на живому */
#sp-top-bar > .container, #sp-header > .container, #sp-main-body > .container,
#sp-bottom > .container, #sp-footer > .container, #sp-section-1 > .container {
  padding-left: 15px;
  padding-right: 15px;
  max-width: none;
}
@media (min-width: 768px) {
  #sp-top-bar > .container, #sp-header > .container, #sp-main-body > .container,
  #sp-bottom > .container, #sp-footer > .container, #sp-section-1 > .container { width: 750px; }
}
@media (min-width: 992px) {
  #sp-top-bar > .container, #sp-header > .container, #sp-main-body > .container,
  #sp-bottom > .container, #sp-footer > .container, #sp-section-1 > .container { width: 970px; }
}
@media (min-width: 1200px) {
  #sp-top-bar > .container, #sp-header > .container, #sp-main-body > .container,
  #sp-bottom > .container, #sp-footer > .container, #sp-section-1 > .container { width: 1140px; }
}

/* Колонки макета col-lg-* у Helix3 були BS3 (lg = від 1200px). У BS5 lg = від 992px,
   тому на 992–1199 верхня смуга і лівий/центр/правий стояли в рядок, а на живому — стовпчиком */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #sp-top-bar .row > [class*="col-lg-"],
  #sp-main-body .row > #sp-left,
  #sp-main-body .row > #sp-component,
  #sp-main-body .row > #sp-right,
  #sp-bottom .row > [class*="col-lg-"],
  #sp-footer .row > [class*="col-lg-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

/* Блог (категорії): у J3 колонки були col-sm-* (від 768px), у J6 — col-lg-* (від 992px) */
@media (min-width: 768px) {
  #sp-component .article-list .row > .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  #sp-component .article-list .row > .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  #sp-component .article-list .row > .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  #sp-component .article-list .row > .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
}
#sp-component .article-list .article { margin-bottom: 50px; border-radius: 0; }
#sp-component .article-list .article-header { margin-bottom: 30px; }
#sp-component .article-list .article-header h2 {
  font-size: 24px;
  line-height: 24px;
  margin: 8px 0 0;
}
#sp-component .article-list .article-header h2 a { color: #000; }

/* «Подробнее...» — кнопка btn-default з BS3 */
#sp-component .readmore { margin: 0 0 10px; }
#sp-component .readmore a {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
}
#sp-component .readmore a:hover { background: #e6e6e6; border-color: #adadad; color: #333; }

/* Модулі в боковых позиціях — без рамок/полів, заголовок дрібний капсом (Helix3) */
#sp-left .sp-module, #sp-right .sp-module {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 30px;
}
#sp-left .sp-module:last-child, #sp-right .sp-module:last-child { margin-bottom: 0; }
#sp-left .sp-module .sp-module-title, #sp-right .sp-module .sp-module-title {
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  border: 0;
  padding: 0;
  margin: 0 0 20px;
}

/* Форма зворотного дзвінка — як mod_ext_callback на BS3 */
.mod-ozcallback { padding-top: 24px; }
.mod-ozcallback .ozcb-form label { display: inline-block; margin-bottom: 5px; }
.mod-ozcallback .ozcb-form p:last-child { margin-bottom: 0; }
.mod-ozcallback .ozcb-form .form-control {
  width: 206px;
  max-width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.mod-ozcallback .btn {
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  background: #f0f0f0;
  border: 1px solid transparent;
  border-radius: 4px;
}

/* Верхня смуга: модулі inline з відступом 20px (Helix3) */
#sp-top-bar .sp-column .sp-module { display: inline-block; margin: 0 0 0 20px; }

/* Кнопка off-canvas: висота/відступ як у Helix3 (вигляд іконки й меню — за еталоном до взлому, див. j6/mig/custom-header-live-default.css) */
#sp-header #offcanvas-toggler { margin-left: 15px; height: 87px; line-height: 87px; }

/* Футер: без полів/рамки контейнера (Helix3); кольори футера — за еталоном до взлому */
#sp-footer .container-inner { padding: 0; border-top: 0; }

/* Сторінка статті: .entry-header mb 30, article.item-page mb 50 (Helix3) */
#sp-component .article-details .article-header { margin-bottom: 30px; }
#sp-component .article-details { margin-bottom: 50px; display: flow-root; }

/* Пагінація — .pagination з Bootstrap 3 (inline-block, margin 20px 0, 14px/20px, рамка #ddd) */
#sp-component ul.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0 !important;
  border-radius: 4px;
}
#sp-component ul.pagination > li { display: inline; }
#sp-component ul.pagination > li > a,
#sp-component ul.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  font-size: 14px;
  line-height: 20px;
  color: #337ab7;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0;
}
#sp-component ul.pagination > li:first-child > a,
#sp-component ul.pagination > li:first-child > span { margin-left: 0; border-radius: 4px 0 0 4px; }
#sp-component ul.pagination > li:last-child > a,
#sp-component ul.pagination > li:last-child > span { border-radius: 0 4px 4px 0; }
#sp-component ul.pagination > li > a:hover { color: #23527c; background-color: #eee; border-color: #ddd; }
#sp-component ul.pagination > .active > a,
#sp-component ul.pagination > .active > span {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
/* Лічильник «Страница N из M» — звичайний абзац над пагінацією (а не float-end) */
#sp-component .com-content-category-blog__counter,
#sp-component p.counter { float: none !important; padding: 0 !important; margin: 0 0 10px; }

/* iframe без frameborder="0" — стандартна рамка браузера 2px inset, як на живому (HU її обнуляє) */
#sp-component .article-list iframe:not([frameborder="0"]),
#sp-component .article-details iframe:not([frameborder="0"]) { border: 2px inset; }
/* Порожній блок кнопок редагування (J6) давав зайві 10px над текстом статті */
#sp-component .article-can-edit { margin-bottom: 0; }

/* SPPB: заголовок секції — SPPB 3 завжди 36px/36px (SPPB 6 бере розмір тега h2/h3/h4) */
#sp-page-builder .sppb-section-title .sppb-title-heading { font-size: 36px; line-height: 36px; }

/* SPPB-каруселі: розміри підписів як в інлайн-CSS SPPB 3 на живому; порожній .sppb-carousel-content
   (SPPB 6 його не виводить) давав відступ між заголовком і кнопкою: 20+30 / 15+20 / 10+10 */
#sppb-addon-1524116829817 .sppb-carousel-caption h2,
#sppb-addon-1524118307043 .sppb-carousel-caption h2 { font-size: 22px; line-height: 22px; margin: 0 0 50px !important; padding: 0; }
#sppb-addon-1531732636182 .sppb-carousel-caption h2,
#sppb-addon-1641470379002 .sppb-carousel-caption h2 { font-size: 46px; line-height: 56px; margin: 0 0 50px !important; padding: 0; }
#sppb-addon-1627281548988 .sppb-carousel-caption h2 { font-size: 46px; line-height: 56px; margin: 0 0 30px !important; padding: 0; }
@media (min-width: 768px) and (max-width: 991.98px) {
  #sp-page-builder .sppb-carousel-caption h2[id^="addon-title-"] { font-size: 36px; line-height: 46px; margin-bottom: 35px !important; }
}
@media (max-width: 767.98px) {
  #sp-page-builder .sppb-carousel-caption h2[id^="addon-title-"] { font-size: 16px; line-height: 20px; margin-bottom: 20px !important; }
}
/* SPPB 3: текстовий блок утримував нижній відступ останнього абзацу всередині (SPPB 6 — ні, −10px на блок) */
#sp-page-builder .sppb-addon-text-block .sppb-addon-content { display: flow-root; }

/* Стаття з прихованим заголовком: у Helix3 лишався порожній .entry-header з margin-bottom 30px */
#sp-component .article-details:not(:has(.article-header)) { padding-top: 30px; }

/* Галерея: геометрія jw_sigpro на живому — крок 350x220, превʼю зсунуте на 2px, контейнер margin 8 / padding 8 */
#sp-component .oz-gallery { margin: 8px 0; padding: 10px 0 20px 2px; gap: 14px; }
/* Заголовок категорії: у J3/Helix3 це був h2 (30px), у J6 — h1 */
#sp-component .com-content-category-blog > h1,
#sp-component .com-content-category-list > h1 { font-size: 30px; }
/* Стаття з «Заголовком сторінки» пункту меню: .page-header BS3 (40/20, лінія знизу) з h1 36px,
   а назва статті — h2 24px/24px, як .entry-header h2 у Helix3 */
#sp-component .article-details .page-header,
#sp-component .page-header {
  margin: 40px 0 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
#sp-component .article-details .page-header h1,
#sp-component .page-header h1 {
  font-size: 36px;
  line-height: 1.1;
  margin: 20px 0 10px;
}
#sp-component .article-details .article-header h2 {
  font-size: 24px;
  line-height: 24px;
  margin: 8px 0 0;
}


/* Списки в тексті статей: у BS3 li без вертикальних відступів, вкладені ul без нижнього (HU додає 4px) */
#sp-component [itemprop="articleBody"] li { margin-top: 0; margin-bottom: 0; }
ul ul, ul ol, ol ul, ol ol { margin-bottom: 0; }
/* BS3: img { vertical-align: middle } — рядки з інлайн-картинками (логотипи партнерів) нижчі, ніж з baseline у BS5 */
img { vertical-align: middle; }
/* figure без нижнього відступу 1rem (BS5 reboot), як у Helix3 */
figure { margin: 0; }
/* Порожній flex-блок кнопок редагування ламав схлопування відступів (заголовок 30px + перший елемент тексту) */
#sp-component .article-can-edit:not(:has(*)) { display: none !important; }
/* Блог на мобільному: у BS3 колонки — звичайні блоки, відступи статей схлопуються (50, а не 50+8) */
@media (max-width: 767.98px) {
  #sp-component .article-list > .row { display: block; }
}

/* ===================== 22.09 вечір: шапка/смуга/футер/шрифти за еталоном ДО взлому (Wayback 31.03.2025) =====================
   Джерело: inline <style> архівної головної (параметри Helix3) + presets/preset1.css + template.css — копії в wayback/css/ */
body { font-size: 17px; font-weight: 600; line-height: 24px; }
a { color: #22b8f0; }
a:hover { color: #0e9cd1; }
#sp-main-body a:hover { color: #db0909; }
#sp-main-body { padding: 0; margin: 0; }
#sp-section-3 { background-image: url("/images/01bg21.jpg"); background-repeat: repeat-x; }

/* Верхня смуга: небо на тлі, темно-синій текст, без полів */
#sp-top-bar {
  background: #fff url("/images/03bg21.jpg") no-repeat 0 0 / cover;
  color: #105380;
  padding: 0;
  margin: 0;
  font-size: 17px;
}
#sp-top-bar .sp-column { display: block; }

/* Шапка: блакитна 70px, горизонтальне меню Helix3 */
#sp-header {
  background: #6ecaf6;
  height: 70px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, .05);
  padding: 0;
}
#sp-header a { color: #05517d; }
#sp-header a:hover { color: #db0b0b; }
#sp-header .sp-column { display: block !important; }
#sp-header #sp-menu .sp-column { display: flex !important; align-items: center; justify-content: flex-end; text-align: right; }
#sp-header #sp-menu .sp-megamenu-wrapper { order: 1; }
#sp-header #sp-menu #offcanvas-toggler { order: 2; }
#sp-header .sp-megamenu-wrapper { display: flex !important; float: right; align-items: center; justify-content: flex-end; }
#sp-header .sp-megamenu-parent { order: 1; }
#sp-header #offcanvas-toggler { order: 2; }
#sp-header .sp-megamenu-parent { float: right; margin: 0; padding: 0; }
#sp-header .sp-megamenu-parent > li { display: inline-block; position: relative; padding: 0; }
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
  display: inline-block;
  padding: 0 15px;
  line-height: 60px;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #05517d;
  margin: 0;
}
#sp-header .sp-megamenu-parent > li:hover > a { color: #db0b0b; }
#sp-header .sp-megamenu-parent > li.sp-has-child > a::after {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  content: "107";
  margin-left: 4px;
  position: static;
  border: 0;
  transform: none;
}
#sp-header .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner { background: #fff; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .2); padding: 20px; }
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  display: block;
  padding: 10px;
  color: #141414;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  text-transform: none;
  letter-spacing: 0;
}
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover { background: #22b8f0; color: #fff; }
#sp-header #offcanvas-toggler {
  float: right;
  display: inline-block;
  height: auto;
  line-height: 60px;
  margin-left: 15px;
  font-size: 20px;
}
#sp-header #offcanvas-toggler .burger-icon { display: inline-block; width: 17px; vertical-align: middle; }
#sp-header #offcanvas-toggler .burger-icon > span { width: 17px; height: 3px; margin: 3px 0; background-color: #000; border-radius: 1px; }

/* Футер: сірий, білий текст по центру, копірайт */
#sp-footer { background: #696b68; color: #fff; text-align: center; padding: 20px 0; }
#sp-footer a { color: rgba(255, 255, 255, .9); }
#sp-footer a:hover { color: #fff; }
#sp-footer .sp-module { text-align: left; }

/* Пагінація — кольори preset1 Helix3 */
#sp-component ul.pagination > li > a,
#sp-component ul.pagination > li > span { color: #000; }
#sp-component ul.pagination > .active > a,
#sp-component ul.pagination > .active > span { background-color: #22b8f0; border-color: #22b8f0; color: #fff; }

/* Шапка до 1200: у Helix3 колонка user1 з плаваючими іконками має нульову висоту,
   тому меню лягає в той самий рядок, а не під нею */
@media (max-width: 1199.98px) {
  #sp-header > .container > .container-inner > .row { display: block; }
  #sp-header #sp-user1, #sp-header #sp-menu { width: 100%; max-width: 100%; }
  #sp-header #sp-user1 .sp-column { display: block; overflow: visible; }
  #sp-header #sp-user1 .sp-module, #sp-header #sp-user1 .sp-module-content, #sp-header #sp-user1 .mod-custom { display: contents; }
}

/* Off-canvas меню — стилі Helix3 (у шаблоні вони не залежали від затертих параметрів) */
/* Off-canvas меню як у Helix3: панель 320px справа, темна, пункти білі капсом 14px,
   «›» перед пунктом, «⌄» праворуч у батьківських, лінії-розділювачі; затемнення сторінки 0.2 без blur */
body.ltr.offcanvs-position-right .offcanvas-menu { width: 320px; right: -320px; background: #3d3d3d; color: #fff; }
body.ltr.offcanvs-position-right.offcanvas-active .offcanvas-menu { right: 0; }
.offcanvas-overlay { background: rgba(0, 0, 0, .2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.offcanvas-menu > .d-flex:first-child { position: absolute; top: 0; right: 0; z-index: 2; padding: 4px 15px 0 0 !important; }
.offcanvas-menu .close-offcanvas .burger-icon > span { background-color: #fff; }
.offcanvas-menu .offcanvas-inner { padding: 30px; }
.offcanvas-menu .offcanvas-inner .header-modules { display: none !important; }
.offcanvas-menu .offcanvas-inner ul.menu { margin: 0; padding: 0; }
.offcanvas-menu .offcanvas-inner ul.menu > li { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
  display: block;
  padding: 10px 20px !important;
  font-size: 14px;
  line-height: 28px;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
}
.offcanvas-menu .offcanvas-inner ul.menu > li > a::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  content: "\f105";
  margin-right: 10px;
}
.offcanvas-menu .offcanvas-inner ul.menu > li.active > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > a:hover { color: #fff; }
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler { color: #fff; right: 0 !important; transform: translateY(-50%) rotate(90deg); }
.offcanvas-menu .offcanvas-inner ul.menu ul li a { color: #fff; font-size: 14px; }

/* Внутрішні сторінки: трохи повітря під шапкою (на головній секції SPPB йдуть впритул, як в архіві) */
#sp-main-body { padding-top: 40px; }
body.com_sppagebuilder #sp-main-body { padding-top: 0; }