/* =========================================================
   ECOPLAST — каркас продуктовой страницы на 4 экрана
   Жироуловители, нефтеотделители, септики устроены одинаково:
   продукт → как работает → подбор под объект → расчёт.
   Здесь только структура; фоны, пропорции кадров и вуали —
   в grease.css / oil.css / septic.css.
   Префикс .g- исторический (первой была страница жироуловителей),
   читайте его как «generic product page».
   ========================================================= */

/* Высота фото-секций задаётся строго пропорцией кадра в vw и без
   потолка в пикселях. С потолком выше ~1570px секция переставала расти,
   а cover продолжал заполнять ширину — кадр раздувался и обрезался,
   выноски уезжали от своих деталей.
   ========================================================= */

/* =========================================================
   1. ПРОДУКТ
   ========================================================= */
/* Кадр из макета целиком: слева у него свой белый фейд, справа — изделие
   с вшитыми выносками и рукописной подписью. */
.ghero{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  /* кадр уезжает под стеклянную шапку и начинается от самого верха страницы */
  margin-top:calc(var(--header-h) * -1);
  padding-top:var(--header-h);
  padding-bottom:16px;
}
.ghero > .container{position:relative;z-index:1}
.ghero__in{flex:1;display:flex;align-items:flex-start;padding-top:14px;padding-bottom:20px}
/* На широком экране кадр становится заметно выше блока текста (его ширина
   ограничена контейнером и с вьюпортом не растёт). Прижатый к верху текст
   оставлял бы под собой пустую половину фотографии — центрируем. */
@media (min-width:1500px){
  /* То же для «как работает»: содержимое ограничено контейнером, кадр
     растёт — иначе низ фотографии остаётся пустым. У .gwork--fill колонки
     и так растянуты на всю высоту, а «подбор» центрировать нельзя: там
     текст сверху, а ниже по кадру идут выноски, и он наехал бы на них. */
  .gwork:not(.gwork--fill),.gcalc{display:flex;flex-direction:column;justify-content:center}
}
.ghero__copy{max-width:660px}
.ghero .h1{margin-top:16px}
.ghero .lead{margin-top:16px}

.ghero__feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px;max-width:720px}
.ghero__feats li{display:flex;align-items:flex-start;gap:11px;font-size:12.5px;line-height:1.4;color:#6f7d89}
.ghero__feats b{display:block;font-size:14px;font-weight:600;line-height:1.3;color:var(--ink);margin-bottom:3px}

/* вариант из макета септиков: три преимущества карточками в столбик */
.ghero__feats--stack{
  grid-template-columns:minmax(0,1fr);gap:10px;max-width:620px;
}
.ghero__feats--stack li{
  align-items:center;gap:14px;
  padding:14px 18px;border-radius:14px;
  background:rgba(255,255,255,.86);
  box-shadow:var(--shadow-card);
}
.ghero__feats--stack b{font-size:15px;margin-bottom:4px}

.ghero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.ghero__cta .btn--primary{min-width:268px;justify-content:flex-start}

/* полоса обещаний — в макете она лежит на нижней кромке кадра */
.gpromises-band{background:rgb(var(--seam));padding:18px 0 6px}
.gpromises-band .promises{margin-top:0}

/* =========================================================
   2. КАК РАБОТАЕТ
   ========================================================= */
.gwork{position:relative;overflow:hidden;padding:44px 0 48px}
.gwork > .container{position:relative;z-index:1}
.gwork__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:26px;align-items:start}
.gwork__copy{max-width:600px}
.gwork__copy .h2{margin-top:12px}
.gwork__copy .lead{margin-top:14px}

/* Секция тянется на всю высоту кадра: без этого колонки прижимались
   к верху и «прижатые к низу» шаги висели в середине фотографии. */
.gwork--fill{display:flex;flex-direction:column}
.gwork--fill .gwork__in{flex:1;align-items:stretch}

/* Колонка «текст сверху, шаги внизу» — так свёрстаны нефтеотделители
   и септики: под заголовком остаётся изделие, шаги прижаты к низу кадра. */
.gwork__left{display:flex;flex-direction:column;min-height:100%}
.gwork__left .gsteps{margin-top:auto;padding-top:34px}

.gwork__right{display:grid;grid-template-columns:minmax(0,344px) minmax(0,1fr);gap:20px;align-items:start}

/* три шага — фото слева, номер и текст справа */
.gsteps{display:grid;gap:16px}
.gstep{
  display:flex;align-items:stretch;gap:14px;
  padding:12px;border-radius:16px;
  background:rgba(255,255,255,.94);
  box-shadow:var(--shadow-card);
}
.gstep img{
  width:112px;flex:none;align-self:stretch;
  object-fit:cover;border-radius:12px;
}
.gstep__body{min-width:0;padding:4px 4px 4px 0;align-self:center}
.gstep__num{display:block;font-size:19px;font-weight:700;color:#9dc8e6;letter-spacing:-.02em}
.gstep__body b{display:block;margin-top:6px;font-size:15px;font-weight:600;line-height:1.25;color:var(--ink);letter-spacing:-.02em}
.gstep__body p{margin-top:8px;font-size:12.5px;line-height:1.45;color:#7a8794}

/* Вариант без фотографий: три шага в ряд под изделием.
   Номер уходит в кружок слева от заголовка. */
/* Шаг без фотографии: номер уходит в кружок слева от заголовка.
   Работает и столбиком (НУТЧ-фильтры), и в ряд (--row). */
.gstep--plain{flex-direction:column;gap:0;padding:18px 20px 20px;align-items:stretch}
.gstep--plain .gstep__body{padding:0;align-self:stretch;display:flex;flex-direction:column}
.gstep__head{display:flex;align-items:center;gap:12px}
.gstep__head .gstep__num{
  width:38px;height:38px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:#e8f2fa;color:var(--blue-d);
  font-size:14px;font-weight:600;
}
.gstep--plain .gstep__body b{margin-top:0;font-size:14.5px}
.gstep--plain .gstep__body p{margin-top:12px}
.gsteps--row{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

/* где применяются */
.guses{display:flex;flex-direction:column}
.guses .eyebrow{margin-bottom:12px;color:#8b98a4;letter-spacing:.12em}
.guses__title{font-size:clamp(18px,1.45vw,21px);font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:14px}
.guse{margin-bottom:14px;padding:16px;gap:12px}
.guse .ico-circle{width:40px;height:40px}
.guse .ico-circle svg{font-size:20px}
.guse .opt__txt b{font-size:15px}
.guse .opt__txt i{font-size:12.5px;margin-top:4px}
.guse .opt__chev{font-size:15px;color:var(--blue)}
.guses .btn--block{margin-top:auto}

/* правая колонка второго экрана: карточка, под ней кнопка и подпись,
   прижатые к низу кадра */
.gwork__side{display:flex;flex-direction:column}
.gwork__side .btn--block{margin-top:auto}
/* рукописная подпись в потоке, а не абсолютом */
.script--inline{position:static;margin-top:14px}

/* Рамка, повторяющая габарит кадра.
   Кадр масштабируется по высоте секции и прижат к краю, поэтому его
   ширина зависит от высоты, а та — от содержимого. Проценты выносок,
   посчитанные от секции, при этом уезжали бы. Рамка повторяет кадр
   через aspect-ratio, и внутри неё проценты снова совпадают с макетом. */
.gframe{position:absolute;top:0;height:100%;z-index:2;pointer-events:none}
.gframe--right{right:0}
.gframe--left{left:0}
.gframe--full{left:0;width:100%;height:auto}
@media (max-width:1200px){ .gframe{display:none} }

/* Выноска поверх фотографии. На страницах, где плашки вшиты в кадр,
   они не нужны; здесь кадры чистые, поэтому собираем их разметкой.
   Позиции задаются в процентах в CSS страницы и живут только на
   широких экранах — ниже 1200px кадр всё равно уходит под вуаль. */
.gcall{
  position:absolute;z-index:2;
  display:flex;align-items:center;gap:11px;
  padding:9px 14px;border-radius:14px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 26px -14px rgba(18,42,66,.35);
  white-space:nowrap;
}
.gcall svg{font-size:20px;flex:none;color:var(--blue);stroke-width:1.7}
.gcall b{display:block;font-size:13px;font-weight:600;line-height:1.25;color:var(--ink)}
.gcall i{display:block;margin-top:3px;font-style:normal;font-size:11.5px;line-height:1.3;color:#8b98a4}
@media (max-width:1200px){ .gcall{display:none} }

/* мелкие тезисы строкой под кнопкой */
.gnotes{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:16px}
.gnotes li{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.35;color:#7a8794}
.gnotes b{display:block;font-weight:600;color:var(--ink-2)}
.gnotes svg{font-size:18px;flex:none;color:var(--blue);stroke-width:1.8}

/* полоса гарантий на три пункта вместо четырёх.
   Только на десктопе: ниже 1200px page.css раскладывает её в две колонки,
   а безусловное правило отсюда перебивало бы их и давало горизонтальный скролл. */
@media (min-width:1201px){
  .promises--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* панель «где применяются» как белая карточка (нефтеотделители, септики) */
.guses--card{
  padding:24px 22px 22px;border-radius:20px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);
  box-shadow:var(--shadow-soft);
}
.guses--card .guse{background:#f7fafd;box-shadow:none}
.guses--card .guse:hover{background:#eef6fc}
.guses--card .guse:last-of-type{margin-bottom:0}

/* =========================================================
   3. ПОДБОР ПОД ОБЪЕКТ
   ========================================================= */
.gfit{position:relative;overflow:hidden;padding:40px 0 44px}
.gfit > .container{position:relative;z-index:1}
.gfit__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:30px;align-items:start}
.gfit__copy{max-width:600px;padding-top:4px}
.gfit__copy .h2{margin-top:10px}
.gfit__copy .lead{margin-top:12px}

.gpanel{
  padding:26px 26px 22px;border-radius:20px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);
  box-shadow:var(--shadow-soft);
  margin-top:14px;
}
.gpanel__title{font-size:clamp(16px,1.45vw,16px);font-weight:700;color:var(--ink);letter-spacing:-.02em}
.gpanel__list{margin-top:18px}
.gpanel__list li{display:flex;align-items:flex-start;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.gpanel__list li:last-child{border-bottom:0}
.gpanel__list li > div{min-width:0}
.gpanel__list b{display:block;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.gpanel__list p{margin-top:4px;font-size:12.5px;line-height:1.45;color:#8b98a4}
.gpanel__hint{margin-top:14px}
.gpanel .btn--block{margin-top:16px}
.gpanel__safe{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:12px;font-size:11.5px;color:#93a1ad;
}
.gpanel__safe svg{font-size:16px;stroke-width:1.8}

/* сетка мелких преимуществ под текстом (септики, 3 экран) */
.gcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px;max-width:600px}
.gcards li{
  display:flex;align-items:flex-start;gap:12px;
  padding:16px 18px;border-radius:14px;
  background:rgba(255,255,255,.88);
  box-shadow:var(--shadow-card);
}
.gcards li > div{min-width:0}
.gcards li:last-child:nth-child(odd){grid-column:1 / -1}
.gcards b{display:block;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.gcards p{margin-top:5px;font-size:12.5px;line-height:1.45;color:#7a8794}
.gcards .ico-circle{width:40px;height:40px}
.gcards .ico-circle svg{font-size:20px}

/* =========================================================
   4. РАСЧЁТ
   ========================================================= */
.gcalc{position:relative;overflow:hidden;padding:46px 0 50px}
.gcalc > .container{position:relative;z-index:1}
.gcalc__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:34px;align-items:start}
.gcalc__left{max-width:540px;padding-top:6px}
.gcalc .h2{margin-top:14px}
.gcalc .lead{margin-top:12px}

/* форма слева, тезисы справа от неё, фото — дальше (нефтеотделители) */
.gcalc--formleft .gcalc__in{grid-template-columns:minmax(0,640px) minmax(0,300px) minmax(0,1fr);gap:24px}
.gcalc--formleft .gcalc__left{grid-column:1 / -1;max-width:760px}

.gwhy{
  padding:22px 22px 18px;border-radius:20px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  box-shadow:var(--shadow-soft);
}
.gwhy li{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.gwhy li:last-child{border-bottom:0}
.gwhy li > div{min-width:0}
.gwhy b{display:block;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.gwhy p{margin-top:6px;font-size:12.5px;line-height:1.45;color:#8b98a4}

/* нижнюю полосу связи держим вне секции с фото: иначе она растягивает её
   и кадр приходится тянуть следом */
.gfinal-band{background:#fff;padding:0 0 46px}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width:1400px){
  .ghero__cta .btn--primary{min-width:0}
  .gwork__in{grid-template-columns:minmax(0,1fr) minmax(0,540px)}
  .gwork__right{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
  .gfit__in{grid-template-columns:minmax(0,1fr) minmax(0,430px)}
  .gcalc--formleft .gcalc__in{grid-template-columns:minmax(0,560px) minmax(0,270px) minmax(0,1fr)}
}

@media (max-width:1200px){
  .ghero{min-height:0}
  .ghero__copy{max-width:none}
  .ghero__feats{max-width:none}

  .gwork,.gfit{min-height:0;background-position:center}
  .gwork__in,.gfit__in{grid-template-columns:minmax(0,1fr);gap:22px}
  .gwork__copy,.gfit__copy{max-width:none}
  .gwork__left .gsteps{padding-top:0}
  .gwork__right{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .gpanel{margin-top:0}
  .gcards{max-width:none}

  .gcalc{min-height:0}
  .gcalc__in,
  .gcalc--formleft .gcalc__in{grid-template-columns:minmax(0,1fr);gap:22px}
  .gcalc--formleft .gcalc__left{grid-column:auto;max-width:none}
  .gcalc__left{max-width:none}
}

@media (max-width:860px){
  .ghero__in{padding-bottom:10px}
  .ghero__feats{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:22px}
  .ghero__cta .btn{width:100%}
  .gpromises-band{padding-top:14px}

  .gwork,.gfit{padding:38px 0 42px}
  .gwork__right{grid-template-columns:minmax(0,1fr)}
  .gsteps--row{grid-template-columns:minmax(0,1fr)}
  .gstep img{width:34%}
  .gpanel,.guses--card{padding:20px 18px 18px}
  .gcards{grid-template-columns:minmax(0,1fr)}
  .gcalc{padding:36px 0 42px}
}

@media (max-width:520px){
  .gstep{flex-direction:column;gap:12px}
  .gstep img{width:100%;height:170px;align-self:auto}
  .gstep__body{padding:0 4px 4px}
  .gstep--plain{padding:16px}
}

/* убираем жёсткие переносы там, где строка и так не помещается */
@media (max-width:1000px){
  .ghero .lead br,.gwork__copy .lead br,.gfit__copy .lead br,
  .gcalc .lead br,.gstep__body b br,.ctabar__txt b br{display:none}
}