ul, ol, li {
	list-style: none;
}


.product {
  margin: 2% 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;         /* слева: галерея (визуально "четверть" ширины экрана), справа: инфо */
  gap: 28px;
  align-items: start;
}

/* Медиа-блок: «обозначаем» галерею — аккуратная область с фиксированной пропорцией */
.product__media {
  position: relative;
  background: #f7f7f8;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 14px;
  min-height: 260px;                       /* «четверть» визуально; можно поднять/опустить */
  aspect-ratio: 4 / 3;                     /* держим форму; если не нравится — удали */
  overflow: hidden;
}
.product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
/* заглушка под будущую сетку превью */
.gallery-thumbs { display:none; }

/* Правая часть (заголовок + цена + техописание) */
.product__right .product__title {
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 10px;
}
.product__meta { color:#5b6876; margin-bottom: 14px; display:flex; flex-wrap:wrap; gap:8px; }
.badge { display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; background:#F3F4F6; color:#111827; }

.product__stack {
  display: grid;
  grid-template-rows: auto auto;
  gap: 16px;
}
.price-card,
.tech-card {
  background:#fff;
  border:1px solid #eee;
  border-radius: 14px;
  padding: 16px 16px 18px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.price-main { font-size: 24px; font-weight: 800; color:#D00016; }
.price-sub { margin-top:6px; color:#0F2166; }
.btns { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }

/* ====== НИЖЕ ФОТО: описание + FAQ (по 50% контейнера) ====== */
.desc-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 24px;
 }
.section1 { max-width: 80%; margin: 2% 0 2% 10%;}
.section1 h2 { font-size: 22px; margin:0 0 12px; }
.prose { color:#111; line-height:1.65; }
.prose p { margin: 0 0 10px;  list-style: circle!important;}

.faq details { border:1px solid #eee; border-radius:10px; padding:12px 14px; background:#fff; }
.faq details + details { margin-top:10px; }
.faq summary { cursor:pointer; font-weight:600; }

/* ====== Полная ширина: детальное текстовое описание ====== */
.details-text {
  margin-top: 24px;
  background:#fff;
  border:1px solid #eee;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}

/* ====== Нижняя зона: слева видео, справа контакты/рутуб/КП (правая колонка = 50%) ====== */
.media-contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;          /* 50 / 50 с учётом контейнера */
  gap: 28px;
  margin-top: 24px;

}

/* Левая колонка: видео */
.video-card {
	height: 500px;
  background:#fff; border:1px solid #eee; border-radius:14px; padding: 12px; 
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.video-card iframe, 
.video-card video { width:100%; height:420px; border:0; border-radius:10px; display:block; }

/* Правая колонка: три карточки вертикально */
.right-stack {
  display:flex; flex-direction:column; gap:16px;
}

/* Контакты */
.contacts-card {
  background:#fff; border:1px solid #eee; border-radius:14px; padding: 14px; 
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.contact-buttons { display:grid; grid-template-columns: repeat(2, minmax(140px,1fr)); gap:10px; }
.cta {
  display:flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff;
  font-weight:600; text-decoration:none; color:#111827;
  transition: transform .12s ease, box-shadow .12s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow:0 6px 12px rgba(0,0,0,.08); }

/* Брендовые оттенки (лёгкие) */
.cta--wa   { border-color:#25D36633; }
.cta--tg   { border-color:#229ED933; }
.cta--mail { border-color:#2563eb33; }
.cta--wechat { border-color:#09b83e33; }

/* RuTube narrow 150px */
.rutube-card {
  height:10px; 
  background: linear-gradient(135deg,#111827 0%, #1f2937 100%);
  color:#fff; border-radius:14px; display:flex; align-items:center; justify-content:space-between;
  padding: 16px 18px; border:1px solid #111827;
}
.rutube-card__title { font-weight:700; font-size:18px; }
.rutube-card a.btn { background:#fff; color:#111827; border:0; }

/* RFQ на правой половине (под RuTube) */
.rfq-card {
  background:#fff; border:1px solid #eee; border-radius:14px; padding: 14px; 
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.rfq-card form .row { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rfq-card label { display:block; font-size:14px; color:#374151; margin-bottom:8px; }
.rfq-card input, .rfq-card textarea, .rfq-card select {
  width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; font:inherit;
}
.rfq-card button { margin-top: 10px; }

/* Рекомендации (как были) */
.recommend-grid { display:grid; grid-template-columns: repeat(3, minmax(220px,1fr)); gap: 16px; margin-top:24px; }
.rec-card { border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.06); display:block; }
.rec-card img { width:100%; height:auto; display:block; }
.rec-card__body { padding:12px; }
.rec-card__title { font-weight:700; margin-bottom:6px; }

/* Mobile / Tablet */
@media (max-width: 1100px) {
  .product { grid-template-columns: 1fr; }
  .desc-faq, .media-contacts { grid-template-columns: 1fr; }
  .video-card iframe, .video-card video { height: 320px; }
}
@media (max-width: 640px) {
  .contact-buttons { grid-template-columns: 1fr; }
  .recommend-grid { grid-template-columns: 1fr; }
}




.hero-mini { position: relative; overflow: hidden; margin: 10px 0 20px; border-radius: 10px;}
.hero-mini--narrow { min-height: 200px; }

/* вариант с изображением */
.hero-mini.hero-mini--image .hero-bg img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
  filter: saturate(.96) contrast(1.02);
}

/* вариант с градиентом (если баннера нет) */
.hero-mini.hero-mini--gradient {
  background:
     radial-gradient(80% 80% at 60% 40%, rgba(0,140,255,.25) 0%, rgba(0,70,150,.15) 40%, rgba(6,20,40,.8) 100%),
    linear-gradient(180deg, rgba(6,20,40,.6) 0%, rgba(6,20,40,.9) 100%);
	mix-blend-mode:multiply;
  /* на случай старых браузеров — сплошной цвет */
  background-color: #EEF2F7;
  min-height: 170px; /* чтобы точно было видно фон */
}
.hero-mini.hero-mini--gradient::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.03) 60%, rgba(0,0,0,.06) 100%);
  pointer-events: none;
}

/* контент внутри */
.hero-mini__content {
  position: relative;
  padding: 16px 0 18px 50px;
  max-width: 980px;
}
.hero-mini__title {
  margin: 10px 0 6px;
  font-size: 26px;
  line-height: 1.2;
  color: #fff!important;
}
.hero-mini__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #fff!important;
  max-width: 72ch;
}

/* Повышаем специфичность для страниц карточек, если есть общий .page-* класс */
.page-grader .hero-mini__title,
.page-grader .hero-mini__lead { color: inherit; }
.page-grader .hero-mini.hero-mini--image .hero-bg img { height: 220px; }

@media (max-width: 768px) {
  .hero-mini.hero-mini--image .hero-bg img { height: 180px; }
  .hero-mini__title { font-size: 22px; }
  .hero-mini__lead { font-size: 15px; }
}






body.page-card .container .section{
  max-width: 1440px;   /* целевая ширина */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;  /* базовые поля, можно 20–24px по вкусу */
  padding-right: 16px;
}

/* Если где-то контейнер переопределён — повышаем специфичность */
body.page-card main .container {
  max-width: 1440px;
}

/* Узкий hero на карточках: растянуть по новому контейнеру */
body.page-card .hero-mini.hero-mini--image .hero-bg img {
  width: 100%;
  max-width: 100%;
}

/* Не даём сайдбару «прилипнуть» к самому краю на очень широких */
@media (min-width: 1440px) {
  body.page-card .product,
  body.page-card .product-sections,
  body.page-card .recommend-grid {
    /* оставляем как есть — сетки уже внутри .container,
       тут правило лишь на случай локальных переопределений */
  }
}

/* На мобильных поведение прежнее */
@media (max-width: 1100px) {
  body.page-card .container {
    padding-left: 14px;
    padding-right: 14px;
  }
}





body.page-card .container .section{
  box-sizing: border-box;
}
@media (max-width: 380px){
  body.page-card .container .section{
    padding-left:12px;
    padding-right:12px;
  }
}








/* Контейнер медиа в карточке */
.product__media { display: block; }

/* Галерея */
.product-gallery { display: grid; grid-template-rows: auto auto; gap: 10px; }
.product-main-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

/* Превью */
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
 }
.gallery-thumbs .thumb-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
  border:1px solid #B5B5B5;
  padding: 5px;
  border-radius: 8px;
  opacity: .9;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.gallery-thumbs .thumb-img:hover {
  transform: translateY(-2px);
  opacity: 1;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.gallery-thumbs .thumb-img.is-active {
  outline: 2px solid #0F2166;
  outline-offset: 2px;
  opacity: 1;
}

@media (max-width: 900px) {
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 540px) {
  .gallery-thumbs { grid-template-columns: repeat(3, 1fr); }
  .gallery-thumbs .thumb-img { height: 56px; }
}







.capbar { margin-top: 12px; margin-bottom: 8px; }
.capbar .capbar__inner {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
  padding: 10px; border:1px solid #eee; border-radius: 12px;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.capbar__label {
  font-size: 14px; color:#4b5563; margin-right: 4px; white-space: nowrap;
}
.capbtn {
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 12px; border-radius: 999px;
  background:#fff; border:1px solid #e5e7eb; color:#111827;
  font-size: 14px; line-height: 1; text-decoration:none; transition: .15s;
}
.capbtn:hover { border-color:#cbd5e1; background:#f9fafb; }
.capbtn.is-active { background:#0F2166; color:#fff; border-color:#0F2166; }
.capbtn__unit { opacity:.65; font-size:12px; }





/* --- Фикс ширины и переполнения --- */
.media-contacts{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow-x:hidden;     /* страховка от горизонтального скролла */
}
.media-contacts *{
  min-width:0;           /* не позволяем флекс/грид-детям раздвигать родителя */
}

/* Видео всегда вписывается */
.video-card,
.right-stack,
.rutube-inline{ max-width:100%; }
.video-card iframe,
.video-card video{
  display:block;
  width:100%;
  max-width:100%;
}

/* У RuTube не фиксируем высоту */
.rutube-inline{ height:auto !important; }
.rutube-inline a{ width:100%; }

/* Сетка: на планшет/мобилу в 1 колонку */
@media (max-width: 1100px){
  .media-contacts{ grid-template-columns:1fr; }
}

/* Мобильная уплотнёнка и отсутствие выходов за край */
@media (max-width: 768px){
  .media-contacts{ gap:16px; margin-top:18px; }

  .video-card{ height:auto; padding:12px; }
  .video-card iframe,
  .video-card video{ height:220px; } /* было 420 — слишком высоко для мобилы */

  /* RuTube: компактная раскладка, перенос подзаголовка */
  .rutube-inline a{
    gap:12px;
    padding:12px 14px;
    align-items:stretch;
  }
  .rutube-inline .btn{ width:100%; text-align:center; }
  .rutube-inline [style*="white-space:nowrap"]{ white-space:normal !important; }
}

/* Совсем узкие экраны */
@media (max-width: 480px){
  .video-card iframe,
  .video-card video{ height:200px; }

  .contact-buttons{ grid-template-columns:1fr; }
}

/* На случай длинных ссылок/слов внутри правой колонки */
.right-stack{
  overflow-x:hidden;
}







/* Главное фото чуть выделяем глубиной и тонкой внутренней рамкой */
.product-gallery .gallery-main { position: relative; border-radius:12px; }
.product-gallery .gallery-main img {
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  border-radius:12px;
}
.product-gallery .gallery-main::after{
  content:"";
  position:absolute; inset:0; border-radius:12px;
  box-shadow: inset 0 0 0 1px rgba(15,33,102,.10); /* hairline в фирменном тоне */
  pointer-events:none;
}
/* Намёк на «увеличение» без иконки: курсор + лёгкий затемняющий слой по ховеру */
.product-gallery .gallery-main { cursor: zoom-in; }
.product-gallery .gallery-main:hover::before{
  content:"";
  position:absolute; inset:0; border-radius:12px;
  background: radial-gradient(transparent 60%, rgba(0,0,0,.06));
}

/* Активный превью заметнее, но деликатно */
.gallery-thumbs .thumb-img.is-active{
  outline:2px solid #0F2166; outline-offset:2px;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}

/* Небольшая прибавка контраста для всех превью по ховеру */
.gallery-thumbs .thumb-img:hover{
  opacity:1; transform: translateY(-2px);
}

/* Мобилки: без теней «попроще», чтобы не утяжелять */
@media (max-width: 640px){
  .product-gallery .gallery-main img{ box-shadow: 0 6px 16px rgba(0,0,0,.06); }
  .gallery-thumbs .thumb-img.is-active{ transform:none; box-shadow:0 4px 10px rgba(0,0,0,.08); }
}





/* ——— fix mobile overflow ≤380px ——— */
@media (max-width: 380px) {
  /* не даём странице уходить вправо, но правим именно первопричины ниже */
  html, body { overflow-x: hidden; }

  /* галерея: картинки строго по контейнеру */
  .product-gallery .gallery-main img,
  .product-gallery .thumb-img {
    max-width: 100%;
    height: auto;
  }

  /* миниатюры сеткой, чтобы не вылезали по ширине */
  .gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .gallery-thumbs .thumb-link { display: block; }

  /* длинные кнопки под галереей складываем в столбик и разрешаем перенос строк */
  .gallery-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .gallery-cta .btn {
    width: 100%;
    white-space: normal;      /* ключевая строка: ломаем nowrap у .btn */
    line-height: 1.2;
    text-align: center;
  }

  /* чипы производительности: аккуратно в две колонки и без переразмеривания */
  .capbar__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .capbtn {
    min-width: 0;             /* чтобы текст не раздувал кнопку */
    text-align: center;
  }

  /* правый столбец и общий блок товара — без боковых «сюрпризов» */
  .product { display: block; }
  .product__right,
  .product-gallery { margin: 0; }
}




/* ==== Tech specs – деловой стиль ==== */
.tech-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:16px 20px;
}
.tech-card h2{ margin:0 0 12px; font-weight:800; color:#0f172a; }

/* список характеристик */
.tech-card .prose .specs{ list-style:none; margin:0; padding:0; }
.tech-card .prose .spec{
  display:grid;
  grid-template-columns: 1fr auto;  /* название слева, значение справа */
  gap:12px;
  align-items:baseline;
  padding:8px 0;
  border-top:1px solid #eef2f7;
}
.tech-card .prose .spec:first-child{ border-top:0; }

.tech-card .prose .spec__name{
  color:#475569;
   overflow:hidden; text-overflow:ellipsis;
}
.tech-card .prose .spec__value{
  color:#0f172a; font-weight:600; text-align:right;
  white-space:nowrap; font-variant-numeric: tabular-nums;
}

/* мобильная колонка */
@media (max-width:520px){
  .tech-card .prose .spec{ grid-template-columns:1fr; }
  .tech-card .prose .spec__value{ text-align:left; margin-top:2px; }
}

/* печать */
@media print{
  .tech-card{ border-color:#ddd; }
  .tech-card .prose .spec{ border-color:#ddd; }
}





/* ==== Ещё из этой категории (деликатное выделение) ==== */
.section1{
  max-width: 100%;	
  margin: 32px 0 24px;
  padding: 20px 20px 10px;
  background: linear-gradient(180deg,#f8fafc 0%, #ffffff 100%);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
}

.section1 > h2{
  margin: 0 0 16px;
  font-weight: 800;
  color:#0f172a;
  display:flex;
  align-items:center;
  gap:12px;
}

/* тонкая «линия-продолжение» справа от заголовка */
.section1 > h2::after{
  content:"";
  height:1px;
  flex:1 1 auto;
  background: linear-gradient(90deg,#e5e7eb, rgba(229,231,235,0));
  border-radius:1px;
}

/* сетка карточек */
.recommend-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap:16px;
}

/* карточка рекомендации */
.rec-card{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:12px;
  overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
}
.rec-card:hover{ box-shadow:0 8px 16px rgba(15,23,42,.06); transform:translateY(-2px); }

.rec-card img{ display:block; width:100%; height:auto; padding:12px 12px 0; object-fit:contain; }
.rec-card__body{ padding:12px 14px 14px; }

/* мобильная аккуратность */
@media (max-width:480px){
  .section1{ padding:16px 14px 6px; border-radius:12px; }
  .recommend-grid{ grid-template-columns: 1fr; gap:12px; }
}






/* --- FIX: правая колонка не должна раздвигать сетку --- */
.product > * { min-width: 0; }                 /* ключевая строка для grid */
.product__right,
.product__stack,
.price-card,
.tech-card { min-width: 0; }

/* длинные заголовки/значения не дают горизонтальный скролл */
.product__title,
.price-card,
.tech-card,
.price-card .price-main,
.tech-card .prose,
.tech-card .prose .spec__name,
.tech-card .prose .spec__value {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* кнопки в блоке цены могут быть шире вьюпорта — разрешаем перенос */
.price-card .btns .btn { white-space: normal; line-height: 1.2; }

/* бейджи/мета тоже не должны раздувать строку */
.product__meta .badge { white-space: normal; }

/* на совсем узких — убираем лишние «жёсткости» внутри правой колонки */
@media (max-width: 420px){
  .product__title{ font-size: 22px; }
  .price-card, .tech-card{ padding-left:14px; padding-right:14px; }
  .price-card .btns{ gap:8px; }
}




















.features-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(240px,1fr))}
@media (max-width:900px){.features-grid{grid-template-columns:1fr}}
.feat{display:flex;gap:12px;align-items:flex-start}
.feat svg{flex:0 0 24px;opacity:.9;color:#0F2166}
.feat__title{font-weight:600;margin-bottom:2px}
.feat__text{font-size:14px;color:#6b7280}