@media (max-width:640px){
    #brand_info_popup .bi-logo{width:100%;}
}

/* отключаем zoom-по-наведению на сенсорных экранах — там нет полноценного hover */
@media (hover:none){
    .usc-zoom-target img.usc-zoom-active{transform:none!important;}
    .usc-zoom-spinner{display:none!important;}
}

@media (max-width:1024px){
    .usc-root .usc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:768px){
    .usc-root{padding:12px 0;}
    /* иконка-подсказка "удержать пальцем" - только на мобильном (на десктопе используется
       мышь, там нет жеста long-press, поэтому по умолчанию скрыта в базовых стилях) */
    .usc-hold-hint{display:flex!important;}
    /* все кнопки закрытия по сайту - на мобильном увеличиваем до 50x50, иначе тяжело
       попасть пальцем (в десктопной версии они меньше, там наводится курсором точнее) */
    .bi-close,
    .cp-close,
    .image-lightbox-close,
    .manager_contact_close,
    .product-modal-close,
    .usc-cart-popup-close,
    .usc-edit-close,
    .usc-filter-mobile-close,
    .usc-simple-lightbox-close{
        width:50px!important;height:50px!important;
        display:flex!important;align-items:center;justify-content:center;
    }
    /* кнопка закрытия формы редактирования на мобильном выросла до 50px (top:16px ->
       нижний край ~66px) - десктопного отступа сверху (48px) уже не хватает, форма
       наезжала бы на кнопку */
    .usc-edit-form-wrap{padding-top:74px;}
    /* Лайтбокс "Фото дефекта" на мобильном - раньше фото открывалось в почти исходном
       размере (max-height:74vh как на десктопе), из-за чего комментарий и миниатюры снизу
       могли не влезать на короткий экран - скролл внутри лайтбокса не предусмотрен, значит
       эти элементы просто обрезались бы. Теперь: контейнер занимает всю высоту экрана,
       фото сжимается (flex:1, min-height:0) под РЕАЛЬНО оставшееся место, комментарий и
       миниатюры занимают снизу ровно столько, сколько им нужно - и то, и другое гарантированно
       помещается на экран без скролла. Сверху отступ под кнопку закрытия, чтобы фото её не перекрывало. */
    .image-lightbox{padding:0;}
    .image-lightbox-inner{width:100%;height:100%;max-height:100%;
        padding:calc(60px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
        box-sizing:border-box;justify-content:flex-start;}
    .image-lightbox-inner img{flex:1 1 auto;min-height:0;max-width:100%;max-height:none;width:auto;}
    .image-lightbox-caption{flex-shrink:0;margin-top:10px;max-width:100%;max-height:22vh;
        overflow-y:auto;font-size:13px;padding:10px 14px;}
    /* в быстром просмотре фото название - сверху, а не снизу (см. .usc-quick-photo-preview в desktop-css) */
    .image-lightbox.usc-quick-photo-preview .image-lightbox-caption{margin-top:0;margin-bottom:10px;}
    .image-lightbox-thumbs{flex-shrink:0;margin-top:10px;width:100%;max-width:100%;flex-wrap:nowrap;
        overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
        justify-content:center;padding-bottom:4px;}
    .image-lightbox-thumbs::-webkit-scrollbar{display:none;}
    /* если миниатюры не помещаются целиком (нужен скролл) - выравниваем от начала, а не
       по центру, иначе первая миниатюра окажется "обрезана" слева и до неё не долистать */
    .image-lightbox-thumbs.usc-thumbs-overflow{justify-content:flex-start;}
    /* flex:0 0 44px (не просто width) - у .image-lightbox-inner img чуть выше задан
       flex:1 1 auto (растягивать фото на весь лайтбокс), а flex-grow по умолчанию не
       переопределяется одним только width - миниатюры "утекали" в него и растягивались,
       деля между собой свободное место (особенно заметно при 2 миниатюрах) */
    .image-lightbox-thumbs img{flex:0 0 44px;width:44px;height:44px;}

    /* для админов на мобильном в модалке товара текст "В корзину" не помещается рядом
       с админскими кнопками (редактировать/дублировать/скрыть) и сбивает высоту всего
       ряда - оставляем только иконку. :has() определяет "это админ" по наличию кнопки
       редактирования в том же контейнере модалки. */
    .product-modal-info:has(#pmEditBtn) #pmAddBasketBtn .usc-modal-btn-text{display:none;}
    /* когда уже выбрали "В корзину" - вместо иконки-кнопки появляется степпер (удалить/-/
       количество/+/перейти в корзину), который сам по себе шире, и рядом с админскими
       кнопками (редактировать/дублировать/снять с публикации) они все вместе уже не
       помещаются в один ряд. Класс usc-stepper-active добавляется на .product-modal-info
       тем же кодом (initQtyStepper/showStepper), что и на карточках в сетке каталога. */
    .product-modal-info.usc-stepper-active .pm-admin-actions{
        display:flex;flex-basis:100%;justify-content:flex-end;gap:10px;margin-top:8px;
    }
    .usc-root .usc-page-title{font-size:21px;padding:0 12px;margin-bottom:10px;}
    .usc-root .usc-breadcrumb{padding:0 12px;margin-top:-4px;}
    .usc-root .usc-page{flex-direction:column;padding:0 12px;gap:12px;}
    .usc-root .usc-results-count{padding:0 12px;}

    /* фильтр становится выдвижной шторкой слева */
    .usc-root .usc-filter{position:fixed;top:0;left:-100%;width:85%;max-width:340px;height:100vh;
        z-index:10003;overflow-y:auto;border-radius:0;transition:left .25s ease;padding:16px;}
    @supports (height: 100dvh) {
        .usc-root .usc-filter{height:100dvh;}
    }
    .usc-root .usc-filter.usc-open{left:0;}
    .usc-filter-mobile-btn{display:flex;}
    .usc-filter-mobile-btn span{display:none;}
    .usc-filter-mobile-btn{width:44px;height:44px;padding:0;gap:0;justify-content:center;}
    .usc-filter-mobile-header{display:flex;}
    .usc-filter-mobile-close{display:flex;}
    .usc-root .usc-filter-apply-row.usc-sticky{position:sticky;left:auto!important;width:auto!important;
        bottom:0;box-shadow:0 -4px 12px rgba(0,0,0,.08);margin:16px -16px -16px;padding:12px 16px;
        padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));}

    .usc-root .usc-toolbar{flex-wrap:wrap;gap:8px;}
    /* переключатель вида (плитка/список) - всегда справа от поиска, на одной строке с ним;
       остальное (экспорт/фильтры/сортировка/избранное) - строкой ниже */
    .usc-root .usc-search-wrap{flex:1 1 auto;order:1;}
    .usc-root .usc-view-toggle{order:2;}
    .usc-export-icon-btn{order:3;}
    .usc-filter-mobile-btn{order:4;}
    .usc-root .usc-sort{order:5;flex:1;}
    .usc-root .usc-sort-btn{width:100%;justify-content:space-between;}
    .usc-root .usc-fav-toggle{order:6;}

    .usc-root .usc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .usc-root .usc-card{min-height:auto;padding:10px;}
    .usc-root .usc-card h3{font-size:13px;min-height:34px;}
    .usc-root .usc-card img.usc-main-img,.usc-root .usc-card .usc-img-placeholder{height:120px;}
    .usc-root .usc-card .usc-row,.usc-root .usc-card .usc-row-split-item{font-size:11px;}
    .usc-root .usc-card .usc-price-value{font-size:13px;}
    .usc-root .usc-card .usc-contact-manager-btn{font-size:12px;padding:8px;}
    .usc-root .usc-card .usc-sale-photo-link{font-size:11px;}

    .usc-root .usc-grid.usc-view-list .usc-card{padding:10px 10px 10px 104px;min-height:110px;overflow:hidden;}

    /* На сенсорных экранах нет hover — кнопки избранного и "поделиться" на мобильном показываем
       всегда, в отдельном ряду рядом с "Связь с менеджером"/"В корзину" — работает одинаково
       и в плитке, и в списке. Порядок кнопок задан через order (без изменения HTML):
       избранное -> поделиться -> кнопка действия — кнопка действия последняя, ближе к правому
       краю/пальцу. */
    .usc-root .usc-card .usc-img-wrap .usc-fav-btn{display:none;}
    .usc-root .usc-card .usc-img-wrap .usc-card-share-btn{display:none;}
    .usc-root .usc-card .usc-card-bottom-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
    .usc-root .usc-card .usc-card-bottom-row .usc-contact-manager-btn{flex:1;margin-top:0;min-width:0;width:auto;order:3;}
    .usc-root .usc-card .usc-card-bottom-row .usc-basket-control{order:3;}
    .usc-root .usc-card .usc-card-bottom-row .usc-qty-row{flex:1;align-items:center;justify-content:center;margin-top:0;min-width:0;order:3;}
    .usc-root .usc-card .usc-fav-btn.usc-fav-btn-inline,
    .usc-root .usc-card .usc-card-share-btn.usc-card-share-btn-inline{display:flex;position:static;opacity:1;
        width:32px;height:32px;flex-shrink:0;background:#fff;border:1px solid #ddd;border-radius:6px;
        box-shadow:none;align-items:center;justify-content:center;padding:0;}
    .usc-root .usc-card .usc-fav-btn.usc-fav-btn-inline{order:1;}
    .usc-root .usc-card .usc-card-share-btn.usc-card-share-btn-inline{order:2;}
    .usc-root .usc-card .usc-admin-actions-group{order:4;}
    .usc-root .usc-card .usc-fav-btn.usc-fav-btn-inline svg,
    .usc-root .usc-card .usc-card-share-btn.usc-card-share-btn-inline svg{width:18px;height:18px;}
    .usc-root .usc-card .usc-fav-btn.usc-fav-btn-inline.usc-fav-active{border-color:#e02424;background:#fdecec;}
    .usc-root .usc-card .usc-card-share-btn.usc-card-share-btn-inline:hover{border-color:#1e8e3e;}
    .usc-root .usc-card .usc-card-share-btn.usc-card-share-btn-inline svg{color:#666;}
    .usc-root .usc-card .usc-card-share-btn.usc-card-share-btn-inline:hover svg,
    .usc-root .usc-card .usc-card-share-btn.usc-card-share-btn-inline.usc-share-copied-state svg{color:#1e8e3e;}

    /* единый размер (32x32 для всех кнопок-иконок, 36x32 для поля ввода количества) и
       выравнивание по одному уровню - для избранного/поделиться/степпера/кнопки корзины/удаления,
       одинаково и в плитке, и в списке. */
    .usc-root .usc-card .usc-qty-btn,
    .usc-root .usc-card .usc-goto-cart-btn,
    .usc-root .usc-card .usc-remove-from-cart-btn{width:32px;height:32px;}
    .usc-root .usc-card .usc-qty-input{width:36px;height:32px;}
    .usc-root .usc-card .usc-qty-stepper{height:32px;align-items:center;}

    .usc-root .usc-grid.usc-view-list .usc-row-price{flex-wrap:wrap;row-gap:2px;}
    .usc-root .usc-grid.usc-view-list .usc-row-price > span{flex-wrap:wrap;min-width:0;}
    .usc-root .usc-grid.usc-view-list .usc-price-old{white-space:normal;}
    .usc-root .usc-grid.usc-view-list .usc-img-wrap{top:10px;left:10px;width:80px;overflow:visible;}
    .usc-root .usc-grid.usc-view-list .usc-card .usc-discount-badge{display:none;}
    .usc-root .usc-grid.usc-view-list .usc-card .usc-discount-badge-price{display:inline-block;}
    .usc-root .usc-grid.usc-view-list .usc-card .usc-category-badges{position:absolute;top:100%;right:auto;
        left:0;width:80px;margin-top:4px;flex-direction:column;align-items:center;max-width:80px;}
    .usc-root .usc-grid.usc-view-list .usc-card .usc-category{font-size:9px;padding:1px 6px;}
    .usc-root .usc-grid.usc-view-list .usc-img-wrap .usc-main-img,
    .usc-root .usc-grid.usc-view-list .usc-img-wrap .usc-img-placeholder{height:80px;}
    /* в списочном режиме фото маленькое (80x80) - обычные размеры иконок его перекрывали бы,
       уменьшаем до 14x14. Уточняем через .usc-img-wrap - чтобы НЕ задеть inline-версию
       иконки удержания (та, что рядом с "Фото дефекта") - она должна остаться 22x22 */
    .usc-root .usc-grid.usc-view-list .usc-card .usc-img-wrap .usc-fullscreen-hint,
    .usc-root .usc-grid.usc-view-list .usc-card .usc-img-wrap .usc-hold-hint{width:14px;height:14px;border-radius:3px;}
    .usc-root .usc-grid.usc-view-list .usc-card .usc-img-wrap .usc-fullscreen-hint{right:26px;}
    .usc-root .usc-grid.usc-view-list .usc-card .usc-img-wrap .usc-fullscreen-hint svg{width:9px;height:9px;}
    /* right у fullscreen-hint сдвинут на 26px, но right у hold-hint остался базовым (34px) -
       при уменьшенном размере иконок (14px вместо 18px) это давало перекрытие, сдвигаем
       hold-hint дальше (34px ширина fullscreen-hint от края + его смещение 26 + зазор 4) */
    .usc-root .usc-grid.usc-view-list .usc-card .usc-img-wrap .usc-hold-hint{right:44px;}
    .usc-root .usc-grid.usc-view-list .usc-card .usc-img-wrap .usc-hold-hint svg{width:11px;height:10px;}

    /* списочный режим, ТОЛЬКО когда показан степпер (товар уже в корзине) - в этом случае
       [удалить][-1+][корзина] заметно шире одной кнопки "В корзину" и не влезает в общий ряд
       вместе с "поделиться"/"избранное". Освобождаем место - кнопку "избранное" сдвигаем под
       фото по горизонтали (без изменения её размера), центрируя под 80px колонкой фото;
       обычная кнопка "В корзину"/"Связь с менеджером" (степпер ещё не показан) не затронута -
       для неё избранное остаётся на обычном месте в ряду. */
    .usc-root .usc-grid.usc-view-list .usc-card.usc-stepper-active .usc-fav-btn.usc-fav-btn-inline{
        position:absolute;top:auto;left:14px;bottom:10px;order:0;}
    .usc-root .usc-grid.usc-view-list .usc-card.usc-stepper-active .usc-card-share-btn.usc-card-share-btn-inline{
        position:absolute;top:auto;left:54px;bottom:10px;order:0;}
    .usc-root .usc-grid.usc-view-list .usc-card h3{font-size:13px;}

    .usc-root .usc-history-track{gap:10px;}
    .usc-root .usc-history-item{flex:0 0 calc((100% - 2 * 10px) / 3)!important;}
    .usc-root .usc-history-carousel{padding:0 34px;}
    .usc-root .usc-history-arrow{width:30px;height:30px;}

    .usc-modal-history .usc-history-track{gap:10px;}
    .usc-modal-history .usc-history-item{flex:0 0 calc((100% - 1 * 10px) / 2)!important;}
    .usc-modal-similar-inline{display:block;}

    .product-modal{width:100%;max-width:100%;height:100%;max-height:100%;top:0;left:0;transform:none;
        border-radius:0;}
    .product-modal-body{padding:16px;gap:16px;}
    .product-modal-gallery{width:100%;}
    .product-modal-main-img{height:240px;}
    .product-modal-info h2{font-size:17px;padding-right:36px;}
    .product-modal-variants.show{grid-template-columns:repeat(2,1fr);}
    .product-modal-description{padding:0 16px 16px;}
    .usc-modal-history{padding:0 16px 16px;}
    .usc-modal-history .usc-history-carousel{padding:0 30px;}

    #manager_contact_popup,#category_picker_popup{width:92vw;padding:20px;}
    #brand_info_popup{padding:20px;}
    #brand_info_popup .bi-body{flex-direction:column;}
    #brand_info_popup .bi-logo{width:100%;}

    .usc-scroll-top{width:42px;height:42px;}

    /* админская строка (статус/"создать по артикулу"/export/import) - без переноса и с
       текстовыми подписями на узком экране не помещается вообще (проявилось при добавлении
       кнопки Import - раньше было теснее, но ещё влезало). Перенос строк как страховка +
       скрываем подписи "Export"/"Import" на мобильном, оставляем только иконки - тот же
       приём, что уже используется у .usc-filter-mobile-btn. */
    .usc-root .usc-admin-toolbar-row{flex-wrap:wrap;row-gap:8px;}
    .usc-root .usc-export-btn{padding:0;width:44px;height:44px;justify-content:center;flex-shrink:0;}
    .usc-root .usc-export-btn span{display:none;}

    /* меню сортировки (и такое же у админского переключателя статуса) раскрывается от
       левого края кнопки с минимум 220px - на узком экране сама кнопка часто уже 220px
       (делит строку с другими кнопками тулбара), меню вылезало бы за правый край экрана.
       Разворачиваем от правого края кнопки вместо левого - остаётся в пределах экрана
       независимо от того, насколько узкая сама кнопка. */
    .usc-root .usc-sort-menu{left:auto;right:0;}
}

@media (max-width:480px){
    .usc-root .usc-grid{grid-template-columns:1fr;}
    .usc-root .usc-grid.usc-view-list .usc-card{padding:10px 10px 10px 104px;overflow:hidden;}
    .usc-root .usc-history-item{flex:0 0 calc((100% - 1 * 10px) / 2)!important;}
    .usc-modal-history .usc-history-item{flex:0 0 100%!important;}
    .product-modal-main-img{height:200px;}
}