/* ============================================================ HOME PRODUCTS REAL STABLE FRAME V118 Используем РОВНО тот же принцип, который уже работает у категорий: - обычный border карточки становится прозрачным; - настоящая рамка рисуется через ::before; - ::before лежит НАД изображением; - ::before лежит НАД бликом; - hover не может убрать рамку; - DARK / LIGHT; - свайп и 5 карточек НЕ меняются. ============================================================ */ /* ============================================================ 1. ОСНОВА ============================================================ */ body.site-home-modern .home-popular-card-v7{ position:relative !important; /* * 1px оставляем в геометрии карточки, * но это больше НЕ визуальная рамка. */ border: 1px solid transparent !important; outline: 0 !important; box-sizing: border-box !important; isolation: isolate !important; } /* ============================================================ 2. НАСТОЯЩАЯ РАМКА ВАЖНО: home-popular-card-v7::before раньше в проекте вообще нигде не используется. Поэтому этот слой свободен именно под frame. ============================================================ */ body.site-home-modern .home-popular-card-v7::before{ content:"" !important; display:block !important; position:absolute !important; /* * У категорий используется z-index:90. * Здесь делаем точно так же. */ z-index:90 !important; inset:0 !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; pointer-events:none !important; border-style:solid !important; border-width:1px !important; border-radius:inherit !important; box-sizing:border-box !important; background:transparent !important; box-shadow:none !important; opacity:1 !important; transform:none !important; transition:none !important; } /* ============================================================ 3. DARK Точная логика stable frame категорий. ============================================================ */ html[data-site-theme="dark"] body.site-home-modern .home-popular-card-v7::before, body.site-home-modern.site-theme-dark .home-popular-card-v7::before{ border-color: rgba(255,255,255,.17) !important; } /* * HOVER НЕ МЕНЯЕТ РАМКУ. */ html[data-site-theme="dark"] body.site-home-modern .home-popular-card-v7:hover::before, body.site-home-modern.site-theme-dark .home-popular-card-v7:hover::before, html[data-site-theme="dark"] body.site-home-modern .home-popular-card-v7:focus-visible::before{ border-color: rgba(255,255,255,.17) !important; opacity:1 !important; } /* ============================================================ 4. LIGHT Так же, как уже сделано для категорий. ============================================================ */ html[data-site-theme="light"] body.site-home-modern .home-popular-card-v7::before, body.site-home-modern.site-theme-light .home-popular-card-v7::before{ border-color: rgba(18,18,18,.34) !important; } html[data-site-theme="light"] body.site-home-modern .home-popular-card-v7:hover::before, body.site-home-modern.site-theme-light .home-popular-card-v7:hover::before, html[data-site-theme="light"] body.site-home-modern .home-popular-card-v7:focus-visible::before{ border-color: rgba(18,18,18,.34) !important; opacity:1 !important; } /* ============================================================ 5. SAFE AREA СВЕРХ У категорий эта зона УЖЕ есть в card-frame-stable-v106-5.css. У товаров её не было. Добавляем только вертикальное пространство. Ширину viewport НЕ меняем. Поэтому 5 целых карточек остаются 5 целыми. ============================================================ */ body.site-home-modern .home-popular-viewport-v7{ padding-top: 12px !important; padding-bottom: 15px !important; /* * Компенсация, чтобы секция визуально * не стала выше. */ margin-top: -9px !important; margin-bottom: -8px !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; } /* ============================================================ 6. HOVER Теперь карточку можно снова слегка поднять, как магазины/категории. Рамка уже не исчезнет, потому что: 1) есть место сверху; 2) frame рисуется отдельным верхним слоем. Масштаб всей карточки специально НЕ делаем, чтобы не портить 5 целых карточек по краям. ============================================================ */ @media (hover:hover) and (pointer:fine){ body.site-home-modern .home-popular-card-v7:hover{ transform: translate3d( 0, -3px, 0 ) !important; box-shadow: 0 18px 40px rgba(0,0,0,.30) !important; } /* * Картинка продолжает жить отдельно. */ body.site-home-modern .home-popular-card-v7:hover .home-popular-media-v7 img{ transform: scale(1.055) !important; } } /* ============================================================ 7. СТАРЫЙ БЛИК ОСТАЁТСЯ ::after уже используется под shine. Frame через ::before лежит выше него: shine = z-index 5 frame = z-index 90 ============================================================ */ body.site-home-modern .home-popular-card-v7::after{ z-index: 5 !important; } /* ============================================================ 8. СТРЕЛКА ТОВАРА Она должна быть выше frame, как стрелки у категорий. ============================================================ */ body.site-home-modern .home-popular-card-v7 .home-popular-arrow-v7{ z-index: 100 !important; } /* ============================================================ 9. RADIUS Одинаковый для самой карточки и frame. ============================================================ */ body.site-home-modern .home-popular-card-v7{ border-radius: 18px !important; } body.site-home-modern .home-popular-card-v7::before{ border-radius: 18px !important; } /* ============================================================ 10. TOUCH На телефоне не оставляем зависший :hover. ============================================================ */ @media (hover:none){ body.site-home-modern .home-popular-card-v7{ transform: none !important; } } /* ============================================================ 11. MOBILE Только уменьшаем безопасную вертикальную зону. Ширину карточек не меняем. ============================================================ */ @media(max-width:700px){ body.site-home-modern .home-popular-viewport-v7{ padding-top: 8px !important; padding-bottom: 11px !important; margin-top: -6px !important; margin-bottom: -6px !important; } body.site-home-modern .home-popular-card-v7, body.site-home-modern .home-popular-card-v7::before{ border-radius: 13px !important; } }