/* Точечные правила, аналог src/app/globals.css */

/* ZhiVoda — фикс размера */
img[src$="/Zivoda_Limon.png"],
img[src$="Zivoda_Limon.png"] {
  max-height: 185px !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
}

/* Сетка каталога: 3 карточки в ряд */
.product-panel .panel-body > .row > .col-sm-4 {
  flex: 0 0 33.333%;
  max-width: 33.333%;
}

@media (max-width: 991px) {
  .product-panel .panel-body > .row > .col-sm-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 575px) {
  .product-panel .panel-body > .row > .col-sm-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Блок "О компании" в две колонки */
.about-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.about-grid > .about-col { flex: 1 1 380px; }

/* Страница "Сертификаты" — высокая masonry-сетка */
.panel-body > .masonry-gallery {
  grid-auto-rows: minmax(240px, auto);
}

/* На главной — секция-карточка минералки/напитков */
.home-container .panel { background: #fff; }
.home-container .panel-body { min-height: 240px; }
.home-container .panel-body img { display: inline-block; max-width: 100%; }

/* Заметные текстовые блоки */
.panel-body p { font-size: 14px; line-height: 1.6; color: #444; }
.panel-body p + p { margin-top: 8px; }
.panel-body h1, .panel-body h2, .panel-body h3 { color: #007dc6; margin-top: 8px; margin-bottom: 12px; }

/* Ссылки внутри контента */
.panel-body a { color: #007dc6; }
.panel-body a:hover { color: #d9534f; }

/* ===== Esstet — карточка одного напитка ===== */
.esstet-row { align-items: stretch; }
.esstet-image-col {
  min-height: 420px;
  padding: 30px 15px;
}
.esstet-image-col .esstet-bottle {
  max-height: 380px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}
.esstet-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 25px;
}
.esstet-text-col p { font-size: 15px; line-height: 1.6; }
.esstet-text-col p:first-child {
  font-size: 18px;
  font-weight: 600;
  color: #d9534f;
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .esstet-image-col { min-height: 320px; }
  .esstet-image-col .esstet-bottle { max-height: 280px; }
}

/* ===== Esstet — индексная страница (4 карточки) ===== */
.estel-grid-row { gap: 0; align-items: stretch; }
.esstet-grid-cell { padding: 12px; text-align: center; display: flex; }
.esstet-grid-cell .panel {
  margin-bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Фиксированная высота заголовка: 3-строчное название («Карамбола Помело»)
   занимает столько же, сколько 2-строчные у остальных карточек. */
.esstet-grid-cell .panel-heading {
  height: 68px;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  overflow: hidden;
}
.esstet-grid-cell .panel-heading .panel-title {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.15;
}
.esstet-grid-cell .panel-heading .panel-title a { color: #fff; display: block; }
.esstet-card-body {
  flex: 1 1 auto;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 15px;
}
.esstet-card-body img {
  max-height: 180px;
  width: auto;
  height: auto;
}

/* ===== Esstet — карточки на главной (из home.html, разметка col-sm-3) ===== */
/* Колонки — flex-start, чтобы карточки не растягивались на высоту ряда */
.row > .col-sm-3:has(> .esstet-home-card) { display: flex; align-items: flex-start; }
.esstet-home-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* height: 100% убран — карточки живут по собственному содержимому */
  margin-bottom: 30px;
}
/* Фиксированная высота заголовка: 3-строчное «Карамбола Помело» = 2-строчным у соседей */
.esstet-home-card .panel-heading {
  height: 68px;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  overflow: hidden;
}
.esstet-home-card .panel-heading .panel-title {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.15;
}
.esstet-home-card .panel-heading .panel-title a { color: #fff; display: block; }
/* Специфичность 0,3,0 — выигрывает у .home-container .panel-body (0,2,0) без !important.
   !important добавлен для min-height как страховка. */
.home-container .esstet-home-card .panel-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  min-height: 0 !important;
  height: 190px;
  max-height: 190px;
  flex: 0 0 190px;
}
/* Урезаем высоту карточек Esstet на главной */
.esstet-home-card .panel-body img {
  max-height: 160px;
  width: auto;
  height: auto;
}

/* ===== Тоник — выравниваем высоту заголовка с Колокольчиком ===== */
/* Заголовок «Безалкогольный напиток «Тоник» и «Тоник со вкусом Грейпфрут»»
   при font-size:18px разбивается на 4 строки, делая карточку выше соседей.
   Уменьшаем шрифт до 14.5px → 2 строки, высота заголовка совпадает с Колокольчиком. */
.tonic-home-card .panel-heading {
  height: 72px;
  min-height: 72px;
  max-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  overflow: hidden;
}
.tonic-home-card .panel-heading .panel-title {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.2;
  text-align: center;
}
.tonic-home-card .panel-heading .panel-title a { color: #fff; }

/* ===== Sweet drinks — три карты ===== */
.sweet-drinks-row { gap: 0; }
.sweet-drinks-cell { padding: 14px; text-align: center; }
.sweet-drinks-btn {
  display: block;
  padding: 14px 20px;
  background: #f0ad4e;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  margin-bottom: 12px;
  font-weight: 700;
  transition: background-color .2s;
}
.sweet-drinks-btn:hover { color: #fff; opacity: 0.92; }
.sweet-drinks-btn h3 { color: #fff; margin: 0; font-size: 18px; line-height: 1.3; }
.sweet-drinks-btn-warning { background: #f0ad4e; }
.sweet-drinks-btn-success { background: #5cb85c; }
.sweet-drinks-btn-info { background: #5bc0de; }

.esstet-tropic { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; }
.esstet-tropic-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
}
.esstet-tropic-overlay img {
  max-height: 178px;
  width: auto;
  height: auto;
}

/* Карточки выравниваются по высоте через flex */
.sweet-drinks-row { display: flex; flex-wrap: wrap; align-items: stretch; }
.sweet-drinks-cell { display: flex; flex-direction: column; }
.sweet-drinks-cell > a:last-child { flex: 1 1 auto; display: flex; }

.sweet-drinks-card-image-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 4px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ===== Esstet в sladkie-napitki: in-flow контейнер вместо position:absolute ===== */
/* Оверлей position:absolute не участвовал в расчёте высоты потока, из-за чего
   якорь с flex:1 1 auto рос бесконтрольно при 2200px-высоких изображениях.
   Заменён на in-flow flex-контейнер с height:100% — аналогично sweet-drinks-card-image. */
.esstet-sdc-wrap {
  /* Наследует position:relative, overflow:hidden, height:280px от .sweet-drinks-card-image-wrap */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.esstet-sdc-bottles {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;           /* = 280px от родителя — держит якорь, как img в соседних карточках */
  padding: 10px 8px;
  box-sizing: border-box;
  overflow: hidden;
}
.esstet-sdc-bottles img {
  max-height: 178px;
  width: auto;
  height: auto;
  display: block;
  flex-shrink: 1;
}
.sweet-drinks-card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Тематические подложки для карточек без собственного фона */
.sweet-drinks-bg-warning {
  background: linear-gradient(135deg, #ffd07a 0%, #f0ad4e 60%, #d68b2a 100%);
}
.sweet-drinks-bg-success {
  background: linear-gradient(135deg, #9be09b 0%, #5cb85c 60%, #3f9c3f 100%);
}

/* Центрируем бутылку на странице продукта, когда используется фон-пузырьки */
.product-image-col.bubbles-bg {
  justify-content: center;
  align-items: center;
}

/* Фон с пузырьками для карточки «Колокольчик» */
.bubbles-bg {
  background-color: #5fb4d6;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,0.55) 0 8px, transparent 9px),
    radial-gradient(circle at 78% 15%, rgba(255,255,255,0.45) 0 12px, transparent 13px),
    radial-gradient(circle at 35% 70%, rgba(255,255,255,0.40) 0 16px, transparent 17px),
    radial-gradient(circle at 88% 78%, rgba(255,255,255,0.50) 0 10px, transparent 11px),
    radial-gradient(circle at 55% 40%, rgba(255,255,255,0.30) 0 6px, transparent 7px),
    radial-gradient(circle at 20% 90%, rgba(255,255,255,0.45) 0 9px, transparent 10px),
    radial-gradient(circle at 65% 92%, rgba(255,255,255,0.35) 0 14px, transparent 15px),
    radial-gradient(circle at 95% 45%, rgba(255,255,255,0.30) 0 7px, transparent 8px),
    radial-gradient(circle at 5% 55%, rgba(255,255,255,0.35) 0 5px, transparent 6px),
    linear-gradient(160deg, #87cee8 0%, #4ea7cc 60%, #2d7ea3 100%);
  background-repeat: no-repeat;
}

@media (max-width: 991px) {
  .sweet-drinks-card-image-wrap { height: 180px; }
  .esstet-tropic-overlay img { max-height: 130px; }
}
@media (max-width: 767px) {
  .sweet-drinks-row { flex-direction: column; }
  .sweet-drinks-card-image-wrap { height: 200px; }
}