/* ============================================================
   Адаптив под планшет/мобильные.

   Вёрстка страниц перенесена из макета инлайн-стилями под десктоп
   1280px+, поэтому переопределяем двумя слоями:
     1) по классам resp-* (расставлены в разметке);
     2) по подстрокам инлайн-стиля [style*="..."] — это ловит все
        элементы с тем же паттерном, включая те, где класса нет.
   Везде !important: обычное внешнее правило проигрывает инлайну,
   но внешнее !important — выигрывает.

   Брейкпоинты контент-ориентированные:
     ≤900px — планшет: все двухколоночные блоки в одну колонку
     ≤700px — крупные сетки 3–6 колонок в две, футер/CTA в стек
     ≤640px — мобильный: сетки в одну колонку, меньше отступы
     ≤480px — узкий телефон: компактная шапка
   ============================================================ */

/* ---------- Контейнеры секций: боковые поля ---------- */
@media (max-width:900px){
  .resp-container{padding-left:24px !important;padding-right:24px !important}
  [style*="padding:0 40px"],
  [style*="padding:64px 40px"],
  [style*="padding:72px 40px"],
  [style*="padding:48px 40px"],
  [style*="padding:24px 40px"],
  [style*="padding:20px 40px"],
  [style*="padding:18px 40px"],
  [style*="padding:14px 40px"]{padding-left:24px !important;padding-right:24px !important}
}
@media (max-width:640px){
  .resp-container{padding-left:16px !important;padding-right:16px !important}
  [style*="padding:0 40px"],
  [style*="padding:64px 40px"],
  [style*="padding:72px 40px"],
  [style*="padding:48px 40px"],
  [style*="padding:24px 40px"],
  [style*="padding:20px 40px"],
  [style*="padding:18px 40px"],
  [style*="padding:14px 40px"]{padding-left:16px !important;padding-right:16px !important}
  /* вертикальные отступы секций чуть компактнее */
  [style*="padding:64px 40px"],[style*="padding:72px 40px"]{padding-top:40px !important;padding-bottom:40px !important}
}

/* ---------- Шапка: гамбургер вместо горизонтальной навигации ---------- */
.resp-hamburger{display:none}
@media (max-width:900px){
  .resp-header-inner{gap:16px !important}
  .resp-nav{
    position:fixed;top:80px;left:0;right:0;
    background:#ffffff;border-bottom:0 solid #e4e8ea;
    flex-direction:column !important;align-items:stretch !important;
    padding:0 24px !important;gap:0 !important;margin:0 !important;
    max-height:0;overflow:hidden;contain:layout paint;
    transition:max-height 220ms cubic-bezier(.16,1,.3,1),padding 220ms cubic-bezier(.16,1,.3,1);
    z-index:31;
  }
  .resp-nav a{padding:14px 0 !important;width:100%;box-sizing:border-box}
  .resp-nav.is-open{
    max-height:340px;
    padding:8px 24px !important;
    border-bottom-width:1px;
    box-shadow:0 8px 24px rgba(43,56,61,.08);
  }
  .resp-phone{display:none !important}
  .resp-hamburger{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:none;
    border:1px solid #d5dcdf;border-radius:8px;background:none;cursor:pointer;padding:0;
  }
  .resp-hamburger span,.resp-hamburger span::before,.resp-hamburger span::after{
    content:"";display:block;width:18px;height:2px;background:#2b383d;
    position:relative;transition:transform 200ms cubic-bezier(.16,1,.3,1),opacity 200ms;
  }
  .resp-hamburger span::before{position:absolute;top:-6px}
  .resp-hamburger span::after{position:absolute;top:6px}
  .resp-hamburger.is-open span{background:transparent}
  .resp-hamburger.is-open span::before{transform:translateY(6px) rotate(45deg)}
  .resp-hamburger.is-open span::after{transform:translateY(-6px) rotate(-45deg)}
}
@media (max-width:560px){
  .resp-tagline{display:none !important}
  .resp-header-cta{padding:10px 14px !important;font-size:11px !important}
  .resp-header-inner{gap:10px !important}
}
@media (max-width:430px){
  /* на узком телефоне оставляем знак логотипа + CTA + гамбургер,
     текстовую часть логотипа скрываем — иначе шапка не помещается */
  header [style*="flex-direction:column;gap:5px"]{display:none !important}
  .resp-header-cta{padding:9px 13px !important;font-size:11px !important}
}

/* ---------- Полосы-«хлебные крошки» под шапкой ---------- */
@media (max-width:900px){
  [style*="height:48px"][style*="display:flex"]{height:auto !important;min-height:48px;flex-wrap:wrap !important;padding-top:10px !important;padding-bottom:10px !important}
}
@media (max-width:640px){
  .resp-declaration{display:none !important}
  /* правые технические подписи в полосах и заголовках секций переносятся вниз */
  [style*="margin-left:auto"][style*="letter-spacing:.16em"],
  [style*="margin-left:auto"][style*="letter-spacing:.14em"],
  [style*="margin-left:auto"][style*="letter-spacing:.12em"]{margin-left:0 !important}
  /* родитель такой подписи должен разрешать перенос */
  [style*="display:flex"]:has(> [style*="margin-left:auto"]){flex-wrap:wrap !important;height:auto !important;row-gap:6px}
  [style*="display: flex"]:has(> [style*="margin-left:auto"]){flex-wrap:wrap !important;height:auto !important;row-gap:6px}
  /* строка крошек с nowrap — на узком экране разрешаем перенос */
  [style*="font:500 11px/1 Roboto,sans-serif"][style*="white-space:nowrap"]{white-space:normal !important;line-height:1.5 !important}
}

/* ---------- Двухколоночные блоки -> одна колонка ---------- */
@media (max-width:900px){
  .resp-hero,.resp-cards2,.resp-prod-grid,
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,.78fr)"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,.52fr)"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"],
  [style*="grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)"],
  [style*="grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)"],
  [style*="grid-template-columns:minmax(0,1fr) 518px"],
  [style*="grid-template-columns:minmax(0,1fr) 540px"]{
    grid-template-columns:minmax(0,1fr) !important;
    gap:32px !important;
  }
  /* правая колонка героя: убираем вертикальную линию-разделитель */
  [style*="border-left:1px solid"][style*="padding-left:48px"]{
    border-left:0 !important;padding-left:0 !important
  }
  /* фиксированные широкие боксы (фото 518/540) — на всю ширину */
  [style^="width:518px"],[style*=";width:518px"],
  [style^="width:540px"],[style*=";width:540px"],
  .resp-fixed-photo{width:100% !important;max-width:100% !important;flex:none !important}
}

/* ---------- Многоколоночные сетки карточек ---------- */
@media (max-width:900px){
  [style*="grid-template-columns:repeat(6,minmax(0,1fr))"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  /* 3–4 колонки на планшете дают ~120px на карточку: текст переносится по
     одному слову, а соседние карточки растягиваются по высоте под самую
     длинную. Переводим в две колонки уже здесь, а не с 700px. */
  .resp-stat4,.resp-cards4,.resp-grid-cards,
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important
  }
}
@media (max-width:700px){
  [style*="grid-template-columns:repeat(6,minmax(0,1fr))"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important
  }
  /* трёхколоночная панель детали вкуса/формулы */
  .resp-detail-panel,
  [style*="grid-template-columns:96px minmax(0,1fr) minmax(0,.9fr)"]{grid-template-columns:minmax(0,1fr) !important;gap:16px !important}
  /* футер */
  .resp-footer-grid,
  [style*="grid-template-columns:1.4fr 1fr 1fr"]{grid-template-columns:minmax(0,1fr) !important;gap:32px !important}
  /* CTA-блок: строка -> колонка */
  .resp-cta-row{flex-direction:column !important;align-items:flex-start !important}
  .resp-cta-row > div:last-child{align-items:flex-start !important;width:100%;box-sizing:border-box}
}
@media (max-width:640px){
  [style*="grid-template-columns:repeat(2,minmax(0,1fr))"],
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:minmax(0,1fr) !important}
  /* карточка вкуса: миниатюра + текст -> в столбик */
  [style*="grid-template-columns:minmax(0,.62fr) minmax(0,1fr)"]{grid-template-columns:minmax(0,1fr) !important}
}
@media (max-width:480px){
  .resp-cards4,.resp-grid-cards,
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(6,minmax(0,1fr))"]{
    grid-template-columns:minmax(0,1fr) !important
  }
  /* Элемент с `grid-column:span 2` в сетке из одной колонки достраивает
     неявную вторую колонку: карточки схлопываются в узкую полосу, текст
     переносится по одному слову, а высоты строк разъезжаются. */
  [style*="grid-column:span 2"]{grid-column:auto !important}
  /* строки «подпись : значение» */
  [style*="grid-template-columns:minmax(0,.42fr) minmax(0,1fr)"]{grid-template-columns:minmax(0,1fr) !important;gap:4px !important}
  /* плитки-акронимы (V·O·D·A, MORE/OPTIMAL/…) — компактнее в 2×2, а не в столбик */
  [style*="grid-template-columns:repeat(4,minmax(0,1fr));gap:1px"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
/* полосы статистики: аккуратные внутренние границы в режиме 2×2 */
@media (max-width:900px){
  .resp-stat4 > div{padding:20px !important;border-right:1px solid #e4e8ea !important}
  .resp-stat4 > div:nth-child(2n){border-right:none !important}
  .resp-stat4 > div:nth-child(n+3){border-top:1px solid #e4e8ea}
  /* та же полоса на три ячейки: третья уезжает во второй ряд и без линии
     сверху висит в воздухе */
  .resp-prod-stat3 > div:nth-child(2n){border-right:none !important}
  .resp-prod-stat3 > div:nth-child(n+3){border-top:1px solid #e4e8ea}
}
@media (max-width:480px){
  .resp-stat4 > div{border-right:none !important;border-top:1px solid #e4e8ea}
  .resp-stat4 > div:first-child{border-top:none}
  .resp-prod-stat3 > div{border-right:none !important}
  .resp-prod-stat3 > div + div{border-top:1px solid #e4e8ea}
}

/* ---------- Мини-сетка логотипов брендов в героях ---------- */

/* ---------- «Веер» из 8 банок на странице Chiko-Choko ----------
   js/chiko-choko.js проставляет высоту инлайном (360/280/245/220px),
   поэтому ловим по текущему значению — «веер» сохраняет иерархию,
   но помещается в мобильную ширину. */
@media (max-width:640px){
  .hero-can[style*="height:360px"]{height:216px !important;margin:0 -17px !important}
  .hero-can[style*="height:280px"]{height:168px !important;margin:0 -20px !important}
  .hero-can[style*="height:245px"]{height:147px !important;margin:0 -20px !important}
  .hero-can[style*="height:220px"]{height:132px !important;margin:0 -20px !important}
}
@media (max-width:430px){
  .hero-can[style*="height:360px"]{height:170px !important;margin:0 -14px !important}
  .hero-can[style*="height:280px"]{height:132px !important;margin:0 -16px !important}
  .hero-can[style*="height:245px"]{height:116px !important;margin:0 -16px !important}
  .hero-can[style*="height:220px"]{height:104px !important;margin:0 -16px !important}
}
@media (max-width:360px){
  .hero-can[style*="height:360px"]{height:150px !important;margin:0 -13px !important}
  .hero-can[style*="height:280px"]{height:117px !important;margin:0 -15px !important}
  .hero-can[style*="height:245px"]{height:102px !important;margin:0 -15px !important}
  .hero-can[style*="height:220px"]{height:92px !important;margin:0 -15px !important}
}

/* ---------- Крупные фиксированные высоты ---------- */
@media (max-width:900px){
  /* часть стилей записана с пробелом после двоеточия — ловим и такие */
  [style*="padding: 20px 40px"]{padding-left:24px !important;padding-right:24px !important}
}
@media (max-width:640px){
  [style*="padding: 20px 40px"]{padding-left:16px !important;padding-right:16px !important}
  [style*="height: 460px"]{height:300px !important}
  /* две банки-формата в героe contract-bottling */
  [style*="height: 322px"]{height:240px !important;width:100px !important}
  [style*="height: 357px"]{height:266px !important;width:124px !important}
  [style*="height:460px"]{height:300px !important}
  [style*="height:420px"]{height:320px !important}
  [style*="height:300px"]{height:240px !important}
  [style*="height:220px"]{height:190px !important}
}
@media (max-width:400px){
  [style*="height:460px"]{height:250px !important}
  [style*="height:420px"]{height:260px !important}
}
/* сетка логотипов брендов внутри hero: высота по контенту, а не фикс. 300/460px
   Колонки схлопываются в 2 уже на 900px (общее правило repeat(4)→repeat(2)
   выше), поэтому и высота-по-контенту должна включаться на той же ширине —
   иначе одна строка на 300/460px не вмещает две, и overflow:hidden обрезает
   банки. Работает для обоих инлайн-значений высоты (300px и 460px), не
   зависит от того, какое именно стоит в разметке. */
@media (max-width:900px){
  .resp-brand-mini{grid-template-columns:repeat(2,minmax(0,1fr)) !important;height:auto !important;padding:10px 0}
  .resp-brand-mini > a{padding:14px 8px !important}
  .resp-brand-mini > a img{height:150px !important;flex:none !important}
}

/* ---------- Крупные расстояния между колонками ---------- */
@media (max-width:640px){
  [style*="gap:56px"]{gap:28px !important}
  [style*="gap:48px"]{gap:26px !important}
}

/* ---------- Вертикальный разделитель между группами тегов ----------
   Когда группы переносятся на разные строки, палочка высотой 20px встаёт
   на собственную строку и читается как пустой провал в списке. */
@media (max-width:640px){
  [style*="width:1px"][style*="height:20px"]{display:none !important}
}

/* ---------- Две банки-формата в карточке СТМ на главной ----------
   Блок с банками ужимается правилом выше с 300px до 240px, поэтому банки
   уменьшаем пропорционально — иначе они не помещаются по высоте и обрезаются.
   Соотношение высот 0,86 соответствует реальным банкам 0,33 и 0,45 л. */
@media (max-width:640px){
  .resp-can-sleek{height:164px !important;width:65px !important}
  .resp-can-standard{height:191px !important;width:79px !important}
}

/* ---------- Заголовки секций: подпись справа переносится вниз ---------- */
@media (max-width:640px){
  [style*="align-items:flex-end"][style*="justify-content:space-between"][style*="gap:32px"]{
    flex-wrap:wrap !important;gap:12px !important;align-items:flex-start !important
  }
}

/* ---------- Строки «подпись — значение» в спецификациях ---------- */
@media (max-width:480px){
  [style*="align-items:baseline"][style*="justify-content:space-between"][style*="padding:15px 0"]{
    flex-wrap:wrap !important;gap:4px !important
  }
  [style*="text-align:right"]{text-align:left !important}
}

/* ---------- Длинные слова в заголовках на узких экранах ----------
   «СОКОСОДЕРЖАЩИЕ», «ПОЛЬЗОВАТЕЛЬСКОЕ» и т.п. не влезают целиком —
   разрешаем перенос по слогам (lang="ru") с обычным переносом как запасным. */
@media (max-width:430px){
  h1,h2,h3{hyphens:auto;overflow-wrap:break-word}
}

/* ---------- Уважаем «уменьшить движение» ---------- */
@media (prefers-reduced-motion:reduce){
  .resp-nav{transition:none !important}
}