/* Слой нового стиля (html.v2). ФАЙЛ СОБРАН tools/v2/build_v2css.py — руками не править:
ручные правила лежат в tools/v2/manual.css, перекраска выводится из main.css и шаблонов. */
/* ---------- фон и рамки: 202 правил, из них перекрашено 105 ---------- */
html.v2 .popup_Notify{background:rgb(23 32 43 / 61%)}
html.v2 .popup_Notify:after{background-color:#161616b3}
html.v2 .wrapperMega{background:rgb(23 32 43 / 50%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .wrapperMega .btnSelect.active{background:rgb(23 32 43 / 50%)}
html.v2 .topSellingCheats{background:rgb(23 32 43 / 50%)}
html.v2 .socialMediaBlock .socialMediaCard{border:2px solid rgb(255 255 255 / 8%);background:rgb(23 32 43 / 50%)}
html.v2 body{background:rgb(10 14 19 / 1)}
html.v2 .supportblock{background:rgb(23 32 43 / 50%);border:1px solid rgb(255 255 255 / 8%) !important}
html.v2 .supportblock a{background:rgb(23 32 43 / 50%)}
html.v2 .supportblock a:hover{background:rgb(44 49 61)}
html.v2 input{border:none;background:0}
html.v2 input:disabled{background:#141518 !important;border-color:#141518 !important}
html.v2 .modal-wrapper .modal .input i{background:#242932}
html.v2 .modal-wrapper .modal input.custom{border:2px solid #242932}
html.v2 .modal-wrapper .modal.select-buy .blocks .right-block{background:#242932}
html.v2 .modal-wrapper .modal.send-review .input i{background:#ffffff0a}
html.v2 .notification-wrapper-note i{background:#0080Ea;background:-webkit-linear-gradient(to right, #006dc7, #0080Ea);background:linear-gradient(to right, #006dc7, #0080Ea)}
html.v2 main tbody tr::after{background:rgba(255, 255, 255, 0.05)}
html.v2 #tickets tbody tr::after{background:rgba(255, 255, 255, 0.05)}
html.v2 main tbody tr.checked{background:rgba(35, 37, 42, .2)}
html.v2 #tickets tbody tr tbody tr.checked{background:rgba(35, 37, 42, .2)}
html.v2 header{background:rgb(23 32 43 / 61%)}
html.v2 header.header_showed{border-bottom:1px solid #7a4c83}
html.v2 #header-wrapper::before{background:url(/img/sdgsa.jpg);background-size:cover}
html.v2 #header-wrapper::after{background:-webkit-gradient(linear, left top, left bottom, from(rgb(10 14 19 / 0)), color-stop(95%, rgb(10 14 19 / 1)));background:linear-gradient(180deg, rgb(10 14 19 / 0) 0%, rgb(10 14 19 / 1) min(95%, 760px))}
html.v2 #header-wrapper .content .pre-title i{background:#0080Ea}
html.v2 header .btn i{border-right:1px solid #ac7ecb}
html.v2 #header-wrapper .content .btns .btn i{border-right:1px solid #ac7ecb}
html.v2 #header-wrapper .content .btns .btn.gray i{border:none}
html.v2 #header-wrapper .advantages{background:rgb(23 32 43 / 61%);border:2px solid rgb(255 255 255 / 8%)}
html.v2 #header-wrapper .advantages .advantage .icon i::before{background:linear-gradient(to right, rgb(23 32 43 / 1), #0080ea);-webkit-background-clip:text;background-clip:text}
html.v2 #header-wrapper .advantages .advantage .icon i::after{background:linear-gradient(to right, rgb(23 32 43 / 1), #0080ea);-webkit-background-clip:text;background-clip:text}
html.v2 #header-wrapper .carousel .product{background:rgb(23 32 43 / 18%);border:solid 2px rgb(255 255 255 / 8%)}
html.v2 #products .products .product-wrapper .product{background:rgb(23 32 43 / 18%);border:solid 2px rgb(255 255 255 / 8%)}
html.v2 #header-wrapper .carousel .product .m-img{background-position:50%;background-size:cover;background-image:radial-gradient(120% 120% at 100% 0%, rgb(0 128 234 / 22%), transparent 55%), linear-gradient(135deg, rgb(17 24 33 / 1) 0%, rgb(10 14 19 / 1) 60%, rgb(0 81 148 / 40%) 100%)}
html.v2 #products .products .product-wrapper .product .m-img{background-position:50%;background-size:cover;background-image:radial-gradient(120% 120% at 100% 0%, rgb(0 128 234 / 22%), transparent 55%), linear-gradient(135deg, rgb(17 24 33 / 1) 0%, rgb(10 14 19 / 1) 60%, rgb(0 81 148 / 40%) 100%)}
html.v2 #products.cheats .products .product-wrapper .product:hover{border-color:#0080Ea}
html.v2 #products.cheats .products .product-wrapper .product.active{border-color:#0080Ea}
html.v2 #products.cheats .products .product-wrapper .product .info-block .count-products{background:rgb(23 32 43 / 90%)}
html.v2 #product .content .main-info .left-block .carousel .screens .item{border:2px solid rgba(255, 255, 255, .2)}
html.v2 #product .content .main-info .left-block .carousel .screens .item.active{border-color:#fff}
html.v2 #product .content .main-info .left-block .carousel .screens .item:hover{border-color:#fff}
html.v2 #product .content .system-recom-block .functions-wrapper-block{background:rgb(23 32 43 / 50%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 #product .content .system-recom-block .blocks .block-recom i.main{background:rgb(32 28 35);border-bottom:2px solid #3a363f}
html.v2 #product .content .main-info .right-block{background:rgb(23 32 43 / 50%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 #product .content .main-info .accept-order{background:rgb(23 32 43 / 50%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel{background:rgb(23 32 43 / 50%);border-bottom:2px solid rgb(255 255 255 / 8%)}
html.v2 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel.active{border-bottom:2px solid #0080Ea}
html.v2 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel.active i{background:#0080Ea;background:-webkit-linear-gradient(to right, #006dc7, #0080Ea);background:linear-gradient(to right, #006dc7, #0080Ea);-webkit-background-clip:text;background-clip:text}
html.v2 #product .content .main-info .right-block .warning i{background:#272c34}
html.v2 #product .content .info-page .reviews .send-review i.fa-solid.fa-message{background:rgb(26 27 33 / 50%)}
html.v2 #tickets .content.select .block .go-send .input i{background:rgb(39, 43, 52, .5)}
html.v2 footer{background:rgb(23 32 43 / 29%)}
html.v2 #products.cheats-status .product::after{background:-webkit-gradient(linear, left top, left bottom, from(rgba(33, 36, 41, 0)), color-stop(90%, #191a1e)) !important;background:linear-gradient(1deg, rgba(33, 36, 41, 0) 0%, #191a1e 80%) !important}
html.v2 #products.cheats-status .products .product-wrapper .product::before{background:rgba(0, 0, 0, .6)}
html.v2 header .navbar-nav .dropdown-faqOther{background:rgb(23 32 43 / 1);border:1px solid rgba(32, 34, 43, 0.1)}
html.v2 header .navbar-nav .change-lang .dropdown-lang{background:rgb(17 24 33 / 1);border:1px solid rgba(32, 34, 43, 0.1)}
html.v2 #product-wrapper.tickets.terms.faq .content .faq-blocks .faq-wrapper .faq{background:rgb(23 32 43 / 50%)}
html.v2 #product-wrapper.tickets.terms.faq .content .faq-blocks .faq-wrapper .faq:hover{background:rgb(23 32 43 / 70%)}
html.v2 #product-wrapper.tickets.terms.news .content .news-block-wrapper{background:rgb(23 32 43 / 75%)}
html.v2 #product-wrapper.tickets.terms.news .content .news-block-header p i{background:0;-webkit-background-clip:#fff;background-clip:#fff}
html.v2 .search-products-wrapper{background:rgb(10 14 19 / 1)}
html.v2 .search-products-wrapper .search-products-input{background:hsla(0, 0%, 100%, .05)}
html.v2 .search-products-wrapper .search-products-input i{border-right:1px solid hsla(0, 0%, 100%, .08)}
html.v2 .search-products-wrapper .search-products-recoms-wrapper{background:hsla(0, 0%, 100%, .05)}
html.v2 .search-products-wrapper .search-products-recoms-wrapper .search-products-recoms .search-products-recom{border:2px solid rgb(255 255 255 / 8%)}
html.v2 .search-products-wrapper .search-products-recoms-wrapper .search-products-recoms .search-products-recom:hover{background:rgb(23 32 43 / 70%)}
html.v2 .search-products-wrapper .search-products-recoms-wrapper .search-products-list .search-product-item:hover{background:rgb(23 32 43 / 70%)}
html.v2 .search-products-wrapper .search-products-recoms-wrapper .search-products-list .search-product-item .search-product-item-img{background:rgb(23 32 43 / 70%)}
@media screen and (min-width: 768px){html.v2 .modal.cart .product{border-bottom:1px solid rgb(35 30 40 / 70%)}}
@media screen and (min-width: 768px){html.v2 .modal.history-payment .product{border-bottom:1px solid rgb(35 30 40 / 70%)}}
@media screen and (max-width: 768px){html.v2 .modal.cart .product{border-bottom:1px solid rgb(35 30 40 / 70%)}}
@media screen and (max-width: 768px){html.v2 .modal.history-payment .product{border-bottom:1px solid rgb(35 30 40 / 70%)}}
html.v2 .modal.cart .product:nth-last-child(2){border-bottom:0}
@media screen and (min-width: 768px){html.v2 .modal.cart .product .product-count input{border-top:2px solid rgb(32 28 35);border-bottom:2px solid #0080Ea}}
@media screen and (min-width: 768px){html.v2 .modal.accept-email input{border-top:2px solid rgb(32 28 35);border-bottom:2px solid #0080Ea}}
@media screen and (max-width: 768px){html.v2 .modal.cart .product .product-count input{border-top:2px solid rgb(32 28 35);border-bottom:2px solid #0080Ea}}
@media screen and (max-width: 768px){html.v2 .modal.accept-email input{border-top:2px solid rgb(32 28 35);border-bottom:2px solid #0080Ea}}
html.v2 .modal.cart .footer .email input:not([type=radio]){border-bottom:2px solid #3a363f;background:#0c090b}
html.v2 .modal.cart .footer .promocode input:not([type=radio]){border-bottom:2px solid #3a363f;background:#0c090b}
html.v2 .modal.login .email input{border-bottom:2px solid #3a363f;background:#0c090b}
html.v2 .modal.accept-email input{border-bottom:2px solid #3a363f;background:#0c090b}
html.v2 .modal.cart .footer .promocode input:disabled{background:#0080Ea !important;background:-webkit-linear-gradient(to right, #006dc7, #0080Ea) !important;background:linear-gradient(to right, #006dc7, #0080Ea) !important}
html.v2 .modal.login .email input{background:rgba(32, 28, 35, .2)}
html.v2 .modal.accept-email input{border:0 !important;border-bottom:2px solid #3a363f !important;background:#0c090b}
html.v2 .modal.history-payment .product:last-child{border:none}
html.v2 body{background-image:radial-gradient(1200px 600px at 50% -10%, rgba(0,128,234,.10), transparent 60%),
radial-gradient(900px 500px at 100% 15%, rgb(23 32 43 / .35), transparent 55%);background-attachment:fixed}
@media (prefers-reduced-motion: no-preference){html.v2 #products .products .product-wrapper .product:hover{border-color:rgb(0 128 234 / 55%)}}
html.v2 #header-wrapper::after{background:radial-gradient(58% 58% at 18% 40%, rgb(0 128 234 / 16%), transparent 60%),
linear-gradient(180deg, rgb(10 14 19 / 0) 0%, rgb(10 14 19 / 1) min(95%, 760px))}
html.v2 #header-wrapper .advantages{border-top:1px solid rgb(0 128 234 / 35%)}
html.v2 #products.cheats .products .product-wrapper .product .info-block .count-products{background:rgb(10 14 19 / 62%);border:1px solid currentColor}
html.v2 .pmeta__chip{background:rgb(23 32 43 / 32%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .pinfo__panel{background:rgb(23 32 43 / 50%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .pinfo__meta{background:rgb(23 32 43 / 26%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .blockFunctional .func-cat{background:rgb(23 32 43 / 30%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .blockFunctional .func-cat:hover{border-color:rgb(0 128 234 / 45%)}
html.v2 .blockFunctional .func-cat__inner{border-top:1px solid rgb(255 255 255 / 8%)}
html.v2 .blockFunctional .func-subgroup{border-top:1px solid rgb(255 255 255 / 8%)}
html.v2 .blockFunctional .func-cat__inner > .func-subgroup:first-child{border-top:0}
html.v2 #header-wrapper .hero-trust__chip{background:rgb(23 32 43 / 42%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 #header-wrapper .hero-social__link{background:rgb(23 32 43 / 35%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 #header-wrapper .hero-social__link:hover{border-color:rgb(0 128 234 / 55%);background:rgb(0 128 234 / 16%)}
html.v2 .topSellingCheats .hero-rec__scrim{background:linear-gradient(180deg, rgb(10 14 19 / .12) 0%, rgb(10 14 19 / .46) 46%, rgb(10 14 19 / .9) 100%)}
html.v2 .search-products-wrapper{background:rgb(10 14 19 / .82) !important}
html.v2 .search-products-wrapper .search-products-input{background:rgb(23 32 43 / 30%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .search-products-wrapper .search-products-input:focus-within{border-color:rgba(10, 157, 255, .55);background:rgb(23 32 43 / 40%)}
html.v2 .search-products-wrapper .search-products-recoms-wrapper{background:rgb(23 32 43 / 22%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .search-products-wrapper .search-products-recoms-wrapper .search-products-list .search-product-item:hover{background:rgba(10, 157, 255, .12)}
html.v2 .search-products-wrapper .search-products-recoms .search-products-recom{background:rgba(255, 255, 255, .05);border:1px solid rgba(255, 255, 255, .1)}
html.v2 .search-products-wrapper .search-products-recoms .search-products-recom:hover{background:rgba(10, 157, 255, .14);border-color:rgba(10, 157, 255, .45)}
@supports ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))){html.v2 #header-wrapper::after{background:radial-gradient(58% 58% at 18% 40%, rgb(0 128 234 / 16%), rgba(0, 0, 0, 0) 60%)}}
html.v2 #product .content .main-info .right-block .pgal__main{background:rgb(23 32 43 / 30%)}
html.v2 #product .content .main-info .right-block .pgal__zoom{background:rgb(17 24 33 / 62%);border:1px solid rgb(255 255 255 / 14%)}
html.v2 #product .content .main-info .right-block .pgal__strip::-webkit-scrollbar-track{background:rgb(23 32 43 / 30%)}
html.v2 #product .content .main-info .right-block .pgal__strip::-webkit-scrollbar-thumb{background:rgb(0 128 234 / 55%)}
html.v2 #product .content .main-info .right-block .pgal__strip .item{border:1px solid rgb(255 255 255 / 8%)}
html.v2 #product .content .main-info .right-block .pgal__strip .item:hover{border-color:#0a9dff}
html.v2 #product .content .main-info .right-block .pgal__strip .item.active{border-color:#0a9dff}
html.v2 body{background-image:none}
html.v2 body::before{background-image:radial-gradient(1200px 600px at 50% -10%, rgba(0,128,234,.10), transparent 60%),
radial-gradient(900px 500px at 100% 15%, rgb(23 32 43 / .35), transparent 55%)}
html.v2 .bcover{background:radial-gradient(130% 130% at 15% 0%, var(--c1, rgb(23 32 43 / 1)), var(--c2, rgb(17 24 33 / 1)))}
html.v2 #product .content .main-info .accept-order{background:rgb(17 24 33 / 88%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 #product .content .main-info .right-block{background:rgb(17 24 33 / 88%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 #product .content .main-info .pinfo__panel{background:rgb(17 24 33 / 88%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 #product .supportblock{background:rgb(17 24 33 / 88%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel{background:rgb(17 24 33 / 92%);border:1px solid rgb(255 255 255 / 6%);border-bottom:1px solid rgb(255 255 255 / 6%)}
html.v2 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel:hover{border-color:rgb(0 128 234 / 45%)}
html.v2 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel.active{background:rgb(0 128 234 / 13%);border-color:rgb(0 128 234 / 62%)}
html.v2 #product .wrapperMega{background:rgb(17 24 33 / 88%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 #product .content .main-info .right-block .scr::after{background:linear-gradient(90deg, rgb(17 24 33 / 0%), rgb(17 24 33 / 92%))}
html.v2 #product .content .main-info .right-block .pgal__strip::-webkit-scrollbar-track{background:rgb(255 255 255 / 6%)}
html.v2 #product .content .main-info .right-block .pgal__strip::-webkit-scrollbar-thumb{background:rgb(0 128 234 / 45%)}
html.v2 #products.cheats .products .product-wrapper.is-unavail .product:hover{border-color:rgb(255 255 255 / 14%)}
html.v2 #product .accept-order .so-alt{background:rgb(17 24 33 / 92%);border:1px solid rgb(255 255 255 / 6%)}
html.v2 #product .accept-order .so-alt:hover{border-color:rgb(0 128 234 / 60%)}
html.v2 .form-control{background-color:rgb(10 14 19 / 1);border-color:rgb(255 255 255 / 8%)}
html.v2 .form-control:focus{background-color:rgb(10 14 19 / 1);border-color:#246bf4 !important}
html.v2 .modal-content{border:0 !important;background-color:rgb(10 14 19 / 1)}
html.v2 .form-control:focus{border-color:#3862eb !important}
html.v2 header .navbar-nav .menu a.rcnav-link:hover{background:rgba(255,255,255,.06)}
html.v2 header .navbar-nav .menu a.rcnav-link::after{background:#0a9dff}
html.v2 .rcstat{background:rgb(23 32 43 / 26%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .rcstat:hover{border-color:rgba(10,157,255,.45);background:rgb(23 32 43 / 36%)}
html.v2 .e404__games a{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
html.v2 .e404__games a:hover{background:rgba(10,157,255,.12);border-color:rgba(10,157,255,.5)}
html.v2 .about h2::before{background:linear-gradient(180deg,#0a9dff,#005ba1)}
html.v2 .about__num{background:rgb(23 32 43 / 22%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .about__cta{border:1px solid rgb(255 255 255 / 8%);background:linear-gradient(180deg,rgba(10,157,255,.08),rgba(10,157,255,.03))}
html.v2 .about__cta a{background:linear-gradient(180deg,#0a9dff,#0069c2)}
html.v2 .blog-card__img::after{background:linear-gradient(180deg,rgb(10 14 19 / 0) 45%,rgb(10 14 19 / .55))}
html.v2 .bcover{background:radial-gradient(130% 130% at 15% 0%,var(--c1,rgb(23 32 43 / 1)),var(--c2,rgb(17 24 33 / 1)))}
html.v2 .post__cover::after{background:linear-gradient(180deg,rgb(10 14 19 / .05),rgb(10 14 19 / .3))}
html.v2 .post-body h2::before{background:linear-gradient(180deg,#0a9dff,#005ba1)}
html.v2 .post-body li::before{background:#0a9dff}
html.v2 .post-cta{border:1px solid rgb(255 255 255 / 8%);background:linear-gradient(180deg,rgba(10,157,255,.08),rgba(10,157,255,.03))}
html.v2 .post-cta a{background:linear-gradient(180deg,#0a9dff,#0069c2)}
html.v2 .coop h2::before{background:linear-gradient(180deg,#0a9dff,#005ba1)}
html.v2 .coop__card{background:rgb(23 32 43 / 22%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .coop__steps li::before{background:rgb(0 128 234 / 12%);border:1px solid rgb(0 128 234 / 28%)}
html.v2 .coop__cta{border:1px solid rgb(255 255 255 / 8%);background:linear-gradient(180deg,rgba(10,157,255,.08),rgba(10,157,255,.03))}
html.v2 .coop__cta a{background:linear-gradient(180deg,#0a9dff,#0069c2)}
html.v2 .hubnav a{background:rgb(23 32 43 / 22%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .hubnav a:hover{border-color:rgba(10,157,255,.45);background:rgb(23 32 43 / 34%)}
html.v2 .hubnav a.on{border-color:rgba(10,157,255,.6);background:rgb(10 157 255 / 12%)}
html.v2 #product-wrapper.tickets.terms.faq .content .add-new-faq-container input{border:2px solid rgb(35 30 40 / 70%);background:rgba(0,0,0,0.5)}
html.v2 #product-wrapper.tickets.terms.faq .content .faq-blocks .faq-wrapper.create-wrapper .faq{border:2px dashed #0080ea}
html.v2 #product-wrapper.tickets.terms.faq .content .faq-blocks .faq-wrapper.create-wrapper input{border:1px solid rgb(35 30 40 / 70%);background:rgba(0,0,0,0.5)}
html.v2 .game-content h2::before{background:linear-gradient(180deg,#0a9dff,#005ba1)}
html.v2 .game-content li::before{background:#0a9dff}
html.v2 .pay h2::before{background:linear-gradient(180deg,#0a9dff,#005ba1)}
html.v2 .pay-card{background:rgb(23 32 43 / 20%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .pay-card:hover{border-color:rgba(10,157,255,.4);background:rgb(23 32 43 / 30%)}
html.v2 .pay-steps li::before{background:rgba(10,157,255,.12);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .rc-guar__item{background:rgb(23 32 43 / 18%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .rc-about h2{border-bottom:1px solid rgb(255 255 255 / 8%)}
html.v2 .rc-about td{border-bottom:1px solid rgb(255 255 255 / 8%)}
@media (max-width:560px){html.v2 .rc-about td{border:0}}
@media (max-width:560px){html.v2 .rc-about tr{border-bottom:1px solid rgb(255 255 255 / 8%)}}
html.v2 .rc-rel__bar{border-bottom:1px solid rgb(255 255 255 / 8%)}
html.v2 .rc-rel__arrow{border:1px solid rgb(255 255 255 / 8%);background:rgb(23 32 43 / 32%)}
html.v2 .rc-rel__arrow:hover{background:rgb(9 162 255 / 22%);border-color:rgb(9 162 255 / 55%)}
html.v2 .rc-rel__row::-webkit-scrollbar-track{background:rgb(23 32 43 / 15%)}
html.v2 .rc-rel__row::-webkit-scrollbar-thumb{background:rgb(23 32 43 / 75%)}
html.v2 .rc-rel__row::-webkit-scrollbar-thumb:hover{background:rgb(9 162 255 / 55%)}
html.v2 .rc-rel__card{background:rgb(23 32 43 / 18%);border:2px solid rgb(255 255 255 / 8%)}
html.v2 .rc-rel__card:hover{border-color:rgb(9 162 255 / 55%)}
html.v2 .rc-rel__media::after{background:linear-gradient(180deg,rgb(10 14 19 / 0) 55%,rgb(10 14 19 / 48%) 100%)}
html.v2 .stx-sum button{background:rgb(23 32 43 / 22%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .stx-sum button:hover{border-color:rgba(10,157,255,.45)}
html.v2 .stx-sum button.on{border-color:rgba(10,157,255,.65);background:rgb(10 157 255 / 12%)}
html.v2 .stx-tools input{background:rgb(23 32 43 / 22%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .stx-row{border:1px solid rgb(255 255 255 / 8%);background:rgb(23 32 43 / 14%)}
html.v2 .stx-row:hover{border-color:rgba(10,157,255,.4);background:rgb(23 32 43 / 26%)}
html.v2 .terms-doc h2::before{background:linear-gradient(180deg,#0a9dff,#005ba1)}
html.v2 .terms-ban__i{background:rgb(23 32 43 / 26%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .rc-g__img::after{background:linear-gradient(180deg,rgb(10 14 19 / 0) 45%,rgb(10 14 19 / .5))}
html.v2 .pfaq__i{background:rgb(23 32 43 / 18%);border:1px solid rgb(255 255 255 / 8%)}
html.v2 .pfaq__i:hover{border-color:rgba(10,157,255,.35);background:rgb(23 32 43 / 28%)}
html.v2 .pfaq__i.open{border-color:rgba(10,157,255,.4)}
html.v2 .rcft{background:rgb(23 32 43 / 24%);border-top:1px solid rgb(255 255 255 / 8%)}
html.v2 .rcft__soc a{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
html.v2 .rcft__soc a:hover{background:rgba(10,157,255,.14);border-color:rgba(10,157,255,.45)}
/* ================= ручные правила нового стиля =================
Правила стиля (см. бриф): поверхности нейтральные, синий — только у действий
и выбранного; зелёный и янтарный — только у состояний; шрифт Onest. */
html.v2 {
--v-bg: #0a0e13; --v-surface: #111821; --v-surface2: #17202b;
--v-line: rgb(255 255 255 / 8%); --v-line2: rgb(255 255 255 / 14%);
--v-text: #e7edf4; --v-muted: #8b9bad; --v-faint: #5f6f81;
--v-blue: #0a86f0; --v-blue-h: #2a97f5; --v-blue-soft: rgb(10 134 240 / 13%);
--v-green: #3ecf8e; --v-amber: #e8b04b;
}
/* без синих свечений под страницей: ровный тёмный фон */
html.v2 body { background: var(--v-bg) !important; background-image: none !important; color: var(--v-text); font-family: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif; }
html.v2 body::before { background-image: none !important; }
html.v2 body :is(h1, h2, h3, h4, h5, p, span, a, button, li, div, b, strong, small, label, td, th, summary, input, textarea):not([class*="fa-"]) {
font-family: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif !important;
}
/* синее, заданное прямо в style="" разметки, — сборщик его не видит */
html.v2 .topSellingCheats > div[style*="9 53 97"] { background: rgb(23 32 43 / 92%) !important; }
html.v2 .topSellingCheats h2 { color: var(--v-text) !important; }
html.v2 .topSellingCheats .swiper-slide span[style*="9 53 97"] {
background: rgb(10 14 19 / 72%) !important; color: var(--v-text) !important; border: 1px solid var(--v-line2);
}
html.v2 .topSellingCheats .swiper-slide span[style*="9 53 97"] > i { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--v-muted); }
html.v2 .cardHelp[style*="9 53 97"] { background: var(--v-surface) !important; border: 1px solid var(--v-line); }
html.v2 .buttonsCardHelp a[style*="20 102 185"] { background: var(--v-blue) !important; }
html.v2 .buttonsCardHelp a[style*="20 102 185"]:hover { background: var(--v-blue-h) !important; }
html.v2 #products .wrapper-m p[style*="73 169 228"] { color: var(--v-text) !important; }
/* заголовки разделов на страницах — светлые; синий остаётся у заголовка страницы (H1)
и у полоски-акцента слева */
html.v2 :is(.about, .coop, .pay, .game-content, .post-body) h2, html.v2 .rc-chips h2,
html.v2 :is(h2, h3)[style*="0080ea" i] { color: var(--v-text) !important; }
html.v2 .blockFunctional .func-sub { color: var(--v-muted); }
/* подвал: внутренняя линия — нейтральная, как внешняя */
html.v2 .rcft__grid { border-bottom-color: var(--v-line); }
/* главная: основное действие — сплошной синий, как «Перейти к оплате» */
html.v2 #header-wrapper .hero-catalog-btn { background: var(--v-blue); border-color: transparent; color: #fff; }
html.v2 #header-wrapper .hero-catalog-btn:hover { background: var(--v-blue-h); border-color: transparent; }
html.v2 #header-wrapper .hero-catalog-btn i { color: #fff; }
/* каталог: метки функций и цена — не синие, синий только у «Подробнее» */
html.v2 #products.cheats .products .product-wrapper .product .pcard-chip:not(.pcard-chip--key):not(.pcard-chip--more) {
color: #c6d1dc; background: rgb(255 255 255 / 5%); border-color: var(--v-line2);
}
html.v2 #products.cheats .products .product-wrapper .product .pcard-bottom .price { color: var(--v-text); }
/* другие читы: полоса прокрутки и стрелка — нейтральные */
html.v2 .rc-rel__row { scrollbar-color: rgb(255 255 255 / 14%) transparent; }
html.v2 .rc-rel__go { background: rgb(255 255 255 / 6%); color: var(--v-muted); }
html.v2 #product hr[style*="0 63 114"] { border-color: var(--v-line) !important; }
/* шапка: нейтральное стекло вместо синей пилюли */
html.v2 header {
background: rgb(17 24 33 / 82%) !important;
border: 1px solid var(--v-line) !important;
box-shadow: 0 12px 34px rgb(0 0 0 / 38%) !important;
}
html.v2 header .navmr .search-btn { background: rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 9%); }
/* выпадашка «Помощь» — тем же стеклом, что и шапка */
html.v2 header .navbar-nav .dropdown-faqOther {
background: rgb(17 24 33 / 97%) !important; border: 1px solid var(--v-line2) !important;
box-shadow: 0 18px 40px rgb(0 0 0 / 45%) !important;
}
/* ---------------- страница товара ---------------- */
/* заголовок остаётся фирменного синего (выбор владельца), набор плотнее */
html.v2 #product h1.product-title { letter-spacing: -.02em; font-weight: 700 !important; }
/* заголовки разделов — не синие: синий только у действий */
html.v2 #product h2[style*="0080ea"], html.v2 #product h2[style*="0080Ea"],
html.v2 .pfaq__h, html.v2 .rc-rel__head, html.v2 .rc-guides h2 { color: var(--v-text) !important; }
html.v2 .rc-rel__head b { color: var(--v-text) !important; }
/* статус — спокойная пилюля состояния */
html.v2 #product .pinfo__status--undetected {
color: var(--v-green) !important; background: rgb(62 207 142 / 8%) !important;
border: 1px solid rgb(62 207 142 / 30%) !important; border-radius: 999px; padding: 5px 12px !important;
}
@media (max-width: 560px) { html.v2 #product .pinfo__status--undetected { width: auto; margin-right: auto; } }
html.v2 #product .pinfo__meta, html.v2 #product .pinfo__meta b { color: var(--v-muted) !important; }
/* панель заказа */
html.v2 #product .content .main-info .accept-order .name,
html.v2 #product .accept-order:not(.is-unavail) .pre-title,
html.v2 #product .accept-order:not(.is-unavail) .pre-title span {
color: var(--v-muted) !important; -webkit-text-fill-color: currentColor !important; background: none !important;
font-size: 12px !important; letter-spacing: .14em !important; text-transform: uppercase; font-weight: 600 !important;
}
html.v2 #product .content .main-info .accept-order.is-soldout .header-line .pre-title span {
background: none; -webkit-text-fill-color: currentColor; color: var(--v-muted);
}
/* к панели прокручивает полоса «Купить»: верх панели не должен уходить под шапку */
html.v2 #product .accept-order { scroll-margin-top: 130px; }
/* Панель заказа — 35% ширины; на окнах 961–1100px это ~245px внутри, и тариф с меткой
«Выгоднее всего» не помещался: метка наезжала на цену. Не уже 360px — сужается галерея. */
@media (min-width: 961px) {
html.v2 #product .content .main-info.mi-sticky .pcol-aside { flex-basis: max(35%, 360px); max-width: none; }
}
html.v2 #product .accept-order .select .select-sub .sel-wrapper { margin-bottom: 0 !important; }
html.v2 #product .accept-order .select .select-sub .sel-wrapper .sel {
display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
background: var(--v-surface2) !important; border: 1px solid var(--v-line) !important; border-radius: 12px !important;
padding: 12px 14px !important; margin-bottom: 8px !important; font-variant-numeric: tabular-nums;
}
html.v2 #product .accept-order .select .select-sub .sel-wrapper .sel:hover { border-color: var(--v-line2) !important; }
html.v2 #product .accept-order .select .select-sub .sel-wrapper .sel.active {
background: var(--v-blue-soft) !important; border-color: rgb(10 134 240 / 60%) !important; box-shadow: none !important;
}
html.v2 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel .time {
color: var(--v-text) !important; font-weight: 600 !important; font-size: 16px !important;
grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
}
html.v2 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel .price {
color: var(--v-text) !important; -webkit-text-fill-color: currentColor !important; background: none !important;
font-size: 18px !important; font-weight: 700 !important; grid-column: 3; grid-row: 1 / span 2; align-self: center; white-space: nowrap; margin: 0 !important;
}
html.v2 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel > i {
color: var(--v-faint) !important; -webkit-text-fill-color: currentColor !important; background: none !important;
grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0 !important; font-size: 18px !important;
}
html.v2 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel.active > i { color: var(--v-blue) !important; }
html.v2 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel:not(.active):hover > i { color: var(--v-muted) !important; }
html.v2 #product .accept-order .sel .v2-perday {
grid-column: 2; grid-row: 2; color: var(--v-muted); font-size: 13px; font-weight: 500; margin-top: 2px;
}
html.v2 #product .accept-order .sel .v2-perday b { color: var(--v-green); font-weight: 600; margin-left: 6px; white-space: nowrap; display: inline-block; }
html.v2 #product .accept-order .sel .v2-best {
display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--v-blue); color: #fff;
font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.5; white-space: nowrap;
}
/* кнопка — единственное насыщенное синее пятно */
html.v2 #product .content .main-info .accept-order .go-buy .btn {
background: var(--v-blue) !important; background-image: none !important; box-shadow: 0 10px 24px rgb(10 134 240 / 28%) !important;
border-radius: 12px !important; border: 0 !important;
}
html.v2 #product .content .main-info .accept-order .go-buy .btn::before { display: none !important; }
html.v2 #product .content .main-info .accept-order .go-buy .btn:hover { background: var(--v-blue-h) !important; filter: none !important; }
html.v2 #product .content .main-info .accept-order .go-buy .btn span { color: #fff !important; }
/* Под тарифами — «факты»: строка с иконкой в квадрате, без карточки. Карточки с рамкой
в этой панели — только у тарифов, всё, что похоже на них, читается как ещё один
вариант для выбора (так и было: «У вас Windows 10 — подходит» сливалась с тарифами). */
html.v2 .v2-fact { display: flex; align-items: flex-start; gap: 11px; }
html.v2 .v2-fact__ic {
flex: none; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
background: var(--v-blue-soft); color: #5aaaf2;
}
html.v2 .v2-fact__ic svg { width: 15px; height: 15px; display: block; }
html.v2 .v2-fact__tx { min-width: 0; padding-top: 5px; font-size: 13.5px; line-height: 1.4; color: #c6d1dc; }
/* «Пойдёт ли у меня?» (js/product.js). Вывод — ПИЛЮЛЯ, как статус UNDETECTED на этой же
странице: короткая, не во всю ширину, в цвете состояния. Плашка во всю ширину с рамкой
выглядела пятым тарифом — на мониторе владельца оттенок 7% не различался вовсе.
Рядом мелко — «у вас Windows 10» (не переносится по словам: не влезла — целиком уходит
под пилюлю), развёрнутое пояснение строкой ниже. */
html.v2 .v2-compat { margin: 14px 0 16px; }
html.v2 .v2-compat__row { font-size: 13px; line-height: 1.5; color: #9aa9b9; }
html.v2 .v2-compat__pill {
display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; margin-right: 8px;
padding: 5px 12px 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.25; white-space: nowrap;
}
html.v2 .v2-compat__pill svg { width: 14px; height: 14px; flex: none; }
html.v2 .v2-compat.is-ok .v2-compat__pill { color: var(--v-green); background: rgb(62 207 142 / 12%); border: 1px solid rgb(62 207 142 / 38%); }
html.v2 .v2-compat.is-warn .v2-compat__pill { color: var(--v-amber); background: rgb(232 176 75 / 12%); border: 1px solid rgb(232 176 75 / 40%); }
html.v2 .v2-compat.is-info .v2-compat__pill { color: var(--v-text); background: rgb(255 255 255 / 6%); border: 1px solid var(--v-line2); }
html.v2 .v2-compat.is-info .v2-compat__pill svg { color: #5aaaf2; }
/* без проверки — не пилюля, а обычная строка «⊞ Требования: …» */
html.v2 .v2-compat.is-neutral .v2-compat__pill { padding: 0; margin-right: 4px; color: var(--v-muted); font-weight: 500; }
html.v2 .v2-compat.is-neutral .v2-compat__pill svg { color: #5aaaf2; }
html.v2 .v2-compat.is-neutral .v2-compat__os { color: #c6d1dc; }
html.v2 .v2-compat__os { vertical-align: middle; }
html.v2 .v2-compat:not(.is-neutral) .v2-compat__os { display: inline-block; white-space: nowrap; }
html.v2 .v2-compat__n { display: block; color: #9aa9b9; font-size: 12.5px; line-height: 1.45; margin-top: 7px; }
html.v2 .v2-compat__n:empty { display: none; }
html.v2 .v2-compat__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 12.5px; line-height: 1.4; }
html.v2 .v2-compat__req {
color: #b4c1ce !important; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 28%);
text-underline-offset: 3px; cursor: pointer;
}
html.v2 .v2-compat__req::after { content: "→"; text-decoration: none; display: inline-block; margin-left: 5px; }
html.v2 .v2-compat__req:hover { color: var(--v-text) !important; text-decoration-color: currentColor; }
html.v2 .v2-compat__ask { font-weight: 600; color: var(--v-blue-h) !important; text-decoration: none; }
html.v2 .v2-compat__ask:hover { text-decoration: underline; }
html.v2 #product .system-recom-block { scroll-margin-top: 130px; }
/* лента миниатюр: полоса прокрутки нейтральная, синий — только у действий */
html.v2 #product .content .main-info .right-block .pgal__strip { scrollbar-color: rgb(255 255 255 / 16%) transparent; }
html.v2 #product .content .main-info .right-block .pgal__strip::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 16%); }
/* что будет после оплаты: те же строки-факты под кнопкой */
html.v2 .v2-reassure { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin-top: 16px; padding: 0 2px; }
html.v2 .v2-reassure .v2-fact__tx b { font-weight: 500; color: var(--v-muted); margin-right: 4px; }
/* полоса покупки на телефоне: видна, пока панель заказа за краем экрана */
html.v2 .v2-sticky {
position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 90;
display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px;
background: rgb(17 24 33 / 98%); border: 1px solid var(--v-line2); box-shadow: 0 14px 34px rgb(0 0 0 / 50%);
transform: translateY(calc(100% + 30px)); transition: transform .25s ease, visibility 0s linear .25s; visibility: hidden;
}
html.v2 .v2-sticky.show { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
html.v2 body.no-scroll .v2-sticky { display: none; }
html.v2 .v2-sticky__g { flex: 1; min-width: 0; }
html.v2 .v2-sticky__n { font-weight: 650; color: var(--v-text); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v2 .v2-sticky__f { color: var(--v-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
html.v2 .v2-sticky__b {
height: 42px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--v-blue); color: #fff;
font: 700 14px "Onest", system-ui, sans-serif; cursor: pointer; flex: none;
}
/* до 960px панель заказа стоит под описанием (main.css, @media max-width 960px) */
@media (min-width: 961px) { html.v2 .v2-sticky { display: none; } }
@media (max-width: 960px) { html.v2 body.has-v2-sticky { padding-bottom: 76px; } }
@media (prefers-reduced-motion: reduce) { html.v2 .v2-sticky, html.v2 .v2-sticky.show { transition: none; } }
html.v2 .v2-compat__ask[hidden] { display: none; }
/* =====================================================================
v3 — новая раскладка (html.v3, пока только по ?v3=1). «Витрина и касса»:
одна сетка 1280 и один левый край; над страницей поднята только панель заказа;
всё остальное лежит на фоне и разделяется линией 1px и воздухом.
Радиусы 8/12/16 (999 — пилюли состояния), линии только 1px.
===================================================================== */
html.v3 { --v3-wrap: 1280px; --v3-gut: 32px; --v-red: #ef5b6a; }
@media (max-width: 1099px) { html.v3 { --v3-gut: 24px; } }
@media (max-width: 560px) { html.v3 { --v3-gut: 16px; } }
/* ---------- шапка: полоса во всю ширину вместо плавающей пилюли ---------- */
/* у старой шапки body { margin-top: 3rem } — на телефоне над полосой оставалась пустая полоса 48px */
html.v3 body { margin-top: 0 !important; }
html.v3 header {
position: sticky !important; top: 0 !important; left: 0; right: 0;
width: 100% !important; max-width: none !important; margin: 0 !important; height: 64px;
padding: 0 !important; border-radius: 0 !important; border: 0 !important;
border-bottom: 1px solid var(--v-line) !important; box-shadow: none !important;
background: rgb(10 14 19 / 86%) !important;
}
@media (min-width: 901px) { html.v3 header { -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); } }
html.v3 header > .container, html.v3 header > nav.container {
width: min(100% - 2 * var(--v3-gut), var(--v3-wrap)) !important; max-width: none !important;
margin-inline: auto !important; padding: 0 !important; height: 100%;
}
html.v3 header .navbar-nav { height: 64px; }
html.v3 header .navbar-nav .logo { display: flex; align-items: center; gap: 10px; margin: 0; }
html.v3 header .navbar-nav .logo img { width: 32px !important; height: 32px; margin: 0 !important; }
html.v3 .v3-word, html.v3 header .navbar-nav .logo span.v3-word {
font: 700 16px/20px "Onest", system-ui, sans-serif !important; letter-spacing: -.01em; color: var(--v-text) !important; white-space: nowrap;
text-transform: none !important; background: none !important; -webkit-text-fill-color: currentColor !important; margin: 0 !important;
}
html.v3 header .navbar-nav .menu { margin-left: 40px; gap: 26px; height: 64px; align-items: stretch; }
html.v3 header .navbar-nav .menu a.rcnav-link {
display: flex; align-items: center; height: 64px; padding: 0 !important; border-radius: 0;
font-size: 14px; font-weight: 500; color: #b4c1ce; background: none !important;
}
html.v3 header .navbar-nav .menu a.rcnav-link:hover { color: var(--v-text) !important; }
html.v3 header .navbar-nav .menu a.rcnav-link::after { left: 0; right: 0; bottom: -1px; border-radius: 0; background: var(--v-blue); }
html.v3 header .navbar-nav .menu a.rcnav-link:hover::after { transform: scaleX(0); }
html.v3 header .navbar-nav .menu a.rcnav-link.is-active { color: var(--v-text) !important; }
html.v3 header .navbar-nav .menu a.rcnav-link.is-active::after { transform: scaleX(1); }
html.v3 header .navbar-nav .faq { display: flex; align-items: stretch; }
html.v3 header .navbar-nav .dropdown-faqOther { top: 64px; }
html.v3 header .navbar-nav .search-btn {
order: 1; width: 240px; height: 36px; padding: 0 12px; gap: 10px; border-radius: 8px;
font-size: 14px; color: var(--v-muted); background: rgb(255 255 255 / 4%); border: 1px solid var(--v-line);
}
html.v3 header .navbar-nav .search-btn:hover { background: rgb(255 255 255 / 6%); border-color: var(--v-line2); color: var(--v-text); }
html.v3 header .navbar-nav .rcnav-lang { order: 2; margin: 0 0 0 16px; font-size: 13px; letter-spacing: .04em; color: var(--v-muted) !important; }
html.v3 header .navbar-nav .rcnav-lang::after { display: none; }
@media (max-width: 1100px) { html.v3 header .navbar-nav .search-btn { width: 180px; } html.v3 header .navbar-nav .menu { margin-left: 28px; gap: 20px; } }
@media (max-width: 960px) { html.v3 header, html.v3 header .navbar-nav { height: 56px; } }
/* 768–967: меню скрыто, остаётся старый значок-бургер — он стоял в строке первым, сразу за логотипом,
и поиск с EN прижимались к нему, а справа оставалась пустота */
@media (max-width: 967px) {
html.v3 header .navbar-nav .search-btn { margin-left: auto; }
html.v3 header .navbar-nav .mobile-menu { order: 3; margin-left: 20px; }
html.v3 header .navbar-nav .mobile-menu span { background: #b4c1ce; }
}
html.v3 .nav.navmr { height: 56px; }
html.v3 .nav.navmr .nav__logo { display: flex; align-items: center; gap: 8px; margin: 0; }
html.v3 .nav.navmr .nav__logo img { width: 28px; height: 28px; margin: 0 !important; }
html.v3 .nav.navmr .v3-word { font-size: 15px; font-weight: 650; }
@media (max-width: 360px) { html.v3 .nav.navmr .v3-word { display: none; } }
/* ---------- страница товара: контейнер и сетка ---------- */
html.v3 #product { padding-top: 24px !important; padding-bottom: 0 !important; min-height: 0; }
html.v3 #product > .container, html.v3 #product ~ .v3-rel, html.v3 :is(#product, .v3-brand) ~ .rc-guides, html.v3 .rcft__in {
width: min(100% - 2 * var(--v3-gut), var(--v3-wrap)) !important; max-width: none !important;
margin-inline: auto; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box;
}
html.v3 #product .content { padding: 0; }
/* крошки: одна строка, обычный регистр, «/» между пунктами */
html.v3 .v3-crumbs { margin: 0 0 20px; }
html.v3 .v3-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; font-weight: 500; }
html.v3 .v3-crumbs li { color: #c6d1dc; }
html.v3 .v3-crumbs li + li::before { content: "/"; color: var(--v-faint); margin: 0 8px; }
html.v3 .v3-crumbs a { color: var(--v-muted); text-decoration: none; }
html.v3 .v3-crumbs a:hover { color: var(--v-text); }
@media (max-width: 560px) {
html.v3 .v3-crumbs { margin: 0 0 12px; }
html.v3 .v3-crumbs li:first-child, html.v3 .v3-crumbs li[aria-current] { display: none; }
html.v3 .v3-crumbs li + li::before { content: none; }
html.v3 .v3-crumbs__up { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; color: #c6d1dc !important; }
html.v3 .v3-crumbs__up::before { content: "‹"; font-size: 20px; margin-right: 6px; line-height: 1; }
}
html.v3 #product .content .main-info.v3-grid {
display: grid !important; grid-template-columns: minmax(0, 1fr) 384px; column-gap: 56px;
grid-template-areas: "head aside" "media aside" "body aside"; grid-template-rows: auto auto 1fr;
align-items: start; margin: 0 !important; flex-wrap: nowrap;
row-gap: 0 !important; /* у старой .mi-sticky gap: 30px — он добавлял 30px между рядами сетки */
}
@media (max-width: 1279px) { html.v3 #product .content .main-info.v3-grid { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 32px; } }
@media (max-width: 960px) {
html.v3 #product .content .main-info.v3-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "aside" "body"; grid-template-rows: auto; }
}
html.v3 #product .v3-head { grid-area: head; min-width: 0; }
html.v3 #product .v3-media { grid-area: media; min-width: 0; margin-top: 24px; }
html.v3 #product .v3-body { grid-area: body; min-width: 0; }
html.v3 #product .content .main-info.mi-sticky .pcol-aside {
grid-area: aside; align-self: stretch; flex: none !important; max-width: none !important; width: auto; min-width: 0;
}
html.v3 #product .content .main-info.mi-sticky .pcol-aside .aside-sticky { top: 88px; display: block; }
@media (max-width: 960px) {
html.v3 #product .content .main-info.mi-sticky .pcol-aside .aside-sticky { position: static; margin-top: 20px; }
}
/* ---------- заголовок и строка статуса ---------- */
html.v3 #product h1.product-title {
margin: 0 !important; text-align: left !important; color: var(--v-blue) !important;
font-size: clamp(26px, 1.6vw + 17px, 40px) !important; line-height: 1.1 !important; font-weight: 700 !important;
letter-spacing: -.02em; text-wrap: balance;
}
html.v3 .v3-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--v-muted); }
html.v3 .v3-meta__i { display: inline-flex; align-items: center; }
html.v3 .v3-meta > * + *::before { content: ""; width: 1px; height: 14px; background: rgb(255 255 255 / 12%); margin: 0 12px; }
html.v3 .v3-meta__i b { color: #c6d1dc; font-weight: 500; margin-left: 4px; }
html.v3 .v3-st {
display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 10px; border-radius: 999px;
font-size: 13px; font-weight: 600; color: var(--v-green); background: rgb(62 207 142 / 8%); border: 1px solid rgb(62 207 142 / 30%);
}
html.v3 .v3-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
html.v3 .v3-st--onupdate, html.v3 .v3-st--useatownrisk { color: var(--v-amber); background: rgb(232 176 75 / 8%); border-color: rgb(232 176 75 / 30%); }
html.v3 .v3-st--detected { color: var(--v-red); background: rgb(239 91 106 / 8%); border-color: rgb(239 91 106 / 30%); }
@media (max-width: 560px) {
html.v3 .v3-meta { row-gap: 8px; }
html.v3 .v3-meta > .v3-st { margin-right: 100%; }
html.v3 .v3-meta > .v3-st + *::before { display: none; }
}
/* ---------- галерея: без подложки, фирменные ESP-уголки у главного кадра ---------- */
html.v3 #product .content .main-info .right-block,
html.v3 #product .content .main-info .right-block-wrapper,
html.v3 #product .content .main-info .center-f {
padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; height: auto !important; width: 100% !important;
}
html.v3 #product .content .main-info .right-block .pgal { gap: 20px; }
html.v3 #product .content .main-info .right-block .pgal__main { overflow: visible; border-radius: 12px; background: none !important; }
html.v3 #product .content .main-info .right-block .pgal__main img { border-radius: 12px; box-shadow: 0 0 0 1px rgb(255 255 255 / 8%); }
/* Софт рисует рамки вокруг целей — главный кадр получает тот же язык. Уголки снаружи
кадра на 8px: не закрывают ни HUD, ни водяной знак; при наведении «захват» сжимается. */
html.v3 #product .content .main-info .right-block .pgal__main::after {
content: ""; position: absolute; inset: -8px; pointer-events: none; opacity: .45;
--c: rgb(231 237 244 / 70%); --a: 20px; --t: 2px;
background:
linear-gradient(var(--c) 0 0) top left / var(--a) var(--t) no-repeat, linear-gradient(var(--c) 0 0) top left / var(--t) var(--a) no-repeat,
linear-gradient(var(--c) 0 0) top right / var(--a) var(--t) no-repeat, linear-gradient(var(--c) 0 0) top right / var(--t) var(--a) no-repeat,
linear-gradient(var(--c) 0 0) bottom left / var(--a) var(--t) no-repeat, linear-gradient(var(--c) 0 0) bottom left / var(--t) var(--a) no-repeat,
linear-gradient(var(--c) 0 0) bottom right / var(--a) var(--t) no-repeat, linear-gradient(var(--c) 0 0) bottom right / var(--t) var(--a) no-repeat;
transition: inset .18s ease, opacity .18s ease;
}
html.v3 #product .content .main-info .right-block .pgal__main:hover::after { inset: -4px; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
html.v3 #product .content .main-info .right-block .pgal__main::after { transition: opacity .18s ease; }
html.v3 #product .content .main-info .right-block .pgal__main:hover::after { inset: -8px; }
}
html.v3 #product .content .main-info .right-block .pgal__zoom {
top: 12px; right: 12px; bottom: auto; width: 32px; height: 32px; border-radius: 8px; font-size: 13px;
background: rgb(10 14 19 / 72%); border: 1px solid rgb(255 255 255 / 12%);
}
html.v3 #product .content .main-info .right-block .pgal__strip {
/* --n — сколько материалов у товара (до 7, ставит сервер): лента делится на столько колонок и
всегда заполняет ширину под кадром; больше 7 — прокрутка с затуханием справа */
--cols: min(var(--n, 7), 7);
display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cols) - 1) * 8px) / var(--cols)); gap: 8px;
padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
html.v3 #product .content .main-info .right-block .pgal__strip::-webkit-scrollbar { display: none; }
@media (max-width: 1279px) { html.v3 #product .content .main-info .right-block .pgal__strip { --cols: min(var(--n, 6), 6); } }
@media (max-width: 1099px) { html.v3 #product .content .main-info .right-block .pgal__strip { --cols: min(var(--n, 5), 5); } }
@media (max-width: 560px) { html.v3 #product .content .main-info .right-block .pgal__strip { --cols: min(var(--n, 4), 4); } }
html.v3 #product .content .main-info .right-block .pgal__strip.pgal__strip--one { display: none; }
html.v3 #product .content .main-info .right-block .pgal__strip.is-overflow {
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
html.v3 #product .content .main-info .right-block .pgal__strip .item {
width: auto !important; height: auto !important; aspect-ratio: 16 / 9; border: 0 !important; border-radius: 8px; position: relative;
opacity: .6; transform: none !important; scroll-snap-align: start; transition: opacity .15s ease; box-shadow: none !important;
}
html.v3 #product .content .main-info .right-block .pgal__strip .item:hover { opacity: .9; }
html.v3 #product .content .main-info .right-block .pgal__strip .item.active { opacity: 1; }
html.v3 #product .content .main-info .right-block .pgal__strip .item.active::after {
content: ""; position: absolute; inset: 4px; pointer-events: none; --c: var(--v-blue); --a: 10px; --t: 2px;
background:
linear-gradient(var(--c) 0 0) top left / var(--a) var(--t) no-repeat, linear-gradient(var(--c) 0 0) top left / var(--t) var(--a) no-repeat,
linear-gradient(var(--c) 0 0) top right / var(--a) var(--t) no-repeat, linear-gradient(var(--c) 0 0) top right / var(--t) var(--a) no-repeat,
linear-gradient(var(--c) 0 0) bottom left / var(--a) var(--t) no-repeat, linear-gradient(var(--c) 0 0) bottom left / var(--t) var(--a) no-repeat,
linear-gradient(var(--c) 0 0) bottom right / var(--a) var(--t) no-repeat, linear-gradient(var(--c) 0 0) bottom right / var(--t) var(--a) no-repeat;
}
@media (max-width: 960px) { html.v3 #product .content .main-info .right-block .pgal__main::after { display: none; } }
@media (max-width: 560px) {
html.v3 #product .v3-media { margin-inline: calc(-1 * var(--v3-gut)); }
html.v3 #product .content .main-info .right-block .pgal__main,
html.v3 #product .content .main-info .right-block .pgal__main img { border-radius: 0; box-shadow: none; }
html.v3 #product .content .main-info .right-block .pgal__strip { padding-inline: var(--v3-gut); scroll-padding-inline: var(--v3-gut); }
}
/* ---------- левая колонка: лид и разделы на линиях ---------- */
html.v3 .v3-lead { margin: 32px 0 0; max-width: 720px; font-size: 17px; line-height: 28px; color: #c6d1dc; }
html.v3 .v3-sec, html.v3 #product .content .system-recom-block.v3-sec {
display: block; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--v-line); scroll-margin-top: 88px;
}
html.v3 .v3-h2, html.v3 #product .v3-body .pfaq__h, html.v3 .rc-rel__head, html.v3 :is(#product, .v3-brand) ~ .rc-guides .rc-guides__h, html.v3 #product .rc-about h2 {
margin: 0 0 20px !important; padding: 0 !important; border: 0 !important; font-size: 24px !important; line-height: 30px; font-weight: 700 !important;
letter-spacing: -.015em; color: var(--v-text) !important; display: block;
}
html.v3 #product .v3-body .pfaq__h::before, html.v3 :is(#product, .v3-brand) ~ .rc-guides .rc-guides__h::before { display: none; }
html.v3 .v3-sec__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 20px; }
html.v3 .v3-sec__bar .v3-h2 { margin: 0 !important; }
html.v3 .v3-sec__aside { font-size: 14px; line-height: 20px; color: var(--v-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
html.v3 .v3-lead { margin-top: 28px; font-size: 16px; line-height: 26px; }
html.v3 .v3-sec, html.v3 #product .content .system-recom-block.v3-sec { margin-top: 40px; padding-top: 24px; }
html.v3 .v3-h2, html.v3 #product .v3-body .pfaq__h, html.v3 .rc-rel__head, html.v3 :is(#product, .v3-brand) ~ .rc-guides .rc-guides__h { font-size: 20px !important; line-height: 26px; }
}
/* требования — строки на линиях в две колонки */
html.v3 .v3-spec { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; margin: 0; border-bottom: 1px solid var(--v-line); }
html.v3 .v3-spec > div { padding: 14px 0; border-top: 1px solid var(--v-line); min-width: 0; }
html.v3 .v3-spec > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
html.v3 .v3-spec dt { font-size: 12.5px; line-height: 16px; font-weight: 500; color: var(--v-muted); }
html.v3 .v3-spec dd { margin: 4px 0 0; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--v-text); overflow-wrap: anywhere; }
@media (max-width: 560px) { html.v3 .v3-spec { grid-template-columns: 1fr; } }
/* функции — строки на линиях, первая раскрыта, у свёрнутых — превью */
html.v3 #product .blockFunctional.activeP { display: block; gap: 0; }
html.v3 #product .blockFunctional .func-cat {
background: none !important; border: 0 !important; border-top: 1px solid var(--v-line) !important; border-radius: 0 !important;
padding: 0 !important; box-shadow: none !important;
}
html.v3 #product .blockFunctional .func-cat:last-child { border-bottom: 1px solid var(--v-line) !important; }
html.v3 #product .blockFunctional .func-cat__head {
display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto 14px; align-items: center; column-gap: 14px;
min-height: 56px; padding: 0 12px; margin: 0 -12px; width: calc(100% + 24px); border-radius: 8px;
}
html.v3 #product .blockFunctional .func-cat__head:hover { background: rgb(255 255 255 / 2.5%); }
html.v3 #product .blockFunctional .func-cat__ic { width: 18px; height: 18px; background: none !important; border: 0 !important; box-shadow: none !important; color: var(--v-muted) !important; border-radius: 0; }
html.v3 #product .blockFunctional .func-cat__ic .func-ic { width: 18px; height: 18px; }
html.v3 #product .blockFunctional .func-cat__name { font-size: 15px !important; line-height: 20px; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--v-text) !important; }
html.v3 #product .blockFunctional .func-cat__peek { font-size: 13.5px; line-height: 20px; color: var(--v-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.v3 #product .blockFunctional .func-cat:not(.func-cat--collapsed) .func-cat__peek { visibility: hidden; }
html.v3 #product .blockFunctional .func-cat__count { background: none !important; border: 0 !important; padding: 0 !important; font-size: 13px; font-weight: 500; color: var(--v-muted) !important; font-variant-numeric: tabular-nums; }
html.v3 #product .blockFunctional .func-cat__chev { width: 14px; height: 14px; color: var(--v-faint); display: block; margin: 0; transition: transform .2s ease; transform: rotate(180deg); }
html.v3 #product .blockFunctional .func-cat__chev svg { width: 14px; height: 14px; display: block; }
html.v3 #product .blockFunctional .func-cat--collapsed .func-cat__chev { transform: none; }
html.v3 #product .blockFunctional .func-cat__inner { border-top: 0 !important; padding: 4px 0 24px 32px; gap: 16px; }
html.v3 #product .blockFunctional .func-cat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 28px; }
html.v3 #product .blockFunctional .func-item {
position: relative; padding: 0 0 0 14px !important; background: none !important; border: 0 !important; border-radius: 0 !important;
font-size: 14.5px; line-height: 22px; color: #c6d1dc !important;
}
html.v3 #product .blockFunctional .func-item::before { content: ""; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; background: var(--v-faint); border-radius: 0; box-shadow: none; }
html.v3 #product .blockFunctional .func-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px 32px; }
html.v3 #product .blockFunctional .func-row { padding: 0 !important; background: none !important; border: 0 !important; }
html.v3 #product .blockFunctional .func-row::before { display: none !important; }
html.v3 #product .blockFunctional .func-row__name { font-size: 14.5px; line-height: 22px; font-weight: 600; color: var(--v-text) !important; }
html.v3 #product .blockFunctional .func-row__desc { display: block; font-size: 13.5px; line-height: 20px; color: var(--v-muted) !important; }
html.v3 #product .blockFunctional .func-sub { font-size: 12px !important; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--v-muted) !important; margin: 20px 0 10px !important; padding-left: 0 !important; }
html.v3 #product .blockFunctional .func-sub::before { display: none !important; }
html.v3 #product .blockFunctional .func-subgroup { border: 0 !important; padding-top: 0 !important; }
html.v3 #product .blockFunctional .func-cat__inner > .func-subgroup:first-child .func-sub { margin-top: 0 !important; }
@media (max-width: 560px) {
html.v3 #product .blockFunctional .func-cat__head { min-height: 52px; grid-template-columns: 18px minmax(0, 1fr) auto 14px; }
html.v3 #product .blockFunctional .func-cat__peek { display: none; }
html.v3 #product .blockFunctional .func-cat__grid, html.v3 #product .blockFunctional .func-list { grid-template-columns: 1fr; }
html.v3 #product .blockFunctional .func-cat__inner { padding-left: 0; }
}
/* фильтр функций (при 40 и более пунктах) */
html.v3 .v3-fx { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
html.v3 .v3-fx__f { position: relative; flex: 1; max-width: 360px; }
html.v3 .v3-fx__f svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--v-muted); pointer-events: none; }
html.v3 .v3-fx__f input {
width: 100%; height: 40px; padding: 0 12px 0 36px; border-radius: 8px; font: 400 14px "Onest", system-ui, sans-serif;
color: var(--v-text); background: rgb(255 255 255 / 3%); border: 1px solid var(--v-line2); outline: none;
}
html.v3 .v3-fx__f input::placeholder { color: var(--v-muted); }
html.v3 .v3-fx__f input:focus { border-color: var(--v-blue); box-shadow: 0 0 0 3px rgb(10 134 240 / 20%); }
html.v3 .v3-fx__all { border: 0; background: none; padding: 0; cursor: pointer; font: 600 13.5px/20px "Onest", system-ui, sans-serif; color: #c6d1dc; white-space: nowrap; }
html.v3 .v3-fx__all:hover { color: #fff; }
html.v3 .v3-fx__none { margin: 0 0 12px; font-size: 14px; color: var(--v-muted); }
html.v3 .v3-fx__none a { color: var(--v-blue-h); font-weight: 600; text-decoration: none; }
html.v3 #product .blockFunctional .is-fx-hidden { display: none !important; }
@media (max-width: 960px) { html.v3 .v3-fx__f { max-width: none; } html.v3 .v3-fx__f input { height: 44px; } }
/* «О софте» и FAQ — внутри левой колонки, на линиях */
html.v3 #product .rc-about > * { max-width: 720px; }
html.v3 #product .rc-about { max-width: none; margin: 56px 0 0 !important; padding: 32px 0 0 !important; font-size: 16px; line-height: 28px; color: #b4c1ce; }
html.v3 #product .rc-about h3 { font-size: 17px; line-height: 24px; font-weight: 650; color: var(--v-text); margin: 28px 0 10px; }
html.v3 #product .rc-about p { margin: 0 0 14px; }
html.v3 #product .rc-about b { color: var(--v-text); font-weight: 600; }
html.v3 #product .rc-about table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14.5px; }
html.v3 #product .rc-about td { padding: 10px 0; border-bottom: 1px solid var(--v-line); vertical-align: top; }
html.v3 #product .rc-about td:first-child { width: 200px; padding-right: 16px; font-size: 13.5px; color: var(--v-muted); }
@media (max-width: 560px) {
html.v3 #product .rc-about td { display: block; border: 0; padding: 2px 0; }
html.v3 #product .rc-about td:first-child { width: auto; padding-top: 10px; }
html.v3 #product .rc-about tr { display: block; border-bottom: 1px solid var(--v-line); padding-bottom: 8px; }
}
html.v3 #product .v3-body .pfaq { max-width: none; margin: 56px 0 0; padding: 32px 0 0; border-top: 1px solid var(--v-line); }
html.v3 #product .v3-body .pfaq__list { gap: 0; }
html.v3 #product .v3-body .pfaq__i { background: none !important; border: 0 !important; border-top: 1px solid var(--v-line) !important; border-radius: 0 !important; }
html.v3 #product .v3-body .pfaq__i:last-child { border-bottom: 1px solid var(--v-line) !important; }
html.v3 #product .v3-body .pfaq__q { padding: 18px 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--v-text); }
html.v3 #product .v3-body .pfaq__q i { font-size: 20px; font-weight: 400; color: var(--v-muted); }
html.v3 #product .v3-body .pfaq__q:hover i { color: var(--v-text); }
html.v3 #product .v3-body .pfaq__a { padding: 0 0 20px; max-width: 680px; font-size: 15px; line-height: 24px; color: #b4c1ce; }
@media (max-width: 560px) {
html.v3 #product .v3-body .pfaq { margin-top: 40px; padding-top: 24px; }
html.v3 #product .v3-body .pfaq__q { font-size: 15px; line-height: 22px; padding: 16px 0; }
}
/* ---------- панель заказа ----------
Первый вариант был перегружен: карточка → рамка группы тарифов → синее кольцо выбранного,
и два громких синих пятна подряд (кольцо и кнопка). Слева всё лежит на линиях, и правая
колонка выглядела чужой. Теперь одна тихая рамка (или ни одной — вариант Б), тарифы без
своей рамки, выбранный срок — точкой и лёгкой подсветкой; громкий синий только у кнопки. */
html.v3 #product .content .main-info .accept-order {
background: var(--v-surface) !important; border: 1px solid var(--v-line) !important; border-radius: 16px !important;
padding: 24px !important; box-shadow: none !important; scroll-margin-top: 88px;
}
@media (max-width: 560px) { html.v3 #product .content .main-info .accept-order { padding: 20px 16px !important; } }
/* вариант Б (?v3p=b): колонка без карточки, отделена от левой тонкой вертикальной линией */
html.v3b #product .content .main-info .accept-order {
background: none !important; border: 0 !important; border-left: 1px solid var(--v-line) !important; border-radius: 0 !important;
padding: 4px 12px 4px 32px !important; /* справа 12px — подсветка строк выступает за кнопку симметрично слева и справа */
}
@media (max-width: 960px) {
html.v3b #product .content .main-info .accept-order { border-left: 0 !important; border-top: 1px solid var(--v-line) !important; padding: 24px 0 0 !important; }
}
html.v3 .v3-label { margin: 0 0 8px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--v-muted); }
/* тарифы — строки без собственной рамки */
html.v3 #product .accept-order .select { margin: 0; }
html.v3 #product .content .main-info .accept-order .select .select-sub {
display: grid !important; gap: 2px; border: 0; border-radius: 0; overflow: visible; margin: 0 -12px; padding: 0;
}
html.v3 #product .content .main-info .accept-order .select .select-sub .sel-wrapper { width: 100%; margin: 0 !important; padding: 0 !important; border: 0; }
html.v3 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel {
display: grid !important; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
min-height: 56px; padding: 10px 12px !important; margin: 0 !important; border: 0 !important; border-radius: 10px !important;
background: none !important; box-shadow: none !important; position: relative; outline: none;
}
html.v3 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel:hover { background: rgb(255 255 255 / 3%) !important; }
html.v3 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel.active { background: rgb(255 255 255 / 5.5%) !important; box-shadow: none !important; }
html.v3 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel:focus-visible { box-shadow: inset 0 0 0 2px rgb(255 255 255 / 60%) !important; }
/* радио вместо глифа шрифта */
html.v3 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel > i {
font-size: 0 !important; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--v-faint);
background: none !important; -webkit-text-fill-color: initial !important; grid-row: 1 / span 2;
}
html.v3 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel > i::before { content: none !important; }
html.v3 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel:not(.active):hover > i { box-shadow: inset 0 0 0 1.5px var(--v-muted); }
html.v3 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel.active > i {
box-shadow: inset 0 0 0 2px var(--v-blue); background: radial-gradient(circle, var(--v-blue) 0 4px, transparent 4.5px) !important;
}
html.v3 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel .time { font-size: 15px !important; line-height: 20px; }
/* у суточного тарифа нет строки «… в день»: срок занимает обе строки сетки и встаёт по центру,
иначе пустая вторая строка растягивалась и срок уезжал в верхнюю половину */
html.v3 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel.sel--one .time { grid-row: 1 / span 2 !important; align-self: center; }
html.v3 #product .content .main-info .accept-order .select .select-sub .sel-wrapper .sel .price { font-size: 17px !important; line-height: 22px; }
html.v3 #product .accept-order .sel .v2-perday { font-size: 13px; line-height: 18px; margin-top: 2px; }
html.v3 #product .accept-order .sel .v2-best {
padding: 1px 8px; background: rgb(255 255 255 / 8%); border: 1px solid var(--v-line2); color: var(--v-text);
font-size: 11.5px; line-height: 16px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
/* проверка совместимости — прежняя, отступы по сетке панели */
html.v3 #product .accept-order .v2-compat { margin: 16px 0; }
/* кнопка: текст слева, сумма выбранного срока справа, стрелка ↗ — оплата в новой вкладке */
html.v3 #product .content .main-info .accept-order .go-buy { display: block; margin: 0; }
html.v3 #product .content .main-info .accept-order .go-buy .btn.v3-pay {
display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 52px; padding: 0 20px !important;
border-radius: 12px !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important;
}
html.v3 #product .content .main-info .accept-order .go-buy .btn.v3-pay:active { transform: translateY(1px); }
html.v3 #product .content .main-info .accept-order .go-buy .btn.v3-pay:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html.v3 .v3-pay__l { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 20px; font-weight: 650; color: #fff; text-transform: none; letter-spacing: 0; }
html.v3 .v3-pay__l svg { width: 16px; height: 16px; flex: none; }
html.v3 .v3-pay__sum { font-size: 16px; line-height: 20px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.v3 #product .content .main-info .accept-order .go-buy .btn.v3-pay span { color: #fff !important; text-transform: none !important; letter-spacing: 0 !important; }
/* факты после оплаты — иконки без подложек */
html.v3 #product .accept-order .v2-reassure { margin-top: 16px; gap: 8px; padding: 0; }
html.v3 #product .accept-order .v2-fact { gap: 10px; align-items: center; }
html.v3 #product .accept-order .v2-fact__ic { width: 16px; height: 16px; background: none; color: var(--v-muted); border-radius: 0; }
html.v3 #product .accept-order .v2-fact__ic svg { width: 16px; height: 16px; }
html.v3 #product .accept-order .v2-fact__tx { padding-top: 0; font-size: 13.5px; line-height: 20px; }
html.v3 #product .accept-order .v2-fact__a { color: inherit; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 28%); text-underline-offset: 3px; }
html.v3 #product .accept-order .v2-fact__a:hover { color: var(--v-text); text-decoration-color: currentColor; }
/* поддержка — строкой внутри панели */
html.v3 .v3-help { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--v-line); font-size: 13.5px; line-height: 20px; color: var(--v-muted); }
html.v3 .v3-help a { font-weight: 600; color: var(--v-text); text-decoration: underline; text-decoration-color: rgb(255 255 255 / 28%); text-underline-offset: 3px; }
html.v3 .v3-help a:hover { text-decoration-color: currentColor; }
/* недоступное состояние в той же оболочке */
html.v3 #product .accept-order.is-unavail .header-line { margin: 0 0 6px; }
html.v3 #product .accept-order.is-unavail .header-line::before { display: none; }
html.v3 #product .content .main-info .accept-order.is-unavail .header-line .pre-title {
display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px !important; line-height: 24px; font-weight: 650 !important;
letter-spacing: 0 !important; text-transform: none !important; color: var(--v-text) !important;
}
html.v3 #product .content .main-info .accept-order.is-unavail .header-line .pre-title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--v-muted); }
html.v3 #product .content .main-info .accept-order.is-update .header-line .pre-title::before { background: var(--v-amber); }
html.v3 #product .content .main-info .accept-order.is-unavail .header-line .pre-title span {
color: inherit !important; background: none !important; -webkit-text-fill-color: currentColor !important; font: inherit !important; letter-spacing: 0 !important; text-transform: none !important;
}
html.v3 #product .accept-order.is-unavail .so-note { font-size: 14px; line-height: 22px; color: var(--v-muted); margin: 0; }
html.v3 #product .accept-order.is-unavail .so-alt-title { margin: 20px 0 4px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--v-muted); text-transform: none; letter-spacing: 0; }
html.v3 #product .accept-order.is-unavail .so-alt { min-height: 56px; padding: 8px 0 !important; background: none !important; border: 0 !important; border-top: 1px solid var(--v-line) !important; border-radius: 0 !important; }
html.v3 #product .accept-order.is-unavail .so-all { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--v-blue-h) !important; }
/* ---------- полоса покупки на телефоне ---------- */
html.v3 .v2-sticky__b { height: 44px; font-size: 15px; font-weight: 650; }
/* ---------- ниже сетки: другие читы и гайды ---------- */
html.v3 #product ~ .v3-rel { margin-top: 96px; }
html.v3 .v3-rel .rc-rel__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 20px; padding: 0; border: 0; }
html.v3 .v3-rel .rc-rel__bar .rc-rel__head { margin: 0 !important; }
html.v3 .v3-rel .rc-rel__all-link { font-size: 14px; font-weight: 600; color: var(--v-blue-h) !important; text-decoration: none; white-space: nowrap; }
html.v3 .v3-rel .rc-rel__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; overflow: visible; }
html.v3 .v3-rel .rc-rel__row > :nth-child(n+5) { display: none; }
@media (max-width: 1099px) {
html.v3 .v3-rel .rc-rel__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.v3 .v3-rel .rc-rel__row > :nth-child(n+4) { display: none; }
}
html.v3 .v3-rel .rc-rel__card { display: flex; flex-direction: column; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; transform: none; text-decoration: none; overflow: visible; }
html.v3 .v3-rel .rc-rel__card:hover { transform: none; box-shadow: none; border: 0; }
html.v3 .v3-rel .rc-rel__media { position: relative; display: block; aspect-ratio: 16 / 10; padding: 0; border-radius: 12px; overflow: hidden; }
html.v3 .v3-rel .rc-rel__media::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: none; box-shadow: inset 0 0 0 1px var(--v-line); pointer-events: none; }
html.v3 .v3-rel .rc-rel__card:hover .rc-rel__media::after { box-shadow: inset 0 0 0 1px var(--v-line2); }
html.v3 .v3-rel .rc-rel__media img { position: static; display: block; width: 100%; height: 100%; object-fit: cover; filter: none; transform: none; border-radius: 12px; }
html.v3 .v3-rel .rc-rel__card:hover .rc-rel__media img { filter: none; transform: none; }
html.v3 .v3-rel .rc-rel__name { display: block; margin: 12px 0 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--v-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v3 .v3-rel .rc-rel__card:hover .rc-rel__name { color: var(--v-blue-h); }
html.v3 .v3-rel .rc-rel__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
html.v3 .v3-rel .rc-rel__st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--v-muted); }
html.v3 .v3-rel .rc-rel__st i { width: 6px; height: 6px; border-radius: 50%; background: var(--v-green); }
html.v3 .v3-rel .rc-rel__st--onupdate i, html.v3 .v3-rel .rc-rel__st--useatownrisk i { background: var(--v-amber); }
html.v3 .v3-rel .rc-rel__st--detected i { background: var(--v-red); }
html.v3 .v3-rel .rc-rel__price { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--v-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.v3 .v3-rel .rc-rel__price small { font-size: 13px; font-weight: 500; color: var(--v-muted); margin-right: 2px; }
html.v3 .v3-rel .rc-rel__price--empty { font-size: 13px; font-weight: 500; color: var(--v-muted); }
html.v3 .v3-rel .rc-rel__card--off .rc-rel__media img { filter: grayscale(1); opacity: .5; }
@media (max-width: 960px) {
html.v3 .v3-rel .rc-rel__row {
grid-auto-flow: column; grid-auto-columns: min(72vw, 280px); grid-template-columns: none; gap: 12px;
overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
margin-inline: calc(-1 * var(--v3-gut)); padding-inline: var(--v3-gut); scroll-padding-inline: var(--v3-gut);
}
html.v3 .v3-rel .rc-rel__row::-webkit-scrollbar { display: none; }
html.v3 .v3-rel .rc-rel__row > :nth-child(n) { display: flex; scroll-snap-align: start; }
}
html.v3 :is(#product, .v3-brand) ~ .rc-guides { margin-top: 80px !important; }
html.v3 :is(#product, .v3-brand) ~ .rc-guides .rc-guides__sub { margin: 6px 0 24px; max-width: 60ch; font-size: 14px; line-height: 21px; color: var(--v-muted); }
html.v3 :is(#product, .v3-brand) ~ .rc-guides .rc-guides__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
html.v3 :is(#product, .v3-brand) ~ .rc-guides .rc-g { background: none !important; border: 0 !important; border-top: 1px solid var(--v-line2) !important; border-radius: 0 !important; padding: 20px 0 0 !important; box-shadow: none !important; transform: none !important; }
html.v3 :is(#product, .v3-brand) ~ .rc-guides .rc-g__img, html.v3 :is(#product, .v3-brand) ~ .rc-guides .rc-g__m, html.v3 :is(#product, .v3-brand) ~ .rc-guides .bcover { display: none !important; }
html.v3 :is(#product, .v3-brand) ~ .rc-guides .rc-g__b { padding: 0 !important; }
html.v3 :is(#product, .v3-brand) ~ .rc-guides .rc-g__t { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--v-text); }
html.v3 :is(#product, .v3-brand) ~ .rc-guides .rc-g:hover .rc-g__t { color: var(--v-blue-h); }
html.v3 :is(#product, .v3-brand) ~ .rc-guides .rc-g__e { font-size: 14px; line-height: 21px; color: var(--v-muted); }
@media (max-width: 960px) { html.v3 :is(#product, .v3-brand) ~ .rc-guides .rc-guides__grid { grid-template-columns: 1fr; gap: 20px; } }
/* ---------- подвал ---------- */
html.v3 .rcft { margin-top: 96px; background: var(--v-bg) !important; border-top: 1px solid var(--v-line) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.v3 .rcft__in { padding-top: 56px !important; }
html.v3 .rcft__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; }
html.v3 .rcft__brand > a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
html.v3 .rcft__brand > a { margin-bottom: 14px; }
/* у старого логотипа 88px был margin-bottom:14px — при выравнивании по центру знак поднимался на 7px */
html.v3 .rcft__brand > a img { width: 32px; height: 32px; margin: 0; }
html.v3 .rcft__desc { max-width: 320px; font-size: 14px; line-height: 22px; color: var(--v-muted); }
html.v3 .rcft__soc { gap: 8px 20px; }
html.v3 .rcft__soc a { padding: 0 !important; background: none !important; border: 0 !important; font-size: 14px; line-height: 20px; color: #c6d1dc; }
html.v3 .rcft__soc a i { font-size: 14px; color: var(--v-muted); }
html.v3 .rcft__t { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--v-text); text-transform: none; letter-spacing: 0; margin-bottom: 12px; }
html.v3 .rcft__col a { font-size: 14px; line-height: 20px; color: var(--v-muted); }
html.v3 .rcft__col a:hover { color: var(--v-text); }
@media (max-width: 960px) { html.v3 .rcft__grid { grid-template-columns: 1fr 1fr; gap: 32px; } html.v3 .rcft__brand { grid-column: 1 / -1; } }
@media (max-width: 400px) { html.v3 .rcft__grid { grid-template-columns: 1fr; } }
/* ---------- остальные страницы под новую шапку ----------
Отступы 150/100px сверху были рассчитаны на плавающую шапку (top 40 + высота ~80);
полоса 64px стоит в потоке, и под ней оставалась пустота. */
html.v3 #product-wrapper { padding-top: 40px !important; }
html.v3 #cheats-page-wrapper { margin-top: 0 !important; padding-top: 40px !important; }
@media (max-width: 560px) { html.v3 #product-wrapper, html.v3 #cheats-page-wrapper { padding-top: 24px !important; } }
/* =====================================================================
Верх страницы игры (pages/game_top_v3.inc.php): заголовок, «N в продаже · от X»,
вводный текст и обложка игры в ESP-уголках. Лежит в том же .container, что и
прежняя сетка карточек под ним, — левый край совпадает на любой ширине.
===================================================================== */
html.v3 #cheats-page-wrapper.v3-gtop { margin-top: 0 !important; padding: 32px 0 0 !important; }
html.v3 .v3-gtop + #products.cheats { padding-top: 0; }
html.v3 .v3-h1 {
margin: 0; text-align: left; color: var(--v-blue); font-size: clamp(28px, 1.6vw + 17px, 40px); line-height: 1.1;
font-weight: 700; letter-spacing: -.02em; text-wrap: balance;
}
/* справа 15px — как у колонок прежней сетки карточек: обложка кончается там же, где карточки */
html.v3 .v3-ghead { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 56px; align-items: center; padding-right: 15px; }
html.v3 .v3-ghead__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-top: 14px; font-size: 15px; line-height: 22px; color: #c6d1dc; }
html.v3 .v3-ghead__k { display: inline-flex; align-items: center; gap: 8px; }
html.v3 .v3-ghead__k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--v-green); }
html.v3 .v3-ghead__k.is-off::before { background: var(--v-faint); }
html.v3 .v3-ghead__p { font-size: 18px; font-weight: 700; color: var(--v-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.v3 .v3-ghead__p small { font-size: 14px; font-weight: 500; color: var(--v-muted); margin-right: 6px; }
html.v3 .v3-ghead__lead { margin: 18px 0 0; max-width: 640px; font-size: 16px; line-height: 26px; color: #b4c1ce; }
html.v3 .v3-ghead__cov { position: relative; aspect-ratio: 16 / 9; }
html.v3 .v3-ghead__cov img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 1px var(--v-line); }
/* ESP-уголки — рецепт главного кадра товара */
html.v3 .v3-ghead__cov::after {
content: ""; position: absolute; inset: -8px; pointer-events: none; opacity: .45;
--c: rgb(231 237 244 / 70%); --a: 20px; --t: 2px;
background:
linear-gradient(var(--c) 0 0) top left / var(--a) var(--t) no-repeat, linear-gradient(var(--c) 0 0) top left / var(--t) var(--a) no-repeat,
linear-gradient(var(--c) 0 0) top right / var(--a) var(--t) no-repeat, linear-gradient(var(--c) 0 0) top right / var(--t) var(--a) no-repeat,
linear-gradient(var(--c) 0 0) bottom left / var(--a) var(--t) no-repeat, linear-gradient(var(--c) 0 0) bottom left / var(--t) var(--a) no-repeat,
linear-gradient(var(--c) 0 0) bottom right / var(--a) var(--t) no-repeat, linear-gradient(var(--c) 0 0) bottom right / var(--t) var(--a) no-repeat;
}
@media (max-width: 1099px) { html.v3 .v3-ghead { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; } }
@media (max-width: 960px) {
html.v3 .v3-ghead { grid-template-columns: minmax(0, 1fr); gap: 24px; }
html.v3 .v3-ghead__cov { order: -1; max-width: 560px; }
html.v3 .v3-ghead__cov::after { display: none; }
}
@media (max-width: 600px) {
html.v3 #cheats-page-wrapper.v3-gtop { padding-top: 8px !important; }
html.v3 .v3-gtop .v3-crumbs--short { margin: 0; }
html.v3 .v3-gtop .v3-crumbs--short li:first-child { display: block; }
html.v3 .v3-gtop .v3-crumbs--short li[aria-current] { display: none; }
html.v3 .v3-gtop .v3-crumbs--short .v3-crumbs__up { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: #c6d1dc !important; }
html.v3 .v3-gtop .v3-crumbs--short .v3-crumbs__up::before { content: "‹"; font-size: 20px; margin-right: 6px; line-height: 1; }
html.v3 .v3-ghead { gap: 16px; padding-right: 0; }
/* на телефоне обложка во всю ширину: у .container здесь поля по 30px */
html.v3 .v3-ghead__cov { margin-inline: -30px; max-width: none; aspect-ratio: 12 / 5; }
html.v3 .v3-ghead__cov img { border-radius: 0; box-shadow: none; }
html.v3 .v3-ghead__meta { margin-top: 10px; }
html.v3 .v3-ghead__lead { margin-top: 12px; font-size: 15px; line-height: 23px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
/* «В продаже N» и «Сейчас недоступны N» — один заголовок раздела */
html.v3 .v3-gsec { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 64px 0 24px; padding-right: 15px; }
html.v3 .v3-gsec h2, html.v3 #products.cheats .pcards-divider {
margin: 0; font: 700 28px/34px "Onest", system-ui, sans-serif; letter-spacing: -.015em; text-transform: none; color: var(--v-text);
}
html.v3 .v3-gsec h2 span, html.v3 #products.cheats .pcards-divider b { margin-left: 10px; font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--v-muted); font-variant-numeric: tabular-nums; }
/* разделитель внутри сетки: над ним 15px нижнего поля ряда карточек */
html.v3 #products.cheats .pcards-divider { display: block; margin: 49px 0 24px; padding: 0; }
html.v3 #products.cheats .pcards-divider::after { content: none; display: none; }
@media (max-width: 600px) {
html.v3 .v3-gsec { margin: 32px 0 12px; padding-right: 0; }
html.v3 .v3-gsec h2, html.v3 #products.cheats .pcards-divider { font-size: 22px; line-height: 28px; }
html.v3 #products.cheats .pcards-divider { margin-top: 24px; }
}
/* переключатель «Только со спуфером»: прячет в продаваемых карточки без спуфера */
html.v3 .v3-only {
display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0; margin: 0; background: none; border: 0; cursor: pointer;
font: 500 14px/20px "Onest", system-ui, sans-serif; color: #b4c1ce; transition: color .12s;
}
html.v3 .v3-only[hidden] { display: none; }
html.v3 .v3-only::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 28%); }
html.v3 .v3-only span { font-size: 13px; color: var(--v-muted); font-variant-numeric: tabular-nums; }
html.v3 .v3-only:hover, html.v3 .v3-only[aria-pressed="true"] { color: var(--v-text); }
html.v3 .v3-only[aria-pressed="true"]::before {
box-shadow: none;
background: var(--v-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.8 5.2l2.1 2.1 4.3-4.6' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}
html.v3 .v3-only:focus-visible { outline: 2px solid var(--v-blue); outline-offset: 2px; border-radius: 4px; }
html.v3 #products.cheats .products.is-spoof .product-wrapper:not([data-spoof]):not(.is-unavail) { display: none; }
@media (max-width: 600px) { html.v3 .v3-only { height: 44px; } }
/* ---------- страница марки (pages/brand.php): все версии марки по играм ---------- */
html.v3 .v3-bgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; margin: 0; padding: 0 15px 0 0; }
@media (max-width: 1099px) { html.v3 .v3-bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719px) { html.v3 .v3-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; } }
@media (max-width: 600px) { html.v3 .v3-bgrid { padding-right: 0; } }
html.v3 .v3-rel .rc-rel__game { display: block; margin-top: 2px; font-size: 13.5px; line-height: 20px; color: #c6d1dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v3 .v3-rel .rc-rel__bar .rc-rel__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 20px; }