.scrollbar-hide::-webkit-scrollbar{display:none}
.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}
.gallery-track{scroll-snap-type:x mandatory;scrollbar-width:none}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track>*{scroll-snap-align:center}
.no-delivery-line{position:absolute;left:-3px;right:-3px;top:50%;margin-top:-1.5px;height:3px;background:#dc2626;border-radius:2px}
.dot.on{width:20px;background:#fff}
#sb-search:focus{outline:none}
.sb-suggest{position:absolute;z-index:50;margin-top:6px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.12);overflow:hidden;display:none}
.sb-suggest.open{display:block}
.sb-suggest a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14px;color:#111827}
.sb-suggest a:hover{background:#f3f4f6}
.sb-suggest .s-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-suggest .s-price{color:#6b7280;font-size:12px;font-weight:600;white-space:nowrap}
.fav-btn svg{transition:all .2s}
.fav-btn.active svg{fill:#ef4444;stroke:#ef4444;transform:scale(1.15)}

#size-color-modal { position: fixed; inset: 0; z-index: 99998; display: none; align-items: center; justify-content: center; padding: 16px; }
#size-color-modal:not(.hidden) { display: flex; }
#size-color-modal .sc-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
#size-color-modal .sc-dialog { position: relative; background: #fff; border-radius: 16px; padding: 24px; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 50px rgba(0,0,0,0.25); }
@media (max-width: 640px) { #size-color-modal .sc-dialog { padding: 20px; max-width: 100%; border-radius: 14px; } }

.sc-size-btn { 
	display: inline-flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
	min-width: 48px; 
	padding: 6px 8px 4px; 
	border: 1.5px solid #e5e7eb; 
	border-radius: 8px; 
	background: #fff; 
	cursor: pointer; 
	transition: all .15s; 
	line-height: 1.1;
	white-space: nowrap;
}
.sc-size-btn:hover:not(:disabled) { border-color: #9ca3af; }
.sc-size-btn.active { background: #eff6ff; }
.sc-size-btn:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.sc-size-btn .sz-label { font-size: 9px; color: #6b7280; font-weight: 500; }
.sc-size-btn .sz-value { font-size: 13px; font-weight: 700; color: #111827; }
.sc-size-btn .sz-stock { font-size: 9px; color: #16a34a; font-weight: 600; }
.sc-size-btn.active .sz-label { color: #1d4ed8; }
.sc-size-btn.active .sz-value { color: #1d4ed8; }

#sc-sizes {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
}
#sc-sizes::-webkit-scrollbar { display: none; }

.cart-swatch{width:26px;height:26px;border-radius:50%;border:2px solid #e5e7eb;cursor:pointer;transition:all .15s;flex-shrink:0;padding:0}
.cart-swatch:hover{transform:scale(1.12)}
.cart-swatch.on{border-color:#2563eb;box-shadow:#2563eb}
.cart-size{border:1.5px solid #d1d5db;background:#fff;color:#111827;border-radius:8px;padding:4px 9px;font-size:11.5px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:baseline;gap:4px;flex-shrink:0}
.cart-size:hover{border-color:#9ca3af}
.cart-size.on{border-color:#2563eb;background:#eff6ff;color:#1d4ed8}
.cart-size:disabled{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.cart-size .cs-l{font-size:9px;color:#6b7280;font-weight:500}
.cart-size.on .cs-l{color:#1d4ed8}

/* === ИСПРАВЛЕНИЕ СКРОЛЛА САЙДБАРА ФИЛЬТРОВ === */
.lg\:block.w-64.shrink-0.sticky.top-4.self-start > div {
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding-right: 4px;
}
.lg\:block.w-64.shrink-0.sticky.top-4.self-start > div::-webkit-scrollbar {
	width: 4px;
}
.lg\:block.w-64.shrink-0.sticky.top-4.self-start > div::-webkit-scrollbar-track {
	background: transparent;
}
.lg\:block.w-64.shrink-0.sticky.top-4.self-start > div::-webkit-scrollbar-thumb {
	background-color: #d1d5db;
	border-radius: 999px;
}
.lg\:block.w-64.shrink-0.sticky.top-4.self-start > div::-webkit-scrollbar-thumb:hover {
	background-color: #9ca3af;
}
.lg\:block.w-64.shrink-0.sticky.top-4.self-start > div {
	scrollbar-width: thin;
	scrollbar-color: #d1d5db transparent;
}

/* ============================================
   🚀 МОБИЛЬНЫЙ ПЛАВНЫЙ СКРОЛЛ И ЛИПКИЙ БЛОК
   ============================================ */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-padding-top: 80px;
}
body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}

/* ============================================
   🚀 МОБИЛЬНЫЙ ПЛАВНЫЙ СКРОЛЛ И ЛИПКИЙ БЛОК
   ============================================ */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-padding-top: 80px;
}
body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}

/* 🔥 ЛИПКИЙ БЛОК УПРАВЛЕНИЯ - МАКСИМАЛЬНО КОМПАКТНЫЙ НА МОБИЛЬНЫХ */
#mobile-sticky-controls {
    position: -webkit-sticky;
    position: sticky;
    top: 64px; 
    z-index: 40;
    background-color: #f9fafb; 
    transform: translateZ(0);
    will-change: transform;
}

/* ПРИНУДИТЕЛЬНО УМЕНЬШАЕМ ОТСТУПЫ НА МОБИЛЬНЫХ И ПЛАНШЕТАХ */
@media (max-width: 1023px) {
    #mobile-sticky-controls {
        padding-top: 4px !important;     /* было 8px (pt-2) */
        padding-bottom: 4px !important;  /* было 12px (pb-3) */
        margin-bottom: 8px !important;   /* было 16px (mb-4) */
    }
}

/* На десктопе возвращаем нормальные отступы */
@media (min-width: 1024px) {
    #mobile-sticky-controls {
        position: static;
        top: auto;
        z-index: auto;
        background-color: transparent;
        transform: none;
        will-change: auto;
    }
}

#products-grid {
    will-change: contents;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.p-card {
    content-visibility: auto;
    contain-intrinsic-size: 0 380px; 
    contain: layout style paint;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}
@media (max-width: 768px) {
    .p-card {
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
        transition: none !important;
    }
    .p-card:hover {
        transform: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    }
}
.gallery-track {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: scroll-position;
}
.p-card img {
    content-visibility: auto;
    contain-intrinsic-size: 200px 200px;
}
#filters-drawer {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
#filters-drawer .overflow-y-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
#products-loader {
    transform: translateZ(0);
    will-change: opacity;
}

/* Скрываем кнопки корзины в карточках до инициализации JS */
.p-card .cart-add-btn {
    visibility: hidden !important;
}

/* Показываем когда JS готов */
body.cart-js-ready .p-card .cart-add-btn {
    visibility: visible !important;
}

/* Улучшаем горизонтальный скролл тегов фильтров на мобильных */
#active-filters-container {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#active-filters-container::-webkit-scrollbar {
    display: none;
}