/* Мобильный слой keeper.kz, v3. Шаблон eshop24_default, ориентир — мобильная версия Аспро: Премьер.
   Подключается после стилей шаблона только при ширине до 1024px; всё ниже — для телефонов (до 767px).
   Классы kpr-* расставляет mobile.js. */

.kpr-sticky-buy,
.kpr-tree-all {
  display: none;
}

@media (max-width: 767px) {

  :root {
    --kpr-accent: var(--primary, #4545c4);
    --kpr-radius: 12px;
    --kpr-nav-h: 58px;
    --kpr-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* ---------- защита от горизонтальной прокрутки ---------- */
  html {
    overflow-x: hidden; /* только на html: на body это превратило бы его в отдельную область прокрутки в старом Safari */
  }
  @supports (overflow-x: clip) {
    html,
    body {
      overflow-x: clip;
    }
  }

  /* контент не уходит под нижнюю панель */
  body {
    padding-bottom: calc(var(--kpr-nav-h) + var(--kpr-safe-bottom));
  }

  /* ---------- нижняя панель навигации (как в Аспро) ---------- */
  .fixed-bottom-panel {
    padding: 0 0 var(--kpr-safe-bottom);
    overflow: visible;
    border-top: 1px solid #ececf3;
    box-shadow: 0 -4px 16px rgba(20, 20, 60, .06);
    z-index: 1030;
  }
  .fixed-bottom-panel .scroll-container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;
    height: var(--kpr-nav-h);
  }
  .fixed-bottom-panel a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 0 2px;
    color: #74748a;
    font-size: 10.5px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .fixed-bottom-panel i {
    display: block; /* размер не зависит от того, загрузился ли уже шрифт иконок */
    width: 24px;
    height: 20px;
    margin: 0;
    color: inherit;
    font-size: 19px;
    line-height: 20px;
    text-align: center;
  }
  .fixed-bottom-panel a.kpr-nav-active {
    color: var(--kpr-accent);
  }
  .fixed-bottom-panel .kpr-nav-home { order: 1; }
  .fixed-bottom-panel .kpr-nav-catalog { order: 2; }
  .fixed-bottom-panel .kpr-nav-search { order: 3; }
  .fixed-bottom-panel .kpr-nav-cart { order: 4; }
  .fixed-bottom-panel .kpr-nav-account { order: 5; }
  .fixed-bottom-panel .kpr-nav-b2b { order: 6; }
  /* тот же порядок сразу при отрисовке, ещё до mobile.js: иначе пункты переставляются на глазах (сдвиг макета) */
  .fixed-bottom-panel a[href$="/catalog/"] { order: 2; }
  .fixed-bottom-panel a[href*="/catalog/?q="] { order: 3; }
  .fixed-bottom-panel a[href$="/personal/cart/"] { order: 4; }
  .fixed-bottom-panel a[href$="/personal/"] { order: 5; }
  .fixed-bottom-panel a[href*="//b2b."] { order: 6; }
  .kpr-nav-count {
    position: absolute;
    top: 6px;
    left: calc(50% + 5px);
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--kpr-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
  }

  /* ---------- чат Битрикс24: над нижней панелью, без всплывающей подсказки ---------- */
  .b24-widget-button-wrapper {
    right: 12px !important;
    bottom: calc(var(--kpr-nav-h) + var(--kpr-safe-bottom) + 12px) !important;
  }
  .b24-widget-button-popup {
    display: none !important;
  }
  .rstuning__open-button {
    display: none !important;
  }

  /* ---------- бургер-меню: низ не прячется под нижнюю панель, чат не мешает ---------- */
  .offcanvas .offcanvas__inner {
    padding-bottom: calc(var(--kpr-nav-h) + var(--kpr-safe-bottom) + 16px);
  }
  body:has(.offcanvas--shown) .b24-widget-button-wrapper {
    display: none !important;
  }

  /* пункты меню строками во всю ширину, стрелка справа; раздел с подразделами раскрывается
     нажатием на название (mobile.js), первым пунктом внутри — ссылка на сам раздел */
  .offcanvas .tree-nav > .tree-nav__item {
    border-bottom: 1px solid #ececf3;
  }
  .offcanvas .tree-nav__link-wrap {
    display: flex;
    align-items: center;
  }
  .offcanvas .tree-nav__link-wrap > .tree-nav__link {
    flex: 1 1 auto;
    min-width: 0;
  }
  .offcanvas .tree-nav__link {
    display: flex;
    overflow-wrap: anywhere;
  }
  .offcanvas .tree-nav > .tree-nav__item > .tree-nav__link,
  .offcanvas .tree-nav > .tree-nav__item > .tree-nav__link-wrap > .tree-nav__link {
    padding: 13px 0;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.25;
  }
  .offcanvas .tree-nav__toggle {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    color: #74748a;
    font-size: 26px;
    transition: transform .2s;
  }
  .offcanvas .tree-nav > .tree-nav__item > .tree-nav__subnav {
    margin: 0 0 12px 14px;
  }
  .offcanvas .tree-nav > .tree-nav__item > .tree-nav__subnav > .tree-nav__item > .tree-nav__link,
  .offcanvas .tree-nav > .tree-nav__item > .tree-nav__subnav > .tree-nav__item > .tree-nav__link-wrap > .tree-nav__link {
    padding: 10px 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
  }
  .offcanvas .tree-nav > .tree-nav__item > .tree-nav__subnav > .tree-nav__item > .tree-nav__subnav {
    margin: 0 0 8px 14px;
  }
  .offcanvas .tree-nav__subnav .tree-nav__subnav .tree-nav__link {
    padding: 8px 0;
    color: #4a4a5e;
    font-size: 15px;
    line-height: 1.3;
  }
  /* после нажатия на телефоне ссылка «залипает» в состоянии наведения и становится голубой */
  .offcanvas .tree-nav__item:not(.tree-nav__item--selected) > .tree-nav__link-wrap > .tree-nav__link:hover,
  .offcanvas .tree-nav__item:not(.tree-nav__item--selected) > .tree-nav__link-wrap > .tree-nav__link:focus {
    color: #000;
  }
  .offcanvas .tree-nav .kpr-tree-all {
    display: list-item;
  }
  .offcanvas .tree-nav .kpr-tree-all > .tree-nav__link {
    color: var(--kpr-accent) !important;
    font-weight: 500 !important;
  }

  /* ---------- заголовки ---------- */
  .l-main__title {
    font-size: 22px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
  }

  /* ---------- главная: преимущества компактно — значок слева, текст справа ---------- */
  .features .row {
    margin-right: -4px;
    margin-left: -4px;
  }
  .features .row > [class*="col"] {
    padding: 4px;
  }
  .features .features__item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 10px;
    border-radius: var(--kpr-radius);
    background: #fff;
    text-align: left;
  }
  .features .features__img {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: 0 !important;
  }
  .features .features__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .features .features__name {
    margin: 0 !important;
    font-size: 13px;
    line-height: 1.25;
    text-align: left;
  }

  /* ---------- плитки категорий ---------- */
  .section-item.section-item--thumb {
    display: block;
    height: 100%;
    padding: 12px;
    border-radius: var(--kpr-radius);
    background: #f4f5fa;
  }
  .section-item--thumb > .row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start !important;
    margin: 0;
  }
  .section-item--thumb > .row > [class*="col"] {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  .section-item--thumb .section-item__image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 72px;
    margin: 0 0 8px;
  }
  .section-item--thumb .section-item__image-wrapper img {
    width: auto;
    max-width: 100%;
    max-height: 72px;
    object-fit: contain;
  }
  .section-item--thumb .section-item__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  /* ---------- фильтр и сортировка: две «таблетки» одной высоты ---------- */
  .catalog-sorter {
    margin-top: 16px;
    margin-bottom: 20px;
    padding: 12px 0;
  }
  /* шаблон на телефоне делает кнопку фильтра серым значком 24px — возвращаем обычную кнопку */
  .catalog-sorter .smart-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px 0 12px !important;
    border: 1px solid #dfe1ea !important;
    border-radius: 20px;
    background-color: #fff !important;
    color: #1f1f2e !important;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1 !important;
  }
  .catalog-sorter .smart-filter-toggle.active {
    border-color: var(--kpr-accent) !important;
  }
  .catalog-sorter .smart-filter-toggle .btn__icon {
    margin: 0 !important;
    color: var(--kpr-accent);
    font-size: 18px;
  }
  .catalog-sorter .smart-filter-toggle span.d-none {
    display: inline !important; /* «Фильтр» словом, а не только значком */
    margin: 0 !important;
  }
  .catalog-sorter .smart-filter-toggle.active:after {
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background-color: var(--kpr-accent);
  }
  /* высота от содержимого: при заданной высоте и отступах iOS обрезает текст снизу;
     16px — чтобы iPhone не увеличивал страницу при выборе */
  .catalog-sorter .custom-select {
    height: auto !important;
    min-height: 40px;
    padding: 9px 34px 9px 14px !important;
    border-color: #dfe1ea;
    border-radius: 20px;
    font-size: 16px !important;
    line-height: 20px !important;
  }

  /* ---------- карточки товаров в списке ---------- */
  .product-item-container {
    height: 100%;
  }
  .product-item.product-item--card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px 8px 10px;
    border: 1px solid #eceef4;
    border-radius: var(--kpr-radius);
    background: #fff;
  }
  .product-item--card .product-item-image-wrapper {
    position: relative;
    margin-bottom: 8px;
  }
  .product-item--card .product-item-image-canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
  }
  .product-item--card .product-item-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  /* «в сравнение» и «в избранное» — значками на фото */
  .product-item--card .product-item-image-action {
    position: absolute;
    top: 0;
    right: 0;
    display: flex !important;
    flex-direction: column;
    gap: 4px;
  }
  .product-item--card .product-item-price-current {
    font-size: 16px;
    font-weight: 700;
  }
  .product-item--card .product-item-title {
    display: -webkit-box;
    margin: 6px 0 8px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  /* блок покупки на компьютере появляется при наведении — на телефоне показываем всегда */
  .product-item--card .product-item__popup {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    margin-top: auto;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .product-item--card .product-item__popup,
  .product-item--card .product-item-actions-container {
    padding: 0 !important;
  }
  .product-item--card .product-item-amount {
    display: none; /* количество меняется в корзине */
  }
  .product-item--card .product-item__popup .product-item-info-container {
    margin-right: 0 !important; /* на компьютере блок вытягивается за поля карточки на -28px */
    margin-left: 0 !important;
  }
  .product-item--card .product-item-actions-container {
    width: 100%;
    margin-bottom: 8px !important;
  }
  .product-item--card .product-item-buttons {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .product-item--card .product-item-buttons > div {
    width: 100%;
  }
  .product-item--card .product-item-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 8px;
    border-radius: 8px !important;
    font-size: 14px;
  }
  .product-item--card .product-item-limit {
    font-size: 12px;
  }
  /* «Производитель — AENO» мелкой серой строкой под кнопкой */
  .product-item--card .product-item-properties {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    margin: 0 0 6px;
    color: #74748a;
    font-size: 12px;
    line-height: 1.35;
  }
  .product-item--card .product-item-properties dt,
  .product-item--card .product-item-properties dd {
    margin: 0;
    font-size: inherit;
    font-weight: 400;
  }

  /* ---------- карточка товара ---------- */
  .product-item-pay-block {
    padding: 16px !important;
    border-radius: var(--kpr-radius);
  }
  .product-item-pay-block .product-item-price-current {
    font-size: 26px;
    font-weight: 700;
  }
  .product-item-pay-block .btn {
    min-height: 46px;
    border-radius: 10px !important;
    font-size: 16px;
  }

  /* закреплённая полоса «цена + В корзину», когда блок покупки ушёл за экран */
  .kpr-sticky-buy {
    position: fixed;
    right: 0;
    bottom: calc(var(--kpr-nav-h) + var(--kpr-safe-bottom));
    left: 0;
    z-index: 1029;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-top: 1px solid #ececf3;
    background: #fff;
    box-shadow: 0 -4px 16px rgba(20, 20, 60, .06);
    transform: translateY(110%);
    transition: transform .2s;
  }
  .kpr-sticky-buy.is-visible {
    transform: none;
  }
  .kpr-sticky-buy__price {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .kpr-sticky-buy__btn {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: var(--kpr-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
  }
  body.kpr-has-sticky-buy .b24-widget-button-wrapper {
    bottom: calc(var(--kpr-nav-h) + var(--kpr-safe-bottom) + 70px) !important;
  }
}