body.site-catalog-modern{ --catalog-shell:1600px; --catalog-side:64px; --catalog-bg:#050505; --catalog-card:#111316; --catalog-card-2:#0b0c0e; --catalog-line:rgba(255,255,255,.14); --catalog-muted:rgba(255,255,255,.56); background:var(--catalog-bg)!important; color:#fff!important; } body.site-catalog-modern .topbar{ position:sticky!important; top:0!important; z-index:1200!important; background:rgba(5,5,5,.84)!important; backdrop-filter:blur(22px) saturate(125%)!important; -webkit-backdrop-filter:blur(22px) saturate(125%)!important; border-bottom:1px solid rgba(255,255,255,.07)!important; } body.site-catalog-modern .topbar .shell, body.site-catalog-modern .catalog-modern-page.shell{ width:min(var(--catalog-shell),calc(100% - var(--catalog-side)))!important; max-width:none!important; margin-left:auto!important; margin-right:auto!important; } body.site-catalog-modern .catalog-modern-page{ padding:34px 0 72px!important; } body.site-catalog-modern .catalog-breadcrumbs{ margin:0 0 14px!important; gap:7px!important; color:rgba(255,255,255,.42)!important; } body.site-catalog-modern .catalog-breadcrumbs a{ padding:7px 11px!important; border:1px solid rgba(255,255,255,.10)!important; border-radius:999px!important; background:rgba(255,255,255,.035)!important; color:rgba(255,255,255,.72)!important; font-size:12px!important; transition:.2s ease!important; } body.site-catalog-modern .catalog-breadcrumbs a:hover{ border-color:rgba(255,40,40,.46)!important; color:#fff!important; background:rgba(255,25,25,.08)!important; } body.site-catalog-modern .catalog-page-hero{ position:relative!important; display:grid!important; grid-template-columns:minmax(0,1fr) minmax(420px,620px)!important; align-items:end!important; gap:42px!important; min-height:270px!important; margin:0 0 38px!important; padding:42px!important; overflow:visible!important; border:1px solid rgba(255,255,255,.13)!important; border-radius:24px!important; background: radial-gradient(circle at 86% 18%,rgba(239,27,36,.16),transparent 28%), linear-gradient(145deg,rgba(18,19,22,.95),rgba(7,7,8,.94))!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 22px 60px rgba(0,0,0,.28)!important; } body.site-catalog-modern .catalog-page-hero:after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.025) 35%,rgba(255,255,255,.10) 46%,rgba(255,255,255,.02) 55%,transparent 70%); background-size:230% 100%; background-position:130% 0; opacity:.35; } body.site-catalog-modern .catalog-page-hero-copy{ position:relative!important; z-index:2!important; min-width:0!important; } body.site-catalog-modern .catalog-page-kicker{ display:block!important; margin-bottom:10px!important; color:#f31d25!important; font-size:12px!important; font-weight:900!important; letter-spacing:.12em!important; text-transform:uppercase!important; } body.site-catalog-modern .catalog-page-hero .page-title{ margin:0!important; color:#fff!important; font-size:clamp(46px,5vw,76px)!important; line-height:.92!important; letter-spacing:-.035em!important; text-transform:uppercase!important; } body.site-catalog-modern .catalog-page-hero .lead{ max-width:720px!important; margin:16px 0 0!important; color:rgba(255,255,255,.62)!important; font-size:16px!important; line-height:1.5!important; } body.site-catalog-modern .catalog-page-search{ position:relative!important; z-index:20!important; display:grid!important; grid-template-columns:minmax(0,1fr) 64px!important; width:100%!important; min-width:0!important; height:64px!important; border:1px solid rgba(255,255,255,.38)!important; border-radius:10px!important; background:rgba(3,3,3,.48)!important; backdrop-filter:blur(14px)!important; -webkit-backdrop-filter:blur(14px)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important; } body.site-catalog-modern .catalog-page-search label{ min-width:0!important; height:100%!important; } body.site-catalog-modern .catalog-page-search input{ width:100%!important; height:100%!important; padding:0 19px!important; border:0!important; outline:0!important; background:transparent!important; color:#fff!important; font:inherit!important; font-size:15px!important; font-weight:800!important; } body.site-catalog-modern .catalog-page-search input::placeholder{ color:rgba(255,255,255,.40)!important; } body.site-catalog-modern .catalog-page-search button{ position:relative!important; width:64px!important; height:64px!important; min-height:0!important; padding:0!important; border:0!important; background:transparent!important; } body.site-catalog-modern .catalog-page-search button span{ position:absolute!important; left:20px!important; top:18px!important; width:17px!important; height:17px!important; border:3px solid #fff!important; border-radius:50%!important; } body.site-catalog-modern .catalog-page-search button span:after{ content:""!important; position:absolute!important; right:-8px!important; bottom:-5px!important; width:10px!important; height:3px!important; border-radius:999px!important; background:#fff!important; transform:rotate(47deg)!important; transform-origin:left center!important; } body.site-catalog-modern .catalog-page-search .live-search-panel{ left:0!important; right:0!important; top:calc(100% + 8px)!important; width:100%!important; border:1px solid rgba(255,255,255,.14)!important; border-radius:14px!important; background:rgba(10,10,11,.97)!important; color:#fff!important; box-shadow:0 22px 60px rgba(0,0,0,.42)!important; backdrop-filter:blur(20px)!important; -webkit-backdrop-filter:blur(20px)!important; } body.site-catalog-modern .section{ margin:0 0 48px!important; } body.site-catalog-modern .catalog-folders-section .section-head, body.site-catalog-modern .catalog-products-section .section-head{ margin-bottom:18px!important; } body.site-catalog-modern .catalog-folders-section .section-head h2, body.site-catalog-modern .catalog-products-section .section-head h2{ color:#fff!important; font-size:clamp(26px,2.3vw,38px)!important; line-height:1!important; letter-spacing:.02em!important; } body.site-catalog-modern .catalog-folder-grid{ display:grid!important; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important; gap:14px!important; } body.site-catalog-modern .catalog-folder-card{ position:relative!important; min-height:250px!important; display:flex!important; align-items:flex-end!important; padding:20px!important; overflow:hidden!important; border:1px solid rgba(255,255,255,.15)!important; border-radius:16px!important; background:linear-gradient(155deg,#17191c,#0c0d0f)!important; color:#fff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.22)!important; isolation:isolate!important; transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .28s ease!important; } body.site-catalog-modern .catalog-folder-card:before{ content:""; position:absolute; z-index:2; inset:35% 0 0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.78)); pointer-events:none; } body.site-catalog-modern .catalog-folder-card:after{ content:""; position:absolute; z-index:4; inset:0; pointer-events:none; background:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.02) 34%,rgba(255,255,255,.13) 45%,rgba(255,255,255,.02) 54%,transparent 70%); background-size:230% 100%; background-position:130% 0; opacity:.35; transition:background-position .65s ease,opacity .28s ease; } body.site-catalog-modern .catalog-folder-card:hover{ transform:translateY(-4px) scale(1.01)!important; border-color:rgba(255,255,255,.31)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 20px 44px rgba(0,0,0,.34)!important; } body.site-catalog-modern .catalog-folder-card:hover:after{ background-position:-115% 0!important; opacity:.62!important; } body.site-catalog-modern .catalog-folder-card img{ position:absolute!important; z-index:1!important; inset:0!important; width:100%!important; height:100%!important; padding:0!important; background:#111!important; object-fit:cover!important; transition:transform .38s cubic-bezier(.2,.8,.2,1),filter .38s ease!important; } body.site-catalog-modern .catalog-folder-card:hover img{ transform:scale(1.045)!important; } body.site-catalog-modern .catalog-folder-card span{ position:relative!important; z-index:5!important; display:block!important; max-width:calc(100% - 46px)!important; padding:0!important; color:#fff!important; font-size:clamp(18px,1.45vw,25px)!important; font-weight:900!important; line-height:1!important; letter-spacing:.015em!important; text-shadow:0 2px 12px rgba(0,0,0,.7)!important; } body.site-catalog-modern .catalog-folder-card small{ display:none!important; } body.site-catalog-modern .catalog-folder-card em{ position:absolute!important; z-index:6!important; right:14px!important; bottom:14px!important; display:grid!important; place-items:center!important; width:34px!important; height:34px!important; padding:0!important; border:1px solid rgba(255,255,255,.22)!important; border-radius:50%!important; background:rgba(8,8,8,.55)!important; color:#ff2028!important; font-size:17px!important; font-style:normal!important; font-weight:900!important; } body.site-catalog-modern .product-grid{ display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr))!important; gap:14px!important; } body.site-catalog-modern .product-card{ position:relative!important; min-width:0!important; min-height:330px!important; display:flex!important; flex-direction:column!important; gap:0!important; padding:0 0 14px!important; overflow:hidden!important; border:1px solid rgba(255,255,255,.14)!important; border-radius:15px!important; background:linear-gradient(155deg,#17191c,#0c0d0f)!important; color:#fff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.20)!important; isolation:isolate!important; transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .28s ease!important; } body.site-catalog-modern .product-card:after{ content:""; position:absolute; z-index:5; inset:0; pointer-events:none; background:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.02) 34%,rgba(255,255,255,.12) 45%,rgba(255,255,255,.02) 54%,transparent 70%); background-size:230% 100%; background-position:130% 0; opacity:.30; transition:background-position .65s ease,opacity .28s ease; } body.site-catalog-modern .product-card:hover{ transform:translateY(-4px) scale(1.012)!important; border-color:rgba(255,255,255,.30)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 20px 44px rgba(0,0,0,.34)!important; } body.site-catalog-modern .product-card:hover:after{ background-position:-115% 0!important; opacity:.58!important; } body.site-catalog-modern .product-img{ position:relative!important; height:205px!important; min-height:205px!important; margin:0 0 13px!important; border:0!important; border-radius:0!important; background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.075),transparent 58%)!important; } body.site-catalog-modern .product-img:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:38%; background:linear-gradient(180deg,transparent,rgba(0,0,0,.32)); pointer-events:none; } body.site-catalog-modern .product-img img{ width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; padding:12px!important; object-fit:contain!important; transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease!important; } body.site-catalog-modern .product-card:hover .product-img img{ transform:scale(1.045)!important; } body.site-catalog-modern .product-img>strong{ color:rgba(255,255,255,.18)!important; font-size:52px!important; letter-spacing:-.06em!important; } body.site-catalog-modern .product-card>strong, body.site-catalog-modern .product-card>em, body.site-catalog-modern .product-card>b, body.site-catalog-modern .catalog-product-stock{ position:relative!important; z-index:6!important; margin-left:14px!important; margin-right:42px!important; } body.site-catalog-modern .product-card>strong{ display:-webkit-box!important; overflow:hidden!important; min-height:34px!important; color:#fff!important; font-size:14px!important; font-weight:900!important; line-height:1.18!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; } body.site-catalog-modern .product-card>em{ display:-webkit-box!important; overflow:hidden!important; margin-top:5px!important; color:rgba(255,255,255,.48)!important; font-size:11px!important; line-height:1.2!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; } body.site-catalog-modern .product-card>b{ margin-top:10px!important; color:#fff!important; font-size:20px!important; line-height:1!important; } body.site-catalog-modern .catalog-product-stock{ display:flex!important; align-items:center!important; gap:6px!important; margin-top:auto!important; padding-top:12px!important; color:#d77b7b!important; font-size:10px!important; font-style:normal!important; font-weight:800!important; line-height:1.1!important; } body.site-catalog-modern .catalog-product-stock i{ display:block!important; width:7px!important; height:7px!important; flex:0 0 7px!important; border-radius:50%!important; background:#e33a3a!important; } body.site-catalog-modern .catalog-product-stock.is-stock{ color:#83dca0!important; } body.site-catalog-modern .catalog-product-stock.is-stock i{ background:#2fc866!important; box-shadow:0 0 10px rgba(47,200,102,.28)!important; } body.site-catalog-modern .catalog-product-arrow{ position:absolute!important; z-index:7!important; right:12px!important; bottom:12px!important; display:grid!important; place-items:center!important; width:28px!important; height:28px!important; border:1px solid rgba(255,255,255,.18)!important; border-radius:50%!important; background:rgba(8,8,8,.55)!important; color:#ff2028!important; font-size:14px!important; font-weight:900!important; } body.site-catalog-modern .html-block{ border:1px solid rgba(255,255,255,.12)!important; background:rgba(255,255,255,.04)!important; color:rgba(255,255,255,.66)!important; } body.site-catalog-modern .footer{ border-top:1px solid rgba(255,255,255,.10)!important; background:#0d0d0e!important; } @media(max-width:1450px){ body.site-catalog-modern .product-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important} } @media(max-width:1180px){ body.site-catalog-modern{--catalog-side:36px} body.site-catalog-modern .catalog-page-hero{grid-template-columns:minmax(0,1fr) minmax(360px,500px)!important;padding:34px!important} body.site-catalog-modern .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important} } @media(max-width:900px){ body.site-catalog-modern{--catalog-side:28px} body.site-catalog-modern .catalog-page-hero{grid-template-columns:1fr!important;gap:24px!important;min-height:0!important;padding:28px!important} body.site-catalog-modern .catalog-folder-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important} body.site-catalog-modern .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important} } @media(max-width:640px){ body.site-catalog-modern{--catalog-side:20px} body.site-catalog-modern .catalog-modern-page{padding:18px 0 48px!important} body.site-catalog-modern .catalog-page-hero{margin-bottom:28px!important;padding:20px!important;border-radius:18px!important;gap:20px!important} body.site-catalog-modern .catalog-page-kicker{font-size:10px!important;margin-bottom:7px!important} body.site-catalog-modern .catalog-page-hero .page-title{font-size:clamp(36px,12vw,52px)!important} body.site-catalog-modern .catalog-page-hero .lead{margin-top:10px!important;font-size:13px!important} body.site-catalog-modern .catalog-page-search{height:54px!important;grid-template-columns:minmax(0,1fr) 54px!important;border-radius:9px!important} body.site-catalog-modern .catalog-page-search input{padding:0 14px!important;font-size:14px!important} body.site-catalog-modern .catalog-page-search button{width:54px!important;height:54px!important} body.site-catalog-modern .catalog-page-search button span{left:17px!important;top:15px!important;width:15px!important;height:15px!important} body.site-catalog-modern .catalog-breadcrumbs{margin-bottom:10px!important;gap:5px!important} body.site-catalog-modern .catalog-breadcrumbs a{padding:6px 9px!important;font-size:10px!important} body.site-catalog-modern .section{margin-bottom:34px!important} body.site-catalog-modern .catalog-folders-section .section-head h2, body.site-catalog-modern .catalog-products-section .section-head h2{font-size:26px!important} body.site-catalog-modern .catalog-folder-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} body.site-catalog-modern .catalog-folder-card{min-height:170px!important;padding:13px!important;border-radius:13px!important} body.site-catalog-modern .catalog-folder-card span{max-width:calc(100% - 36px)!important;font-size:15px!important;line-height:1.05!important} body.site-catalog-modern .catalog-folder-card em{right:9px!important;bottom:9px!important;width:28px!important;height:28px!important;font-size:14px!important} body.site-catalog-modern .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} body.site-catalog-modern .product-card{min-height:285px!important;border-radius:13px!important;padding-bottom:11px!important} body.site-catalog-modern .product-img{height:150px!important;min-height:150px!important;margin-bottom:10px!important} body.site-catalog-modern .product-img img{padding:8px!important} body.site-catalog-modern .product-card>strong, body.site-catalog-modern .product-card>em, body.site-catalog-modern .product-card>b, body.site-catalog-modern .catalog-product-stock{margin-left:10px!important;margin-right:34px!important} body.site-catalog-modern .product-card>strong{min-height:30px!important;font-size:12px!important} body.site-catalog-modern .product-card>em{font-size:9px!important} body.site-catalog-modern .product-card>b{font-size:17px!important;margin-top:7px!important} body.site-catalog-modern .catalog-product-stock{font-size:8px!important;padding-top:9px!important} body.site-catalog-modern .catalog-product-arrow{right:8px!important;bottom:9px!important;width:25px!important;height:25px!important;font-size:12px!important} } @media(max-width:390px){ body.site-catalog-modern{--catalog-side:16px} body.site-catalog-modern .catalog-page-hero{padding:17px!important} body.site-catalog-modern .catalog-folder-card{min-height:154px!important} body.site-catalog-modern .product-card{min-height:270px!important} body.site-catalog-modern .product-img{height:138px!important;min-height:138px!important} } body.site-catalog-modern .catalog-modern-page{ --catalog-no-hero-v20:1; padding-top:30px!important; } body.site-catalog-modern .catalog-modern-page>.catalog-folders-section:first-of-type, body.site-catalog-modern .catalog-modern-page>.catalog-products-section:first-of-type{ margin-top:0!important; } body.site-catalog-modern .catalog-folders-section .section-head, body.site-catalog-modern .catalog-products-section .section-head{ margin-top:0!important; } body.site-catalog-modern .catalog-breadcrumbs{ margin-top:0!important; margin-bottom:22px!important; } @media(max-width:700px){ body.site-catalog-modern .catalog-modern-page{ padding-top:18px!important; } body.site-catalog-modern .catalog-folders-section .section-head, body.site-catalog-modern .catalog-products-section .section-head{ margin-bottom:14px!important; } body.site-catalog-modern .catalog-breadcrumbs{ margin-bottom:14px!important; } } /* ============================================================ CATALOG CATEGORIES THEME + CENTER V73 ============================================================ */ /* ============================================================ DESKTOP — РОВНО 4 В СТРОКЕ ============================================================ */ body.site-catalog-modern .catalog-folder-grid{ /* * FLEX вместо GRID нужен специально: * justify-content:center центрирует * неполный последний ряд. */ display:flex!important; flex-wrap:wrap!important; justify-content:center!important; align-items:stretch!important; gap:14px!important; width:100%!important; } body.site-catalog-modern .catalog-folder-grid > .catalog-folder-card{ /* * 4 карточки * + 3 промежутка по 14px. */ flex: 0 0 calc((100% - 42px) / 4)!important; width: calc((100% - 42px) / 4)!important; max-width: calc((100% - 42px) / 4)!important; min-width:0!important; } /* * Результат: * * 8: * [1][2][3][4] * [5][6][7][8] * * 10: * [1][2][3][4] * [5][6][7][8] * [9][10] * * 11: * [1][2][3][4] * [5][6][7][8] * [9][10][11] */ /* ============================================================ DARK CARD ============================================================ */ html[data-site-theme="dark"] body.site-catalog-modern .catalog-folder-card, body.site-theme-dark.site-catalog-modern .catalog-folder-card{ background: linear-gradient( 155deg, #17191c, #0c0d0f )!important; border-color: rgba(255,255,255,.15)!important; color:#fff!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px rgba(0,0,0,.22)!important; } html[data-site-theme="dark"] body.site-catalog-modern .catalog-folder-card img, body.site-theme-dark.site-catalog-modern .catalog-folder-card img{ background:#111!important; } html[data-site-theme="dark"] body.site-catalog-modern .catalog-folder-card:before, body.site-theme-dark.site-catalog-modern .catalog-folder-card:before{ background: linear-gradient( 180deg, transparent, rgba(0,0,0,.78) )!important; } html[data-site-theme="dark"] body.site-catalog-modern .catalog-folder-card span, body.site-theme-dark.site-catalog-modern .catalog-folder-card span{ color:#fff!important; -webkit-text-fill-color:#fff!important; text-shadow: 0 2px 12px rgba(0,0,0,.7)!important; } html[data-site-theme="dark"] body.site-catalog-modern .catalog-folder-card em, body.site-theme-dark.site-catalog-modern .catalog-folder-card em{ background: rgba(8,8,8,.68)!important; border-color: rgba(255,255,255,.22)!important; color:#ff2028!important; } /* ============================================================ LIGHT CARD ============================================================ */ html[data-site-theme="light"] body.site-catalog-modern .catalog-folder-card, body.site-theme-light.site-catalog-modern .catalog-folder-card{ background:#fff!important; border-color: rgba(17,17,17,.22)!important; color:#111!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 14px 34px rgba(0,0,0,.09)!important; } html[data-site-theme="light"] body.site-catalog-modern .catalog-folder-card img, body.site-theme-light.site-catalog-modern .catalog-folder-card img{ /* * Сама картинка меняется через JS. * Здесь только фон под ней. */ background:#fff!important; filter:none!important; } /* * В LIGHT не кладём тяжёлый чёрный * градиент поверх светлой картинки. */ html[data-site-theme="light"] body.site-catalog-modern .catalog-folder-card:before, body.site-theme-light.site-catalog-modern .catalog-folder-card:before{ background: linear-gradient( 180deg, transparent 50%, rgba(255,255,255,.06) 66%, rgba(255,255,255,.30) 100% )!important; } /* * Если название находится поверх картинки, * оно становится тёмным. */ html[data-site-theme="light"] body.site-catalog-modern .catalog-folder-card span, body.site-theme-light.site-catalog-modern .catalog-folder-card span{ color:#111!important; -webkit-text-fill-color:#111!important; text-shadow: 0 1px 7px rgba(255,255,255,.88)!important; } html[data-site-theme="light"] body.site-catalog-modern .catalog-folder-card em, body.site-theme-light.site-catalog-modern .catalog-folder-card em{ background: rgba(255,255,255,.94)!important; border-color: rgba(0,0,0,.15)!important; color:#ed1717!important; box-shadow: 0 5px 15px rgba(0,0,0,.09)!important; } /* ============================================================ HOVER ============================================================ */ html[data-site-theme="light"] body.site-catalog-modern .catalog-folder-card:hover, body.site-theme-light.site-catalog-modern .catalog-folder-card:hover{ border-color: rgba(0,0,0,.36)!important; box-shadow: 0 20px 42px rgba(0,0,0,.14)!important; } html[data-site-theme="dark"] body.site-catalog-modern .catalog-folder-card:hover, body.site-theme-dark.site-catalog-modern .catalog-folder-card:hover{ border-color: rgba(255,255,255,.31)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 20px 44px rgba(0,0,0,.34)!important; } /* ============================================================ SECTION TITLE ALSO FOLLOWS THEME ============================================================ */ html[data-site-theme="light"] body.site-catalog-modern .catalog-folders-section .section-head h2, body.site-theme-light.site-catalog-modern .catalog-folders-section .section-head h2{ color:#111!important; } html[data-site-theme="dark"] body.site-catalog-modern .catalog-folders-section .section-head h2, body.site-theme-dark.site-catalog-modern .catalog-folders-section .section-head h2{ color:#fff!important; } /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:900px){ body.site-catalog-modern .catalog-folder-grid > .catalog-folder-card{ flex: 0 0 calc((100% - 28px) / 3)!important; width: calc((100% - 28px) / 3)!important; max-width: calc((100% - 28px) / 3)!important; } } @media(max-width:640px){ body.site-catalog-modern .catalog-folder-grid{ gap:10px!important; } body.site-catalog-modern .catalog-folder-grid > .catalog-folder-card{ flex: 0 0 calc((100% - 10px) / 2)!important; width: calc((100% - 10px) / 2)!important; max-width: calc((100% - 10px) / 2)!important; } } @media(max-width:390px){ body.site-catalog-modern .catalog-folder-grid > .catalog-folder-card{ flex-basis:100%!important; width:100%!important; max-width:100%!important; } } /* ============================================================ CATALOG REMOVE WHITE SIDE EDGES V74 ============================================================ */ /* * Убираем любые старые боковые маски/блики, * которые дают белые полосы по краям карточки. */ body.site-catalog-modern .catalog-folder-card::before, body.site-catalog-modern .catalog-folder-card::after{ mask:none!important; -webkit-mask:none!important; clip-path:none!important; border-radius:inherit!important; pointer-events:none!important; } /* * Сам декоративный overlay не должен вылезать * белым за левый/правый край. */ body.site-catalog-modern .catalog-folder-card{ overflow:hidden!important; } /* * Изображение чуть растягиваем до самых краёв, * чтобы не появлялся светлый зазор между img и рамкой. */ body.site-catalog-modern .catalog-folder-card img{ position:absolute!important; top:-1px!important; right:-1px!important; bottom:-1px!important; left:-1px!important; width:calc(100% + 2px)!important; height:calc(100% + 2px)!important; max-width:none!important; object-fit:cover!important; border-radius:inherit!important; } /* * На LIGHT тоже не даём белому overlay * формировать боковые "ушки". */ html[data-site-theme="light"] body.site-catalog-modern .catalog-folder-card::before, body.site-theme-light.site-catalog-modern .catalog-folder-card::before{ inset:0!important; border-radius:inherit!important; box-shadow:none!important; } /* * DARK — то же самое. */ html[data-site-theme="dark"] body.site-catalog-modern .catalog-folder-card::before, body.site-theme-dark.site-catalog-modern .catalog-folder-card::before{ inset:0!important; border-radius:inherit!important; box-shadow:none!important; } /* * Если старый ::after использовался как shine/mask, * полностью отключаем именно в каталоге. */ body.site-catalog-modern .catalog-folder-card::after{ content:none!important; display:none!important; } /* * Рамка остаётся нормальной и ровной. */ body.site-catalog-modern .catalog-folder-card{ border-style:solid!important; background-clip: padding-box!important; } /* ============================================================ CATALOG CATEGORY IMAGE SIDE CROP V74.1 Серые вертикальные линии находятся В САМОМ изображении. Поэтому не маскируем CSS — физически обрезаем края картинки. ============================================================ */ /* * Карточка остаётся рамкой/маской. */ body.site-catalog-modern .catalog-folder-card{ position:relative!important; overflow:hidden!important; isolation:isolate!important; } /* * Картинку расширяем влево и вправо примерно на 18px. * * Было условно: * * | линия ИЗОБРАЖЕНИЕ линия | * * Станет: * * | ИЗОБРАЖЕНИЕ | * * линии физически оказываются за пределами карточки. */ body.site-catalog-modern .catalog-folder-card img.catalog-category-theme-image-v73, body.site-catalog-modern .catalog-folder-card > img{ position:absolute!important; top:0!important; bottom:0!important; left:-18px!important; right:-18px!important; width:calc(100% + 36px)!important; height:100%!important; max-width:none!important; object-fit:cover!important; object-position:center center!important; border:0!important; outline:0!important; border-radius:0!important; transform:none!important; z-index:0!important; } /* * Если у изображения есть wrapper/media, * он тоже не должен показывать выход за края. */ body.site-catalog-modern .catalog-folder-card [class*="media"]{ overflow:hidden!important; border-radius:inherit!important; } /* * Текст и стрелка гарантированно поверх изображения. */ body.site-catalog-modern .catalog-folder-card > span, body.site-catalog-modern .catalog-folder-card > small, body.site-catalog-modern .catalog-folder-card > em, body.site-catalog-modern .catalog-folder-card > strong{ position:relative!important; z-index:4!important; } /* * Декоративный затемняющий слой также остаётся * поверх изображения, но под текстом. */ body.site-catalog-modern .catalog-folder-card::before{ z-index:2!important; pointer-events:none!important; } /* * Никаких боковых декоративных псевдоэлементов. */ body.site-catalog-modern .catalog-folder-card::after{ display:none!important; content:none!important; } /* ============================================================ LIGHT / DARK — одинаковая геометрия картинки ============================================================ */ html[data-site-theme="light"] body.site-catalog-modern .catalog-folder-card img, html[data-site-theme="dark"] body.site-catalog-modern .catalog-folder-card img, body.site-theme-light.site-catalog-modern .catalog-folder-card img, body.site-theme-dark.site-catalog-modern .catalog-folder-card img{ left:-18px!important; right:-18px!important; width:calc(100% + 36px)!important; height:100%!important; max-width:none!important; object-fit:cover!important; object-position:center!important; } /* ============================================================ CATALOG CATEGORY ARROW BOTTOM RIGHT V75 ============================================================ */ /* * Карточка — система координат для стрелки. */ body.site-catalog-modern .catalog-folder-card{ position:relative!important; } /* * Красная стрелка перехода: * всегда правый нижний угол. */ body.site-catalog-modern .catalog-folder-card > em{ position:absolute!important; right:14px!important; bottom:14px!important; left:auto!important; top:auto!important; width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; margin:0!important; padding:0!important; display:grid!important; place-items:center!important; border-radius:50%!important; color:#ed1717!important; font-style:normal!important; font-size:23px!important; font-weight:900!important; line-height:1!important; z-index:20!important; pointer-events:none!important; transform:none!important; translate:none!important; white-space:nowrap!important; } /* ============================================================ LIGHT ============================================================ */ html[data-site-theme="light"] body.site-catalog-modern .catalog-folder-card > em, body.site-theme-light.site-catalog-modern .catalog-folder-card > em{ background: rgba(255,255,255,.94)!important; border: 1px solid rgba(0,0,0,.14)!important; color:#ed1717!important; box-shadow: 0 7px 18px rgba(0,0,0,.11)!important; } /* ============================================================ DARK ============================================================ */ html[data-site-theme="dark"] body.site-catalog-modern .catalog-folder-card > em, body.site-theme-dark.site-catalog-modern .catalog-folder-card > em{ background: rgba(12,12,12,.82)!important; border: 1px solid rgba(255,255,255,.22)!important; color:#ff1c24!important; box-shadow: 0 7px 18px rgba(0,0,0,.28)!important; } /* ============================================================ HOVER ============================================================ */ body.site-catalog-modern .catalog-folder-card:hover > em{ transform: translateX(2px) scale(1.07)!important; transition: transform .22s ease, border-color .22s ease, background .22s ease!important; } /* ============================================================ MOBILE ============================================================ */ @media(max-width:640px){ body.site-catalog-modern .catalog-folder-card > em{ right:10px!important; bottom:10px!important; width:36px!important; height:36px!important; min-width:36px!important; min-height:36px!important; font-size:20px!important; } }