/* ==========================================================
   Джистор — адаптив: планшеты и телефоны (уже 1170px).
   ПК-версия (style.css) свёрстана по макету 1920; на 1170–1560px она пропорционально уменьшается (zoom в <head>).
   Ниже 1170px — своя раскладка: планшет (768–1169) и телефон (до 767).
   Блоки с data-fit="ширина" скрипт уменьшает до ширины родителя (раскладка из макета сохраняется).
   ========================================================== */
.burger { display: none; }

@media (max-width: 1169px) {
  :root { --gut: 24px; }
  /* Desktop targets only the inner div.page to avoid scaling WordPress's
     body.page twice. Use the same specificity here so mobile can release
     that minimum width. */
  div.page { min-width: 0; }
  .page * { flex-shrink: 1; }
  .page img, .page .ico, .page svg { flex-shrink: 0; }
  .container { width: auto; margin-left: var(--gut); margin-right: var(--gut); }

  /* ---------- шапка: логотип, поиск, избранное/сравнение/корзина, бургер; ниже — категории лентой ---------- */
  .header { padding-top: 14px; display: flex; flex-direction: column; }
  .header::before { display: none; }
  .menu { order: 0; height: auto; margin-top: 0; gap: 12px; }
  .menu > .btn-catalog, .menu > .search, .menu > .user-nav { margin-left: 0; }
  .logo img { width: 170px; height: 30px; }
  .btn-catalog { width: auto; height: 48px; padding: 0 22px; gap: 12px; }
  .btn-catalog__text { font-size: 16px; }
  .dz-catalog-menu__panel { position: fixed; top: 78px; left: 12px; width: calc(100vw - 24px); max-height: calc(100vh - 96px); overflow-y: auto; padding: 18px; }
  .dz-catalog-menu__grid { grid-template-columns: repeat(3, 1fr); }
  .dz-catalog-menu__card { min-height: 108px; padding: 14px; font-size: 15px; }
  .search { flex: 1 1 auto; width: auto; min-width: 0; height: 48px; padding: 0 20px; }
  .search__input { font-size: 16px; }
  .user-nav { gap: 8px; margin-left: auto; }
  .circle-btn { width: 48px; height: 48px; }
  .circle-btn .ico { transform: scale(.85); }
  .badge-count { left: 32px; top: -2px; }
  .burger { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 48px; height: 48px; border-radius: 1111px; background: #fff; transition: background var(--t); }
  .burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #303030; transition: transform var(--t), opacity var(--t), background var(--t); }
  /* iOS can keep :hover after a tap, making a closed burger look like an
     active orange control.  Hover feedback belongs to pointer devices only;
     on touch the orange state is reserved for the actually open drawer. */
  @media (hover: hover) and (pointer: fine) {
    .burger:hover { background: var(--orange); }
    .burger:hover span { background: #fff; }
  }
  .header.is-menu .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .header.is-menu .burger span:nth-child(2) { opacity: 0; }
  .header.is-menu .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* верхняя полоса (город, ссылки, мессенджеры, телефон) — выпадающее меню под бургером */
  .topbar { display: none; }
  .header.is-menu .topbar {
    position: absolute; z-index: 60; left: 0; right: 0; top: 74px; display: flex; flex-direction: column; align-items: stretch; gap: 24px;
    height: auto; padding: 24px; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .12);
  }
  .topbar__addr { width: auto; flex-wrap: wrap; gap: 20px 35px; }
  .topnav { position: static; flex-direction: column; gap: 16px; height: auto; }
  .topnav a { font-size: 18px; font-weight: 600; color: var(--text); }
  .topbar__contacts { flex-wrap: wrap; justify-content: space-between; gap: 20px; height: auto; }
  .phone { align-items: flex-start; text-align: left; width: auto; height: auto; }

  .cats { order: 1; justify-content: flex-start; gap: 18px; margin: 18px calc(-1 * var(--gut)) 0; padding: 0 var(--gut) 6px; height: auto;
    overflow-x: auto; scrollbar-width: none; }
  .cats::-webkit-scrollbar { display: none; }
  .cats a { font-size: 16px; }
  .cats--dropdown { overflow-x: auto; overflow-y: hidden; }
  .cats__entry { flex: 0 0 auto; min-height: 32px; }
  .cats__toggle { width: 18px; height: 26px; }
  .cats__dropdown { position: fixed; top: var(--cats-menu-top, 82px); left: var(--cats-menu-left, 12px); width: var(--cats-menu-width, calc(100vw - 24px)); max-height: min(58vh, 430px); overflow-y: auto; z-index: 300; }

  /* ---------- общие блоки ---------- */
  .sec-head { flex-wrap: wrap; gap: 16px 24px; height: auto !important; }
  .sec-title { height: auto !important; width: auto !important; font-size: 40px; line-height: 1.02; white-space: normal; }
  .btn-more { height: 48px; }
  .btn-grad, .btn-white2 { height: 60px; font-size: 16px; }

  /* ленты карточек товаров — прокрутка пальцем вбок внутри своего блока */
  .prods { justify-content: flex-start; gap: 16px; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); scrollbar-width: none; }
  .prods::-webkit-scrollbar { display: none; }
  .prods > .prod { scroll-snap-align: start; }
  .products { margin-top: 70px; gap: 28px; }

  /* ---------- футер ---------- */
  .footer, .footer--plain { width: auto; height: auto; margin: 70px 0 0; border-radius: 20px 20px 0 0; padding: 44px var(--gut) 28px; }
  .cta + .footer, main + .footer:not(.footer--plain) { margin-top: 70px; }
  .footer__top, .footer--plain .footer__top { position: static; width: auto; flex-direction: column; gap: 40px; }
  .footer__brand { height: auto; gap: 24px; }
  .footer__brand > img { width: 220px; height: 39px; }
  .footer__legal { gap: 10px; font-size: 14px; white-space: normal; }
  .footer__cols { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; align-items: start; gap: 36px 24px; width: 100%; }
  .fcol { height: auto; width: auto !important; gap: 16px; }
  .fcol__list { gap: 14px; }
  .fcol__list a { width: auto; height: auto; }
  .fcontacts { width: auto; }
  .fc__val { width: auto; white-space: normal; }
  .fcontacts .shop__line, .fcontacts .fc__val { height: auto !important; }
  .footer__line, .footer--plain .footer__line { position: static; display: block; width: 100%; margin: 36px 0 20px; }
  .footer__bottom, .footer--plain .footer__bottom { position: static; width: auto; flex-wrap: wrap; gap: 12px 32px; white-space: normal; }
}

/* до 1023px поиск — отдельной строкой под логотипом */
@media (max-width: 1023px) {
  .menu { flex-wrap: wrap; gap: 10px; }
  .logo { margin-right: auto; }
  .user-nav { order: 1; }
  .burger { order: 2; }
  .search { order: 3; flex-basis: 100%; }
}

@media (max-width: 767px) {
  /* Model chips duplicate the model filter on phones and consume a full
     horizontal scroller. Keep filtering in the compact filter sheet only. */
  .flt-quick { display: none !important; }
  .footer .fc__stores { white-space: nowrap; font-size: 20px; letter-spacing: -.02em; }
  .dz-mobile-nav__store { margin: 0 0 20px; border-top: 0; border-bottom: 1px solid #ececec; }
  .dz-mobile-nav__store-label { display: none; }
  .dz-mobile-nav__store-value { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid #ececec; background: transparent; color: #313131; font: inherit; text-align: left; }
  .dz-mobile-nav__store-value:nth-of-type(2) { border-bottom: 0; }
  .dz-mobile-nav__store-key { grid-column: 1; margin-bottom: 4px; font-size: 13px; color: #8d8d8d; }
  .dz-mobile-nav__store-name { grid-column: 1; font-size: 16px; font-weight: 500; line-height: 1.25; }
  .dz-mobile-nav__store-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 22px; font-weight: 300; line-height: 1; color: #313131; }
  .dz-mobile-nav__store-value + .dz-mobile-nav__store-options { margin: 12px 0 8px; }
  /* When the city list is open, the address is a separate section—not the
     last row of that list. Keep a deliberate visual gap before it. */
  .dz-mobile-nav__store-options:not([hidden]) + .dz-mobile-nav__store-value { margin-top: 20px; padding-top: 18px; border-top: 1px solid #ececec; }
  .dz-mobile-nav__store-options { overflow: hidden; border: 1px solid #ececec; border-radius: 8px; background: #fff; }
  .dz-mobile-nav__store-options button { display: block; width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-bottom: 1px solid #f0f0f0; background: transparent; color: #313131; font: inherit; font-size: 15px; text-align: left; }
  .dz-mobile-nav__store-options button:last-child { border-bottom: 0; }
  .dz-mobile-nav__store-options .network-city-option { display: block; width: 100%; min-height: 42px; padding: 11px 12px; border-bottom: 1px solid #f0f0f0; color: #313131; font: inherit; font-size: 15px; line-height: 20px; text-align: left; text-decoration: none; }
  .dz-mobile-nav__store-options .network-city-option:last-child { border-bottom: 0; }
  /* A MAX link exists only for stores that supplied one. When the selected
     store has it, keep the footer icon in the same 40px social row. */
  .footer [data-store-max]:not([hidden]) {
    display: inline-flex !important;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }
  .dz-cookie { right: 16px; bottom: 16px; left: 16px; max-width: none; padding: 16px; border-radius: 18px; gap: 14px; font-size: 13px; }
  .dz-cookie__accept { min-width: 94px; height: 42px; padding: 0 14px; }
  .ti-hero { grid-template-columns: 1fr; gap: 28px; min-height: 0; margin-top: 25px; padding: 32px 24px; border-radius: 22px; }
  .ti-hero h2 { font-size: 39px; }
  .ti-hero p { margin-top: 18px; font-size: 17px; }
  .ti-hero .btn-grad { width: 100% !important; margin-top: 26px; }
  .ti-hero__facts { gap: 10px; }
  .ti-hero__fact { padding: 15px 17px; font-size: 15px; }
  .ti-hero__fact b { font-size: 17px; }
  .ti-section { margin-top: 64px; }
  .ti-grid, .ti-steps, .ti-faqs { grid-template-columns: 1fr; gap: 12px; }
  .ti-card, .ti-step { min-height: 0; padding: 24px 20px; }
  .ti-card__num, .ti-step::before { margin-bottom: 24px; }
  .ti-card h3, .ti-step h3 { font-size: 21px; }
  .ti-card p, .ti-devices__text, .ti-step p { font-size: 16px; }
  .ti-devices { grid-template-columns: 1fr; gap: 12px; }
  .ti-devices__main, .ti-devices__note { padding: 26px 20px; border-radius: 20px; }
  .ti-devices__main h3 { font-size: 25px; }
  .ti-devices__note p { font-size: 18px; }
  .ti-bottom { display: block; width: auto; margin: 64px 0; padding: 34px 24px; border-radius: 22px; }
  .ti-bottom h2 {
    max-width: 360px;
    margin-right: auto;
    margin-left: auto;
    font-size: 35px;
    line-height: 1.04;
    text-align: center;
  }
  .ti-bottom .btn-grad { width: 100% !important; margin-top: 26px; }
  .warranty-table { border-radius: 18px; }.warranty-table th, .warranty-table td { padding: 17px 20px; font-size: 16px; }.warranty-note { font-size: 16px; }.warranty-wide, .warranty-info { padding: 30px 20px; border-radius: 22px; }.warranty-wide h2, .warranty-info h2, .warranty-final h2 { font-size: 37px; }.warranty-wide > p:not(.vac-kicker), .warranty-info p, .warranty-text, .warranty-final p { font-size: 17px; }.warranty-text { padding: 28px 20px; border-radius: 20px; }.warranty-final { grid-template-columns: 1fr; gap: 26px; padding: 30px 20px; border-radius: 22px; }.warranty-final .btn-grad { width: 100%; }
  :root { --gut: 16px; }
  /* Categories are now available from the burger drawer; do not duplicate
     the horizontally scrolling category strip beneath the search field. */
  .header .cats { display: none !important; }
  .logo img { width: 136px; height: 24px; }
  .btn-catalog { display: none; }
  .dz-catalog-menu__panel { display: none; }
  .user-nav { gap: 6px; }
  .search { height: 46px; }
  .circle-btn, .burger { width: 42px; height: 42px; }
  .circle-btn .ico { transform: scale(.78); }
  .badge-count { left: 26px; }
  /* Desktop's old dropdown is replaced by the shared phone drawer. */
  .header.is-menu .topbar { display: none; }
  .header.dz-mobile-drawer-open .burger, .dz-sticky-header.dz-mobile-drawer-open .dz-sticky-header__burger { background: var(--orange); }
  .header.dz-mobile-drawer-open .burger span:nth-child(1), .dz-sticky-header.dz-mobile-drawer-open .dz-sticky-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: #fff; }
  .header.dz-mobile-drawer-open .burger span:nth-child(2), .dz-sticky-header.dz-mobile-drawer-open .dz-sticky-header__burger span:nth-child(2) { opacity: 0; }
  .header.dz-mobile-drawer-open .burger span:nth-child(3), .dz-sticky-header.dz-mobile-drawer-open .dz-sticky-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: #fff; }
  /* A tap must never leave a closed mobile burger in its desktop hover colour.
     This remains after the desktop hover rule deliberately, including for
     mobile browsers that incorrectly report hover support. */
  .header:not(.dz-mobile-drawer-open) .burger:hover,
  .header:not(.dz-mobile-drawer-open) .burger:focus { background: #fff; }
  .header:not(.dz-mobile-drawer-open) .burger:hover span,
  .header:not(.dz-mobile-drawer-open) .burger:focus span { background: #303030; }
  /* A cross-store navigation must never retain iOS's pressed/hover paint.
     A closed burger is always white; orange is reserved for the open drawer. */
  .header:not(.dz-mobile-drawer-open) .burger { background: #fff !important; }
  .header:not(.dz-mobile-drawer-open) .burger span { background: #303030 !important; }

  .sec-title { font-size: 30px; }
  .sec-head .btn-more { padding: 0 22px; width: auto !important; height: 44px; }
  .products { margin-top: 56px; gap: 22px; }

  /* Footer is a full-bleed surface on phones.  Its parent may be a page
     container with side gutters, so `width:auto` leaves a visible strip at
     the right edge on iOS.  Anchor it to the viewport instead. */
  .footer, .footer--plain {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    margin-top: 56px;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    padding: 36px var(--gut) 24px;
  }
  .footer__brand > .footer__logo { width: 220px; height: 39px; }
  .footer__brand > .footer__logo > img { width: 220px; height: 39px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .fcol:last-child { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; }
}

/* The small fixed scroll header has its own catalogue control. The regular
   header still hides its large catalogue pill on phones. */
@media (max-width: 767px) {
  /* Match the supplied mobile header: logo, saved/comparison/cart actions and
     the burger. The orange desktop catalogue pill is not shown on phones. */
  .dz-sticky-header .dz-sticky-header__catalog,
  .dz-sticky-header .dz-sticky-header__phone { display: none !important; }
  .dz-sticky-header .dz-sticky-header__user-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
  .dz-sticky-header .dz-sticky-header__user-nav .circle-btn { display: flex; width: 42px; height: 42px; }
  .dz-sticky-header .dz-sticky-header__user-nav .circle-btn .ico { transform: scale(.78); }
  .dz-sticky-header .dz-sticky-header__user-nav .badge-count { left: 26px; }
  .dz-sticky-header .dz-sticky-header__burger { display: flex; flex: none; width: 42px; height: 42px; border: 0; }
  /* A phone uses the list drawer below, never the desktop tile mega-menu. */
  .dz-sticky-header > .dz-catalog-menu__panel { display: none !important; }
  body.dz-catalog-open { overflow: hidden; }
  .dz-mobile-nav { position: fixed; z-index: 1300; top: 70px; left: 12px; right: 12px; max-height: calc(100dvh - 82px); overflow-y: auto; padding: 20px; border-radius: 22px; background: #fff; box-shadow: 0 18px 48px rgba(0,0,0,.18); }
  .dz-mobile-nav[hidden] { display: none; }
  .dz-mobile-nav__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid #ececec; color: var(--text); font-size: 24px; line-height: 1; }
  .dz-mobile-nav__close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f2f2f2; color: #262626; font: 400 29px/1 Arial, sans-serif; }
  .dz-mobile-nav__links { display: flex; flex-direction: column; padding: 10px 0; border-bottom: 1px solid #ececec; }
  .dz-mobile-nav__links a { display: flex; align-items: center; min-height: 45px; color: var(--text); font-size: 17px; font-weight: 600; }
  .dz-mobile-nav__catalog { padding-top: 4px; }
  .dz-mobile-nav__catalog > button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; padding: 0; border: 0; background: transparent; color: var(--text); font: 700 18px/1 var(--font); text-align: left; }
  .dz-mobile-nav__catalog > button b { display: none; }
  .dz-mobile-nav__categories { display: flex; flex-direction: column; padding-bottom: 12px; }
  .dz-mobile-nav__categories[hidden], .dz-mobile-nav__models[hidden] { display: none !important; }
  .dz-mobile-nav__category { border-bottom: 1px solid #f0f0f0; }
  .dz-mobile-nav__category-head { display: flex; align-items: center; min-height: 46px; }
  .dz-mobile-nav__category-head > a { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; min-height: 46px; padding: 0 2px; color: #4b4b4b; font-size: 16px; font-weight: 600; }
  .dz-mobile-nav__category-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #f7f7f7; }
  .dz-mobile-nav__category-toggle span { width: 7px; height: 7px; margin-top: -4px; border-right: 1.5px solid var(--orange); border-bottom: 1.5px solid var(--orange); transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; }
  .dz-mobile-nav__category-toggle[aria-expanded="true"] span { margin-top: 4px; transform: rotate(-135deg); }
  .dz-mobile-nav__models { display: flex; flex-direction: column; gap: 2px; padding: 0 0 12px 14px; }
  .dz-mobile-nav__models a { display: flex; align-items: center; min-height: 36px; color: #777; font-size: 15px; font-weight: 500; }
  .dz-mobile-nav__categories .dz-mobile-nav__all { display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box; width: 100%; height: 56px; min-height: 56px; margin-top: 12px; padding: 0 20px; overflow: hidden; border: 0; border-radius: 999px; background: var(--orange); color: #fff; font-size: 16px; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; }
}

/* Корзина: мобильные уточнения из макета. */
@media (max-width: 1169px) {
  .cart-msg__btns { gap: 12px; }
  .cart-msg__btn { flex: 1; width: auto; }
}
@media (max-width: 767px) {
  .cart-sum__title { font-size: 26px; height: auto; }
  .cart-sum__line { gap: 12px; }
  .cart-sum__line dt { font-size: 16px; height: auto; }
  .cart-sum__line dd { font-size: 20px; }
  .cart-sum__line--total dd { font-size: 26px; }
  .cart-msg__btn { height: 54px; gap: 14px; }
  /* Brief specs repeat the full specification groups immediately below.
     Keep the complete version and remove the duplicate summary on phones. */
  .pc__brief { display: none; }
}

/* ==========================================================
   Главная
   ========================================================== */
@media (max-width: 1169px) {
  /* 1 экран: большой баннер на всю ширину, под ним «предзаказ» и «в наличии» рядом */
  .hero { margin-top: 20px; }
  .hero__row { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: 12px; width: auto; margin-left: 0; }
  .promo-main { grid-column: 1 / -1; }
  .hero-nav { display: none; }

  /* каталог-плитки: сетка 3 колонки (большая плитка — на 2), плитки уменьшаются под колонку */
  .catalog { margin-top: 70px; gap: 28px; }
  .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: auto; align-items: start; }
  .tiles__col { display: contents; }
  .tile--big { grid-column: span 2; grid-row: span 2; }

  /* Trade-in и бонусы — своя раскладка: текст по центру/слева, украшения из макета — фоном */
  .tradein, .bonus, .about, .blog, .reviews, .shops { margin-top: 70px; }
  .tradein__box { height: auto; padding: 48px 32px 52px; }
  .tradein__box > .rot, .tradein > .rot, .tradein > span.abs { display: none; }
  .tradein__content { position: relative; left: auto; top: auto; width: auto; max-width: 520px; margin: 0 auto; gap: 28px; }
  .tradein__title { width: auto; height: auto; font-size: 44px; white-space: normal; display: block; }
  .tradein__title span { display: inline; }
  .tradein__title span::after, .bonus__title span::after { content: ' '; }
  .tradein__sub { width: auto; height: auto; font-size: 18px; }
  .tradein__swap { display: none; }

  .bonus__box { height: auto; padding: 44px 36px 260px; }
  .bonus__box > .rot { display: none; }
  .bonus__box > img.abs { left: auto !important; right: -60px !important; top: auto !important; bottom: -150px !important; width: 560px !important; height: 373px !important; }
  .bonus__content { position: relative; left: auto; top: auto; gap: 28px; }
  .bonus__title { width: auto; height: auto; font-size: 44px; white-space: normal; display: block; }
  .bonus__title span { display: inline; }
  .bonus__mark, .bonus__pill { display: none; }
  .bonus__sub { width: auto; max-width: 560px; height: auto; font-size: 18px; }

  /* о компании: текст, затем фото и цифры */
  .about { width: auto; height: auto; flex-wrap: wrap; gap: 28px; }
  .about > .rot { display: none; }
  .about__left { width: 100%; gap: 28px; }
  .about__title { width: auto; height: auto; font-size: 40px; }
  .about__desc { gap: 18px; font-size: 18px; }
  .about__desc p { width: auto !important; height: auto !important; }
  .about__photo { flex: 1 1 340px; width: auto; height: 520px; margin-right: 0; }
  .about__photo .rot { left: 50% !important; transform: translateX(-50%); }
  .stats { flex: 1 1 260px; height: auto; display: grid; grid-template-columns: 1fr; gap: 12px; }
  .stat { width: auto; height: auto !important; min-height: 120px; }

  /* видео и новости: друг под другом */
  .blog { height: auto; flex-direction: column; gap: 56px; }
  .blog__videos, .blog__news { width: 100%; gap: 28px; }
  .blog__head { height: auto; flex-wrap: wrap; gap: 16px; }
  .blog__head .sec-title { width: auto !important; height: auto !important; }
  .blog__list { gap: 16px; }
  .news-grid { gap: 24px; }
  .news-row { height: auto; gap: 16px; }
  .news { flex: 1 1 0; height: auto; min-width: 0; gap: 16px; }
  .news__img { width: 100%; }
  .news__img img { left: 50% !important; transform: translateX(-50%); min-width: 100%; }
  .news__title { width: auto; height: auto; font-size: 19px; }

  /* отзывы: видео лентой, рейтинги рядом */
  .reviews { gap: 28px; }
  .reviews > .sec-head .sec-title { width: auto !important; }
  .reviews__row { flex-direction: column; gap: 24px; }
  .reviews__videos { align-self: stretch; width: auto; max-width: none; justify-content: flex-start; gap: 16px; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .reviews__videos::-webkit-scrollbar { display: none; }
  .reviews__videos > .review { scroll-snap-align: start; }
  .ratings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; width: 100%; }

  /* магазины: карточка магазина и карта друг под другом */
  .shops { gap: 28px; }
  .shops__row { height: auto; flex-direction: column; align-items: center; gap: 16px; }

  /* CTA: заголовок и форма друг под другом, телефон из макета — справа фоном */
  .cta { height: auto; padding: 44px 36px 40px; overflow: hidden; }
  .cta > .rot, .cta > img.abs { display: none; }
  .cta > span.abs { display: none; }
  .cta__head { position: static; gap: 16px; }
  .cta__title { width: auto; height: auto; font-size: 40px; }
  .cta__sub { width: auto; height: auto; font-size: 18px; }
  .cta__form { position: static; width: 100%; max-width: 460px; margin-top: 32px; align-items: stretch; }
  .cta__fields { gap: 20px; }
  .field { width: 100%; height: 60px; }
  .channels { gap: 10px; }
  .channel { flex: 1 1 0; }
  .channel__in { width: 100%; }
  .cta__group > .btn-white2 { width: 100% !important; }
  .cta__consent { width: auto; }
}

@media (max-width: 767px) {
  /* баннер «Новый в джистор»: текст сверху, телефон снизу справа */
  .promo-main { width: 100%; height: 470px; }
  .promo-main__noise, .promo-main__texture { left: -260px; }
  .promo-main > .rot { left: auto !important; right: -520px; top: 150px !important; }
  .promo-main > img.abs { left: auto !important; right: -230px; top: auto !important; bottom: -110px; width: 560px !important; height: 347px !important; }
  .promo-main__content { left: 20px; top: 24px; width: calc(100% - 40px); gap: 12px; }
  .promo-main__text { gap: 0; }
  .promo-main__head { zoom: .62; height: auto; }
  .promo-main__sub { width: 500px; height: auto; font-size: 25px; }
  .btn-white { position: absolute; left: 0; top: 380px; width: 230px; height: 52px; gap: 14px; }
  .btn-white__text { height: auto; font-size: 15px; }

  .catalog { margin-top: 56px; }
  /* Главная использует ту же мобильную сетку категорий, что и /catalog/:
     две одинаковые карточки в ряд. Не оставляем отдельную растянутую
     iPhone-плитку, из-за которой каталог выглядел другим и ломал ритм. */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tiles .tile,
  .tiles .tile--big,
  .tiles .tile--s,
  .tiles .tile--m {
    grid-column: auto;
    grid-row: auto;
    width: 348px !important;
    height: 479px !important;
    justify-self: start;
  }
  .tiles .tile__title { top: 41px !important; }
  .tiles .tile__price { top: 86px !important; }
  .tiles .tile > img {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 335px !important;
    object-fit: contain !important;
    object-position: center bottom;
  }

  .tradein, .bonus, .about, .blog, .reviews, .shops { margin-top: 56px; }
  .tradein__box { padding: 36px 20px 40px; }
  .tradein__title { font-size: 32px; }
  .tradein__sub { font-size: 16px; }
  .tradein__content .btn-grad { width: 100% !important; }

  .bonus__box { padding: 32px 20px 210px; }
  .bonus__box > img.abs { right: -110px !important; bottom: -120px !important; width: 440px !important; height: 293px !important; }
  .bonus__title { font-size: 32px; }
  .bonus__sub { font-size: 16px; }
  .bonus__content .btn-white2 { width: 100% !important; }

  .about__title { font-size: 30px; }
  .about__desc { font-size: 16px; }
  .about__photo { flex-basis: 100%; height: 420px; }
  .stats { flex-basis: 100%; grid-template-columns: 1fr 1fr; }
  .stat { min-height: 104px; }
  .stat__text { left: 16px; }
  .stat__num { height: auto; font-size: 32px; }
  .stat__label { height: auto; font-size: 14px; white-space: normal; }
  .about__left .btn-grad { width: 100% !important; }

  .blog { gap: 44px; }
  .news-row { flex-direction: column; gap: 24px; }
  .ratings:not(.ratings--row) { grid-template-columns: minmax(0, 1fr); }

  /* видео на телефоне — на всю ширину, текст снизу */
  .video { width: 100% !important; height: 230px; }
  .video__text { top: auto; bottom: 16px; left: 16px; right: 80px; width: auto; gap: 12px; }
  .video__title { height: auto; font-size: 16px; }
  .video .pills { flex-wrap: wrap; gap: 8px; }
  .video .pill { height: 28px; font-size: 12px; }
  .video__play { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .video__shade { left: -60px; top: 80px; width: 420px; height: 220px; }

  .cta { padding: 32px 20px; }
  .cta__title { font-size: 30px; }
  .cta__sub { font-size: 16px; }
  .channel__in { font-size: 13px; gap: 7px; }
}

/* самые узкие телефоны (360–374px): логотип и кнопки шапки помельче, чтобы бургер остался в первой строке */
@media (max-width: 374px) {
  .logo img { width: 118px; height: 21px; }
  .circle-btn, .burger { width: 38px; height: 38px; }
  .user-nav { gap: 4px; }
  .badge-count { left: 22px; }
}

/* ==========================================================
   Сетки одинаковых карточек [data-fit-grid]: колонки --fit-n, карточка из макета уменьшается до колонки (--fit-z, main.js)
   ========================================================== */
.flt-side__head, .flt-side__apply { display: none; }
@media (max-width: 1169px) {
  [data-fit-grid] { display: grid !important; grid-template-columns: repeat(var(--fit-n, 2), minmax(0, 1fr)); }
  [data-fit-grid] > * { zoom: var(--fit-z, 1); }
  html.no-scroll, html.no-scroll body { overflow: hidden; }

  /* заголовки внутренних страниц */
  .cmp-head, .call-head, .cart-head, .info-head, .flt-head, .pc-crumbs { margin-top: 32px; }
  .cmp-head { flex-wrap: wrap; align-items: flex-start; gap: 20px; }
  .cmp-head__text, .info-head { min-width: 0; }
  .cmp-head__title, .flt-head__title, .info-head__title, .cart-head__title { height: auto !important; font-size: 48px; line-height: 1; white-space: normal; }
  .crumbs { flex-wrap: wrap; gap: 6px 16px; height: auto; font-size: 14px; white-space: normal; }
  .crumbs a, .crumbs span { width: auto !important; }
  .cmp-head__acts { flex-wrap: wrap; gap: 10px; }

  /* «Каталог джистор» — плитки категорий */
  .ctiles { gap: 12px; margin-top: 32px; }
  .ctiles + .products { margin-top: 70px; }

  /* каталог с фильтром: плашки моделей лентой, фильтр — панелью по кнопке, товары сеткой */
  .flt-head__row { height: auto; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .flt-head__row .flt-count { margin-top: 0; }
  .flt-quick { flex-wrap: nowrap; gap: 8px; margin: 24px calc(-1 * var(--gut)) 0; padding: 0 calc(var(--gut) + 20px) 8px; overflow-x: auto; scroll-padding-inline: calc(var(--gut) + 20px); scrollbar-width: none; }
  .flt-quick::after { content: ""; flex: 0 0 1px; }
  .flt-quick::-webkit-scrollbar { display: none; }
  .flt-quick__item { height: 44px; padding: 0 20px; font-size: 15px; line-height: 1; white-space: nowrap; }
  .flt-quick + .flt, .flt { margin-top: 24px; display: block; }
  .flt__main, .flt.is-collapsed .flt__main, .flt--stub .flt__main { width: auto; }
  .flt__side { display: none; }
  .flt.is-sheet .flt__side {
    position: fixed; z-index: 200; inset: 0; display: flex; width: auto; padding: 0 var(--gut) 96px; overflow-y: auto; background: var(--bg);
  }
  .flt-side__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: 0 calc(-1 * var(--gut));
    padding: 16px var(--gut); background: var(--bg); font-size: 24px; font-weight: 600; color: var(--text); }
  .flt-side__close { position: relative; width: 44px; height: 44px; border-radius: 50%; background: #fff; transition: background var(--t); }
  .flt-side__close::before, .flt-side__close::after { content: ''; position: absolute; left: 13px; top: 21px; width: 18px; height: 2px; border-radius: 2px; background: #303030; transform: rotate(45deg); }
  .flt-side__close::after { transform: rotate(-45deg); }
  .flt-side__close:hover { background: var(--orange); }
  .flt-side__close:hover::before, .flt-side__close:hover::after { background: #fff; }
  .flt-side__apply { position: fixed; z-index: 3; left: var(--gut); right: var(--gut); bottom: 16px; display: block; height: 56px; border-radius: 1111px;
    background: #ff7629; font-size: 17px; font-weight: 600; color: #fff; box-shadow: 0 10px 30px rgba(255, 118, 41, .35); transition: background var(--t); }
  .flt-side__apply:hover { background: var(--orange-hover); }
  .flt-box, .flt-acc, .flt-more-toggle { flex: none; }
  .flt-bar { height: 44px; }
  .flt-bar > .flt-bar__btn { height: 44px; padding: 0 20px; border-radius: 1111px; background: #fff; gap: 14px; }
  .flt-grid { margin-top: 20px; gap: 24px 12px; }
  .fav { margin-top: 32px; }
  .flt-more { margin-top: 32px; }
  .flt-empty__title { font-size: 30px; height: auto; }
  .flt-empty__text { height: auto; font-size: 17px; }

  /* карточка товара: фото, затем описание и покупка */
  .pc { flex-direction: column; gap: 28px; margin-top: 20px; }
  /* Product photos retain the original swipe gallery. It sits inside the
     standard mobile gutter, rather than reaching the edge of the viewport. */
  .pc__photos { width: 100%; flex-direction: row; gap: 12px; margin: 0; padding: 0 0 8px; align-self: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pc__photos::-webkit-scrollbar { display: none; }
  .pc-photo { flex: none; width: min(560px, 82vw); height: auto; aspect-ratio: 1; scroll-snap-align: start; }
  /* Keep product imagery away from the rounded white card edges. The image
     files themselves are intentionally transparent / padded inconsistently,
     so the safe visual gutter belongs to the gallery component. */
  .pc-photo > img.abs { left: 8% !important; top: 8% !important; width: 84% !important; height: 84% !important; }
  .pc__info { position: static; width: 100%; }
  .pc__head { width: 100%; height: auto; flex-wrap: wrap; gap: 12px; }
  .pc__title { width: auto; margin-bottom: 0; font-size: 40px; line-height: 1.1; }
  .pc__main { gap: 32px; }
  .pc-opt { flex-wrap: wrap; gap: 12px 20px; }
  .pc-opt__label { width: 100%; height: auto; font-size: 18px; }
  /* Colours are choices, not a carousel: keep every swatch inside the card. */
  .pc-swatches { height: auto; max-width: 100%; flex-wrap: wrap; gap: 12px; }
  .pc-swatch { flex: 0 0 38px; }
  .pc-mems { flex-wrap: wrap; gap: 10px; }
  .pc__buy { margin-top: 32px; gap: 28px; }
  .pc__prices { flex-wrap: wrap; gap: 12px 20px; }
  .pc__price { height: auto; font-size: 44px; }
  .pc__btns { flex-wrap: wrap; gap: 12px; }
  .pc-cart, .pc-quick { flex: 1 1 260px; width: auto; height: 60px; font-size: 17px; }
  .pc__brief { margin-top: 44px; gap: 20px; }
  .pc__brief-head { height: auto; flex-wrap: wrap; gap: 12px; }
  .specs--2, .specs--3 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pc-specs { margin-top: 70px; gap: 28px; }
  .spec-groups { columns: 1; }
  .spec-group { padding: 22px 20px 8px; }
  .spec-row { gap: 16px; font-size: 15px; }

  /* сравнение: карточки, характеристики и кнопки листаются вбок одним блоком */
  /* Comparison remains one synchronized horizontal strip, but it must begin
     and end on the same 16px gutter as the rest of the phone page. */
  .cmp { margin: 32px var(--gut) 0; padding: 0 0 16px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 0; }
  .cmp.is-empty { margin-left: var(--gut); margin-right: var(--gut); padding-left: 0; padding-right: 0; overflow: visible; }
  .cmp__cards, .cmp__table, .cmp__buys { width: max-content; }
  .cmp__cards, .cmp__buys { gap: 16px; }
  .cmp__cards > .cmp-col, .cmp__buys > .cmp-cart { scroll-snap-align: start; }
  .cmp-row--alt::before { left: 0; width: 100%; }
  .cmp-row__title { position: sticky; left: 0; width: max-content; }
  .cmp-group__title { position: sticky; left: 0; width: max-content; }
  .cmp-empty { width: 100%; box-sizing: border-box; padding: 40px 0 20px; }
  .cmp-empty__title, .cmp-empty__text { box-sizing: border-box; width: 100%; max-width: calc(100vw - (var(--gut) * 2)); white-space: normal; }
  .cmp-empty__title { height: auto !important; font-size: 30px; }
  .cmp-empty__text { height: auto !important; font-size: 17px; }

  /* корзина: товары, доставка, затем итог и форма */
  .cart { flex-direction: column; gap: 44px; margin-top: 28px; }
  .cart__main, .cart__side { width: 100%; }
  .cart-item { height: auto; min-height: 150px; padding: 12px; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
  .cart-item__img, .cart-item__img img { width: 110px; height: 110px; }
  .cart-item__info { flex: 1 1 200px; width: auto; gap: 12px; padding-right: 52px; }
  .cart-item__name { width: auto; margin-bottom: 0; font-size: 17px; }
  .cart-item__prices { flex-wrap: wrap; height: auto; gap: 8px 14px; }
  .cart-item__price { font-size: 20px; }
  .qty { position: static; margin-left: 126px; width: 160px; height: 44px; }
  .qty__btn { height: 44px; }
  .cart-del { top: 12px; right: 12px; width: 44px; height: 44px; }
  .cart-del img { width: 44px; height: 44px; }
  .ships { flex-wrap: wrap; gap: 12px; }
  .ship { flex: 1 1 200px; width: auto; }
  .cart-sum { height: auto; }
  .cart-sum__row { flex-wrap: wrap; height: auto; gap: 10px 20px; }
  .cart-sum__total { font-size: 40px; }
  .cart-form { height: auto; padding: 32px 20px; }
  .cart-form__fields, .cart-form__send { width: 100%; }
  .field--light, .cart-form__btn { width: 100%; }
  .cart-form__done { width: 100%; padding-top: 40px; }
  .cart-empty { margin-top: 28px; }
}

@media (max-width: 767px) {
  /* Home page ratings are not the .ratings--row variant used on «О компании».
     Their cards carry data-fit attributes, so the generic script scaled the
     357px desktop card down and left a blank right edge. Make this one phone
     list explicitly fluid, independent of the desktop fit calculation. */
  .reviews:not(.reviews--wide) .ratings {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100vw - (var(--gut) * 2));
    max-width: none;
  }
  .reviews:not(.reviews--wide) .ratings > .rating {
    box-sizing: border-box;
    width: 100% !important;
    zoom: 1 !important;
  }
  .reviews:not(.reviews--wide) .ratings .rating__head { width: calc(100% - 44px); }
  .reviews:not(.reviews--wide) .ratings .rating__line { width: 100%; }

  /* About page: ratings turn into a vertical list on phones. The desktop
     169px row height previously remained in force, so video reviews started
     over the second rating card. */
  .reviews--wide .ratings--row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    height: auto;
    gap: 12px;
    margin-bottom: 0;
  }
  .reviews--wide .ratings--row .rating { width: 100%; }
  /* The generic data-fit script scales desktop cards with zoom. Ratings have
     their own fluid mobile layout, so scaling them leaves an empty strip on
     the right side of the screen. */
  .reviews--wide .ratings--row > .rating { zoom: 1 !important; }
  .reviews--wide .ratings--row .rating__head { width: calc(100% - 44px); }
  .reviews--wide .ratings--row .rating__line { width: 100%; }
  /* Keep the first review aligned with the section title instead of flushing
     it against the viewport edge. The next review stays reachable by swipe. */
  .reviews__videos {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 0 10px !important;
    scroll-padding-inline: 0;
  }

  .cmp-head, .call-head, .cart-head, .info-head, .flt-head, .pc-crumbs { margin-top: 24px; }
  .cmp-head__title, .flt-head__title, .info-head__title, .cart-head__title { font-size: 34px; }
  .flt-head__row .flt-count { width: auto; height: 36px; padding: 0 16px !important; line-height: 1; }
  .flt-bar__btn { font-size: 14px; }
  .flt-grid { gap: 20px 12px; }
  .pc__title { font-size: 30px; }
  .pc__price { font-size: 36px; }
  .pc__old s { font-size: 20px; height: auto; }
  .pc-cart, .pc-quick { flex-basis: 100%; }
  .specs--2, .specs--3 { grid-template-columns: 1fr; }
  .cart-item__img, .cart-item__img img { width: 88px; height: 88px; }
  .cart-item__info { padding-right: 48px; }
  .qty { margin-left: 104px; }
  .ship { flex-basis: 100%; }
  .field { padding: 14px 22px; }
  .field input { font-size: 16px; }
  .field__patch { left: 18px; }
  .field__label { left: 29px; }
  .cart-sum__total { font-size: 34px; }
  .cart-sum__old s { font-size: 20px; }
}

/* ==========================================================
   О компании, доставка, рассрочка, отзывы, контакты, блог, статья
   ========================================================== */
@media (max-width: 1169px) {
  /* о компании */
  .ab-hero { height: auto; flex-direction: column; gap: 32px; margin-top: 32px; }
  .ab-hero__text { width: 100%; gap: 28px; }
  .ab-hero__title { width: auto; height: auto; font-size: 48px; }
  .ab-hero__desc { width: auto; gap: 18px; font-size: 18px; }
  .ab-hero__desc p { width: auto !important; height: auto !important; }
  .ab-hero__back { display: none; }
  .ab-hero__photo { width: 100%; height: 480px; }
  .stats2 { margin-top: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat2 { width: auto; height: 120px; }
  .stat2__text { left: 22px; top: 22px; gap: 10px; }
  .stat2__num { height: auto; font-size: 40px; }
  .stat2__label { height: auto; font-size: 16px; }
  .popcats, .gallery, .advs, .services, .faqs { margin-top: 70px; }
  .popcats { gap: 28px; }
  .popcats__row { gap: 12px; }
  .gallery { height: auto; padding-left: 0; gap: 0; }
  .gallery__photo { width: 100%; height: 420px; }
  .gallery__photo img { left: auto !important; transform: none; }
  .gallery__badge { left: 16px; bottom: 16px; max-width: calc(100% - 32px); padding: 9px 13px; font-size: 13px; }
  .gallery__nav { display: none; }
  .advs { gap: 28px; align-items: stretch; }
  .advs__title { width: auto; height: auto; font-size: 40px; }
  .advs__row { flex-direction: column; gap: 12px; }
  .adv { width: 100%; height: auto; padding: 28px 20px; }
  .adv__in { position: static; }
  .adv__text { width: auto; max-width: 420px; }
  .adv__title { height: auto; white-space: normal; }
  .adv__desc { width: auto; height: auto; }
  .reviews--wide { gap: 28px; }
  .reviews--wide > .sec-head .sec-title { width: auto !important; height: auto !important; }
  .reviews__videos--4 { justify-content: flex-start; gap: 16px; }

  /* услуги: карточка на всю ширину, украшения из макета убраны, калькулятор под текстом */
  .services { gap: 16px; }
  .services__row, .services__row:first-child { height: auto; width: auto; margin-left: 0; flex-direction: column; align-items: stretch; gap: 16px; }
  .services__row:nth-child(2) { flex-direction: column-reverse; }
  .services__row > img.abs, .services__row > .bg-patch,
  .srv-card > .rot, .srv-card > .abs, .srv-card > .blur-ellipse { display: none; }
  .srv-card { width: 100% !important; height: auto; padding: 32px 28px 36px; }
  .srv-card__text { position: relative; left: auto; top: auto; width: auto; gap: 28px; }
  .srv__title { width: auto !important; height: auto; font-size: 40px; }
  .srv__desc { width: auto !important; height: auto; font-size: 18px; }
  .srv-side { width: 100% !important; height: auto; padding: 32px 28px; gap: 24px; border-radius: 20px; background: #fff; }
  .srv-side .btn-srv { align-self: center; margin-left: 0; }
  .calc { position: relative; left: auto; top: auto; width: auto; height: auto; margin-top: 28px; flex-direction: row; flex-wrap: wrap; gap: 20px 28px; }
  .calc__field { width: 180px; }
  .calc__range { width: 100%; }

  /* вопросы-ответы — одной колонкой */
  .faqs { gap: 28px; }
  .faqs__grid { flex-direction: column; gap: 12px; }
  .faqs__col { width: 100%; gap: 12px; }
  .faq__q { height: auto; min-height: 64px; padding: 14px 20px; font-size: 18px; }
  .faq__a { padding: 0 20px 20px; font-size: 16px; }

  /* доставка, рассрочка: вкладки лентой, карточки условий — сеткой */
  .info { margin-top: 28px; gap: 24px; }
  .info-tabs { gap: 10px; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 6px; overflow-x: auto; scrollbar-width: none; }
  .info-tabs::-webkit-scrollbar { display: none; }
  .info-tab { flex: none; width: auto; height: 48px; padding: 0 22px; font-size: 16px; white-space: nowrap; }
  .info-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .info-card, .info-cards--short .info-card { height: auto; min-height: 0; padding: 22px 22px 24px; }
  .info-card__title { height: auto; font-size: 21px; white-space: normal; }
  .info-card__text { width: auto !important; }

  /* отзывы */
  .revs { margin-top: 28px; }
  .revs .ratings--row { height: auto; margin-bottom: 0; }
  .revs__grid { margin-top: 28px; row-gap: 24px; }
  .revs__nav, .blog-page .revs__nav { height: auto; margin-top: 36px; flex-wrap: wrap; gap: 20px; }
  .pager { gap: 12px; }
  .pager__arrow { width: 44px; height: 44px; }
  .pager__arrow img { width: 44px; height: 44px; }
  .footer--revs { margin-top: 70px; }

  /* контакты */
  .shops--page { margin-top: 28px; }
  /* The desktop store card relies on fixed positioning and data-fit zoom.
     On a phone that produced a narrow, floating card. Keep both store
     variants on the same page gutters and let their content flow naturally. */
  .shops__row { width: 100%; height: auto; align-items: stretch; }
  .shops .shop {
    box-sizing: border-box; width: 100%; height: auto; min-height: 0;
    padding: 20px; overflow: hidden; border-radius: 20px; zoom: 1 !important;
  }
  .shop__photos { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .shop__photos > span { width: auto !important; height: 132px; border-radius: 12px; }
  .shop__photos img { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; }
  .shops .shop__info { position: static; width: auto; margin-top: 26px; gap: 24px; }
  .shops .shop__lines { gap: 22px; }
  .shops .shop__line { width: 100%; gap: 8px !important; }
  .shops .shop__label { width: auto; height: auto; }
  .shops .shop__route { position: static; width: 100%; margin-top: 26px; }

  .shop-cards { grid-template-columns: minmax(0, 1fr); margin-top: 44px; gap: 16px; }
  .shop-card { box-sizing: border-box; width: 100%; height: auto; min-height: 0; padding: 24px 20px; border-radius: 20px; }
  .shop-card__info { position: static; width: auto; gap: 22px; }
  .shop-card__lines { gap: 20px; }
  .shop-card__btn { position: static; box-sizing: border-box; width: 100%; margin-top: 24px; }

  /* Mobile uses the lightweight designed map preview. The interactive Yandex
     widget is opened only by an explicit tap, never while merely scrolling. */
  .map { box-sizing: border-box; width: 100%; height: 238px; border-radius: 20px; zoom: 1 !important; }
  .dz-live-map__switcher, .dz-live-map__route { display: none; }
  .dz-live-map__preview > img { object-position: center; }
  .dz-live-map__preview > span { left: 16px; right: 16px; top: auto; bottom: 16px; min-height: 52px; transform: none; }

  /* блог */
  .blog-page { margin-top: 28px; }
  .blog-grid { margin-top: 28px; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .blog-grid > .video--blog { grid-column: 1 / -1; width: auto; margin-bottom: 0; }
  .blog-grid > .news { height: auto; }
  .video--wide { grid-column: 1 / -1; width: 100% !important; height: 340px; margin-top: 0; }
  .video--wide > img.abs { width: 100% !important; height: 100% !important; object-fit: cover; }
  .video--wide .video__text { top: auto; bottom: 24px; }
  .video__title { height: auto; }

  /* статья: текст, затем содержание и плашка магазина */
  .art { margin-top: 28px; flex-direction: column; gap: 40px; }
  .art__body { width: 100%; gap: 20px; }
  .art__cover { height: 380px; }
  .art__lead { font-size: 20px; }
  .art__body h2 { margin-top: 16px; font-size: 28px; }
  .art__body p { font-size: 17px; }
  .art__quote { padding: 24px 24px; font-size: 20px; }
  .art__side { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .art__toc, .art__promo { flex: 1 1 320px; }
  .art-more { margin-top: 70px; gap: 28px; }
  .art-more__row { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
}

@media (max-width: 767px) {
  /* One shared mobile video treatment for the blog and the home page:
     the play affordance needs breathing room from the rounded corner. */
  .video__play { right: 24px; bottom: 24px; width: 46px; height: 46px; }
  .video__text { right: 92px; }
  .video--wide .video__text { bottom: 24px; }
  .vac-hero { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; padding: 28px 20px 20px; border-radius: 22px; }
  .vac-hero h2, .vac-apply h2 { font-size: 42px; }.vac-facts { flex-wrap: wrap; margin-top: 22px; }.vac-facts span { min-height: 38px; font-size: 14px; }.vac-hero__text { margin-top: 20px; font-size: 17px; }.vac-hero .btn-grad { width: 100%; margin-top: 26px; }.vac-hero__media { min-height: 420px; border-radius: 16px; }.vac-cities { top: 12px; left: 12px; gap: 5px; }.vac-cities button { min-height: 34px; padding: 0 10px; font-size: 12px; }.vac-place { right: 12px; bottom: 12px; padding: 10px 13px; font-size: 13px; }
  .vac-intro, .vac-process { grid-template-columns: 1fr; gap: 20px; margin-top: 64px; }.vac-intro > div, .vac-process > div { font-size: 17px; }.vac-section { margin-top: 64px; }.vac-benefits { grid-template-columns: 1fr; gap: 12px; margin-top: 26px; }.vac-benefits article { min-height: 0; padding: 24px 20px; }.vac-benefits h3 { margin-top: 24px; }.vac-columns { grid-template-columns: 1fr; gap: 12px; margin-top: 64px; }.vac-columns article { padding: 28px 20px; }.vac-columns .sec-title { font-size: 31px; }.vac-columns li { font-size: 16px; }.vac-career { grid-template-columns: 1fr; gap: 26px; margin-top: 64px; padding: 30px 20px; border-radius: 22px; }.vac-career h2 { font-size: 37px; }.vac-career > p { font-size: 17px; }.vac-apply { grid-template-columns: 1fr; gap: 28px; margin-top: 64px; padding: 30px 20px; border-radius: 22px; }.vac-apply > div > p:last-child { font-size: 17px; }.vac-form { gap: 22px; padding: 24px 16px; border-radius: 18px; }.vac-form .vac-field { height: 70px; }.vac-form .vac-field .field__label { left: 30px; font-size: 13px; }.vac-form .vac-field .field__patch { left: 19px; }.vac-form .vac-field input { height: 22px; padding: 0; font-size: 17px; }.vac-form .cart-form__btn { height: 70px; font-size: 18px; }
  .legal-page { margin-top: 24px; }
  .legal-page .info-head__title { font-size: 34px; line-height: 1.06; }
  .legal-doc { width: auto; margin-top: 28px; padding: 30px 24px 34px; border-radius: 18px; }
  .legal-doc h2 { margin-top: 34px; font-size: 24px; }
  .legal-doc p, .legal-doc li { font-size: 16px; line-height: 1.45; }
  .ab-hero__title, .srv__title, .advs__title { font-size: 32px; }
  .ab-hero__desc, .srv__desc { font-size: 16px; }
  .ab-hero__photo, .gallery__photo { height: 340px; }
  .stat2 { height: 104px; }
  .stat2__text { left: 16px; top: 18px; }
  .stat2__num { font-size: 30px; }
  .stat2__label { font-size: 14px; white-space: normal; }
  .popcats, .gallery, .advs, .services, .faqs { margin-top: 56px; }
  .srv-card, .srv-side { padding: 28px 20px; }
  /* On touch screens a hover-only white service link reads as plain text.
     Services always use the visible orange CTA treatment here. */
  .srv-card__text .btn-srv, .srv-side .btn-srv {
    width: 100%; height: 64px; background-image: var(--orange-grad);
    color: #fff; box-shadow: 0 12px 26px rgba(255, 103, 36, .22);
  }
  .srv-card__text .btn-srv img, .srv-side .btn-srv img { filter: brightness(0) invert(1); }
  .calc__field { width: calc(50% - 14px); }
  .faq__q { font-size: 16px; }
  .info-cards { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .video--wide { height: 230px; }
  .video--wide .video__text { bottom: 16px; }
  .art__cover { height: 240px; }
  .art__lead { font-size: 18px; }
  .art__body h2 { font-size: 24px; }
  .art__body p { font-size: 16px; }
  .art__quote { padding: 20px; font-size: 18px; }
  .art__promo-title { font-size: 28px; }
  .art-more__row { grid-template-columns: 1fr; }
  .revs__nav .btn-more { width: 100% !important; }
  .pager { width: 100%; justify-content: space-between; }
  .pager__nums { gap: 0; }
}

/* Mobile menu overlay: keep category rail behind the open drawer. */
@media (max-width: 767px) {
  .header.is-menu .topbar { position: fixed; z-index: 1000; left: var(--gut); right: var(--gut); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; }
  .header.is-menu .cats { visibility: hidden; pointer-events: none; }
}

/* Phone catalogue on the home page mirrors /catalog/: every category takes
   one cell in the same two-column grid. Keep this final override here so an
   older export cannot reintroduce a featured full-width iPhone tile. */
@media (max-width: 767px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
  .tiles .tile,
  .tiles .tile--big,
  .tiles .tile--m,
  .tiles .tile--s {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
    width: 348px !important;
    height: 479px !important;
  }
  .tiles .tile__title { top: 41px !important; }
  .tiles .tile__price { top: 86px !important; }
  .tiles .tile > img {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 335px !important;
    object-fit: contain !important;
    object-position: center bottom;
  }
  .tiles .tile > .abs { display: none; }
}

/* One mobile shell: content and footer use the same viewport width.  Do not
   use a separate 100vw/translate calculation for the footer — on iOS that
   can make the whole page appear narrower than the viewport. */
@media (max-width: 767px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  div.page {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  .footer, .footer--plain {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Header search on phones: the global mobile shell allows flex children to
   shrink, which previously squeezed the thumbnail box while its image kept
   its desktop size. Reserve the image column so product photos stay whole. */
@media (max-width: 767px) {
  .search__thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
  }
  .search__thumb img {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 4px;
    object-fit: contain;
  }
}

/* Mobile comparison actions use one deliberate component, not desktop-sized
   controls with competing inline widths. */
@media (max-width: 767px) {
  .cmp-head__acts { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 12px; }
  .cmp-head__acts .btn-more { width: 100% !important; height: 56px; min-height: 56px; padding: 0 20px !important; gap: 12px; font: 600 16px/1 var(--font); }
  .cmp-head__acts .btn-more > span:first-child { width: auto !important; height: auto; }
  .cmp-head__acts .btn-more .ico { flex: 0 0 16px; }
}

/* Comparison is a data table on phones, not a scaled desktop layout. */
@media (max-width: 767px) {
  .cmp:not(.is-empty) .cmp__cards { height: auto; }
  .cmp:not(.is-empty) .cmp-col { gap: 12px; }
  .cmp:not(.is-empty) .cmp-card { height: auto; min-height: 0; }
  .cmp:not(.is-empty) .prod__name { font-size: 18px; line-height: 1.14; }
  .cmp:not(.is-empty) .prod__price { font-size: 22px; line-height: 1.1; }
  .cmp:not(.is-empty) .cmp__table { margin-top: 34px; }
  .cmp:not(.is-empty) .cmp__table::before { content: 'Характеристики товаров'; display: block; margin-bottom: 18px; color: #313131; font: 700 22px/1.1 var(--font); }
  .cmp:not(.is-empty) .cmp-group__title { margin: 24px 0 12px; font: 600 16px/1.2 var(--font); }
  .cmp:not(.is-empty) .cmp-row { height: auto; min-height: 0; gap: 9px; padding: 14px 0; }
  .cmp:not(.is-empty) .cmp-row__title { height: auto; font: 600 15px/1.2 var(--font); }
  .cmp:not(.is-empty) .cmp-row__vals { height: auto; gap: 16px; font: 500 14px/1.25 var(--font); }
  .cmp:not(.is-empty) .cmp-row__vals > span { width: 276px; white-space: normal; }
}

/* Phone comparison: compact two-dimensional table, modelled after a normal
   comparison sheet instead of a vertically stacked desktop grid. */
.cmp-mobile-table-head { display: none; }
@media (max-width: 767px) {
  .cmp:not(.is-empty) { overflow: visible; padding-bottom: 0; }
  .cmp:not(.is-empty) .cmp__cards,
  .cmp:not(.is-empty) .cmp__buys,
  .cmp:not(.is-empty) .cmp__table { width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .cmp:not(.is-empty) .cmp__table { display: block; margin-top: 38px; }
  .cmp:not(.is-empty) .cmp__table::before { content: none; }
  .cmp-mobile-table-head { display: grid; grid-template-columns: 128px max-content; width: max-content; min-width: 100%; border-bottom: 1px solid #e8e8e8; background: var(--bg); }
  .cmp-mobile-table-head__label { display: flex; align-items: end; padding: 0 10px 12px 0; color: #858585; font: 500 12px/1.2 var(--font); }
  .cmp-mobile-table-head__products { display: flex; }
  .cmp-mobile-table-head__products > span { box-sizing: border-box; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 8px; width: 190px; min-height: 58px; padding: 0 12px 12px; color: #313131; font: 600 12px/1.2 var(--font); }
  .cmp-mobile-table-head__products img { display: block; width: 42px; height: 42px; object-fit: contain; }
  .cmp-mobile-table-head__products b { display: -webkit-box; overflow: hidden; font: inherit; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .cmp:not(.is-empty) .cmp-group { width: max-content; min-width: 100%; }
  .cmp:not(.is-empty) .cmp-group__title { box-sizing: border-box; width: 100%; margin: 24px 0 8px; padding: 0; color: #858585; font: 600 13px/1.2 var(--font); }
  .cmp:not(.is-empty) .cmp-row { display: grid; grid-template-columns: 128px max-content; width: max-content; min-width: 100%; gap: 0; padding: 0; border-bottom: 1px solid #ececec; }
  .cmp:not(.is-empty) .cmp-row--alt::before { display: none; }
  .cmp:not(.is-empty) .cmp-row__title { position: sticky; left: 0; z-index: 2; box-sizing: border-box; width: 128px; min-height: 58px; padding: 14px 10px 14px 0; overflow-wrap: anywhere; white-space: normal; background: var(--bg); color: #5f5f5f; font: 500 13px/1.25 var(--font); }
  .cmp:not(.is-empty) .cmp-row__vals { display: flex; height: auto; gap: 0; font: 500 14px/1.25 var(--font); }
  .cmp:not(.is-empty) .cmp-row__vals > span { box-sizing: border-box; width: 190px; min-height: 58px; padding: 14px 12px; border-left: 1px solid #ececec; white-space: normal; }
}

/* iOS: do not combine scroll snapping and sticky cells inside the comparison
   scroller — that combination causes horizontal swipes to stick. */
@media (max-width: 767px) {
  .cmp:not(.is-empty) { scroll-snap-type: none; }
  .cmp:not(.is-empty) .cmp__table { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; }
  .cmp:not(.is-empty) .cmp-row__title { position: static; }
}

/* One comparison track: product cards, specification rows and bottom actions
   must move together, just like columns in a real comparison table. */
@media (max-width: 767px) {
  .cmp:not(.is-empty) { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; }
  .cmp:not(.is-empty) .cmp__cards,
  .cmp:not(.is-empty) .cmp__table,
  .cmp:not(.is-empty) .cmp__buys { width: max-content; max-width: none; overflow: visible; }
}

/* Keep comparison on one native Safari scroll surface. */
@media (max-width: 767px) {
  .cmp:not(.is-empty) { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; overscroll-behavior-x: auto; touch-action: pan-x; }
  .cmp:not(.is-empty) .cmp__cards,
  .cmp:not(.is-empty) .cmp__table,
  .cmp:not(.is-empty) .cmp__buys { overflow: visible; touch-action: auto; }
}

/* Phone comparison: a vertical two-column grid, no horizontal gesture needed. */
@media (max-width: 767px) {
  .cmp:not(.is-empty) { overflow: visible; touch-action: auto; }
  .cmp:not(.is-empty) .cmp__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: none; gap: 12px; overflow: visible; }
  .cmp:not(.is-empty) .cmp-col { width: auto; min-width: 0; }
  .cmp:not(.is-empty) .cmp-col .prod__top { height: auto; min-height: 30px; }
  .cmp:not(.is-empty) .cmp-remove { width: 100%; padding: 0 8px; gap: 6px; font-size: 11px; }
  .cmp:not(.is-empty) .cmp-card { width: 100%; }
  .cmp:not(.is-empty) .prod__img { aspect-ratio: 1 / 1; }
  .cmp:not(.is-empty) .prod__body { padding: 12px; }
  .cmp:not(.is-empty) .prod__name { font-size: 15px; line-height: 1.15; }
  .cmp:not(.is-empty) .prod__price { font-size: 18px; }
  .cmp:not(.is-empty) .cmp__table { display: block; width: 100%; max-width: none; margin-top: 32px; overflow: visible; }
  .cmp-mobile-table-head { display: block; width: 100%; min-width: 0; border: 0; background: transparent; }
  .cmp-mobile-table-head__label { display: block; padding: 0 0 10px; color: #313131; font: 700 20px/1.1 var(--font); }
  .cmp-mobile-table-head__products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cmp-mobile-table-head__products > span { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; width: auto; min-width: 0; min-height: 48px; padding: 7px; border-radius: 10px; background: #fff; font-size: 11px; }
  .cmp-mobile-table-head__products img { width: 34px; height: 34px; }
  .cmp:not(.is-empty) .cmp-group { width: 100%; min-width: 0; }
  .cmp:not(.is-empty) .cmp-group__title { width: 100%; font-size: 14px; }
  .cmp:not(.is-empty) .cmp-row { display: block; width: 100%; min-width: 0; padding: 14px 0; border-bottom: 1px solid #ececec; }
  .cmp:not(.is-empty) .cmp-row__title { position: static; width: auto; min-height: 0; padding: 0 0 9px; background: transparent; color: #555; font: 600 14px/1.25 var(--font); }
  .cmp:not(.is-empty) .cmp-row__vals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .cmp:not(.is-empty) .cmp-row__vals > span { width: auto; min-width: 0; min-height: 0; padding: 10px; border: 0; border-radius: 10px; background: #fff; color: #313131; font: 500 13px/1.25 var(--font); overflow-wrap: anywhere; }
  .cmp:not(.is-empty) .cmp__buys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: none; gap: 12px; margin-top: 24px; overflow: visible; }
  .cmp:not(.is-empty) .cmp-cart { width: auto; min-width: 0; padding: 0 10px; gap: 8px; font-size: 14px; }
}

/* Mobile comparison follows one actual scroll viewport (ADS-style table). */
@media (max-width: 767px) {
  .cmp:not(.is-empty) { overflow: visible; }
  .cmp-scroll { display: block; width: 100%; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .cmp:not(.is-empty) .cmp-scroll .cmp__cards { display: flex; grid-template-columns: none; width: max-content; max-width: none; height: auto; gap: 16px; overflow: visible; }
  .cmp:not(.is-empty) .cmp-scroll .cmp-col { flex: 0 0 276px; width: 276px; min-width: 276px; }
  .cmp:not(.is-empty) .cmp-scroll .cmp-col .prod__top { min-height: 30px; }
  .cmp:not(.is-empty) .cmp-scroll .cmp-remove { width: 183px; padding: 0; font-size: 12px; }
  .cmp:not(.is-empty) .cmp-scroll .cmp-card { width: 276px; min-height: 0; }
  .cmp:not(.is-empty) .cmp-scroll .prod__body { padding: 0; }
  .cmp:not(.is-empty) .cmp-scroll .prod__name { font-size: 18px; line-height: 1.14; }
  .cmp:not(.is-empty) .cmp-scroll .prod__price { font-size: 22px; }
  .cmp:not(.is-empty) .cmp-scroll .cmp__table { display: block; width: max-content; max-width: none; margin-top: 38px; overflow: visible; }
  .cmp:not(.is-empty) .cmp-scroll .cmp__table::before { content: none; }
  .cmp:not(.is-empty) .cmp-scroll .cmp-mobile-table-head { display: grid; grid-template-columns: 128px max-content; width: max-content; min-width: 100%; border-bottom: 1px solid #e8e8e8; background: var(--bg); }
  .cmp:not(.is-empty) .cmp-scroll .cmp-mobile-table-head__label { display: flex; align-items: end; padding: 0 10px 12px 0; color: #858585; font: 500 12px/1.2 var(--font); }
  .cmp:not(.is-empty) .cmp-scroll .cmp-mobile-table-head__products { display: flex; }
  .cmp:not(.is-empty) .cmp-scroll .cmp-mobile-table-head__products > span { display: grid; grid-template-columns: 42px minmax(0,1fr); width: 190px; min-height: 58px; padding: 0 12px 12px; border: 0; border-radius: 0; background: transparent; font-size: 12px; }
  .cmp:not(.is-empty) .cmp-scroll .cmp-mobile-table-head__products img { width: 42px; height: 42px; }
  .cmp:not(.is-empty) .cmp-scroll .cmp-group { width: max-content; min-width: 100%; }
  .cmp:not(.is-empty) .cmp-scroll .cmp-group__title { width: auto; margin: 24px 0 8px; padding: 0; font-size: 13px; }
  .cmp:not(.is-empty) .cmp-scroll .cmp-row { display: grid; grid-template-columns: 128px max-content; width: max-content; min-width: 100%; min-height: 58px; padding: 0; border-bottom: 1px solid #ececec; }
  .cmp:not(.is-empty) .cmp-scroll .cmp-row__title { position: static; width: 128px; min-height: 58px; padding: 14px 10px 14px 0; background: transparent; color: #5f5f5f; font: 500 13px/1.25 var(--font); }
  .cmp:not(.is-empty) .cmp-scroll .cmp-row__vals { display: flex; grid-template-columns: none; width: auto; gap: 0; }
  .cmp:not(.is-empty) .cmp-scroll .cmp-row__vals > span { width: 190px; min-width: 190px; min-height: 58px; padding: 14px 12px; border-left: 1px solid #ececec; border-radius: 0; background: transparent; font-size: 14px; }
  .cmp:not(.is-empty) .cmp-scroll .cmp__buys { display: flex; grid-template-columns: none; width: max-content; max-width: none; gap: 16px; margin-top: 24px; overflow: visible; }
  .cmp:not(.is-empty) .cmp-scroll .cmp-cart { width: 276px; min-width: 276px; padding: 0; font-size: 16px; }
}