/* ── RATIONS PAGE OVERRIDES ── */

    /* Hero */
    .hero-rations {
      min-height: 600px;
      padding: 100px 40px 80px;
      align-items: center;
    }
    .hero-rations__inner {
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .hero-rations__title {
      font-size: clamp(40px, 5vw, 60px);
      margin-bottom: 18px;
    }
    .hero-rations__title span { color: #ffffff; }
    .hero-rations__sub {
      font-size: 18px;
      color: rgba(255,255,255,0.88);
      margin-bottom: 36px;
    }
    .intro__chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .chip {
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.3);
      color: #ffffff;
      font-size: 13px;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: 30px;
      backdrop-filter: blur(4px);
    }

    /* Steps inside hero */
    .hero-rations .intro-step {
      gap: 18px;
      align-items: flex-start;
    }
    .hero-rations .intro-step + .intro-step {
      margin-top: 28px;
    }
    .hero-rations .intro-step__num {
      width: 48px;
      height: 48px;
      font-size: 18px;
      flex-shrink: 0;
      background: rgba(177,253,211,0.15);
      color: #b1fdd3;
      border: 1.5px solid rgba(177,253,211,0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
    }
    .hero-rations .intro-step__title {
      font-size: 17px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 5px;
    }
    .hero-rations .intro-step__desc {
      font-size: 14px;
      color: rgba(255,255,255,0.72);
      line-height: 1.55;
    }
    /* connector line between steps */
    .rations-steps {
      display: flex;
      flex-direction: column;
    }
    .rations-step-wrap {
      display: flex;
      gap: 18px;
      align-items: stretch;
      position: relative;
    }
    .rations-step-wrap + .rations-step-wrap {
      margin-top: 0;
    }
    .rations-step-line {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      align-self: stretch;
    }
    .rations-step-line__num {
      width: 48px;
      height: 48px;
      flex-shrink: 0;
      border-radius: 50%;
      background: rgba(177,253,211,0.15);
      color: #b1fdd3;
      border: 1.5px solid rgba(177,253,211,0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      font-family: var(--font);
      z-index: 1;
    }
    .rations-step-line__bar {
      width: 2px;
      flex: 1;
      background: rgba(177,253,211,0.25);
      flex-shrink: 0;
    }
    .rations-step-body {
      padding-top: 10px;
      padding-bottom: 28px;
    }
    .rations-step-body__title {
      font-size: 17px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 5px;
      font-family: var(--font);
    }
    .rations-step-body__desc {
      font-size: 14px;
      font-weight: 500;
      color: rgba(255,255,255,0.72);
      line-height: 1.55;
      font-family: var(--font);
    }
    .rations-step-wrap:last-child .rations-step-body {
      padding-bottom: 0;
    }
    .rations-step-wrap:last-child .rations-step-line__bar {
      display: none;
    }

    /* Stats */
    .section--stats {
      background: #ffffff;
      padding: 70px 40px;
      border-top: 1px solid rgba(0,135,61,0.08);
      border-bottom: 1px solid rgba(0,135,61,0.08);
    }
    .section--stats .head {
      margin-bottom: 48px;
    }
    .stat-row {
      display: flex;
      align-items: stretch;
      max-width: 1000px;
      margin: 0 auto;
      border: 1px solid rgba(0,135,61,0.12);
      border-radius: 16px;
      overflow: hidden;
    }
    .stat-card {
      flex: 1;
      min-width: 0;
      text-align: center;
      padding: 32px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 0 !important;
      background: #ffffff;
      box-shadow: none !important;
      min-height: unset;
      height: auto;
      transition: none;
      border-top: none;
      border-bottom: none;
      border-left: none;
      border-right: none;
      position: relative;
    }
    .stat-card + .stat-card::before {
      content: '';
      position: absolute;
      left: 0; top: 20%; bottom: 20%;
      width: 1px;
      background: rgba(0,135,61,0.15);
      pointer-events: none;
    }
    .stat-card:hover {
      transform: none !important;
      box-shadow: none !important;
    }
    .stat-val {
      font-size: clamp(24px, 2.2vw, 34px);
      font-weight: 800;
      color: #00873d;
      line-height: 1.05;
      margin-bottom: 10px;
      width: 100%;
      text-align: center;
    }
    .stat-lbl {
      font-size: 13px;
      font-weight: 500;
      color: #676767;
      line-height: 1.35;
      width: 100%;
      text-align: center;
    }

    /* Features & Use-cases — white cards on light bg */
    .section--rations-feat {
      background: #ffffff;
      padding: 80px 40px;
    }
    .section--rations-use {
      background: #f5fdf8;
      padding: 80px 40px;
    }
    /* Assortment */
    .section--rations-assort {
      background: linear-gradient(180deg, #f5fdf8 0%, #ffffff 100%);
      padding: 80px 40px;
    }

    /* rations nat-card — card style with border */
    .rations-feat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .rations-feat-card {
      background: #ffffff;
      border: 1px solid rgba(0,135,61,0.1);
      border-radius: 20px;
      padding: 32px 28px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      gap: 0;
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .rations-feat-card.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .rations-feat-card:hover {
      box-shadow: 0 8px 28px rgba(0,135,61,0.1);
      border-color: rgba(0,135,61,0.25);
    }
    .rations-feat-card:nth-child(1) { transition-delay: 0.05s; }
    .rations-feat-card:nth-child(2) { transition-delay: 0.12s; }
    .rations-feat-card:nth-child(3) { transition-delay: 0.19s; }
    .rations-feat-card:nth-child(4) { transition-delay: 0.26s; }
    .rations-feat-card:nth-child(5) { transition-delay: 0.33s; }
    .rations-feat-card:nth-child(6) { transition-delay: 0.40s; }
    .rations-feat-icon {
      font-size: 32px;
      margin-bottom: 16px;
      line-height: 1;
      font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Android Emoji', sans-serif;
    }
    .rations-feat-title {
      font-size: 17px;
      font-weight: 700;
      color: #343434;
      margin-bottom: 10px;
      line-height: 1.25;
      font-family: var(--font);
    }
    .rations-feat-desc {
      font-size: 14px;
      font-weight: 500;
      color: #676767;
      line-height: 1.65;
      font-family: var(--font);
    }

    /* Assortment cards */
    .rations-assort-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .rations-assort-card {
      border-radius: 20px;
      overflow: hidden;
      background: #ffffff;
      border: 1px solid rgba(0,135,61,0.1);
      box-shadow: 0 2px 12px rgba(0,0,0,0.04);
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
    }
    .rations-assort-card.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .rations-assort-card:nth-child(1) { transition-delay: 0.05s; }
    .rations-assort-card:nth-child(2) { transition-delay: 0.15s; }
    .rations-assort-card:nth-child(3) { transition-delay: 0.25s; }
    .rations-assort-head {
      padding: 24px 28px;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .rations-assort-head--first { background: linear-gradient(135deg,#e8f5e9,#c8e6c9); }
    .rations-assort-head--second { background: linear-gradient(135deg,#fff8e1,#ffecb3); }
    .rations-assort-head--drinks { background: linear-gradient(135deg,#e8f5e9,#b2dfdb); }
    .rations-assort-head__emoji {
      font-size: 32px;
      font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Android Emoji', sans-serif;
    }
    .rations-assort-head__title {
      font-size: 18px;
      font-weight: 700;
      color: #343434;
      font-family: var(--font);
    }
    .rations-assort-body {
      padding: 20px 28px 28px;
    }
    .rations-assort-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .rations-assort-list li {
      font-size: 14px;
      font-weight: 500;
      color: #676767;
      padding-left: 18px;
      position: relative;
      line-height: 1.5;
      font-family: var(--font);
    }
    .rations-assort-list li::before {
      content: '';
      position: absolute;
      left: 0; top: 7px;
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #00873d;
    }

    /* Use-cases cards */
    .rations-use-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .rations-use-card {
      background: #ffffff;
      border: 1px solid rgba(0,135,61,0.1);
      border-radius: 20px;
      padding: 36px 28px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
    }
    .rations-use-card.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .rations-use-card:nth-child(2) { transition-delay: 0.1s; }
    .rations-use-card:nth-child(3) { transition-delay: 0.2s; }
    .rations-use-card:hover {
      box-shadow: 0 8px 28px rgba(0,135,61,0.1);
      border-color: rgba(0,135,61,0.25);
    }
    .rations-use-icon {
      font-size: 36px;
      margin-bottom: 18px;
      display: block;
      font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Android Emoji', sans-serif;
    }
    .rations-use-title {
      font-size: 18px;
      font-weight: 700;
      color: #343434;
      margin-bottom: 12px;
      line-height: 1.25;
      font-family: var(--font);
    }
    .rations-use-desc {
      font-size: 14px;
      font-weight: 500;
      color: #676767;
      line-height: 1.65;
      font-family: var(--font);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
      .hero-rations { padding: 80px 30px 70px; min-height: unset; }
      .hero-rations__inner { grid-template-columns: 1fr; gap: 48px; text-align: center; }
      .intro__chips { justify-content: center; }
      .rations-steps { max-width: 480px; margin: 0 auto; }
      .rations-feat-grid { grid-template-columns: repeat(2, 1fr); }
      .rations-assort-grid { grid-template-columns: repeat(3, 1fr); }
      .rations-use-grid { grid-template-columns: repeat(3, 1fr); }
      /* stat-row на этой странице — flex, не grid */
      #stats .stat-row {
        display: flex;
        grid-template-columns: unset;
        gap: 0;
      }
    }
    @media (max-width: 768px) {
      .hero-rations { padding: 56px 20px 52px; }
      .hero-rations__title { font-size: clamp(32px, 8vw, 44px); margin-bottom: 14px; }
      .hero-rations__sub { font-size: 16px; margin-bottom: 24px; }
      .intro__chips { gap: 8px; margin-bottom: 32px; }
      .chip { font-size: 12px; padding: 7px 13px; }
      .section--rations-feat,
      .section--rations-assort,
      .section--rations-use { padding: 56px 20px; }
      .section--stats { padding: 56px 20px; }
      .rations-feat-grid { grid-template-columns: 1fr; gap: 16px; }
      .rations-assort-grid { grid-template-columns: 1fr; gap: 16px; }
      .rations-use-grid { grid-template-columns: 1fr; gap: 16px; }
      /* на мобиле stat-row — grid 2 колонки с разделителями */
      #stats .stat-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border-radius: 12px;
      }
      .stat-card {
        border-right: none !important;
        border-bottom: none !important;
        border-top: none !important;
        border-left: none !important;
        position: relative;
      }
      /* убираем вертикальный разделитель десктопа */
      .stat-card + .stat-card::before { display: none; }
      /* вертикальный разделитель между колонками */
      .stat-card:nth-child(odd)::after {
        content: '';
        position: absolute;
        right: 0; top: 15%; bottom: 15%;
        width: 1px;
        background: rgba(0,135,61,0.15);
        pointer-events: none;
      }
      /* горизонтальный разделитель между строками */
      .stat-card:nth-child(-n+3)::before {
        content: '';
        position: absolute;
        left: 10%; right: 10%; bottom: 0;
        height: 1px;
        background: rgba(0,135,61,0.15);
        pointer-events: none;
        top: auto; width: auto;
      }
      /* последняя карточка (5-я нечётная) — на всю ширину */
      .stat-card:nth-last-child(1):nth-child(odd) {
        grid-column: 1 / -1;
      }
      .stat-card:nth-last-child(1):nth-child(odd)::after { display: none; }
    }

    .contact-band--rations .contact-band__bg {
      background-image: url('../assets/images/Banner_rations_contact.jpg');
    }
    @media (max-width: 480px) {
      .stat-card { padding: 22px 10px; }
      .stat-val { font-size: 26px; }
    }


/* ── ASSORTMENT LIST inside prod-card ── */
.prod-card__list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.prod-card__list li {
  font-size: 14px;
  font-weight: 500;
  color: #343434;
  padding-left: 14px;
  position: relative;
  line-height: 1.4;
}
.prod-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #00873d;
}

/* ── ASSORTMENT GRID ── */
#assortment .prod-grid {
  margin-left: auto;
  margin-right: auto;
  align-items: stretch;
}

/* Левая колонка — растягивается на высоту грида через flex */
#assortment .prod-col-left {
  display: flex;
}
#assortment .prod-col-left .prod-card--tall {
  flex: 1;
  width: 100%;
  min-height: 560px; /* задаём высоту здесь, не на гриде */
}

/* Правая колонка — две строки равной высоты */
#assortment .prod-col-right {
  grid-template-columns: 1fr; /* одна колонка вместо 2x2 */
  grid-template-rows: 1fr 1fr;
}
#assortment .prod-col-right .prod-card--square {
  aspect-ratio: unset;
  min-height: unset;
}

/* Читаемость текста */
#assortment .prod-card__filter {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0.45) 55%,
    rgba(0,0,0,0.82) 100%
  );
}
#assortment .prod-card__title {
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  margin-bottom: 8px;
}
#assortment .prod-card__list li {
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ── ASSORTMENT ADAPTIVE ── */
/* 1024px: custom.css делает prod-grid одноколоночным — принимаем это */
@media (max-width: 1024px) {
  #assortment .prod-col-left .prod-card--tall {
    min-height: 360px;
  }
  #assortment .prod-col-right {
    grid-template-columns: 1fr 1fr; /* рядом на планшете */
    grid-template-rows: 1fr;
  }
  #assortment .prod-col-right .prod-card--square {
    min-height: 280px;
  }
}

/* 768px: всё в одну колонку */
@media (max-width: 768px) {
  #assortment .prod-col-left .prod-card--tall {
    min-height: 300px;
  }
  #assortment .prod-col-right {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  #assortment .prod-col-right .prod-card--square {
    min-height: 260px;
  }
}