/* ==========================================
   Страница кислород — только контент ресурса
   Все селекторы ограничены .kislorod-page,
   чтобы не ломать шапку, меню и подвал сайта.
   ========================================== */

.kislorod-page {
  --blue: #099bd4;
  --deep: #087ebb;
  --ink: #30353b;
  --muted: #6d7b85;
  --line: #dbe3e9;
  --gold: #ffb900;
  color: var(--ink);
  font: 16px/1.55 Arial, Helvetica, sans-serif;
  container-type: inline-size;
  container-name: kislorod;
}

.kislorod-page,
.kislorod-page * {
  box-sizing: border-box;
}

.kislorod-page a {
  color: #028fca;
}

/* Заголовок ресурса MODX выводится над контентом.
   Если h1 уже внутри .hero — прячем дубль.
   Если нет — визуально вклеиваем CMS-заголовок в карточку hero. */
#main .item-page > h1 {
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: -0.5px;
  font-weight: 700;
  color: #30353b;
  margin: 0;
  padding: 22px 24px 0;
  border: 1px solid #dbe1e7;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #fff;
}

#main .item-page:has(.kislorod-page .hero h1) > h1 {
  display: none;
}

.kislorod-page p {
  font-size: 16px;
  line-height: 1.55;
  color: inherit;
  margin: 0 0 13px !important;
  padding: 0 !important;
}

.kislorod-page h2,
.kislorod-page h3 {
  font-weight: 700;
  color: #30353b;
}

/* Сброс хака сайта `#main ul { height: 1% }` — из-за него
   списки схлопывались, кнопки наезжали на пункты,
   а блок доставки разъезжался в ширину. */
#main .kislorod-page ul {
  height: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

#main .kislorod-page ul li {
  background: none;
  padding-left: 0;
  margin: 0;
}

/* Кнопки */

.kislorod-page a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 10px 16px;
  border: 0;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.kislorod-page a.button:hover,
.kislorod-page a.button:focus,
.kislorod-page a.button:visited {
  text-decoration: none;
}

.kislorod-page a.button.yellow {
  background: var(--gold);
  color: #202d38;
}

.kislorod-page a.button.blue {
  background: var(--blue);
  color: #fff;
}

.kislorod-page a.button.outline {
  color: #116996;
  background: #fff;
  border: 1px solid #c8d9e5;
}

.kislorod-page a.button.yellow:hover,
.kislorod-page a.button.blue:hover,
.kislorod-page a.button.outline:hover {
  filter: brightness(0.97);
}

/* Hero-блок */

.kislorod-page .hero {
  border: 1px solid #dbe1e7;
  border-radius: 8px;
  padding: 22px 24px 27px;
  background:
    radial-gradient(circle at 100% 100%, #dff4fc 0 65px, transparent 66px),
    #fff;
}

#main .item-page:not(:has(.kislorod-page .hero h1)) .kislorod-page .hero {
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding-top: 15px;
}

.kislorod-page .hero h1 {
  font-size: 34px;
  line-height: 1.18;
  font-weight: 700;
  color: #30353b;
  margin: 0 0 15px;
  letter-spacing: -0.5px;
}

.kislorod-page .hero p {
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 19px !important;
}

.kislorod-page .tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 21px;
}

.kislorod-page .tag {
  font-size: 14px;
  background: #f0f1f3;
  color: #526270;
  padding: 6px 10px;
  border-radius: 3px;
}

.kislorod-page .actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Преимущества */

.kislorod-page .benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0 28px;
}

.kislorod-page .benefit {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 10px;
  min-width: 0;
}

.kislorod-page .num {
  font-size: 24px;
  font-weight: 700;
  color: var(--blue);
}

.kislorod-page .benefit h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 5px 0;
}

.kislorod-page .benefit p {
  line-height: 1.5;
  font-size: 14px;
  color: var(--muted);
  margin: 0 !important;
}

/* Контентные секции */

.kislorod-page .section {
  margin: 25px 0;
}

.kislorod-page .section h2 {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 13px;
}

.kislorod-page .section h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
}

.kislorod-page .section .hint {
  margin: -6px 0 17px !important;
  color: var(--muted);
  font-size: 16px;
}

/* Цены и таблицы */

.kislorod-page .price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.kislorod-page .price-card {
  border: 1px solid #cddfeb;
  border-radius: 5px;
  overflow: hidden;
}

.kislorod-page .price-head {
  background: linear-gradient(100deg, #048cc8, #22afe0);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  padding: 8px 12px;
}

.kislorod-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.kislorod-page th {
  background: #e9f5fb;
  color: #166995;
}

.kislorod-page td,
.kislorod-page th {
  padding: 9px;
  text-align: left;
  border-bottom: 1px solid #e0e9ef;
}

.kislorod-page td:last-child,
.kislorod-page th:last-child {
  text-align: right;
}

.kislorod-page tr:last-child td {
  border-bottom: 0;
}

.kislorod-page tbody tr:nth-child(2n) {
  background: #f9fbfc;
}

.kislorod-page .fine {
  font-size: 14px;
  color: #637581;
  margin: 8px 0 13px !important;
}

.kislorod-page .center {
  text-align: center;
}

.kislorod-page .small {
  font-size: 14px;
  margin: 0 0 10px !important;
}

/* Качество и документы */

.kislorod-page .quality {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 10px;
}

.kislorod-page .quality table td:not(:first-child),
.kislorod-page .quality table th:not(:first-child) {
  text-align: center;
}

.kislorod-page .quality .doc {
  background: #f0f9fd;
  border: 1px solid #cfe7f6;
  padding: 17px;
  border-radius: 6px;
}

.kislorod-page .doc strong {
  display: block;
  color: #007eb5;
  margin-bottom: 8px;
}

/* Выбор решения */

.kislorod-page .decision {
  background: #f7f9fa;
  padding: 18px;
  border-radius: 7px;
}

.kislorod-page .decision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.kislorod-page .decision-card {
  background: #fff;
  border: 1px solid #d9e3e9;
  border-radius: 6px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kislorod-page .decision-card:first-child {
  border-color: #b9e6fb;
  background: #f5fcff;
}

.kislorod-page .eyebrow {
  color: #008ec7;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
}

.kislorod-page .decision-card h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 9px 0;
}

.kislorod-page .decision-card p {
  font-size: 14px;
  margin: 0 !important;
}

.kislorod-page .decision-card .button {
  margin-top: auto;
  align-self: flex-start;
}

#main .kislorod-page .checklist {
  padding: 8px 0 12px;
}

#main .kislorod-page .checklist li {
  margin: 7px 0;
  font-size: 14px;
  padding-left: 0;
}

#main .kislorod-page .checklist li:before {
  content: "✓";
  color: #008fc9;
  font-weight: bold;
  margin-right: 10px;
}

/* Доставка */

.kislorod-page .delivery,
.kislorod-page .delivery div {
  color: #fff;
}

.kislorod-page .delivery {
  background: linear-gradient(105deg, #0b9fd7, #058ac6);
  color: #fff;
  border-radius: 6px;
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 20px;
}

.kislorod-page .delivery h2 {
  color: #fff;
  font-weight: 700;
  margin: 0 0 8px;
}

.kislorod-page .delivery p {
  color: #fff;
  margin: 0 0 14px !important;
}

#main .kislorod-page .delivery ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 16px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

#main .kislorod-page .delivery li {
  margin: 0 0 7px;
  padding-left: 16px;
  color: #fff;
  position: relative;
}

#main .kislorod-page .delivery li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #fff;
}

.kislorod-page .delivery-box {
  border: 1px solid #69c9eb;
  background: #ffffff18;
  border-radius: 5px;
  padding: 17px;
}

.kislorod-page .delivery-box h3 {
  color: #fff;
  font-weight: 700;
  margin: 0 0 8px;
}

.kislorod-page .delivery-box p {
  color: #fff;
  font-size: 14px;
  margin: 0 0 14px !important;
}

/* Информационные блоки */

.kislorod-page .info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.kislorod-page .info-card {
  background: #f5fafd;
  border: 1px solid #d6e7f2;
  border-radius: 5px;
  padding: 14px;
}

.kislorod-page .info-card strong {
  color: #0478b7;
}

.kislorod-page .info-card p {
  font-size: 14px;
  margin: 8px 0 0 !important;
}

.kislorod-page .safety {
  border-left: 3px solid #efb038;
  background: #fff8e9;
  padding: 13px 15px;
  border-radius: 3px;
  margin-top: 10px;
}

.kislorod-page .safety p {
  margin: 7px 0 !important;
}

.kislorod-page .transport {
  background: #eaf7fc;
  border: 1px solid #cfe6f0;
  padding: 15px;
  border-radius: 5px;
  margin-top: 12px;
}

/* Области применения */

.kislorod-page .areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kislorod-page .area {
  border: 1px solid #d9e6ee;
  border-radius: 6px;
  padding: 13px 15px;
  background: #fcfeff;
}

.kislorod-page .area h3 {
  color: #077eaf;
  font-size: 16px;
  font-weight: 700;
}

#main .kislorod-page .area ul {
  padding-left: 18px;
  margin: 0;
  list-style: disc;
}

#main .kislorod-page .area li {
  font-size: 14px;
  margin: 5px 0;
}

/* SEO-текст */

.kislorod-page .seo p {
  margin: 0 0 13px !important;
}

.kislorod-page .doc p {
  margin: 0 0 10px !important;
}

/* Сетки под реальную ширину колонки контента (~630px),
   а не под ширину окна браузера. */
@container kislorod (max-width: 640px) {
  .kislorod-page .hero {
    padding: 19px;
  }

  .kislorod-page .hero h1 {
    font-size: 29px;
  }

  .kislorod-page .benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kislorod-page .delivery {
    grid-template-columns: 1fr;
  }
}

@container kislorod (max-width: 560px) {
  .kislorod-page .price-grid,
  .kislorod-page .quality,
  .kislorod-page .decision-grid,
  .kislorod-page .info-grid,
  .kislorod-page .areas {
    grid-template-columns: 1fr;
  }

  .kislorod-page a.button {
    white-space: normal;
    text-align: center;
  }

  #main .kislorod-page .delivery ul {
    grid-template-columns: 1fr;
  }
}

@container kislorod (max-width: 370px) {
  .kislorod-page .benefits {
    grid-template-columns: 1fr;
  }

  .kislorod-page .hero h1 {
    font-size: 27px;
  }
}