/* Джистор: исправления раскладки на планшете и в узком окне браузера (768–1169px).
   Подключается на всех страницах последним, после style.css, adaptive.css и стилей страниц. Телефон (до 767px) и ПК не меняются.
   Размеры блоков, которые масштабируются (плитки, рейтинги, видео), задаёт js/adaptive-fixes.js. */
@media (min-width: 768px) and (max-width: 1169px) {
  /* ленты, которые листаются пальцем: первая карточка: с тем же полем слева, что у заголовка, а не вплотную к краю экрана */
  .reviews__videos, .prods { scroll-padding-inline: var(--gut); }

  /* каталог на главной: iPhone: широкой плиткой на весь ряд, остальные шесть: два ровных ряда по три */
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .tiles .tile--big { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; width: 100% !important; height: 440px !important; zoom: 1 !important; }
  .tiles .tile--big > img { left: 50% !important; top: 120px !important; width: auto !important; height: 340px !important; transform: translateX(-50%); }
  .tiles .tile--s, .tiles .tile--m { width: 300px !important; height: 333px !important; justify-self: start; }

  /* рейтинги 2ГИС / Яндекс / Авито на главной: три в ряд, без одиночной карточки во втором ряду */
  .reviews:not(.reviews--wide) .ratings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reviews:not(.reviews--wide) .ratings > .rating { justify-self: start; }

  /* видео на главной: два в ряд на всю ширину блока */
  .blog__videos .blog__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .blog__videos .blog__list > .video { justify-self: start; }

  /* рейтинги в ряд на «О компании» и «Отзывах»: блок растёт по высоте и не наезжает на видео ниже;
     уже 1000px: лента, которая листается пальцем (видно две с половиной карточки), шире: три в ряд (js) */
  .ratings--row { height: auto; margin-bottom: 0; }
  .ratings--row[data-fit-grid].is-strip { display: flex !important; justify-content: flex-start; width: auto !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut); margin-inline: calc(-1 * var(--gut)); padding: 4px var(--gut) 12px; scrollbar-width: none; }
  .ratings--row.is-strip::-webkit-scrollbar { display: none; }
  .ratings--row.is-strip > .rating { flex: none; scroll-snap-align: start; }

  /* «Гарантия»: три шага «Как воспользоваться гарантией»: в один ряд, а не 2 + 1 */
  .war-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* магазины на «Контактах»: по два в ряд */
  .shop-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The bonus illustration was pinned far below the CTA, leaving a blank
     orange field on tablet layouts. Pull it into the same visual group. */
  .bonus__box > img.abs { bottom: -75px !important; }
}

/* At tablet widths the category row must remain a real navigation list,
   not a clipped strip that hides the last links. This stays separate from
   the 768–1169 tablet group for browsers that do not apply nested media. */
@media (min-width: 768px) and (max-width: 1169px) {
  .cats {
    flex-wrap: wrap;
    row-gap: 10px;
    overflow: visible;
    padding-bottom: 2px;
  }
}

/* 700–767px is the transition just before the tablet grid. The compact phone
   hero used fixed handset coordinates intended for 390px-wide screens, which
   left a large empty orange area here. Keep the mobile header, but scale the
   hero composition to the available card width. */
@media (min-width: 640px) and (max-width: 767px) {
  .promo-main { height: 400px; }
  .promo-main > .rot { display: none; }
  .promo-main > img.abs {
    left: 31.5% !important;
    right: auto !important;
    top: -2.5% !important;
    bottom: auto !important;
    width: 104% !important;
    height: auto !important;
  }
  .promo-main__content {
    left: 5.5%;
    top: 11%;
    width: 467px;
    zoom: .8;
  }
  .promo-main__head { zoom: 1; }
  .promo-main__sub { width: 431px; font-size: 19px; }
}

/* The phone hero used an absolute CTA at a fixed y-coordinate. It created a
   blank orange gap whenever title copy wrapped differently. Keep text and CTA
   in the same document flow on every phone width. */
@media (max-width: 767px) {
  .promo-main__text { gap: 20px; }
  .promo-main .btn-white {
    position: static;
    flex: none;
    margin-top: 0;
  }
}

/* форма заявки внизу страниц: от 1000px: текст слева, форма справа, как на ПК, а не форма у левого края с пустотой справа */
@media (min-width: 1000px) and (max-width: 1169px) {
  .cta { display: grid; grid-template-columns: minmax(0, 1fr) 460px; column-gap: 48px; align-items: center; }
  .cta > .cta__head { grid-column: 1; grid-row: 1; }
  .cta > .cta__form { grid-column: 2; grid-row: 1; margin-top: 0; }
}

/* The desktop composition may overlap CTA and footer. On tablet/phone the
   taller form must stay above the footer instead of covering its content. */
@media (max-width: 1169px) {
  .woocommerce > .cart-empty.container { box-sizing: border-box; width: auto; max-width: none; margin-inline: 0; padding-inline: var(--gut); }
  main:has(section.cta) ~ footer.footer, main + footer.footer, .cta + footer.footer { margin-top: 70px; }
}
@media (max-width: 767px) {
  main:has(section.cta) ~ footer.footer, main + footer.footer, .cta + footer.footer { margin-top: 56px; }
}

/* Desktop is rendered on a scaled design canvas. Decorative source layers
   may extend beyond that canvas; they must never create a second horizontal
   document area. Keep real content inside its own containers instead of
   masking a component-level overflow. */
@media (min-width: 768px) {
  html, body { overflow-x: clip; }
}

/* The shared footer source is 1504px wide. The earlier 1512px override plus
   a widened contact column put the final contact block outside the desktop
   grid at 1170px and on ultrawide screens. */
@media (min-width: 1170px) {
  .footer__top { width: 1504px; }
  .footer .fcontacts { width: 299px; }
}

/* Новости и видео: реальные заголовки длиннее экспортного макета.
   Карточка всегда сохраняет место под дату и рубрику, а текст видео не
   пересекается с кнопкой «Подробнее». */
.news { height: auto; }
.pill:not([style*="width"]) { padding-inline: 20px; }
.news__title {
  height: auto;
  min-height: 2.62em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (min-width: 768px) {
  .blog-grid > .video--blog .video__text {
    top: auto;
    bottom: 30px;
    width: min(480px, calc(100% - 150px));
  }
  .blog-grid > .video--blog .video__title {
    height: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

/* iOS keeps :hover after a tap. A removed favourite/compare item then looked
   active in catalogue cards even though local storage and the header counter
   were already correct. On touch screens only .is-on may be orange. */
@media (hover: none), (pointer: coarse) {
  .prod__act:hover:not(.is-on) { background: #fff; }
  .prod__act:hover:not(.is-on) img { filter: none; }
}