/* Start:/bitrix/templates/aspro_max/components/bitrix/news.detail/collection/style.css?179066615312069*/
/* ===== Шапка бренда ===== */
.collection-detail__brand-heading {text-align: center;margin-bottom:20px}
.detail .collection-detail__brand-logo{max-height:174px;width: auto}
.collection-detail__brand-name{font-weight: 800;text-transform: uppercase;letter-spacing: 0.12em;font-size: 34px;margin: 0}

/* ===== Сетка рядов =====
   Каждый ряд — CSS Grid шириной в контейнер, всё в потоке, без position:absolute и
   фиксированных высот. Поэтому высоту ряда задаёт текст, а картинка/видео/серый фон
   соседней половины растягиваются следом (grid stretch).

   До края окна фон и медиа выводятся отрицательным margin со своей внешней стороны.
   padding текста на ту же величину возвращает текст к краю контейнера.
   --gut-* — расстояние от края контейнера до края окна. Проценты внутри переменной
   считаются там, где она используется, то есть от ширины ячейки grid:
   для половины ряда 100% = (W - gap) / 2, для ряда целиком 50% = W / 2. */
.collection-detail{
	--coll-gap: 20px;
	--gut-half: max(0px, calc(50vw - 100% - var(--coll-gap) / 2));
	--gut-full: max(0px, calc(50vw - 50%));
}

/* 100vw включает полосу прокрутки (Windows), поэтому фон заезжает под неё на ~8px.
   Обрезаем горизонтальное переполнение, чтобы не появлялся горизонтальный скролл.
   clip, а не hidden: clip не создаёт контейнер прокрутки и не ломает sticky-шапку темы */
body{overflow-x: clip}

.collection-detail__row{display: grid;grid-template-columns: minmax(0, 1fr);row-gap: var(--coll-gap);margin-bottom: var(--coll-gap)}
.collection-detail__row > *{min-width: 0;justify-self: stretch;align-self: stretch;box-sizing: border-box}

/* ===== Текстовые половины ("Имидж" / "Особенности") ===== */
.collection-detail__intro,
.collection-detail__features{background: #eee;display: flex;flex-direction: column;justify-content: center}

.collection-detail__description{color: #000;font-size: 16px;line-height: 1.5}
.collection-detail__description h2,
.collection-detail__features-title{margin: 0 0 20px;font-size: 28px;font-weight: 500}
.collection-detail__features-text{color: #000;font-size: 16px;line-height: 1.5}
.collection-detail__features-text p:first-child{font-weight: 700;color: #000;margin-bottom: 4px}

/* ===== Картинка "Имиджа" ===== */
.collection-detail__hero{position: relative;overflow: hidden}
.collection-detail .collection-detail__hero img{display: block;width: 100%;max-width: none;height: auto}

/* ===== Видео "Особенностей" ===== */
.collection-detail__video{position: relative;overflow: hidden;cursor: pointer;background: #333}
/* обложка всегда заполняет весь блок, какой бы высоты он ни стал */
.collection-detail .collection-detail__video-poster{position: absolute;top: 0;left: 0;width: 100%;height: 100%;max-width: none;object-fit: cover;display: block;z-index: 0}
/* z-index нужен явно: обложка теперь тоже positioned и иначе перекрыла бы затемнение */
.collection-detail__video:before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.64);z-index: 1}
.collection-detail__video-play{position: absolute;top: 50%;left: 50%;width: 128px;height: 128px;margin: -64px 0 0 -64px;z-index: 2}
.collection-detail__video-play::before{content: '';position: absolute;top: 50%;left: 54%;transform: translate(-50%, -50%);border-style: solid;border-width: 48px 0 48px 80px;border-color: transparent transparent transparent #D9D9D9}

/* ===== "Ссылки": кнопки в каталог + CTA ===== */
/* по 2 кнопки в ряд: лишние переносятся на новую строку, блок и CTA рядом растут по высоте */
.collection-detail__catalog-buttons-list{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 20px}
.collection-detail__catalog-item{text-align: center}
.detail .collection-detail__catalog-image{margin-bottom: 20px;display: flex;align-items: center;min-height: 180px}
.detail .collection-detail__catalog-image img{width: auto;height: auto;max-width: 100%;max-height: 125px;margin: 0 auto}
.collection-detail__catalog-btn{display: block;width: 100%;padding: 14px 20px;background: #b92732;color: #fff;text-align: center;text-transform: none;border-radius: 2px;font-size: 14px;transition: background 0.2s ease}
.collection-detail__catalog-btn:hover{background: #c01818;color: #fff;text-decoration: none}
.collection-detail__cta{background: #eee;display: flex;align-items: center;justify-content: center;text-align: center;font-size: 36px;line-height: 1.2;color: #000;min-height: 240px}

/* ===== Десктоп: две половины ===== */
@media (min-width: 992px){
	.collection-detail__row{grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);column-gap: var(--coll-gap)}
	.collection-detail__row > *{grid-row: 1}
	/* минимум 600px, выше — по количеству текста */
	.collection-detail__row--imige,
	.collection-detail__row--osob{grid-template-rows: minmax(600px, auto)}

	/* левая половина — до левого края окна.
	   margin задан шорткатом, чтобы в варианте --reverse гарантированно обнулялась противоположная сторона */
	.collection-detail__row--imige .collection-detail__hero,
	.collection-detail__row--imige.collection-detail__row--reverse .collection-detail__intro,
	.collection-detail__row--osob .collection-detail__features,
	.collection-detail__row--osob.collection-detail__row--reverse .collection-detail__video{grid-column: 1;margin: 0 0 0 calc(-1 * var(--gut-half))}

	/* правая половина — до правого края окна */
	.collection-detail__row--imige .collection-detail__intro,
	.collection-detail__row--imige.collection-detail__row--reverse .collection-detail__hero,
	.collection-detail__row--osob .collection-detail__video,
	.collection-detail__row--osob.collection-detail__row--reverse .collection-detail__features,
	.collection-detail__row--links .collection-detail__cta{grid-column: 2;margin: 0 calc(-1 * var(--gut-half)) 0 0}

	/* текст: с внешней стороны отступ = вылет фона, то есть текст стоит ровно по краю контейнера */
	.collection-detail__row--imige.collection-detail__row--reverse .collection-detail__intro,
	.collection-detail__row--osob .collection-detail__features{padding: 60px 60px 60px max(20px, var(--gut-half))}
	.collection-detail__row--imige .collection-detail__intro,
	.collection-detail__row--osob.collection-detail__row--reverse .collection-detail__features{padding: 60px max(20px, var(--gut-half)) 60px 60px}

	/* картинка заполняет всю высоту ряда и обрезается по нему, не выходя за пределы */
	.collection-detail .collection-detail__hero img{position: absolute;top: 0;left: 0;height: 100%;object-fit: cover}

	/* одна из половин пустая — оставшаяся занимает весь ряд от края до края окна */
	.collection-detail__row--solo{grid-template-columns: minmax(0, 1fr)}
	.collection-detail__row.collection-detail__row--solo > .collection-detail__intro,
	.collection-detail__row.collection-detail__row--solo > .collection-detail__features,
	.collection-detail__row.collection-detail__row--solo > .collection-detail__hero,
	.collection-detail__row.collection-detail__row--solo > .collection-detail__video{grid-column: 1;margin: 0 calc(-1 * var(--gut-full))}
	.collection-detail__row.collection-detail__row--solo > .collection-detail__intro,
	.collection-detail__row.collection-detail__row--solo > .collection-detail__features{padding: 60px max(20px, var(--gut-full))}

	/* ссылки: кнопки слева, CTA справа до края окна */
	.collection-detail__row--links .collection-detail__catalog-buttons{grid-column: 1}
	.collection-detail__row--links .collection-detail__catalog-buttons--full{grid-column: 1 / -1}
	.collection-detail__row--links .collection-detail__cta{padding: 40px max(20px, var(--gut-half)) 40px 40px}
	.collection-detail__catalog-buttons--full .collection-detail__catalog-buttons-list{grid-template-columns: repeat(4, minmax(0, 1fr))}
}

/* ===== Мобильная версия: одна колонка =====
   Порядок — как в разметке: у "Имиджа" описание всегда первым, картинка второй,
   вне зависимости от PLACE (--reverse влияет только на десктоп) */
@media (max-width: 991px){
	.middle > .container > .maxwidth-theme{padding: 0}

	.collection-detail__row > *{margin: 0 calc(-1 * var(--gut-full))}
	.collection-detail__intro,
	.collection-detail__features{padding: 24px calc(var(--gut-full) + 24px)}
	.links1 .collection-detail__catalog-buttons-list{display: grid;grid-template-columns: repeat(1, minmax(0, 1fr));gap: 20px}

	/* картинка в естественных пропорциях, без обрезки */
	.collection-detail .collection-detail__hero img{position: static}

	/* у видео нет своего контента — задаём высоту 16:9 от ширины экрана */
	.collection-detail__video{min-height: 56vw}
	.collection-detail__video-play{width: 72px;height: 72px;margin: -36px 0 0 -36px}
	.collection-detail__video-play::before{border-width: 28px 0 28px 46px}

	.collection-detail__catalog-buttons{padding: 0 calc(var(--gut-full) + 20px)}
	.detail .collection-detail__catalog-image{min-height: auto}
	.btn.collection-detail__catalog-btn{font-size: 0.7em;padding: 12px}
	.collection-detail__cta{font-size: 20px;min-height: 120px;padding: 24px calc(var(--gut-full) + 24px)}
}

/* ===== Блок "Медиа" ===== */
.collection-detail__media{margin-top: 56px;width: 100%}
.collection-detail__media-title{text-align: center;font-size: 24px;font-weight: 700;margin-bottom: 32px}
.media-group{border: 1px solid #e5e5e5;border-top: none;padding: 18px 24px}
.media-group:first-of-type{border-top: 1px solid #e5e5e5}
.media-group__summary{display: flex;align-items: center;cursor: pointer;list-style: none;font-size: 15px;font-weight: 700;text-transform: uppercase;letter-spacing: 0.02em}
.media-group__summary::-webkit-details-marker{display: none}
.media-group__marker{width: 0;height: 0;border-style: solid;border-width: 5px 0 5px 8px;border-color: transparent transparent transparent #e02020;margin-right: 12px;transition: transform 0.2s ease}
.media-group[open] .media-group__marker{transform: rotate(90deg)}
.media-group__list{margin-top: 16px}
/* сама карточка файла (.file_type / .icon / .description) стилизуется глобальными классами темы Аспро */

/* ===== Видео-оверлей ===== */
.collection-video-overlay{position: fixed;z-index: 9999;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.85);display: flex;align-items: center;justify-content: center}
.collection-video-overlay__inner{width: 90%;max-width: 900px}
.collection-video-overlay__inner video{width: 100%;display: block}
.collection-video-overlay__inner iframe{width: 100%;aspect-ratio: 16 / 9;display: block;border: 0}
/* End */


/* Start:/bitrix/templates/aspro_max/css/animation/animation_ext.css?17479508174934*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

.transition{
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.animated.duration03{

-webkit-animation-duration: 0.3s;
-moz-animation-duration: 0.3s;
-o-animation-duration: 0.3s;
animation-duration: 0.3s;
}
.animated.duration04{

-webkit-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
-o-animation-duration: 0.4s;
animation-duration: 0.4s;
}
.animated.duration05{

-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.animated.duration06{

-webkit-animation-duration: 0.6s;
-moz-animation-duration: 0.6s;
-o-animation-duration: 0.6s;
animation-duration: 0.6s;
}
.animated.duration07{

-webkit-animation-duration: 0.7s;
-moz-animation-duration: 0.7s;
-o-animation-duration: 0.7s;
animation-duration: 0.7s;
}
.animated.duration08{

-webkit-animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-o-animation-duration: 0.8s;
animation-duration: 0.8s;
}
.animated.duration09{

-webkit-animation-duration: 0.9s;
-moz-animation-duration: 0.9s;
-o-animation-duration: 0.9s;
animation-duration: 0.9s;
}
.animated.duration10{

-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}

.delay01{

-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
animation-delay: 0.1s;}

.delay03{

-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
animation-delay: 0.3s;}


.delay05{

-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
animation-delay: 0.5s;}

.delay055{

-webkit-animation-delay: 0.55s;
-moz-animation-delay: 0.55s;
-o-animation-delay: 0.55s;
animation-delay: 0.55s;}

.delay06{

-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
animation-delay: 0.6s;}
.delay065{

-webkit-animation-delay: 0.65s;
-moz-animation-delay: 0.65s;
-o-animation-delay: 0.65s;
animation-delay: 0.65s;}

.delay07{

-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
-o-animation-delay: 0.7s;
animation-delay: 0.7s;}

.delay08{

-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-o-animation-delay: 0.8s;
animation-delay: 0.8s;}

.delay09{

-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
-o-animation-delay: 0.9s;
animation-delay: 0.9s;}

.delay11,.delay011{

-webkit-animation-delay: 1.1s;
-moz-animation-delay: 1.1s;
-o-animation-delay: 1.1s;
animation-delay: 1.1s;}

.delay12, .delay012{

-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-o-animation-delay: 1.2s;
animation-delay: 1.2s;}

.delay13,.delay013{

-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
-o-animation-delay: 1.3s;
animation-delay: 1.3s;}

.delay15, .delay015{

-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;}

.delay17, .delay017{

-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;}

.delay19, .delay019{

-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;}

.delay21, .delay021{

-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;}

@-webkit-keyframes toggle_opacity{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes toggle_opacity{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}

@-webkit-keyframes flash {
  0% {
    opacity: .55;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: .55;
  }
  100% {
    opacity: 1;
  }
}

/* WebKit � Opera */
@-webkit-keyframes spinner{
  from{
    -webkit-transform:rotate(0deg);
  }
  to{
    -webkit-transform:rotate(360deg);
  }
}
/* Other */
@keyframes spinner{
  from{
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  to{
    -moz-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}
/* End */
/* /bitrix/templates/aspro_max/components/bitrix/news.detail/collection/style.css?179066615312069 */
/* /bitrix/templates/aspro_max/css/animation/animation_ext.css?17479508174934 */