/* =========================================================
   adaptive.css — MOBILE ONLY (<=860px). Desktop не трогаем
   ========================================================= */

/* Desktop: мобильные элементы скрыты */
.m-tabs{ display:none; }
.m-header{ display:none; }

/* =========================================================
   MOBILE (<=860px)
   ========================================================= */
@media (max-width: 860px){

  :root{
    /* ---- нижняя панель ---- */
    --m-tabs-min-h: 66px;
    --m-tabs-pad: 6px;
    --m-safe: env(safe-area-inset-bottom, 0px);
    --m-tabs-gap: 18px;

    /* JS может переопределить эту переменную реальной высотой */
    --m-tabs-total-h: calc(
      var(--m-tabs-min-h) + (var(--m-tabs-pad) * 2) + var(--m-safe) + var(--m-tabs-gap)
    );

    /* ---- кнопки действий в карточке (корзина/сердце) ---- */
    --m-act-btn: 52px;  /* размер квадратной кнопки */
    --m-act-ico: 26px;  /* размер иконки */

    /* микроподстройка (если надо): вниз/вверх, вправо/влево */
    --m-cart-shift-x: 0px;
    --m-cart-shift-y: 0.8px;
  }

  /* ---- база + анти “пустота справа” ---- */
  html, body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  *, *::before, *::after{ box-sizing: border-box; }
  img{ max-width: 100%; height: auto; }

  /* ---- резерв места снизу под fixed табы ---- */
  html{ scroll-padding-bottom: var(--m-tabs-total-h); }
  body{ padding-bottom: var(--m-tabs-total-h) !important; }

  .page-zoom,
  #pageRoot,
  .main-content{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-bottom: var(--m-tabs-total-h) !important;
  }

  .page-zoom{
    zoom: 1 !important;
    transform: none !important;
  }

  /* ---- Герой/баннер ---- */
  .hero, .hero img,
  .hero-slider, .hero-slider img,
  .banner, .banner img{
    width: 100%;
    max-height: 240px;
    object-fit: cover;
  }

  /* ---- превью картинок товаров ---- */
  .product img,
  .popular__item img,
  .viewed__item img{
    width: 100%;
    max-height: 160px;
    object-fit: contain;
  }

  /* ---- десктопный header скрываем ---- */
  .header__top,
  .header__categories{
    display: none !important;
  }

  /* =======================================================
     Мобильная шапка
     ======================================================= */
  .m-header{
    display: block !important;
    position: sticky;
    top: 0;
    z-index: 1100;
    background: #fff;
    border-bottom: 1px solid #ececec;
    padding: 12px 12px 14px;
  }

  .m-header__top{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 10px;
  }

  .m-header__logo{ margin: 0 auto; }

  .m-header__logo img{
    height: 36px;
    width: auto;
    max-width: 180px;
    display: block;
    object-fit: contain;
  }

  .m-header__actions{ display: none !important; }

  .m-header__search{
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    padding: 8px 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
  }

  .m-header__search input{
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 16px; /* iOS анти-зум */
  }

  .m-header__search button{
    width: 40px;
    height: 34px;
    border: 0;
    border-radius: 12px;
    background: #111;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* =======================================================
     Нижние табы
     ======================================================= */
  .m-tabs{
    display: flex !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1300;
    background: #fff;
    border-top: 1px solid #ececec;
    padding: var(--m-tabs-pad) 0 calc(var(--m-safe) + var(--m-tabs-pad));
    min-height: var(--m-tabs-min-h);
  }

  .m-tabs__item{
    flex: 1 1 0;
    min-width: 0;
    text-decoration: none;
    border: 0;
    background: none;
    color: #666;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;
    padding: 6px 0;

    font-size: 11px;
    line-height: 1.1;

    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .m-tabs__label{
    display: block;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1.1;
  }

  .m-tabs__icon{
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    color: #666;
    transition: background .15s ease, color .15s ease;
  }

  .m-tabs__icon i{
    font-size: 20px;
    line-height: 1;
    display: block;
    color: currentColor !important;
  }

  .m-tabs__item[aria-current="page"]{
    color: #111;
    font-weight: 700;
  }
  .m-tabs__item[aria-current="page"] .m-tabs__icon{
    background: #111;
    color: #fff;
  }

  /* Бейджи */
  .m-tabs .m-tabs__badge,
  .m-tabs .badge-count{
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    z-index: 2 !important;

    height: 18px !important;
    min-width: 18px !important;
    padding: 0 6px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;
    background: #ff3b30 !important;
    color: #fff !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 18px !important;

    border: 2px solid #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;

    pointer-events: none !important;
    user-select: none !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
  }

  .m-tabs .m-tabs__badge:empty,
  .m-tabs .badge-count:empty,
  .m-tabs .m-tabs__badge[hidden],
  .m-tabs .badge-count[hidden]{
    display: none !important;
  }

  /* ---- на мобилке не используем десктопный overlay-каталог ---- */
  .catalog-fullscreen{ display: none !important; }

  /* ---- HERO: убираем подпись с баннера ---- */
  .hero__caption{ display: none !important; }

  /* =======================================================
     POPULAR: кнопки в карточке по центру + корзина-иконка
     ======================================================= */

  /* ряд кнопок строго по центру карточки */
  .popular .product__actions{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* одинаковый размер */
  .popular .product__actions .product__cart,
  .popular .product__actions .product__fav{
    width: var(--m-act-btn) !important;
    height: var(--m-act-btn) !important;
    min-height: var(--m-act-btn) !important;
    flex: 0 0 var(--m-act-btn) !important;
    padding: 0 !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* корзина: прячем текст (без троеточий) и делаем контекст для абсолютной иконки */
  .popular .product__actions .product__cart{
    position: relative !important;

    font-size: 0 !important;
    line-height: 0 !important;

    text-indent: 0 !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  /* ✅ bi-cart (Bootstrap Icons) — ИДЕАЛЬНЫЙ ЦЕНТР */
  .popular .product__actions .product__cart::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;

    width: var(--m-act-ico);
    height: var(--m-act-ico);

    background-color: currentColor;

    transform:
      translate(-50%, -50%)
      translateX(var(--m-cart-shift-x))
      translateY(var(--m-cart-shift-y));

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M0%201.5A.5.5%200%200%201%20.5%201H2a.5.5%200%200%201%20.485.379L2.89%203H14.5a.5.5%200%200%201%20.491.592l-1.5%208A.5.5%200%200%201%2013%2012H4a.5.5%200%200%201-.491-.408L1.01%201.607.61%201.607A.5.5%200%200%201%200%201.5zM3.14%204l1.25%207h8.22l1.25-7H3.14z%22/%3E%3Cpath%20d%3D%22M5.5%2013a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3zm0%201a.5.5%200%201%201%200%201%20.5.5%200%200%201%200-1z%22/%3E%3Cpath%20d%3D%22M12.5%2013a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3zm0%201a.5.5%200%201%201%200%201%20.5.5%200%200%201%200-1z%22/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M0%201.5A.5.5%200%200%201%20.5%201H2a.5.5%200%200%201%20.485.379L2.89%203H14.5a.5.5%200%200%201%20.491.592l-1.5%208A.5.5%200%200%201%2013%2012H4a.5.5%200%200%201-.491-.408L1.01%201.607.61%201.607A.5.5%200%200%201%200%201.5zM3.14%204l1.25%207h8.22l1.25-7H3.14z%22/%3E%3Cpath%20d%3D%22M5.5%2013a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3zm0%201a.5.5%200%201%201%200%201%20.5.5%200%200%201%200-1z%22/%3E%3Cpath%20d%3D%22M12.5%2013a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3zm0%201a.5.5%200%201%201%200%201%20.5.5%200%200%201%200-1z%22/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    pointer-events: none;
  }
}

/* =========================================================
   Узкие телефоны: 2 колонки + компактнее
   ========================================================= */
@media (max-width: 520px){

  :root{
    --m-act-btn: 48px;
    --m-act-ico: 24px;
    --m-cart-shift-y: 0.7px;
  }

  .popular__list,
  .viewed__list{
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .product,
  .popular__item,
  .viewed__item{
    min-width: 0 !important;
  }

  .popular .product__name{
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .popular .product__price{
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .popular .compare-label{
    font-size: 12px !important;
  }

  .popular .product__actions{
    gap: 10px !important;
    margin-top: 6px !important;
  }
}