/* ============================================================
   CRYSTALLINE POND — Design System v5.1
   Единый CSS для всех продуктовых страниц линейки Pond
   Mobile-first · Scoped under .cp-page
   ============================================================ */

/* --- Переменные --- */
.cp-page {
  --cp-dark: #112e2c;
  --cp-primary: #1c534e;
  --cp-light: #d4ede9;
  --cp-lightest: #f0f8f7;
  --cp-border: #e8e8e8;
  --cp-border-soft: #e0e0e0;
  --cp-text: #333;
  --cp-text-light: #555;
  --cp-text-muted: #666;
  --cp-text-pale: #888;
  --cp-bg-neutral: #f8f8f8;
  --cp-bg-even: #f8fafa;
  --cp-accent-mint: #b2d9d5;
  --cp-warn: #d4a017;
  --cp-warn-bg: #fffbf0;
  --cp-warn-text: #7a5200;
  --cp-danger: #c53030;
  --cp-danger-bg: #fff5f5;
  --cp-danger-text: #9b2c2c;
  --cp-green: #38a22b;
  --cp-radius: 10px;
  --cp-radius-lg: 12px;
  --cp-shadow: 0 2px 8px rgba(17,46,44,0.07);
  --cp-shadow-hover: 0 4px 16px rgba(17,46,44,0.12);
  --cp-transition: 0.2s ease;
}


/* ============================================================
   BASE
   ============================================================ */

.cp-page {
  font-size: 16px;
  line-height: 25px;
  color: var(--cp-text);
  padding-bottom: 20px;
  box-sizing: border-box;
}
.cp-page *, .cp-page *::before, .cp-page *::after {
  box-sizing: border-box;
}

/* Типографика параграфов */
.cp-page > p,
.cp-page .cp-section > p {
  margin-bottom: 14px;
  line-height: 1.65;
}
.cp-page > p:last-child,
.cp-page .cp-section > p:last-child {
  margin-bottom: 0;
}

/* --- Изображения (общие) --- */
.cp-page img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* === FIX: DEFECT-02 — нейтрализация inline-стилей width/height
   на img внутри .cp-page. Необходимо, чтобы картинки корректно
   адаптировались независимо от inline-style, которые CMS-редактор
   добавляет автоматически. === */
.cp-page img {
  max-width: 100% !important;
  width: auto;
  height: auto !important;
}
.cp-page figure {
  margin: 20px 0;
  border-radius: var(--cp-radius-lg);
  overflow: hidden;
  box-shadow: var(--cp-shadow);
}
.cp-page figure img {
  width: 100%;
  height: auto;
  display: block;
}


/* ============================================================
   SECTION — секция с заголовком
   ============================================================ */

.cp-page .cp-section {
  margin-bottom: 40px;
}
.cp-page .cp-section__heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--cp-dark);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--cp-light);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}
.cp-page .cp-section__heading-icon {
  width: 34px;
  height: 34px;
  background: var(--cp-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}


/* ============================================================
   CALLOUT — выноски info / warn / danger
   ============================================================ */

.cp-page .cp-callout {
  border-left: 4px solid var(--cp-primary);
  border-radius: 0 8px 8px 0;
  padding: 16px 18px;
  margin: 16px 0;
}
.cp-page .cp-callout--info {
  background: var(--cp-lightest);
}
.cp-page .cp-callout--warn {
  background: var(--cp-warn-bg);
  border-left-color: var(--cp-warn);
}
.cp-page .cp-callout--warn strong {
  color: var(--cp-warn-text);
}
.cp-page .cp-callout--danger {
  background: var(--cp-danger-bg);
  border-left-color: var(--cp-danger);
}
.cp-page .cp-callout--danger strong {
  color: var(--cp-danger-text);
}


/* ============================================================
   TABLE — таблица с обёрткой
   ============================================================ */

.cp-page .cp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 24px;
}
.cp-page .cp-table th {
  background: var(--cp-primary);
  color: #fff;
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
}
.cp-page .cp-table th:first-child { border-radius: 8px 0 0 0; }
.cp-page .cp-table th:last-child  { border-radius: 0 8px 0 0; }
.cp-page .cp-table tr:last-child td:first-child { border-radius: 0 0 0 8px; }
.cp-page .cp-table tr:last-child td:last-child  { border-radius: 0 0 8px 0; }
.cp-page .cp-table tr:last-child td { border-bottom: none; }
.cp-page .cp-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #ececec;
  vertical-align: top;
}
.cp-page .cp-table tr:nth-child(even) td {
  background: var(--cp-bg-even);
}
.cp-page .cp-table td:first-child {
  font-weight: 600;
  color: var(--cp-primary);
}
.cp-page .cp-table--highlight td {
  background: var(--cp-lightest) !important;
}
.cp-page .cp-table--highlight td:nth-child(2) {
  color: var(--cp-dark);
  font-weight: 700;
}

.cp-page .cp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 12px 0;
  border-radius: 8px;
  border: 1px solid var(--cp-border);
  box-shadow: var(--cp-shadow);
}
.cp-page .cp-table-wrap .cp-table { margin: 0; }
.cp-page .cp-table-wrap .cp-table td,
.cp-page .cp-table-wrap .cp-table th {
  white-space: normal;
  min-width: 80px;
}


/* ============================================================
   STEP — шаг инструкции (номер + заголовок + тело)
   ============================================================ */

.cp-page .cp-step {
  margin-bottom: 24px;
}
.cp-page .cp-step__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.cp-page .cp-step__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cp-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cp-page .cp-step__title {
  font-weight: 700;
  color: var(--cp-dark);
  font-size: 18px;
  line-height: 1.3;
}
.cp-page .cp-step__body {
  color: var(--cp-text-light);
}
.cp-page .cp-step__body p {
  margin-bottom: 8px;
}
.cp-page .cp-step__body p:last-child {
  margin-bottom: 0;
}
.cp-page .cp-step__formula {
  display: inline-block;
  background: var(--cp-lightest);
  border: 1px solid var(--cp-accent-mint);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  color: var(--cp-primary);
  margin: 8px 0;
}
.cp-page .cp-step__example {
  background: var(--cp-bg-neutral);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 10px;
}
.cp-page .cp-step__example strong {
  color: var(--cp-dark);
}


/* ============================================================
   CARD — универсальная карточка
   Используется для: действия, траблшутинг, совместимость,
   безопасность, предосторожности
   ============================================================ */

.cp-page .cp-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.cp-page .cp-cards__title {
  font-weight: 700;
  color: var(--cp-dark);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 14px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cp-page .cp-card {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--cp-radius);
  background: var(--cp-bg-neutral);
  border: 1px solid var(--cp-border);
  align-items: flex-start;
  box-shadow: var(--cp-shadow);
  transition: box-shadow var(--cp-transition);
}
.cp-page .cp-card:hover {
  box-shadow: var(--cp-shadow-hover);
}
.cp-page .cp-card__icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.cp-page .cp-card__body {
  flex: 1;
  min-width: 0;
}
.cp-page .cp-card__name {
  font-weight: 700;
  color: var(--cp-dark);
  display: block;
  margin-bottom: 2px;
}
.cp-page .cp-card__desc {
  color: var(--cp-text-light);
  display: block;
}

/* Вариант: акцент (действия, положительная совместимость) */
.cp-page .cp-card--accent {
  background: var(--cp-lightest);
  border-color: var(--cp-light);
}

/* Вариант: предупреждение */
.cp-page .cp-card--warn {
  background: var(--cp-warn-bg);
  border-color: #f0c040;
}
.cp-page .cp-card--warn .cp-card__name {
  color: var(--cp-warn-text);
}
.cp-page .cp-card--warn .cp-card__desc {
  color: #6b4500;
}

/* Вариант: с круглой иконкой (траблшутинг) */
.cp-page .cp-card__icon--circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff3e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Вариант: безопасность (расширенная карточка) */
.cp-page .cp-card--safety {
  background: var(--cp-lightest);
  border-color: var(--cp-accent-mint);
  padding: 16px 18px;
  flex-direction: column;
  gap: 8px;
}
.cp-page .cp-card--safety .cp-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cp-page .cp-card--safety .cp-card__icon {
  font-size: 22px;
}
.cp-page .cp-card--safety .cp-card__name {
  margin-bottom: 0;
}
.cp-page .cp-card--safety.cp-card--warn {
  background: var(--cp-warn-bg);
  border-color: #f0c040;
}
.cp-page .cp-card--safety.cp-card--warn .cp-card__desc {
  color: #6b4500;
}

/* Примечание под набором карточек */
.cp-page .cp-cards__note {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--cp-bg-neutral);
  border-radius: 8px;
  color: var(--cp-text-muted);
}
.cp-page .cp-cards__note strong {
  color: var(--cp-text);
}


/* ============================================================
   TIMELINE — горизонтальные карточки процесса
   ============================================================ */

.cp-page .cp-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0;
}
.cp-page .cp-timeline__card {
  border-radius: var(--cp-radius-lg);
  border: 1px solid var(--cp-border-soft);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--cp-shadow);
  transition: box-shadow var(--cp-transition);
}
.cp-page .cp-timeline__card:hover {
  box-shadow: var(--cp-shadow-hover);
}
.cp-page .cp-timeline__card-img {
  width: 100%;
  height: 140px;
  background: linear-gradient(135deg, #e8f4f3 0%, #d4ede9 50%, #b2d9d5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.cp-page .cp-timeline__card-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 60%, rgba(28,83,78,0.08) 0%, transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(28,83,78,0.05) 0%, transparent 50%);
}
.cp-page .cp-timeline__card-img span {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.8);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--cp-text-pale);
}
/* === FIX: DEFECT-01 — img внутри card-img контейнеров должны
   заполнять контейнер с обрезкой по object-fit: cover.
   !important нужен, чтобы перебить глобальное .article img
   { height: auto !important } из styles.css и DEFECT-02 выше. === */
/* #middle-префикс бьёт глобальное `@media(max-width:999px) #middle img { height: auto !important }`
   из styles.css — оно имеет специфичность ID (1,0,1) и на мобильных перебивало наше (0,2,1). */
#middle .cp-page .cp-timeline__card-img img,
#middle .cp-page .cp-pond-card__img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  position: relative;
}

.cp-page .cp-timeline__card-body {
  padding: 16px 18px;
}
.cp-page .cp-timeline__card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.cp-page .cp-timeline__card-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(28,83,78,0.2);
}
.cp-page .cp-timeline__card-time {
  font-size: 18px;
  font-weight: 700;
  color: var(--cp-dark);
}
.cp-page .cp-timeline__card-text {
  color: var(--cp-text-light);
  line-height: 1.5;
}


/* ============================================================
   SCOPE — два столбца «решает / не решает»
   ============================================================ */

.cp-page .cp-scope {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cp-page .cp-scope__col {
  border-radius: var(--cp-radius);
  padding: 20px;
}
.cp-page .cp-scope__col--yes {
  background: var(--cp-lightest);
  border: 1px solid var(--cp-accent-mint);
}
.cp-page .cp-scope__col--no {
  background: var(--cp-bg-neutral);
  border: 1px solid var(--cp-border-soft);
}
.cp-page .cp-scope__col-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cp-page .cp-scope__col--yes .cp-scope__col-title { color: var(--cp-dark); }
.cp-page .cp-scope__col--no  .cp-scope__col-title { color: var(--cp-text-muted); }

.cp-page .cp-scope__item {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  align-items: flex-start;
}
.cp-page .cp-scope__item:last-child { margin-bottom: 0; }
.cp-page .cp-scope__item-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 700;
}
.cp-page .cp-scope__col--yes .cp-scope__item-icon {
  background: var(--cp-green);
  color: #fff;
}
.cp-page .cp-scope__col--no .cp-scope__item-icon {
  background: #ddd;
  color: #757575;
}
.cp-page .cp-scope__item-text strong {
  display: block;
  color: var(--cp-text);
  margin-bottom: 2px;
}
.cp-page .cp-scope__item-text span {
  color: var(--cp-text-muted);
}


/* ============================================================
   POND CARD — карточки типов прудов (green / yellow / red)
   ============================================================ */

.cp-page .cp-ponds {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cp-page .cp-pond-card {
  border-radius: var(--cp-radius-lg);
  border: 1px solid var(--cp-border-soft);
  overflow: hidden;
  position: relative;
  box-shadow: var(--cp-shadow);
  transition: box-shadow var(--cp-transition);
}
.cp-page .cp-pond-card:hover {
  box-shadow: var(--cp-shadow-hover);
}

/* Цветовые варианты */
.cp-page .cp-pond-card--green  { border-color: #a5d6a0; }
.cp-page .cp-pond-card--yellow { border-color: #e8c96a; }
.cp-page .cp-pond-card--red    { border-color: #e8a0a0; }

.cp-page .cp-pond-card__img {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--cp-text-pale);
  position: relative;
  overflow: hidden;
}
.cp-page .cp-pond-card--green  .cp-pond-card__img { background: linear-gradient(135deg, #e6f4e4 0%, #c8e6c5 50%, #a5d6a0 100%); }
.cp-page .cp-pond-card--yellow .cp-pond-card__img { background: linear-gradient(135deg, #fff8e1 0%, #ffe082 50%, #e8c96a 100%); }
.cp-page .cp-pond-card--red    .cp-pond-card__img { background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 50%, #e8a0a0 100%); }
.cp-page .cp-pond-card__img span {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.8);
  padding: 6px 14px;
  border-radius: 6px;
}

.cp-page .cp-pond-card__body { padding: 18px 20px; }
.cp-page .cp-pond-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cp-page .cp-pond-card__title {
  font-weight: 700;
  color: var(--cp-dark);
}
.cp-page .cp-pond-card__badge {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.cp-page .cp-pond-card--green  .cp-pond-card__badge { background: #e6f4e4; color: #2d7a23; }
.cp-page .cp-pond-card--yellow .cp-pond-card__badge { background: #fff5e0; color: #8a5200; }
.cp-page .cp-pond-card--red    .cp-pond-card__badge { background: #fee; color: var(--cp-danger-text); }
.cp-page .cp-pond-card__text {
  color: var(--cp-text-light);
  margin-bottom: 10px;
}
.cp-page .cp-pond-card__note {
  color: var(--cp-text-pale);
  padding-top: 10px;
  border-top: 1px solid #ececec;
  font-style: italic;
}


/* ============================================================
   PRECAUTIONS — список мер предосторожности
   ============================================================ */

.cp-page .cp-precautions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cp-page .cp-precautions li {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--cp-bg-neutral);
  border-radius: var(--cp-radius);
  align-items: flex-start;
}
.cp-page .cp-precautions li span:first-child {
  font-size: 18px;
  flex-shrink: 0;
}


/* ============================================================
   SCENARIO — блоки сценариев с цветовыми темами
   Тема задаётся через CSS-переменную --sc-color на обёртке
   ============================================================ */

/* Предустановленные темы */
.cp-page .cp-scenario-wrap--water   { --sc-color: 46,134,193;  --sc-header: #2e86c1; }
.cp-page .cp-scenario-wrap--fish    { --sc-color: 28,83,78;    --sc-header: #1c534e; }
.cp-page .cp-scenario-wrap--algae   { --sc-color: 56,162,43;   --sc-header: #2d8a24; }
.cp-page .cp-scenario-wrap--spring  { --sc-color: 232,160,64;  --sc-header: #b07a20; }
.cp-page .cp-scenario-wrap--complex { --sc-color: 197,48,48;   --sc-header: #b22a2a; }

/* Фото-заглушка */
.cp-page .cp-scenario-photo {
  width: 100%;
  height: 220px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg, #e8f4f3 0%, #d4ede9 50%, #b2d9d5 100%);
  order: -1;
}
.cp-page .cp-scenario-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cp-page .cp-scenario-photo__label {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--cp-text-pale);
  white-space: nowrap;
}

/* Обёртка сценария */
.cp-page .cp-scenario-wrap {
  border-radius: var(--cp-radius-lg);
  overflow: hidden;
  border: 1px solid var(--cp-border-soft);
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--cp-shadow);
  transition: box-shadow var(--cp-transition);
}
.cp-page .cp-scenario-wrap:hover {
  box-shadow: var(--cp-shadow-hover);
}
.cp-page .cp-scenario-wrap:last-child { margin-bottom: 0; }

/* Блок сценария */
.cp-page .cp-scenario-block {
  display: contents;
}

/* Заголовок сценария */
.cp-page .cp-scenario-block__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px 14px;
  margin: 0;
  background: transparent;
  order: -2;
}
.cp-page .cp-scenario-block__icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}
.cp-page .cp-scenario-block__title {
  font-weight: 700;
  color: var(--cp-dark);
  font-size: 17px;
  line-height: 1.35;
}
.cp-page .cp-scenario-block__sub {
  display: block;
  font-weight: 400;
  color: var(--cp-text-muted);
  font-size: 15px;
  margin-top: 2px;
}

/* Карточки-шаги внутри сценария */
.cp-page .cp-scenario-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 24px;
}
.cp-page .cp-scenario-step {
  padding: 14px 16px;
  border-radius: var(--cp-radius);
  background: var(--cp-bg-neutral);
  border: 1px solid var(--cp-border);
  position: relative;
}
.cp-page .cp-scenario-step--highlight {
  background: var(--cp-lightest);
  border-color: var(--cp-accent-mint);
}
.cp-page .cp-scenario-step__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cp-page .cp-scenario-step__num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cp-border);
  color: var(--cp-text-light);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cp-page .cp-scenario-step--highlight .cp-scenario-step__num {
  background: var(--cp-primary);
  color: #fff;
}
.cp-page .cp-scenario-step__name {
  font-weight: 700;
  color: var(--cp-dark);
}
.cp-page .cp-scenario-step--highlight .cp-scenario-step__name {
  color: var(--cp-primary);
}
.cp-page .cp-scenario-step__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-page .cp-scenario-step__when {
  color: var(--cp-primary);
  font-weight: 600;
  font-size: 14px;
}
.cp-page .cp-scenario-step__what {
  color: var(--cp-text-muted);
}

/* Таблица сценариев — скрыта на всех разрешениях */
.cp-page .cp-scenario-table-wrap { display: none !important; }

/* Callout внутри сценария — padding из-за display:contents на родителе */
.cp-page .cp-scenario-block > .cp-callout {
  margin: 0 20px 20px;
}

/* Грид сценариев */
.cp-page .cp-scenarios-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cp-page .cp-scenarios-grid .cp-scenario-wrap {
  margin-bottom: 0;
}


/* ============================================================
   TABLET-SMALL (480px+) — FIX: DEFECT-05
   ============================================================ */

@media (min-width: 480px) {
  /* Таймлайн — 2 карточки в ряд */
  .cp-page .cp-timeline {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .cp-page .cp-timeline__card {
    flex: 1 1 calc(50% - 8px);
    min-width: calc(50% - 8px);
    max-width: calc(50% - 8px);
    display: flex;
    flex-direction: column;
  }
  .cp-page .cp-timeline__card-body { flex: 1; }

  /* Pond-карточки — 2 в ряд */
  .cp-page .cp-ponds {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .cp-page .cp-pond-card {
    flex: 1 1 calc(50% - 8px);
    min-width: calc(50% - 8px);
    max-width: calc(50% - 8px);
    display: flex;
    flex-direction: column;
  }
  .cp-page .cp-pond-card__body { flex: 1; }
}


/* ============================================================
   TABLET (800px+) — grid-layout: pond всегда 3 в ряд, timeline auto-fit
   ============================================================ */

@media (min-width: 800px) {
  /* Pond-карточки — grid 3 колонки, независимо от количества карточек */
  .cp-page .cp-ponds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex-direction: unset; /* сброс flex-direction от 480px */
  }
  /* Если pond-карточек ровно 4 — раскладка 2×2, иначе 4-я остаётся сиротой в 3-колоночной сетке */
  .cp-page .cp-ponds:has(.cp-pond-card:nth-child(4)):not(:has(.cp-pond-card:nth-child(5))) {
    grid-template-columns: repeat(2, 1fr);
  }
  .cp-page .cp-pond-card {
    min-width: 0;
    max-width: none;
    /* Внутренний flex для вертикального layout (фото + тело) сохраняется */
    display: flex;
    flex-direction: column;
  }
  .cp-page .cp-pond-card__body { flex: 1; }

  /* Timeline-карточки — auto-fit: сами находят оптимальное число колонок */
  .cp-page .cp-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    flex-direction: unset;
    flex-wrap: unset;
  }
  .cp-page .cp-timeline__card {
    min-width: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
  }
  .cp-page .cp-timeline__card-body { flex: 1; }
}


/* ============================================================
   MOBILE TABLE — FIX: DEFECT-06
   ============================================================ */

@media (max-width: 767px) {
  .cp-page .cp-table-wrap .cp-table td,
  .cp-page .cp-table-wrap .cp-table th {
    font-size: 14px;
    padding: 8px 10px;
    min-width: 60px;
  }
}

/* Таблицы внутри pond-card — компактнее на всех размерах (карточка узкая ~380px) */
.cp-page .cp-pond-card .cp-table td,
.cp-page .cp-pond-card .cp-table th {
  font-size: 13px;
  padding: 7px 9px;
  min-width: 55px;
}


/* ============================================================
   DESKTOP (768px+)
   ============================================================ */

@media (min-width: 768px) {
  .cp-page .cp-section__heading { font-size: 22px; }

  /* Таймлайн — горизонтальный (flex-wrap уже включён с 480px) */
  .cp-page .cp-timeline { flex-direction: row; }

  /* Карточки прудов — ряд (flex-wrap уже включён с 480px) */
  .cp-page .cp-ponds { flex-direction: row; }

  /* Scope — два столбца */
  .cp-page .cp-scope { flex-direction: row; }
  .cp-page .cp-scope__col { flex: 1; }

  /* Предосторожности — грид */
  .cp-page .cp-precautions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* Карточки — грид */
  .cp-page .cp-cards--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .cp-page .cp-cards--grid .cp-cards__title {
    grid-column: 1 / -1;
  }

  /* Safety-карточки — грид */
  .cp-page .cp-cards--safety-grid {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .cp-page .cp-cards--safety-grid .cp-card--safety {
    flex: 1 1 calc(50% - 5px);
  }

  /* Сценарии — 2 колонки */
  .cp-page .cp-scenarios-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
  }
  .cp-page .cp-scenarios-grid .cp-scenario-wrap {
    display: flex;
    flex-direction: column;
  }
  .cp-page .cp-scenarios-grid .cp-scenario-steps {
    flex: 1;
  }
  .cp-page .cp-scenarios-grid .cp-scenario-wrap:last-child:nth-child(odd) {
    grid-column: 1 / 2;
    margin: 0 auto;
    width: 100%;
  }
  .cp-page .cp-scenario-photo { height: 200px; }
}


/* ============================================================
   PROTOCOL — фото + текст (протоколы лечения)
   Mobile: фото сверху, текст снизу
   Desktop: фото слева, текст справа
   ============================================================ */

.cp-page .cp-protocol-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}
.cp-page .cp-protocol-photo {
  width: 100%;
  border-radius: var(--cp-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg, #e8f4f3 0%, #d4ede9 50%, #b2d9d5 100%);
  flex-shrink: 0;
  box-shadow: var(--cp-shadow);
}
.cp-page .cp-protocol-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 60%, rgba(28,83,78,0.08) 0%, transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(28,83,78,0.05) 0%, transparent 50%);
}
.cp-page .cp-protocol-photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.cp-page .cp-protocol-photo__label {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.8);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--cp-text-pale);
  text-align: center;
  line-height: 1.4;
}
.cp-page .cp-protocol-text {
  flex: 1;
  min-width: 0;
}

@media (min-width: 768px) {
  .cp-page .cp-protocol-layout {
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
  }
  .cp-page .cp-protocol-photo {
    width: 360px;
  }
}


/* ============================================================
   HIGHLIGHT — ключевой ответ / Q&A блок
   Используется для: answer-first блоки в статьях,
   вопрос-ответ на страницах товаров, FAQ
   ============================================================ */

.cp-page .cp-highlight {
  border-left: 4px solid var(--cp-primary);
  border-radius: 0 var(--cp-radius) var(--cp-radius) 0;
  padding: 18px 20px;
  margin: 18px 0;
  background: linear-gradient(135deg, var(--cp-lightest) 0%, #e8f4f3 100%);
  box-shadow: var(--cp-shadow);
}
.cp-page .cp-highlight__q {
  font-size: 17px;
  font-weight: 700;
  color: var(--cp-dark);
  margin-bottom: 8px;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.cp-page .cp-highlight__q::before {
  content: 'В';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cp-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.cp-page .cp-highlight__a {
  color: var(--cp-text-light);
  line-height: 1.6;
  padding-left: 34px;
}
.cp-page .cp-highlight__a::before {
  content: 'О';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cp-accent-mint);
  color: var(--cp-dark);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  margin-left: -34px;
  margin-right: 8px;
  vertical-align: middle;
}

/* Вариант: только ответ (answer-first, без вопроса) */
.cp-page .cp-highlight--answer-only {
  border-left-color: var(--cp-accent-mint);
  padding: 16px 20px;
}
.cp-page .cp-highlight--answer-only .cp-highlight__a {
  padding-left: 0;
  font-weight: 600;
  color: var(--cp-dark);
  font-size: 16px;
}
.cp-page .cp-highlight--answer-only .cp-highlight__a::before {
  display: none;
}


/* ============================================================
   WIDE DESKTOP (1200px+)
   Таблицы сценариев отключены — карточки-шаги отображаются
   на всех разрешениях (cp-scenario-table-wrap: display:none)
   ============================================================ */