/* ============================================================ SD HOME PRODUCTS 5 STORE SWIPE V115 Для блоков: - НОВОЕ - ПОПУЛЯРНЫЕ ТОВАРЫ Desktop: - ровно 5 полных карточек - без половинок - swipe как HOME STORES - одинаковая обводка со stores - dark / light Mobile: - существующие размеры сохраняются - native swipe остаётся ============================================================ */ /* ============================================================ ОБЩАЯ МЕХАНИКА VIEWPORT ============================================================ */ body.site-home-modern .home-popular-stage-v7{ position:relative !important; overflow:visible !important; } body.site-home-modern .home-popular-viewport-v7{ position:relative !important; width:100% !important; overflow-x:auto !important; overflow-y:hidden !important; scroll-behavior:smooth !important; scroll-snap-type:x mandatory !important; scroll-padding-left:0 !important; scroll-padding-right:0 !important; scrollbar-width:none !important; -ms-overflow-style:none !important; overscroll-behavior-x:contain !important; touch-action: pan-x pan-y pinch-zoom !important; -webkit-overflow-scrolling: touch !important; } body.site-home-modern .home-popular-viewport-v7::-webkit-scrollbar{ display:none !important; } body.site-home-modern .home-popular-track-v7{ display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important; justify-content:flex-start !important; gap:14px !important; width:max-content !important; min-width:100% !important; transform:none !important; translate:none !important; transition:none !important; animation:none !important; padding:2px 0 12px !important; } /* * Если товаров меньше либо равно количеству, * помещающемуся без скролла — центрируем, * как это сделано у магазинов. */ body.site-home-modern .home-popular-track-v7.is-centered-v115{ justify-content:center !important; } /* ============================================================ DESKTOP — РОВНО 5 ============================================================ */ @media (min-width:1181px){ body.site-home-modern .home-popular-card-v7{ /* * Ширина shell: * min(1600px, viewport - 64px) * * 5 карточек * 4 gap × 14px = 56px */ flex: 0 0 calc( ( min( var(--home-layout-width,1600px), calc( 100vw - var(--home-layout-side,64px) ) ) - 56px ) / 5 ) !important; width: calc( ( min( var(--home-layout-width,1600px), calc( 100vw - var(--home-layout-side,64px) ) ) - 56px ) / 5 ) !important; max-width: calc( ( min( var(--home-layout-width,1600px), calc( 100vw - var(--home-layout-side,64px) ) ) - 56px ) / 5 ) !important; min-width:0 !important; box-sizing:border-box !important; scroll-snap-align:start !important; scroll-snap-stop:always !important; border-radius:18px !important; } } /* ============================================================ УБИРАЕМ СТАРЫЕ КРАСНЫЕ DOTS У магазинов их нет — здесь тоже больше не нужны. ============================================================ */ body.site-home-modern .home-popular-dots-v7{ display:none !important; } /* ============================================================ DARK — ОБВОДКА КАК У "НАШИ МАГАЗИНЫ" ============================================================ */ html[data-site-theme="dark"] body.site-home-modern .home-popular-card-v7, body.site-home-modern.site-theme-dark .home-popular-card-v7{ border: 1px solid rgba(255,255,255,.18) !important; border-radius:18px !important; background: #0e0f11 !important; color:#fff !important; box-shadow: 0 12px 30px rgba(0,0,0,.22) !important; } html[data-site-theme="dark"] body.site-home-modern .home-popular-card-v7:hover, body.site-home-modern.site-theme-dark .home-popular-card-v7:hover{ transform: translateY(-3px) !important; border-color: rgba(255,255,255,.34) !important; box-shadow: 0 16px 38px rgba(0,0,0,.30) !important; } /* картинка внутри dark */ html[data-site-theme="dark"] body.site-home-modern .home-popular-media-v7, body.site-home-modern.site-theme-dark .home-popular-media-v7{ border-bottom: 1px solid rgba(255,255,255,.07) !important; background: radial-gradient( circle at 50% 42%, #18191c, #0e0f11 72% ) !important; } /* ============================================================ LIGHT — ОБВОДКА КАК У "НАШИ МАГАЗИНЫ" ============================================================ */ html[data-site-theme="light"] body.site-home-modern .home-popular-card-v7, body.site-home-modern.site-theme-light .home-popular-card-v7{ border: 1px solid rgba(20,20,20,.18) !important; border-radius:18px !important; background:#fff !important; color:#141414 !important; box-shadow: 0 10px 26px rgba(0,0,0,.045) !important; } html[data-site-theme="light"] body.site-home-modern .home-popular-card-v7:hover, body.site-home-modern.site-theme-light .home-popular-card-v7:hover{ transform: translateY(-3px) !important; border-color: rgba(20,20,20,.34) !important; box-shadow: 0 15px 34px rgba(0,0,0,.08) !important; } /* картинка внутри light */ html[data-site-theme="light"] body.site-home-modern .home-popular-media-v7, body.site-home-modern.site-theme-light .home-popular-media-v7{ border-bottom: 1px solid rgba(20,20,20,.08) !important; background: radial-gradient( circle at 50% 42%, #fff, #f3f3f1 70% ) !important; } /* ============================================================ СТРЕЛКИ СЛАЙДЕРА Они всегда выше карточек. ============================================================ */ body.site-home-modern .home-popular-nav-v7{ z-index:40 !important; } /* состояния начала / конца */ body.site-home-modern .home-popular-nav-v7:disabled{ opacity:.22 !important; pointer-events:none !important; } /* ============================================================ MOBILE / TABLET Здесь НЕ заставляем 5 карточек. Существующая адаптивная ширина остаётся. Но native swipe V115 работает и здесь. ============================================================ */ @media (max-width:1180px){ body.site-home-modern .home-popular-card-v7{ scroll-snap-align:start !important; scroll-snap-stop:always !important; } }