/*
 * Мобильная адаптация. Подключается последним из index.blade.php и
 * переопределяет фиксированную десктопную сетку (1206/1245px).
 * Часть правил с !important — перебивают inline-стили из шаблонов.
 */

/* ---------- планшет и уже (снимаем фиксированную сетку) ---------- */
@media (max-width: 1244px) {

    .page,
    .banner,
    .footer,
    .footer__sticky-wrapper {
        min-width: 0 !important;
    }

    .width-wrapper,
    .widescreen .width-wrapper,
    .width-wrapperii,
    .widescreen .width-wrapperii {
        width: auto !important;
        max-width: 100%;
    }

    /* меню категорий свёрстано на фиксированном .grid 1245px,
       а .menu__categories — на 1226px (style.css) */
    .grid,
    .widescreen .grid,
    .menu__categories {
        width: auto !important;
    }

    /* контентные страницы /p/*: инлайновый <style> задаёт body 1060px
       и фиксированные обёртки */
    body {
        min-width: 0 !important;
    }

    .iwrapper,
    .content {
        width: auto !important;
        max-width: 100%;
    }

    .faq {
        float: none !important;
        width: 100% !important;
    }

    .faq__title {
        width: auto !important;
    }

    /* инлайновый padding-right: 250px резервировал место под выезжающий поиск */
    .menu__categories > div[style*="padding-right"] {
        padding-right: 0 !important;
    }

    .menu__category-trigger {
        line-height: 44px;
    }

    /* поиск: обычная строка вместо выезжающего инпута поверх категорий */
    .search {
        float: none !important;
        display: flex;
        align-items: center;
        width: auto !important;
        height: auto !important;
        margin: 8px 10px !important;
    }

    .search .search__input,
    .text-field_large.search__input {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
        flex: 1;
        box-sizing: border-box;
        box-shadow: none !important;
    }

    .search .search__button {
        position: static;
        flex: 0 0 auto;
        margin-left: 8px;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* страница товара: обёртка с inline width:1000px, фото на всю её ширину */
    .ii-product__wrapper {
        max-width: 100%;
    }

    /* одиночное фото (easyzoom — прямой ребёнок обёртки): оставить место сайдбару */
    .ii-product__wrapper > .easyzoom {
        max-width: calc(100% - 400px);
    }

    /* галерея: колонка фото с inline width:450px рядом с миниатюрами (200px) и сайдбаром */
    .ii-product__wrapper > div[style*="width: 450"] {
        width: auto !important;
        max-width: calc(100% - 640px);
    }

    .ii-product__wrapper > div[style] .easyzoom {
        max-width: 100%;
    }

    .ii-product .easyzoom img {
        max-width: 100%;
        height: auto;
    }

    /* картинка-баннер главной: центрированная обёртка с отрицательным margin */
    .ibanner81834330 .image-content-wrapper,
    .widescreen .ibanner81834330 .image-content-wrapper {
        width: 100% !important;
        left: 0 !important;
        margin-left: 0 !important;
    }
}

/* ---------- все ширины ----------
   Локально thumb() отдаёт оригиналы картинок с прода (миниатюр нет),
   на странице товара оригинал 1280px шире колонки и падает под сайдбар. */
.ii-product .easyzoom img {
    max-width: min(620px, 100%);
    height: auto;
}

/* inline-block <a> вокруг фото берёт intrinsic-ширину оригинала
   (процентный max-width картинки в этом расчёте не участвует) */
.ii-product .easyzoom a {
    max-width: 600px;
}

/* сердечко «в избранное» на странице товара: заголовок h1 (z-index:1)
   перекрывал его и перехватывал клики */
.ii-product .btn__fav {
    position: relative;
    z-index: 2;
}

/* ссылки «Скачать» под фото товара — компактной строкой */
.ii-product a[href*="shop_image/product"]:not([class]) {
    display: inline-block;
    margin: 6px 10px 0 0;
    font-size: 13px;
    color: #999;
}

/* ---------- средние ширины: absolute-блоки шапки наезжают на лого ---------- */
@media (max-width: 1140px) {

    .logo-line-wrapper {
        min-height: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
    }

    /* слоган «Интернет-магазин…» — inline style left:433px; ставим в поток под лого */
    .logo-line-wrapper > span[style] {
        position: static !important;
        display: block;
        transform: none !important;
        white-space: normal !important;
        margin-top: 4px;
    }

    .user-nav {
        position: static !important;
        float: none !important;
        display: flex;
        justify-content: center;
        gap: 14px;
        flex-wrap: wrap;
        margin: 8px 0 0;
        padding: 0;
    }

    .usermenu2 {
        position: static !important;
        display: block;
        text-align: center;
        margin: 2px 0 0;
    }

    .gender-menu {
        position: static !important;
        width: auto !important;
        float: none !important;
        margin: 8px auto 0;
        text-align: center;
    }

    .gender-menu > div {
        float: none !important;
    }

    .gender-menu table {
        width: 100% !important;
        margin: 4px 0 0 !important;
    }

    .gender-menu table td {
        text-align: center !important;
        padding: 2px 6px;
    }

    /* корзина и кабинет: двухколоночные таблицы фиксированной ширины 960/970px */
    .ii-cart .table_right-mini,
    .table.table_left-mini,
    .table_right-mini .table__table,
    .table_left-mini .table__table {
        width: 100% !important;
    }

    .ii-cart .table_right-mini .table__column_left {
        width: 62% !important;
    }

    .ii-cart .table_right-mini .table__column_right,
    .table_left-mini .table__column_left,
    .table_left-mini .table__column_right {
        width: auto !important;
    }

    /* нижняя липкая панель: ссылки и счётчик корзины наезжают друг на друга */
    .footer__sticky {
        height: auto !important;
    }

    .footer__sticky-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px 16px;
        width: auto !important;
        height: auto !important;
        padding: 6px 10px;
    }

    .footer__sticky-items,
    .footer__sticky-right {
        position: static !important;
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 14px;
    }
}

/* ---------- планшетный диапазон: карточки процентные, 4 в ряд как на десктопе ---------- */
@media (min-width: 769px) and (max-width: 1244px) {

    /* flex вместо inline-block: пробелы в разметке не ломают ряды */
    .products-catalog__list {
        display: flex;
        flex-wrap: wrap;
    }

    .products-list-item {
        width: calc(25% - 8px) !important;
        margin: 0 8px 30px 0 !important;
    }

    /* корень страницы товара тоже носит класс products-list-item */
    .ii-product.products-list-item {
        width: 100% !important;
        margin: 0 !important;
    }

    .products-list-item__img {
        width: 100% !important;
        height: auto !important;
    }

    .products-list-item__img img {
        width: 100%;
        height: auto;
    }
}

/* ---------- мобильные ---------- */
@media (max-width: 768px) {

    /* ===== шапка ===== */
    .logo-line-wrapper {
        min-height: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
    }

    .logo-line-wrapper > a img {
        max-height: 56px;
        width: auto;
    }

    /* абсолютный слоган рядом с лого — не влезает */
    .logo-line-wrapper > span[style] {
        display: none !important;
    }

    .user-nav {
        position: static !important;
        float: none !important;
        display: flex;
        justify-content: center;
        gap: 14px;
        flex-wrap: wrap;
        margin: 8px 0 0;
        padding: 0;
    }

    /* счётчик «Товаров N на сумму …» — в базе absolute, наезжает на лого */
    .usermenu2 {
        position: static !important;
        display: block;
        text-align: center;
        margin: 2px 0 0;
    }

    /* блок с телефоном и ссылками (в базе — position:absolute поверх шапки) */
    .gender-menu {
        position: static !important;
        width: auto !important;
        float: none !important;
        margin: 8px auto 0;
        text-align: center;
    }

    .gender-menu > div {
        float: none !important;
    }

    .gender-menu table {
        width: 100% !important;
        margin: 4px 0 0 !important;
    }

    .gender-menu table td {
        text-align: center !important;
        padding: 2px 6px;
    }

    /* ===== меню категорий: пункты переносятся на новые строки ===== */
    .menu__categories {
        padding: 0 10px;
    }

    .menu__categories > div[style*="padding-right"] {
        padding-right: 0 !important;
        white-space: normal;
        text-align: center;
    }

    .menu__category-trigger {
        line-height: 40px;
        font-size: 14px;
    }

    /* выпадающие колонки категорий десктопные — на мобильном без ховера */
    #menu-dropdowns {
        display: none;
    }

    /* ===== баннер главной ===== */
    .banner {
        margin-top: 0;
    }

    .ibanner81834330 {
        height: 200px !important;
    }

    .ibanner81834330__banner-link {
        height: 200px !important;
    }

    /* плитки-баннеры на главной */
    .bnr-pallete .ibanner,
    .main-trend-style .ibanner {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 15px;
    }

    /* ===== каталог ===== */
    .js-left-column-wrapper,
    .table__left-column {
        float: none !important;
        width: 100% !important;
        margin: 0 0 15px;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .table__right-column {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        /* в базе: padding-left 232px под сайдбар */
        padding-left: 0 !important;
        box-sizing: border-box;
    }

    /* карточки товаров: две в ряд */
    .products-catalog__list {
        display: flex;
        flex-wrap: wrap;
    }

    .products-list-item {
        width: calc(50% - 10px) !important;
        margin: 0 5px 25px !important;
    }

    .products-list-item__img {
        width: 100% !important;
        height: auto !important;
    }

    .products-list-item__img img {
        width: 100%;
        height: auto;
    }

    .paginator {
        text-align: center;
    }

    .paginator__num {
        margin-bottom: 6px;
        display: inline-block;
    }

    /* ===== карточка товара ===== */
    /* корень страницы товара тоже носит класс products-list-item —
       правило карточек каталога (50%) к нему применяться не должно */
    .ii-product.products-list-item {
        width: 100% !important;
        margin: 0 !important;
    }

    .ii-product__wrapper {
        display: block;
        width: auto !important;
    }

    /* обёртка галереи с inline width:450px; float:left */
    .ii-product__wrapper > div[style*="width"] {
        width: auto !important;
        float: none !important;
        max-width: 100%;
    }

    .ii-product .easyzoom {
        max-width: 100%;
    }

    .ii-product__content,
    .widescreen .ii-product__content {
        width: 100% !important;
        float: none !important;
    }

    .ii-product__aside,
    .widescreen .ii-product__aside {
        width: 100% !important;
        float: none !important;
        margin: 15px 0 0 !important;
    }

    /* ===== корзина, кабинет, избранное: двухколоночная table-раскладка ===== */
    .table_right-mini,
    .table_left-mini {
        display: block !important;
        width: 100% !important;
    }

    .table_right-mini .table__column_left,
    .table_right-mini .table__column_right,
    .table_left-mini .table__column_left,
    .table_left-mini .table__column_right {
        display: block !important;
        width: 100% !important;
    }

    .table_right-mini .table__table,
    .table_right-mini .table__row,
    .table_right-mini .table__cell,
    .table_left-mini .table__table,
    .table_left-mini .table__row,
    .table_left-mini .table__cell {
        display: block;
        width: auto !important;
        height: auto !important;
    }

    /* «висячие» лейблы формы (margin -160px) — ставим над полем */
    .checkout-form .form__widget {
        padding-left: 0 !important;
    }

    .checkout-form .form__widget-label {
        display: block;
        margin-left: 0 !important;
        width: auto !important;
        margin-bottom: 4px;
    }

    /* контент поля — inline-block, сжимается по содержимому */
    .checkout-form .form__widget-content {
        display: block !important;
        width: auto !important;
    }

    .checkout-form .text-field,
    .checkout-form .text-field_textarea {
        width: 100% !important;
        box-sizing: border-box;
    }

    .h2,
    .cart-total__price {
        width: auto !important;
    }

    h1,
    .h1 {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }

    .cart-item {
        padding: 0 10px !important;
        text-align: left !important;
    }

    /* ячейки строки товара — колонкой справа от фото */
    .cart-item__cell {
        display: block !important;
        margin-left: 100px !important;
        padding-top: 6px !important;
        width: auto !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .cart-item__cell_photo {
        float: left !important;
        margin-left: 0 !important;
        width: auto !important;
    }

    /* ===== хлебные крошки ===== */
    .breadcrumbs {
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }

    /* ===== попапы ===== */
    .popup__content {
        width: auto !important;
        max-width: 94vw;
        box-sizing: border-box;
    }

    /* JS центрирует попап инлайновым left по десктопной ширине — уезжает за экран */
    .popup__inner {
        padding: 10px;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* ===== футер ===== */
    .footer_width-wrapper {
        display: block !important;
        width: 100% !important;
    }

    /* нижняя липкая панель на мобильном не нужна */
    .footer__sticky {
        display: none !important;
    }

    /* контентные таблицы из редактора */
    .content table,
    .page-content table {
        width: 100% !important;
    }

    /* таблица истории заказов — скроллится, а не распирает страницу */
    table.orders {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* контентные страницы /p/*: инлайновый <style> в шаблоне задаёт
       body 1060px и фиксированные обёртки */
    body {
        min-width: 0 !important;
    }

    .iwrapper,
    .content {
        width: auto !important;
        max-width: 100%;
    }

    .faq {
        float: none !important;
        width: 100% !important;
    }

    .faq__title {
        width: auto !important;
    }
}

/* ---------- узкие телефоны ---------- */
@media (max-width: 400px) {

    .menu__category-trigger {
        padding: 0 7px;
        font-size: 13px;
    }

    .products-list-item {
        width: calc(50% - 6px) !important;
        margin: 0 3px 18px !important;
    }

    .user-nav {
        gap: 8px;
        font-size: 13px;
    }
}