/* ---- HERO: photo background with two cans (right) ---- */
.hero--exp .hero__picture{display:contents;}
.hero--exp .hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:right center;z-index:0;}
/* нижняя кромка фото растворяется в общий фон страницы: прямая линия обрыва читалась
   как вставленный баннер, а весь сайт ниже идёт по бесшовному .page-bg.
   Растворение начинается с 84% — донышки банок остаются целыми. */
.hero--exp .hero__photo--desk{
  -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 84%,transparent 100%);}
.hero--exp .hero__glow{opacity:.38;left:66%;}
/* слой компонентов — ПОВЕРХ осветляющего scrim, текст остаётся выше всех */
.hero--exp .hero__scene{z-index:5;}
.hero--exp .hero__scrim{z-index:3;background:linear-gradient(90deg,
  var(--bg) 6%,
  color-mix(in srgb,var(--bg) 88%,transparent) 32%,
  color-mix(in srgb,var(--bg) 40%,transparent) 50%,
  transparent 66%);}
.hero--exp .hero__copy{z-index:6;}
/* заголовок держим в левой трети — иначе вторая строка ложится на банки фотофона */
.hero--exp .hero__title{max-width:min(100%,620px);}
/* 761–1100px. Прежний вариант тянул светлый scrim до 88% ширины и «съедал» обе банки:
   на планшете первый экран переставал быть продуктовым — оставались брызги и ягоды.
   Теперь: кадр сдвинут так, чтобы банки попали в правую половину, scrim гаснет к 58%
   (текст читается, продукт остаётся плотным), а слой летящих вырезов приглушён,
   чтобы он не спорил с банками на узком кадре. */
@media (min-width:761px) and (max-width:1100px){
  .hero--exp .hero__photo--desk{object-position:72% center;}
  .hero--exp .hero__scrim{background:linear-gradient(90deg,
    var(--bg) 12%,
    color-mix(in srgb,var(--bg) 90%,transparent) 34%,
    color-mix(in srgb,var(--bg) 45%,transparent) 48%,
    transparent 58%);}
  .hero--exp .hero__scene{opacity:.5;}
  .hero--exp .hero__glow{opacity:.22;left:74%;}
  .hero--exp .hero__title{max-width:min(100%,430px);font-size:clamp(2.3rem,5.4vw,3.4rem);}
  .hero--exp .hero__sub{max-width:360px;}
}
/* 761–900px — кадр ещё уже: банки уводим дальше вправо, а текстовый блок сужаем,
   иначе кнопки и бейджи ложатся прямо на левую банку */
@media (min-width:761px) and (max-width:900px){
  .hero--exp .hero__photo--desk{object-position:84% center;}
  .hero--exp .hero__scrim{background:linear-gradient(90deg,
    var(--bg) 14%,
    color-mix(in srgb,var(--bg) 92%,transparent) 38%,
    color-mix(in srgb,var(--bg) 48%,transparent) 54%,
    transparent 66%);}
  .hero--exp .hero__title{max-width:min(100%,360px);}
  .hero--exp .hero__sub{max-width:330px;}
  .hero--exp .hero__badges{max-width:340px;}
  .hero--exp .hero__cta{max-width:360px;}
}
/* усиленная тень + глубина резкости (DOF): дальние элементы мягче и прозрачнее */
.hero--exp .float{opacity:var(--op,1);}
.hero--exp .float img{filter:drop-shadow(0 9px 17px rgba(45,55,35,.42)) blur(var(--blur,0px));}
@media (max-width:760px){
  .hero--exp{padding-top:0;} /* убрать зазор между липкой шапкой и фото */
  /* <picture> выбирает мобильный файл до начала загрузки; второй hero-файл не скачивается. */
  .hero--exp .hero__photo--desk{display:block;position:relative;inset:auto;width:100%;height:50vh;max-width:540px;margin-inline:auto;border-radius:20px;object-fit:cover;object-position:center;order:1;-webkit-mask-image:none;mask-image:none;}
  .hero--exp .hero__scene{display:none;}
  .hero--exp .hero__scrim{display:block;background:linear-gradient(0deg,var(--bg) 15%,transparent 60%);}
  .hero--exp .hero__copy{order:2;}
}