/* ============ ДИЗАЙН-СИСТЕМА ВИТРИН CreatorStore v3 (MODERN) ============ */
body[style*="--accent"]{--accent-dark:color-mix(in srgb,var(--accent) 78%,#000);--accent-soft:color-mix(in srgb,var(--accent) 12%,#fff)}
body[style*="--accent"] .cart-add-btn{background-color:var(--accent)!important}
body[style*="--accent"] .cart-add-btn:hover{background-color:var(--accent-dark)!important}
body[style*="--accent"] #checkout-submit-btn{background-color:var(--accent)!important}
body[style*="--accent"] #checkout-submit-btn:hover{background-color:var(--accent-dark)!important}
body[style*="--accent"] #checkout-open-btn{background-color:var(--accent)!important}
body[style*="--accent"] #checkout-open-btn:hover{background-color:var(--accent-dark)!important}

/* Гарантируем видимость кнопки корзины на странице товара после загрузки JS */
body.cart-js-ready .cart-add-btn,
body.cart-js-ready #mobile-add-to-cart,
body.cart-js-ready #desktop-add-to-cart {
    visibility: visible !important;
    opacity: 1 !important;
}

.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)}

/* Сайдбар: липкий, скроллится колесиком, но ПОЛНОСТЬЮ БЕЗ полосы прокрутки */
.sidebar-sticky-wrapper {
position: sticky;
top: 68px;
max-height: calc(100vh - 68px);
overflow-y: auto;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.sidebar-sticky-wrapper::-webkit-scrollbar {
display: none !important;
width: 0 !important;
background: transparent !important;
}
@media (min-width: 1024px) {
.sidebar-sticky-wrapper {
top: 68px;
max-height: calc(100vh - 68px);
}
}
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;
padding-bottom: 4px !important;
margin-bottom: 8px !important;
}
}
@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 450px;
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: 300px 400px;
}
#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;
}
.p-card .cart-add-btn {
visibility: hidden !important;
}
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;
}
@media (max-width: 768px) {
.bottom-nav, .mobile-bottom-nav, nav[class*="bottom"], .fixed.bottom-0, [class*="bottom-nav"] {
z-index: 900 !important;
bottom: 0 !important;
}
}
/* МОБИЛЬНАЯ ВЕРСИЯ - МАКСИМАЛЬНО КОМПАКТНО */
@media (max-width: 768px) {
main.max-w-\[1600px\] {
padding-left: 4px !important;
padding-right: 4px !important;
}
#products-grid {
gap: 4px !important;
}
.p-card {
padding: 0 !important;
border-radius: 6px !important;
overflow: hidden;
}
.p-card .gallery img,
.p-card img.w-full {
aspect-ratio: 1 / 1.2 !important;
object-fit: cover !important;
width: 100% !important;
height: auto !important;
}
.p-card > div.flex.flex-col.gap-1 {
gap: 4px !important;
padding: 6px !important;
}
.p-card .text-sm.md\:text-\[17px\] {
font-size: 16px !important;
line-height: 1.2 !important;
}
.p-card h3 {
font-size: 14px !important;
line-height: 1.4 !important;
margin: 0 !important;
}
.p-card .flex.items-center.gap-1\.5,
.p-card .mt-0\.5 {
margin-top: 3px !important;
}
.p-card .text-\[11px\] {
font-size: 12px !important;
}
.p-card .cart-add-btn {
padding: 9px 4px !important;
font-size: 13px !important;
margin-top: 5px !important;
border-radius: 4px !important;
}
.p-card .inline-flex.shrink-0.ml-auto svg {
width: 15px !important;
height: 15px !important;
}
.p-card .bg-gray-100 {
padding: 3px 7px !important;
font-size: 11px !important;
margin-top: 2px !important;
}
}
@media (max-width: 768px) {
#mobile-sticky-controls {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
transform: translateY(0);
opacity: 1;
position: sticky;
top: 64px;
z-index: 39;
}
#mobile-sticky-controls.hidden-scroll {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
}
}
.js-submenu-popup {
position: fixed !important;
z-index: 9999 !important;
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
padding: 8px 16px;
width: 220px;
max-height: 320px;
overflow-y: auto;
animation: submenuFadeIn 0.15s ease-out;
pointer-events: auto;
}
.js-submenu-popup::-webkit-scrollbar {
width: 4px;
}
.js-submenu-popup::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 999px;
}
@keyframes submenuFadeIn {
from { opacity: 0; transform: translateX(-8px); }
to { opacity: 1; transform: translateX(0); }
}
.js-submenu-popup a {
display: block;
padding: 8px 12px;
font-size: 14px;
color: #374151;
border-radius: 8px;
transition: all 0.15s;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.js-submenu-popup a:hover {
background: #f3f4f6;
color: #2563eb;
}
.js-submenu-popup a.active-subcat {
background: #eff6ff;
color: #1d4ed8;
font-weight: 600;
}
@media (min-width: 1024px) {
.sidebar-sticky-wrapper .group > div.hidden.lg\:group-hover\:block {
display: none !important;
}
}