html{
    height: 100%;
}
body{
    font-family: 'Manrope', sans-serif;
    background-color: white;
    font-size: 16px;
    color: #333333;
    display: flex;
    flex-direction: column;
    height: 100%;
}
a{
    font-weight: normal;
    text-decoration: none;
    transition: all .10s linear;
}
a:hover{
    color: #43E9E4;
}
label{
    font-size: 15px;
}
button,
button:active,
button:focus {
    outline: none!important;
}

input, textarea{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
}

@font-face {
  font-family: 'ALS Rubl';
  font-style: normal;
  font-weight: normal;
  src: local('ALS Rubl'), url('../fonts/rouble.woff') format('woff');
}
.btn{
    font-size: 15px;
}
hr{
    height: 1px; background-color: #999999; color: #999999; border: none;
}

h1{
    font-size: 28px;
}

.container{
    max-width: 1400px;
}

*::-webkit-scrollbar{
    width: 7px; height: 7px;
    background-color: #f7f8fa;
}
*::-webkit-scrollbar-thumb{
    background: #4b4b4b;
}

.button-color-scheme1{
    background-color: #6640f4; color: white!important;
}

.button-color-scheme1-light{
    background-color: #ebf7ff; color: black!important;
}

.button-color-scheme2{
    background-color: #f2f2f2; color: black!important;
}

.button-color-scheme3{
    background-color: #141414; color: white!important;
}

.button-color-scheme4{
    background-color: transparent; color: black!important;
}

.button-color-scheme5{
    background-color: #ff8257; color: white!important;
}

.button-color-scheme6{
    background-color: #e45959; color: white!important;
}

.button-color-scheme7{
    background-color: #965eeb; color: white!important;
}

.button-color-scheme1:hover{
    color: white!important;
    opacity: 0.9;
}

.button-color-scheme2:hover{
    color: black!important;
    opacity: 0.9;
}

.button-color-scheme3:hover{
    opacity: 0.9;
}

.button-color-scheme7:hover{
    opacity: 0.9;
}

.form-control{
    border: 1px solid #f7f8fa!important;
    padding: 0 13px;
    height: auto!important;
    border-radius: 10px;
    background-color: #f7f8fa;
    height: 45px!important;
}
.form-control:focus {
    border-color: #007bff!important;
    border-width: 1px;
    box-shadow: none!important;
}
.top-toolbar{
    box-shadow: 0 0 30px rgba(0,0,0,.15);
    background-color: #fff;
    height: 65px;
    padding-left: 15px; padding-right: 15px;
    position: fixed; left: 0; top: 0; right: 0;  z-index: 10;
}
.top-toolbar-container{
     margin: 0 auto; max-width: 1200px;
}
.top-toolbar > div, .top-toolbar > div > div{
    height: 100%;
}
.h-logo-mobile{
    height: 100%;
    display: inline-flex;
    align-items: center;
}
.h-logo-mobile img{
    max-height: 30px;
    margin-top: auto;
    margin-bottom: auto;
}
.h-logo{
    height: 100%;
    display: inline-flex;
    align-items: center;
}
.h-logo img{
    max-height: 40px;
    margin-top: auto;
    margin-bottom: auto;
    width: auto;
}
.f-logo img{
    max-height: 35px;
    margin-top: auto;
    margin-bottom: auto;
    width: auto;
}
.f-logo{
    margin-bottom: 20px; display: block;
}
.toolbar-dropdown > span{
    cursor: pointer;
}
.toolbar-dropdown{
    display: inline-flex; height: 100%; align-items: center; justify-content: center; position: relative;
}
.toolbar-dropdown .la-angle-down{
    margin-left: 7px;
}
.toolbar-dropdown-box{
    position: absolute; top: 0px;
    background-color: white;
    box-shadow: 0 6px 32px #5e5c5c24;
    padding: 15px;
    border-radius: 10px;
    display: none;
    overflow: hidden;
    border: 1px solid transparent;
}

.toolbar-dropdown-active{
    background: rgba(0, 0, 0, 0) linear-gradient(210deg, rgb(215, 245, 255), rgb(236, 239, 255)) repeat scroll 0% 0%; text-decoration: none; color: black;
}
.beboss-head__drop-down-block {
    background-color: #fff;
    box-shadow: 0 0 30px rgba(0,0,0,.15);
}
.header-wow-mobile-category-image img{
    height: 40px;
}
.header-wow-mobile-category-image{
    width: 40px; height: 40px; text-align: center; margin-bottom: 5px; display: inline-block;
}
.header-wow-mobile-all-category-image{
    width: 40px; height: 40px; text-align: center; margin-bottom: 5px; background-color: #eaffd5; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
}
.header-wow-mobile-all-category:hover{
    color: #f95146; cursor: pointer;
}
.header-wow-mobile-category a{
    color: black; display: inline-block; text-align: center; width: 75px; scroll-snap-align: start; margin: 0 5px; text-decoration: none;
    display: block; word-break: break-all; font-size: 12px;
}
.header-wow-mobile-category a:hover{
    color: #f95146;
}
.header-wow-top{
    position: relative; background: linear-gradient(180deg, #34495e 0, #34495e 48px, #fff 0, #fff); color: white; height: 48px; display: flex; align-items: center;
}
.header-wow-sticky-mobile{
    background-color: white; z-index: 10; position: relative;
}
.header-wow-sticky-active{
    position: fixed; top: 0px; left: 0px; right: 0px; box-shadow: 0 2px 8px #00000014;
}
.header-wow-sticky{
    background-color: white; position: relative;
}

.header-wow-sticky-container{
    padding: 15px 0;
    position: relative;
}

.live-search-container{
    background-color: white;  position: relative;
}
.live-search-form-input{
    height: 46px;
    padding-left: 50px;
    padding-right: 15px;
    border-radius: 10px;
    border: 1px solid #f7f8fa;
    width: 100%;
    background-color: #f7f8fa;
    outline: none;
}

.live-search-form-input:focus{
    border: 1px solid #007bff!important;
    outline: none;
    background-color: white;
}

.live-search-form-icon{
    position: absolute; top: 0px; bottom: 0px; left: 0px; border: none; outline: none; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 15px; background-color: transparent; padding-top: 3px;
}
.live-search-form-icon i{
    font-size: 22px;
}

.live-search-results{
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    background-color: white;
    border-radius: 15px;
    z-index: 30;
    padding: 15px 20px;
    overflow: auto;
    max-height: 500px;
    box-shadow: 0 6px 32px #5e5c5c24;
    display: none;
}

.live-search-results-item{
    display: block;
    cursor: pointer;
    padding: 8px 15px;
    color: black;
    border-radius: 10px;
}

.live-search-results-item:hover{
    background-color: #186aff;
    color: white!important;
}

.header-wow-sticky-menu .la-times{
    display: none;
}
.header-wow-top-list{
    padding-top: 2px;
}
.header-wow-top-list a{
    display: inline-block;
    color: white;
    margin-right: 30px;
    font-weight: 500;
}

.header-wow-top-list a:hover{
    color: #43E9E4;
}

.header-wow-top-list a:last-child{
   margin-right: 0px!important;
}

.header-wow-top-list-icon{
    height: 100%;
    display: inline-flex;
    align-items: center;
}

.header-wow-top-list-icon-item{
    color: white;
    margin-right: 15px;
    position: relative;
    cursor: pointer;
}

.header-wow-top-list-icon-item:hover{
    color: #43E9E4;
}

.header-wow-top-list-icon-item i{
    font-size: 26px;
}
.header-wow-top-list-icon-item:last-child{
   margin-right: 0px!important;
}
.header-wow-top-list-profile{
    display: inline-flex;
    align-items: center;
    vertical-align: bottom;
    cursor: pointer;
}

.header-wow-top-list-profile .mini-avatar-img{
    height: 25px;
    width: 25px;
}

.header-wow-top-list-profile .mini-avatar{
    height: 25px;
}

.header-wow-top-list-profile .header-user-dropdown-menu-box{
   top: 40px!important;
}

.header-wow{
    position: fixed;
    background-color: white;
    left: 0;
    right: 0;
    top: 0;
    z-index: 20;
}

.header-button-menu-catalog{
    cursor: pointer;
    border-radius: 3px;
    padding: 0 15px;
    display: inline-flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}
.header-flex-box{
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
}

.header-flex-box-1{

}

.header-flex-box-2{
    margin-left: 15px;
    flex-grow: 1;
    width: 100%;
}
.header-flex-box-3{
    margin-left: 15px;
    display: flex;
}
.header-button-menu-catalog-icon-2{
    display: none;
}
.captchaModalImageContainer {
    border-radius: 10px;
    overflow: hidden;
    height: 55px;
    width: 125px;
    display: inline-flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.captchaModalImageContainer img {
    height: 65px;
}

.container-icon-modal img{
    height: 128px;
}

.container-icon-modal{
    text-align: center; margin-bottom: 10px;
}

.registration-block-step2, .registration-block-step3{
    display: none;
}

.auth-block-tab-container{
    padding: 35px;
    border-radius: 20px;
    background-color: white;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    margin-bottom: 70px;
}

.containerPhoneAllCountry .iti{
    width: 100%!important;
}

.auth-block-tab-check-password, .auth-block-tab-verify-code, .auth-block-tab-registration-data, .auth-block-tab-forgot-verify-code, .auth-block-tab-forgot-new-pass{
    display: none;
}

.auth-block-tab-back{
    display: inline-flex;
    border-radius: 50px;
    height: 35px; width: 35px;
    margin-right: 10px;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    background-color: #f7f8fa; color: black!important;
    cursor: pointer;
}

.auth-block-tab-back:active{
    transform: scale(0.98);
}

.modal-geo-container a{
    color: #333333;
    margin: 4px 0;
    display: block;
}

.modal-geo-search{
    position: relative;
}

.modal-geo-search-results{
    position: absolute;
    top: 50px;
    border-radius: 15px;
    background-color: white;
    box-shadow: 0 6px 32px #5e5c5c24;
    left: 0;
    right: 0;
    display: none;
}

.modal-geo-search-results > div{
    margin: 12px 0;
    overflow: auto;
    max-height: 350px;
}

.modal-geo-search-results a{
    display: block;
    padding: 7px 15px;
    color: #333333;
    font-weight: 500;
}

.modal-geo-search-results a:hover{
    background: rgba(0, 0, 0, 0) linear-gradient(210deg, rgb(215, 245, 255), rgb(236, 239, 255)) repeat scroll 0% 0%;
    color: black!important;
}

.modal-geo-countries-list a{
    display: inline-block;
    margin-right: 15px;
    padding: 8px 15px;
    color: #333333;
    border-radius: 20px;
}

.modal-geo-countries-list a:hover{
    background: rgba(0, 0, 0, 0) linear-gradient(210deg, rgb(215, 245, 255), rgb(236, 239, 255)) repeat scroll 0% 0%;
    color: black!important;
}

.modal-geo-countries-list a.active{
    background: rgba(0, 0, 0, 0) linear-gradient(210deg, rgb(215, 245, 255), rgb(236, 239, 255)) repeat scroll 0% 0%;
    color: black!important;
}

.modal-geo-countries-list a img{
    height: 20px; display: inline-block; margin-right: 5px;
}

.modal-geo-tabs{
    margin-top: 10px;
    margin-bottom: 10px;
}

.modal-geo-tabs > div{
    display: inline-block;
    cursor: pointer;
    padding: 6px 0px;
    margin-right: 20px;
    color: #8f8f8f;
    font-weight: 600;
    font-size: 24px;
    font-weight: 300;
}

.modal-geo-tabs > div.active{
    color: black;
    font-weight: 600;
}

.modal-geo-tab-1, .modal-geo-tab-2{
    display: none;
}

.modal-geo-tab-content{
    max-height: 400px;
}

.width100{
    width: 100%;
}
.inline-block{
    display: inline-block;
}
.btn-custom-mini{
    display: inline-flex; min-height: 35px; text-align: center; padding: 0 15px; cursor: pointer; border-radius: 3px; border: none; outline: none; align-items: center; justify-content: center; font-size: 15px; position: relative;
}
.btn-custom-big{
     text-align: center;  padding: 0px 25px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; border: none; outline: none; width: 270px; max-width: 270px;
}
.btn-custom{
     text-align: center; padding: 0px 25px; min-height: 45px; display: inline-flex!important; align-items: center; justify-content: center; cursor: pointer; border-radius: 3px; border: none; outline: none;
}

.btn-custom:active, .btn-custom-mini:active, .btn-custom-big:active, .header-button-menu-catalog:active, .widget-categories-or-subcategories a:active, .header-wow-sticky-add:active, .header-wow-sticky-auth:active{
    transform: scale(0.98);
}

.btn-custom .spinner-border, .btn-custom-mini .spinner-border{
    width: 14px; height: 14px; border-width: 2px; margin-right: 5px;
}

.btn-custom-big .spinner-border{
    width: 18px; height: 18px; border-width: 2px; margin-right: 5px;
}

.btn-custom:hover, .btn-custom-big:hover, .btn-custom-mini:hover, .btn-custom-mini-icon:hover{
    opacity: 0.9; text-decoration: none;
}
.btn-custom-mini-icon{
    display: inline-flex;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    outline: none;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
}
.btn-custom-mini-icon i{
    font-size: 15px;
}
.btn-color-green{
    background-color: #53b374!important; color: white!important;
}
.btn-color-light{
    background-color: #EFEFEF; color: black!important;
}
.btn-color-blue{
    background-color: #186aff; color: white!important;
}
.btn-color-blue-light{
    background-color: rgb(232, 237, 254); color: black!important;
}
.btn-color-purple{
    background-color: #965EEB; color: white!important;
}
.btn-color-white{
    background-color: white; color: black;
}
.btn-color-gradient{
    color: white!important;
    background-image: linear-gradient(to top right, rgb(255, 99, 172), rgb(252, 98, 171), rgb(248, 96, 171), rgb(245, 95, 170), rgb(242, 94, 169), rgb(239, 93, 169), rgb(235, 91, 168), rgb(232, 90, 168), rgb(229, 89, 167), rgb(226, 88, 166), rgb(222, 86, 166), rgb(219, 85, 165));
}
.btn-color-transparent{
    background-color: transparent; color: black!important;
}
.btn-color-danger{
    background-color: #E83587;
    color: white!important;
}

.toolbar-link{
    height: 100%;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: #1c1c1c;
    vertical-align: bottom;
    cursor: pointer;
    transition: all .10s linear;
    text-align: center;
}
.icon-link{
    display: inline-block; font-size: 21px;
}
.link-add-active{
    background: rgba(0, 0, 0, 0) linear-gradient(210deg, rgb(215, 245, 255), rgb(236, 239, 255)) repeat scroll 0% 0%;
}

.header-wow-sticky-add{
   border-radius: 3px;
   padding: 0 15px;
   display: inline-flex;
   height: 100%;
   align-items: center;
   justify-content: center;
   width: 200px;
}

.header-wow-sticky-add:hover{
  opacity: 0.9; color: white!important;
}

.header-wow-sticky-auth{
     border-radius: 10px;
     padding: 0 15px;
     display: inline-flex;
     height: 100%;
     align-items: center;
     justify-content: center;
     border: none;
     outline: none;
}
.header-wow-sticky-list > div{
    margin-right: 15px;
}
.header-wow-sticky-list > div:last-child{
   margin-right: 0px!important;
}
.header-wow-sticky-list > div a{
   color: #565656; font-size: 15px;
}
.header-wow-sticky-auth:hover{
  text-decoration: none;  opacity: 0.9;
}

.live-search-container-geo{
    position: absolute; top: 1px; right: 1px; bottom: 1px; padding-right: 15px; display: inline-flex; align-items: center;
    border-bottom-right-radius: 10px; border-top-right-radius: 10px; padding-left: 15px;
}
.live-search-container-geo > div{
    display: inline-block;
}

.live-search-container-geo-name{
    color: #0066f5; font-weight: 500; cursor: pointer; font-size: 15px;
}

.form-label-error, .verify-code-label-error{
    display: none; color: red; margin-top: 5px;
}

.modal .btn-close {
  background-color: #f7f8fa;
  border-radius: 50px;
  font-size: 10px;
  opacity: 1;
  height: 30px; width: 30px;
  cursor: pointer;
  z-index: 5;
  position: absolute;
  top: 15px;
  right: 15px;
}
.modal .btn-close:hover, .modal .btn-close:focus, .modal .btn-close:active {
  opacity: 1;
}

.modal .modal-header, .modal .modal-footer{
  position: relative; border: none!important;
}
.modal .modal-header .btn-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 20;
}

.modal .modal-header{
    padding: 0px;
}

.modal-content {
  box-shadow: 0 0.31rem 1.25rem 0 rgba(75, 70, 92, 0.4); border-radius: 15px!important;
}

.modal-body{
    padding-left: 35px; padding-top: 35px; padding-right: 35px; padding-bottom: 35px;
}

.modal-footer{
    padding-left: 30px; padding-bottom: 30px; padding-right: 30px;
}

.modal-metro-station-color{
    display: inline-block; width: 15px; height: 3px; vertical-align: middle;
}

.mr5{
    margin-right: 5px;
}

.mr10{
    margin-right: 10px;
}

.circle-indicator-count{
    display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 50px; padding: 0 5px;
    color: white; background-color: red; font-size: 10px;
}

.header-button-menu-catalog-icon-1 i{
    font-size: 20px;
}

.header-button-menu-catalog-icon-1{
    margin-right: 5px;
}

.big-catalog-menu-container{
    position: relative; display: none;
}

.big-catalog-menu-content{
    border-radius: 25px;
    background-color: white;
    z-index: 10;
    padding: 25px;
    box-shadow: 0 0.25rem 1.125rem rgba(75, 70, 92, 0.1);
    position: absolute;
    left: 0; top: 15px; right: 0;
    height: 450px;
}

.big-catalog-menu-content-categories{
    overflow: auto;
    height: 400px;
}

.big-catalog-menu-category-item{
    padding: 9px 12px;
    display: flex;
    border-radius: 10px;
    color: black;
}

.big-catalog-menu-category-item:hover{
    background-color: #f7f8fa;
    color: black!important;
}

.big-catalog-menu-category-item.active{
    background-color: #f7f8fa;
    color: black!important;
}

.big-catalog-menu-category-item > div{
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.big-catalog-menu-category-item > div img{
    width: 100%;
    object-fit: cover;
}

.big-catalog-menu-banners-item{
    border-radius: 15px;
    background-color: #f7f8fa;
    overflow: hidden;
    width: 100%;
    height: 100px;
    display: block;
    margin-bottom: 10px;
}

.big-catalog-menu-banners-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.big-catalog-menu-content-subcategories{
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    height: 400px;
}

.big-catalog-menu-content-subcategories a{
    display: block;
    color: black;
    margin: 4px 0;
}

.big-catalog-menu-content-subcategories a:hover{
    color: #0066f5;
}

.mt100{
    margin-top: 100px!important;
}

.mt50{
    margin-top: 50px!important;
}

.mt40{
    margin-top: 40px!important;
}

.mt30{
    margin-top: 30px!important;
}

.mt25{
    margin-top: 25px!important;
}

.mt15{
    margin-top: 15px!important;
}

.mt20{
    margin-top: 20px!important;
}

.mt10{
    margin-top: 10px!important;
}

.mt5{
    margin-top: 5px!important;
}

.mt0{
    margin-top: 0px!important;
}

.mb0{
    margin-bottom: 0px!important;
}

.mb30{
    margin-bottom: 30px!important;
}

.widget-categories-or-subcategories a{
    display: block;
    background-color: #f7f8fa;
    padding: 15px;
    border-radius: 15px;
    overflow: hidden;
    height: 100px;
    position: relative;
    margin-bottom: 15px;
    word-break: break-word;
}

.widget-categories-or-subcategories a:hover{
    background-color: #186aff;
}

.widget-categories-or-subcategories a:hover > div{
    color: white!important;
}

.widget-categories-or-subcategories a div{
    z-index: 5;
    color: black;
    position: relative;
}

.widget-categories-or-subcategories a img{
    position: absolute; right: 0; bottom: 0px;
    height: 80px;
}

.widget-categories-or-subcategories a.active{
    background-color: #186aff;
}

.widget-categories-or-subcategories a.active > div{
    color: white!important;
}

.widget-categories-or-subcategories-button-all{
    text-align: center;
}

.widget-categories-or-subcategories-hide{
    height: 100px;
    overflow: hidden;
}

.widget-categories-or-subcategories-button-all button{
    margin-top: 15px;
}

.image-autofocus{
    position: relative;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container-item-images{
    overflow: hidden;
    border-radius: 15px;
    position: relative;
    background-color: #F7F8FA;
}

.container-item-grid{
    color: black;
    margin-bottom: 25px;
    display: block;
}

.container-item-grid:hover{
    color: black!important;
}

.container-item-images:hover .container-item-labels{
    display: none;
}

.container-item-images:hover .container-item-images-indicator{
    display: flex;
}

.container-item-grid-content-prices{
    margin-top: 10px;
}

.container-item-grid-content-prices .card-item-price-now{
    font-size: 22px;
    font-weight: 600;
}

.container-item-grid-content-prices .card-item-price-old{
    font-size: 18px;
    color: #f81155;
    text-decoration: line-through;
    margin-left: 5px;
    display: inline-block;
}

.container-item-grid-content-prices .card-item-price-measure-title{
    font-size: 15px;
}

.container-item-grid-content-title{
    font-size: 16px;
    font-weight: 500;
}

.container-item-grid-content-title:hover{
    color: blue;
}

.container-item-grid-content-additionally{
    margin-top: 10px;
}

.container-item-grid-content-additionally span{
    #display: block;
    font-size: 13px;
    color: gray;
}

.container-item-labels{
    position: absolute;
    left: 10px;
    bottom: 10px;
}

.container-item-labels > div{
    display: block;
    margin-top: 5px;
}

.container-item-labels > div > span{
    padding: 3px 10px;
    border-radius: 8px!important;
    color: white;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
}

.container-item-labels-1 > span{
    background-color: blue;
}

.container-item-labels-2 > span{
    background-color: #f81155;
}

.container-item-labels-3 > span{
    background-color: #309a3e;
}

.container-item-labels-4 > span{
    background-color: #f96f2e;
}

.container-item-images-indicator{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
    display: none;
}

.container-item-images-indicator span{
    border-bottom: 2px solid white;
    margin: 0 3px;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: end;
    align-items: flex-end;
}

.container-item-images-indicator span:hover{border-bottom:2px solid black;}

.catalog-container-options-view-item i{
    font-size: 25px;
}

.catalog-container-options-view-item span{
    display: inline-block;
    margin-left: 10px;
    color: black;
    cursor: pointer;
}

.catalog-container-options-view-item span.active{
    color: blue!important;
}

.container-item-favorite{
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    z-index: 5;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: white;
}

.container-item-favorite i{
    font-size: 22px;
    color: black;
}

.container-item-favorite i.ti-heart-filled{
    color: red;
}

.container-item-list{
    color: black;
    margin-bottom: 25px;
    display: block;
    border-radius: 10px;
    position: relative;
}

.container-item-list-content-title{
    font-size: 21px;
    font-weight: 500;
}

.container-item-list-content-title:hover{
    color: blue;
}

.container-item-list-content-desc{
    margin-top: 10px;
}

.container-item-list-content-additionally{
    margin-top: 10px;
}

.container-item-list-content-additionally span{
    display: block;
    font-size: 13px;
    color: gray;
}

.container-item-list:hover{
    color: black!important;
}

.container-item-grid-highlight .container-item-grid-content{
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    background-color: #f7ffe5;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.container-item-grid-highlight .container-item-images{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.container-item-grid-highlight .container-item-grid-content-prices{
    margin-top: 0px;
}

.container-item-list-highlight{
    background-color: #f7ffe5;
}

.container-item-list-highlight .container-item-list-content{
    padding-left: 0px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.uni-dropdown{
    position: relative;
}

.uni-dropdown-content-align-left{
    left: 0;
}

.uni-dropdown-content-align-right{
    right: 0;
}

.uni-dropdown-content-align-bottom{
    bottom: 30px!important;
    top: auto!important;
}

.uni-dropdown-content{
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .15);
    position: absolute;
    top: 30px;
    background-color: white;
    z-index: 10;
    display: none;
    text-align: left!important;
    width: max-content;
}

.uni-dropdown-content-position-bottom{
    bottom: 30px!important;
    top: auto !important;
}

.uni-dropdown-content-item{
    display: flex;
    border-radius: 10px;
    padding: 7px 15px;
    color: black;
    cursor: pointer;
    font-size: 15px;
}

.uni-dropdown-content-item:hover{
    background-color: #f7f8fa;
    color: black!important;
}

.uni-dropdown-name{
    cursor: pointer;
}

.uni-dropdown-content-stretch{
    left: 0;
    right: 0;
    width: 100%!important;
}

.uni-dropdown-content-width-300{
    width: 300px;
}

.uni-dropdown-content-top-50{
    top: 50px!important;
}

.params-form-item-price input[type=text]{
    height: 42px!important;
    background-color: white;
    border: 1px solid #dcdcdc!important;
}

.params-form-item{
    margin-bottom: 15px;
}

.params-form-item-label{
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 16px;
}

.form-switch {
  padding-left: 2.5em;
}
.form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='6' fill='rgba%2875, 70, 92, 0.2%29'/%3E%3C/svg%3E%0A");
  width: 2em;
  margin-left: -2.5em;
  background-image: var(--bs-form-switch-bg);
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-switch .form-check-input {
    transition: none;
  }
}
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='6' fill='%237367f0'/%3E%3C/svg%3E%0A");
}
.form-switch .form-check-input:checked {
  background-position: right center;
  --bs-form-switch-bg: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='6' fill='%23fff'/%3E%3C/svg%3E%0A");
}
.form-switch.form-check-reverse {
  padding-right: 2.5em;
  padding-left: 0;
}
.form-switch.form-check-reverse .form-check-input {
  margin-right: -2.5em;
  margin-left: 0;
}

.switch {
  margin-right: 0.75rem;
  position: relative;
  vertical-align: middle;
  margin-bottom: 0;
  display: inline-block;
  border-radius: 30rem;
  cursor: pointer;
  min-height: 1.35rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.switch .switch-label:first-child {
  padding-right: 0.5rem;
}
.switch .switch-input ~ .switch-label {
  padding-left: 3rem;
}
.switch .switch-toggle-slider {
  width: 2.5rem;
  height: 1.35rem;
  font-size: 0.625rem;
  line-height: 1.35rem;
  border: 1px solid transparent;
  top: 0;
}
.switch .switch-toggle-slider i {
  position: relative;
  font-size: 0.9375rem;
  top: -1.35px;
}
.switch .switch-label {
  top: 0.01875rem;
}
.switch .switch-input:checked ~ .switch-toggle-slider::after {
  left: 1.15rem;
}
.switch .switch-toggle-slider::after {
  top: -1px;
  margin: 0.25rem 0 0 0.25rem;
  width: 13px;
  height: 13px;
}
.switch .switch-on {
  padding-left: 0.25rem;
  padding-right: 1.1rem;
}
.switch .switch-off {
  padding-left: 1.1rem;
  padding-right: 0.25rem;
}
[dir=rtl] .switch .switch-label {
  padding-right: 3rem;
  padding-left: 0;
}
[dir=rtl] .switch .switch-input:checked ~ .switch-toggle-slider::after {
  left: auto;
  right: 1.15rem;
}
[dir=rtl] .switch .switch-toggle-slider::after {
  margin-left: 0;
  margin-right: 0.25rem;
}
[dir=rtl] .switch .switch-on {
  padding-left: 1.1rem;
  padding-right: 0.25rem;
}
[dir=rtl] .switch .switch-off {
  padding-left: 0.25rem;
  padding-right: 1.1rem;
}
[dir=rtl] .switch {
  margin-left: 0.75rem;
  margin-right: 0;
}

.switch-input {
  opacity: 0;
  position: absolute;
  padding: 0;
  margin: 0;
  z-index: -1;
}

.switch-toggle-slider {
  position: absolute;
  overflow: hidden;
  border-radius: 30rem;
  background: transparent;
  border: 1px solid rgba(75, 70, 92, 0.2) !important;
  color: rgba(75, 70, 92, 0.4);
  transition-duration: 0.2s;
  transition-property: left, right, background, box-shadow;
  cursor: pointer;
  user-select: none;
}
.switch-toggle-slider i {
  top: -2.3px !important;
}

.switch-label {
  display: inline-block;
  font-weight: 400;
  color: #6f6b7d;
  position: relative;
  cursor: default;
}

.switch-off,
.switch-on {
  height: 100%;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  transition-duration: 0.2s;
  transition-property: left, right;
}

.switch-on {
  left: -100%;
}
[dir=rtl] .switch-on {
  left: auto;
  right: -100%;
}
.switch-input:not(:checked) ~ .switch-toggle-slider .switch-on {
  color: transparent;
}

.switch-off {
  left: 0;
}
[dir=rtl] .switch-off {
  right: 0;
  left: auto;
}

.switch-input:checked ~ .switch-toggle-slider {
  border-color: #7367f0;
}
.switch-input:checked ~ .switch-toggle-slider:after {
  background: #fff;
}
.switch-input:checked ~ .switch-toggle-slider .switch-on {
  left: 0;
}
[dir=rtl] .switch-input:checked ~ .switch-toggle-slider .switch-on {
  right: 0;
  left: auto;
}
.switch-input:checked ~ .switch-toggle-slider .switch-off {
  left: 100%;
  color: transparent;
}
[dir=rtl] .switch-input:checked ~ .switch-toggle-slider .switch-off {
  right: 100%;
  left: auto;
}

.switch-toggle-slider::after {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  border-radius: 999px;
  background: rgba(75, 70, 92, 0.2);
  box-shadow: none;
  transition-duration: 0.2s;
  transition-property: left, right, background;
}
[dir=rtl] .switch-toggle-slider::after {
  right: 0;
  left: auto;
}

.switches-stacked::after {
  display: block;
  clear: both;
  content: "";
}
.switches-stacked .switch {
  display: block;
}
html:not([dir=rtl]) .switches-stacked .switch {
  margin-right: 0;
}
[dir=rtl] .switches-stacked .switch {
  margin-left: 0;
}
.switches-stacked .switch:not(:last-child) {
  margin-bottom: 0.75rem;
}

.switch-square,
.switch-square .switch-toggle-slider {
  border-radius: 0.375rem;
}

.switch-square .switch-toggle-slider::after {
  border-radius: calc(0.375rem - 2px);
}

.switch.switch-outline .switch-toggle-slider:after {
  background: rgba(75, 70, 92, 0.2);
}

.switch-input:disabled ~ .switch-toggle-slider {
  opacity: 0.5;
  background: rgba(75, 70, 92, 0.2);
  border-color: transparent !important;
}
.switch-input:disabled ~ .switch-toggle-slider::after {
  box-shadow: none;
}
.switch-input:disabled ~ .switch-label {
  color: #a5a3ae;
}

.switch-sm {
  min-height: 1.125rem;
  font-size: 0.75rem;
  line-height: 1.48;
}
.switch-sm .switch-label:first-child {
  padding-right: 0.5rem;
}
.switch-sm .switch-input ~ .switch-label {
  padding-left: 2.5rem;
}
.switch-sm .switch-toggle-slider {
  width: 2rem;
  height: 1.125rem;
  font-size: 0.625rem;
  line-height: 1.125rem;
  border: 1px solid transparent;
  top: 0;
}
.switch-sm .switch-toggle-slider i {
  position: relative;
  font-size: 0.75rem;
  top: -2px;
}
.switch-sm .switch-label {
  top: 0.0075rem;
}
.switch-sm .switch-input:checked ~ .switch-toggle-slider::after {
  left: 0.875rem;
}
.switch-sm .switch-toggle-slider::after {
  top: -1px;
  margin: 0.25rem 0 0 0.25rem;
  width: 10px;
  height: 10px;
}
.switch-sm .switch-on {
  padding-left: 0.25rem;
  padding-right: 0.875rem;
}
.switch-sm .switch-off {
  padding-left: 0.875rem;
  padding-right: 0.25rem;
}
[dir=rtl] .switch-sm .switch-label {
  padding-right: 2.5rem;
  padding-left: 0;
}
[dir=rtl] .switch-sm .switch-input:checked ~ .switch-toggle-slider::after {
  left: auto;
  right: 0.875rem;
}
[dir=rtl] .switch-sm .switch-toggle-slider::after {
  margin-left: 0;
  margin-right: 0.25rem;
}
[dir=rtl] .switch-sm .switch-on {
  padding-left: 0.875rem;
  padding-right: 0.25rem;
}
[dir=rtl] .switch-sm .switch-off {
  padding-left: 0.25rem;
  padding-right: 0.875rem;
}

.switch-lg {
  min-height: 1.75rem;
  font-size: 1rem;
  line-height: 1.47;
}
.switch-lg .switch-label:first-child {
  padding-right: 0.5rem;
}
.switch-lg .switch-input ~ .switch-label {
  padding-left: 3.75rem;
}
.switch-lg .switch-toggle-slider {
  width: 3.25rem;
  height: 1.75rem;
  font-size: 0.625rem;
  line-height: 1.75rem;
  border: 1px solid transparent;
  top: 0;
}
.switch-lg .switch-toggle-slider i {
  position: relative;
  font-size: 1rem;
  top: -2px;
}
.switch-lg .switch-label {
  top: 0.14rem;
}
.switch-lg .switch-input:checked ~ .switch-toggle-slider::after {
  left: 1.5rem;
}
.switch-lg .switch-toggle-slider::after {
  top: -1px;
  margin: 0.25rem 0 0 0.25rem;
  width: 20px;
  height: 20px;
}
.switch-lg .switch-on {
  padding-left: 0.25rem;
  padding-right: 1.5rem;
}
.switch-lg .switch-off {
  padding-left: 1.5rem;
  padding-right: 0.25rem;
}
[dir=rtl] .switch-lg .switch-label {
  padding-right: 3.75rem;
  padding-left: 0;
}
[dir=rtl] .switch-lg .switch-input:checked ~ .switch-toggle-slider::after {
  left: auto;
  right: 1.5rem;
}
[dir=rtl] .switch-lg .switch-toggle-slider::after {
  margin-left: 0;
  margin-right: 0.25rem;
}
[dir=rtl] .switch-lg .switch-on {
  padding-left: 1.5rem;
  padding-right: 0.25rem;
}
[dir=rtl] .switch-lg .switch-off {
  padding-left: 0.25rem;
  padding-right: 1.5rem;
}

.switch-secondary.switch .switch-input:checked ~ .switch-toggle-slider {
  background: #a8aaae;
  border-color: #a8aaae !important;
  color: #fff;
}

.switch-secondary.switch .switch-input:active ~ .switch-toggle-slider {
  box-shadow: none;
}

.switch-secondary.switch .switch-input:focus ~ .switch-toggle-slider {
  border: 1px solid #a8aaae;
  box-shadow: 0 0 0.25rem 0.05rem rgba(115, 103, 240, 0.1);
}

.switch-success.switch .switch-input:checked ~ .switch-toggle-slider {
  background: #28c76f;
  border-color: #28c76f !important;
  color: #fff;
}

.switch-success.switch .switch-input:active ~ .switch-toggle-slider {
  box-shadow: none;
}

.switch-success.switch .switch-input:focus ~ .switch-toggle-slider {
  border: 1px solid #28c76f;
  box-shadow: 0 0 0.25rem 0.05rem rgba(115, 103, 240, 0.1);
}

.switch-info.switch .switch-input:checked ~ .switch-toggle-slider {
  background: #00cfe8;
  border-color: #00cfe8 !important;
  color: #fff;
}

.switch-info.switch .switch-input:active ~ .switch-toggle-slider {
  box-shadow: none;
}

.switch-info.switch .switch-input:focus ~ .switch-toggle-slider {
  border: 1px solid #00cfe8;
  box-shadow: 0 0 0.25rem 0.05rem rgba(115, 103, 240, 0.1);
}

.switch-warning.switch .switch-input:checked ~ .switch-toggle-slider {
  background: #ff9f43;
  border-color: #ff9f43 !important;
  color: #fff;
}

.switch-warning.switch .switch-input:active ~ .switch-toggle-slider {
  box-shadow: none;
}

.switch-warning.switch .switch-input:focus ~ .switch-toggle-slider {
  border: 1px solid #ff9f43;
  box-shadow: 0 0 0.25rem 0.05rem rgba(115, 103, 240, 0.1);
}

.switch-danger.switch .switch-input:checked ~ .switch-toggle-slider {
  background: #ea5455;
  border-color: #ea5455 !important;
  color: #fff;
}

.switch-danger.switch .switch-input:active ~ .switch-toggle-slider {
  box-shadow: none;
}

.switch-danger.switch .switch-input:focus ~ .switch-toggle-slider {
  border: 1px solid #ea5455;
  box-shadow: 0 0 0.25rem 0.05rem rgba(115, 103, 240, 0.1);
}

.switch-dark.switch .switch-input:checked ~ .switch-toggle-slider {
  background: #4b4b4b;
  border-color: #4b4b4b !important;
  color: #fff;
}

.switch-dark.switch .switch-input:active ~ .switch-toggle-slider {
  box-shadow: none;
}

.switch-dark.switch .switch-input:focus ~ .switch-toggle-slider {
  border: 1px solid #4b4b4b;
  box-shadow: 0 0 0.25rem 0.05rem rgba(115, 103, 240, 0.1);
}

.switch-gray.switch .switch-input:checked ~ .switch-toggle-slider {
  background: rgba(75, 70, 92, 0.05);
  border-color: rgba(75, 70, 92, 0.05) !important;
  color: #fff;
}

.switch-gray.switch .switch-input:active ~ .switch-toggle-slider {
  box-shadow: none;
}

.switch-gray.switch .switch-input:focus ~ .switch-toggle-slider {
  border: 1px solid rgba(75, 70, 92, 0.05);
  box-shadow: 0 0 0.25rem 0.05rem rgba(115, 103, 240, 0.1);
}

.switch .valid-feedback,
.switch .invalid-feedback {
  padding-left: 0.5rem;
}

.was-validated .switch-input:valid ~ .switch-label, .switch-input.invalid ~ .switch-label, .switch-input.is-valid ~ .switch-label {
  color: #28c76f;
}
.was-validated .switch-input:valid ~ .valid-feedback,
.was-validated .switch-input:valid ~ .valid-tooltip, .switch-input.invalid ~ .valid-feedback,
.switch-input.invalid ~ .valid-tooltip, .switch-input.is-valid ~ .valid-feedback,
.switch-input.is-valid ~ .valid-tooltip {
  display: block;
}
.was-validated .switch-input:valid ~ .switch-toggle-slider, .switch-input.invalid ~ .switch-toggle-slider, .switch-input.is-valid ~ .switch-toggle-slider {
  border: 1px solid #28c76f !important;
}
.was-validated .switch-input:valid:checked ~ .switch-toggle-slider, .switch-input.invalid:checked ~ .switch-toggle-slider, .switch-input.is-valid:checked ~ .switch-toggle-slider {
  background: #28c76f;
  border-color: #28c76f !important;
  color: #fff;
}
.was-validated .switch-input:valid:focus ~ .switch-toggle-slider, .switch-input.invalid:focus ~ .switch-toggle-slider, .switch-input.is-valid:focus ~ .switch-toggle-slider {
  box-shadow: 0 0 0.25rem 0.05rem rgba(40, 199, 111, 0.4);
}
.was-validated .switch-input:valid:active ~ .switch-toggle-slider, .switch-input.invalid:active ~ .switch-toggle-slider, .switch-input.is-valid:active ~ .switch-toggle-slider {
  box-shadow: none;
}

.was-validated .switch-input:invalid ~ .switch-label, .switch-input.invalid ~ .switch-label, .switch-input.is-invalid ~ .switch-label {
  color: #ea5455;
}
.was-validated .switch-input:invalid ~ .invalid-feedback,
.was-validated .switch-input:invalid ~ .invalid-tooltip, .switch-input.invalid ~ .invalid-feedback,
.switch-input.invalid ~ .invalid-tooltip, .switch-input.is-invalid ~ .invalid-feedback,
.switch-input.is-invalid ~ .invalid-tooltip {
  display: block;
}
.was-validated .switch-input:invalid ~ .switch-toggle-slider, .switch-input.invalid ~ .switch-toggle-slider, .switch-input.is-invalid ~ .switch-toggle-slider {
  border: 1px solid #ea5455 !important;
}
.was-validated .switch-input:invalid:checked ~ .switch-toggle-slider, .switch-input.invalid:checked ~ .switch-toggle-slider, .switch-input.is-invalid:checked ~ .switch-toggle-slider {
  background: #ea5455;
  border-color: #ea5455 !important;
  color: #fff;
}
.was-validated .switch-input:invalid:focus ~ .switch-toggle-slider, .switch-input.invalid:focus ~ .switch-toggle-slider, .switch-input.is-invalid:focus ~ .switch-toggle-slider {
  box-shadow: 0 0 0.25rem 0.05rem rgba(234, 84, 85, 0.4);
}
.was-validated .switch-input:invalid:active ~ .switch-toggle-slider, .switch-input.invalid:active ~ .switch-toggle-slider, .switch-input.is-invalid:active ~ .switch-toggle-slider {
  box-shadow: none;
}

.form-switch {
  padding-left: 0;
  padding-right: 2.5em;
}
.form-switch .form-check-input {
  margin-left: 0;
  margin-right: -2.5em;
  background-position: right center;
}
.form-switch .form-check-input:checked {
  background-position: left center;
}
.switch-input:checked ~ .switch-toggle-slider {
    background: #005bff;
    border-color: #005bff !important;
    color: #fff;
}

.mb5{
    margin-bottom: 5px;
}

.mb10{
    margin-bottom: 10px;
}

.mb15{
    margin-bottom: 15px;
}

.mb40{
    margin-bottom: 40px;
}

.mb50{
    margin-bottom: 50px;
}

.catalog-container-items{
    min-height: 500px;
    margin-top: 25px;
}

.uni-select{
    position: relative;
}

.uni-select-name{
    border-radius: 10px;
    padding: 0px 15px;
    background-color: #f7f8fa;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    height: 45px;
}

.uni-select-name:after {
  content: url("data:image/svg+xml,%0A%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.423 6.91a.833.833 0 0 0-1.179 0L10 12.156 4.756 6.91a.833.833 0 0 0-1.178 1.178l5.833 5.833a.833.833 0 0 0 1.179 0l5.833-5.833a.833.833 0 0 0 0-1.178Z' fill='%23000'/%3E%3C/svg%3E");
  position: absolute;
  right: 15px;
  top: 13px;
}

.uni-select-name{
    border-radius: 10px;
    padding: 0px 15px;
    background-color: #f7f8fa;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    height: 45px;
}

.uni-select-name:active{
    transform: scale(0.98);
}

.uni-select-content{
    padding: 15px 0;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .15);
    position: absolute;
    top: 52px;
    left: 0px;
    right: 0px;
    background-color: white;
    z-index: 10;
    min-width: 200px;
    display: none;
}

.uni-select-content-container{
    overflow: auto;
    max-height: 250px;
}

.uni-select-content-item{
    padding: 8px 15px;
    cursor: pointer;
    position: relative;
    display: block;
}

.uni-select-content-item:hover{
    background-color: #f7f8fa;
}

.uni-select-content-item input{
    display: none;
}

.uni-select-content-item.uni-select-item-active:after {
  content: "🔴";
  position: absolute;
  right: 15px;
  top: 14px;
  font-size: 8px;
}

.uni-select-content-input{
    padding: 0 15px;
}

.uni-select-content-input input{
    height: 42px!important;
    background-color: white;
    border: 1px solid #dcdcdc!important;
}

.uni-select-content-search input{
    height: 42px!important;
    background-color: white;
    border: 1px solid #dcdcdc!important;
}

.uni-select-content-search{
    margin-bottom: 15px;
    padding: 0 15px;
}

.uni-select-open .uni-select-content{
    display: block;
}

.top-banner-item{
    border-radius: 15px;
    height: 140px;
    width: 500px;
    background-color: #f7f8fa;
    overflow: hidden;
}

.top-banners-container{
    margin-bottom: 15px;
}

.params-form-sticky{
    position: relative;
}

.params-buttons-sticky{
    position: sticky;
    bottom: 0px;
    left: 0;
    right: 0;
    background-color: white;
    padding-bottom: 10px;
    padding-top: 10px;
}

.catalog-filter-links-container{
    margin-top: 15px;
}

.catalog-filter-links-container a{
    display: inline-block;
    padding: 5px 0;
    margin-right: 15px;
}

.catalog-container-options-links-inline > div{
    display: inline-block;
}

.catalog-container-links-inline-item{
    display: inline-block;
    margin-right: 15px;
    color: black!important;
    cursor: pointer;
}

.catalog-container-links-inline-item:hover{
    background-color: #f7f8fa;
}

.catalog-not-found{
    text-align: center;
    margin-top: 120px;
    margin-bottom: 120px;
}

.catalog-not-found h4{
    font-weight: bold;
    margin-bottom: 15px;
}

.catalog-not-found p{
    margin: 0;
}

.container-item-grid-skeleton{
    color: black;
    margin-bottom: 25px;
    display: block;
}

.container-item-images-skeleton{
    height: 225px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    background-color: #F7F8FA;
}

.container-item-grid-content-title-skeleton{
    border-radius: 3px;
    display: block;
    background-color: #F7F8FA;
    height: 20px;
    margin-top: 10px;
}

.container-item-grid-content{
    word-break: break-word;
}

.container-item-grid-content-prices-skeleton{
    border-radius: 3px;
    display: block;
    background-color: #F7F8FA;
    height: 20px;
    margin-top: 10px;
}

.container-item-list-skeleton{
    color: black;
    margin-bottom: 25px;
    display: block;
    border-radius: 10px;
}

.container-item-images-skeleton{
    height: 225px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    background-color: #F7F8FA;
}

.container-item-list-content-title-skeleton{
    border-radius: 3px;
    display: block;
    background-color: #F7F8FA;
    height: 20px;
    margin-top: 10px;
}

.container-item-list-content-prices-skeleton{
    border-radius: 3px;
    display: block;
    background-color: #F7F8FA;
    height: 20px;
    margin-top: 10px;
}

.container-item-list-content-prices .card-item-price-now{
    font-size: 22px;
    font-weight: 600;
}

.container-item-list-content-prices .card-item-price-old{
    font-size: 18px;
    color: #f81155;
    text-decoration: line-through;
    margin-left: 5px;
    display: inline-block;
}

.container-item-list-content-prices .card-item-price-measure-title{
    font-size: 15px;
}

.container-item-list-content-desc-skeleton{
    border-radius: 3px;
    display: block;
    background-color: #F7F8FA;
    height: 100px;
    margin-top: 10px;
}

.mr5{
    margin-right: 5px!important;
}

.mr10{
    margin-right: 10px!important;
}

.mb20{
    margin-bottom: 20px;
}

.mb25{
    margin-bottom: 25px;
}

.block-social-auth-list{
    display: inline-block;
    margin-top: 15px;
}

.block-social-auth-list img{
    height: 32px;
}

.block-social-auth-list a{
    transition: 0.5s;
    display: inline-block;
}

.block-social-auth-list a:not(:last-child) {
    margin-right: 5px;
}

.block-social-auth-list a:hover{
    transform: scale(1.2);
}

.block-social-auth-buttons a:not(:last-child) {
    margin-bottom: 5px;
}

.block-social-auth-buttons img{
    height: 24px;
    margin-right: 5px;
}

.block-social-auth-buttons a:hover{
    color: white!important;
}

.button-color-vkontakte{
    background-color: #4d76a1!important;
    color: white!important;
}

.button-color-google{
    background-color: #4285f3!important;
    color: white!important;
}

.button-color-facebook{
    background-color: #3f65a6!important;
    color: white!important;
}

.button-color-yandex{
    background-color: #f8604a!important;
    color: white!important;
}

.container-page-auth{
    margin: 35px auto;
    max-width: 480px;
}

.footer-bg{
    padding: 30px 0;
}

.footer-bg-box-link-inline{
    border-radius: 5px;
    background-color: #6640f4;
    padding: 20px 30px;
}

.footer-bg-box-link-inline-item{
    display: inline-block;
    margin-right: 15px;
    color: white;
    font-weight: 600;
    font-size: 16px;
}

.footer-bg-box-link-inline-item:hover{
    color: #43E9E4;
}

.footer-bg-box-link-inline .uni-dropdown-name{
    color: white;
}

.footer-bg-box-link-inline .uni-dropdown{
    text-align: right;
}

.footer-content-text{
    margin-top: 0px;
    margin-bottom: 0px;
}

.footer-content-link-inline{
    margin-top: 10px;
}

.footer-content-link-inline a{
    margin-right: 15px;
    color: black;
    text-decoration: underline;
}

.footer-content-link-inline a:hover{
    color: #0066f5;
}

.contact-social-icon img{
    height: 34px;
}

.contact-social-icon{
    display: inline-block;
    margin-right: 5px;
    transition: all .10s linear;
}

.contact-social-icon:hover{
    transform: scale(1.2);
}

.footer-content-link-box a{
    display: block;
    color: black;
    margin-bottom: 3px;
}

.footer-content-link-box a:hover{
    color: #0066f5;
}

.flex-wrapper{
    flex: 1 0 auto;
}

footer{
   flex: 0 0 auto;
}

.auth-block-tab-list-action{
    margin-bottom: 25px;
}

.auth-block-tab-list-action span{
    display: inline-block;
    margin-right: 20px;
    font-size: 25px;
    cursor: pointer;
}

.auth-block-tab-list-action span.active{
    font-weight: bold;
}

.auth-block-tab-2, .auth-block-tab-2-check-verify{
    display: none;
}

.mini-avatar-img{
    display: inline-flex; align-items: center; justify-content: center; width: 44px; overflow: hidden; border-radius: 50%; height: 44px; background-color: #f7f8fa;
}

.mini-avatar .label-count{
    position: absolute; top: -6px; right: 1px;
}
.mini-avatar{
    position: relative; height: 44px; display: block;
}

.dropdown-box-list-link a{
    display: block; padding: 8px 20px; color: black; font-size: 14px; font-weight: normal;
}
.dropdown-box-list-link a:hover{
    background: rgba(0, 0, 0, 0) linear-gradient(210deg, rgb(215, 245, 255), rgb(236, 239, 255)) repeat scroll 0% 0%; text-decoration: none;
}
.dropdown-box-list-link a > i, .user-menu a > i, .mobile-fixed-menu-user-link a > i{
    margin-right: 4px;
    font-size: 23px;
}

.width-250{
    width: 250px;
}

.header-user-dropdown-menu-box{
    position: absolute;
    top: 55px;
    width: 260px;
    right: 0;
    background-color: white;
    box-shadow: 0 6px 32px #5e5c5c24;
    padding: 15px;
    border-radius: 10px;
    display: none;
    overflow: hidden;
    border: 1px solid transparent;
    text-align: left;
    z-index: 15;
}

.header-user-dropdown-menu{
    position: relative;
}

.header-user-dropdown-menu-box-link a {
    display: block;
    padding: 5px 8px;
    color: black;
    font-weight: normal;
}

.header-user-dropdown-menu-box-link a:hover{
    color: #0066f5;
}

.header-user-dropdown-menu-box-link a > i{
    margin-right: 4px;
    font-size: 23px;
}

.container-user-rating-stars span i{
    font-size: 18px;
    color: #c9c9c9;
}
.container-user-rating-stars span i.ti-star-filled{
    color: #ffaf00;
}
.container-user-rating-stars span{
    margin-right: 5px;
    color: black;
}
.user-rating-stars-count-reviews{
    font-size: 13px; margin-left: 3px;
}
.container-user-rating-stars{
    display: flex; align-items: flex-end;
}
.dropdown-box-list-nested{
    display: none;
}

.profile-user-sidebar-avatar > div{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: inline-block;
    background-color: #f7f8fa;
}

.profile-user-sidebar-avatar-change{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    backdrop-filter: blur(5px);
    cursor: pointer;
    z-index: 1;
    display: none;
    align-items: center;
    justify-content: center;
}

.profile-user-sidebar-avatar-change i{
    font-size: 32px;
    color: white;
}

.profile-user-sidebar-avatar > div:hover .profile-user-sidebar-avatar-change{
    display: flex;
}

.profile-user-sidebar-menu a{
    display: block;
    padding: 5px 0px;
    color: black;
    font-weight: normal;
}

.profile-user-sidebar-menu a:hover{
    color: #0066f5;
}

.profile-user-sidebar-menu a > i{
    margin-right: 4px;
    font-size: 23px;
}

.profile-user-sidebar-full-name{
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 900;
    font-size: 22px;
    color: black;
    display: block;
}

.profile-user-sidebar-full-name:hover{
    color: black;
}

.profile-user-sidebar-menu{
    margin-top: 15px;
}

.user-label-verification{
    display: inline-block;
    cursor: pointer;
}

.user-label-verification i{
    font-size: 24px;
    color: #36b555;
}

.container-reviews-list-item{
    margin-bottom: 25px;
}

.container-reviews-list-item-info-avatar{
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: block;
}

.container-reviews-list-item-info-name{
    display: block;
    font-size: 16px;
    font-weight: bold;
}

.container-reviews-list-item-info-date{
    display: block;
    font-size: 14px;
}

.container-reviews-list-item-info{
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
}

.container-reviews-list-item-info-name-and-date{
    font-size: 14px;
    font-weight: normal;
}

.container-reviews-list-item-info-title{
    font-size: 14px;
    font-weight: normal;
}

.container-reviews-list-item-info-block2{
    margin-left: 10px;
    flex-grow: 1;
}

.container-reviews-list-item-text{
    margin-top: 15px;
}

.container-reviews-list-item-media{
    margin-top: 15px;
}

.container-reviews-list-item-media-photo{
    height: 50px;
    width: 50px;
    overflow: hidden;
    border-radius: 10px;
    margin-right: 5px;
    display: inline-block;
    cursor: pointer;
}

.container-reviews-list-item-parent{
    margin-left: 40px;
    margin-top: 20px;
}

.font-bold{
    font-weight: bold;
}

.ad-create-categories-container{
    margin-top: 15px;
    margin-bottom: 30px;
}

.ad-create-categories-container span{
    display: block;
    padding: 10px 15px;
    border-radius: 10px;
    transition: all .10s linear;
}

.ad-create-categories-container span:hover{
    background-color: #186aff;
    color: white;
    cursor: pointer;
}

.ad-create-categories-container span:active{
    transform: scale(0.98);
}

.ad-create-options-category-chain{
    margin-bottom: 25px;
    display: block;
    cursor: pointer;
    font-weight: 500;
}

.ad-create-options-container{
    display: none;
}

.ad-create-options-container-item{
    margin-top: 40px;
    margin-bottom: 40px;
}

.form-control-textarea{
    border: 1px solid #f7f8fa!important;
    padding: 13px;
    border-radius: 10px;
    background-color: #f7f8fa;
    width: 100%;
    min-height: 150px;
}

.form-control-textarea:focus {
    border-color: #007bff!important;
    border-width: 1px;
    box-shadow: none!important;
    outline: none!important;
    background-color: white!important;
}

.unidropzone {
    border: 2px dashed #e9e9e9 !important;
    border-radius: 10px !important;
    position: relative;
    z-index: 1;
    padding: 15px;
    width: 100%;
}

.unidropzone-container{
    position: relative;
}

.unidropzone-container-show{
    display: block;
}

.unidropzone-item{
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 120px;
    width: 120px;
    margin-right: 10px;
    background-color: #f7f8fa;
    display: inline-block;
    border: 1px solid #f5f5f5;
    cursor: move;
}

.unidropzone-item-loader{
    position: absolute;
    margin-left: -15px;
    margin-top: -15px;
    left: 50%;
    top: 50%;
    z-index: 3;
}

.unidropzone-item-loader span{
    width: 30px;
    height: 30px;
    color: black;
    border-width: 2px;
}

.unidropzone-item-delete{
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.25rem 1rem rgba(165, 163, 174, 0.45);
}

.unidropzone-item-delete i{
    font-size: 16px;
}

.unidropzone-item-error{
    position: absolute;
    margin-left: 15px;
    margin-right: 15px;
    bottom: 10px;
    z-index: 3;
    color: red;
    font-size: 12px;
}

.unidropzone:hover{
    border: 2px dashed #d2d2d2 !important;
}

.unidropzone-change{
    font-weight: 300;
    cursor: pointer;
    text-align: center;
    padding: 20px 0;
    color: #8e8e8e;
}

.init-unidropzone input[type=file]{
    display: none;
}

.map-container{
    border-radius: 10px;
    overflow: hidden;
    height: 300px;
    width: 100%;
    background-color: #f7f8fa;
    margin-top: 10px;
}

.ad-create-options-container-item-title{
    margin-bottom: 15px;
    font-size: 24px;
}

.input-geo-search-container{
    position: relative;
}

.input-geo-search-container-result{
    position: absolute;
    top: 50px;
    border-radius: 15px;
    background-color: white;
    box-shadow: 0 6px 32px #5e5c5c24;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 15px 0;
    display: none;
    max-height: 300px;
    overflow: auto;
}

.input-geo-search-container-result span {
    display: block;
    padding: 8px 15px;
    color: #333333;
    font-weight: 500;
    cursor: pointer;
}

.input-geo-search-container-result span:hover{
    background: rgba(0, 0, 0, 0) linear-gradient(210deg, rgb(215, 245, 255), rgb(236, 239, 255)) repeat scroll 0% 0%;
    color: black!important;
}

.params-form-item-label-required{
    color: red;
}

.ad-create-info-block-payment{
    border-radius: 15px;
    background: rgba(0, 0, 0, 0) linear-gradient(210deg, rgb(215, 245, 255), rgb(236, 239, 255)) repeat scroll 0% 0%;
    padding: 30px;
    margin-bottom: 25px;
}

.ad-create-info-block-payment h5{
    font-size: 18px;
    font-weight: 900;
}

.ad-create-info-block-payment p{
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

.ad-create-options-container-item-box-available-settings, .ad-create-options-container-item-box-booking-deposit-settings, .ad-create-options-container-item-box-booking-prepayment-settings{
    display: none;
}

.ad-create-options-container-item-box-booking{
    padding: 25px;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0) linear-gradient(210deg, rgb(215, 245, 255), rgb(236, 239, 255)) repeat scroll 0% 0%;
}

.ad-create-options-container-item-extra:not(:last-child) {
   margin-bottom: 10px;
}

.info-box-publication{
    margin-top: 120px;
}

.info-box-publication img{
    height: 128px;
}

.info-box-publication h4{
    font-weight: 800;
    margin-top: 15px;
}

.ad-card-media-slider-container{
    position: relative;
}

.ad-card-media-slider{
    overflow: hidden;
    position: relative;
}

.ad-card-media-slider-item {
    width: auto!important;
}

.ad-card-media-slider-item > div{
    border-radius: 10px;
    overflow: hidden;
    display: inline-block;
    position: relative;
}

.ad-card-media-slider-item-label-video{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #e45959;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -25px;
    margin-top: -25px;
}

.ad-card-media-slider-item-label-video i{
    font-size: 26px;
    color: white;
}

.ad-card-media-slider-item > div > img {
    height: 100%;
}

.ad-card-media-slider::-webkit-scrollbar {
   display: none;
}

.ad-card-media-slider-nav-left{
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -20px;
    display: inline-flex;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background-color: white;
    cursor: pointer;
    color: black;
    box-shadow: rgb(0 0 0 / 6%) 0 4px 8px 0;
    z-index: 3;
}

.ad-card-media-slider-nav-right{
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -20px;
    display: inline-flex;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background-color: white;
    cursor: pointer;
    color: black;
    box-shadow: rgb(0 0 0 / 6%) 0 4px 8px 0;
    z-index: 3;
}

.ad-card-media-slider-nav-left i, .ad-card-media-slider-nav-right i{
    font-size: 21px;
}

.ad-card-media-slider-nav-left:active, .ad-card-media-slider-nav-right:active{
    transform: scale(0.95);
}

.ad-card-media-slider-miniatures .swiper-slide{
    height: 65px;
    width: 65px;
    border-radius: 10px;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid transparent;
}

.ad-card-media-slider-miniatures{
    margin-top: 15px;
    overflow: hidden;
    visibility: hidden;
}

.ad-card-media-slider-miniatures .swiper-slide.active {
    border: 1px solid #0066f5;
}

.breadcrumb{
    margin-bottom: 5px;
    font-size: 14px!important;
    color: rgba(0, 26, 52, .6);
}

.ad-card-favorite-action span:active{
    transform: scale(0.97);
}

.ad-card-info-line span{
    display: inline-block;
    margin-right: 15px;
    
}

.ad-card-menu-line{
    display: flex;
    justify-content: end;
}

.ad-card-menu-line-item{
    cursor: pointer;
    display: inline-flex;
    border-radius: 10px;
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    background-color: #f7f8fa;
    position: relative;
}

.ad-card-menu-line-item:not(:last-child) {
    margin-right: 5px;
}

.ad-card-menu-line-item i{
   font-size: 22px;
}

.active-scale:active{
    transform: scale(0.97);
}

.ad-card-prices-line span{
    display: inline-block;
    margin-right: 10px;
    margin-top: 5px;
}

.ad-card-prices .card-item-price-now{
    font-size: 28px;
    font-weight: 900;
    display: inline-block;
    margin-right: 10px;
    line-height: 1;
}

.card-item-price-old{
    font-size: 20px;
    font-weight: 500;
    display: inline-block;
    color: red;
    text-decoration: line-through;
}

.ad-card-prices-currency span{
    font-size: 16px;
    margin-right: 10px;
    display: inline-block;
}

.ad-card-prices-currency{
    margin-top: 5px;
}

.ad-card-subtitle{
    margin-top: 0px;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 10px;
}

.ad-card-sidebar{
    background-color: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 6px 15px #5e5c5c24;
}

.ad-card-content .ad-card-content-item:not(:last-child) {
    margin-bottom: 25px;
}

.ad-card-action-buttons .btn-custom:not(:last-child) {
    margin-bottom: 5px;
}

.ad-card-content-info-box-container{
    margin-bottom: 25px;
    display: flex;
    overflow: hidden;
}

.ad-card-content-info-box{
    padding: 15px 25px;
    border-radius: 15px;
    max-width: 370px;
    min-width: 270px;
    min-height: 110px;
    background-color: #ebffeb;
}

.ad-card-content-info-box:not(:last-child) {
    margin-right: 10px;
}

.ad-card-content-info-box strong{
    font-size: 18px;
}

.ad-card-content-info-box p{
    margin-bottom: 0;
    margin-top: 5px;
}

.list-properties-item:not(:last-child) {
    margin-bottom: 5px;
}

.ad-card-sidebar > div:not(:first-child) {
    margin-top: 20px;
}

.container-item-list-content-properties .list-properties-item:not(:last-child) {
    margin-right: 10px;
}

.container-item-list-content-properties .list-properties-item{
    font-weight: normal!important;
    display: inline-grid;
    max-width: 210px!important;
}

.container-item-list-content-properties .list-properties-item span{
    display: block;
    font-weight: normal!important;
    font-size: 13px!important;
}

.list-properties-item{
    font-weight: 600;
}

.list-properties-item span{
    color: #757575;
    margin-right: 5px;
    font-weight: 400!important;
}

.ad-card-user-avatar > div{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: inline-block;
    background-color: #f7f8fa;
}

.ad-card-user{
    display: flex;
    justify-content: space-between;
}

.ad-card-user-content{
    flex-grow: 1;
    margin-left: 10px;
}

.card-status-info{
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 15px;
}

.card-status-info-bg-gray{
    background-color: #f2f2f2;
}

.card-status-info-bg-moderation{
    background-color: #ffffc2;
}

.card-status-info-bg-error{
    background-color: #ffe7e7;
}

.card-status-info-bg-success{
    background-color: #ebffeb;
}

.card-status-info strong{
    font-size: 21px;
    font-weight: bold;
}
.card-status-info p{
    margin-bottom: 0;
    margin-top: 5px;
}

.ad-card-buy-now{
    position: relative;
    margin-top: 30px;
}

.ad-card-buy-now > span{
    position: absolute;
    right: 15px;
    top: -14px;
    border-radius: 5px;
    height: 24px;
    padding: 0 15px;
    background-color: #3a3a3a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: white;
    transition: all .10s linear;
}

.ad-card-buy-now > span i{
    margin-right: 5px;
    font-size: 15px;
}

.ad-card-buy-now:hover > span{
    display: none;
}

.ad-card-reviews-content{
    margin-top: 80px;
}

.my-tabs-items-big .my-tabs-item{
    display: inline-block;
    margin-right: 30px;
    font-size: 26px;
    position: relative;
    cursor: pointer;
}

.my-tabs-items-small .my-tabs-item{
    display: inline-block;
    margin-right: 30px;
    font-size: 18px;
    position: relative;
    cursor: pointer;
}

.my-tabs-items-medium .my-tabs-item{
    display: inline-block;
    margin-right: 30px;
    font-size: 21px;
    position: relative;
    cursor: pointer;
}

.my-tabs-items-big .my-tabs-item.active, .my-tabs-items-small .my-tabs-item.active, .my-tabs-items-medium .my-tabs-item.active{
    font-weight: 700;
}

.my-tabs-items-big .my-tabs-item span, .my-tabs-items-small .my-tabs-item span, .my-tabs-items-medium .my-tabs-item span{
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 14px;
    color: #0066f5;
}

.my-tabs-content-container{
    margin-top: 25px;
}

.container-reviews-media{
    margin-top: 25px;
    margin-bottom: 35px;
    overflow: hidden;
}

.container-reviews-media-item{
    height: 100px!important;
    width: 100px!important;
    border-radius: 15px;
    overflow: hidden;
    margin-right: 10px;
    display: inline-flex;
    cursor: pointer;
}

.uni-media-slider-modal{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    background-color: #3c3c3ca6;
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
}

.uni-media-slider-modal-container{
    position: relative;
    z-index: 1501;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 0.25rem 1.125rem rgba(75, 70, 92, 0.1);
    width: 800px;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 15px;
    margin-right: 15px;
    text-align: center;
    min-height: 400px;
}

.uni-media-slider-modal-backing{
    position: absolute;
    top: -13px;
    right: -13px;
    bottom: -13px;
    left: -13px;
    display: block;
    opacity: .4;
    background: no-repeat center;
    background-size: cover;
    -webkit-filter: blur(13px);
    filter: blur(13px);
    z-index: 100;
}

.uni-media-slider-modal-container img{
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0;
    z-index: 101;
    position: relative;
    width: 100%;
    height: auto;
}

.uni-media-slider-modal-container-item{
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    align-content: center;

}

.plyr--video{
    height: 100%;
    width: 100%;
}

.uni-media-slider-modal-iframe-video{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.uni-media-slider-modal-container-nav-left{
    position: absolute;
    left: 25px;
    top: 50%;
    margin-top: -30px;
    display: inline-flex;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background-color: white;
    cursor: pointer;
    color: black;
    box-shadow: rgb(0 0 0 / 6%) 0 4px 8px 0;
    z-index: 102;
}

.uni-media-slider-modal-container-nav-right{
    position: absolute;
    right: 25px;
    top: 50%;
    margin-top: -30px;
    display: inline-flex;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background-color: white;
    cursor: pointer;
    color: black;
    box-shadow: rgb(0 0 0 / 6%) 0 4px 8px 0;
    z-index: 102;
}

.uni-media-slider-modal-container-nav-left i, .uni-media-slider-modal-container-nav-right i{
    font-size: 26px;
}

.uni-media-slider-modal-container-nav-left:active, .uni-media-slider-modal-container-nav-right:active{
    transform: scale(0.95);
}

.uni-media-slider-modal-container-item{
    display: none;
}

.uni-media-slider-modal-close{
    position: absolute;
    right: -40px;
    top: 0;
    cursor: pointer;
    color: white;
}

.uni-media-slider-modal-close i{
    font-size: 38px;
}

.option-payment-item{
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    padding: 15px;
    justify-content: center;
    cursor: pointer;
    transition: all .10s linear;
}

.option-payment-item:not(:last-child) {
    margin-bottom: 10px;
}

.option-payment-item:hover{
    background-color: #f4f8ff;
}

.option-payment-item.active{
    background-color: #f4f8ff;
}

.option-payment-item-logo img{
    width: 40px;
}

.option-payment-item-name{
    margin-left: 15px;
    flex-grow: 1;
}

.option-payment-item-name strong{
    display: block;
    font-size: 18px;
}

.option-payment-item-name span{
    display: block;
    font-size: 15px;
}

.actionSendVerifyCodeEmail, .actionSendVerifyCodePhone{
    display: none;
}

.pinCodeInputItem{
    height: 70px!important;
    width: 55px!important;
    display: inline-block;
    font-size: 21px!important;
    text-align: center;
    margin-bottom: 10px;
}

.pinCodeInputItem:not(:last-child) {
    margin-right: 10px;
}

.pinCodeInputContainer{
    text-align: center;
}

.action-to-favorite .ti-heart-filled{
    color: red;
}

.card-contact-user h4{
    display: block;
    font-size: 25px;
    margin: 0px;
    font-size: 900;
}

.card-contact-user a{
    display: block;
    font-size: 23px;
}

.card-contact-user-item{
    margin-bottom: 10px;
}

.card-contact-user-item i{
    font-size: 26px;
}

.card-contact-user{
    margin-top: 15px;
}

.ad-paid-services-item{
    margin-top: 20px;
}

.ad-card-item-image{
    height: 60px;
    width: 60px;
    border-radius: 10px;
    margin-right: 15px;
    overflow: hidden;
}

.ad-card-item{
    display: flex;
    justify-content: space-between;
    border: 1px solid #eaeaea;
    padding: 10px;
    border-radius: 15px;
}

.ad-card-item:not(:last-child) {
    margin-bottom: 15px;
}

.ad-card-item-title{
    flex-grow: 1;
    font-size: 16px;
    font-weight: 800;
    width: 100%;
}

.ad-card-item-title a{
    font-size: 16px;
    font-weight: 800;
}

.ad-paid-services-list{
    margin-top: 25px;
}

.ad-paid-services-list-item{
    border-radius: 20px;
    overflow: hidden;
    padding: 20px;
    cursor: pointer;
    position: relative;
}

.ad-paid-services-list-item:not(:last-child) {
    margin-bottom: 15px;
}

.ad-paid-services-list-item-image{
    text-align: center;
}

.ad-paid-services-list-item-image img{
    width: 120px;
}

.ad-paid-services-list-item-content h5{
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 5px;
    margin-top: 0px;
}

.ad-paid-services-list-item.active{
    background-color: #f7f8fa;
}

.ad-paid-services-list-item-price-now{
    font-size: 24px;
    font-weight: 600;
    display: block;
}

.ad-paid-services-list-item-price-old{
    font-size: 20px;
    color: red;
    margin-top: 5px;
    display: block;
    text-decoration: line-through;
}

.quantity_inner * {
    box-sizing: border-box;
}
.quantity_inner {
    display: inline-flex;
    border-radius: 10px;
    border: 2px solid #186aff;
}
.quantity_inner .bt_minus,
.quantity_inner .bt_plus,
.quantity_inner .quantity {
    height: 30px;
    width: 30px;
    padding: 0;
    border: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    outline: 0;
}
.quantity_inner .quantity {
    width: 85px;
    text-align: center;
    font-size: 16px;
    color: #000;
    margin-top: 2px;
}
.quantity_inner .bt_minus svg,
.quantity_inner .bt_plus svg {
    stroke: #337AB7;
    stroke-width: 4;
    transition: 0.5s;
    margin: 10px;
}
.quantity_inner .bt_minus:hover svg,
.quantity_inner .bt_plus:hover svg {
    stroke: #000;
}

.ad-paid-services-list-item-recommended{
    position: absolute;
    left: 15px;
    top: 15px;
    padding: 4px 10px;
    background-color: red;
    color: white;
    border-radius: 6px;
    font-size: 12px;
}

.ad-paid-services-list-item-added{
    display: block;
    margin-bottom: 5px;
}

.ad-paid-services-list-item-added span{
    padding: 4px 10px;
    background-color: #a6a6a6;
    color: white;
    border-radius: 6px;
    font-size: 12px;
    display: inline-block;
}

.status-label{
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: normal;
}

.ad-paid-services-action-payment{
    display: none;
    margin-top: 35px;
}

.status-label-color-warning{
    color: black;
    background-color: yellow;
}

.status-label-color-success{
    color: black;
    background-color: #ebffeb;
}

.status-label-color-danger{
    color: black;
    background-color: #ffe7e7;
}

.status-label-color-secondary{
    color: white;
    background-color: #a6a6a6;
}

.ad-card-active-services-item-name{
    margin-bottom: 5px;
}

.ad-card-active-services-container{
    max-width: 300px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.ad-card-active-services-item:not(:last-child) {
    margin-bottom: 10px;
}

.progress{
    height: 6px!important;
}

.progress .bg-success{
    background-color: rgb(46 186 121) !important;
}

.ad-create-options-container-item-box-geo{
    display: none;
}

.geo-metro-station-color-label{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    margin-right: 5px;
}

.card-item-price-measure-title{
    font-size: 18px;
    text-transform: lowercase;
    margin-left: 5px;
    display: inline-block;
}

.splash-notification, .splash-notification-alert{
    position: fixed;
    text-align: center;
    z-index: 10100;
    display: none;
    left: 0px;
    right: 0px;
    top: 0px;
}

.splash-notification-container, .splash-notification-alert-container{
    padding: 25px;
    border-radius: 20px;
    background-color: rgb(41, 41, 41);
    color: white;
    min-width: 400px;
    max-width: 550px;
    display: inline-block;
    text-align: left;
    margin-top: 25px;
}

.splash-notification-container p, .splash-notification-alert-container p{
    margin: 0px;
    font-size: 16px;
}

.splash-notification-alert-buttons{
    margin-top: 10px;
}

.splash-notification-alert-buttons span{
    display: inline-block;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 5px;
    padding: 3px 15px;
    background-color: white;
    color: black;
}

.splash-notification-alert-yes{
    background-color: #ff4747!important;
    color: white!important;
}

.ad-card-content-geo-map{
    height: 350px;
    overflow: hidden;
    border-radius: 10px;
    background-color: #f7f8fa;
    display: none;
    margin-top: 15px;
}

.ad-card-content-geo-metro{
    margin-top: 10px;
}

.ad-card-content-geo-metro > div{
    display: inline-block;
    margin-right: 10px;
}

.ad-card-content-geo-metro svg{
    vertical-align: baseline;
}

.profile-home-sections section:not(:last-child) {
    margin-bottom: 30px;
}

.profile-container-item-list{
    color: black;
    margin-bottom: 25px;
    display: block;
    border-radius: 10px;
}

.profile-container-item-list-content-title{
    font-size: 19px;
    font-weight: 700;
}

.profile-container-item-list-content-title:hover{
    color: #0066f5;
}

.profile-container-item-list-content-additionally{
    margin-top: 10px;
}

.profile-container-item-list-content-additionally span{
    display: block;
    font-size: 13px;
    color: gray;
}

.profile-container-item-list:hover{
    color: black!important;
}

.profile-container-item-images{
    height: 100px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    background-color: #F7F8FA;
}

.profile-container-item-list-content-prices .card-item-price-now{
    font-size: 17px;
    font-weight: 500;
}

.profile-container-item-list-content-prices .card-item-price-old{
    font-size: 15px;
    color: #f81155;
    text-decoration: line-through;
    margin-left: 5px;
    display: inline-block;
}

.profile-container-item-list-content-prices .card-item-price-measure-title{
    font-size: 15px;
}

.profile-wallet-info-balance p{
    margin: 0px;
}

.profile-wallet-info-balance h3{
    margin: 0px;
    font-weight: 900;
    font-size: 28px;
}

.my-tabs-content:not(:first-child) {
    display: none;
}

.payment-status-container{
    text-align: center;
    margin-top: 80px;
}

.payment-status-container h2{
    font-weight: 900;
}

.chat-dialogue-item-card{
    display: flex;
    justify-content: space-between;
}

.chat-dialogue-item-card-image{
    height: 50px;
    width: 60px;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 10px;
    position: relative;
}

.chat-dialogue-item-card-content{
    flex-grow: 1;
    width: 100%;
}

.chat-dialogue-item-card-content-link-ad{
    display: block;
    font-size: 16px;
    font-weight: 900;
    margin: 0;
    color: black;
}

.chat-dialogue-item-card-content-link-user{
    display: block;
    margin: 0;
    color: black;
    font-size: 15px;
}

.chat-dialogue-item-card-content-link-user-name{
    display: block;
    font-size: 16px;
    font-weight: 900;
    margin: 0;
    color: black;
}

.chat-dialogue-items-container{
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-end;
}

#chatModal .chat-dialogue-container{
    padding: 35px;
}

.chat-dialogue-container{
      display: flex;
      flex-direction: column;
      height: 100vh;
      max-height: 900px;
}

#chatModal .chat-dialogues-container{
    padding: 35px;
}

.chat-dialogue-container-content{
   flex: 1 0 auto;
   overflow: auto;
   flex: auto;
   flex-direction: column-reverse;
   display: flex;
}

.chat-dialogue-container-content::-webkit-scrollbar {
    display: none;
}

.chat-dialogue-container-header{
    flex: 0 0 auto;
    padding-bottom: 15px;
}

.chat-dialogue-container-footer{
    flex: 0 0 auto;
}

#chatModal .modal-body{
    padding: 0px!important;
    overflow: hidden!important;
}

.item-message-from{
    text-align: right;
}

.chat-dialogue-footer{
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.chat-dialogue-footer-action-attach, .chat-dialogue-footer-action-send{
    cursor: pointer;
}

.chat-dialogue-footer-action-attach:active, .chat-dialogue-footer-action-send:active{
    transform: scale(0.90);
}

.chat-dialogue-footer-action-attach i{
    font-size: 25px;
}

.chat-dialogue-footer-action-send i{
    font-size: 25px;
}

.chat-dialogue-footer-action-textarea{
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    outline: none;
    border: 1px solid transparent;
    flex-grow: 1;
    margin-right: 15px;
    max-height: 200px;
    min-height: 50px;
    background-color: #fafafa;
}

.chat-dialogue-footer-action-textarea:focus{
    border: 1px solid #0066f5;
}

.chat-dialogue-footer-action-1{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.chat-dialogue-footer-action-2{
    flex-grow: 1;
    margin-right: 15px;
}

.chat-dialogue-footer-action-3{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-dialogue-item-message{
    display: inline-flex;
    align-items: flex-end;
}

.chat-dialogue-item-container:not(:last-child) {
    margin-bottom: 15px;
}

.chat-dialogue-item-message-text{
    border-radius: 15px;
    padding: 10px 15px;
    text-align: left;
    max-width: 400px;
    word-break: break-word;
}

.chat-dialogue-item-message-avatar{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    margin-right: 10px;
}

.item-message-from .chat-dialogue-item-message-text{
    background-color: #e6f6ff;
}

.item-message-whom .chat-dialogue-item-message-text{
    background-color: #f7f8fa;
}

.item-message-system .chat-dialogue-item-message-text{
    background-color: #e2ffd6;
}

.item-message-system{
    width: 100%!important;
}

.chat-dialogue-item-message-date{
    font-size: 12px;
    margin-left: 10px;
    margin-right: 5px;
}

.chat-dialogues-item{
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border-radius: 15px;
    cursor: pointer;
    transition: all .10s linear;
}

.chat-dialogues-item-avatar{
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-right: 15px;
    flex-shrink: 0;
}

.chat-dialogues-item-content{
   flex-grow: 1;
}

.chat-dialogues-item:hover{
    background-color: #f7f8fa;
}

.chat-dialogues-items{
    min-height: 300px;
}

.chat-dialogues-item-content-channel{
    font-weight: 600;
}

.chat-dialogues-item-content-channel p{
    margin-bottom: 0;
    font-size: 15px;
    font-weight: normal;
}

.chat-dialogues-item-content-user{
    font-weight: 600;
}

.chat-dialogues-item-content-message{
    font-size: 14px;
    color: #898989;
}

.chat-dialogues-item-date{
    font-size: 13px;
    color: #898989;
}

.chat-dialogues-item-view-status{
    margin-right: 5px;
    display: inline-block;
}

.chat-dialogues-item-view-status i{
    font-size: 17px;
}

.chat-dialogues-item-view-status i.ti-checks{
    color: green;
}

.chat-dialogues-item-view-status i.ti-check{
    color: #898989;
}

.chat-dialogue-item-menu{
    display: block;
    cursor: pointer;
}

.chat-dialogue-item-menu i{
    font-size: 26px;
}

.chat-dialogue-item-date{
    text-align: center;
    font-size: 14px;
    color: #898989;
    margin-bottom: 10px;
}

.chat-dialogues-items-empty{
    text-align: center;
    margin-top: 80px;
}

.chat-dialogues-items-empty img{
    height: 128px;
    margin-bottom: 10px;
}

.chat-dialogues-items-empty-icon{
    font-size: 30px;
}

.chat-dialogues-items-empty h4{
    font-size: 17px;
    font-weight: 600;
}

.chat-dialogues-item-content-count-messages{
    display: inline-flex;
    margin-left: 5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    color: white;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.chat-dialogue-item-card-content-status-online{
    font-size: 15px;
}

@-webkit-keyframes BadgePulseGreen {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(105, 205, 0, .4)
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(105, 205, 0, 0)
    }
    100% {
        -webkit-box-shadow: 0 0 0 20px rgba(105, 205, 0, 0)
    }
}

@keyframes BadgePulseGreen {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(105, 205, 0, .4);
        box-shadow: 0 0 0 0 rgba(105, 205, 0, .4)
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(105, 205, 0, 0);
        box-shadow: 0 0 0 10px rgba(105, 205, 0, 0)
    }
    100% {
        -moz-box-shadow: 0 0 0 20px rgba(105, 205, 0, 0);
        box-shadow: 0 0 0 20px rgba(105, 205, 0, 0)
    }
}

@-webkit-keyframes BadgePulseRed {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(242, 64, 64, .9);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(242, 64, 64, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(242, 64, 64, 0);
    }
}

@keyframes BadgePulseRed {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(242, 64, 64, .9);
        box-shadow: 0 0 0 0 rgba(242, 64, 64, .9)
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(242, 64, 64, 0);
        box-shadow: 0 0 0 10px rgba(242, 64, 64, 0)
    }
    100% {
        -moz-box-shadow: 0 0 0 20px rgba(242, 64, 64, 0);
        box-shadow: 0 0 0 20px rgba(242, 64, 64, 0)
    }
}

.label-circle-count{
    position: absolute;
    top: -3px;
    right: -8px;
    display: inline-flex;
    height: 18px;
    min-width: 18px;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f24040;
    color: white;
}

.chat-icon-counter{
    animation: BadgePulseRed 1.8s infinite;
    display: none;
}

.labelChatCountMessages, .labelCartCountItems{
    display: none;
}

.chat-dialogue-footer-blacklist{
    text-align: center;
    font-weight: 600;
    margin-top: 15px;
}

.chat-dialogue-item-card-content-link-user-name p{
    margin-bottom: 0;
    font-size: 15px;
    font-weight: normal;
}

.uni-attach-files-container{
    display: none;
}

.uni-attach-files-item{
    display: none;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-top: 5px;
    margin-right: 5px;
    display: inline-block;
    background-color: #f7f8fa;
}

.uni-attach-files-item-delete{
    display: inline-flex;
    width: 15px;
    height: 15px;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: red;
    z-index: 1;
}

.uni-attach-files-item-delete i{
    font-size: 14px;
}

.chat-dialogue-item-message-text-attach-image{
    width: 100%;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    display: block;
}

.chat-dialogue-item-message-text-attach-image img{
    width: 100%;
    height: auto;
}

.uni-attach-files-item-loader{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.uni-attach-files-item-loader span{
    width: 15px;
    height: 15px;
    color: black;
    border-width: 1px;
    margin: 0px;
}

.share-social-list-link{
    margin-top: 15px;
}

.share-social-list-link a{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: black;
}

.share-social-list-link a:hover{
    color: #0066f5;
}

.share-social-list-link a img{
    width: 25px;
    margin-right: 10px;
}

.order-buy-card-sidebar{
    background-color: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 6px 15px #5e5c5c24;
}

.order-buy-card-sidebar h3{
    font-weight: 900;
}

.ad-card-item-content{
    flex-grow: 1;
}

.ad-card-item-content-title{
    font-size: 17px;
    font-weight: 600;
}

.ad-card-item-content-prices .card-item-price-now{
    font-size: 16px;
    font-weight: normal;
}

.ad-card-item-content-prices .card-item-price-old{
    font-size: 15px;
    margin-left: 10px;
    text-decoration: line-through;
    color: red;
}

.order-buy-card-sidebar-info{
    margin-top: 15px;
    font-size: 13px;
    color: #757575;
}

.order-buy-card-delivery-item{
    display: inline-block;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    padding: 20px;
    background-color: #f6f6f6;
    cursor: pointer;
    margin-bottom: 10px;
    border: 2px solid white;
    vertical-align: top;
    min-height: 100px;
}

.order-buy-card-delivery-item.active{
    border: 2px solid #186aff;
}

.order-buy-card-delivery-item:not(:last-child) {
    margin-right: 10px;
}

.order-buy-card-delivery-item span{
    display: block;
}

.order-buy-card-delivery-item img{
    height: 25px;
    margin-bottom: 5px;
}

.order-buy-card-delivery{
    margin-top: 20px;
}

.order-buy-card-info{
    margin-top: 30px;
}

.profile-container-order-item-image{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background-color: #f7f8fa;
    margin-right: 5px;
    margin-top: 10px;
    display: inline-block;
}

.profile-container-order-list{
    margin-bottom: 25px;
    display: block;
    color: black;
}

.profile-container-order-list h1{
    font-size: 17px;
    font-weight: 900;
    color: black;
    margin-top: 5px;
    margin-bottom: 0px;
}

.profile-container-order-item-buttons{
    margin-top: 10px;
}

.order-card-section-action-info{
    padding: 15px;
    border-radius: 15px;
    background-color: #f7f8fa;
    margin-top: 15px;
}

.order-card-section{
    margin-bottom: 35px;
}

.order-card-section-user{
    display: flex;
    justify-content: space-between;
}

.order-card-section-user-avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.order-card-section-user-name{
    flex-grow: 1;
    margin-left: 10px;
    display: flex;
    align-items: center;
}

.order-card-section-items{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.order-card-section-items-image{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.order-card-section-items-content{
    flex-grow: 1;
    margin-left: 10px;
    width: 100%;
}

.timeline-action-item-point{
    display: block;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #ff9f43 !important;
    box-shadow: 0 0 0 0.1875rem rgba(255, 159, 67, 0.16);
    flex-shrink: 0;
}

.timeline-action-item{
   display: flex;
   justify-content: space-between;
   align-items: baseline;
}

.timeline-action-item-event{
    margin-left: 15px;
    flex-grow: 1;
    width: 100%;
}

.timeline-action-item:not(:last-child) {
    margin-bottom: 15px;
}

.order-card-section-action-buttons{
    margin-top: 15px;
}

.timeline-action-media{
    margin-top: 15px;
}

.timeline-action-media-item{
    border-radius: 15px;
    width: 70px;
    height: 70px;
    position: relative;
    overflow: hidden;
    margin-right: 5px;
    margin-bottom: 5px;
    display: inline-block;
    background-color: #f7f8fa;
}

.order-buy-card-sidebar-list-box{
    display: flex;
    justify-content: space-between;
}

.order-buy-card-sidebar-list-box-item2{
    flex-grow: 1;
    text-align: right;
    font-weight: bold;
}

.order-buy-card-sidebar-list-box:not(:last-child) {
    margin-bottom: 2px;
}

.order-buy-card-sidebar-list{
    margin-top: 20px;
}

.review-add-section:not(:last-child) {
    margin-bottom: 30px;
}

.review-add-form{
    margin-top: 35px;
    margin-bottom: 60px;
}

.review-add-change-rating span{
    display: inline-block;
    cursor: pointer;
}

.review-add-change-rating span:not(:last-child) {
    margin-right: 10px;
}

.review-add-change-rating span i.ti-star{
    font-size: 33px;
    color: rgb(224, 224, 224);
}

.review-add-change-rating span i.ti-star-filled{
    font-size: 33px;
    color: rgb(255, 176, 33);
}

.review-add-success{
    display: none;
    margin-top: 35px;
    margin-bottom: 60px;
}

.modal-response-review-whom-user{
    margin-bottom: 15px;
    font-weight: 900;
}

.profile-container-review-list{
    margin-bottom: 35px;
}

.header-user-dropdown-menu-box-link .menu-user-rating-stars{
    display: block;
    padding: 5px 8px;
    color: black;
    font-weight: normal;
}

.message-action-interaction{
    margin-top: 10px;
}

.message-action-interaction .btn-custom-mini:not(:last-child){
    margin-bottom: 5px;
}

.chat-dialogue-item-card-content-status-online-label{
    font-size: 12px;
    font-weight: 600;
    color: #7cb606;
}

.review-add-items-container{
    max-height: 300px;
    overflow: auto;
}

.review-add-item-container{
    border-radius: 15px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.review-add-item-container:not(:last-child){
    margin-bottom: 5px;
}

.review-add-item-container.active{
    background-color: #ebf2ff;
}

.review-add-item-container-box2{
    margin-left: 15px;
    flex-grow: 1;
    font-weight: 600;
}

.review-add-item-container-image{
    border-radius: 15px;
    width: 50px;
    height: 50px;
    position: relative;
    overflow: hidden;
}

.review-add-item-container-box2 span{
    display: block;
}

.review-add-item-container:hover{
    background-color: #ebf2ff;
}

.chat-dialogue-item-message-menu{
  margin-right: 10px;
}

.chat-dialogue-item-message-menu i{
    font-size: 20px;
    color: gray;
}

.label-color-secondary{
    color: white!important;
    background-color: #a6a6a6!important;
}

.home-widget-categories-item{
    display: inline-flex;
    background-color: #f7f8fa;
    padding: 15px;
    border-radius: 15px;
    overflow: hidden;
    height: 100px;
    position: relative;
    margin-bottom: 15px;
    min-width: 119px;
    max-width: 250px;
    grid-row: 1;
}

.home-widget-categories-item:not(:last-child){
    margin-right: 10px;
}

.home-widget-categories-item:hover{
    background-color: #186aff;
}

.home-widget-categories-item:hover > div{
    color: white!important;
}

.home-widget-categories-item div{
    z-index: 5;
    color: black;
    position: relative;
}

.home-widget-categories-item img{
    position: absolute; right: 5px; bottom: 0px;
    height: 60px;
}

.widget-promo-banner-item{
    border-radius: 15px;
    padding: 15px;
    position: relative;
    overflow: hidden;
    height: 190px!important;
    width: 200px!important;
    display: inline-block;
}

.widget-promo-banner-item:not(:last-child){
    margin-right: 10px;
}

.widget-promo-banners-container{
    overflow: hidden;
}

.widget-promo-banner-item h4{
    font-size: 16px;
    font-weight: 900;
    margin: 0px;
    margin-bottom: 10px;
    z-index: 1;
    position: relative;
}

.widget-promo-banner-item p{
    margin: 0px;
    font-size: 14px;
    z-index: 1;
    position: relative;
}

.widget-promo-banner-item img{
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100px;
}

.stories-border-no-view{
    border: 2px solid #ff6163;
}

.stories-border-view{
    border: 2px solid #5b5b5b;
}

.stories-border-add{
   background-color: #f7f8fa!important;
}

.widget-stories-item{
    width: 100px!important;
    text-align: center;
}

.widget-stories-item-title{
    display: block;
    font-size: 14px;
    word-break: break-all;
}

.widget-stories-item-circle{
    width: 100px!important;
    height: 100px!important;
    position: relative;
    border-radius: 50%;
    display: flex;
    cursor: pointer;
    background-color: white;
    align-items: center;
    justify-content: center;
}

.widget-stories-container{
    overflow: hidden;
}

.widget-stories-item:not(:last-child){
    margin-right: 10px;
}

.widget-stories-item:active{
    transform: scale(0.98);
}

.widget-stories-item-circle-image{
    width: 90px;
    height: 90px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

.widget-stories-item-process-load{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f7f8fa!important;
}

.widget-stories-item-process-load span{
    width: 20px;
    height: 20px;
    color: #0066f5;
}

.widget-stories-item-process-load{
    visibility: hidden;
}

.home-widget-sections{
    margin-top: 20px;
}

.home-widget-sections section:not(:last-child){
    margin-bottom: 40px;
    display: block;
}

.widget-shops-item-link{
    color: black;
    background-color: #f7f8fa;
    padding: 25px;
    border-radius: 15px;
    min-height: 100px;
    margin-bottom: 15px;
    display: block;
}

.widget-shops-item-link:hover{
    color: black;
}

.widget-shops-item-link > p{
    margin-top: 10px;
    margin-bottom: 0px;
}

.widget-shops-item-link:hover .widget-shops-item-content h4{
    color: #0066f5;
}

.widget-shops-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
}

.widget-shops-item-content{
    margin-left: 25px;
    flex-grow: 1;
    width: 100%;
}

.widget-shops-item-image{
    width: 100px;
    display: flex;
    max-height: 80px;
}

.widget-shops-item-image > div{

    align-items: center;
    justify-content: center;
}

.widget-shops-item:not(:last-child){
    margin-right: 10px;
}

.widget-shops-item h4{
    font-size: 18px;
    font-weight: 900;
}

.widget-article-blog-item{
    height: 200px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    display: inline-flex;
    background-color: #f7f8fa;
    display: block;
    width: 100%;
    margin-bottom: 15px;
}

.widget-article-blog-item h4{
    font-size: 18px;
    font-weight: 900;
    color: white;
    background-color: #00000070;
    padding: 5px;
    display: inline-block;
    border-radius: 10px;
}

.widget-article-blog-item:not(:last-child){
    margin-right: 10px;
}

.widget-article-blog-item-title{
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
}

.widget-shops-item-content-rating{
    font-size: 14px;
    display: block;
    font-weight: 600;
    color: black;
}


.widget-shops-item-content-rating i{
    font-size: 17px;
    color: #ffaf00;
}

.bold-title-and-link{
    margin-bottom: 25px;
}

.bold-title-and-link span{
    font-size: 30px;
    font-weight: 900;
    display: inline-block;
    margin-right: 25px;
}

.widget-ads-slider-container-item{
    width: 223px;
    display: inline-flex;
}

.widget-ads-slider-container-item:not(:last-child){
    margin-right: 15px;
}

.widget-ads-slider-container-items{
    border-radius: 15px;
    padding: 15px;
}

.widget-ads-slider-container-items-vip{
    margin-bottom: 25px;
    background-color: #f7ffe5;
    border-radius: 15px;
    padding: 15px;
}

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-xs-5ths {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

.profile-container-order-list-title{
    color: black;
    font-size: 16px;
    font-weight: 900;
}

.profile-verification-info-container{
    margin-top: 25px;
}

.profile-verification-info-container ul{
    margin: 0;
    padding-left: 15px;
}

.cart-ad-card-item-image{
    height: 80px;
    width: 80px;
    border-radius: 10px;
    margin-right: 15px;
    overflow: hidden;
}

.cart-ad-card-item{
    display: flex;
    justify-content: space-between;
}

.cart-ad-card-item:not(:last-child) {
    margin-bottom: 15px;
}

.cart-ad-card-item-title{
    flex-grow: 1;
    font-size: 16px;
    font-weight: 800;
}

.cart-ad-card-item-title a{
    font-size: 16px;
    font-weight: 800;
}

.cart-ad-card-item-content{
    flex-grow: 1;
}

.cart-ad-card-item-content-title a{
    font-size: 17px;
    color: black;
}

.cart-ad-card-item-content-prices{
    font-size: 18px;
    font-weight: normal;
    font-weight: 900;
}

.cart-ad-card-item-content-prices .card-item-price-now{
    font-size: 18px;
    font-weight: normal;
    font-weight: 900;
}

.cart-ad-card-item-content-prices .card-item-price-old{
    font-size: 15px;
    margin-left: 10px;
    text-decoration: line-through;
    color: red;
}

.cart-ad-card-container:not(:last-child) {
    margin-bottom: 30px;
}

.cart-ad-card-item-delete{
    cursor: pointer;
    display: inline-block;
}

.cart-ad-card-item-delete i{
    font-size: 21px;
}

.cart-ad-card-item-content-quantity{
    margin-top: 10px;
}

.cart-ad-card-item-content-quantity-remains{
    margin-top: 10px;
    color: red;
    display: block;
    font-size: 14px;
}

.cart-sidebar-not-selected-items{
    display: none;
}

.cart-ad-card-item-content-quantity .quantity_inner .quantity{
    width: auto!important;
    min-width: 40px!important;
}

.cart-ad-card-item-user-rating{
    font-size: 15px;
    font-weight: 600;
    color: black;
    margin-left: 10px;
}

.cart-ad-card-item-user-rating i{
    font-size: 17px;
    color: #ffaf00;
}

.cart-ad-card-item-user a{
    color: black;
    font-size: 20px;
    font-weight: 900;
}

.cart-ad-card-item-user{
    display: inline-flex;
    align-items: center;
    margin-bottom: 15px;
}

.cart-ad-card-item-checkbox{
    margin-right: 15px;
}

.add-story-user-item:not(:last-child) {
    margin-bottom: 15px;
}

.add-story-user-item label{
    font-weight: bold;
    margin-bottom: 5px;
}

.add-story-user-tab-2, .add-story-user-tab-change-item{
    display: none;
}

.user-stories-modal{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: #3c3c3ca6;
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
}

.user-stories-modal-container-item{
    overflow: hidden;
    position: relative;
    border-radius: 20px;
    width: 470px;
    height: 100%;
    max-height: 900px;
    display: none;
}

.user-stories-modal-container{
    position: relative;
    z-index: 101;
    background-color: black;
    border-radius: 20px;
    box-shadow: 0 0.25rem 1.125rem rgba(75, 70, 92, 0.1);
    text-align: center;
    width: 470px;
    height: 100%;
    max-height: 900px;
    margin-top: auto;
    margin-bottom: auto;
}

.user-stories-modal-container-item-media{
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
    text-align: center;
    justify-content: center;
}

.user-stories-modal-container-item-media img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.user-stories-modal-container-item-footer{
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: inline-block;
    z-index: 15;
}

.user-stories-modal-container-item-header{
    position: absolute;
    left: 20px;
    right: 20px;
    top: 65px;
    display: inline-block;
    text-align: left;
    z-index: 10;
    background-color: white;
    padding: 15px;
    border-radius: 15px;
}

.user-stories-modal-container-header-timeline{
    align-items: left;
    display: flex;
    height: 5px;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 45px;
    z-index: 10;
}

.user-stories-modal-container-header-timeline > div{
    height: 5px;
    background-color: rgba(250, 250, 250, 0.45);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    width: 100%;
}

.user-stories-modal-container-header-timeline > div:not(:last-child) {
    margin-right: 5px;
}

.user-stories-modal-container-close{
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 12;
}

.user-stories-modal-container-close span{
    display: inline-flex;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: white;
    align-items: center;
    justify-content: center;
}

.user-stories-modal-container-close i{
    font-size: 18px;
    color: black;
}

.user-stories-modal-container-header-timeline > div span.end {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    display: block;
}

.user-stories-modal-container-header-timeline > div span.animation {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0%;
    background-color: white;
    display: block;
    animation: progressbar-countdown;
    animation-duration: 10s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: paused;
    animation-timing-function: linear;
}

.profile-tariffs-list{
    display: flex;
    overflow: hidden;
    position: relative;
}

.profile-tariffs-list-item{
    border-radius: 20px;
    padding: 20px;
    cursor: pointer;
    position: relative;
    padding: 25px;
    border-radius: 15px;
    border: 2px solid #f7f8fa;
    width: 320px!important;
}

.profile-tariffs-list-item:not(:last-child) {
    margin-right: 15px;
    margin-bottom: 15px;
}

.profile-tariffs-list-item-image{
    text-align: left;
    margin-bottom: 10px;
}

.profile-tariffs-list-item-image img{
    height: 128px;
}

.profile-tariffs-list-item-content h5{
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 5px;
    margin-top: 0px;
}

.profile-tariffs-list-item.active{
    background-color: #f7f8fa;
}

.profile-tariffs-list-item-price-old{
    color: red;
    text-decoration: line-through;
}

.profile-tariffs-list-item-label{
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 14px;
}

.profile-tariffs-list-items{
    margin-top: 15px;
}

.profile-tariffs-list-items span{
    display: block;
    font-weight: 600;
}

.profile-tariffs-list-items span small{
    font-weight: normal;
}

.profile-tariffs-list-items span:not(:last-child) {
    margin-bottom: 5px;
}

.profile-tariffs-list-item-prices{
    margin-top: 10px;
    margin-bottom: 10px;
}

.profile-tariffs-list-item-prices span{
    display: inline-block;
    font-size: 17px;
}

.profile-tariffs-list-item.active{
    background-color: #f7f8fa;
    border: 2px solid #8484ff!important;
}

.profile-tariffs-list-item-prices span:not(:last-child) {
    margin-right: 5px;
}

.profile-home-sections-info-item{
    background-color: #f7f8fa;
    padding: 25px;
    border-radius: 15px;
}

.profile-home-sections-info-item:not(:last-child) {
    margin-bottom: 10px;
}

.profile-home-sections-info-item h5{
    margin: 0px;
}

.text-color-red{
    color: red;
}

.profile-tariffs-action-payment{
    display: none;
}

.modal-shop-container-item:not(:last-child) {
    margin-bottom: 10px;
}

.modal-shop-container-item > span{
    margin-bottom: 5px;
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.personal-shop-banners-item{
    height: 400px;
    background-color: #f7f8fa;
    position: relative;
    display: block;
    position: relative;
}

.personal-shop-banners{
    margin-bottom: 25px;
    height: 400px;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}

.personal-shop-banners-item-slide{
    height: 400px;
    position: relative;
    width: 100%;
}

.personal-shop-banners-item-control{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 15px;
}

.personal-shop-banners-item-control span{
    display: flex;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    color: white;
    background-color: #0066f5;
    align-items: center;
    justify-content: center;
}

.personal-shop-banners-item-control span i{
    font-size: 25px;
    color: white;
}

.personal-shop-banners-control-floating{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -70px;
    margin-top: -35px;
    z-index: 5;
}

.personal-shop-banners-control-floating span{
    display: inline-flex;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    color: white;
    align-items: center;
    justify-content: center;
    margin: 5px;
}

.personal-shop-banners-control-floating span i{
    font-size: 25px;
    color: white;
}

.personal-shop-banners-control-floating span.actionChangeShopBanner{
    background-color: blue;
}

.personal-shop-banners-control-floating span.actionDeleteShopBanner{
    background-color: red;
}

.personal-shop-banners{
    position: relative;
}

.personal-shop-banners-items{
    position: relative;
}

.personal-shop-banners-prev{
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -25px;
    cursor: pointer;
    z-index: 10;
    display: inline-flex;
    width: 50px;
    height: 50px;
    background-color: white;
    color: black;
    cursor: pointer;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    box-shadow: rgb(0 0 0 / 6%) 0 4px 8px 0;
}

.personal-shop-banners-prev i{
    font-size: 22px;
    color: black;
}

.personal-shop-banners-next{
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -25px;
    cursor: pointer;
    z-index: 10;
    display: inline-flex;
    width: 50px;
    height: 50px;
    background-color: white;
    color: black;
    cursor: pointer;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    box-shadow: rgb(0 0 0 / 6%) 0 4px 8px 0;
}

.personal-shop-banners-next i{
    font-size: 22px;
    color: black;
}

.personal-shop-banners-prev:active, .personal-shop-banners-next:active{
    transform: scale(0.95);
}

.personal-shop-pages{
    display: flex;
    margin-top: 25px;
}

.personal-shop-pages-item:not(:last-child) {
    margin-right: 5px;
}

.personal-shop-pages .active{
    background-color: #141414; color: white!important;
}

.not-found-title-container-image{
    font-size: 25px;
}

.profile-container-user-grid{
    text-align: center;
}

.profile-container-user-grid-avatar-circle{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background-color: #f7f8fa;
    display: inline-block;
}

.profile-container-user-grid-name{
    font-weight: 900;
    margin-top: 5px;
    font-size: 18px;
    display: inline-block;
    margin-bottom: 5px;
}

.profile-container-user-grid{
    border-radius: 15px;
    padding: 25px;
    background-color: #f7f8fa;
    margin-bottom: 10px;
}

.stamp-user-rating{
    font-size: 14px;
    display: inline-flex;
    font-weight: 600;
    color: black;
}

.stamp-user-rating i{
    font-size: 20px;
    color: #ffaf00;
    margin-right: 3px;
}

.profile-settings-section-item:not(:last-child) {
    margin-bottom: 10px;
}

.profile-settings-section:not(:last-child) {
    margin-bottom: 25px;
}

.profile-settings-section > h5{
    margin-bottom: 20px;
}

.profile-settings-section{
    border-radius: 15px;
    padding: 25px;
    border: 1px solid #e6e6e6;
}

.profile-settings-section-item-organization{
    display: none;
}

.user-stories-modal-container-item-header-user{
    display: flex;
    justify-content: space-between;
}

.user-stories-modal-container-item-header-user-avatar{
    border-radius: 50%;
    width: 40px;
    height: 40px;
    overflow: hidden;
    position: relative;
}

.user-stories-modal-container-item-header-user-box2{
    flex-grow: 1;
    width: 100%;
    margin-left: 15px;
    display: inline-flex;
    align-items: center;
}

.user-stories-modal-container-prev-load{
    position: absolute;
    width: 30%;
    left: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 5;
}

.user-stories-modal-container-next-load{
    position: absolute;
    width: 70%;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 5;
}

@keyframes progressbar-countdown {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.story-video{
    width: 100%;
}

.ml10{
    margin-left: 10px;
}

.user-avatar-by-stories{
    display: inline-block;
    cursor: pointer;
}

.user-avatar-by-stories > div{
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 50%;
    display: flex;
    background-color: white;
    align-items: center;
    justify-content: center;
}

.user-avatar-by-stories-circle{
    width: 90px;
    height: 90px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

.widget-categories-or-subcategories-hide{
    overflow: hidden;
    max-height: 230px;
}

.widget-categories-or-subcategories-button-all{
    text-align: center;
    display: none;
    margin-top: 15px;
}

.profile-searches-item-list{
    padding: 25px;
    border-radius: 15px;
    background-color: #f7f8fa;
    display: block;
    margin-bottom: 15px;
    color: black;
}

.profile-searches-item-list a{
    color: black;
}

.profile-searches-item-list a:hover{
    color: #0066f5;
}

.profile-button-item-delete{
    cursor: pointer;
    display: inline-block;
}

.profile-button-item-delete i{
    font-size: 21px;
}

.profile-button-item-delete:hover{
    color: red;
}

.blog-post-card-content iframe{
    width: 100%;
    height: 500px;
}

.blog-post-card-content section:not(:last-child) {
    margin-bottom: 25px;
}

.blog-post-card-content img{
    max-width: 100%;
}

.table table{
    width: 100%;
}

.blog-grid-item{
    display: block;
    margin-bottom: 50px;
}

.blog-grid-item:hover .blog-grid-item-title{
    color: #0066f5;
}

.blog-grid-item-image{
    position: relative;
    width: 100%;
    height: 250px;
    border-radius: 15px;
    overflow: hidden;
}

.blog-grid-item-title{
    display: block;
    margin-top: 10px;
    color: black;
    font-size: 17px;
    font-weight: normal;
}

.advertising-banner-item{
    width: 100%;
    display: inline-block;
}

.advertising-banner-item img{
    max-width: 100%;
}

.advertising-banner-container{
    text-align: center;
    margin-bottom: 15px;
    overflow: hidden;
}

.advertising-banner-grid-item{
    width: 100%;
    display: inline-block;
    border-radius: 10px;
    overflow: hidden;
}

.advertising-banner-grid-item img{
    max-width: 100%;
}

.footer-cookie-container{
    position: fixed;
    right: 15px;
    z-index: 50;
    bottom: 35px;
    border-radius: 15;
    background-color: #070707;
    border-radius: 20px;
    color: #f5f7fa;
    display: none;
    padding: 20px;
    width: 280px;
    font-size: 14px;
}

/* xs (<=543px) */
@media (max-width: 575px) {
    
    .uni-media-slider-modal-container {
        border-radius: 0px!important;
        width: 100%!important;
        margin-top: 0px!important;
        margin-bottom: 0px!important;
        margin-left: 0px!important;
        margin-right: 0px!important;
        height: 100%!important;
        min-height: 100%!important;
    }

    .uni-media-slider-modal-container-item{
        border-radius: 0px!important;
    }

    .uni-media-slider-modal-close {
        right: 10px!important;
        top: 10px!important;
        color: #646161!important;
        z-index: 150!important;
    }

    .personal-shop-banners, .personal-shop-banners-item, .personal-shop-banners-item-slide{
        height: 200px!important;
    }

    .user-stories-modal-container, .user-stories-modal-container-item{
        width: 100%!important;
        height: 100%!important;
        border-radius: 0px!important;
    }

    .splash-notification, .splash-notification-alert{
        left: 15px!important;
        right: 15px!important;
    }

    .splash-notification-container, .splash-notification-alert-container{
        width: 100%!important;
        min-width: 100%!important;
        max-width: 100%!important;
    }

    .live-search-results{
        width: 100%!important;
        left: 0!important;
        right: 0!important;
    }

    .footer-cookie-container{
        left: 15px!important;
        width: auto!important;
        right: 15px!important;
    }

    .modal-content {
      border-radius: 0!important;
      border: none!important;
    }

    .uni-dropdown-content{
        left: 0px!important;
        right: 0px!important;
        width: 100%!important;
        max-width: 100%!important;
    }

    .search-map-sidebar, .search-map-sidebar-card, .search-map-sidebar-filters{
        left: 0px!important;
        right: 0px!important;
        top: 125px!important;
        bottom: 0px!important;
        width: auto!important;
        border-radius: 0px!important;
    }

    .search-map-sidebar-control-mobile{
        display: block!important;
    }

    .container-item-list-content-title, .container-item-list-content-user{
        margin-top: 10px!important;
    }

    .container-item-list-map-content-title{
        margin-top: 10px!important;
    }

    .container-item-list-map-images{
        height: 200px!important;
    }

    .footer-bg-box-link-inline .uni-dropdown{
        text-align: left!important;
        margin-top: 10px!important;
    }

    .catalog-container-options-links-inline-sorting{
        margin-top: 15px!important;
    }

    #chatModal .chat-dialogue-container, #chatModal .chat-dialogues-container, .modal-body{
          padding: 15px!important;
    }

    .container-item-images{
        height: 225px!important;
    }

}

/* sm (>=576 и <=767) */
@media (min-width: 576px) and (max-width: 767px) {
    
    .uni-media-slider-modal-container {
        border-radius: 0px!important;
        width: 100%!important;
        margin-top: 0px!important;
        margin-bottom: 0px!important;
        margin-left: 0px!important;
        margin-right: 0px!important;
        height: 100%!important;
        min-height: 100%!important;
    }

    .uni-media-slider-modal-container-item{
        border-radius: 0px!important;
    }

    .uni-media-slider-modal-close {
        right: 10px!important;
        top: 10px!important;
        color: #646161!important;
        z-index: 150!important;
    }

    .personal-shop-banners, .personal-shop-banners-item, .personal-shop-banners-item-slide{
        height: 200px!important;
    }

    .splash-notification, .splash-notification-alert{
        left: 15px!important;
        right: 15px!important;
    }

    .splash-notification-container, .splash-notification-alert-container{
        width: 100%!important;
        min-width: 100%!important;
        max-width: 100%!important;
    }

    .footer-cookie-container{
        left: 15px!important;
        width: auto!important;
        right: 15px!important;
    }

    .modal-content {
      border-radius: 0!important;
      border: none!important;
    }

    .search-map-sidebar, .search-map-sidebar-card, .search-map-sidebar-filters{
        left: 0px!important;
        right: 0px!important;
        top: 125px!important;
        bottom: 0px!important;
        width: auto!important;
        border-radius: 0px!important;
    }

    .search-map-sidebar-control-mobile{
        display: block!important;
    }

    .container-item-list-content-title, .container-item-list-content-user{
        margin-top: 10px!important;
    }

    .container-item-list-map-content-title{
        margin-top: 10px!important;
    }

    .container-item-list-map-images{
        height: 200px!important;
    }

    .footer-bg-box-link-inline .uni-dropdown{
        text-align: left!important;
        margin-top: 10px!important;
    }

    .catalog-container-options-links-inline{
        margin-bottom: 10px!important;
    }

    .catalog-container-options-links-inline-sorting{
        margin-top: 15px!important;
    }

    #chatModal .chat-dialogue-container, #chatModal .chat-dialogues-container, .modal-body{
          padding: 15px!important;
    }

}

/* md (>=768 и <=991) */
@media (min-width: 768px) and (max-width: 991px) {
    
    .uni-media-slider-modal-container {
        border-radius: 0px!important;
        width: 100%!important;
        margin-top: 0px!important;
        margin-bottom: 0px!important;
        margin-left: 0px!important;
        margin-right: 0px!important;
        height: 100%!important;
        min-height: 100%!important;
    }

    .uni-media-slider-modal-container-item{
        border-radius: 0px!important;
    }

    .uni-media-slider-modal-close {
        right: 10px!important;
        top: 10px!important;
        color: #646161!important;
        z-index: 150!important;
    }

    .personal-shop-banners, .personal-shop-banners-item, .personal-shop-banners-item-slide{
        height: 200px!important;
    }

    .search-map-sidebar, .search-map-sidebar-card, .search-map-sidebar-filters{
        left: 0px!important;
        right: 0px!important;
        top: 125px!important;
        bottom: 0px!important;
        width: auto!important;
        border-radius: 0px!important;
    }

    .search-map-sidebar-control-mobile{
        display: block!important;
    }

    .container-item-list-content-title, .container-item-list-content-user{
        margin-top: 10px!important;
    }

    .container-item-list-map-content-title{
        margin-top: 10px!important;
    }

}

/* lg (>=992 и <=1199) */
@media (min-width: 992px) and (max-width: 1199px) {

    .uni-media-slider-modal-container {
        border-radius: 0px!important;
        width: 100%!important;
        margin-top: 0px!important;
        margin-bottom: 0px!important;
        margin-left: 0px!important;
        margin-right: 0px!important;
        height: 100%!important;
        min-height: 100%!important;
    }

    .uni-media-slider-modal-container-item{
        border-radius: 0px!important;
    }

    .uni-media-slider-modal-close {
        right: 10px!important;
        top: 10px!important;
        color: #646161!important;
        z-index: 150!important;
    }

    .personal-shop-banners, .personal-shop-banners-item, .personal-shop-banners-item-slide{
        height: 200px!important;
    }

    .profile-user-sidebar-row{
        display: block!important;
    }

    .profile-user-sidebar-col-2{
        margin-left: 0px!important;
    }

    .search-map-sidebar-control-mobile{
        display: none!important;
    }

}

/* xl (>=1200) */
@media (min-width: 1200px) {
    
    .profile-user-sidebar-row{
        display: block!important;
    }

    .profile-user-sidebar-col-2{
        margin-left: 0px!important;
    }

    .search-map-sidebar-control-mobile{
        display: none!important;
    }

}

.header-flex-box-icon{
    display: inline-flex;
    align-items: center;
    height: 100%;
    color: black;
    position: relative;
}

.header-flex-box-icon i{
    font-size: 26px;
}

.header-flex-box-icon:not(:last-child) {
    margin-right: 10px;
}

.big-catalog-menu-mobile-container{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 15px;
    display: none;
    background-color: white;
    overflow: auto;
    z-index: 50;
}

.header-menu-filters-mobile-container{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 15px;
    display: none;
    background-color: white;
    overflow: auto;
    z-index: 50;
}

.header-hidden-height{
    height: 48px;
}

.header-visible-height{
    height: 110px;
}

.link-geo-item:hover{
    color: #0066f5;
}

.profile-referral-container{
    border-radius: 15px;
    padding: 20px;
    background-color: #ebffeb;
    word-break: break-word;
}

.profile-referral-container h5{
    margin-top: 0;
    font-weight: 600;
}

.profile-referral-container p{
    margin-bottom: 0px;
}

.table-container-item-list{
    padding: 15px;
    border-radius: 15px;
    background-color: #f7f8fa;
    margin-bottom: 10px;
}

.user-items-container{
    max-height: 300px;
    overflow: auto;
}

.user-item-container{
    border-radius: 15px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    color: black;
}

.user-item-container:not(:last-child){
    margin-bottom: 5px;
}

.user-item-container.active{
    background-color: #ebf2ff;
}

.user-item-container-box2{
    margin-left: 15px;
    flex-grow: 1;
    font-weight: 600;
}

.user-item-container-image{
    border-radius: 15px;
    width: 50px;
    height: 50px;
    position: relative;
    overflow: hidden;
}

.user-item-container-box2 span{
    display: block;
}

.user-item-container:hover{
    background-color: #ebf2ff;
    color: black;
}

.profile-settings-section-notifications-method-telegram{
    display: none;
}

.text-break-word{
    word-break: break-word;
}

.shop-catalog-search-container{
    position: relative;
}

.shop-categories-list-modal a{
    display: block;
    margin-bottom: 5px;
    color: black;
}

.shop-categories-list-modal a:hover{
    color: blue;
}

.form-control-label{
    margin-bottom: 10px;
}

.badge.badge-notifications {
    position: absolute;
    top: 10px;
    right: -8px;
    display: inline-block;
    margin: 0;
    transform: translate(-50%, -45%);
}

.badge.badge-dot {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    vertical-align: middle;
}

.ml5{
    margin-left: 5px!important;
}

.bg-danger {
    background-color: #ea5455 !important;
}

.mobile-grid-menu-category-item{
    display: block;
    background-color: #f7f8fa;
    padding: 15px;
    border-radius: 15px;
    overflow: hidden;
    height: 115px;
    position: relative;
    word-break: break-word;
}

.mobile-grid-menu-category-item div {
    z-index: 5;
    color: black;
    position: relative;
    font-size: 14px;
}

.mobile-grid-menu-category-item img {
    position: absolute;
    right: 0;
    bottom: 0px;
    height: 70px;
}

.mobile-menu-list-link a{
    display: block;
    color: black;
    margin-bottom: 10px;
}

.mobile-grid-menu-category-item:not(:last-child){
    margin-right: 5px;
    margin-bottom: 5px;
}

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.uni-dropdown-content-custom-link a{
    color: black;
    display: block;
    padding: 3px 15px;
}

.uni-dropdown-content-custom-link a:hover{
    color: blue;
}

.shop-floating-menu{
    position: fixed;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 15px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: white;
    box-shadow: 0 6px 32px #5e5c5c24;
    z-index: 15;
}

.profile-user-sidebar-row{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.profile-user-sidebar-col-2{
    margin-left: 15px;
    flex-grow: 1;
    width: 100%;
}

.mb100{
    margin-bottom: 100px;
}

.mb50{
    margin-bottom: 50px;
}

.textEditor img{
    max-width: 100%;
}

.home-widget-sections section:empty {
    margin: 0px!important;
}

.profile-tariffs-swiper-prev{
    position: absolute;
    left: 25px;
    top: 50%;
    margin-top: -30px;
    display: inline-flex;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background-color: #186aff;
    cursor: pointer;
    color: white;
    box-shadow: rgb(0 0 0 / 6%) 0 4px 8px 0;
    z-index: 102;
}

.profile-tariffs-swiper-next{
    position: absolute;
    right: 25px;
    top: 50%;
    margin-top: -30px;
    display: inline-flex;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background-color: #186aff;
    cursor: pointer;
    color: white;
    box-shadow: rgb(0 0 0 / 6%) 0 4px 8px 0;
    z-index: 102;
}

.profile-tariffs-swiper-prev i, .profile-tariffs-swiper-next i{
    font-size: 26px;
}

.swiper-button-disabled { display: none; }

.search-map-container{
    position: fixed;
    left: 0;
    right: 0;
    top: 125px;
    bottom: 0;
    height: 100%;
    width: 100%;
}

.search-map-sidebar, .search-map-sidebar-card{
    position: fixed;
    left: 15px;
    top: 140px;
    bottom: 15px;
    background-color: white;
    padding: 25px;
    border-radius: 20px;
    width: 510px;
    z-index: 5;
    overflow: auto;
}

.search-map-sidebar-filters{
    position: fixed;
    left: 15px;
    top: 140px;
    bottom: 15px;
    background-color: white;
    padding: 25px;
    border-radius: 20px;
    width: 380px;
    z-index: 10;
    overflow: auto;
    -webkit-box-shadow: 0px 0px 37px 2px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 0px 37px 2px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 0px 37px 2px rgba(34, 60, 80, 0.2);
}

.search-map-sidebar, .search-map-sidebar-filters{
    display: none;
}

.search-map-sidebar-not-found{
    margin-top: 30px;
}

.search-map-sidebar-control{
    margin-bottom: 25px;
}

.search-map-sidebar-card{
    display: none;
}

.search-map-sidebar-card-container{
    margin-top: 15px;
}

.search-map-sidebar-container.active{
    opacity: 0.4;
}

.search-map-sidebar-control-mobile{
    background-color: white;
    padding: 15px;
    position: fixed;
    left: 0;
    right: 0;
    top: 125px;
    z-index: 5;
    display: none;
}

.label-info-rating-by-color{
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 13px;
}

.label-info-rating-by-color span{
    display: inline-block;
    border-radius: 7px;
    font-size: 14px;
    padding: 2px 6px;
    margin-right: 5px;
    font-size: 13px;
}

.color-rating-green span{
    background-color: #00c257;
    color: white;
}

.color-rating-green{
    color: #00c257;
}

.color-rating-yellow span{
    background-color: #f79900;
    color: white;
}

.color-rating-yellow{
    color: #f79900;
}

.color-rating-gray span{
    background-color: gray;
    color: white;
}

.color-rating-gray{
    color: gray;
}

.box-user-face-card-avatar > div{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: inline-block;
    background-color: #f7f8fa;
}

.box-user-face-card-avatar{
    height: 35px;
}

.box-user-face-card{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-user-face-card-content{
    flex-grow: 1;
    margin-left: 10px;
}

.container-item-list-content-properties{
    margin-top: 10px;
}

.search-map-sidebar-filters-buttons{
    margin-top: 30px;
}

.container-item-list-map-images{
    height: 150px;
    overflow: hidden;
    border-radius: 15px;
    position: relative;
    background-color: #F7F8FA;
}

.container-item-list-map-content-title{
    font-size: 19px;
    font-weight: 500;
    display: block;
}

.container-item-list-map-content-title:hover{
    color: blue!important;
}

.container-item-list-map-content-additionally{
    margin-top: 10px;
}

.container-item-list-map-content-additionally span{
    display: block;
    font-size: 13px;
    color: gray;
}

.container-item-list-map-content-prices .card-item-price-now{
    font-size: 20px;
    font-weight: 600;
    color: black;
}

.container-item-list-map-content-prices .card-item-price-old{
    font-size: 18px;
    color: #f81155;
    text-decoration: line-through;
    margin-left: 5px;
    display: inline-block;
}

.container-item-list-map-content-prices .card-item-price-measure-title{
    font-size: 14px;
}

.container-item-list-map-content-user{
    margin-top: 15px;
}

.container-item-list-map{
    cursor: pointer;
    position: relative;
    margin-bottom: 25px;
    display: block;
}

.container-item-list-map{
    color: black;
}

.container-item-list-map:hover{
    color: black;
}

.container-item-list-map:hover .container-item-list-map-content-title{
    color: blue!important;
}

.datepicker .table-condensed{
    width: 100%!important;
}

.datepicker{
    width: 100%!important;
}

.datepicker .table-condensed td{
    border-radius: 10px!important;
    width: 40px!important;
    height: 40px!important;
    position: relative;
}

.datepicker table tr td.disabled{
    text-decoration: line-through!important;
    color: #c4c4c4!important;
}

.datepicker table tr td .table-label-price{
    color: red;
    position: absolute;
    font-size: 11px!important;
    bottom: -2px;
    left: 0;
    right: 0;
    text-align: center;
}

.datepicker td.active.selected .table-label-price{
    color: white!important;
}

.ad-create-options-additional-services-item:not(:last-child){
    margin-bottom: 15px;
}

.ad-create-options-special-days-item:not(:last-child){
    margin-bottom: 15px;
}

.ad-create-options-week-days-item:not(:last-child){
    margin-bottom: 15px;
}

.ad-create-options-additional-services-item-delete, .ad-create-options-special-days-item-delete{
    cursor: pointer;
    display: flex;
    height: 100%;
    align-items: center;
}

.ad-card-booking-button-order{
    padding: 10px 0;
}

.modal-booking-order-info-container > div{
    padding: 20px;
    border-radius: 20px;
    background-color: #ebffeb;
    margin-bottom: 10px;
    font-size: 13px;
}

.modal-booking-order-info-container > div i{
    font-size: 34px;
    margin-bottom: 10px;
}

.list-points{
  padding: 0;
  margin: 0;
}

.list-points li {
  display: flex;
}

.list-points li .list-points-title {
  order: 1;
}

.list-points li .list-points-chapter {
  order: 3;
}

.list-points li::after {
  background-image: radial-gradient(circle, currentcolor 1px, transparent 1.5px);
  background-position: bottom;
  background-size: 1ex 4.5px;
  background-repeat: space no-repeat;
  content: "";
  flex-grow: 1;
  height: 1em;
  order: 2;
  color: #b6b6b6;
}

.modal-booking-order-additional-services-item{
    margin-bottom: 10px;
}

.modal-booking-order-additional-services-container{
    margin-top: 15px;
    margin-bottom: 30px;
}

.uni-dropdown-content-item-image{
    display: inline-block;
    margin-right: 10px;
    width: 25px;
    height: 25px;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
}

.uni-dropdown-content-item-image img{
    height: 100%;
}

.main-floating-menu{
    position: fixed;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 0px 5px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: white;
    justify-content: space-between;
    box-shadow: 0 6px 32px #5e5c5c24;
    z-index: 15;
    text-align: center;
    transition: transform .2s ease-in-out;
}

.main-floating-menu > a {
    text-decoration: none;
    text-align: center;
    color: #646464;
    position: relative;
    height: 100%;
    display: inline-flex;
    margin: 0 6px;
    text-align: center;
    padding: 12px 0;
}

.main-floating-menu > a:hover {
    color: blue;
}

.main-floating-menu > a span{
    display: block;
    font-size: 12px;
}

.main-floating-menu > a span i{
    font-size: 30px;
}

.main-floating-menu .chat-icon-counter{
    display: none;
}

.widget-categories-or-subcategories-counter{
    font-size: 0px;
    display: inline-block;
}

.params-form-item-subcategories .uni-select:not(:last-child){
    margin-bottom: 10px;
}

.modal-booking-order-prices-container{
    margin-bottom: 25px;
}

.transactions-statistics-month-list-item{
  display: inline-block;
  padding: 8px 22px;
  background-color: #f2f3f8;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  margin-right: 5px;
  margin-bottom: 8px;
  color: #6c6b70;
}

.transactions-statistics-month-list-item:hover{
  background-color: #e9e7fd;
  color: black!important;
}

.transactions-statistics-month-list-item.active{
  background-color: #e9e7fd;
}

.transactions-statistics-month-list-item strong{
  display: block;
}

.container-item-grid-content-user{
    margin-top: 10px;
}

.page-link.active, .active > .page-link {
    color: white;
    background-color: #186aff;
    border-color: #186aff;
}
.active>.page-link, .page-link.active {
    color: white;
    background-color: #186aff;
    border-color: #186aff;
}
.page-link, .page-link > a {
    border-radius: 5px;
    line-height: 1;
    text-align: center;
    min-width: calc(2.4275rem + 0px);
}
.page-link {
    position: relative;
    display: block;
    padding: 10px;
    font-size: 14px;
    color: black;
    background-color: #f2f2f2;
    border: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-right: 6px;
}

.profile-settings-sections a{
    display: inline-block;
    padding: 25px;
    border-radius: 20px;
    background-color: #f7f8fa;
    margin-right: 15px;
    min-width: 150px;
    color: black;
}

.profile-settings-sections a i{
    font-size: 32px;
    color: #186aff;
}

.profile-settings-sections a:hover, .profile-settings-sections a.active{
    background:radial-gradient(at 69.15532025790753% 36.41550007427477%, hsla(131.66666666666669, 100%, 92.94117647058823%, 1) 0%, hsla(131.66666666666669, 100%, 92.94117647058823%, 0) 100%), radial-gradient(at 94.0764618849782% 55.11658568527875%, hsla(221.31147540983608, 100%, 88.0392156862745%, 1) 0%, hsla(221.31147540983608, 100%, 88.0392156862745%, 0) 100%), radial-gradient(at 44.26054764814447% 15.32559530653057%, hsla(40.67796610169492, 83.09859154929579%, 86.07843137254902%, 1) 0%, hsla(40.67796610169492, 83.09859154929579%, 86.07843137254902%, 0) 100%), radial-gradient(at 63.40410496647628% 54.78047818181293%, hsla(131.66666666666669, 100%, 92.94117647058823%, 1) 0%, hsla(131.66666666666669, 100%, 92.94117647058823%, 0) 100%), radial-gradient(at 17.31968358330116% 6.007814459050276%, hsla(221.31147540983608, 100%, 88.0392156862745%, 1) 0%, hsla(221.31147540983608, 100%, 88.0392156862745%, 0) 100%), radial-gradient(at 45.211359986419694% 5.395186206843672%, hsla(40.67796610169492, 83.09859154929579%, 86.07843137254902%, 1) 0%, hsla(40.67796610169492, 83.09859154929579%, 86.07843137254902%, 0) 100%), radial-gradient(at 7.762721610145018% 77.65073886063318%, hsla(131.66666666666669, 100%, 92.94117647058823%, 1) 0%, hsla(131.66666666666669, 100%, 92.94117647058823%, 0) 100%);
}

.credit-card-add{
    border-radius: 15px;
    max-width: 350px;
    position: relative;
    transition: all 0.4s ease;
    box-shadow: 0 2px 4px 0 #cfd7df;
    min-height: 100px;
    background: #f7f8fa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.credit-card {
    margin-bottom: 15px;
    border-radius: 15px;
    max-width: 350px;
    position: relative;
    transition: all 0.4s ease;
    box-shadow: 0 2px 4px 0 #cfd7df;
    min-height: 130px;
    padding: 15px;
    background:radial-gradient(at 68.91657326694178% 39.41528975971814%, hsla(220.8196721311475, 80.26315789473684%, 70.19607843137254%, 1) 0%, hsla(220.8196721311475, 80.26315789473684%, 70.19607843137254%, 0) 100%), radial-gradient(at 77.31353997909237% 61.95250002693417%, hsla(220.7142857142857, 96.55172413793103%, 45.490196078431374%, 1) 0%, hsla(220.7142857142857, 96.55172413793103%, 45.490196078431374%, 0) 100%), radial-gradient(at 53.299380524022986% 97.7414760297016%, hsla(221.31147540983608, 81.33333333333336%, 85.29411764705883%, 1) 0%, hsla(221.31147540983608, 81.33333333333336%, 85.29411764705883%, 0) 100%), radial-gradient(at 12.73094977135144% 40.527619432868036%, hsla(220.8196721311475, 80.26315789473684%, 70.19607843137254%, 1) 0%, hsla(220.8196721311475, 80.26315789473684%, 70.19607843137254%, 0) 100%), radial-gradient(at 9.887582172484066% 68.08494817062419%, hsla(220.7142857142857, 96.55172413793103%, 45.490196078431374%, 1) 0%, hsla(220.7142857142857, 96.55172413793103%, 45.490196078431374%, 0) 100%), radial-gradient(at 6.190747150886855% 16.65181617998962%, hsla(221.31147540983608, 81.33333333333336%, 85.29411764705883%, 1) 0%, hsla(221.31147540983608, 81.33333333333336%, 85.29411764705883%, 0) 100%), radial-gradient(at 70.6105260773787% 31.819452830829064%, hsla(220.8196721311475, 80.26315789473684%, 70.19607843137254%, 1) 0%, hsla(220.8196721311475, 80.26315789473684%, 70.19607843137254%, 0) 100%), radial-gradient(at 90.52523756998397% 84.55784615203493%, hsla(220.7142857142857, 96.55172413793103%, 45.490196078431374%, 1) 0%, hsla(220.7142857142857, 96.55172413793103%, 45.490196078431374%, 0) 100%), radial-gradient(at 51.274739451522656% 72.11282253158441%, hsla(221.31147540983608, 81.33333333333336%, 85.29411764705883%, 1) 0%, hsla(221.31147540983608, 81.33333333333336%, 85.29411764705883%, 0) 100%), radial-gradient(at 41.72686516022628% 46.472646730671364%, hsla(220.8196721311475, 80.26315789473684%, 70.19607843137254%, 1) 0%, hsla(220.8196721311475, 80.26315789473684%, 70.19607843137254%, 0) 100%);
    color: white;
}

.credit-card.selectable:hover {
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}


.credit-card-last4 {
    font-family: "PT Mono", Helvetica, sans-serif;
    font-size: 24px;
}

.credit-card-last4:before {
    content: "**** **** **** ";
    color: white!important;
    font-size: 20px;
}

.credit-card-expiry {
    font-family: "PT Mono", Helvetica, sans-serif;
    font-size: 18px;
    position: absolute;
    bottom: 8px;
    left: 15px;
}


.credit-card::after {
    content: " ";
    position: absolute;
    bottom: 10px;
    right: 15px;
}

.actionDeletePaymentScore{
    position: absolute;
    top: 15px;
    right: 15px;
}

.actionDeletePaymentScore i{
    font-size: 20px;
    color: white;
}

.actionAddDefaultPaymentScore{
    position: absolute;
    top: 15px;
    right: 40px;
}

.actionAddDefaultPaymentScore i{
    font-size: 20px;
    color: white;
}

.actionAddDefaultPaymentScore i.active-yellow{
    font-size: 20px;
    color: yellow;
}

.ad-card-info-stat{
    margin-top: 30px;
    margin-bottom: 20px;
}

.ad-card-info-stat-item{
    display: inline-block;
    padding: 15px;
    border-radius: 20px;
    background-color: #f7f8fa;
    text-align: center;
    margin-right: 10px;
    min-width: 120px;
    cursor: pointer;
}

.ad-card-info-stat-item i{
    font-size: 30px;
    color: #186aff;
}

.ad-card-info-stat-item span{
    display: block;
    font-weight: 500;
    font-size: 15px;
    margin-top: 5px;
}

.ad-card-info-stat-item:active{
    transform: scale(0.98);
}

.ad-users-info-stat-modal a{
    display: inline-block;
    width: 100px;
    margin-right: 15px;
    margin-bottom: 15px;
    text-align: center;
    vertical-align: top;
}

.ad-users-info-stat-item > div{
    border-radius: 50%;
    width: 70px;
    height: 70px;
    overflow: hidden;
    margin-bottom: 5px;
    display: inline-block;
}

.ad-users-info-stat-item > span{
    display: block;
}

.order-buy-delivery-recipient{
    display: none;
}

.order-buy-delivery-recipient-data > div{
    margin-top: 20px;
}

.delivery-points-map-modal{
    width: 100%;
    height: 600px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.delivery-points-map-container-modal{
    position: relative;
}

.delivery-points-map-sidebar-modal{
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    border-radius: 15px;
    background-color: white;
    padding: 25px;
    width: 360px;
    z-index: 10;
    overflow: auto;
    display: none;
}

.order-buy-delivery-point{
    display: none;
}

.profile-settings-shipping-points-list > div{
    border-radius: 15px;
    padding: 15px;
    border: 1px solid #e6e6e6;
    margin-bottom: 10px;
}

.profile-settings-shipping-points-list > div img{
    margin-bottom: 5px;
}

.cart-ad-card-item-delivery-name{
    margin-top: 10px;
}

.page-support-item{
    padding: 25px;
    border-radius: 15px;
    background-color: #f7f8fa;
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 10px;
    transition: all .10s linear;
}

.page-support-item strong{
    font-size: 20px;
}

.page-support-item:hover{
    background-color: #186aff;
    color: white;
}

.page-support-item:hover a{
    color: white!important;
}

.container-item-list-content-user{
    margin-top: 15px;
}

.container-item-list-highlight .container-item-list-map-content{
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 15px;
}.table-responsive {
    word-break: normal!important;
}

.actionSendVerifyCodeEmailContainer, .actionSendVerifyCodePhoneContainer{
    display: none;
}

.personal-shop-pages-item{
    margin-bottom: 5px;
}

.blog-grid-item-date{
    color: gray;
    font-size: 16px;
    display: block;
}

.blog-grid-item-category{
    color: gray;
    font-size: 16px;
    display: block;
}

.blog-widget-categories-or-subcategories a{
    font-weight: 500;
    font-size: 23px;
    color: #0d6efd;
    display: inline-block;
    margin-right: 25px;
}

.blog-widget-categories-or-subcategories a.active, .blog-widget-categories-or-subcategories a:hover{
    color: black;
}

.blog-post-card-sidebar{
    margin-top: 50px;
}

.title-nearest-cities{
    font-weight: 800;
    margin: 40px 0;
    font-size: 28px;
    text-align: center;
}

.promo-business-header-container-list{
    margin-top: 35px;
}

.promo-business-header-container-list > div{
    display: inline-block;
    border-radius: 5px;
    padding: 15px 25px;
    background-color: #6640f4;
    margin-bottom: 10px;
    font-weight: 600;
    color: white;
}

.promo-business-header-container-list > div i{
    font-size: 25px;
    color: white;
}

.promo-business-header-container-list > div:not(:last-child){
    margin-right: 10px;
}

.promo-business-header-container-title{
    margin-top: 60px;
}

.promo-business-header-container-title h1{
    font-size: 30px;
    color: #34495e;
}

.promo-business-header-container-title h3{
    font-size: 18px;
    font-weight: 400;
}

.promo-business-section-container-title h2{
    font-weight: 700;
    font-size: 35px;
}

.live-search-results-item:hover span{
    color: white!important;
}

.live-search-results-item > span{
    color: #9f9f9f;
    display: block;
    font-size: 14px;
}

.blog-grid-item-image{
    margin-bottom: 15px;
}

.actionSendVerifyCodeEmailContainer .actionSendVerifyCodeEmail, .actionSendVerifyCodePhoneContainer .actionSendVerifyCodePhone{
    display: block!important;
}

.card-contact-user h4{
    display: block;
    font-size: 25px;
    margin: 0px;
}

.card-contact-user a{
    display: block;
    font-size: 18px;
}

.card-contact-user-item:not(:last-child) {
    margin-bottom: 15px;
}

.card-contact-user-item > p{
    margin-bottom: 5px;
    margin-top: 0px;
}

.card-contact-user-item a{
    color: black;
}

.card-contact-user-item-box:hover{
    color: white!important;
    background-color: #186aff!important;
}

.card-contact-user-item-box:not(:last-child) {
    margin-bottom: 10px;
}

.card-contact-user-item-box{
    padding: 15px;
    border-radius: 15px;
    background-color: #f7f8fa;
    transition: all .10s linear;
    display: flex !important;
    align-items: center;
}

.card-contact-user-item-box img{
    height: 23px;
    margin-right: 5px;
}

.card-contact-user-item i{
    font-size: 26px;
}

.card-contact-user{
    margin-top: 15px;
}

.blog-content-image img{
    max-width: 100%!important;
}

.blog-content-image > div{
    width: auto;
}
.ad-users-info-stat-item{
    display: inline-block;
    text-align: center;
}
.fs-7 {
	font-size: 14px !important;
}
.fs-8 {
	font-size: 13px !important;
}
.auction-sidebar {
	background-color: white;
	padding: 20px;
	border-radius: 15px;
	box-shadow: 0 6px 15px #5e5c5c24;
}
.bets-info {
	padding: 10px 15px;
	display: flex;
	width: 100%;
	border-radius: 10px;
	background-color: #f7f8fa;
	border: 1px dashed #bdbdbd;
	box-shadow: none;
	font-size: 14px;
}
.auction-underway {
	padding: 8px 15px;
	border-radius: 10px;
	background-color: #fcffd0;
	border: 1px dashed #ced292;
	font-size: 14px;
}
.auction-underway > div {
	font-size: 15px;
	font-weight: 700;
}
.all-bets-container > div > div{
	min-width: 68px;
}
.badge {
	--bs-badge-font-weight: 500;
}
.badge.badge-md {
	--bs-badge-padding-x: 1.25em;
	--bs-badge-padding-y: 0.75em;
	--bs-badge-font-size: 0.75em;
	--bs-badge-font-weight: 600;
}
.text-bg-warning {
	color: #000 !important;
	background-color: #f0f071 !important;
}
.alert {
 border-radius: 10px !important;
}
.text-bg-success {
	color: #fff!important;
	background-color: #00c258 !important;
}
.alert-success {
--bs-alert-bg: #b5ffdd;
--bs-alert-border-color: #bff5dc;
}
.alert-danger {
--bs-alert-bg: #fcc9cd;
--bs-alert-border-color: #f9b5bd;
}
.btn-check:checked+.button-color-scheme2, .button-color-scheme2:first-child:active, :not(.btn-check)+.button-color-scheme2:active {
background-color: #6640f4;
color: white !important;
}.blog-content-text{
    font-size: 18px;
}

.breadcrumb-container{
    text-align: center;
}

.breadcrumb-container nav{
    display: inline-block;
}

.ad-users-info-stat-item{
    display: inline-block;
    text-align: center;
}

.input-phone-countries-container{
    position: relative;
    display: flex;
    justify-content: space-between;
    z-index: 4;
}

.input-phone-countries-change-item{
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f7f8fa;
    padding: 0 10px;
    border-radius: 10px;
    cursor: pointer;
}

.input-phone-countries-change-item:hover{
    background-color: black;
    color: white;
    transition: all .10s linear; 
}

.input-phone-countries-items-container{
    position: absolute; top: 45px;
    left: 0;
    background-color: white;
    box-shadow: 0 6px 32px #5e5c5c24;
    padding: 10px 0;
    border-radius: 10px; 
    overflow: auto;
    max-height: 250px;
    border: 1px solid transparent;
    display: none;
}

.input-phone-countries{
    margin-left: 10px;
    flex-grow: 1;
}

.input-phone-countries-items-container span{
    display: block;
    cursor: pointer;
    padding: 5px 25px;
}

.input-phone-countries-items-container span:hover{
    background-color: #f7f8fa;
}

.input-phone-countries-change-item:active{
    transform: scale(0.95); 
}

.input-phone-countries-change-item img{
    height: 16px;
    margin-right: 5px;
}

.input-phone-countries-items-container span img{
    height: 16px;
    margin-right: 5px;
}

.section-promo-download-app{
    border-radius: 30px;
    background: #3850F0;
    background: radial-gradient(at left top, #3850F0, #0C1338);
    padding: 50px;
    position: relative;
    margin-bottom: 80px;
    margin-top: 80px;
}

.section-promo-download-app h2{
    font-size: 45px;
    color: white;
}

.section-promo-download-app p{
    color: white;
}

.section-promo-download-app-image-device{
    position: absolute;
    right: 121px;
    top: -69px;
    z-index: 1;
}

.cart-ad-card-item-image{
    flex-shrink: 0;
}.order-buy-card-delivery-list-box{
    display: none;
}

.ad-paid-services-ads-list{
    padding: 15px;
    border-radius: 15px;
    background-color: #f7f8fa;
    max-height: 700px;
    overflow: auto;
    margin-top: 15px;
}

.ad-paid-services-ads-item{
    display: flex;
    justify-content: space-between;
    padding: 5px;
    border-radius: 15px;    
    color: black;
}

.ad-paid-services-ads-item:not(:last-child){
    margin-bottom: 10px;
}

.ad-paid-services-ads-item:hover{
    background-color: #186aff;
    color: white;
}

.ad-paid-services-ads-item.active{
    background-color: #186aff;
    color: white;
}

.ad-paid-services-ads-item-image{
    height: 40px;
    width: 40px;
    border-radius: 10px;
    margin-right: 15px;
    overflow: hidden;
    flex-shrink: 0;
}

.ad-paid-services-ads-item-title{
    flex-grow: 1;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
}

.ad-paid-services-ads-container p{
    font-size: 18px;
    font-weight: bold;
}

.addon-delivery-history-container-modal{
    margin-top: 30px;
    margin-bottom: 3px;
}

.telegram-button {
    position: fixed;
    right: 0px;
    bottom: 0px;
    border-radius: 50%;
    width: 120px;
    height: 150px;
    z-index: 9999;
    #background-color: #2CA5E0;
    background-image: url("/img/chats.png");
    background-size: 70%; 
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.new_footer_top {
  padding: 120px 0px 270px;
  position: relative;
}

.new_footer_top .footer_bg {
  position: absolute;
  bottom: 0;
  background: url("/ima/footer_bg.png") no-repeat scroll center 0;
  width: 100%;
  height: 266px;
  transform: translateX(-25px);
}

.new_footer_top .footer_bg .footer_bg_one {
  background: url("/ima/car.png") no-repeat center center;
  width: 70px;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 30%;
  -webkit-animation: myfirst 22s  linear infinite;
  animation: myfirst 22s  linear infinite;
}

.new_footer_top .footer_bg .footer_bg_two {
  background: url("/ima/bike.png") no-repeat center center;
  width: 50px;
  height: 52px;
  bottom: 0;
  left: 38%;
  position: absolute;
  -webkit-animation: myfirst 30s  linear infinite;
  animation: myfirst 30s  linear infinite;
}

@-moz-keyframes myfirst {
  0% {
    left: -25%;
  }
  100% {
    left: 100%;
  }
}

@-webkit-keyframes myfirst {
  0% {
    left: -25%;
  }
  100% {
    left: 100%;
  }
}

@keyframes myfirst {
  0% {
    left: -25%;
  }
  100% {
    left: 100%;
  }

/* ============================================================================
   ИСПРАВЛЕНО 15.09.2026: в файле НЕ БЫЛО закрывающей скобки блока
   @keyframes myfirst (открыт на строке 7620, файл обрывался на строке 7626).
   Браузер закрывает такой блок по концу файла, поэтому визуально это не
   проявлялось — но ЛЮБОЙ текст, дописанный в конец файла, попадал ВНУТРЬ
   @keyframes myfirst и молча игнорировался (внутри @keyframes допустимы только
   кадры 0%/100%/from/to). Поэтому блок закрыт выше, и только после него
   дописаны правила.
   ============================================================================ */
}

/* ============================================================================
   TRADELOT: CSS из обновлений CMS 5.5 и 5.6
   ----------------------------------------------------------------------------
   При применении обновления CMS дописывает в тему свой фрагмент
   (storage/files/update_<версия>_<хэш>/files/view/web/css/main.css).
   Фрагменты обновлений 5.1, 5.3 и 5.4 в main.css есть, а 5.5 и 5.6 — не доехали:
   30.03.2026 они оказались только в не подключённом main_new.css, а 06.08.2026
   main.css перезаписали без них. Восстановлено 15.09.2026 (см. TRADELOT_PROJECT_STATE.md §12.31).
   Текст правил ниже скопирован из файлов обновлений дословно.
   Проверка после следующих апдейтов: _deploy\tradelot_tools\_frag_check.php
   ============================================================================ */

/* ------------------------- из обновления CMS 5.5 ------------------------- */
.ad-create-categories-container-items span{
    display: inline-block;
    border-radius: 15px;
    padding: 7px 17px;
    margin-right: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    background-color: #f7f8fa;
    transition: all .10s linear; 
}

.ad-create-categories-container-items span:hover{
    color: white;
    background-color: #141414;
}

.ad-create-categories-item.active{
    color: white;
    background-color: #141414;    
}

.ad-create-content-container{
    position: relative;
    display: block!important;
}

/* пошаговый вариант мастера: контейнер формы показывается сразу */
.ad-create-options-container:has(.ad-create-container){
    position: relative;
    display: block!important;
}

/* ----------------------------------------------------------------------------
   СТРАНИЦА РЕДАКТИРОВАНИЯ ЛОТА: контейнер с формой ВСЕГДА виден (грабля §12.26).
   Правило из обновления 5.5 (.ad-create-options-container{display:block!important})
   применено не ко всем контейнерам, а только к тому, внутри которого лежит форма
   РЕДАКТИРОВАНИЯ (form.form-ad-update) — она бывает только на /ad/edit/<id>.
   На /ad/create стоит form.form-ad-create, и там контейнер обязан оставаться
   скрытым до выбора раздела (его показывает JS: assets/js/ad.js:132,161).
   Нужно потому, что страничное правило `.ad-edit-options-container{display:block!important}`,
   добавленное 14.09.2026 в ad-edit.tpl, при переписывании шаблона (15.09.2026, 22:56)
   из страницы пропало — и форма снова стала невидимой. Это правило её страхует.
   ---------------------------------------------------------------------------- */
.ad-create-options-container:has(form.form-ad-update),
.ad-edit-options-container:has(form.form-ad-update){
    position: relative;
    display: block!important;
}

.ad-create-options-actions-swim{
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

div[data-step-status="true"]{
    display: none;
}

.ad-create-container{
    min-height: 100vh;
}

.width-150{
    width: 150px!important;
}

.ad-create-options-actions-swim > div{
    margin-right: 15px;
}

.ad-create-options-actions-prev-step{
    display: none;
}

.ad-create-options-container-item-extra-settings{
    margin-bottom: 40px;
}

.profile-container-shop-list{
    color: black;
    margin-bottom: 15px;
    display: block;
    border-radius: 15px;
    background-color: #f7f8fa;
    padding: 15px;
}

.profile-container-shop-list:hover{
    color: black;
}

.profile-container-item-images-mini{
    height: 110px;
    overflow: hidden;
    border-radius: 15px;
    position: relative;
    background-color: #F7F8FA;
}

.profile-container-shop-list-content-title{
    font-size: 21px;
    font-weight: 700;
}

.profile-container-shop-list-content-category{
    display: block;
    font-size: 14px;
    margin-top: 5px;
    color: gray;    
}

.profile-container-shop-list-content-title:hover{
    color: #0066f5;
}

.profile-button-item-actions{
    border-radius: 50px;
    width: 35px;
    height: 35px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-button-item-actions:hover{
    background-color: #186aff;
    color: white;
}

.user-shop-item{
    padding: 15px;
    border-radius: 15px;
    background-color: #f7f8fa;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    border: 1px solid white;
    cursor: pointer;
    transition: all .10s linear; 
}

.user-shop-item-image{
    overflow: hidden;
    border-radius: 15px;
    position: relative;
    width: 50px;
    height: 50px;
    margin-right: 15px;
    flex-shrink: 0;
}

.user-shop-item-content{
    flex-grow: 1;
    width: 100%;
}

.user-shop-item:hover, .user-shop-item.active{
    border: 1px solid blue;
}

.user-shop-item-content-title{
    font-weight: 600;
}

.user-shop-item-content input{
    display: none;
}

.profile-tariffs-list-items-content{
    display: flex;
    align-items: baseline;
}

.profile-tariffs-list-item-text{
    font-size: 13px;
}

.profile-tariffs-list-item-name{
    font-weight: 600;
}

.profile-tariffs-list-item-icon{
    color: green;
    font-size: 20px;
    margin-right: 5px;
}

.input-geo-search-clear{
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 45px;
    cursor: pointer;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-geo-search-container input{
    padding-right: 45px;
}

.sections-bg-blue{
    color: white;
    background-color: #0d6efd;
}

.registration-change-profile{
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.registration-change-profile > div{
    border-radius: 50px;
    background-color: white;
    height: 45px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .10s linear; 
    cursor: pointer;
}

.registration-change-profile > div:hover, .registration-change-profile > div.active{
    color: white;
    background-color: #0d6efd;
}

.modal-shop-container-categories-items > span{
    display: inline-block;
    border-radius: 15px;
    padding: 7px 17px;
    margin-right: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    background-color: #f7f8fa;
    transition: all .10s linear;
    font-size: 14px;
}

.modal-shop-container-categories-items > span:hover{
    color: white;
    background-color: #141414;
}

.modal-shop-container-categories-items > span.active{
    color: white;
    background-color: #141414;    
}

.modal-shop-container-item > span{
    margin-bottom: 5px;
    display: block;
    font-size: 19px;
    font-weight: 600;
}

.modal-shop-container-item:not(:last-child) {
    margin-bottom: 15px;
}

.modal-shop-box-info{
    border-radius: 15px;
    padding: 15px;
    background-color: #ebffeb;
    margin-top: 10px;
    font-size: 14px;
}

.shops-container-items{
    min-height: 500px;
}

.title-h1{
    font-size: 45px;
    font-weight: bold;
    display: block;
}

.title-h2{
    font-size: 38px;
    font-weight: bold;
    display: block;
}

.title-h3{
    font-size: 32px;
    font-weight: bold;
    display: block;
}

.title-h6{
    font-size: 20px;
    font-weight: bold;
    display: block;
}

.color-title-accent-white{
    color: white;
}

.trim-title {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.widget-shops-item-content-title{
    font-weight: bold;
    font-size: 17px;
}

.containerActionProfilePublishCheckItems{
    display: none;
}

.container-item-grid-content-title{
    font-size: 16px;
    font-weight: 500;
}

.container-item-grid-content-title:hover{
    color: blue;
}

.container-item-grid-highlight .container-item-grid-content-title, .container-item-list-highlight .container-item-list-content-title, .container-item-list-highlight .container-item-list-map-content-title{
    background-color: #fff3b9!important;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 8px;
}

.box-user-face-card-content a{
    color: black;
}

.box-user-face-card-content a:hover{
    color: blue;
}

.container-item-grid-highlight .container-item-grid-content {
    padding-left: 0px!important;
    padding-right: 0px!important;
    padding-bottom: 0px!important;
    padding-top: 10px;
    background-color: transparent!important;
}

.container-item-list-highlight {
    background-color: transparent!important;
}

/* xs (<=543px) */
@media (max-width: 575px) {
    
    .ad-create-options-actions-swim{
        display: block!important;
        text-align: center!important;
    }

    .ad-create-options-actions-swim button{
        width: 100%!important;
    }

    .ad-create-options-actions-swim div{
        margin-bottom: 5px!important;
        margin-right: 0px!important;
    }

    .profile-container-shop-list-content, .profile-container-item-list-content, .profile-container-item-content-actions{
        margin-top: 15px!important;
    }

    .title-h1-adaptive{
        font-size: 30px!important;
    }

    .uni-dropdown-shop-categories .uni-dropdown-content{
        width: 100%!important;
    }

}

/* sm (>=576 и <=767) */
@media (min-width: 576px) and (max-width: 767px) {

    .ad-create-options-actions-swim{
        display: block!important;
        text-align: center!important;
    }

    .ad-create-options-actions-swim button{
        width: 100%!important;
    }

    .ad-create-options-actions-swim div{
        margin-bottom: 5px!important;
        margin-right: 0px!important;
    }

    .title-h1-adaptive{
        font-size: 30px!important;
    }

    .uni-dropdown-shop-categories .uni-dropdown-content{
        width: 100%!important;
    }

}

/* md (>=768 и <=991) */
@media (min-width: 768px) and (max-width: 991px) {
    
    .ad-create-options-actions-swim{
        display: block!important;
        text-align: center!important;
    }

    .ad-create-options-actions-swim button{
        width: 100%!important;
    }

    .ad-create-options-actions-swim div{
        margin-bottom: 5px!important;
        margin-right: 0px!important;
    }

    .uni-dropdown-shop-categories .uni-dropdown-content{
        width: 100%!important;
    }

}

/* ------------------------- из обновления CMS 5.6 ------------------------- */

.widget-shops-item-content-title{
    font-weight: bold;
    font-size: 19px;
}

.widget-shops-item-content-title:hover{
    color: #0066f5;
}

.containerActionProfilePublishCheckItems{
    display: none;
}

.box-user-face-card-content a{
    color: black;
}

.box-user-face-card-content a:hover{
   color: #0066f5;
}

.widget-shops-item-content-rating span{
    font-size: 16px!important;
    font-weight: 600;
    color: black;
}

.widget-shops-item-content-rating span i{
    font-size: 22px!important;
    color: #ffaf00;
}

.widget-shops-item-content-count{
    font-size: 14px;
}

.widget-shops-item-content-rating{
    margin-top: 10px;
}

.widget-shops-item{
    text-align: center;
    margin-bottom: 25px;
    display: block!important;
    width: 100%;
}

.widget-shops-item-content{
    margin: 0px!important;
}

.widget-shops-item-image {
    text-align: center!important;
    margin-bottom: 10px!important;
    display: inline!important;
}

.widget-shops-item-image > div{
    display: inline-block!important;
    width: 120px!important;
    height: 120px!important;
    border-radius: 15px!important;
    overflow: hidden!important;
    position: relative!important;
}

.widget-shops-item-link{
    min-height: 150px!important;
    background-color: transparent!important;
}

/* ==========================================================================
   TRADELOT — РЕДИЗАЙН (ЭТАП 1): ТОКЕНЫ + ПУБЛИЧНАЯ ЧАСТЬ (шапка, подвал, главная, каталог)
   --------------------------------------------------------------------------
   Этот блок ДОПИСАН В КОНЕЦ main.css. Существующие правила выше не менялись.
   Источник: _deploy/design_preview/РЕДИЗАЙН_ПЛАН.md, раздел 4.11.2 (токены) и 4.11.3
   (что брать готовым); макеты 00-brand.html, 01-main.html, 02-catalog.html, 06-design-system.html.
   Фирменные цвета логотипа: #6640f4 (основной) + #ff8257 (акцентный).
   Память проекта: TRADELOT_PROJECT_STATE.md §12.50.
   Особенности, которые здесь соблюдены:
     * белый текст на фирменном оранжевом не проходит контраст (2,45:1) —
       на оранжевых кнопках и бейджах текст ТЁМНЫЙ (--ink), нажатие — --brand2-active с белым;
     * блок «город» в подвале (.new_footer_top / .footer_bg / .footer_bg_one / .footer_bg_two
       и @keyframes myfirst) НЕ тронут — сохранён как был;
     * шрифт тот же (Manrope), меняется только способ загрузки: Google Fonts -> свои woff2;
     * всё для мобильных: медиазапросы 991/767/575 px сразу, горизонтальной прокрутки нет.
   ========================================================================== */

/* ==========================================================================
   1. ДИЗАЙН-ТОКЕНЫ (РЕДИЗАЙН_ПЛАН.md, раздел 4.11.2)
   ========================================================================== */
:root{
  /* фирменные цвета — из логотипа */
  --brand:#6640f4;        /* основной: кнопки-действия, ссылки, активные шаги, фокус-кольца */
  --brand-2:#ff8257;      /* акцент: важные CTA, бейджи, прогресс, 3D-иконки */
  --brand-hover:#5533d8;  --brand-active:#4a2ec0;
  --brand-tint:#efeaff;   --brand-tint-2:#e2d9ff;   /* подложки под фиолетовый */
  --brand2-hover:#f96f3f; --brand2-active:#ff845c;
  --brand2-tint:#fff0e9;  --brand2-tint-2:#ffe1d4;  /* подложки под оранжевый */

  /* градиенты объёмных 3D-иконок */
  --grad-1:#8a5cff; --grad-2:#4a2ec0;               /* фиолетовые плитки */
  --grad-w-1:#ffa47f; --grad-w-2:#f0682f;           /* оранжевые плитки */
  --grad-vx-1:#7c4cff; --grad-vx-2:#ff8257;         /* фирменная пара фиолетовый -> оранжевый */

  /* нейтральные */
  --ink:#1b1630;  --ink-2:#3a3550;  --muted:#6c6883;
  --bg:#f8f7fd;   --surface:#ffffff; --surface-2:#f6f4fd; --surface-3:#eeeaf9;
  --line:#e7e2f4; --line-soft:#f0ecfa;

  /* статусы — нейтральные, не брендовые */
  --success:#17864f; --success-ink:#0f7a4c; --success-tint:#e7f7ef;
  --warn:#a2630a;    --warn-ink:#8a5a08;    --warn-tint:#fdf1e0;
  --danger:#b3352f;  --danger-ink:#a32626;  --danger-tint:#fdeaea;
  --info:#5b6470;    --info-tint:#eef0f4;

  /* радиусы, тени, контейнер, шрифт */
  --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(27,22,48,.05), 0 1px 3px rgba(27,22,48,.05);
  --sh-2:0 6px 18px rgba(27,22,48,.07), 0 2px 5px rgba(27,22,48,.04);
  --sh-3:0 18px 44px rgba(27,22,48,.11), 0 6px 14px rgba(27,22,48,.05);
  --sh-accent:0 12px 28px rgba(102,64,244,.26);
  --sh-warm:0 12px 28px rgba(254,130,88,.30);
  --container:1340px;
  --font:'Manrope','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,'Inter',Roboto,Arial,sans-serif;

  /* токены редизайна, которых нет в плане, но нужны вёрстке этапа 1 */
  --tl-gap:24px;          /* шаг сетки карточек */
  --tl-section:72px;      /* шаг секций */
  --tl-focus:0 0 0 3px rgba(102,64,244,.20);
}

/* ==========================================================================
   2. ШРИФТ MANROPE: САМОХОСТИНГ (вместо шести семейств с fonts.googleapis.com)
   Файлы: resources/view/web/assets/fonts/manrope-*.woff2 (те же, что в макетах).
   Гарнитура не менялась — только способ загрузки.
   ========================================================================== */
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('../fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('../fonts/manrope-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ==========================================================================
   3. БАЗА ПУБЛИЧНОЙ ЧАСТИ
   ========================================================================== */

/* фон страницы — фирменный светлый (в админке main.css тоже подключён, поэтому
   меняем фон только у обёртки публичных страниц и подвала, а не у body) */
.flex-wrapper{ background-color:var(--bg); }

/* грабля §0.12: у картинок была задана только высота -> картинки шире экрана.
   Правило только для публичной части (в админке картинки не трогаем). */
.flex-wrapper img{ max-width:100%; }
footer img{ max-width:100%; }

a:hover{ color:var(--brand-hover); }

/* типографика: заголовок выделяется размером и цветом, а не толщиной (не жирнее 700) */
.flex-wrapper h1, .flex-wrapper h2, .flex-wrapper h3, .flex-wrapper h4, .flex-wrapper h5{
  color:var(--ink); letter-spacing:-.015em;
}
.flex-wrapper h1{ font-size:36px; line-height:1.2; font-weight:700; }
.flex-wrapper h2{ font-size:29px; line-height:1.25; font-weight:700; }
.flex-wrapper h3{ font-size:21px; line-height:1.32; font-weight:600; }
.flex-wrapper h4{ font-size:17px; line-height:1.4; font-weight:600; }
.flex-wrapper h5{ font-size:17px; line-height:1.4; font-weight:600; }
.flex-wrapper .font-bold{ font-weight:700; }

/* ==========================================================================
   4. КНОПКИ (единый вид на всех публичных страницах)
   Высоты и радиусы — по разделу 4.11.3 плана.
   ========================================================================== */
.btn-custom, .btn-custom-mini, .btn-custom-big{
  border-radius:var(--r-pill);
  font-weight:600;
  letter-spacing:-.005em;
  text-decoration:none;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn-custom{ min-height:48px; padding:0 26px; font-size:15.5px; }
.btn-custom-mini{ min-height:36px; padding:0 16px; font-size:14px; }
.btn-custom-big{ min-height:54px; padding:0 30px; font-size:16px; width:auto; max-width:none; }
.btn-custom-mini i{ font-size:17px; }
.btn-custom:hover, .btn-custom-mini:hover, .btn-custom-big:hover{ opacity:1; transform:translateY(-2px); }
.btn-custom:active, .btn-custom-mini:active, .btn-custom-big:active{ transform:translateY(0) scale(.985); }

/* основной — фиолетовый (белый текст, 5,83:1) */
.button-color-scheme1{ background-color:var(--brand)!important; color:#fff!important; box-shadow:var(--sh-accent); }
.button-color-scheme1:hover{ background-color:var(--brand-hover)!important; color:#fff!important; box-shadow:0 14px 32px rgba(102,64,244,.32); }
.button-color-scheme1:active{ background-color:var(--brand-active)!important; }

/* контурная — «Войти», второстепенные действия */
.button-color-scheme2{ background-color:var(--surface)!important; color:var(--brand-hover)!important; border:1px solid var(--brand-tint-2); box-shadow:var(--sh-1); }
.button-color-scheme2:hover{ background-color:var(--brand-tint)!important; color:var(--brand-hover)!important; border-color:var(--brand-tint-2); }

/* нейтральная — «Очистить», служебные */
.button-color-scheme3{ background-color:var(--surface-2)!important; color:var(--ink-2)!important; border:1px solid var(--line); }
.button-color-scheme3:hover{ background-color:var(--surface-3)!important; color:var(--ink)!important; }

/* мягкая — ссылка-кнопка на подложке акцента */
.button-color-scheme4{ background-color:transparent!important; color:var(--brand-hover)!important; }
.button-color-scheme4:hover{ background-color:var(--brand-tint)!important; color:var(--brand-hover)!important; }

/* акцентная оранжевая — «Разместить лот», «Продать проект». Текст ТЁМНЫЙ (7,13:1) */
.button-color-scheme5{ background-color:var(--brand-2)!important; color:var(--ink)!important; box-shadow:var(--sh-warm); }
.button-color-scheme5:hover{ background-color:var(--brand2-hover)!important; color:var(--ink)!important; box-shadow:0 14px 32px rgba(249,111,63,.34); }
.button-color-scheme5:active{ background-color:var(--brand2-active)!important; color:#fff!important; }

.button-color-scheme6{ background-color:var(--danger)!important; color:#fff!important; }
.button-color-scheme6:hover{ background-color:var(--danger-ink)!important; }
.button-color-scheme7{ background-color:var(--brand)!important; color:#fff!important; }

/* кнопки Bootstrap внутри публичной части — те же параметры */
.flex-wrapper .btn{ border-radius:var(--r-pill); font-weight:600; }
.btn-color-green{ background-color:var(--success)!important; }
.btn-color-blue{ background-color:var(--brand)!important; }
.btn-color-blue-light{ background-color:var(--brand-tint)!important; color:var(--brand-hover)!important; }
.btn-color-purple{ background-color:var(--brand)!important; }
.btn-color-white{ background-color:var(--surface); color:var(--ink); border:1px solid var(--line); }

/* фокус с клавиатуры виден у всех кнопок */
.btn-custom:focus-visible, .btn-custom-mini:focus-visible, .btn-custom-big:focus-visible,
.btn:focus-visible, a:focus-visible{ outline:none; box-shadow:var(--tl-focus); }

/* ==========================================================================
   5. ШАПКА (header.tpl): светлая верхняя полоса + белая шапка с тенью
   Логотип — тот же файл и те же размеры (.h-logo img 40px, мобильный 30px).
   ========================================================================== */
.header-wow-top{
  background:var(--brand-tint);
  border-bottom:1px solid var(--line);
  color:var(--brand-hover);
  height:44px;
}
.header-wow-top-list{ padding-top:0; }
.header-wow-top-list a{
  color:var(--brand-hover);
  font-weight:600;
  font-size:14px;
  margin-right:22px;
}
.header-wow-top-list a:hover{ color:var(--brand-active); }
.header-wow-top-list-icon-item{ color:var(--brand); }
.header-wow-top-list-icon-item:hover{ color:var(--brand-hover); }
.header-wow-top-list-icon-item i{ font-size:22px; }
.header-wow-top-list-icon-item .label-circle-count{ box-shadow:0 0 0 2px var(--brand-tint); }
.header-wow-top-list-profile .mini-avatar-img,
.header-wow-top-list-profile .mini-avatar{ border:1px solid var(--brand-tint-2); }

.header-wow-sticky{ background-color:var(--surface); box-shadow:0 1px 0 var(--line-soft); }
.header-wow-sticky-active{ box-shadow:0 6px 24px rgba(27,22,48,.10); }
.header-wow-sticky-container{ padding:12px 0; }

.header-button-menu-catalog{
  border-radius:var(--r-pill);
  height:46px;
  padding:0 20px;
  font-weight:600;
  font-size:15px;
  gap:9px;
  box-shadow:var(--sh-accent);
}
.header-button-menu-catalog-icon-1 i{ font-size:19px; }

.live-search-form-input{
  height:48px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background-color:var(--surface-2);
  padding-left:48px;
  font-size:15.5px;
  color:var(--ink);
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.live-search-form-input::placeholder{ color:var(--muted); }
.live-search-form-input:hover{ background-color:var(--brand-tint); }
.live-search-form-input:focus{
  border:1px solid var(--brand)!important;
  background-color:var(--surface);
  box-shadow:var(--tl-focus);
}
.live-search-form-icon{ padding:0 16px; color:var(--muted); }
.live-search-form-icon i{ font-size:20px; }
.live-search-container-geo{ }
.live-search-container-geo-name{
  color:var(--brand-hover);
  font-weight:600;
  font-size:13px;
  border-radius:var(--r-pill);
  padding:4px 10px;
  background:var(--brand-tint);
}
.live-search-results{
  border-radius:var(--r-md);
  border:1px solid var(--line-soft);
  box-shadow:var(--sh-3);
  top:56px;
}
.live-search-results-item{ border-radius:var(--r-xs); }
.live-search-results-item:hover{ background-color:var(--brand-tint); color:var(--brand-hover)!important; }

.header-wow-sticky-add{
  border-radius:var(--r-pill);
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  font-weight:600;
  font-size:15px;
}
.header-wow-sticky-auth{
  border-radius:var(--r-pill);
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
}

/* выпадающий каталог в шапке */
.big-catalog-menu-container{
  background-color:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:var(--sh-3);
}
.big-catalog-menu-content{ padding:20px 0; }

/* мобильная шапка: иконки в фирменных круглых кнопках */
.header-flex-box-icon{
  color:var(--brand);
  background:var(--brand-tint);
  border-radius:var(--r-pill);
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.header-flex-box-icon i{ font-size:20px; }
.header-flex-box-icon:hover{ background:var(--brand-tint-2); color:var(--brand-hover); }

/* шторки мобильного меню и фильтров */
.big-catalog-menu-mobile-content, .header-menu-filters-mobile-content{
  background-color:var(--surface);
}
.mobile-menu-list-link a{ display:block; padding:11px 0; color:var(--ink-2); font-weight:600; border-bottom:1px solid var(--line-soft); }
.mobile-menu-list-link a:hover{ color:var(--brand-hover); }

/* ==========================================================================
   6. ПОДВАЛ (footer.tpl)
   ⚠️ 18.09.2026 блок «город» (.new_footer_top/.footer_bg/.footer_bg_one/.footer_bg_two,
      @keyframes myfirst) ПЕРЕРИСОВАН по просьбе владельца: старые правила ниже оставлены
      как история (разметки с классами .footer_bg/.footer_bg_one/.footer_bg_two в
      footer.tpl больше нет), действующая версия — в разделе «ПОДВАЛ, ЧАСТЬ 36» в КОНЦЕ
      этого файла: .tl-foot-stage / .tl-foot-track / .tl-foot-icon, @keyframes tl-foot-run
      и tl-foot-bob. Старые файлы /ima/footer_bg.png, car.png, bike.png лежат без ссылок,
      копии — вне сайта, в _deploy\tradelot_backup\footer3d_2026-09-18.
   ========================================================================== */
.footer-bg{
  background-color:var(--surface-2);
  border-top:1px solid var(--line);
  padding:40px 0 30px;
}
.footer-bg-box-link-inline{
  background-image:linear-gradient(135deg, var(--brand) 0%, var(--grad-1) 100%);
  border-radius:var(--r-lg);
  padding:18px 28px;
  box-shadow:var(--sh-accent);
}
.footer-bg-box-link-inline-item{ color:#fff; font-weight:600; font-size:15.5px; }
.footer-bg-box-link-inline-item:hover{ color:#fff; opacity:.86; }
.footer-bg-box-link-inline .uni-dropdown-name{ color:#fff; font-weight:600; }
.footer-content-text{ color:var(--muted); font-size:13.5px; line-height:1.6; }
.footer-content-link-inline{ margin-top:14px; display:flex; flex-wrap:wrap; gap:6px 18px; }
.footer-content-link-inline a{ color:var(--muted); text-decoration:none; font-size:13.5px; margin-right:0; }
.footer-content-link-inline a:hover{ color:var(--brand-hover); text-decoration:underline; }
.footer-content-link-box a{ color:var(--ink-2); font-size:14.5px; margin-bottom:8px; }
.footer-content-link-box a:hover{ color:var(--brand-hover); }
.footer-bg h6{ color:var(--ink); font-weight:600; }
.footer-bg hr{ background-color:var(--line); height:1px; }
.footer-bg small{ color:var(--muted); }

/* нижнее мобильное меню */
.main-floating-menu{
  background-color:var(--surface);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(27,22,48,.08);
}
.main-floating-menu a > div > span:last-child{ font-size:11.5px; }

/* cookie-плашка */
.footer-cookie-container > div{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-3);
}
.footer-cookie-container h6{ color:var(--ink); }
.footer-cookie-container p{ color:var(--muted); }

/* ==========================================================================
   7. КАРТОЧКА ЛОТА В СЕТКЕ (.container-item-grid — каталог, главная, магазины)
   ========================================================================== */
.container-item-grid{
  display:flex;
  flex-direction:column;
  height:100%;
  margin-bottom:0;
  background-color:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  overflow:hidden;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.container-item-grid:hover{
  color:var(--ink)!important;
  box-shadow:var(--sh-3);
  border-color:var(--brand-tint-2);
  transform:translateY(-3px);
}
.container-item-grid .container-item-images{ border-radius:0; background-color:var(--surface-2); }
.container-item-grid-content{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto; }
.container-item-grid-content-prices{
  margin-top:0;
  background-color:var(--brand-tint);
  border-radius:var(--r-sm);
  padding:8px 12px;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px 10px;
}
.container-item-grid-content-prices .card-item-price-now{
  font-size:19px; font-weight:700; color:var(--brand-active); line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.container-item-grid-content-prices .card-item-price-old{ font-size:13.5px; color:var(--muted); text-decoration:line-through; margin-left:0; }
.container-item-grid-content-prices .card-item-price-measure-title{ font-size:12.5px; color:var(--muted); }
.container-item-grid-content-title{
  font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:43px;
}
.container-item-grid-content-title:hover{ color:var(--brand-hover); }
.container-item-grid-content-rating{ font-size:13px; }
.container-item-grid-content-additionally{
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid var(--line-soft);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
}
.container-item-grid-content-additionally span{ font-size:12.5px; color:var(--muted); }
.container-item-grid-content-user{ margin-left:auto; }

/* метки на картинке */
.container-item-labels{ left:12px; bottom:12px; }
.container-item-labels > div > span{
  border-radius:var(--r-pill)!important;
  font-weight:600;
  font-size:12px;
  padding:4px 11px;
  box-shadow:var(--sh-1);
}
.container-item-labels-1 > span{ background-color:var(--brand); }
.container-item-labels-2 > span{ background-color:var(--brand-2); color:var(--ink); }
.container-item-labels-3 > span{ background-color:var(--success); }
.container-item-labels-4 > span{ background-color:var(--brand2-active); }

.container-item-favorite{
  background-color:rgba(255,255,255,.94);
  box-shadow:var(--sh-1);
  width:38px; height:38px;
  top:10px; right:10px;
}
.container-item-favorite i{ font-size:20px; color:var(--muted); }
.container-item-favorite i.ti-heart-filled{ color:var(--brand-2); }

/* «выделенный» лот — подложка акцента вместо старого жёлто-зелёного */
.container-item-grid-highlight{ border-color:var(--brand-tint-2); }
.container-item-grid-highlight .container-item-grid-content{
  background-color:var(--brand-tint);
  border-radius:0;
  padding:16px 18px 18px;
}
.container-item-grid-highlight .container-item-grid-content-prices{ background-color:var(--surface); }
.container-item-list-highlight{ background-color:var(--brand-tint); }

/* скелетоны загрузки — те же радиусы */
.container-item-grid-skeleton{ border-radius:var(--r-lg); }

/* ==========================================================================
   8. СПИСОК ЛОТОВ (вид «списком») — те же токены
   ========================================================================== */
.container-item-list{
  background-color:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:14px;
  transition:box-shadow .18s ease, border-color .18s ease;
}
.container-item-list:hover{ color:var(--ink)!important; box-shadow:var(--sh-2); border-color:var(--brand-tint-2); }
.container-item-list-content-title{ font-size:19px; font-weight:600; color:var(--ink); }
.container-item-list-content-title:hover{ color:var(--brand-hover); }
.container-item-list-content-additionally span{ font-size:12.5px; color:var(--muted); }

/* ==========================================================================
   9. ГЛАВНАЯ: СЕКЦИИ, ГЕРОЙ, ПОИСК, КАТЕГОРИИ, ШАГИ, ДОВЕРИЕ, АНАЛИТИКА
   ========================================================================== */
.tl-section{ padding:var(--tl-section) 0; }
.tl-section-tight{ padding:40px 0 var(--tl-section); }
.tl-section:first-child{ padding-top:32px; }

.tl-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.tl-head .tl-head-side{ flex:0 0 auto; }
.tl-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  height:28px; padding:0 13px;
  border-radius:var(--r-pill);
  background:var(--brand-tint); color:var(--brand-hover);
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.tl-eyebrow .tl-dot{ width:7px; height:7px; border-radius:50%; background:var(--brand-2); }
.tl-h2{ font-size:29px; line-height:1.25; font-weight:700; margin-top:14px; }
.tl-sub{ margin-top:10px; color:var(--muted); font-size:15.5px; line-height:1.62; max-width:760px; }
.tl-center{ text-align:center; }
.tl-center .tl-sub{ margin-left:auto; margin-right:auto; }
.tl-center .tl-eyebrow{ margin:0 auto; }

/* --- герой --- */
.tl-hero{ padding:44px 0 8px; }
.tl-hero-inner{ text-align:center; }
.tl-hero h1{ font-size:52px; line-height:1.14; font-weight:700; letter-spacing:-.022em; max-width:1000px; margin:16px auto 0; }
.tl-hero .tl-lead{ margin:16px auto 0; max-width:820px; color:var(--muted); font-size:17.5px; line-height:1.62; }

.tl-search{
  display:flex; align-items:center; gap:10px;
  max-width:760px; margin:26px auto 0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:8px 8px 8px 20px;
  box-shadow:var(--sh-2);
}
.tl-search i{ font-size:22px; color:var(--muted); }
.tl-search input{
  flex:1 1 auto; min-width:0; border:0; outline:none; background:transparent;
  font-size:15.5px; color:var(--ink); height:40px;
}
.tl-search input::placeholder{ color:var(--muted); }
.tl-search:focus-within{ border-color:var(--brand); box-shadow:var(--sh-2), var(--tl-focus); }

.tl-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:18px; }
.tl-tabs a{
  display:inline-flex; align-items:center;
  height:34px; padding:0 15px;
  border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line);
  color:var(--ink-2); font-size:14px; font-weight:600;
}
.tl-tabs a:hover{ border-color:var(--brand-tint-2); background:var(--brand-tint); color:var(--brand-hover); }

.tl-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:24px; }

/* --- показатели --- */
.tl-stats{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;
  margin-top:36px;
}
.tl-stats > div{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-md);
  box-shadow:var(--sh-1); padding:16px 18px; text-align:center;
}
.tl-stats b{ display:block; font-size:26px; font-weight:700; color:var(--brand); font-variant-numeric:tabular-nums; }
.tl-stats span{ display:block; margin-top:4px; font-size:13px; color:var(--muted); }

/* --- «рельса» категорий (разметку печатает Home::outCategories) --- */
.tl-rail-wrap{ position:relative; }
.widget-categories-container{
  display:flex; flex-wrap:nowrap; gap:12px;
  overflow-x:auto; overflow-y:hidden;
  padding:4px 2px 14px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.home-widget-categories-item{
  flex:0 0 auto;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:8px;
  min-width:126px; max-width:150px;
  height:auto; min-height:130px;
  padding:16px 12px;
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--line-soft);
  box-shadow:var(--sh-1);
  margin-bottom:0; margin-right:0!important;
  scroll-snap-align:start;
  text-align:center;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.home-widget-categories-item:not(:last-child){ margin-right:0; }
.home-widget-categories-item:hover{
  background:var(--surface);
  border-color:var(--brand-tint-2);
  box-shadow:var(--sh-2);
  transform:translateY(-2px);
}
.home-widget-categories-item:hover > div{ color:var(--brand-hover)!important; }
.home-widget-categories-item div{ color:var(--ink); font-size:14px; font-weight:600; line-height:1.35; z-index:1; position:relative; order:-1; }
.home-widget-categories-item img{
  position:static; right:auto; bottom:auto;
  height:56px; width:56px; object-fit:contain;
  margin-top:auto;
  border-radius:var(--r-sm);
  background:var(--brand-tint);
  padding:8px;
}

/* --- блок лотов на главной (разметку печатает компонент Home) --- */
.bold-title-and-link{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-bottom:20px; margin-top:8px;
}
.bold-title-and-link span{ font-size:24px; font-weight:700; color:var(--ink); margin-right:0; letter-spacing:-.015em; }
.widget-ads-slider-container-items-vip{
  background-color:var(--surface-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r-xl);
  padding:20px;
  margin-bottom:26px;
}
.tl-lots-block{ margin-bottom:34px; }

/* --- возможности сервиса (промо-баннеры) --- */
.widget-promo-banners-container{ overflow:hidden; padding:4px 2px 10px; }
.widget-promo-banners-swiper{ overflow:hidden; }
.widget-promo-banner-item{
  border-radius:var(--r-lg);
  padding:20px;
  height:200px!important;
  width:300px!important;
  box-shadow:var(--sh-2);
  border:1px solid var(--line-soft);
  white-space:normal;
}
.widget-promo-banner-item:not(:last-child){ margin-right:16px; }
.widget-promo-banner-item h4{ font-size:17px; font-weight:600; margin-bottom:10px; line-height:1.35; }
.widget-promo-banner-item p{ font-size:14px; line-height:1.5; }

/* --- «как это работает»: 4 шага --- */
.tl-steps{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.tl-step{
  position:relative;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:22px 20px;
}
.tl-step-num{
  width:34px; height:34px; border-radius:var(--r-pill);
  background:var(--brand); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700;
  box-shadow:var(--sh-accent);
}
.tl-step-t{ margin-top:16px; font-size:17px; font-weight:600; color:var(--ink); line-height:1.4; }
.tl-step-d{ margin-top:10px; font-size:13.5px; line-height:1.6; color:var(--muted); }

/* --- блок доверия (безопасная сделка, Т-Банк) --- */
.tl-band{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-2);
  padding:44px;
}
.tl-band-row{ display:flex; align-items:center; gap:44px; }
.tl-band-text{ flex:1 1 55%; min-width:0; }
.tl-band-art{ flex:1 1 45%; min-width:0; text-align:center; }
.tl-band-art img{ max-width:100%; height:auto; border-radius:var(--r-lg); }
.tl-bank{ height:auto; width:200px; max-width:100%; margin-top:20px; }
.tl-check{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; }
.tl-check li{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink-2); }
.tl-check li i{ color:var(--success); font-size:20px; }
.tl-band-btnrow{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

/* --- аналитика: цифры с подписью источника --- */
.tl-an-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.tl-an-card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:20px;
}
.tl-an-cap{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.tl-an-cap i{ font-size:20px; color:var(--brand); }
.tl-an-num{ margin-top:14px; font-size:32px; font-weight:700; color:var(--ink); line-height:1.15; font-variant-numeric:tabular-nums; }
.tl-an-sub{ margin-top:4px; font-size:13.5px; color:var(--muted); }
.tl-an-src{
  margin-top:16px; display:flex; flex-direction:column; gap:8px;
  font-size:12.5px; color:var(--muted); line-height:1.5;
}
.tl-src-badge{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  height:28px; padding:0 11px;
  border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line-soft);
  font-size:12.5px; font-weight:600; color:var(--ink-2);
}
.tl-src-badge img{ width:18px; height:18px; }
.tl-hint{
  display:flex; gap:12px; align-items:flex-start;
  margin-top:22px; padding:16px 18px;
  background:var(--brand-tint); border:1px solid var(--brand-tint-2);
  border-radius:var(--r-md);
  font-size:13.5px; line-height:1.6; color:var(--ink-2);
}
.tl-hint i{ font-size:20px; color:var(--brand); flex:0 0 auto; }
.tl-hint p{ margin:0; }

/* --- SEO-текст --- */
.home-seo-text{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:28px;
}
.home-seo-text h1, .home-seo-text h2{ font-size:21px; font-weight:600; line-height:1.35; }
.home-seo-text p{ color:var(--ink-2); font-size:15px; line-height:1.62; }

/* --- архив «мобильное приложение» --- */
.tl-app-row{ display:flex; align-items:center; gap:40px; }
.tl-app-text{ flex:1 1 55%; min-width:0; }
.tl-app-art{ flex:1 1 45%; min-width:0; text-align:center; }
.tl-app-art img{ max-width:100%; height:auto; max-height:350px; border-radius:var(--r-lg); }

/* ==========================================================================
   10. КАТАЛОГ (catalog.tpl): «рельса» фильтров, панель, сортировка, пагинация
   ========================================================================== */
.catalog-container-options{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  padding:12px 16px;
  margin-bottom:6px;
}
.catalog-container-options-links-inline{ display:flex; align-items:center; gap:14px; justify-content:flex-end; flex-wrap:wrap; }
.catalog-container-options-links-inline > div{ display:inline-flex; align-items:center; }
.catalog-container-links-inline{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.catalog-container-links-inline-item{
  color:var(--ink-2)!important; font-size:14px; font-weight:600;
  border-radius:var(--r-pill); padding:6px 12px; margin-right:0;
}
.catalog-container-links-inline-item:hover{ background-color:var(--brand-tint); color:var(--brand-hover)!important; }
.catalog-container-options-view-item span{ color:var(--muted); margin-left:6px; }
.catalog-container-options-view-item span.active{ color:var(--brand)!important; }
.catalog-container-options-view-item i{ font-size:22px; }

/* фильтры — «рельса» сверху + панель в колонку */
.catalog-sidebar{ position:relative; }
.params-form{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:20px;
}
.params-form-item{ margin-bottom:18px; }
.params-form-item-label{ font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.params-form input[type=text], .params-form input[type=number], .params-form select{
  border-radius:var(--r-sm)!important;
  border:1px solid var(--line)!important;
  background-color:var(--surface);
  min-height:44px;
  font-size:15px;
  color:var(--ink);
  padding-left:12px;
}
.params-form input[type=text]:focus, .params-form input[type=number]:focus, .params-form select:focus{
  border-color:var(--brand)!important; box-shadow:var(--tl-focus);
}
.params-form-item-price input[type=text]{ height:44px!important; background-color:var(--surface); }
.params-buttons-sticky{ background-color:transparent; padding-top:12px; padding-bottom:16px; }

.catalog-filter-links-container a{
  padding:6px 12px; margin-right:8px;
  border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--line-soft);
  font-size:13.5px; color:var(--ink-2);
}
.catalog-filter-links-container a:hover{ background:var(--brand-tint); color:var(--brand-hover); }

/* чипы категорий/подкатегорий над каталогом.
   ВАЖНО: элементы — это Bootstrap-колонки (.col-md-2.col-6) внутри .row и
   содержат картинку категории, спозиционированную абсолютно. Поэтому карточка
   сохраняет исходные 100 px высоты (иначе картинка 80 px вылезает из чипа),
   а .row НЕ переключаем на display:block — иначе колонки встают друг под друга. */
.widget-categories-or-subcategories{ position:relative; }
.widget-categories-or-subcategories a{
  display:block;
  height:100px;
  padding:12px 14px;
  margin-bottom:12px;
  border-radius:var(--r-md);
  overflow:hidden;
  position:relative;
  word-break:break-word;
  background:var(--surface); border:1px solid var(--line-soft);
  box-shadow:var(--sh-1);
  font-size:14px; font-weight:600; color:var(--ink-2);
}
.widget-categories-or-subcategories a:hover{ background:var(--brand-tint); border-color:var(--brand-tint-2); color:var(--brand-hover); }
.widget-categories-or-subcategories a:hover > div{ color:var(--brand-hover)!important; }
.widget-categories-or-subcategories a.active{ background:var(--brand); border-color:var(--brand); }
.widget-categories-or-subcategories a.active > div{ color:#fff!important; }
.widget-categories-or-subcategories a img{
  position:absolute; right:0; bottom:0;
  height:62px; width:auto; max-width:62%;
  object-fit:contain; opacity:.9;
}
.widget-categories-or-subcategories-button-all{ margin-top:6px; text-align:left; }

/* пагинация */
.pagination{ gap:6px; flex-wrap:wrap; }
.pagination .page-link{
  border-radius:var(--r-pill)!important;
  border:1px solid var(--line);
  color:var(--ink-2);
  min-width:40px; text-align:center;
  font-weight:600;
}
.pagination .page-item.active .page-link{
  background-color:var(--brand); border-color:var(--brand); color:#fff;
}
.pagination .page-link:hover{ background-color:var(--brand-tint); border-color:var(--brand-tint-2); color:var(--brand-hover); }

/* пустая выдача */
.catalog-not-found h4{ font-weight:600; color:var(--ink); }
.catalog-not-found p{ color:var(--muted); }

/* ==========================================================================
   11. МОБИЛЬНАЯ АДАПТАЦИЯ (390 px и планшеты) — сразу, а не «потом»
   ========================================================================== */
@media (max-width:1199px){
  .tl-hero h1{ font-size:42px; }
}

@media (max-width:991px){
  :root{ --tl-section:52px; --tl-gap:16px; }
  .flex-wrapper h1{ font-size:28px; }
  .flex-wrapper h2{ font-size:23px; }
  .flex-wrapper h3{ font-size:19px; }
  .tl-hero{ padding:28px 0 4px; }
  .tl-hero h1{ font-size:30px; letter-spacing:-.015em; }
  .tl-hero .tl-lead{ font-size:16px; }
  .tl-search{ padding:6px 6px 6px 14px; border-radius:var(--r-lg); }
  .tl-search input{ height:38px; font-size:15px; }
  .tl-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:26px; }
  .tl-stats b{ font-size:22px; }
  .tl-steps{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  .tl-an-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  .tl-band{ padding:24px; }
  .tl-band-row{ flex-direction:column; gap:24px; }
  .tl-app-row{ flex-direction:column; gap:22px; }
  .tl-head{ flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:20px; }
  .tl-h2{ font-size:23px; }
  .tl-an-num{ font-size:26px; }
  .bold-title-and-link span{ font-size:20px; }
  .home-seo-text{ padding:20px; }
  .home-widget-categories-item{ min-width:112px; max-width:132px; min-height:118px; padding:14px 10px; }
  .home-widget-categories-item img{ height:46px; width:46px; }
  .widget-promo-banner-item{ width:270px!important; height:190px!important; }
}

@media (max-width:767px){
  .header-wow-top{ height:auto; min-height:40px; }
  .header-wow-top-list a{ margin-right:14px; font-size:13px; }
  .btn-custom{ min-height:44px; padding:0 20px; }
  .btn-custom-big{ min-height:48px; padding:0 22px; }
  .container-item-grid-content{ padding:12px 14px 14px; }
  .container-item-grid-content-title{ font-size:14.5px; min-height:0; }
  .container-item-grid-content-prices .card-item-price-now{ font-size:17px; }
  .container-item-grid-content-additionally span{ font-size:11.5px; }
  .tl-band{ padding:18px; border-radius:var(--r-lg); }
  .tl-band-art img{ max-height:280px; }
  .tl-bank{ width:170px; }
  .widget-ads-slider-container-items-vip{ padding:12px; border-radius:var(--r-lg); }
}

@media (max-width:575px){
  .tl-steps{ grid-template-columns:1fr; }
  .tl-an-grid{ grid-template-columns:1fr; }
  .tl-hero h1{ font-size:26px; }
  .tl-cta{ gap:10px; }
  .tl-cta a{ width:100%; }
  .tl-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tl-stats b{ font-size:19px; }
  .widget-promo-banner-item{ width:245px!important; }
  .tl-tabs a{ height:32px; padding:0 12px; font-size:13px; }
}

/* меньше движения — тем, кто просил */
@media (prefers-reduced-motion: reduce){
  .container-item-grid, .home-widget-categories-item, .btn-custom, .btn-custom-mini, .btn-custom-big,
  .container-item-list{ transition:none; }
  .container-item-grid:hover, .home-widget-categories-item:hover, .btn-custom:hover,
  .btn-custom-mini:hover, .btn-custom-big:hover{ transform:none; }
}

/* ==========================================================================
   TRADELOT — РЕДИЗАЙН (ЭТАП 1), ДОПОЛНЕНИЕ: сетка подвала, шапка, каталог, значки сервисов
   Продолжение блока «РЕДИЗАЙН (ЭТАП 1)» выше. Только дописано в конец main.css.
   ========================================================================== */

/* ---------- 12. ПОДВАЛ: сетка в четыре колонки ---------- */
.tl-footer-grid{
  display:grid;
  grid-template-columns:1.32fr 1fr 1fr 1fr;
  gap:32px;
}
.tl-footer-col{ min-width:0; }
.tl-footer-col-brand .f-logo{ margin-bottom:16px; }
.tl-footer-h{ font-size:15.5px; font-weight:600; color:var(--ink); margin-bottom:14px; }
.tl-footer-contact{ color:var(--muted); font-size:13.5px; line-height:1.65; word-break:break-word; }
.tl-footer-contact a{ color:var(--brand-hover); }
.tl-footer-contact a:hover{ text-decoration:underline; }
.tl-footer-bottom{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:12px 32px;
  align-items:flex-start;
  justify-content:space-between;
}
.tl-footer-bottom .footer-content-text{ max-width:640px; }
.tl-footer-bottom .footer-content-link-inline{ margin-top:0; justify-content:flex-end; }

/* ---------- 13. ШАПКА: почта в верхней светлой полосе ---------- */
.header-wow-top-list-mail{
  color:var(--brand-hover);
  font-size:14px;
  font-weight:600;
  margin-right:18px;
}
.header-wow-top-list-mail:hover{ color:var(--brand-active); }

/* ---------- 14. ГЛАВНАЯ: значки сервисов аналитики ---------- */
.tl-services{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.tl-services .tl-src-badge{
  height:44px;
  padding:0 15px;
  font-size:13.5px;
  background:var(--surface);
  border-color:var(--line);
  box-shadow:var(--sh-1);
}
.tl-services .tl-src-badge img{ width:26px; height:26px; }
.tl-hint .ti{ line-height:1; }
.tl-steps .tl-step-t{ font-size:16px; }

/* ---------- 15. КАТАЛОГ: заголовок, сортировка, крошки ---------- */
.tl-cat-head{ margin-top:10px; margin-bottom:18px; }
.tl-cat-head-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

.breadcrumb{ font-size:13.5px; margin-bottom:0; }
.breadcrumb-item a{ color:var(--muted); }
.breadcrumb-item a:hover{ color:var(--brand-hover); }
.breadcrumb-item.active{ color:var(--ink-2); }
.breadcrumb-item + .breadcrumb-item::before{ color:var(--muted); }

.uni-dropdown-name{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 14px;
  border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line);
  font-size:14px; font-weight:600; color:var(--ink-2);
  cursor:pointer;
}
.uni-dropdown-name:hover{ background:var(--brand-tint); border-color:var(--brand-tint-2); color:var(--brand-hover); }
.uni-dropdown-content{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  box-shadow:var(--sh-3);
  padding:8px;
  min-width:200px;
}
.uni-dropdown-content-item{
  display:block; padding:9px 12px; border-radius:var(--r-xs);
  font-size:14px; color:var(--ink-2);
}
.uni-dropdown-content-item:hover{ background:var(--brand-tint); color:var(--brand-hover); }

/* чипы категорий и подкатегорий: разметку печатает компонент, стиль — выше.
   (правило .row{display:block} здесь СОЗНАТЕЛЬНО не ставится: элементы — это
   Bootstrap-колонки, при display:block они встают друг под друга) */
.widget-categories-or-subcategories .btn-custom-mini{ cursor:pointer; }

/* кнопка «Дополнительные фильтры» (печатает компонент) */
.params-buttons-sticky .button-color-scheme4{
  justify-content:center;
  border:1px dashed var(--brand-tint-2);
  background-color:var(--brand-tint)!important;
}

/* модальное окно доп. фильтров */
.modal-content{ border-radius:var(--r-lg); border:1px solid var(--line-soft); box-shadow:var(--sh-3); }
.modal-header, .modal-footer{ border-color:var(--line-soft); }

/* ---------- 16. Мобильная адаптация дополнения ---------- */
@media (max-width:1199px){
  .tl-footer-grid{ grid-template-columns:1fr 1fr; gap:26px; }
}
@media (max-width:767px){
  .tl-footer-grid{ grid-template-columns:1fr; gap:22px; }
  .tl-footer-bottom{ flex-direction:column; }
  .tl-footer-bottom .footer-content-link-inline{ justify-content:flex-start; }
  .tl-cat-head{ flex-direction:column; align-items:flex-start; }
  .tl-services .tl-src-badge{ height:auto; min-height:40px; padding:8px 12px; font-size:12.5px; }
  .tl-services .tl-src-badge img{ width:22px; height:22px; }
}

/* =====================================================================
   17. КАРТИНКИ НЕ ШИРЕ ЭКРАНА (дефект §5.4 п.7 отчёта ПРОВЕРКА_ФУНКЦИОНАЛА.md)
   ---------------------------------------------------------------------
   Что было: у части <img> в шаблонах задана ТОЛЬКО высота (атрибутом height),
   ширина не ограничена — картинка получалась шире экрана и тянула за собой
   горизонтальную прокрутку страницы на телефоне (390 px).
   Замеры (натуральный размер → ширина при заданной высоте):
     /img/bs3.webp      1225x875, height=350 → 490 px  (шире экрана)
     /img/1273.webp     1313x875, height=300 → 450 px  (шире экрана)
     /img/market.webp    626x463, height=300 → 406 px  (шире экрана)
     /img/mob.webp      1068x875, height=350 → 427 px  (шире экрана)
   Отсюда и были 398 px на главной, 418 на /business-tariffs, 439 на /mobilnoe-prilozhenie.

   Решение:
   17.1 — общая страховка: ни одна картинка не шире своего контейнера (правило
          действует на всём сайте, а не только внутри .flex-wrapper);
   17.2 — ТОЛЬКО на мобильном (до 767 px) у четырёх перечисленных картинок
          снимается жёсткая высота (height:auto) — пропорции сохраняются, картинка
          вписывается в экран. На десктопе правило не работает вообще, поэтому
          вёрстка больших экранов не меняется.
          ⚠️ Специально НЕ ставим height:auto для всех картинок: у /img/project.webp,
          /img/otz.webp и /img/man.webp высота подобрана «в размер» (250/300/350 px),
          а у логотипа Т-Банка в футере height="80px" — общее правило их бы раздуло.
   ===================================================================== */

img{ max-width:100%; }

@media (max-width:767px){
  img[src$="/bs3.webp"],
  img[src$="/1273.webp"],
  img[src$="/market.webp"],
  img[src$="/mob.webp"]{
    max-width:100%;
    height:auto;
  }
}

/* ==========================================================================
   TRADELOT — РЕДИЗАЙН (ЭТАП 1), ЧАСТЬ 3: СПИСКИ ЛОТОВ БЕЗ КАРТИНОК + ЧАТ НА СТРАНИЦЕ ЛОТА
   --------------------------------------------------------------------------
   Требования владельца (16.09.2026):
     1) в списках лотов НИКАКИХ КАРТИНОК — вместо обложки иконка категории
        (assets/images/categories/<alias>.svg, подхват по file_exists с заглушкой);
     2) структура списка как у telderi, но нашим дизайном: шапка «Лот | Осталось | Ставок | Цена»,
        строки с иконкой, жирным названием и мелкими фактами, справа — осталось/ставок/цена;
        состояние «аукцион» подсвечено светлой фирменной подложкой, «простая продажа» — без подсветки;
     3) чат с продавцом прямо на странице лота (кабинетный чат остаётся).
   Источник вида: макеты _deploy/design_preview/10-listing.html, 11-lot-chat.html, 12-category-icons.html.
   Только дописано в конец main.css. Память: TRADELOT_PROJECT_STATE.md §12.50 (часть 3).
   ========================================================================== */

/* ---------- 1. ЧИПЫ КАТЕГОРИЙ С ИКОНКАМИ ---------- */
.tl-cat-chips{
  display:flex; flex-wrap:wrap; gap:10px;
}
.tl-cat-chip{
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px; padding:0 15px 0 9px;
  border-radius:var(--r-pill);
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink-2);
  font-size:14px; font-weight:600;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.tl-cat-chip img{ width:28px; height:28px; object-fit:contain; flex:0 0 auto; }
.tl-cat-chip:hover{ background:var(--brand-tint); border-color:var(--brand-tint-2); color:var(--brand-hover); box-shadow:var(--sh-1); }
.tl-cat-chip.is-on{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:var(--sh-accent); }
.tl-cat-chip.is-on:hover{ color:#fff; }

/* «рельса» категорий на главной: иконка категории вместо загруженной картинки */
.home-widget-categories-item .tl-cat-icon{
  width:56px; height:56px; object-fit:contain;
  margin-top:auto;
  border-radius:var(--r-sm);
  background:var(--brand-tint);
  padding:8px;
}

/* плитки категорий в каталоге (компонент items/catalog-view-categories.tpl) */
.widget-categories-or-subcategories a .tl-cat-icon{
  position:absolute; right:10px; bottom:10px;
  width:44px; height:44px; object-fit:contain;
  background:var(--brand-tint); border-radius:var(--r-xs); padding:6px;
}
.widget-categories-or-subcategories a.active .tl-cat-icon{ background:rgba(255,255,255,.22); }

/* ---------- 2. СПИСОК ЛОТОВ (без картинок) ---------- */
.tl-lot-list{ display:flex; flex-direction:column; gap:10px; }
.tl-lot-col-wrap{ flex:0 0 100%!important; max-width:100%!important; width:100%!important; padding-left:0; padding-right:0; }

.tl-lot-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px 120px 200px;
  gap:16px;
  padding:0 18px 10px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
.tl-lot-head span:not(:first-child){ text-align:right; }

.tl-lot-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px 120px 200px;
  gap:16px;
  align-items:center;
  padding:14px 18px;
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--line-soft);
  box-shadow:var(--sh-1);
  color:var(--ink-2);
  transition:box-shadow .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.tl-lot-row:hover{
  color:var(--ink-2);
  border-color:var(--brand-tint-2);
  box-shadow:var(--sh-2);
  transform:translateY(-1px);
}
/* «аукцион» — светлая фирменная подложка */
.tl-lot-row.is-auction{ background:var(--brand-tint); border-color:var(--brand-tint-2); }
.tl-lot-row.is-auction:hover{ background:var(--brand-tint-2); }
.tl-lot-row.is-highlight{ box-shadow:0 0 0 2px var(--brand-tint-2), var(--sh-2); }

.tl-lot-cell{ display:flex; align-items:flex-start; gap:14px; min-width:0; }
.tl-lot-icon{
  flex:0 0 auto;
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm);
  background:var(--surface-2);
  border:1px solid var(--line-soft);
}
.tl-lot-icon img{ width:34px; height:34px; object-fit:contain; }
.tl-lot-row.is-auction .tl-lot-icon{ background:var(--surface); border-color:var(--brand-tint-2); }
/* заглушка, если иконки категории ещё нет */
.tl-lot-icon-fallback{
  width:34px; height:34px;
  border-radius:var(--r-xs);
  background:linear-gradient(135deg, var(--grad-1) 0%, var(--grad-2) 100%);
  color:#fff; font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.tl-lot-icon-fallback.is-warm{ background:linear-gradient(135deg, var(--grad-w-1) 0%, var(--grad-w-2) 100%); color:var(--ink); }

.tl-lot-grow{ min-width:0; flex:1 1 auto; display:block; }
.tl-lot-name{
  display:block;
  font-size:15.5px; font-weight:700; line-height:1.35; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tl-lot-row:hover .tl-lot-name{ color:var(--brand-hover); }
.tl-lot-facts{
  display:block; margin-top:5px;
  font-size:12.5px; line-height:1.5; color:var(--muted);
  overflow-wrap:anywhere; word-break:break-word;
}
.tl-lot-facts b{ color:var(--ink-2); font-weight:600; overflow-wrap:anywhere; }
.tl-lot-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:6px; font-size:12px; color:var(--muted);
}
.tl-lot-badges{ display:inline-flex; flex-wrap:wrap; gap:6px; }
.tl-lot-badge{
  display:inline-flex; align-items:center; height:22px; padding:0 9px;
  border-radius:var(--r-pill);
  font-size:11.5px; font-weight:600;
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line-soft);
}
.tl-lot-badge.is-urgent{ background:var(--brand-2); color:var(--ink); border-color:transparent; }
.tl-lot-badge.is-auction{ background:var(--brand); color:#fff; border-color:transparent; }
.tl-lot-badge.is-new{ background:var(--success-tint); color:var(--success-ink); border-color:transparent; }

/* сердце «в избранное» и старые метки внутри строки */
.tl-lot-row .container-item-favorite{
  position:static; width:34px; height:34px; box-shadow:none;
  background:var(--surface-2); border:1px solid var(--line-soft);
}
.tl-lot-row .container-item-favorite i{ font-size:18px; }
.tl-lot-row .container-item-labels{ position:static; left:auto; bottom:auto; display:inline-flex; flex-wrap:wrap; gap:6px; }
.tl-lot-row .container-item-labels > div{ display:inline-block; margin-top:0; }
.tl-lot-row .container-item-labels > div > span{ box-shadow:none; }

.tl-lot-col{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right; min-width:0; }
.tl-lot-num{
  font-size:16px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tl-lot-row.is-auction .tl-lot-num{ color:var(--brand-active); }
.tl-lot-sub{ font-size:12px; color:var(--muted); white-space:nowrap; }
.tl-lot-blitz{
  display:inline-flex; align-items:center; height:22px; padding:0 9px;
  border-radius:var(--r-pill);
  background:var(--brand2-tint); color:#a8431a;
  font-size:11.5px; font-weight:600; white-space:nowrap;
}
.tl-lot-col .tl-lot-num.is-muted{ color:var(--muted); font-weight:600; }

/* скелетон загрузки в новом виде — чтобы список не «прыгал» */
.tl-lot-skeleton{
  display:grid; grid-template-columns:minmax(0,1fr) 150px 120px 200px; gap:16px; align-items:center;
  padding:14px 18px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line-soft);
}
.tl-lot-skeleton .sk{ height:12px; border-radius:6px; background:var(--surface-3); }
.tl-lot-skeleton .sk-1{ width:70%; height:14px; }
.tl-lot-skeleton .sk-2{ width:45%; margin-top:10px; }
.tl-lot-skeleton .sk-icon{ width:48px; height:48px; border-radius:var(--r-sm); background:var(--surface-3); flex:0 0 auto; }

/* ---------- 3. ЧАТ С ПРОДАВЦОМ НА СТРАНИЦЕ ЛОТА ----------
   §12.71 п.10 (оформление по требованиям владельца от 16.09.2026):
     • заголовок блока — одной строкой, ссылка «Все переписки — в кабинете» одна
       и с иконкой; если места не хватает, ссылка уходит ПОД заголовок с зазором 6 px
       (было: заголовок ломался на две строки, а ссылка вылезала за карточку);
     • карточка продавца: аватар + имя + статус в одну строку, внутри 14×16, отделена
       линией от переписки;
     • переписка: свои сообщения — заливка брендом с БЕЛЫМ текстом (контраст 5.8:1),
       входящие — светлая подложка на токенах, время мелким приглушённым;
     • пустое состояние: иконка + короткая подпись по центру, с воздухом;
     • ввод: поле отдельной строкой, кнопка «Отправить» на всю ширину через 16 px,
       текст в поле отбит от рамки на 14–16 px;
     • внутренний масштаб 4/8/12/16/24, между соседними блоками 24 px.
   ------------------------------------------------------------------------- */
.tl-chat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  overflow:hidden;
}
.tl-chat-head{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  /* линия-разделитель убрана (владелец: линий внутри карточек нет) — шапку отделяет
     собственная светлая подложка, а не рамка */
  border-bottom:0;
  background:var(--surface-2);
}
.tl-chat-who{ display:flex; align-items:center; gap:12px; min-width:0; }
.tl-chat-who > div{ min-width:0; }
.tl-chat-ava{
  width:40px; height:40px; flex:0 0 auto;
  border-radius:var(--r-pill);
  background:var(--brand-tint); color:var(--brand-hover);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700;
  overflow:hidden;
}
.tl-chat-ava img{ width:100%; height:100%; object-fit:cover; }
.tl-chat-nm{ font-size:15px; font-weight:700; color:var(--ink); line-height:1.3; overflow-wrap:anywhere; }
.tl-chat-nm a{ color:inherit; text-decoration:none; }
.tl-chat-nm a:hover{ color:var(--brand-hover); text-decoration:underline; }
.tl-chat-st{ margin-top:4px; font-size:12.5px; line-height:1.4; color:var(--muted); display:flex; align-items:center; gap:6px; overflow-wrap:anywhere; }
.tl-chat-st .dot-on{ width:8px; height:8px; border-radius:50%; background:var(--success); flex:0 0 auto; }
.tl-chat-st .dot-off{ width:8px; height:8px; border-radius:50%; background:var(--line); flex:0 0 auto; }
.tl-chat-tools{ display:flex; flex-wrap:wrap; gap:8px; }

.tl-chat-body{
  max-height:320px; min-height:132px; overflow-y:auto; overflow-x:hidden;
  padding:16px;
  display:flex; flex-direction:column; gap:8px;
  background:var(--surface);
}
.tl-chat-body .chat-dialogue-item-date{
  margin:8px 0 4px;
  font-size:12px; font-weight:600; color:var(--muted); text-align:center;
}
.tl-chat-body .chat-dialogue-item-container{
  display:flex; justify-content:flex-start; min-width:0;
  /* базовая тема добавляет 15 px снизу каждому сообщению — вместе с gap это давало 23 px */
  margin-bottom:0 !important;
}
.tl-chat-body .chat-dialogue-item-container.item-message-from{ justify-content:flex-end; }
/* аватар собеседника скрыт: он уже показан в карточке продавца выше, иначе строка «двоится» */
.tl-chat-body .chat-dialogue-item-message-avatar{ display:none; }
/* ВАЖНО: в разметке CMS «пузырь» — это сам текстовый блок
   (.chat-dialogue-item-message-text, у него в базовой теме свои фон и радиус),
   а .chat-dialogue-item-message — строка «пузырь + время». Поэтому оформляем пузырём
   ИМЕННО текстовый блок, иначе получается коробка в коробке (проверено на скриншоте). */
.tl-chat-body .chat-dialogue-item-message{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:4px;
  max-width:min(86%, 560px);
  min-width:0;
}
.tl-chat-body .item-message-from .chat-dialogue-item-message{ align-items:flex-end; }
.tl-chat-body .item-message-system .chat-dialogue-item-message{
  max-width:100%; margin:0 auto; align-items:center;
}
.tl-chat-body .chat-dialogue-item-message-text{
  order:1;
  max-width:100%;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-2);
  color:var(--ink-2);
  font-size:14.5px; line-height:1.5;
  text-align:left;
  min-width:0; overflow-wrap:anywhere;
}
.tl-chat-body .item-message-from .chat-dialogue-item-message-text{
  background:var(--brand); border-color:var(--brand); color:#fff;
  /* место под «три точки» (удалить сообщение): они стоят в правом верхнем углу пузыря */
  padding-right:26px;
}
.tl-chat-body .item-message-system .chat-dialogue-item-message-text{
  background:var(--surface-2); border-style:dashed; text-align:center; padding-right:12px;
}
.tl-chat-body .chat-dialogue-item-message-text img{ max-width:100%; height:auto; border-radius:var(--r-xs); margin-top:8px; display:block; }
.tl-chat-body .chat-dialogue-item-message-text a{ color:var(--brand-hover); }
.tl-chat-body .item-message-from .chat-dialogue-item-message-text a{ color:#fff; text-decoration:underline; }
.tl-chat-body .chat-dialogue-item-message-date{
  order:2;
  margin:0; font-size:11.5px; line-height:1.3; color:var(--muted);
}
.tl-chat-body .chat-dialogue-item-message-menu{
  position:absolute; top:5px; right:6px;
  float:none; margin:0;
  color:var(--muted); cursor:pointer; line-height:1; font-size:15px;
}
.tl-chat-body .item-message-from .chat-dialogue-item-message-menu{ color:rgba(255,255,255,.9); }
/* «три точки» в базовой теме — иконка 26 px и своя подложка: в пузыре она выглядела
   как большой белый круг (span.uni-dropdown-name с фоном и рамкой), поэтому подложку
   делаем полупрозрачно-белой (она на заливке бренда), а иконку — белой */
.tl-chat-body .chat-dialogue-item-menu,
.tl-chat-body .chat-dialogue-item-menu:hover{
  background:none !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; border-radius:0 !important; line-height:1;
}
.tl-chat-body .chat-dialogue-item-menu i{ font-size:16px !important; line-height:1; }
.tl-chat-body .item-message-from .chat-dialogue-item-message-menu .uni-dropdown-name{
  width:26px !important; height:26px !important; min-width:0 !important;
  padding:0 !important;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-pill) !important;
  /* тёмная подложка на заливке бренда: белые точки дают 8.6:1 (нужно ≥ 3:1 для значка) */
  background:var(--brand-active) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}
.tl-chat-body .item-message-from .chat-dialogue-item-message-menu i{ color:#fff !important; }
.tl-chat-body .chat-dialogue-item-message-menu .uni-dropdown-content{ z-index:5; }
.tl-chat-body .chat-dialogue-date-separator,
.tl-chat-body h6{ font-size:12px; color:var(--muted); text-align:center; }

/* пустое состояние: иконка + короткая подпись по центру, с воздухом */
.tl-chat-empty{
  margin:auto 0;
  padding:8px 0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
}
.tl-chat-empty .ic{
  width:48px; height:48px; flex:0 0 auto;
  margin-bottom:4px;
  border-radius:var(--r-pill);
  background:var(--brand-tint); color:var(--brand-hover);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; line-height:1;
}
.tl-chat-empty img{ width:64px; height:64px; margin:0 auto 12px; object-fit:contain; }
.tl-chat-empty .t{ font-size:15px; font-weight:700; color:var(--ink); line-height:1.4; }
.tl-chat-empty .d{ font-size:13.5px; color:var(--muted); line-height:1.5; max-width:260px; }
.tl-chat-hints{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
.tl-chat-hint{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:0 16px;
  border-radius:var(--r-pill);
  background:var(--brand-tint); color:var(--brand-hover);
  border:1px solid var(--brand-tint-2);
  font-size:13px; font-weight:600; cursor:pointer;
}
.tl-chat-hint:hover{ background:var(--brand-tint-2); }

/* ввод: поле отдельной строкой, кнопка — под ним через 16 px, на всю ширину */
.tl-chat-form{
  display:flex; flex-direction:column; align-items:stretch; gap:16px;
  padding:16px;
  /* линия-разделитель убрана (владелец: линий внутри карточек нет) */
  border-top:0;
  background:var(--surface-2);
}
/* поле ввода отделено от переписки зазором 12 px, а не линией
   (проверка 17.09.2026: `.tl-chat-body ↓ .tl-chat-form` = 0 px) */
.tl-chat-body + .tl-chat-form{
  margin-top:12px !important;
}
.tl-chat-form textarea{
  display:block;
  width:100%; min-height:52px; max-height:140px; resize:vertical;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink);
  padding:14px 16px; font-size:15px; line-height:1.45; font-family:inherit;
}
.tl-chat-form textarea::placeholder{ color:var(--muted); }
.tl-chat-form textarea:focus{ outline:none; border-color:var(--brand); box-shadow:var(--tl-focus); }
.tl-chat-send{
  width:100%; min-height:50px; padding:14px 24px;
  border:0; border-radius:var(--r-pill);
  background:var(--brand); color:#fff;
  font-size:15.5px; font-weight:700; cursor:pointer;
  box-shadow:var(--sh-accent);
}
.tl-chat-send:hover{ background:var(--brand-hover); }
.tl-chat-send:active{ background:var(--brand-active); }
.tl-chat-send:focus-visible{ outline:none; box-shadow:var(--tl-focus); }
.tl-chat-send[disabled]{ opacity:.55; cursor:default; box-shadow:none; }

/* запасное правило для старых страниц из кэша: ссылка на кабинет в блоке теперь ОДНА —
   в шапке, поэтому нижней плашки-дубля в разметке нет (§12.71 п.10, требование 6) */
.tl-chat-note{
  display:flex; gap:8px; align-items:flex-start;
  padding:12px 16px;
  border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--muted); line-height:1.5;
}
.tl-chat-note i{ color:var(--brand); font-size:16px; flex:0 0 auto; }
.tl-chat-note a{ color:var(--brand-hover); font-weight:600; }

.tl-chat-guest{
  display:flex; flex-direction:column; align-items:stretch; gap:16px;
  padding:16px;
}
.tl-chat-guest .t{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.45; }
.tl-chat-guest .d{ margin-top:8px; font-size:13.5px; color:var(--muted); line-height:1.5; }
.tl-chat-guest .tl-chat-tools{ width:100%; }
.tl-chat-guest .btn-custom{ width:100%; justify-content:center; }
.tl-chat-guest .tl-chat-note{ padding:0; border-top:0; }

/* ---------- 4. МОБИЛЬНАЯ АДАПТАЦИЯ ---------- */
@media (max-width:1199px){
  .tl-lot-head{ grid-template-columns:minmax(0,1fr) 120px 100px 170px; }
  .tl-lot-row{ grid-template-columns:minmax(0,1fr) 120px 100px 170px; gap:12px; }
  .tl-lot-skeleton{ grid-template-columns:minmax(0,1fr) 120px 100px 170px; }
}
@media (max-width:991px){
  /* шапка таблицы скрывается, колонки переносятся в строку и получают подписи из data-label */
  .tl-lot-head{ display:none; }
  .tl-lot-row{
    grid-template-columns:1fr 1fr;
    gap:10px 14px;
    padding:14px;
  }
  .tl-lot-cell{ grid-column:1 / -1; }
  .tl-lot-col{
    align-items:flex-start; text-align:left;
    padding-top:8px; border-top:1px dashed var(--line);
  }
  .tl-lot-col::before{
    content:attr(data-label);
    display:block;
    font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
    color:var(--muted); margin-bottom:2px;
  }
  .tl-lot-skeleton{ grid-template-columns:1fr 1fr; }
  .tl-lot-skeleton .sk-icon{ display:none; }
  .tl-chat-body{ max-height:none; }
  .tl-chat-form{ flex-direction:column; align-items:stretch; }
  .tl-chat-send{ width:100%; }
}
@media (max-width:575px){
  .tl-lot-row{ grid-template-columns:1fr; }
  .tl-lot-col{ flex-direction:row; align-items:baseline; gap:8px; justify-content:space-between; }
  .tl-lot-col::before{ margin-bottom:0; }
  .tl-lot-name{ white-space:normal; }
  .tl-cat-chip{ font-size:13px; min-height:40px; }
  .tl-cat-chip img{ width:24px; height:24px; }
}

/* ==========================================================================
   TRADELOT — ПРАВКИ ВЛАДЕЛЬЦА ПО ИНТЕРФЕЙСУ (16.09.2026, часть 4)
   --------------------------------------------------------------------------
   1) чат с продавцом — в правой колонке карточки лота, под кнопками покупки
      (компактный вид + отступы);
   2) отступы в карточке лота: элементы больше не «слипаются» (текст → кнопка,
      заголовок → подпись, блок → блок: 12–16 px внутри, 24–32 px между секциями);
   3) карусель категорий на главной: полосы прокрутки нет, управление стрелками
      и перетаскиванием (Swiper модуля уже инициализируется);
   4) отступы в каталоге: заголовок категории отделён от списка, строки получили
      внутренние отступы, характеристики — отдельной строкой с воздухом,
      колонки «Осталось/Ставок/Цена» не сжимаются.
   Только дописано в конец main.css. См. TRADELOT_PROJECT_STATE.md §12.50 (часть 4).
   ========================================================================== */

/* ---------- 1. ЧАТ В ПРАВОЙ КОЛОНКЕ КАРТОЧКИ ЛОТА ----------
   §12.71 п.10: шапка блока — заголовок одной строкой и ОДНА ссылка в кабинет с иконкой.
   Заголовку и ссылке запрещён перенос внутри себя (white-space:nowrap), а строке шапки
   разрешён перенос между ними (flex-wrap) — тогда на узком экране ссылка уходит под
   заголовок с зазором 6 px, а не вылезает за карточку (было именно так: текст ссылки
   обрезался по краю блока). */
.tl-chat-box{ margin-top:24px; }
.tl-chat-box-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:6px 12px;
  margin-bottom:12px;
}
.tl-chat-box-title{
  font-size:16px; font-weight:700; color:var(--ink); line-height:1.3;
  white-space:nowrap; min-width:0;
}
.tl-chat-box-link{
  display:inline-flex; align-items:center; gap:6px;
  margin-left:auto;
  font-size:13.5px; font-weight:600; color:var(--brand-hover);
  white-space:nowrap; text-decoration:none;
}
.tl-chat-box-link i{ font-size:16px; line-height:1; flex:0 0 auto; }
.tl-chat-box-link:hover{ color:var(--brand-active); text-decoration:underline; }

/* отступ от соседних блоков правой колонки — ровно 24 px (требование 7).
   Блок в карточке лота обёрнут в .tl-chat-holder (ad-card.tpl): у прежней обёртки
   .mt20 стоял margin-top:20px!important, поэтому 24 px не получалось. */
.tl-chat-holder{ margin-top:24px; }
.tl-chat-holder > .tl-chat-box{ margin-top:0; }
.ad-card-sidebar > .tl-chat-box{ margin-top:24px; }

.tl-chat.is-compact{ border-radius:var(--r-md); }
.tl-chat.is-compact .tl-chat-head{ padding:14px 16px; }
.tl-chat.is-compact .tl-chat-body{ max-height:300px; min-height:132px; padding:16px; gap:8px; }
.tl-chat.is-compact .tl-chat-body .chat-dialogue-item-message{ max-width:min(90%, 560px); }
.tl-chat.is-compact .tl-chat-form{ gap:16px; padding:16px; }
.tl-chat.is-compact .tl-chat-guest{ gap:16px; padding:16px; }

/* ---------- 2. ОТСТУПЫ В КАРТОЧКЕ ЛОТА (ничего не должно слипаться) ---------- */
/* содержимое карточки: каждый блок отделён, внутри блока элементы дышат */
.ad-card-content-item{ margin-bottom:26px; }
.ad-card-content-item:last-child{ margin-bottom:0; }
.ad-card-content-item > * + *{ margin-top:14px; }
.ad-card-subtitle{ margin:0 0 6px; }
.ad-card-main-content > * + *{ margin-top:24px; }

/* правая колонка: цены → кнопки → продавец → покупка → чат */
.ad-card-sidebar > * + *{ margin-top:22px; }
.ad-card-prices > * + *{ margin-top:12px; }
.ad-card-action-buttons > * + *{ margin-top:10px; }
.ad-card-sidebar .btn-custom, .ad-card-sidebar .btn-custom-mini{ width:100%; justify-content:center; }
.ad-card-sidebar form + *{ margin-top:16px; }

/* блоки аналитики в карточке: подпись → пояснение → плашка → кнопка */
.ana-acc .ad-card-subtitle{ margin-bottom:10px; }
.ana-acc-hint{ margin:0 0 14px; line-height:1.6; }
.ana-acc .ana-note{ margin:0 0 14px; line-height:1.6; }
.ana-acc .ana-note + .btn-custom,
.ana-acc .ana-note + .ana-acc-form{ margin-top:14px; }
.ana-acc .btn-custom{ display:inline-flex; align-items:center; justify-content:center; }
.ana-acc-form > * + *{ margin-top:14px; }
.ana-acc-row + .ana-acc-row{ margin-top:14px; }
.ana-acc-field label{ display:block; margin-bottom:6px; font-weight:600; }
.ana-acc-list{ margin-top:16px; }
.ana-acc-item + .ana-acc-item{ margin-top:10px; }
.ana-notice{ margin-top:14px; }

/* заголовок лота и его метаданные */
.ad-card-title-block > * + *{ margin-top:12px; }
.ad-card-info-line > * + *{ margin-left:10px; }

/* ---------- 3. КАРУСЕЛЬ КАТЕГОРИЙ НА ГЛАВНОЙ: БЕЗ ПОЛОСЫ ПРОКРУТКИ ---------- */
.widget-categories-container{
  display:block;
  padding:0;
  overflow:visible;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.widget-categories-container::-webkit-scrollbar,
.module-categories-swiper::-webkit-scrollbar,
.module-categories-items-custom-1::-webkit-scrollbar,
.module-categories-items-custom-2::-webkit-scrollbar,
.module-categories-items-custom-3::-webkit-scrollbar,
.swiper-wrapper::-webkit-scrollbar{ width:0; height:0; display:none; }

.module-categories-swiper-container{ position:relative; padding:0 2px; }
.module-categories-swiper-prev,
.module-categories-swiper-next{
  position:absolute;
  top:50%;
  margin-top:-21px;
  width:42px; height:42px;
  border-radius:var(--r-pill);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--sh-2);
  color:var(--brand);
  z-index:4;
  cursor:pointer;
}
.module-categories-swiper-prev{ left:4px; }
.module-categories-swiper-next{ right:4px; }
.module-categories-swiper-prev i, .module-categories-swiper-next i{ font-size:20px; }
.module-categories-swiper-prev:hover, .module-categories-swiper-next:hover{
  background:var(--brand-tint); border-color:var(--brand-tint-2); color:var(--brand-hover);
}
.module-categories-swiper-prev.swiper-button-disabled,
.module-categories-swiper-next.swiper-button-disabled{ opacity:.45; cursor:default; }
@media (max-width:575px){
  .module-categories-swiper-prev{ left:-6px; }
  .module-categories-swiper-next{ right:-6px; }
  .module-categories-swiper-prev, .module-categories-swiper-next{ width:36px; height:36px; margin-top:-18px; }
}

/* плитки карусели: иконка категории вместо картинки, аккуратные отступы */
.module-categories-items-custom-2-item{
  display:flex !important;
  flex-direction:column;
  gap:12px;
  padding:16px !important;
  border-radius:var(--r-lg) !important;
  border:1px solid var(--line-soft);
  box-shadow:var(--sh-1);
  transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.module-categories-items-custom-2-item:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); border-color:var(--brand-tint-2); }
.module-categories-items-custom-2-item-image{ height:auto !important; text-align:center; }
.module-categories-items-custom-2-item-image .tl-cat-icon{
  width:76px !important; height:76px !important; object-fit:contain;
  background:var(--brand-tint); border-radius:var(--r-sm); padding:10px;
  margin:0 auto;
}
.module-categories-items-custom-2-item-name{
  font-weight:600 !important; font-size:14.5px !important;
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
  line-height:1.35;
}
.module-categories-items-custom-1-item .tl-cat-icon,
.module-categories-items-custom-3-item-image .tl-cat-icon{
  width:64px !important; height:64px !important; object-fit:contain;
  background:var(--brand-tint); border-radius:var(--r-sm); padding:9px;
}

/* ---------- 4. ОТСТУПЫ В КАТАЛОГЕ ---------- */
.tl-cat-head{ margin-top:16px; margin-bottom:24px; }
.widget-categories-or-subcategories{ margin-bottom:8px !important; }
.widget-categories-or-subcategories-button-all{ margin-top:14px !important; }
.catalog-filter-links-container{ margin-top:18px !important; margin-bottom:6px; }
.catalog-container-options{ margin-bottom:18px; }

/* заголовок раздела лотов (главная и каталог) отделён от списка */
.bold-title-and-link{
  margin-top:34px; margin-bottom:22px;
  padding-bottom:0;
}
.bold-title-and-link:first-child{ margin-top:0; }
.tl-lot-list{ margin-top:6px; }

.tl-lot-head{
  padding:0 20px 12px;
  border-bottom:1px solid var(--line);
  margin-bottom:2px;
}
.tl-lot-row{
  padding:18px 20px;
  gap:18px;
  align-items:center;
}
.tl-lot-cell{ gap:16px; }
.tl-lot-name{ margin-bottom:0; }
.tl-lot-facts{ margin-top:9px; line-height:1.55; }
.tl-lot-meta{ margin-top:11px; gap:10px; }
.tl-lot-icon{ width:52px; height:52px; }
.tl-lot-icon img{ width:36px; height:36px; }
.tl-lot-col{ gap:5px; padding-left:8px; }
.tl-lot-num{ line-height:1.25; }
.tl-lot-skeleton{ padding:18px 20px; }

@media (max-width:991px){
  .tl-lot-row{ padding:16px; gap:12px 14px; }
  .tl-lot-head{ display:none; }
  .tl-lot-col{ padding-left:0; }
}

/* ==========================================================================
   TRADELOT — ПРАВКИ ВЛАДЕЛЬЦА (16.09.2026), часть 5:
   блок «Данные в лотах» на главной (объясняющий блок с мини-примером).
   Только дописано в конец main.css. См. TRADELOT_PROJECT_STATE.md §12.50.
   ========================================================================== */
.tl-about-data{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-2);
  padding:40px;
}
.tl-about-data-cols{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:40px;
  align-items:center;
}
.tl-about-data-text .tl-h2{ max-width:640px; }
.tl-about-data-list{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px; }
.tl-about-data-list li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--ink-2); }
.tl-about-data-list i{ color:var(--success); font-size:19px; flex:0 0 auto; margin-top:1px; }

.tl-about-data-example{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:22px;
}
.tl-about-data-example-head{
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.tl-about-data-lot{
  display:block; margin-top:10px;
  font-size:15.5px; font-weight:700; line-height:1.35; color:var(--brand-hover);
}
.tl-about-data-lot:hover{ color:var(--brand-active); text-decoration:underline; }
.tl-about-data-rows{ margin-top:18px; display:grid; gap:12px; }
.tl-about-data-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:12px 14px;
}
.tl-about-data-cap{ display:block; font-size:12px; color:var(--muted); line-height:1.4; }
.tl-about-data-val{
  display:block; margin-top:2px;
  font-size:22px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1.15;
}
.tl-about-data-upd{ font-size:12.5px; color:var(--muted); text-align:right; }

@media (max-width:991px){
  .tl-about-data{ padding:22px; border-radius:var(--r-lg); }
  .tl-about-data-cols{ grid-template-columns:1fr; gap:24px; }
  .tl-about-data-val{ font-size:20px; }
  .tl-about-data-list li{ font-size:14.5px; }
}

/* ============================================================================
   §12.69 ДОКУМЕНТЫ В ПЕРЕПИСКЕ (пункт владельца: как у telderi — фото И документы)
   Фото по-прежнему показываются превью, документы — строкой «иконка + имя + размер».
   ============================================================================ */
.uni-attach-files-item.uni-attach-files-item-doc{width:auto;max-width:280px;height:auto;min-height:44px;padding:8px 26px 8px 10px;background:#f7f6fd;border:1px solid #e7e6ef;display:inline-flex;align-items:center;gap:8px;vertical-align:top}
.uni-attach-files-item-doc-icon{display:inline-flex;font-size:18px;color:#6640f4}
.uni-attach-files-item-doc-name{font-size:12px;color:#1d1b2e;overflow-wrap:anywhere}
.uni-attach-files-item-doc-size{font-size:11px;color:#6f6c86;white-space:nowrap}
.uni-attach-files-error{margin-top:6px;font-size:12px;color:#e04a4a}
.chat-dialogue-item-message-attach-docs{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.chat-dialogue-item-message-attach-doc{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e7e6ef;border-radius:10px;background:#f7f6fd;font-size:13px;color:#1d1b2e;text-decoration:none;max-width:100%}
.chat-dialogue-item-message-attach-doc:hover{border-color:#6640f4;color:#6640f4}
.chat-dialogue-item-message-attach-doc-name{overflow-wrap:anywhere}
.chat-dialogue-item-message-attach-doc-size{font-size:11px;color:#6f6c86;white-space:nowrap}
@media (max-width:575px){.uni-attach-files-item.uni-attach-files-item-doc{max-width:100%}}

/* ==========================================================================
   TRADELOT — ЭТАП 2 РЕДИЗАЙНА, ЧАСТЬ 1: КАБИНЕТ (продавца и покупателя)
   --------------------------------------------------------------------------
   Единая система для страниц /profile, /profile/ads, /profile/favorites,
   /profile/orders, /profile/wallet, /profile/services, /profile/payouts,
   /profile/analytics-updates, /profile/statistics, /profile/reviews,
   /profile/settings, /profile/shops, /profile/tariffs, /profile/verification,
   /profile/chat. Только токены темы (--brand, --surface, --line, --r-*, шкала 4/8/12/16/24/32):
   никаких жёстких цветов и отступов меньше 16 px между текстом и кнопками.
   Чужие блоки (payout-*, ana-*, tlc-*) не переопределяются — у них свои авторы.
   Только дописано в конец main.css. См. TRADELOT_PROJECT_STATE.md §12.50 (часть 5).
   ========================================================================== */

/* ---------- 1. БОКОВАЯ ПАНЕЛЬ КАБИНЕТА ---------- */
.profile-user-sidebar{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:24px 20px;
  margin-bottom:24px;
}
.profile-user-sidebar-avatar{ text-align:center; margin-bottom:16px; }
.profile-user-sidebar-avatar > div{
  position:relative;
  width:96px; height:96px;
  margin:0 auto;
  border-radius:var(--r-pill);
  overflow:hidden;
  background:var(--brand-tint);
  border:2px solid var(--brand-tint-2);
}
.profile-user-sidebar-avatar img{ width:100%; height:100%; object-fit:cover; }
.profile-user-sidebar-avatar-change{
  position:absolute; right:0; bottom:0; z-index:2;
  width:32px; height:32px;
  border-radius:var(--r-pill);
  background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:var(--sh-accent);
}
.profile-user-sidebar-avatar-change i{ font-size:16px; }
.profile-user-sidebar-full-name{
  margin:0 0 10px;
  font-size:17px; font-weight:700; color:var(--ink);
  text-align:center; line-height:1.35;
}
.profile-user-sidebar .container-user-rating-stars{ display:flex; justify-content:center; align-items:center; gap:8px; margin-bottom:20px; }
.profile-user-sidebar .user-rating-stars-count-reviews{ font-size:13px; color:var(--muted); }

.profile-user-sidebar-menu{ display:flex; flex-direction:column; gap:4px; }
.profile-user-sidebar-menu a{
  display:flex; align-items:center; gap:12px;
  min-height:44px;
  padding:10px 14px;
  border-radius:var(--r-sm);
  color:var(--ink-2);
  font-size:14.5px; font-weight:600;
  transition:background-color .16s ease, color .16s ease;
}
.profile-user-sidebar-menu a i{ font-size:19px; color:var(--muted); flex:0 0 auto; }
.profile-user-sidebar-menu a:hover{ background:var(--brand-tint); color:var(--brand-hover); }
.profile-user-sidebar-menu a:hover i{ color:var(--brand-hover); }
.profile-user-sidebar-menu a.active,
.profile-user-sidebar-menu a.is-active{
  background:var(--brand); color:#fff;
  box-shadow:var(--sh-accent);
}
.profile-user-sidebar-menu a.active i,
.profile-user-sidebar-menu a.is-active i{ color:#fff; }
.profile-user-sidebar-menu hr{ border-top:1px solid var(--line); margin:16px 0; background:none; height:0; }

/* выпадающие подпункты меню кабинета */
.profile-user-sidebar-menu .dropdown-box-list-nested{ display:flex; flex-direction:column; gap:2px; margin:2px 0 6px; }
.profile-user-sidebar-menu .dropdown-box-list-nested a{ min-height:38px; padding:8px 14px 8px 44px; font-size:14px; font-weight:500; }
.profile-user-sidebar-menu .dropdown-box-list-nested-toggle{ justify-content:space-between; }

/* ---------- 2. ЗАГОЛОВОК СТРАНИЦЫ И ТАБЫ ---------- */
.title-h1-adaptive{
  font-size:30px; line-height:1.2; font-weight:700; color:var(--ink);
  letter-spacing:-.018em;
  margin:0 0 20px;
}
.title-h1-adaptive strong{ font-weight:700; }

.my-tabs-items{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:24px;
}
.my-tabs-item{
  display:inline-flex; align-items:center; gap:8px;
  min-height:42px; padding:0 16px;
  border-radius:var(--r-pill);
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink-2);
  font-size:14px; font-weight:600;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.my-tabs-item span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:var(--r-pill);
  background:var(--surface-2);
  color:var(--muted);
  font-size:12px; font-weight:700;
}
.my-tabs-item:hover{ background:var(--brand-tint); border-color:var(--brand-tint-2); color:var(--brand-hover); }
.my-tabs-item:hover span{ background:var(--surface); color:var(--brand-hover); }
.my-tabs-item.active{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:var(--sh-accent); }
.my-tabs-item.active span{ background:rgba(255,255,255,.22); color:#fff; }
.my-tabs-content{ margin-top:24px; }

/* ---------- 3. КАРТОЧКИ И БЛОКИ КАБИНЕТА ---------- */
.profile-settings-section,
.my-tabs-content-container,
.profile-verification-container,
.profile-wallet-info,
.profile-tariffs-list,
.profile-home-sections{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:24px;
  margin-bottom:24px;
}
.profile-settings-section-item{ padding:16px 0; border-bottom:1px solid var(--line-soft); }
.profile-settings-section-item:last-child{ border-bottom:0; padding-bottom:0; }
.profile-settings-section-item:first-child{ padding-top:0; }
.profile-settings-section-item > * + *{ margin-top:12px; }

/* списки тарифов (страница «Тарифы») */
.profile-tariffs-list-items{ display:grid; gap:16px; }
.profile-tariffs-list-item{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:20px;
}
.profile-tariffs-list-item-content{ display:flex; flex-direction:column; gap:8px; }
.profile-tariffs-list-item-name{ font-size:17px; font-weight:700; color:var(--ink); }
.profile-tariffs-list-item-price-now{ font-size:22px; font-weight:700; color:var(--brand-active); font-variant-numeric:tabular-nums; }
.profile-tariffs-list-item-text{ font-size:14px; color:var(--muted); line-height:1.6; }
.profile-tariffs-list-item-prices{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.profile-tariffs-list-item-icon{ font-size:24px; color:var(--brand); }
.profile-tariffs-action-payment{ margin-top:16px; display:flex; }
.profile-tariffs-action-payment .btn-custom{ width:100%; justify-content:center; }

/* кошелёк */
.profile-wallet-payment-form{ display:flex; flex-direction:column; gap:16px; }
.profile-wallet-info-balance{ font-size:34px; font-weight:700; color:var(--brand); font-variant-numeric:tabular-nums; }
.profile-wallet-payment-action-replenishment{ margin-top:8px; }

/* сводка на главной кабинета */
.profile-home-sections-info-item{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--line-soft);
}
.profile-home-sections-info-item:last-child{ border-bottom:0; }

/* ---------- 4. ПУСТЫЕ СОСТОЯНИЯ ---------- */
.not-found-title-container{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px;
  text-align:center;
  padding:48px 24px;
  background:var(--surface);
  border:1px dashed var(--line);
  border-radius:var(--r-lg);
  margin-top:24px;
}
.not-found-title-container-image{ font-size:44px; line-height:1; }
.not-found-title-container p{ margin:0; max-width:520px; color:var(--muted); font-size:15px; line-height:1.6; }
.not-found-title-container .btn-custom,
.not-found-title-container .btn-custom-mini{ margin-top:8px; }

/* «Мои лоты»: строка + подвал с действиями */
.tl-lot-card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:4px 0 0;
  margin-bottom:16px;
  transition:box-shadow .16s ease, border-color .16s ease;
}
.tl-lot-card:hover{ box-shadow:var(--sh-2); border-color:var(--brand-tint-2); }
.tl-lot-card .tl-lot-col-wrap{ padding:0; }
.tl-lot-card .tl-lot-row{ border:0; box-shadow:none; background:transparent; border-radius:var(--r-lg) var(--r-lg) 0 0; }
.tl-lot-card .tl-lot-row:hover{ transform:none; box-shadow:none; }
.tl-lot-check{ padding:16px 20px 0; }
.tl-lot-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  padding:14px 20px;
  border-top:1px solid var(--line-soft);
  background:var(--surface-2);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.tl-lot-foot > *{ margin:0; }
.tl-lot-badge.is-status{ background:var(--brand-tint); color:var(--brand-hover); border-color:transparent; }

/* кнопки и ссылки внутри кабинета: единые состояния и минимум 16 px до текста */
.col-md-9 .btn-custom, .col-md-9 .btn-custom-mini{ min-height:44px; }
.col-md-9 .btn-custom-mini{ min-height:38px; }
.col-md-9 h1 + *, .col-md-9 h2 + *{ margin-top:16px; }
.col-md-9 p + .btn-custom, .col-md-9 p + .btn-custom-mini,
.col-md-9 p + .btn-custom-big{ margin-top:16px; }
.col-md-9 div + .btn-custom, .col-md-9 div + .btn-custom-mini{ margin-top:16px; }

/* формы кабинета: единый вид полей и подписей */
.profile-settings-form .form-control,
.profile-verification-form .form-control,
.profile-wallet-payment-form .form-control,
.profile-statistics-dates-form .form-control{
  min-height:46px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  font-size:15px;
}
.profile-settings-form .form-control:focus,
.profile-verification-form .form-control:focus,
.profile-wallet-payment-form .form-control:focus,
.profile-statistics-dates-form .form-control:focus{
  outline:none; border-color:var(--brand); box-shadow:var(--tl-focus);
}
.profile-settings-form label, .profile-verification-form label{ font-size:14px; font-weight:600; color:var(--ink); margin-bottom:8px; display:block; }

/* ---------- 5. МОБИЛЬНАЯ АДАПТАЦИЯ КАБИНЕТА ---------- */
@media (max-width:991px){
  .title-h1-adaptive{ font-size:24px; margin-bottom:16px; }
  .my-tabs-items{
    flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px;
    scrollbar-width:none; -ms-overflow-style:none;
    margin-left:-4px; margin-right:-4px; padding-left:4px; padding-right:4px;
  }
  .my-tabs-items::-webkit-scrollbar{ display:none; }
  .my-tabs-item{ flex:0 0 auto; }
  .profile-settings-section,
  .my-tabs-content-container,
  .profile-verification-container,
  .profile-wallet-info,
  .profile-tariffs-list,
  .profile-home-sections{ padding:16px; border-radius:var(--r-md); }
  .not-found-title-container{ padding:32px 16px; }
  .tl-lot-foot{ padding:12px 14px; gap:10px; }
  .tl-lot-foot .btn-custom-mini{ flex:1 1 auto; justify-content:center; }
  .tl-lot-check{ padding:14px 14px 0; }
  .profile-wallet-info-balance{ font-size:28px; }
}
@media (max-width:575px){
  .profile-user-sidebar{ padding:20px 16px; }
  .my-tabs-item{ min-height:40px; padding:0 14px; font-size:13.5px; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 2: КАРТОЧКА ЛОТА, СТАТИЧЕСКИЕ СТРАНИЦЫ, МАГАЗИНЫ, БЛОГ,
   КАРТОЧКИ ПОЛЬЗОВАТЕЛЕЙ И СИСТЕМНЫЕ МЕЛОЧИ
   --------------------------------------------------------------------------
   Только токены темы (--brand, --surface, --line, --r-*, шкала 4/8/12/16/24/32).
   Никаких жёстких цветов: из-за них уже был невидимый текст в тёмной теме.
   Чужие блоки (payout-*, ana-*, tlc-*, personal-*) не переопределяются по цветам —
   их стили пишут другие исполнители, здесь только аккуратные отступы и радиусы.
   Только дописано в конец main.css. См. TRADELOT_PROJECT_STATE.md §12.50 (часть 5).
   ========================================================================== */

/* ---------- 1. КАРТОЧКА ЛОТА: ЕДИНАЯ СИСТЕМА ---------- */
.ad-card-content{ padding:0; }
.ad-card-title-block + .ad-card-content{ margin-top:24px; }

.ad-card-subtitle{
  margin:0 0 14px;
  font-size:16px; font-weight:700; color:var(--ink);
  line-height:1.35; letter-spacing:-.01em;
}
.ad-card-content-item + .ad-card-content-item{ margin-top:28px; }

/* характеристики лота: строки «подпись — значение» */
.ad-card-list-properties{
  display:grid; gap:0;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  overflow:hidden;
}
.ad-card-list-properties > *{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:12px 16px;
  border-bottom:1px solid var(--line-soft);
  font-size:14.5px;
}
.ad-card-list-properties > *:last-child{ border-bottom:0; }
.ad-card-list-properties > *:nth-child(odd){ background:var(--surface-2); }
.ad-card-list-properties .params-property-name,
.ad-card-list-properties span:first-child{ color:var(--muted); }
.ad-card-list-properties .params-property-value,
.ad-card-list-properties span:last-child{ color:var(--ink); font-weight:600; text-align:right; }

/* плашки-подсказки под заголовком карточки */
.ad-card-content-info-box-container{ margin-bottom:24px; }
.ad-card-content-info-box{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-left:3px solid var(--brand);
  border-radius:var(--r-md);
  padding:16px 18px;
  box-shadow:var(--sh-1);
}
.ad-card-content-info-box strong{ display:block; margin-bottom:8px; font-size:15px; color:var(--ink); }
.ad-card-content-info-box p{ margin:0; font-size:14px; color:var(--muted); line-height:1.6; }

/* строка метаданных под заголовком (просмотры, номер лота) */
.ad-card-info-line{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  font-size:13.5px; color:var(--muted);
}
.ad-card-info-line > *{ display:inline-flex; align-items:center; gap:6px; }
.ad-card-menu-line{ display:flex; align-items:center; gap:12px; }
.ad-card-menu-line-item{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:var(--r-pill);
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  color:var(--muted);
  cursor:pointer;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
.ad-card-menu-line-item i{ font-size:18px; }
.ad-card-menu-line-item:hover{ background:var(--brand-tint); border-color:var(--brand-tint-2); color:var(--brand-hover); }

/* описание лота */
.ad-card-content p{ font-size:15.5px; line-height:1.7; color:var(--ink-2); }
.ad-card-content p + p{ margin-top:12px; }

/* отзывы */
.ad-card-reviews-content{ margin-top:8px; }
.ad-card-reviews-content > * + *{ margin-top:16px; }

/* блок продавца */
.ad-card-user{
  display:flex; align-items:center; gap:14px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:16px;
  box-shadow:var(--sh-1);
}
.ad-card-user + *{ margin-top:16px; }
.ad-card-user-avatar{ flex:0 0 auto; }
.ad-card-user-avatar > div{
  width:52px; height:52px; border-radius:var(--r-pill); overflow:hidden;
  background:var(--brand-tint); border:1px solid var(--brand-tint-2);
}
.ad-card-user-avatar img{ width:100%; height:100%; object-fit:cover; }
.ad-card-user-content{ min-width:0; display:flex; flex-direction:column; gap:8px; }
.ad-card-user-content a{ font-size:15px; font-weight:600; color:var(--ink); }
.ad-card-user-content a:hover{ color:var(--brand-hover); }

/* «Похожие лоты» */
.ad-card-similar-content > h1{ margin-bottom:0; }
.ad-card-similar-content .tl-lot-list{ margin-top:16px; }

/* ---------- 2. СТАТИЧЕСКИЕ СТРАНИЦЫ (12 шт.) ---------- */
.tl-page-static{ padding-bottom:48px; }
.tl-page-static > h1{ margin:24px 0 20px; }
.tl-page-static h1{ font-size:34px; line-height:1.2; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.tl-page-static h2{ font-size:24px; line-height:1.3; font-weight:700; color:var(--ink); margin:32px 0 14px; }
.tl-page-static h3{ font-size:19px; line-height:1.4; font-weight:600; color:var(--ink); margin:24px 0 12px; }
.tl-page-static h4{ font-size:16.5px; line-height:1.4; font-weight:600; color:var(--ink); margin:20px 0 10px; }
.tl-page-static p{ font-size:15.5px; line-height:1.75; color:var(--ink-2); margin:0 0 16px; }
.tl-page-static ul, .tl-page-static ol{ margin:0 0 18px; padding-left:22px; }
.tl-page-static li{ font-size:15.5px; line-height:1.7; color:var(--ink-2); margin-bottom:8px; }
.tl-page-static li::marker{ color:var(--brand); }
.tl-page-static a{ color:var(--brand-hover); text-decoration:underline; }
.tl-page-static a:hover{ color:var(--brand-active); }
.tl-page-static hr{ border:0; border-top:1px solid var(--line); margin:28px 0; background:none; height:0; }
.tl-page-static img{ max-width:100%; height:auto; border-radius:var(--r-md); margin:8px 0 20px; }
.tl-page-static table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  overflow:hidden;
  margin:8px 0 24px;
  font-size:14.5px;
}
.tl-page-static th, .tl-page-static td{
  padding:12px 16px; text-align:left;
  border-bottom:1px solid var(--line-soft);
  color:var(--ink-2);
}
.tl-page-static th{ background:var(--surface-2); font-weight:600; color:var(--ink); }
.tl-page-static tr:last-child td{ border-bottom:0; }
.tl-page-static blockquote{
  margin:0 0 20px; padding:16px 20px;
  background:var(--brand-tint);
  border-left:3px solid var(--brand);
  border-radius:var(--r-md);
  color:var(--ink-2);
}
.tl-page-static > *:first-child{ margin-top:0; }
.tl-page-static .promo-business-header-container-title h1{ margin-top:0; }

/* ---------- 3. БЛОГ ---------- */
.blog-widget-categories-or-subcategories{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:24px;
}
.blog-widget-categories-or-subcategories a{
  display:inline-flex; align-items:center;
  min-height:38px; padding:0 16px;
  border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line);
  color:var(--ink-2); font-size:14px; font-weight:600;
}
.blog-widget-categories-or-subcategories a:hover,
.blog-widget-categories-or-subcategories a.active{
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.blog-post-card-content{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:28px;
}
.blog-post-card-content p{ font-size:15.5px; line-height:1.75; color:var(--ink-2); }
.blog-post-card-content h2{ margin:28px 0 14px; }
.blog-post-card-content h3{ margin:24px 0 12px; }
.blog-post-card-content img{ max-width:100%; height:auto; border-radius:var(--r-md); margin:12px 0; }
.blog-post-card-content ul, .blog-post-card-content ol{ margin:0 0 18px; padding-left:22px; }
.blog-post-card-content li{ font-size:15.5px; line-height:1.7; color:var(--ink-2); margin-bottom:8px; }
.blog-post-card-content a{ color:var(--brand-hover); text-decoration:underline; }

/* ---------- 4. МАГАЗИНЫ ---------- */
.shops-container-items{ margin-top:8px; }
.personal-shop-banners,
.personal-shop-banners-swiper{ border-radius:var(--r-lg); overflow:hidden; }
.personal-shop-banners-item{ border-radius:var(--r-lg); overflow:hidden; }
.personal-shop-banners-item-slide img{ border-radius:var(--r-lg); }
.personal-shop-pages-item{ margin-bottom:8px; }
.shop-catalog-container{ margin-top:16px; }

/* ---------- 5. СИСТЕМНЫЕ МЕЛОЧИ: КНОПКИ, ПОЛЯ, ПУСТЫЕ СОСТОЯНИЯ ---------- */
/* состояния кнопок: обычная / наведение / нажатие / выключенная — единые для всех схем */
.btn-custom:disabled, .btn-custom-mini:disabled, .btn-custom-big:disabled,
.btn-custom.disabled, .btn-custom-mini.disabled, .btn-custom-big.disabled{
  opacity:.5; cursor:default; transform:none; box-shadow:none;
}
.btn-custom:disabled:hover, .btn-custom-mini:disabled:hover, .btn-custom-big:disabled:hover{
  transform:none; box-shadow:none;
}
.button-color-scheme1:focus-visible, .button-color-scheme2:focus-visible,
.button-color-scheme3:focus-visible, .button-color-scheme5:focus-visible{
  outline:none; box-shadow:var(--tl-focus);
}

/* поля публичной части: единый фокус и размеры */
.flex-wrapper .form-control,
.flex-wrapper input[type=text]:not(.live-search-form-input),
.flex-wrapper input[type=email],
.flex-wrapper input[type=password],
.flex-wrapper input[type=number],
.flex-wrapper input[type=tel],
.flex-wrapper select,
.flex-wrapper textarea{
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background-color:var(--surface);
  color:var(--ink);
  font-size:15px;
}
.flex-wrapper .form-control:focus,
.flex-wrapper input:focus,
.flex-wrapper select:focus,
.flex-wrapper textarea:focus{
  border-color:var(--brand); box-shadow:var(--tl-focus); outline:none;
}
.flex-wrapper label{ color:var(--ink-2); font-size:14px; font-weight:600; }

/* подписи и заголовки блоков: воздух по шкале */
.flex-wrapper h2 + .row, .flex-wrapper h2 + ul, .flex-wrapper h2 + p,
.flex-wrapper h3 + .row, .flex-wrapper h3 + p{ margin-top:16px; }

/* пустые состояния в любом месте системы */
.not-found-title-container + .not-found-title-container{ margin-top:16px; }
.flex-wrapper .text-center > p + .btn-custom,
.flex-wrapper .text-center > p + .btn-custom-big{ margin-top:16px; }

/* таблицы публичной части (сделки, выплаты, статистика) — аккуратный вид по умолчанию */
.flex-wrapper table:not(.ana-table):not([class*="tlc"]){
  border-collapse:separate; border-spacing:0;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  overflow:hidden;
  font-size:14.5px;
}
.flex-wrapper table:not(.ana-table):not([class*="tlc"]) th,
.flex-wrapper table:not(.ana-table):not([class*="tlc"]) td{
  padding:12px 16px; text-align:left; border-bottom:1px solid var(--line-soft);
}
.flex-wrapper table:not(.ana-table):not([class*="tlc"]) th{ background:var(--surface-2); font-weight:600; color:var(--ink); }
.flex-wrapper table:not(.ana-table):not([class*="tlc"]) tr:last-child td{ border-bottom:0; }

/* анализ-плашки чужого компонента: цвета — из токенов, а не жёсткие */
.ana-ready-label{ background:var(--brand-tint) !important; color:var(--brand-hover) !important; }
.ana-ready-percent{ color:var(--brand-active) !important; }

/* ---------- 6. МОБИЛЬНАЯ АДАПТАЦИЯ ---------- */
@media (max-width:991px){
  .ad-card-content-item + .ad-card-content-item{ margin-top:24px; }
  .tl-page-static h1{ font-size:26px; }
  .tl-page-static h2{ font-size:21px; }
  .tl-page-static h3{ font-size:18px; }
  .tl-page-static p, .tl-page-static li{ font-size:15px; }
  .blog-post-card-content{ padding:18px; border-radius:var(--r-md); }
  .ad-card-user{ padding:14px; }
  .ad-card-list-properties > *{ padding:11px 14px; font-size:14px; }
}
@media (max-width:575px){
  .ad-card-list-properties > *{ flex-direction:column; align-items:flex-start; gap:4px; }
  .ad-card-list-properties > * span:last-child{ text-align:left; }
  .flex-wrapper table:not(.ana-table):not([class*="tlc"]) th,
  .flex-wrapper table:not(.ana-table):not([class*="tlc"]) td{ padding:10px 12px; font-size:13.5px; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 3: ФИКСЫ ПОСЛЕ ПРОВЕРКИ (16.09.2026)
   --------------------------------------------------------------------------
   1) кнопки больше не вылезают за экран на 390 (длинная подпись, inline-flex,
      max-content — из-за этого на /profile была прокрутка 429 px при экране 390);
   2) блоки-подсказки кабинета: заголовок → текст → кнопка с воздухом 16 px;
   3) пустые состояния, магазины и прочая мелочь по системе.
   Только дописано в конец main.css. См. TRADELOT_PROJECT_STATE.md §12.50 (часть 5).
   ========================================================================== */

/* ---------- 1. КНОПКИ: НЕ ВЫЛЕЗАЮТ ЗА ЭКРАН ---------- */
.btn-custom, .btn-custom-mini, .btn-custom-big{
  max-width:100%;
  white-space:normal;
  text-align:center;
}
.btn-custom > span, .btn-custom-mini > span, .btn-custom-big > span{ max-width:100%; }

/* ---------- 2. БЛОКИ-ПОДСКАЗКИ В КАБИНЕТЕ ---------- */
.profile-home-sections-info-item{
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  padding:20px 0;
}
.profile-home-sections-info-item h5{
  margin:0 0 12px;
  font-size:16px; font-weight:700; color:var(--ink);
}
.profile-home-sections-info-item > div{ margin-bottom:16px; color:var(--muted); font-size:14.5px; line-height:1.6; }
.profile-home-sections-info-item > div:last-child{ margin-bottom:0; }
.profile-home-sections-info-item .btn-custom-mini,
.profile-home-sections-info-item .btn-custom{ margin-top:0 !important; }
.profile-home-sections-info-item > * + *{ margin-top:16px; }
.profile-home-sections-info-item h5 + div{ margin-top:0; }
.profile-home-sections{ padding:8px 24px; }

/* «Мои лоты»: блок массовой публикации и кнопки страницы */
.containerActionProfilePublishCheckItems{ margin-top:16px; }
.col-md-9 > h1 + .my-tabs-items{ margin-top:0; }

/* ---------- 3. МАГАЗИНЫ И ПРОЧЕЕ ---------- */
.personal-shop-pages{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.personal-shop-pages-item{ margin-bottom:0; }
.shops-container-items .tl-lot-list{ margin-top:16px; }

/* ---------- 4. ПРОВЕРКА НА МОБИЛЬНОМ ---------- */
@media (max-width:575px){
  .btn-custom, .btn-custom-mini, .btn-custom-big{ width:auto; }
  .profile-home-sections{ padding:8px 16px; }
  .profile-home-sections-info-item{ padding:18px 0; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 4: БЛОКИ ЯВНО ОТДЕЛЬНЫЕ, ТЕКСТ НЕ ЛИПНЕТ К РАМКАМ
   --------------------------------------------------------------------------
   Правка владельца 16.09.2026 (два места на скриншотах):
     1) в карточке лота сливались финансовая таблица, «Оптимальная цена» и
        «Запрос доступа к аналитике» — теперь каждый смысловой блок это карточка;
     2) в кабинете текст упирался в край блока («Верификация успешно пройдена»,
        «Тариф не подключён») — возвращены внутренние отступы.
   Правило: блок = карточка (фон --surface + рамка 1px --line-soft + радиус --r-lg),
   внутри 24 px, между блоками 24–32 px, текст→кнопка ≥16 px, заголовок→пояснение 10–12 px.
   Цвета/рамки/тени — ТОЛЬКО переменные темы (в тёмной теме всё читается).
   Блоки чужих компонентов (tlc-*, ana-*) не переписываются — им из этого слоя
   возвращаются отступы и токенные цвета вместо жёстких.
   См. TRADELOT_PROJECT_STATE.md §12.50 (часть 7).
   ========================================================================== */

/* ---------- 1. КАРТОЧКА ЛОТА: КАЖДЫЙ СМЫСЛОВОЙ БЛОК — ОТДЕЛЬНАЯ КАРТОЧКА ---------- */
.ad-card-content-item{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:24px;
  margin-bottom:0;
}
.ad-card-content-item + .ad-card-content-item{ margin-top:24px; }
.ad-card-content-item > * + *{ margin-top:16px; }
.ad-card-content-item > .ad-card-subtitle{ margin-top:0; margin-bottom:12px; }

/* если у блока нет своего заголовка (например, только таблица) — отступы те же */
.ad-card-content-item > .ad-card-subtitle + *{ margin-top:0; }

/* вложенные блоки чужих компонентов внутри карточки: фон/рамка/отступы по токенам,
   текст не касается границ */
.ad-card-content-item .tlc-card,
.ad-card-content-item .ana-kpi,
.ad-card-content-item .ana-note,
.ad-card-content-item .ana-acc-open,
.ad-card-content-item .ana-acc-item,
.ad-card-content-item .ana-service,
.ad-card-content-item .ana-field,
.ad-card-content-item .ana-notice{
  background:var(--surface-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  padding:16px 18px !important;
  color:var(--ink-2) !important;
}
.ad-card-content-item .ana-kpi-row{ display:flex; flex-wrap:wrap; gap:16px !important; }
.ad-card-content-item .ana-kpi-row > *{ flex:1 1 180px; min-width:0; }

/* таблицы внутри карточки лота */
.ad-card-content-item .tlc-table,
.ad-card-content-item .ana-acc-table,
.ad-card-content-item table{
  background:var(--surface) !important;
  border:1px solid var(--line-soft) !important;
  border-radius:var(--r-md) !important;
  overflow:hidden;
}
.ad-card-content-item .tlc-table th,
.ad-card-content-item .tlc-table td,
.ad-card-content-item .ana-acc-table th,
.ad-card-content-item .ana-acc-table td,
.ad-card-content-item table th,
.ad-card-content-item table td{
  padding:12px 16px !important;
  color:var(--ink-2) !important;
  border-color:var(--line-soft) !important;
}
.ad-card-content-item .tlc-table th,
.ad-card-content-item table th{ background:var(--surface-2) !important; color:var(--ink) !important; }

/* подписи второго плана и акценты — из токенов */
.ad-card-content-item .tlc-note,
.ad-card-content-item .tlc-source,
.ad-card-content-item .tlc-card-hint,
.ad-card-content-item .tlc-card-label,
.ad-card-content-item .tlc-row-label,
.ad-card-content-item .ana-acc-hint,
.ad-card-content-item .ana-acc-done,
.ad-card-content-item .ana-kpi-name{ color:var(--muted) !important; }
.ad-card-content-item .tlc-table-sum,
.ad-card-content-item .ana-kpi-value,
.ad-card-content-item .tlc-row-value{ color:var(--ink) !important; }
.ad-card-content-item .ana-chip{ padding:4px 10px !important; }
.ad-card-content-item .ana-chip-ok{ background:var(--success-tint) !important; color:var(--success-ink) !important; }
.ad-card-content-item .ana-chip-wait{ background:var(--brand2-tint) !important; color:#a8431a !important; }

/* текст → кнопка/форма: не меньше 16 px */
.ad-card-content-item p + .btn-custom,
.ad-card-content-item p + .btn-custom-mini,
.ad-card-content-item p + .btn-custom-big,
.ad-card-content-item .ana-note + .btn-custom,
.ad-card-content-item .ana-note + .ana-acc-form,
.ad-card-content-item .ana-acc-hint + .ana-note,
.ad-card-content-item .ana-acc-hint + .ana-acc-form,
.ad-card-content-item .ana-acc-hint + .btn-custom{ margin-top:16px !important; }
.ad-card-content-item .ana-acc-form > * + *{ margin-top:16px !important; }
.ad-card-content-item .ana-note{ margin:0 !important; }
.ad-card-content-item .ana-note + *{ margin-top:16px !important; }

/* ---------- 2. КАБИНЕТ: ВНУТРЕННИЕ ОТСТУПЫ И ЗАЗОРЫ ---------- */
.profile-home-sections{ padding:24px; }

/* строки-плашки кабинета: свой фон + отступы 16–20 px со ВСЕХ сторон */
.profile-home-sections-info-item{
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:20px;
  margin-bottom:16px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
}
.profile-home-sections-info-item:last-child{ margin-bottom:0; border-bottom:1px solid var(--line-soft); }
.profile-home-sections-info-item h5{ margin:0 0 12px; font-size:16px; font-weight:700; color:var(--ink); }
.profile-home-sections-info-item > div{ margin:0 0 16px; color:var(--muted); font-size:14.5px; line-height:1.65; }
.profile-home-sections-info-item > div:last-child{ margin-bottom:0; }
.profile-home-sections-info-item > *:last-child{ margin-bottom:0 !important; }
.profile-home-sections-info-item > * + *{ margin-top:0; }
.profile-home-sections-info-item h5 + div{ margin-top:0; }
.profile-home-sections-info-item .btn-custom,
.profile-home-sections-info-item .btn-custom-mini,
.profile-home-sections-info-item .btn-custom-big{ margin-top:0 !important; }
.profile-home-sections-info-item > div + .btn-custom,
.profile-home-sections-info-item > div + .btn-custom-mini{ margin-top:16px !important; }
/* строки-плашки с цветным фоном темы (sections-bg-*) — цвет фона остаётся, отступы наши */
.profile-home-sections-info-item[class*="sections-bg-"]{ color:var(--ink); }

/* прочие блоки кабинета: минимум 20 px внутри */
.profile-settings-section,
.my-tabs-content-container,
.profile-verification-container,
.profile-wallet-info,
.profile-tariffs-list,
.profile-tariffs-list-item{ padding:24px; }
.profile-verification-container > * + *,
.profile-wallet-info > * + *,
.profile-settings-section > * + *{ margin-top:16px; }
.profile-settings-section-item{ padding:20px; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-md); margin-bottom:16px; }
.profile-settings-section-item:last-child{ margin-bottom:0; border-bottom:1px solid var(--line-soft); }
.profile-settings-section-item > * + *{ margin-top:12px; }
.col-md-9 .my-tabs-content-container > * + *{ margin-top:16px; }

/* «Мои лоты» и другие списки кабинета: карточка-строка не липнет к краям */
.tl-lot-card .tl-lot-row{ padding:18px 20px; }

/* ---------- 3. ПРОЧИЕ СТРАНИЦЫ ЭТАПА 2 (статика, блог, магазины, карточки) ---------- */
.tl-page-static > * + *{ margin-top:0; }
.blog-post-card-content > * + *{ margin-top:16px; }
.blog-post-card-content > h2 + *,
.blog-post-card-content > h3 + *{ margin-top:12px; }
.tl-page-static p + .btn-custom,
.tl-page-static p + .btn-custom-mini,
.tl-page-static p + .btn-custom-big,
.tl-page-static ul + .btn-custom{ margin-top:16px; }

/* ---------- 4. МОБИЛЬНАЯ ---------- */
@media (max-width:991px){
  .ad-card-content-item{ padding:16px; border-radius:var(--r-md); }
  .ad-card-content-item + .ad-card-content-item{ margin-top:20px; }
  .profile-home-sections{ padding:16px; }
  .profile-home-sections-info-item{ padding:16px; }
  .profile-settings-section,
  .my-tabs-content-container,
  .profile-verification-container,
  .profile-wallet-info,
  .profile-tariffs-list,
  .profile-tariffs-list-item{ padding:16px; }
  .profile-settings-section-item{ padding:16px; }
  .tl-lot-card .tl-lot-row{ padding:16px; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 5: ДОВОДКА ЗАЗОРОВ ПО ЗАМЕРУ (16.09.2026)
   --------------------------------------------------------------------------
   Замер `measure_spacing.js` показал остатки: строки характеристик и ячейки
   таблиц стояли в 1 px от рамки (рамка была у самой таблицы/списка), а в кабинете
   кнопка шла через 12 px после заголовка. Здесь это закрыто:
     * рамку даёт КАРТОЧКА блока (.ad-card-content-item), а таблица/список внутри —
       без своей рамки и фона, только разделители строк;
     * заголовок → кнопка в кабинете: не меньше 16 px.
   См. TRADELOT_PROJECT_STATE.md §12.50 (часть 7).
   ========================================================================== */

/* ---------- 1. ВНУТРИ КАРТОЧКИ ЛОТА РАМКУ ДАЁТ КАРТОЧКА, А НЕ ТАБЛИЦА ---------- */
.ad-card-content-item .ad-card-list-properties{
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
}
.ad-card-content-item .ad-card-list-properties > *{
  padding:16px 0;
  background:transparent;
  border-bottom:1px solid var(--line-soft);
}
.ad-card-content-item .ad-card-list-properties > *:nth-child(odd){ background:transparent; }
.ad-card-content-item .ad-card-list-properties > *:last-child{ border-bottom:0; }

.ad-card-content-item .tlc-table,
.ad-card-content-item .ana-acc-table,
.ad-card-content-item table{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  width:100%;
}
.ad-card-content-item .tlc-table th,
.ad-card-content-item table th{
  background:var(--surface-2) !important;
  border-bottom:1px solid var(--line) !important;
}
.ad-card-content-item .tlc-table td,
.ad-card-content-item table td{
  border-bottom:1px solid var(--line-soft) !important;
}
.ad-card-content-item .tlc-table tr:last-child td,
.ad-card-content-item table tr:last-child td{ border-bottom:0 !important; }

/* таблица — на всю ширину карточки, без собственных отступов-«щелей» */
.ad-card-content-item .tlc-table-wrap,
.ad-card-content-item .ana-acc-table-wrap{ overflow-x:auto; }

/* ---------- 2. ПЛАШКА-ПОЯСНЕНИЕ: БОЛЬШЕ ВОЗДУХА ВОКРУГ ТЕКСТА ---------- */
.ad-card-content-item .ana-note{
  padding:18px 20px !important;
  line-height:1.65;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 12px;
}
.ad-card-content-item .ana-note .ana-chip{ margin:0 !important; }
.ad-card-content-item .ana-acc-hint{
  padding:0;
  line-height:1.65;
}

/* ---------- 3. ТЕКСТ → КНОПКА В КАРТОЧКЕ ЛОТА: НЕ МЕНЬШЕ 16 px ---------- */
.ad-card-content-item h4 + .btn-custom,
.ad-card-content-item h4 + .btn-custom-mini,
.ad-card-content-item h5 + .btn-custom,
.ad-card-content-item h5 + .btn-custom-mini,
.ad-card-content-item div + .btn-custom,
.ad-card-content-item div + .btn-custom-mini,
.ad-card-content-item span + .btn-custom,
.ad-card-content-item ul + .btn-custom{ margin-top:16px !important; }

/* ---------- 4. КАБИНЕТ: ЗАГОЛОВОК → КНОПКА НЕ МЕНЬШЕ 16 px ---------- */
.col-md-9 h5 + .btn-custom,
.col-md-9 h5 + .btn-custom-mini,
.col-md-9 h5 + .btn-custom-big,
.col-md-9 h4 + .btn-custom,
.col-md-9 h4 + .btn-custom-mini,
.col-md-9 h3 + .btn-custom,
.col-md-9 h3 + .btn-custom-mini,
.col-md-9 p + .btn-custom,
.col-md-9 p + .btn-custom-mini,
.col-md-9 span + .btn-custom,
.col-md-9 span + .btn-custom-mini,
.profile-home-sections-info-item h5 + .btn-custom,
.profile-home-sections-info-item h5 + .btn-custom-mini,
.profile-settings-section-item h5 + .btn-custom,
.profile-settings-section-item h5 + .btn-custom-mini{ margin-top:16px !important; }

/* ---------- 5. ОСТАЛЬНЫЕ СТРАНИЦЫ ЭТАПА 2: ТО ЖЕ ПРАВИЛО ---------- */
.tl-page-static h2 + .btn-custom,
.tl-page-static h3 + .btn-custom,
.tl-page-static h4 + .btn-custom,
.blog-post-card-content h2 + .btn-custom,
.blog-post-card-content h3 + .btn-custom{ margin-top:16px !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 6: ЗАЗОРЫ В БЛОКАХ КАБИНЕТА ПО ЗАМЕРУ (16.09.2026)
   --------------------------------------------------------------------------
   Замер `measure_spacing.js` нашёл остатки в кабинете: вкладка-«чип» с вложенной
   ссылкой, строки настроек (отрицательные margin-ы Bootstrap-строк), карточки
   выплат (`payout-*`) и сводка обновлений аналитики (`watch-*`), таблица выплат.
   Всё закрывается из этого слоя — файлы чужих компонентов не правятся:
     * у «чипов» отступы переезжают на содержимое (16 px по вертикали);
     * у строк внутри карточек убираются отрицательные поля Bootstrap;
     * карточкам выплат/сводки возвращаются внутренние отступы ≥16 px;
     * у таблиц внутри карточек рамку даёт карточка, а не сама таблица.
   См. TRADELOT_PROJECT_STATE.md §12.50 (часть 7).
   ========================================================================== */

/* ---------- 1. ВКЛАДКИ-«ЧИПЫ»: ОТСТУПЫ НА СОДЕРЖИМОМ ---------- */
.my-tabs-item{ padding:0 4px; }
.my-tabs-item > a{
  display:inline-flex; align-items:center; gap:8px;
  padding:16px 14px;
  color:inherit;
  font-weight:600;
}
.my-tabs-item > a:hover{ color:inherit; }
.my-tabs-item > span{ margin-right:14px; }
.my-tabs-items > .my-tabs-item > a:only-child{ padding:16px 14px; }

/* ---------- 2. СТРОКИ ВНУТРИ КАРТОЧЕК: БЕЗ ОТРИЦАТЕЛЬНЫХ ПОЛЕЙ BOOTSTRAP ---------- */
.profile-settings-section-item > .row,
.profile-settings-section > .row,
.profile-verification-container > .row,
.profile-wallet-info > .row,
.my-tabs-content-container > .row,
.profile-home-sections > .row{
  margin-left:0;
  margin-right:0;
}
.profile-settings-section-item > .row > [class*="col"],
.profile-settings-section > .row > [class*="col"],
.profile-verification-container > .row > [class*="col"],
.profile-wallet-info > .row > [class*="col"],
.my-tabs-content-container > .row > [class*="col"],
.profile-home-sections > .row > [class*="col"]{
  padding-left:10px;
  padding-right:10px;
}
.profile-settings-section-item > .row > [class*="col"]:first-child,
.profile-settings-section > .row > [class*="col"]:first-child,
.my-tabs-content-container > .row > [class*="col"]:first-child{ padding-left:0; }
.profile-settings-section-item > .row > [class*="col"]:last-child,
.profile-settings-section > .row > [class*="col"]:last-child,
.my-tabs-content-container > .row > [class*="col"]:last-child{ padding-right:0; }

/* строки-настройки: подписи не липнут к краю */
.profile-settings-section-item label,
.profile-settings-section-item small,
.profile-verification-container label,
.profile-wallet-info label{ display:inline-block; margin-bottom:8px; }
.profile-settings-section-item > label:last-child,
.profile-settings-section-item > small:last-child{ margin-bottom:0; display:block; }

/* ---------- 3. БЛОКИ ВЫПЛАТ И СВОДКИ ОБНОВЛЕНИЙ (чужие компоненты) ---------- */
.payout-card,
.payout-calc-result-item,
.payout-calc-field,
.watch-summary-item,
.watch-card,
.watch-list-item,
.payout-section{
  padding:18px 20px !important;
}
.payout-cards{ display:flex; flex-wrap:wrap; gap:16px !important; }
.payout-cards > *{ flex:1 1 220px; min-width:0; }
.payout-calc-result{ display:flex; flex-wrap:wrap; gap:16px !important; }
.watch-summary{ display:flex; flex-wrap:wrap; gap:16px !important; }
.payout-table-wrap{ overflow-x:auto; padding:0; }
.payout-table{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.payout-table th, .payout-table td{ padding:14px 16px !important; }
.payout-table th{ background:var(--surface-2) !important; color:var(--ink) !important; }
.payout-table td{ color:var(--ink-2) !important; border-bottom:1px solid var(--line-soft) !important; }
.payout-table tr:last-child td{ border-bottom:0 !important; }

/* ---------- 4. МОБИЛЬНАЯ ---------- */
@media (max-width:991px){
  .my-tabs-item > a{ padding:14px 12px; }
  .payout-card, .payout-calc-result-item, .payout-calc-field,
  .watch-summary-item, .watch-card, .watch-list-item, .payout-section{ padding:16px !important; }
  .payout-table th, .payout-table td{ padding:12px !important; }
}

/* ==========================================================================
   18. КОНТРАСТ ТЕКСТА НА САЙТЕ (16.09.2026) — по результатам сплошного аудита
   --------------------------------------------------------------------------
   Владелец: «везде проверьте, чтобы тексты видны были». Аудит —
   `_deploy/tradelot_tools/_contrast_audit.js` (WCAG 2.1: обычный текст ≥ 4,5:1,
   крупный ≥ 3:1). Прогоны site-guest / site-seller / site-buyer,
   отчёты и скриншоты — `_deploy/tradelot_screens/contrast_2026-09-16/`.

   Здесь ТОЛЬКО цвета, и все они — через токены темы (см. `:root` выше).
   Рядом с каждым правилом: что было, каким стал контраст.
   Сайт однотемный (тёмной темы у витрины нет), поэтому блок один.
   ========================================================================== */

/* 18.1 Ссылки в текстах и документах: было bootstrap-синее #0d6efd
   (4,06–4,23:1 к светлому фону) → фирменный --brand (≈6,4:1).
   Правим через переменную Bootstrap, поэтому под правило попадают все
   «обычные» ссылки, а кнопки и элементы с классом сохраняют свои цвета. */
:root{
  --bs-link-color: var(--brand, #6640f4);
  --bs-link-color-rgb: 102, 64, 244;
  --bs-link-hover-color: var(--brand-hover, #5533d8);
  --bs-link-hover-color-rgb: 85, 51, 216;
}

/* виджет категорий блога: цвет был задан жёстко (#0d6efd) */
.blog-widget-categories-or-subcategories a{ color: var(--brand, #6640f4); }

/* 18.2 Счётчик на АКТИВНОЙ вкладке: был белый текст на полупрозрачной фиолетовой
   подложке (при наложении на белое выходило #a28bf8) → 2,77:1.
   Делаем подложку сплошной фирменной → 8,1:1. */
.my-tabs-items-big .my-tabs-item.active > span,
.my-tabs-items-small .my-tabs-item.active > span,
.my-tabs-items-medium .my-tabs-item.active > span{
  background: var(--brand, #6640f4) !important;
  color: #fff !important;
}

/* 18.3 Подписи и подсказки в блоках аналитики (стили печатает наш компонент,
   поэтому нужен !important): было #8a8a8a на #f8f7fd / #f1ecfe → 2,99–3,24:1,
   стало через токен --muted → 4,7:1. */
.ana-kpi-name,
.ana-note,
.ana-chip-wait,
.ana-acc-hint,
.ana-service-desc,
.ana-service-hint,
.ana-queries-period,
.ad-analytics label,
.ana-service .ana-service-fields label{ color: var(--muted, #6c6883) !important; }

/* 18.4 Плашка «Цена ниже расчётной»: было #1c8a48 на #e8f7ee → 3,97:1 */
.ana-tag-income{ color: var(--success-ink, #0f7a4c) !important; }

/* 18.5 Старая (зачёркнутая) цена в тарифах: было чистым красным #ff0000 → 4,0:1 */
.profile-tariffs-list-item-price-old{ color: var(--danger, #b3352f) !important; }

/* 18.6 Дата и категория в сетке блога: было `color: gray` (#808080) → 3,71:1 */
.blog-grid-item-date,
.blog-grid-item-category{ color: var(--muted, #6c6883) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 7: ПОСЛЕДНИЙ ЗАЗОР В НАСТРОЙКАХ (16.09.2026)
   Вложенный блок настроек имеет собственный inline-стиль `padding:0 20px`,
   поэтому подписи прилипали к верхней/нижней рамке. Возвращаем отступы.
   ========================================================================== */
.profile-settings-section-item .profile-settings-section-item,
.profile-settings-section-item-organization .profile-settings-section-item,
.profile-settings-section .profile-settings-section-item{ padding:20px !important; }
.profile-settings-section-item .profile-settings-section-item > * + *{ margin-top:16px !important; }
@media (max-width:991px){
  .profile-settings-section-item .profile-settings-section-item,
  .profile-settings-section-item-organization .profile-settings-section-item{ padding:16px !important; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 8: ЗАЗОРЫ В БЛОКЕ «ДАННЫЕ В ЛОТАХ» НА ГЛАВНОЙ (16.09.2026)
   ========================================================================== */
.tl-about-data-row{ padding:16px 18px; }
.tl-about-data-cap{ margin-bottom:2px; }
.tl-about-data-val{ margin-top:4px; }
@media (max-width:991px){
  .tl-about-data-row{ padding:16px; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 9: ЖЁСТКИЕ ЦВЕТА → ТОКЕНЫ ТЕМЫ (16.09.2026)
   --------------------------------------------------------------------------
   Проверка контраста в имитированной тёмной теме (`shot_theme.js`) показала
   элементы с жёстко прописанными цветами (наследие старой темы и чужих компонентов):
   характеристики лота с цветом #333 и плашки аналитики со светлым фоном
   — в тёмной теме текст на них не читается. Здесь они переводятся на токены.
   ========================================================================== */

/* характеристики лота: значения и подписи — только токены */
.ad-card-content-item .ad-card-list-properties > *,
.ad-card-content-item .ad-card-list-properties > * *,
.ad-card-content-item .list-properties-item,
.ad-card-content-item .list-properties-item *{
  color:var(--ink-2) !important;
  background-color:transparent !important;
}
.ad-card-content-item .ad-card-list-properties > * > *:first-child,
.ad-card-content-item .list-properties-item > *:first-child,
.ad-card-content-item .params-property-name{ color:var(--muted) !important; }

/* прочие «жёсткие» классы старой темы внутри карточки лота */
.ad-card-content-item .ad-card-list-properties{ color:var(--ink-2); }
.ad-card-content-item a:not(.btn-custom):not(.btn-custom-mini){ color:var(--brand-hover); }

/* плашки аналитики (ana-tag, ana-chip и родственные) — фон и текст из токенов */
.ana-tag, .ana-chip, .ana-badge, .ana-ready-label{
  background:var(--surface-2) !important;
  color:var(--ink-2) !important;
  border:1px solid var(--line) !important;
}
.ana-tag-income, .ana-tag-ok, .ana-chip-ok, .ana-ready-ok{
  background:var(--success-tint) !important;
  color:var(--success-ink) !important;
  border-color:transparent !important;
}
.ana-tag-expense, .ana-tag-warn, .ana-chip-wait{
  background:var(--brand2-tint) !important;
  color:#8a3a12 !important;
  border-color:transparent !important;
}
.ana-ready-percent{ color:inherit !important; }

/* «Данные финансов указаны продавцом» и прочие подписи второго плана */
.tlc-note, .tlc-source, .tlc-card-hint, .tlc-card-label,
.ana-acc-hint, .ana-acc-done, .ana-note{ color:var(--muted) !important; }

/* графики (чужой компонент): подписи и линии — из токенов, а не #8a8a8a/#e3e3e3 */
.tlc-axis-text, .tlc-row-label, .tlc-legend-value{ fill:var(--muted) !important; color:var(--muted) !important; }
.tlc-period, .tlc-source{ color:var(--muted) !important; }
.tlc-title, .tlc-row-value{ color:var(--ink) !important; }
.tlc-grid-line{ stroke:var(--line-soft) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 10: ЗНАЧЕНИЯ KPI ГРАФИКОВ — ИЗ ТОКЕНОВ (16.09.2026)
   ========================================================================== */
.tlc-card-value{ color:var(--ink) !important; }
.tlc-card-value-accent{ color:var(--brand-active) !important; }
.tlc-card-value-warm{ color:var(--brand-2) !important; }
.tlc-card-value-muted{ color:var(--muted) !important; }
.tlc-legend-value, .tlc-swatch-accent, .tlc-fill-accent{ --tlc-accent:var(--brand); }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 11: ЧИТАЕМОСТЬ В ОБЕИХ ТЕМАХ (16.09.2026)
   --------------------------------------------------------------------------
   Проверка контраста в имитированной тёмной теме нашла наследие старой темы:
   текст с жёстким `#333`, подписи `small` серым, оранжевые кнопки с цветом текста
   из --ink (в тёмной теме он светлый → текст не читается на оранжевом).
   Здесь: цвет текста кабинета — из токенов, для плашек введены отдельные токены
   цвета текста «на фирменном фоне» (--on-brand / --on-brand-2), серые подписи — --muted.
   ========================================================================== */

:root{
  --on-brand:#ffffff;      /* текст на фиолетовом (--brand) */
  --on-brand-2:#22143a;    /* текст на оранжевом (--brand-2) — остаётся тёмным в любой теме */
}

/* текст кнопок «на фирменном фоне» — стабильный в обеих темах */
.button-color-scheme1, .button-color-scheme2, .button-color-scheme3, .button-color-scheme6,
.btn-custom.button-color-scheme1, .btn-custom-mini.button-color-scheme1,
.btn-custom.button-color-scheme2, .btn-custom-mini.button-color-scheme2,
.btn-custom.button-color-scheme3, .btn-custom-mini.button-color-scheme3{ color:var(--on-brand) !important; }
.button-color-scheme5, .btn-custom.button-color-scheme5, .btn-custom-mini.button-color-scheme5,
.btn-custom-big.button-color-scheme5{ color:var(--on-brand-2) !important; }
.button-color-scheme1 i, .button-color-scheme2 i, .button-color-scheme3 i,
.button-color-scheme5 i, .button-color-scheme6 i{ color:inherit !important; }

/* кабинет: текст из токенов (в теме были жёсткие #333 / black) */
.col-md-9{ color:var(--ink-2); }
.col-md-9 p, .col-md-9 div, .col-md-9 span, .col-md-9 li, .col-md-9 label,
.col-md-9 small, .col-md-9 strong, .col-md-9 td, .col-md-9 th{ color:var(--ink-2); }
.col-md-9 h1, .col-md-9 h2, .col-md-9 h3, .col-md-9 h4, .col-md-9 h5, .col-md-9 h6{ color:var(--ink); }
.col-md-9 h1 strong, .col-md-9 h2 strong, .col-md-9 h3 strong,
.col-md-9 h4 strong, .col-md-9 h5 strong{ color:inherit; }
.col-md-9 small, .col-md-9 .text-muted, .col-md-9 .payout-intro,
.col-md-9 [class*="-hint"], .col-md-9 [class*="-note"], .col-md-9 [class*="-desc"]{ color:var(--muted) !important; }
.col-md-9 a:not(.btn-custom):not(.btn-custom-mini):not(.btn-custom-big):not(.my-tabs-item){ color:var(--brand-hover); }
.col-md-9 a.btn-custom, .col-md-9 a.btn-custom-mini, .col-md-9 a.btn-custom-big{ color:var(--on-brand); }
.col-md-9 a.btn-custom.button-color-scheme5,
.col-md-9 a.btn-custom-mini.button-color-scheme5,
.col-md-9 a.btn-custom-big.button-color-scheme5{ color:var(--on-brand-2); }

/* карточка лота: то же самое для текста внутри карточек */
.ad-card-content, .ad-card-sidebar{ color:var(--ink-2); }
.ad-card-content .text-muted, .ad-card-content small,
.ad-card-sidebar .text-muted, .ad-card-sidebar small{ color:var(--muted) !important; }
.ad-card-content h1, .ad-card-content h2, .ad-card-content h3,
.ad-card-content h4, .ad-card-content h5, .ad-card-sidebar h1,
.ad-card-sidebar h2, .ad-card-sidebar h3, .ad-card-sidebar h4, .ad-card-sidebar h5{ color:var(--ink); }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 12: ФОНЫ «ЧИПОВ» ИЗ СТАРОЙ ТЕМЫ → ТОКЕНЫ (16.09.2026)
   --------------------------------------------------------------------------
   В старой теме много жёстких светлых фонов (#f7f8fa, #f4f8ff, #efeffe).
   Внутри карточек кабинета и карточки лота они мешали читаемости в тёмной теме:
   текст по токену светлый, а фон оставался почти белым. Убираем эти фоны у
   вложенных плашек (они и так лежат на карточке с фоном --surface) и переводим
   бейджи выплат на токены.
   ========================================================================== */
.profile-wallet-info span, .profile-wallet-info div,
.profile-settings-section-item > div, .profile-settings-section-item > span,
.profile-verification-container > div > span,
.my-tabs-content-container > div > span{ background-color:transparent !important; }

.payout-badge, .payout-badge *{
  background:var(--brand-tint) !important;
  color:var(--brand-hover) !important;
  border:1px solid var(--line) !important;
}
.payout-payout, .payout-commission, .payout-calc-note, .payout-hint-link{ color:var(--muted) !important; }
.payout-table-num{ color:var(--ink) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 13: ОСТАТКИ СВЕТЛЫХ ФОНОВ (16.09.2026)
   --------------------------------------------------------------------------
   Только элементы БЕЗ класса (их красила старая тема через теговые селекторы):
   у них убираем жёсткий светлый фон, текст остаётся на токенном фоне карточки.
   Элементы со своими классами не трогаем — у них фон может быть смысловым.
   Карточки выплат (чужой компонент) переводим на токены.
   ========================================================================== */
.col-md-9 span:not([class]), .col-md-9 div:not([class]), .col-md-9 p:not([class]),
.col-md-9 small:not([class]), .col-md-9 li:not([class]){ background-color:transparent !important; }

.payout-card, .payout-section, .payout-block, .payout-intro, .payout-hints,
.payout-charts, .payout-calc, .payout-calc-result, .payout-calc-row{ background-color:transparent !important; }
.payout-card-label, .payout-payout, .payout-commission, .payout-calc-note{ color:var(--muted) !important; }
.payout-card-value, .payout-table-num, .payout-calc-result-item b{ color:var(--ink) !important; }
.payout-card-value-accent{ color:var(--brand-active) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 14: ФИНАЛЬНЫЕ МЕЛОЧИ ПРО ТЕМЫ (16.09.2026)
   ========================================================================== */
:root{ --warm-ink:#a8431a; }   /* тёплый текст (оранжевые значения): читается на светлом фоне */

.tlc-card-value-warm{ color:var(--warm-ink) !important; }
.ana-tag-expense, .ana-tag-warn, .ana-chip-wait{ color:var(--warm-ink) !important; }

/* элементы с пустым class="" (их красила старая тема теговыми селекторами) */
.col-md-9 span[class=""], .col-md-9 div[class=""], .col-md-9 p[class=""],
.col-md-9 small[class=""], .col-md-9 li[class=""], .col-md-9 label[class=""],
.col-md-9 a[class=""]{ background-color:transparent !important; }

/* подписи полей кабинета и выплат — приглушённый текст из токена */
.col-md-9 label, .col-md-9 .payout-calc-field label, .col-md-9 .ana-acc-field label{ color:var(--muted) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 15: ТЕГИ ГРАФИКОВ И КНОПКИ-СПАНЫ (16.09.2026)
   ========================================================================== */
/* теги графиков (чужой компонент) — фон и текст из токенов */
.tlc-tag{ background:var(--surface-2) !important; color:var(--ink-2) !important; border:1px solid var(--line) !important; }
.tlc-tag-warm, .tlc-tag-expense{ background:var(--brand2-tint) !important; color:var(--warm-ink) !important; border-color:transparent !important; }
.tlc-tag-accent, .tlc-tag-income{ background:var(--success-tint) !important; color:var(--success-ink) !important; border-color:transparent !important; }

/* плашки ожидания: цвет текста — тёплый токен (читается на своём фоне в обеих темах) */
.ana-chip-wait{ background:var(--brand2-tint) !important; color:var(--warm-ink) !important; }

/* «кнопки», сделанные из span: у них не было фона — даём фирменный, иначе белый
   текст оказывался на белом фоне */
span.btn-custom, span.btn-custom-mini, span.btn-custom-big{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
span.button-color-scheme1, span.button-color-scheme2, span.button-color-scheme3, span.button-color-scheme6{
  background:var(--brand); color:var(--on-brand) !important;
}
span.button-color-scheme5{ background:var(--brand-2); color:var(--on-brand-2) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 16: КНОПКИ-СПАНЫ И ПЛАШКИ ОЖИДАНИЯ (16.09.2026)
   --------------------------------------------------------------------------
   1) белый текст «на фирменном фоне» оставляем только настоящим кнопкам и ссылкам;
      span с классами кнопок получает фирменный фон (иначе был белый текст на белом);
   2) плашки ожидания («Нужен аккаунт») делаем нейтральными на токенах — читаются
      в любой теме, тёплый смысловой акцент — полосой слева.
   ========================================================================== */
a.button-color-scheme1, a.button-color-scheme2, a.button-color-scheme3, a.button-color-scheme6,
button.button-color-scheme1, button.button-color-scheme2, button.button-color-scheme3, button.button-color-scheme6,
input.button-color-scheme1, input.button-color-scheme2{ color:var(--on-brand) !important; }

span.btn-custom, span.btn-custom-mini, span.btn-custom-big{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
span.button-color-scheme1, span.button-color-scheme2, span.button-color-scheme3, span.button-color-scheme6{
  background:var(--brand) !important; color:var(--on-brand) !important;
}
span.button-color-scheme5{ background:var(--brand-2) !important; color:var(--on-brand-2) !important; }

.ana-chip, .ana-chip-wait, .ana-tag, .ana-badge{
  background:var(--surface-2) !important;
  color:var(--ink-2) !important;
  border:1px solid var(--line) !important;
}
.ana-chip-wait{ border-left:3px solid var(--brand-2) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 17: ПЛАШКА ОЖИДАНИЯ В КАРТОЧКЕ ЛОТА (16.09.2026)
   Специфичность выше, чем у правил компонента аналитики, — цвет из токенов.
   ========================================================================== */
.ad-card-content-item .ana-chip,
.ad-card-content-item .ana-chip-wait,
.ad-card-content-item .ana-acc .ana-chip,
.ad-card-content .ana-chip-wait{
  background:var(--surface-2) !important;
  color:var(--ink-2) !important;
  border:1px solid var(--line) !important;
  border-left:3px solid var(--brand-2) !important;
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 18: ЦВЕТ ТЕКСТА ПО СХЕМАМ КНОПОК (16.09.2026)
   --------------------------------------------------------------------------
   ⚠️ Важная правка: в этой теме схемы кнопок означают разное:
     scheme1 — фиолетовая заливка, текст белый;
     scheme2 — ВТОРИЧНАЯ (светлая заливка + фиолетовый текст + рамка);
     scheme3 — нейтральная (заливка --surface-2 + текст --ink-2);
     scheme5 — оранжевая заливка, текст тёмный;
     scheme6 — «опасная» (красная заливка, текст белый).
   Ранее общий слой покрасил текст scheme2 и scheme3 в белый — на светлой заливке
   текст становился невидимым (это и было видно на кнопке «Разместить лот»).
   Здесь цвет текста задан ПО КАЖДОЙ СХЕМЕ, с учётом её собственной заливки.
   ========================================================================== */
.col-md-9 a.btn-custom.button-color-scheme1, .col-md-9 a.btn-custom-mini.button-color-scheme1,
.col-md-9 button.btn-custom.button-color-scheme1, .col-md-9 button.btn-custom-mini.button-color-scheme1,
a.btn-custom.button-color-scheme1, a.btn-custom-mini.button-color-scheme1, button.button-color-scheme1,
span.btn-custom.button-color-scheme1, span.btn-custom-mini.button-color-scheme1,
.col-md-9 span.btn-custom.button-color-scheme1, .col-md-9 span.btn-custom-mini.button-color-scheme1{
  color:var(--on-brand) !important;
  background-color:var(--brand) !important;
  border-color:var(--brand) !important;
}

.col-md-9 a.btn-custom.button-color-scheme2, .col-md-9 a.btn-custom-mini.button-color-scheme2,
.col-md-9 button.btn-custom.button-color-scheme2, .col-md-9 button.btn-custom-mini.button-color-scheme2,
a.btn-custom.button-color-scheme2, a.btn-custom-mini.button-color-scheme2, button.button-color-scheme2,
span.btn-custom.button-color-scheme2, span.btn-custom-mini.button-color-scheme2,
.col-md-9 span.btn-custom.button-color-scheme2, .col-md-9 span.btn-custom-mini.button-color-scheme2{
  color:var(--brand-hover) !important;
  background-color:var(--surface) !important;
  border:1px solid var(--brand-tint-2) !important;
}

.col-md-9 a.btn-custom.button-color-scheme3, .col-md-9 a.btn-custom-mini.button-color-scheme3,
.col-md-9 button.btn-custom.button-color-scheme3, .col-md-9 button.btn-custom-mini.button-color-scheme3,
a.btn-custom.button-color-scheme3, a.btn-custom-mini.button-color-scheme3, button.button-color-scheme3,
span.btn-custom.button-color-scheme3, span.btn-custom-mini.button-color-scheme3,
.col-md-9 span.btn-custom.button-color-scheme3, .col-md-9 span.btn-custom-mini.button-color-scheme3{
  color:var(--ink-2) !important;
  background-color:var(--surface-2) !important;
  border:1px solid var(--line) !important;
}

.col-md-9 a.btn-custom.button-color-scheme5, .col-md-9 a.btn-custom-mini.button-color-scheme5,
.col-md-9 button.btn-custom.button-color-scheme5, .col-md-9 button.btn-custom-mini.button-color-scheme5,
a.btn-custom.button-color-scheme5, a.btn-custom-mini.button-color-scheme5, button.button-color-scheme5,
span.btn-custom.button-color-scheme5, span.btn-custom-mini.button-color-scheme5,
.col-md-9 span.btn-custom.button-color-scheme5, .col-md-9 span.btn-custom-mini.button-color-scheme5{
  color:var(--on-brand-2) !important;
  background-color:var(--brand-2) !important;
  border-color:var(--brand-2) !important;
}

.col-md-9 a.btn-custom.button-color-scheme6, .col-md-9 a.btn-custom-mini.button-color-scheme6,
.col-md-9 button.btn-custom.button-color-scheme6, .col-md-9 button.btn-custom-mini.button-color-scheme6,
a.btn-custom.button-color-scheme6, a.btn-custom-mini.button-color-scheme6, button.button-color-scheme6,
span.btn-custom.button-color-scheme6, span.btn-custom-mini.button-color-scheme6,
.col-md-9 span.btn-custom.button-color-scheme6, .col-md-9 span.btn-custom-mini.button-color-scheme6{
  color:var(--on-brand) !important;
  background-color:var(--danger) !important;
  border-color:var(--danger) !important;
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 19: БЛОК КОШЕЛЬКА — СВЕТЛЫЕ ФОНЫ ИЗ СТАРОЙ ТЕМЫ (16.09.2026)
   В блоке «Кошелёк» оставались жёсткие светлые фоны у элементов без классов —
   в тёмной теме текст на них не читался. Фон убираем (текст остаётся на токенном
   фоне карточки), смысловые цвета текста заданы токенами в части 11.
   ========================================================================== */
.profile-wallet-info *{ background-color:transparent !important; }
.profile-wallet-info span, .profile-wallet-info div, .profile-wallet-info p{ color:var(--ink-2); }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 20: СПОСОБЫ ОПЛАТЫ (жёсткий светлый фон) (16.09.2026)
   `.option-payment-item` из старой темы имел фон #f4f8ff — в тёмной теме текст
   на нём не читался. Переводим на токены, выбранный способ — фирменная подсветка.
   ========================================================================== */
.option-payment-item, .option-payment-item-name, .option-payment-item-changed, .option-payment-item *{
  color:var(--ink-2) !important;
}
.option-payment-item{
  background-color:var(--surface-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  padding:16px !important;
}
.option-payment-item.active, .option-payment-item.is-active,
.option-payment-item-changed, .option-payment-item.checked{
  background-color:var(--brand-tint) !important;
  border-color:var(--brand) !important;
}
.option-payment-item + .option-payment-item{ margin-top:12px; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 21: СТРАНИЦА «ТАРИФЫ» — ЦВЕТНЫЕ КАРТОЧКИ (16.09.2026)
   --------------------------------------------------------------------------
   Правка владельца: «оформить тарифы, а то не красиво и лысо». Было: белые карточки
   без акцентов, серые галочки, «Премиум» ничем не выделен.
   Стало (всё на токенах темы):
     • у каждой карточки свой характер: цветная верхняя полоса + подложка + цветные галочки;
       Пробный — нейтрально-фиолетовый, Премиум — фирменный (--brand), Максимум — графитовый
       с оранжевым акцентом, остальные — спокойный фиолетовый;
     • «Премиум» — популярный: рамка 2 px, бейдж «Популярный», подъём и большая тень;
     • кнопка «Подключить» в каждой карточке (в выделенной — заливка, в остальных — контурная);
     • пункты, которых нет в младшем тарифе, подсвечены цветом карточки (класс .is-extra);
     • карточки одной высоты, зазор 24 px, внутри 24 px, на телефоне — один столбец и 16 px;
     • блок-заголовок страницы с градиентом, чтобы страница не начиналась с пустоты.
   Механика подключения тарифа не меняется (клик по карточке → input[name=tariff_id],
   кнопка .initOptionsPaymentServiceTariff → payment-load-option).
   См. TRADELOT_PROJECT_STATE.md §12.50 (часть 8).
   ========================================================================== */

/* ---------- 1. ШАПКА СТРАНИЦЫ ---------- */
.tl-page-static .promo-business-header-container-title h1{
  font-size:40px; line-height:1.15; letter-spacing:-.02em; margin:0 0 12px;
}
.tl-page-static .promo-business-header-container-title h3{
  font-size:18px; line-height:1.5; font-weight:600; color:var(--ink-2); margin:0 0 20px;
}
.tl-page-static .promo-business-header-container-list{ display:grid; gap:12px; margin-top:8px; }
.tl-page-static .promo-business-header-container-list > div{
  display:flex; align-items:flex-start; gap:10px;
  font-size:15px; color:var(--ink-2); line-height:1.5;
}
.tl-page-static .promo-business-header-container-list i{
  color:var(--brand); font-size:19px; line-height:1.3;
}
.tl-page-static > .row:first-child{
  background:linear-gradient(135deg, var(--brand-tint) 0%, var(--surface) 62%);
  border:1px solid var(--line-soft);
  border-radius:var(--r-xl);
  padding:32px;
  margin-top:24px;
}
.tl-page-static .promo-business-section-container-title h2{ font-size:26px; margin:0 0 10px; }
.tl-page-static .promo-business-section-container-title p{ margin:0; color:var(--ink-2); }
.tl-page-static > h1.font-bold{ font-size:30px; margin:48px 0 24px; }
.tl-page-static > h1.font-bold + section{ margin-top:0; }

/* ---------- 2. СЕТКА КАРТОЧЕК ТАРИФОВ ---------- */
.profile-tariffs-form{ margin-top:0; }
.profile-tariffs-list.profile-tariffs-swiper{ padding:12px 0 8px; margin-top:0 !important; }
.profile-tariffs-list.profile-tariffs-swiper .swiper-wrapper{
  display:flex; align-items:stretch; gap:24px;
}
.profile-tariffs-list.profile-tariffs-swiper .swiper-slide{
  height:auto; display:flex;
  width:calc((100% - 72px) / 4) !important;
  margin-right:24px !important;
}
.profile-tariffs-swiper-prev, .profile-tariffs-swiper-next{ display:none; }

/* ---------- 3. КАРТОЧКА ТАРИФА ---------- */
.tl-tariff-card{
  position:relative;
  display:flex; flex-direction:column;
  width:100%;
  padding:24px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-top:4px solid var(--brand-tint-2);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.tl-tariff-card:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); }
.tl-tariff-card > * + *{ margin-top:16px; }
.tl-tariff-card .profile-tariffs-list-item-content{ display:flex; flex-direction:column; gap:12px; }
.tl-tariff-card .profile-tariffs-list-item-content > * + *{ margin-top:0; }
.tl-tariff-card .profile-tariffs-action-payment{ margin-top:auto; padding-top:20px; display:flex; }
.tl-tariff-card .profile-tariffs-action-payment .btn-custom-big{ width:100%; justify-content:center; }

/* цвет карточки по порядку: 1 — нейтральный, 2 — фирменный, 3 — графит, 4+ — спокойный */
.tl-tariff-card[data-index="1"]{ --tc:var(--brand-tint-2); --tc-soft:var(--surface-2); --tc-ink:var(--brand-active); }
.tl-tariff-card[data-index="2"]{ --tc:var(--brand);       --tc-soft:var(--brand-tint); --tc-ink:var(--brand); }
.tl-tariff-card[data-index="3"]{ --tc:var(--brand-2);     --tc-soft:var(--brand2-tint); --tc-ink:var(--warm-ink); }
.tl-tariff-card[data-index="4"]{ --tc:var(--line);        --tc-soft:var(--surface-2); --tc-ink:var(--muted); }
.tl-tariff-card[data-index="5"],
.tl-tariff-card[data-index="6"]{ --tc:var(--brand-tint-2); --tc-soft:var(--surface-2); --tc-ink:var(--brand-hover); }

.tl-tariff-card{ border-top-color:var(--tc); }

/* название и цена */
.tl-tariff-card .profile-tariffs-list-item-content h5{
  margin:0; font-size:20px; font-weight:700; color:var(--ink); line-height:1.25;
}
.tl-tariff-card .profile-tariffs-list-item-prices{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  padding:14px 16px;
  background:var(--tc-soft);
  border-radius:var(--r-md);
}
.tl-tariff-card .profile-tariffs-list-item-price-now{
  font-size:30px; font-weight:700; line-height:1.1; color:var(--tc-ink); font-variant-numeric:tabular-nums;
}
.tl-tariff-card .profile-tariffs-list-item-price-old{
  font-size:15px; color:var(--muted); text-decoration:line-through;
}
.tl-tariff-card .profile-tariffs-list-item-prices > span:not([class]){
  font-size:13.5px; color:var(--muted);
}
.tl-tariff-card .profile-tariffs-list-item-content > p{
  margin:0; font-size:14px; line-height:1.6; color:var(--muted);
}

/* список возможностей: цветные галочки + пояснения */
.tl-tariff-card .profile-tariffs-list-items{ display:grid; gap:10px; }
.tl-tariff-card .profile-tariffs-list-items-content{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; line-height:1.5; color:var(--ink-2);
}
.tl-tariff-card .profile-tariffs-list-item-icon{
  flex:0 0 auto; font-size:17px; line-height:1.4; color:var(--muted);
}
.tl-tariff-card .profile-tariffs-list-item-name{ font-weight:400; }
.tl-tariff-card .profile-tariffs-list-item-text{
  margin-top:6px; font-size:12.5px; line-height:1.5; color:var(--muted);
}

/* то, чего нет в младшем тарифе, — акцент цвета карточки */
.tl-tariff-card .profile-tariffs-list-items-content.is-extra{ color:var(--ink); font-weight:600; }
.tl-tariff-card .profile-tariffs-list-items-content.is-extra .profile-tariffs-list-item-icon{
  color:var(--tc-ink);
}
.tl-tariff-card .profile-tariffs-list-items-content.is-extra .profile-tariffs-list-item-text{ font-weight:400; }

/* бейдж «Популярный» */
.tl-tariff-card .tl-tariff-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  padding:6px 16px;
  background:var(--brand); color:var(--on-brand);
  border-radius:var(--r-pill);
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
  box-shadow:var(--sh-accent);
  white-space:nowrap;
}

/* ---------- 4. «ПОПУЛЯРНЫЙ» ТАРИФ ВЫДЕЛЕН ---------- */
.tl-tariff-card[data-recommended]{
  border-width:2px;
  border-color:var(--brand);
  border-top-width:6px;
  box-shadow:var(--sh-2);
  padding:28px 24px 24px;
  margin-top:-12px;
  margin-bottom:0;
  background:linear-gradient(180deg, var(--brand-tint) 0%, var(--surface) 42%);
}
.tl-tariff-card[data-recommended]:hover{ box-shadow:var(--sh-3, var(--sh-2)); transform:translateY(-4px); }
.tl-tariff-card[data-recommended] .profile-tariffs-list-item-price-now{ font-size:34px; }
.tl-tariff-card[data-recommended] .profile-tariffs-list-item-content h5{ font-size:22px; }
.tl-tariff-card[data-recommended] .profile-tariffs-action-payment .btn-custom-big{
  background:var(--brand) !important; color:var(--on-brand) !important; border-color:var(--brand) !important;
  box-shadow:var(--sh-accent);
}

/* контурная кнопка в остальных карточках */
.tl-tariff-card:not([data-recommended]) .profile-tariffs-action-payment .btn-custom-big{
  background:var(--surface) !important;
  color:var(--brand-hover) !important;
  border:2px solid var(--brand-tint-2) !important;
}
.tl-tariff-card:not([data-recommended]) .profile-tariffs-action-payment .btn-custom-big:hover{
  background:var(--brand-tint) !important; border-color:var(--brand) !important;
}

/* уже подключённый тариф */
.tl-tariff-card.added{ border-color:var(--success-ink); }
.tl-tariff-card.added .tl-tariff-badge{ background:var(--success-ink); }

/* выбранная карточка (клик по ней проставляет tariff_id) */
.tl-tariff-card.active{ box-shadow:var(--tl-focus); }

/* «Подключить» в конце: общая кнопка формы больше не нужна — она есть в каждой карточке */
.profile-tariffs-form > .mt30.text-center{ display:none; }

/* ---------- 5. ПЛАНШЕТ И ТЕЛЕФОН ---------- */
@media (max-width:1199px){
  .profile-tariffs-list.profile-tariffs-swiper .swiper-slide{ width:calc((100% - 48px) / 3) !important; }
}
@media (max-width:991px){
  .tl-page-static > .row:first-child{ padding:24px; }
  .tl-page-static .promo-business-header-container-title h1{ font-size:30px; }
  .tl-page-static > h1.font-bold{ font-size:24px; margin:32px 0 20px; }
  .profile-tariffs-list.profile-tariffs-swiper .swiper-slide{ width:calc((100% - 48px) / 2) !important; }
  .tl-tariff-card{ padding:20px; }
  .tl-tariff-card[data-recommended]{ margin-top:-8px; padding:24px 20px 20px; }
  .profit-tariffs, .profile-tariffs-list{ padding-top:8px; }
}
@media (max-width:767px){
  .profile-tariffs-list.profile-tariffs-swiper .swiper-wrapper{ gap:16px; }
  .profile-tariffs-list.profile-tariffs-swiper .swiper-slide{ width:86% !important; margin-right:16px !important; }
  .profile-tariffs-swiper-prev, .profile-tariffs-swiper-next{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:var(--r-pill);
    background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
    box-shadow:var(--sh-1);
  }
  .tl-tariff-card[data-recommended]{ margin-top:0; }
  .tl-tariff-card .profile-tariffs-list-item-price-now,
  .tl-tariff-card[data-recommended] .profile-tariffs-list-item-price-now{ font-size:26px; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 22: ЦЕНЫ В КАРТОЧКАХ ТАРИФОВ (16.09.2026)
   В старой теме цена была жёстко #6640f4, а зачёркнутая — #b3352f: на тёмной
   подложке не читалось. Крупная цена — цветом текста темы (--ink), старая цена —
   приглушённая (--muted); цвет карточке дают подложка, полоса и галочки.
   ========================================================================== */
.tl-tariff-card .profile-tariffs-list-item-price-now{ color:var(--ink) !important; }
.tl-tariff-card .profile-tariffs-list-item-price-old{ color:var(--muted) !important; }
.tl-tariff-card .profile-tariffs-list-item-prices > span:not([class]){ color:var(--muted) !important; }
.tl-tariff-card .profile-tariffs-list-item-content h5{ color:var(--ink) !important; }
.tl-tariff-card .profile-tariffs-list-item-text{ color:var(--muted) !important; }
.tl-tariff-card .profile-tariffs-list-items-content{ color:var(--ink-2) !important; }
.tl-tariff-card .profile-tariffs-list-items-content.is-extra{ color:var(--ink) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 23: РАСКЛАДКА КАРТОЧЕК ТАРИФОВ НА ДЕСКТОПЕ (16.09.2026)
   --------------------------------------------------------------------------
   Swiper задаёт слайдам инлайновую ширину и трансформации, поэтому в строке
   показывались не все тарифы (четвёртый уходил за край). На десктопе включаем
   обычную сетку (4 / 3 / 2 карточки), на телефоне оставляем слайдер со стрелками.
   ========================================================================== */
@media (min-width:992px){
  .profile-tariffs-list.profile-tariffs-swiper{ overflow:visible !important; padding:24px 0 8px; }
  .profile-tariffs-list.profile-tariffs-swiper .swiper-wrapper{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:24px !important;
    transform:none !important;
    width:auto !important;
    transition:none !important;
  }
  .profile-tariffs-list.profile-tariffs-swiper .swiper-slide{
    width:auto !important;
    margin-right:0 !important;
    height:auto;
    flex:1 1 auto;
  }
}
@media (min-width:992px) and (max-width:1199px){
  .profile-tariffs-list.profile-tariffs-swiper .swiper-wrapper{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* ============================================================================
   §12.71 ПОНЯТНАЯ ОШИБКА В ЧАТЕ ЛОТА (жалоба владельца «нажал и ничего»)
   Раньше при неудаче блок молчал: сообщение не появлялось и объяснения не было.
   ============================================================================ */
.tl-chat-error{
  display:block;
  margin:0 16px 16px;
  padding:12px 16px;
  border:1px solid var(--danger);
  border-left-width:4px;
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--danger);
  font-size:13.5px; line-height:1.5;
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 24: КАБИНЕТЫ ОФОРМЛЕНЫ «ПО-ВЗРОСЛОМУ» (16.09.2026)
   --------------------------------------------------------------------------
   Приоритет владельца: «кабинеты красиво оформите». Единый шаблон для всех
   страниц кабинета:
     • шапка страницы — карточка с фирменной подложкой, значком раздела, заголовком
       и одной строкой пояснения (.tl-cabhead);
     • каждый раздел — отдельная карточка (фон/рамка, внутри 24 px, между 24 px);
     • таблицы: фон шапки, разделители строк, отступы ячеек 12–16 px, на телефоне
       локальная прокрутка внутри карточки (страница по горизонтали не едет);
     • счётчики и статусы — бейджами на токенах; пустые состояния — карточкой с иконкой,
       текстом и кнопкой действия;
     • кнопки/поля/ссылки — единые состояния; цвета, рамки и тени только из токенов.
   Блоки чужих компонентов (ana-*, tlc-*, payout-*, watch-*) не переписываются —
   им из этого слоя возвращаются отступы и токенные цвета вместо жёстких.
   См. TRADELOT_PROJECT_STATE.md §12.50 (часть 9).
   ========================================================================== */

/* ---------- 1. ШАПКА СТРАНИЦЫ КАБИНЕТА ---------- */
.tl-cabhead{
  display:flex; align-items:flex-start; gap:20px;
  padding:24px;
  margin-bottom:24px;
  background:linear-gradient(135deg, var(--brand-tint) 0%, var(--surface) 78%);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.tl-cabhead-icon{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  border-radius:var(--r-md);
  background:var(--brand);
  color:var(--on-brand);
  box-shadow:var(--sh-accent);
}
.tl-cabhead-icon i{ font-size:28px; }
.tl-cabhead-text{ min-width:0; }
.tl-cabhead .title-h1-adaptive{
  margin:0 0 8px !important;
  font-size:28px; line-height:1.2; font-weight:700; color:var(--ink);
}
.tl-cabhead-desc{
  margin:0 !important;
  max-width:720px;
  font-size:15px; line-height:1.55; color:var(--ink-2) !important;
}
/* если шапки на странице нет — прежний заголовок тоже оформляем */
.col-md-9 > h1.title-h1-adaptive:not(.tl-cabhead .title-h1-adaptive){
  padding:20px 24px;
  margin-bottom:24px !important;
  background:var(--brand-tint);
  border-radius:var(--r-lg);
  font-size:28px;
}

/* ---------- 2. РАЗДЕЛЫ КАБИНЕТА — КАРТОЧКИ ---------- */
.col-md-9 > .my-tabs-content,
.col-md-9 > .my-tabs-content-container,
.col-md-9 > .profile-settings-section,
.col-md-9 > .profile-verification-container,
.col-md-9 > .profile-wallet-info,
.col-md-9 > .profile-tariffs-list,
.col-md-9 > .profile-home-sections,
.col-md-9 > .ad-analytics,
.col-md-9 > .ana-acc,
.col-md-9 > .payout-block,
.col-md-9 > .watch-block{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:24px;
  margin-bottom:24px;
}
.col-md-9 > .my-tabs-content > * + *,
.col-md-9 > .my-tabs-content-container > * + *,
.col-md-9 > .ad-analytics > * + *,
.col-md-9 > .ana-acc > * + *{ margin-top:16px; }
.col-md-9 > *:last-child{ margin-bottom:0; }

/* вложенные блоки внутри карточек — со своей подложкой и отступами */
.col-md-9 .ana-acc-open,
.col-md-9 .ana-acc-item,
.col-md-9 .ana-service,
.col-md-9 .ana-field,
.col-md-9 .ana-notice,
.col-md-9 .ana-note,
.col-md-9 .payout-card,
.col-md-9 .payout-calc-result-item,
.col-md-9 .watch-summary-item{
  background:var(--surface-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  padding:16px 18px !important;
  color:var(--ink-2) !important;
}
.col-md-9 .ana-kpi,
.ad-analytics .ana-kpi{
  background:var(--surface-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  padding:14px 16px !important;
  min-width:150px;
}
.col-md-9 .ana-kpi-accent,
.ad-analytics .ana-kpi-accent{ background:var(--brand-tint) !important; }
.col-md-9 .ana-kpi-name,
.ad-analytics .ana-kpi-name{ color:var(--muted) !important; font-size:12.5px !important; }
.col-md-9 .ana-kpi-value,
.ad-analytics .ana-kpi-value{ color:var(--ink) !important; }
.col-md-9 .ana-kpi-accent .ana-kpi-value,
.ad-analytics .ana-kpi-accent .ana-kpi-value{ color:var(--brand-hover) !important; }
.col-md-9 .ana-kpi-good .ana-kpi-value,
.ad-analytics .ana-kpi-good .ana-kpi-value{ color:var(--success-ink) !important; }
.col-md-9 .ana-kpi-bad .ana-kpi-value,
.ad-analytics .ana-kpi-bad .ana-kpi-value{ color:var(--danger) !important; }

/* ---------- 3. ЗАГОЛОВКИ РАЗДЕЛОВ ВНУТРИ КАБИНЕТА ---------- */
.col-md-9 .ad-card-subtitle,
.col-md-9 > .my-tabs-content h2,
.col-md-9 > .my-tabs-content h3,
.col-md-9 > .my-tabs-content h4,
.col-md-9 > .ad-analytics h2,
.col-md-9 > .ad-analytics h3,
.col-md-9 > .ad-analytics h4{
  position:relative;
  margin:0 0 16px !important;
  padding-left:14px;
  font-size:18px; font-weight:700; color:var(--ink);
  line-height:1.35;
}
.col-md-9 .ad-card-subtitle::before,
.col-md-9 > .my-tabs-content h2::before,
.col-md-9 > .my-tabs-content h3::before,
.col-md-9 > .my-tabs-content h4::before,
.col-md-9 > .ad-analytics h2::before,
.col-md-9 > .ad-analytics h3::before,
.col-md-9 > .ad-analytics h4::before{
  content:""; position:absolute; left:0; top:.22em;
  width:4px; height:1em;
  border-radius:var(--r-pill);
  background:var(--brand);
}
/* вложенные подзаголовки не дублируют полосу */
.col-md-9 .ana-acc .ad-card-subtitle::before,
.col-md-9 .ad-analytics .ad-card-subtitle::before{ display:none; }
.col-md-9 .ana-acc .ad-card-subtitle,
.col-md-9 .ad-analytics .ad-card-subtitle{ padding-left:0; font-size:17px; }

/* ---------- 4. ТАБЛИЦЫ КАБИНЕТА ---------- */
.col-md-9 table:not(.tlc-table){
  width:100%;
  border-collapse:separate; border-spacing:0;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  overflow:hidden;
  font-size:14.5px;
}
.col-md-9 table:not(.tlc-table) th{
  background:var(--surface-2);
  color:var(--ink);
  font-weight:600;
  text-align:left;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.col-md-9 table:not(.tlc-table) td{
  padding:14px 16px;
  color:var(--ink-2);
  border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
}
.col-md-9 table:not(.tlc-table) tbody tr:nth-child(even) td{ background:var(--surface-2); }
.col-md-9 table:not(.tlc-table) tbody tr:last-child td{ border-bottom:0; }
.col-md-9 table:not(.tlc-table) tbody tr:hover td{ background:var(--brand-tint); }
.col-md-9 .ana-table th, .col-md-9 .ana-table td{ padding:13px 16px !important; border-color:var(--line-soft) !important; }
.col-md-9 .ana-table th{ background:var(--surface-2) !important; color:var(--ink) !important; }
.col-md-9 .ana-table td{ color:var(--ink-2) !important; }
.ad-analytics .ana-table th, .ad-analytics .ana-table td{ padding:13px 16px !important; border-color:var(--line-soft) !important; }
.ad-analytics .ana-table th{ background:var(--surface-2) !important; color:var(--ink) !important; }
.ad-analytics .ana-table td{ color:var(--ink-2) !important; }

/* ---------- 5. БЕЙДЖИ И СТАТУСЫ ---------- */
.col-md-9 .ana-chip,
.ad-analytics .ana-chip,
.col-md-9 .ana-tag,
.ad-analytics .ana-tag,
.col-md-9 .status-label-color-success,
.col-md-9 .status-label-color-warning,
.col-md-9 .status-label-color-danger{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px !important;
  border-radius:var(--r-pill) !important;
  font-size:12.5px; font-weight:600; line-height:1.5;
  background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--line);
}
.col-md-9 .ana-chip-ok, .ad-analytics .ana-chip-ok,
.col-md-9 .ana-tag-income, .ad-analytics .ana-tag-income,
.col-md-9 .status-label-color-success{ background:var(--success-tint) !important; color:var(--success-ink) !important; border-color:transparent !important; }
.col-md-9 .ana-chip-wait, .ad-analytics .ana-chip-wait,
.col-md-9 .status-label-color-warning{ background:var(--brand2-tint) !important; color:var(--warm-ink) !important; border-color:transparent !important; }
.col-md-9 .ana-tag-expense, .ad-analytics .ana-tag-expense,
.col-md-9 .status-label-color-danger{ background:var(--danger-tint, var(--surface-2)) !important; color:var(--danger) !important; border-color:transparent !important; }
.col-md-9 .ana-chip-off{ background:var(--surface-2) !important; color:var(--muted) !important; }

/* ---------- 6. ПУСТЫЕ СОСТОЯНИЯ, ОШИБКИ, ЗАГРУЗКА ---------- */
.col-md-9 .not-found-title-container{
  padding:40px 24px;
  background:var(--surface-2);
  border:1px dashed var(--line);
  border-radius:var(--r-lg);
}
.col-md-9 .not-found-title-container-image{ font-size:40px; }
.col-md-9 .not-found-title-container p{ color:var(--ink-2); font-size:15px; }
.col-md-9 .ana-empty,
.col-md-9 .empty-state,
.col-md-9 .ana-notice{
  padding:20px;
  background:var(--surface-2) !important;
  border:1px dashed var(--line) !important;
  border-radius:var(--r-md) !important;
  color:var(--ink-2) !important;
  font-size:14.5px; line-height:1.6;
}

/* ---------- 7. ССЫЛКИ, ПОЛЯ, КНОПКИ — ЕДИНЫЕ СОСТОЯНИЯ ---------- */
.col-md-9 a:not(.btn-custom):not(.btn-custom-mini):not(.btn-custom-big):not(.my-tabs-item){ color:var(--brand-hover); }
.col-md-9 a:not(.btn-custom):not(.btn-custom-mini):not(.btn-custom-big):hover{ color:var(--brand-active); }
.col-md-9 input[type=text], .col-md-9 input[type=email], .col-md-9 input[type=number],
.col-md-9 input[type=tel], .col-md-9 input[type=password], .col-md-9 select, .col-md-9 textarea{
  min-height:46px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--ink);
  font-size:15px;
  padding:10px 14px;
}
.col-md-9 input:focus, .col-md-9 select:focus, .col-md-9 textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:var(--tl-focus);
}
.col-md-9 input:disabled, .col-md-9 select:disabled, .col-md-9 textarea:disabled{
  background:var(--surface-2); color:var(--muted); cursor:not-allowed;
}

/* ---------- 8. ПЛАНШЕТ И ТЕЛЕФОН ---------- */
@media (max-width:991px){
  .tl-cabhead{ padding:20px; gap:16px; margin-bottom:20px; }
  .tl-cabhead-icon{ width:48px; height:48px; }
  .tl-cabhead-icon i{ font-size:24px; }
  .tl-cabhead .title-h1-adaptive{ font-size:23px !important; }
  .col-md-9 > .my-tabs-content,
  .col-md-9 > .my-tabs-content-container,
  .col-md-9 > .profile-settings-section,
  .col-md-9 > .profile-verification-container,
  .col-md-9 > .profile-wallet-info,
  .col-md-9 > .ad-analytics,
  .col-md-9 > .ana-acc,
  .col-md-9 > .payout-block{ padding:16px; margin-bottom:20px; }
}
@media (max-width:767px){
  /* таблицы: локальная прокрутка внутри карточки — страница по горизонтали не едет */
  .col-md-9 table:not(.tlc-table),
  .col-md-9 .ana-table,
  .ad-analytics .ana-table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .col-md-9 table:not(.tlc-table) th, .col-md-9 table:not(.tlc-table) td,
  .col-md-9 .ana-table th, .col-md-9 .ana-table td{ padding:11px 12px !important; font-size:13.5px; }
  .tl-cabhead{ flex-direction:column; gap:14px; padding:18px; }
  .col-md-9 .not-found-title-container{ padding:28px 16px; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 25: ПОДПИСИ В РАСЧЁТЕ ВЫПЛАТ (16.09.2026)
   Элементы без класса с жёстким цветом #6b6b7b — в тёмной теме не читались.
   ========================================================================== */
.col-md-9 .payout-calc-result-item span,
.col-md-9 .payout-calc-result span,
.col-md-9 .payout-calc-row span,
.col-md-9 .payout-cards span{ color:var(--muted) !important; }
.col-md-9 .payout-calc-result-item b,
.col-md-9 .payout-calc-result-item strong,
.col-md-9 .payout-card-value{ color:var(--ink) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 26: КАРТОЧКА ЛОТА СЕТКОЙ И ЗАЗОР ПОСЛЕ СПИСКА (16.09.2026)
   На главной кабинета остался старый грид-вид лота (.container-item-grid) с
   внутренними отступами 15 px и кнопка, идущая через 10 px после сетки.
   ========================================================================== */
.container-item-grid{
  display:flex; flex-direction:column;
  padding:16px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  height:100%;
}
.container-item-grid-content{ display:flex; flex-direction:column; gap:8px; padding-top:12px; }
.container-item-grid-content-title{ font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4; }
.container-item-grid-content-prices{ font-size:16px; font-weight:700; color:var(--brand-active); }
.container-item-images{ border-radius:var(--r-sm); overflow:hidden; background:var(--surface-2); }

.col-md-9 .row + .btn-custom-mini,
.col-md-9 .row + .btn-custom,
.col-md-9 > * + .btn-custom-mini,
.col-md-9 > * + .btn-custom{ margin-top:16px !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 27: ДЕФЕКТ «МОИ ЛОТЫ» (16.09.2026)
   --------------------------------------------------------------------------
   Владелец: «тут тоже всё криво и не видно». Исправляется:
     1) вкладки-чипы: одинаковая высота/отступы/зазоры 12 px, счётчик внутри чипа
        (в теме он позиционировался абсолютно — из-за этого чипы были разной ширины
        и «разъезжались»), ровная сетка при переносе, на узких экранах — прокрутка
        чипов без полосы;
     2) кнопка «Разместить лот» — отдельной строкой, отступ 20 px от вкладок, по левому краю;
     3) шапка списка — в том же контейнере и с той же сеткой, что строки лота,
        отступ 24 px от вкладок, тонкая линия под шапкой;
     4) строка черновика: нейтральная иконка вместо квадрата-заглушки, подписи и
        заголовок выровнены, жёлтые плашки-подсказки — карточками с отступами 12–16 px
        и зазором до кнопки ≥ 16 px, подпись «Заполнение идёт по шагам…» — своей строкой;
     5) контраст подписей ≥ 4,5:1 — цвета только из токенов.
   ========================================================================== */

/* ---------- 1. ВКЛАДКИ-ЧИПЫ ---------- */
.col-md-9 .my-tabs-items-small,
.col-md-9 .my-tabs-items-medium,
.col-md-9 .my-tabs-items{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:12px;
  margin-bottom:0;
}
.col-md-9 .my-tabs-items-small .my-tabs-item,
.col-md-9 .my-tabs-items-medium .my-tabs-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  min-height:44px;
  padding:0 18px;
  margin:0;
  border-radius:var(--r-pill);
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink-2);
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
}
.col-md-9 .my-tabs-items-small .my-tabs-item:hover,
.col-md-9 .my-tabs-items-medium .my-tabs-item:hover{
  background:var(--brand-tint); border-color:var(--brand-tint-2); color:var(--brand-hover);
}
.col-md-9 .my-tabs-items-small .my-tabs-item.active,
.col-md-9 .my-tabs-items-medium .my-tabs-item.active{
  background:var(--brand); border-color:var(--brand); color:var(--on-brand);
  box-shadow:var(--sh-accent);
}
/* счётчик — внутри чипа, а не «в воздухе» над ним */
.col-md-9 .my-tabs-items-small .my-tabs-item span,
.col-md-9 .my-tabs-items-medium .my-tabs-item span,
.col-md-9 .my-tabs-items-big .my-tabs-item span{
  position:static;
  top:auto; right:auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 7px;
  margin:0;
  border-radius:var(--r-pill);
  background:var(--surface-2);
  color:var(--muted);
  font-size:12px; font-weight:700;
}
/* счётчик на активной вкладке: сплошная заливка `--brand-fill` + белый текст (5,8:1).
   Было `rgba(255,255,255,.22)` — полупрозрачный белый поверх фиолетовой вкладки давал 2,77:1
   (см. подробный комментарий у правила части 32 ниже, там же закреплён корень). */
.col-md-9 .my-tabs-items-small .my-tabs-item.active span,
.col-md-9 .my-tabs-items-medium .my-tabs-item.active span{
  background:var(--brand-fill); background-color:var(--brand-fill); color:var(--on-fill);
}

/* ---------- 2. КНОПКА «РАЗМЕСТИТЬ ЛОТ» — СВОЕЙ СТРОКОЙ ----------
   ⚠️ 18.09.2026 (пустые состояния кабинета): селектор `… + div` был СЛИШКОМ
   ШИРОКИМ — под него попадало ЛЮБОЕ содержимое сразу после полосы вкладок,
   включая блок пустого состояния «Отзывы» (в reviews.tpl он идёт прямо после
   .my-tabs-items). Из-за этого пустое состояние получало `align-items:stretch`
   и `text-align:left` вместо `center` — владелец видел «бордер узкий,
   переоформить», содержимое стояло в левом боку (замер на 1440 px: центр
   текста «Отзывов нет» — на 228 px левее центра блока, эмодзи в 25 px от
   левого края; см. _deploy/tradelot_tools/_es_measure_before.txt).
   Блоки пустого состояния исключены: их вид задаёт только их собственный
   компонент (.tl-empty в части 61, .not-found-title-container). */
.col-md-9 .my-tabs-items-small + div:not(.tl-empty):not(.not-found-title-container),
.col-md-9 .my-tabs-items-medium + div:not(.tl-empty):not(.not-found-title-container),
.col-md-9 .my-tabs-items + div:not(.tl-empty):not(.not-found-title-container){
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  text-align:left;
  justify-content:flex-start;
}
.col-md-9 .my-tabs-items-small + div:not(.tl-empty):not(.not-found-title-container) > .btn-custom,
.col-md-9 .my-tabs-items-medium + div:not(.tl-empty):not(.not-found-title-container) > .btn-custom,
.col-md-9 .my-tabs-items + div:not(.tl-empty):not(.not-found-title-container) > .btn-custom{ margin-top:0 !important; }

/* ---------- 3. ШАПКА СПИСКА ЛОТОВ В КАБИНЕТЕ ---------- */
.col-md-9 .tl-lot-list{ display:flex; flex-direction:column; gap:16px; }
.col-md-9 .tl-lot-list > .tl-lot-head{
  margin:0;
  padding:0 18px 12px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
.col-md-9 .tl-lot-list > .tl-lot-col-wrap{ width:100%; padding:0; }
.col-md-9 .tl-lot-list .tl-lot-row{ align-items:center; }
/* линия шапки прижата к списку: отступ от вкладок даёт mt25 у контейнера */
.col-md-9 .my-tabs-items + div + .tl-lot-list,
.col-md-9 .tl-lot-list{ margin-top:24px; }
.col-md-9 .tl-lot-list > .tl-lot-head + .tl-lot-col-wrap{ margin-top:0; }

/* ---------- 4. СТРОКА ЧЕРНОВИКА ---------- */
/* иконка категории: если категории ещё нет — нейтральная иконка, а не «квадрат-заглушка» */
.tl-lot-row .tl-lot-icon{
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  color:var(--muted);
}
.tl-lot-row .tl-lot-icon-fallback{
  background:transparent;
  color:var(--muted);
  font-size:18px;
  font-weight:700;
}
.tl-lot-row .tl-lot-icon .ti{ font-size:22px; color:var(--muted); }

/* тексты строки: читаемые токены */
.tl-lot-row .tl-lot-name{ color:var(--ink); font-size:15.5px; font-weight:600; line-height:1.35; }
.tl-lot-row .tl-lot-facts{ color:var(--muted); font-size:13px; line-height:1.6; }
.tl-lot-row .tl-lot-facts b{ color:var(--ink-2); font-weight:600; }
.tl-lot-row .tl-lot-meta{ color:var(--muted); font-size:12.5px; }
.tl-lot-row .tl-lot-meta > *{ color:var(--muted); }
.tl-lot-row .tl-lot-sub{ color:var(--muted); }

/* плашки-подсказки внутри карточки строки (мастер, аналитика, проверки) */
.tl-lot-card [class*="hint"],
.tl-lot-card [class*="note"],
.tl-lot-card [class*="notice"],
.tl-lot-card .ana-note,
.tl-lot-card [class*="wiz-hint"],
.tl-lot-card [class*="plaque"]{
  display:block;
  padding:12px 16px;
  margin:0;
  background:var(--brand2-tint);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  color:var(--ink) !important;
  font-size:13px;
  line-height:1.55;
}
.tl-lot-card [class*="hint"] *, .tl-lot-card [class*="note"] *,
.tl-lot-card [class*="notice"] *, .tl-lot-card .ana-note *{ color:var(--ink) !important; }
.tl-lot-card [class*="hint"] i, .tl-lot-card [class*="note"] i{ color:var(--warm-ink) !important; margin-right:6px; }

/* подвал карточки: воздух между плашкой, подписью и кнопкой — не меньше 16 px */
.tl-lot-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  padding:16px 20px;
}
.tl-lot-foot > *{ margin:0 !important; }
.tl-lot-foot > * + *{ margin-left:0; }
.tl-lot-foot .btn-custom,
.tl-lot-foot .btn-custom-mini,
.tl-lot-foot .ana-ready-label{ margin-top:0 !important; }
.tl-lot-foot + .tl-lot-foot{ margin-top:0; }
.tl-lot-card .tl-lot-foot p,
.tl-lot-card .tl-lot-foot span:not([class]){ color:var(--ink-2) !important; font-size:13px; line-height:1.55; }
.tl-lot-card .tl-lot-foot > p{ flex:1 1 320px; }
.tl-lot-card .tl-lot-foot > .btn-custom,
.tl-lot-card .tl-lot-foot > .btn-custom-mini{ flex:0 0 auto; }
/* подпись «Заполнение идёт по шагам…» — своей строкой на всю ширину */
.tl-lot-card .tl-lot-foot > .tl-lot-foot-note{ flex:1 1 100%; }

/* ---------- 5. ПЛАНШЕТ И ТЕЛЕФОН ---------- */
@media (max-width:991px){
  .col-md-9 .my-tabs-items-small .my-tabs-item,
  .col-md-9 .my-tabs-items-medium .my-tabs-item{ min-height:42px; padding:0 14px; font-size:13.5px; }
}
@media (max-width:767px){
  /* чипы — горизонтальная прокрутка без полосы (как у табов кабинета) */
  .col-md-9 .my-tabs-items-small,
  .col-md-9 .my-tabs-items-medium{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none; -ms-overflow-style:none;
    margin-left:-4px; margin-right:-4px; padding:0 4px 4px;
  }
  .col-md-9 .my-tabs-items-small::-webkit-scrollbar,
  .col-md-9 .my-tabs-items-medium::-webkit-scrollbar{ display:none; }
  .col-md-9 .my-tabs-items-small .my-tabs-item,
  .col-md-9 .my-tabs-items-medium .my-tabs-item{ flex:0 0 auto; }
  .col-md-9 .tl-lot-list > .tl-lot-head{ display:none; }
  .tl-lot-foot{ padding:14px 16px; gap:14px; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 28: КНОПКИ КАБИНЕТА И КАРТОЧКА ЗАКАЗА (16.09.2026)
   --------------------------------------------------------------------------
   Владелец: «текст чуть меньше и отрендерить, а то он внутри кнопки криво».
   Исправляется по всему кабинету:
     • кнопки — 14–15 px, line-height 1.25, симметричные отступы, текст строго по
       центру (inline-flex + align-items/justify-content:center), одинаковой высоты
       в одном ряду, без разъезжающихся переносов;
     • карточка заказа: бейдж состояния НАД заголовком (отступ 8 px), заголовок 16,5 px
       полужирным, номер заказа 13 px приглушённым, кнопки своей строкой (16 px от текста,
       12 px между собой), между карточками 24 px, внутри 20–24 px;
     • вместо «битой» картинки-заглушки (no-image) — нейтральная плашка с иконкой.
   Цвета, рамки, тени — только токены темы.
   ========================================================================== */

/* ---------- 1. КНОПКИ КАБИНЕТА — ЕДИНАЯ ТИПОГРАФИКА ---------- */
.col-md-9 .btn-custom,
.col-md-9 .btn-custom-mini,
.col-md-9 .btn-custom-big{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:14.5px;
  line-height:1.25;
  font-weight:600;
  text-align:center;
  padding:11px 22px;
  min-height:44px;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none;
  text-decoration:none;
}
.col-md-9 .btn-custom-mini{ font-size:14px; padding:10px 20px; min-height:40px; }
.col-md-9 .btn-custom-big{ font-size:15px; padding:12px 26px; min-height:50px; }
.col-md-9 .btn-custom i, .col-md-9 .btn-custom-mini i, .col-md-9 .btn-custom-big i{
  font-size:17px; line-height:1; flex:0 0 auto;
}
/* одна высота у кнопок, стоящих в одном ряду.
   ⚠️ 18.09.2026: у `… + div` добавлено исключение блоков пустого состояния —
   иначе `align-items:stretch` ломало центрирование пустого состояния
   «Отзывы» (оно идёт прямо после .my-tabs-items). */
.col-md-9 .profile-container-order-item-buttons,
.col-md-9 .profile-tariffs-action-payment,
.col-md-9 .my-tabs-items + div:not(.tl-empty):not(.not-found-title-container),
.col-md-9 .containerActionProfilePublishCheckItems{
  align-items:stretch;
}
/* очень длинная подпись — аккуратно переносится, а не раздувает кнопку */
.col-md-9 .btn-custom-mini{ max-width:100%; }

/* ---------- 2. КАРТОЧКА ЗАКАЗА ---------- */
.profile-container-order-list{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:22px;
  margin-bottom:24px;
  color:var(--ink-2);
}
.profile-container-order-list > * + *{ margin-top:0; }

/* бейдж состояния — первой строкой, с воздухом до заголовка */
.profile-container-order-list > div:first-child{ margin-bottom:8px; }
.profile-container-order-list .status-label{
  display:inline-flex; align-items:center;
  padding:5px 12px;
  border-radius:var(--r-pill);
  font-size:12.5px; font-weight:600; line-height:1.5;
  background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--line);
}
.profile-container-order-list .status-label-color-success{
  background:var(--success-tint) !important; color:var(--success-ink) !important; border-color:transparent !important;
}
.profile-container-order-list .status-label-color-warning{
  background:var(--brand2-tint) !important; color:var(--warm-ink) !important; border-color:transparent !important;
}
.profile-container-order-list .status-label-color-danger{
  background:var(--danger-tint, var(--surface-2)) !important; color:var(--danger) !important; border-color:transparent !important;
}
.profile-container-order-list .status-label-color-info,
.profile-container-order-list .status-label-color-primary{
  background:var(--brand-tint) !important; color:var(--brand-hover) !important; border-color:transparent !important;
}

/* заголовок заказа и номер */
.profile-container-order-list-title{
  font-size:16.5px;
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
  margin-bottom:6px;
}
.profile-container-order-list > small{
  display:block;
  margin-bottom:16px;
  font-size:13px;
  color:var(--muted);
}

/* место под картинку лота: нейтральная плашка, «битая» заглушка no-image не показывается */
.profile-container-order-items{ margin-bottom:16px; }
.profile-container-order-item-image{
  position:relative;
  width:64px; height:64px;
  border-radius:var(--r-md);
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.profile-container-order-item-image img{
  width:100%; height:100%; object-fit:cover;
}
.profile-container-order-item-image img[src*="no-image"],
.profile-container-order-item-image img[src=""]{ display:none; }
.profile-container-order-item-image:has(img[src*="no-image"])::after,
.profile-container-order-item-image:has(img[src=""])::after{
  content:"";
  width:28px; height:28px;
  background-color:var(--muted);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3C/svg%3E");
}

/* кнопки заказа — своей строкой */
.profile-container-order-item-buttons{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:12px;
  margin-top:0;
}
.profile-container-order-item-buttons > .btn-custom-mini{ flex:0 1 auto; margin:0 !important; }

/* плашка «нет счёта для выплаты» и прочие подсказки внутри заказа */
.profile-container-order-list [class*="plaque"],
.profile-container-order-list [class*="hint"]{
  padding:12px 16px;
  margin:0 0 16px;
  background:var(--brand2-tint);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  color:var(--ink) !important;
  font-size:13px; line-height:1.55;
}

/* ---------- 3. «ЗАКАЗЫ» КАК СЕТКА КАРТОЧЕК ---------- */
.col-md-9 .row:has(> .col-12 > .profile-container-order-list){
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
  margin-left:0; margin-right:0;
}
.col-md-9 .row:has(> .col-12 > .profile-container-order-list) > .col-12{
  width:auto; max-width:none; padding:0;
}
.col-md-9 .row:has(> .col-12 > .profile-container-order-list) .profile-container-order-list{ margin-bottom:0; }

/* ---------- 4. МОБИЛЬНАЯ ---------- */
@media (max-width:991px){
  .col-md-9 .row:has(> .col-12 > .profile-container-order-list){ grid-template-columns:1fr; gap:16px; }
  .profile-container-order-list{ padding:18px; }
  .profile-container-order-list-title{ font-size:15.5px; }
}
@media (max-width:575px){
  .col-md-9 .btn-custom, .col-md-9 .btn-custom-mini, .col-md-9 .btn-custom-big{ font-size:14px; }
  .profile-container-order-item-buttons > .btn-custom-mini{ flex:1 1 auto; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 29: ЗАЗОР В ПУСТОМ СОСТОЯНИИ (16.09.2026)
   Кнопка в пустом состоянии имела собственный margin (.mt20) — суммарный зазор
   с flex-gap давал 12 px. Теперь зазор задаёт только контейнер (16 px).
   ========================================================================== */
.not-found-title-container .btn-custom,
.not-found-title-container .btn-custom-mini,
.not-found-title-container .btn-custom-big{ margin-top:0 !important; }
.not-found-title-container{ gap:16px; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 30: ФИНАЛЬНЫЕ ЗАЗОРЫ (16.09.2026)
   1) способы оплаты в кошельке — внутренние отступы 18/20 px (текст не липнет к рамке);
   2) в пустом состоянии зазор «текст → кнопка» задаёт отступ абзаца (16 px),
      собственные margin у кнопки убраны.
   ========================================================================== */
.col-md-9 .option-payment-item,
.profile-wallet-payment-form .option-payment-item{ padding:18px 20px !important; }

.not-found-title-container p{ margin:0 0 16px !important; }
.not-found-title-container p:last-child{ margin-bottom:0 !important; }
.not-found-title-container .btn-custom,
.not-found-title-container .btn-custom-mini,
.not-found-title-container .btn-custom-big{ margin:0 !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 31: СПОСОБ ОПЛАТЫ — ВНУТРЕННИЙ БЛОК (16.09.2026)
   Вложенный блок способа оплаты (.option-payment-item-change) имел свои фон и рамку
   без внутренних отступов — текст стоял в 15 px от его границы.
   ========================================================================== */
.col-md-9 .option-payment-item-change,
.col-md-9 .option-payment-item-name,
.col-md-9 .option-payment-item > div{ padding:16px 18px !important; }
.col-md-9 .option-payment-item > div:empty{ padding:0 !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 32: БЕЛЫЙ ТЕКСТ НА ЦВЕТНЫХ ФОНАХ (16.09.2026)
   --------------------------------------------------------------------------
   Требование владельца: «на тёмных и цветных фонах текст должен быть белым»
   («и так везде на сервисе»). Где белый на текущем цвете не даёт 4,5:1 — затемняем
   ЗАЛИВКУ (а не делаем текст чёрным). Всё на токенах.

   Подобранные заливки (контраст с БЕЛЫМ текстом, WCAG):
     --brand-fill  #6640f4 → 6,3:1   (наведение #5533d8 → 7,4:1, нажатие #4a2ec0 → 8,5:1)
     --accent-fill #ff845c → 5,5:1   (наведение #a03809 → 6,3:1)  ← вместо #ff8257 (2,45:1)
     --success-fill #15803d → 5,0:1
     --danger-fill  #c0392b → 5,4:1
   Нейтральные плашки (серый фон --surface-2) остаются с тёмным текстом — это не цветной фон,
   иначе белое на светло-сером было бы нечитаемо.
   ========================================================================== */

:root{
  --on-fill:#ffffff;              /* текст на любой цветной заливке */
  --on-fill-soft:rgba(255,255,255,.22);
  --brand-fill:#6640f4;
  --brand-fill-hover:#5533d8;
  --brand-fill-active:#4a2ec0;
  --accent-fill:#ff845c;
  --accent-fill-hover:#f96f3f;
  --accent-fill-active:#e05f2e;
  --success-fill:#15803d;
  --warn-fill:#ff845c;
  --danger-fill:#c0392b;
}

/* ---------- 1. КНОПКИ НА ЦВЕТНОЙ ЗАЛИВКЕ ---------- */
.btn-custom.button-color-scheme1, .btn-custom-mini.button-color-scheme1, .btn-custom-big.button-color-scheme1,
a.button-color-scheme1, button.button-color-scheme1, span.button-color-scheme1,
.col-md-9 a.btn-custom.button-color-scheme1, .col-md-9 a.btn-custom-mini.button-color-scheme1,
.col-md-9 span.btn-custom.button-color-scheme1, .col-md-9 span.btn-custom-mini.button-color-scheme1{
  background-color:var(--brand-fill) !important;
  border-color:var(--brand-fill) !important;
  color:var(--on-fill) !important;
}
.btn-custom.button-color-scheme1:hover, .btn-custom-mini.button-color-scheme1:hover, .btn-custom-big.button-color-scheme1:hover,
a.button-color-scheme1:hover, button.button-color-scheme1:hover{
  background-color:var(--brand-fill-hover) !important; border-color:var(--brand-fill-hover) !important; color:var(--on-fill) !important;
}
.btn-custom.button-color-scheme1:active, .btn-custom-mini.button-color-scheme1:active,
a.button-color-scheme1:active, button.button-color-scheme1:active{
  background-color:var(--brand-fill-active) !important; border-color:var(--brand-fill-active) !important;
}

/* акцентные (оранжевые) кнопки: белый текст + более глубокая заливка */
.btn-custom.button-color-scheme5, .btn-custom-mini.button-color-scheme5, .btn-custom-big.button-color-scheme5,
a.button-color-scheme5, button.button-color-scheme5, span.button-color-scheme5,
.col-md-9 a.btn-custom.button-color-scheme5, .col-md-9 a.btn-custom-mini.button-color-scheme5,
.col-md-9 span.btn-custom.button-color-scheme5, .col-md-9 span.btn-custom-mini.button-color-scheme5,
.tl-btn-accent, .tl-hero-cta-accent{
  background-color:var(--accent-fill) !important;
  border-color:var(--accent-fill) !important;
  color:var(--on-fill) !important;
  box-shadow:none;
}
.btn-custom.button-color-scheme5:hover, .btn-custom-mini.button-color-scheme5:hover, .btn-custom-big.button-color-scheme5:hover,
a.button-color-scheme5:hover, button.button-color-scheme5:hover{
  background-color:var(--accent-fill-hover) !important; border-color:var(--accent-fill-hover) !important; color:var(--on-fill) !important;
}

/* «опасные» кнопки */
.btn-custom.button-color-scheme6, .btn-custom-mini.button-color-scheme6, .btn-custom-big.button-color-scheme6,
a.button-color-scheme6, button.button-color-scheme6, span.button-color-scheme6{
  background-color:var(--danger-fill) !important;
  border-color:var(--danger-fill) !important;
  color:var(--on-fill) !important;
}

/* кнопки схем 2 и 3 — светлые/контурные: это НЕ цветной фон, текст остаётся тёмным */
.btn-custom.button-color-scheme2, .btn-custom-mini.button-color-scheme2, .btn-custom-big.button-color-scheme2,
.btn-custom.button-color-scheme3, .btn-custom-mini.button-color-scheme3, .btn-custom-big.button-color-scheme3,
.btn-custom.button-color-scheme4, .btn-custom-mini.button-color-scheme4{
  color:var(--brand-hover) !important;
}
.btn-custom.button-color-scheme3, .btn-custom-mini.button-color-scheme3{ color:var(--ink-2) !important; }

/* ---------- 2. АКТИВНЫЕ ВКЛАДКИ, ЧИПЫ, ШАПКИ КАРТОЧЕК ---------- */
.my-tabs-item.active,
.col-md-9 .my-tabs-items-small .my-tabs-item.active,
.col-md-9 .my-tabs-items-medium .my-tabs-item.active{
  background:var(--brand-fill) !important;
  border-color:var(--brand-fill) !important;
  color:var(--on-fill) !important;
  box-shadow:var(--sh-accent);
}
/* СЧЁТЧИК НА АКТИВНОЙ ВКЛАДКЕ (корень дефекта контраста, найден исполнителем кабинета).
   Было `background:var(--on-fill-soft)` = rgba(255,255,255,.22): полупрозрачный белый
   поверх фиолетовой заливки вкладки давал очень светлый фиолетовый, и белый текст на нём
   читался всего 2,77:1. Правило перебивало прежний контрастный фикс из tradelot-contrast.css
   (там специфичность 0,3,1, здесь 0,4,1). Теперь подложка счётчика — сплошной `--brand-fill`
   (белый текст на #6640f4 = 5,8:1), то есть счётчик всегда читается. Дополнительно то же
   правило закреплено в tradelot-contrast.css, чтобы дефект не вернулся. */
.my-tabs-item.active span,
.col-md-9 .my-tabs-items-small .my-tabs-item.active span,
.col-md-9 .my-tabs-items-medium .my-tabs-item.active span{
  background:var(--brand-fill) !important; background-color:var(--brand-fill) !important;
  color:var(--on-fill) !important;
}
.my-tabs-item.active i{ color:var(--on-fill) !important; }
.tl-cabhead-icon{ background:var(--brand-fill); color:var(--on-fill); }
.tl-cabhead-icon i{ color:var(--on-fill); }
.tl-tariff-card .tl-tariff-badge{ background:var(--brand-fill); color:var(--on-fill); }

/* ---------- 3. БЕЙДЖИ СОСТОЯНИЙ — ЗАЛИВКОЙ, БЕЛЫМ ТЕКСТОМ ---------- */
/* успех / «подтверждено» / активный статус */
.status-label-color-success,
.ana-chip-ok, .ana-tag-income, .ana-ready-ok, .ana-ready-label,
.tl-lot-badge.is-new,
.payout-badge,
.tl-badge-success{
  background:var(--success-fill) !important;
  color:var(--on-fill) !important;
  border-color:transparent !important;
}
/* ожидание / предупреждение / акцент */
.status-label-color-warning,
.ana-chip-wait, .ana-tag-expense, .ana-tag-warn,
.tl-lot-badge.is-urgent,
.tl-badge-warn{
  background:var(--warn-fill) !important;
  color:var(--on-fill) !important;
  border-color:transparent !important;
}
/* ошибка / отмена / арбитраж */
.status-label-color-danger,
.tl-badge-danger{
  background:var(--danger-fill) !important;
  color:var(--on-fill) !important;
  border-color:transparent !important;
}
/* фирменный акцент: аукцион, «Блиц-цена», подписи-плашки */
.tl-lot-badge.is-auction,
.tl-lot-badge.is-status,
.tl-lot-blitz,
.ana-chip-off,
.status-label-color-info,
.status-label-color-primary,
.tl-badge-brand{
  background:var(--brand-fill) !important;
  color:var(--on-fill) !important;
  border-color:transparent !important;
}
.tl-lot-badge, .status-label, .ana-chip, .ana-tag, .tl-lot-blitz, .payout-badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600;
}
.tl-lot-badge i, .status-label i, .ana-chip i, .ana-tag i{ color:inherit !important; }

/* ---------- 4. ПРОЧИЕ ЦВЕТНЫЕ ПОВЕРХНОСТИ ---------- */
/* кнопка «Скачать APK» и подобные акцентные CTA на статических страницах */
.tl-page-static .btn-custom.button-color-scheme5,
.tl-page-static .btn-custom-big.button-color-scheme5{ background:var(--accent-fill) !important; color:var(--on-fill) !important; }
/* шапка-CTA в мастере и модальных окнах */
.wiz-nav-next, .wiz-nav-finish, .modal .btn-custom.button-color-scheme1,
.modal .btn-custom-big.button-color-scheme1, .modal-content .btn-custom.button-color-scheme1{
  background:var(--brand-fill) !important; color:var(--on-fill) !important; border-color:var(--brand-fill) !important;
}
/* футер: полоса ссылок на фирменном фоне */
.tl-footer-nav, .tl-footer-nav a, .tl-footer-links, .tl-footer-links a{ color:var(--on-fill) !important; }
/* счётчики-цифры на цветных плашках */
.tl-lot-badge b, .status-label b{ color:var(--on-fill) !important; }

/* ---------- 5. ТЁМНАЯ ТЕМА: правило сохраняется (белый на цветном), но заливки те же ---------- */
@media (prefers-color-scheme: dark){
  .status-label-color-success, .ana-chip-ok, .ana-ready-ok{ background:var(--success-fill) !important; color:var(--on-fill) !important; }
}

/* ---------- 6. МОБИЛЬНАЯ ---------- */
@media (max-width:575px){
  .tl-lot-badge, .status-label, .ana-chip, .ana-tag{ font-size:12px; padding:4px 10px; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 33: ЦВЕТ ТЕКСТА ПЛИТОК И БЛОГА (16.09.2026)
   Плитки категорий и заголовки блога были с жёстким чёрным цветом: на светлой
   подложке это читалось, а в тёмной теме текст становился невидимым.
   Теперь цвет — из токена темы (светлая: тёмный текст, тёмная: светлый).
   Там, где подложка плитки/бейджа ЦВЕТНАЯ и тёмная, текст белый (см. часть 32).
   ========================================================================== */
.module-categories-items-custom-1-item,
.module-categories-items-custom-2-item,
.module-categories-items-custom-3-item,
.module-categories-items-custom-1-item div,
.module-categories-items-custom-2-item div,
.module-categories-items-custom-3-item div,
.module-categories-items-custom-1-item-name,
.module-categories-items-custom-2-item-name,
.module-categories-items-custom-3-item-name{ color:var(--ink) !important; }

.blog-grid-item-title,
.blog-post-card-content,
.blog-widget-categories-or-subcategories a{ color:var(--ink) !important; }
.blog-grid-item-title:hover{ color:var(--brand-fill) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 34: ПОЛОСА ГОРОДА В ПОДВАЛЕ НА ТЕЛЕФОНЕ (16.09.2026)
   --------------------------------------------------------------------------
   Просьба владельца: на 390 px панорама показывала центрально-правую часть и
   выглядела обрезанной. Правило действует ТОЛЬКО на узких экранах (≤767 px):
   полоса получает пропорции картинки (1348×266) и подгоняется по ширине целиком,
   высота считается по пропорции, поэтому пустых полос не появляется.
   На десктопе НИЧЕГО не меняется: там прежние 266 px, center 0 и translateX(-25px);
   сам блок (.new_footer_top/.footer_bg/.footer_bg_one/.footer_bg_two) и анимации
   myfirst 22 s и 30 s не тронуты.
   ========================================================================== */
@media (max-width:767px){
  /* место под панораму: высота полосы по пропорции + небольшой воздух */
  .new_footer_top{
    padding:48px 0 calc(100vw * 266 / 1348 + 16px);
  }
  .new_footer_top .footer_bg{
    height:auto;
    aspect-ratio:1348 / 266;
    background-size:100% 100%;
    background-position:center bottom;
    transform:none;
  }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 35: АДРЕС ЛОТА В СПИСКАХ — ССЫЛКОЙ (16.09.2026)
   Требование владельца: адрес сайта/проекта в списках лотов кликабелен, открывается
   в новой вкладке, показывается коротко (домен), на телефоне не ломает вёрстку.
   ========================================================================== */
.tl-lot-facts .tl-lot-link{
  color:var(--brand-hover);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--brand-tint-2);
  overflow-wrap:anywhere;
  word-break:break-word;
}
.tl-lot-facts .tl-lot-link:hover,
.tl-lot-facts .tl-lot-link:focus{
  color:var(--brand-active);
  border-bottom-color:var(--brand-active);
}
.tl-lot-facts .tl-lot-link:focus-visible{ outline:none; box-shadow:var(--tl-focus); border-radius:4px; }
.tl-lot-facts .tl-lot-link.is-hidden{
  color:var(--muted);
  font-weight:500;
  border-bottom:1px dashed var(--line);
  cursor:default;
}
.tl-lot-facts .tl-lot-link.is-hidden i{ font-size:14px; margin-right:2px; }
.tl-lot-facts .tl-lot-link-ok{
  display:inline-flex; align-items:center;
  color:var(--success-ink);
  font-size:14px; line-height:1;
  margin-left:2px;
  vertical-align:-2px;
}
@media (max-width:575px){
  .tl-lot-facts{ font-size:12.5px; }
  .tl-lot-facts .tl-lot-link{ overflow-wrap:anywhere; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 36: «ОТЗЫВЫ» — ЗАГОЛОВОК РАЗДЕЛА, А НЕ ПЛАШКА (16.09.2026)
   --------------------------------------------------------------------------
   Дефект владельца: заголовок «Отзывы» в карточке лота выглядел фиолетовой
   плашкой-кнопкой, а счётчик «0» наезжал на него сверху.
   Причина: разметка блока — это одиночная «таб-вкладка» (.my-tabs-items-big >
   .my-tabs-item.active со счётчиком <span>), а наши стили чипов/табов (части 27 и 32)
   красят активный чип заливкой, а счётчик в старой теме позиционируется абсолютно
   (top:-10px; right:-10px) — отсюда и плашка, и наезд.
   Правка: (1) в блоке отзывов одиночный «таб» оформлен как обычный заголовок раздела;
   (2) счётчик выведен в поток и стал отдельным бейджем; (3) то же правило для
   .my-tabs-items-big применено ко всем страницам (защита от наезда счётчиков);
   (4) пустое состояние отзывов — аккуратной плашкой внутри карточки.
   ========================================================================== */

/* 1. ОТЗЫВЫ: заголовок раздела вместо плашки */
.ad-card-reviews-content .my-tabs-items-big{
  display:block;
  margin:0 0 16px;
}
.ad-card-reviews-content .my-tabs-items-big .my-tabs-item{
  display:inline-flex;
  align-items:center;
  min-height:0;
  padding:0 !important;
  margin:0;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:var(--ink) !important;
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:0;
}
.ad-card-reviews-content .my-tabs-items-big .my-tabs-item.active{
  background:transparent !important;
  color:var(--ink) !important;
  box-shadow:none !important;
}

/* 2. СЧЁТЧИК ОТЗЫВОВ — отдельным бейджем рядом, без наезда */
.ad-card-reviews-content .my-tabs-items-big .my-tabs-item span,
.my-tabs-items-big .my-tabs-item span{
  position:static !important;
  top:auto !important;
  right:auto !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 8px;
  margin:0 0 0 10px;
  border-radius:var(--r-pill);
  background:var(--surface-2) !important;
  color:var(--ink-2) !important;
  border:1px solid var(--line);
  font-size:12.5px;
  font-weight:700;
  line-height:1;
}
.my-tabs-items-big .my-tabs-item.active span{
  background:var(--brand-tint) !important;
  color:var(--brand-hover) !important;
  border-color:var(--brand-tint-2);
}

/* 3. ПУСТОЕ СОСТОЯНИЕ ОТЗЫВОВ — плашкой внутри карточки раздела */
.ad-card-reviews-content .my-tabs-content-container{ padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
.ad-card-reviews-content .container-reviews-list > p,
.ad-card-reviews-content .container-reviews-list .not-found-title-container{
  margin:0;
  padding:16px 18px;
  background:var(--surface-2);
  border:1px dashed var(--line);
  border-radius:var(--r-md);
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.6;
}
.ad-card-reviews-content .container-reviews-list{ display:grid; gap:12px; }

/* 4. СТРАХОВКА: счётчики в «больших» табах больше нигде не позиционируются абсолютно */
.my-tabs-items-big .my-tabs-item{ position:relative; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 37: ВНУТРЕННИЕ ОТСТУПЫ ПОЛЕЙ ВВОДА И ПОИСКА (16.09.2026)
   --------------------------------------------------------------------------
   Правка владельца: в большом поле поиска на главной текст и лупа стояли слишком
   близко к левому краю («текст чуть правее надо»). Заодно приводим к системе все
   поля: не меньше 14 px от границы до текста/значка.
   ========================================================================== */

/* 1. Поиск в герое: значок 25 px от границы, до текста ещё ~10 px */
.tl-search{ padding:10px 8px 10px 24px; }
.tl-search i{ flex:0 0 auto; }
.tl-search input{ padding-left:2px; }
@media (max-width:575px){
  .tl-search{ padding:8px 8px 8px 20px; }
}

/* 2. Все обычные поля: не меньше 16 px слева и справа */
.flex-wrapper .form-control,
.flex-wrapper input[type=text]:not([class*="search"]):not(.live-search-form-input),
.flex-wrapper input[type=email]:not([class*="search"]),
.flex-wrapper input[type=password]:not([class*="search"]),
.flex-wrapper input[type=number]:not([class*="search"]),
.flex-wrapper input[type=tel]:not([class*="search"]),
.flex-wrapper select,
.flex-wrapper textarea,
.form-control:not([class*="search"]),
select.form-control, textarea.form-control{
  padding-left:16px !important;
  padding-right:16px !important;
}
/* поиск в шапке: значок 18 px от границы, текст с отступом 50 px (как было) */
.live-search-form-input{ padding-left:50px !important; padding-right:16px !important; }
.live-search-form-icon{ padding:0 18px; }

/* 3. Выпадающие подсказки поиска: отступы внутри списка и от границы */
.live-search-form-items,
.live-search-form-result,
[class*="live-search"] [class*="items"]{
  padding:12px 0 !important;
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  box-shadow:var(--sh-2) !important;
  overflow:hidden;
}
.live-search-form-items > *,
[class*="live-search"] [class*="items"] > *{
  padding:10px 16px !important;
  font-size:14.5px;
  color:var(--ink-2) !important;
}
.live-search-form-items > *:hover,
[class*="live-search"] [class*="items"] > *:hover{ background:var(--brand-tint) !important; color:var(--brand-hover) !important; }

/* 4. Поля в модальных окнах — то же правило */
.modal .form-control, .modal input[type=text]:not([class*="search"]), .modal textarea, .modal select{
  padding-left:16px !important; padding-right:16px !important;
}
@media (max-width:575px){
  .flex-wrapper .form-control, .form-control:not([class*="search"]){ padding-left:14px !important; padding-right:14px !important; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 38: БАЛАНС ОТСТУПОВ В ПОИСКЕ ГЕРОЯ (16.09.2026)
   После общей правки полей внутренний отступ поля стал 16 px — в связке со значком
   это давало слишком большой зазор. Ставим 8 px: значок 25 px от границы,
   до текста ещё ~18 px.
   ========================================================================== */
.tl-search input, .tl-search input[type=text]{ padding-left:8px !important; }
@media (max-width:575px){
  .tl-search input, .tl-search input[type=text]{ padding-left:6px !important; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 39: ОТСТУП ТЕКСТА В ПОИСКЕ ГЕРОЯ (16.09.2026)
   Общее правило полей имеет более высокую специфичность, поэтому для поиска в герое
   повторяем его тем же селектором и ставим 8 px: значок 25 px от границы,
   до текста ещё ~18 px (было 26 px — слишком много).
   ========================================================================== */
.flex-wrapper .tl-search input[type=text]:not([class*="search"]):not(.live-search-form-input),
.flex-wrapper .tl-search input:not([class*="search"]):not(.live-search-form-input),
.tl-search input{ padding-left:8px !important; }
@media (max-width:575px){
  .flex-wrapper .tl-search input[type=text]:not([class*="search"]):not(.live-search-form-input),
  .tl-search input{ padding-left:6px !important; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 40: ВЕРХНЯЯ ПОЛОСА МЕНЮ В ШАПКЕ (16.09.2026)
   --------------------------------------------------------------------------
   Правка владельца: «цвет текста тёмным одним — иконки разных цветов сделать».
   Было: пункты полосы наследовали разные цвета (тема задавала `color:white` для
   `.header-wow-top-list a`, часть ссылок шла внутри иконных обёрток и выглядела иначе).
   Стало: у всех пунктов ОДИН базовый тёмный цвет (--ink), hover — фирменный,
   активный — фирменный с подчёркиванием; у каждого пункта своя цветная иконка
   из палитры (без «кислотных» оттенков), 17 px, отступ до текста 7 px.
   ========================================================================== */

:root{
  --icon-blue:#2f6fd0;      /* щит «Безопасные сделки» */
  --icon-magenta:#a8338f;   /* приложение */
}

/* ---------- 1. ПУНКТЫ ПОЛОСЫ: ОДИН ЦВЕТ ТЕКСТА ---------- */
.header-wow-top-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 22px;
  padding-top:2px;
}
.header-wow-top-list a.tl-top-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-right:0 !important;
  color:var(--ink) !important;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
}
.header-wow-top-list a.tl-top-link:hover,
.header-wow-top-list a.tl-top-link:focus{ color:var(--brand-hover) !important; }
.header-wow-top-list a.tl-top-link i{
  font-size:17px;
  line-height:1;
  flex:0 0 auto;
  transition:color .16s ease;
}
/* активный пункт: фирменный цвет + светлая плашка-пилюля.
   Владелец 16.09.2026: «почему подчёркивание осталось? … активный выделяй цветом/полосой,
   но НЕ подчёркиванием» — раньше здесь стоял `box-shadow:inset 0 -2px 0 var(--brand-fill)`,
   который читался как подчёркивание. Теперь подложка-пилюля, а отрицательные поля
   компенсируют отступы, чтобы пункты меню не сдвинулись ни на пиксель. */
.header-wow-top-list a.tl-top-link.is-active{
  color:var(--brand-hover) !important;
  background:var(--brand-tint);
  border-radius:var(--r-pill);
  box-shadow:none;
  padding:5px 10px;
  margin:-5px -10px !important;
}

/* ---------- 2. ИКОНКИ — КАЖДАЯ СВОЕГО ЦВЕТА ---------- */
.header-wow-top-list .tl-top-home i{ color:var(--brand-fill); }
.header-wow-top-list .tl-top-shops i{ color:var(--accent-fill); }
.header-wow-top-list .tl-top-tariffs i{ color:var(--success-fill); }
.header-wow-top-list .tl-top-secure i{ color:var(--icon-blue); }
.header-wow-top-list .tl-top-app i{ color:var(--icon-magenta); }
.header-wow-top-list a.tl-top-link:hover i{ color:inherit; }

/* ---------- 3. ПРАВАЯ ЧАСТЬ ПОЛОСЫ: ПОЧТА, СЧЁТЧИКИ, ИКОНКИ ---------- */
.header-wow-top .header-wow-top-list-icon{ display:inline-flex; align-items:center; gap:14px; }
.header-wow-top .header-wow-top-list-mail{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--ink-2);
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
}
.header-wow-top .header-wow-top-list-mail:hover{ color:var(--brand-hover); }
.header-wow-top .header-wow-top-list-mail::before{
  content:""; width:16px; height:16px; flex:0 0 auto;
  background-color:var(--icon-blue);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.header-wow-top .header-wow-top-list-icon-item{
  display:inline-flex; align-items:center;
  color:var(--muted) !important;
  font-size:13.5px;
}
.header-wow-top .header-wow-top-list-icon-item i{ font-size:19px; color:var(--muted) !important; }
.header-wow-top .header-wow-top-list-icon-item:hover i,
.header-wow-top .header-wow-top-list-icon-item:hover{ color:var(--brand-hover) !important; }
.header-wow-top .label-circle-count{ color:var(--on-fill) !important; background:var(--accent-fill); }
/* кнопка «Войти» и аватар в полосе — единый подход */
.header-wow-top .btn-custom-mini{ color:var(--brand-hover) !important; }

/* ==========================================================================
   TRADELOT — СЧЁТЧИК ИЗБРАННОГО В ШАПКЕ (18.09.2026, задание владельца:
   «корзина отключена, просмотр избранного этот значок переместить в другое
   место — они не красиво выделяются»).
   --------------------------------------------------------------------------
   Значок избранного теперь ОДИН на весь сайт и живёт в полосе шапки
   (.header-wow-top-list-icon), рядом с уведомлениями (иконка чата) и профилем.
   Пилюля с числом:
     • без рамки (border: 0), мягкая тень, белый текст на насыщенной заливке;
     • та же высота у значков, что у соседей — иконка 19 px, отступов «в воздух» нет;
     • absolute-позиционирование: пилюля не участвует в потоке, поэтому ширина
       полосы от неё не зависит и появление числа не сдвигает иконки (замер:
       Δx / Δy соседей при числе 2 и при нуле = 0, наездов на соседей 0,
       заступ пилюли за правый край значка 6 px, за верхний — 5 px, полоса 44 px
       пилюлю не обрезает);
     • скрыта, когда в избранном 0 лотов (атрибут hidden) — «висящей» пустой
       плашки рядом с иконками нет.
   Число проставляет main.js (.favorite-icon-counter) из базы: GET /profile/favorites/count.
   ========================================================================== */
.header-wow-top-list-icon-item .favorite-icon-counter{
  position:absolute; top:-5px; right:-6px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px;
  border:0; border-radius:var(--r-pill, 999px);
  background:var(--accent-fill); background-color:var(--accent-fill);
  color:#fff !important; font-size:10px; font-weight:600; line-height:1;
  box-shadow:0 2px 6px rgba(27,22,48,.20);
  pointer-events:none;
}
/* пилюлю прячем по атрибуту, а не классом: класс .label-circle-count объявлен
   раньше и требовал !important (селектор проигрывал по специфичности — в проекте
   это частая ловушка, поэтому правило сформулировано явно) */
.header-wow-top-list-icon-item .favorite-icon-counter[hidden]{ display:none !important; }
/* значок избранного — точка отсчёта для пилюли; position:relative стоит ВСЕГДА
   (не через :has()), иначе при появлении числа absolute считался бы от полосы
   и пилюля уехала бы далеко от значка */
.header-wow-top a.tl-fav-link{ position:relative; display:inline-flex; align-items:center; }
.header-wow-top a.tl-fav-link:hover i,
.header-wow-top a.tl-fav-link:hover{ color:var(--brand-hover) !important; }

/* ---------- 4. УЗКИЕ ЭКРАНЫ (полоса показывается до 991 px включительно) ---------- */
@media (max-width:1199px){
  .header-wow-top-list{ gap:4px 16px; }
  .header-wow-top-list a.tl-top-link{ font-size:13.5px; }
  .header-wow-top-list a.tl-top-link i{ font-size:16px; }
}
@media (max-width:991px){
  .header-wow-top-list{ gap:4px 14px; }
  .header-wow-top-list a.tl-top-link{ font-size:13px; gap:6px; }
  .header-wow-top-list a.tl-top-link i{ font-size:15px; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 41: БЛОК «ВОЗМОЖНОСТИ СЕРВИСА» (16.09.2026)
   --------------------------------------------------------------------------
   Правка владельца: заголовок прилипал к карточкам, пятая карточка уходила за
   правый край (обрезана), текст в цветных карточках был чёрным.
   Стало: отступ заголовка 28 px, ровная сетка (5 / 3 / 2 / 1 карточка), ни одна
   карточка не обрезается, текст белый на цветной заливке из палитры (5 токенов),
   иконки 52 px, текст 15/14.5 px.
   ========================================================================== */

/* 1. Заголовок → карточки: 28 px (и от подписи «ВОЗМОЖНОСТИ» тоже) */
.tl-home .widget-promo-banners-container{ margin-top:28px !important; }
.tl-home .tl-center h2.tl-h2 + .widget-promo-banners-container,
.tl-home .tl-center .tl-eyebrow + h2 + .widget-promo-banners-container{ margin-top:28px !important; }
.tl-home .widget-promo-banners-container .widget-promo-banners-head,
.tl-home .widget-promo-banners-container > * + *{ margin-top:0; }

/* 2. Ровная сетка: все карточки видны целиком, без обрезки */
.tl-home .widget-promo-banners-container{ overflow:visible !important; }
.tl-home .widget-promo-banners-container .swiper,
.tl-home .widget-promo-banners-container .swiper-container{ overflow:visible !important; }
.tl-home .widget-promo-banners-container .swiper-wrapper{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:20px !important;
  transform:none !important;
  width:auto !important;
  transition:none !important;
}
.tl-home .widget-promo-banners-container .swiper-slide,
.tl-home .widget-promo-banners-container .widget-promo-banners-item{
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  height:auto;
  flex:1 1 auto;
}
.tl-home .widget-promo-banners-container .widget-promo-banners-item{
  display:flex; flex-direction:column; gap:14px;
  padding:22px;
  border-radius:var(--r-lg);
  min-height:100%;
}

/* 3. Цветные карточки из палитры + БЕЛЫЙ текст (контраст ≥4,5) */
.tl-home .widget-promo-banners-container .widget-promo-banners-item:nth-child(5n+1){ background-color:var(--brand-fill) !important; }
.tl-home .widget-promo-banners-container .widget-promo-banners-item:nth-child(5n+2){ background-color:var(--accent-fill) !important; }
.tl-home .widget-promo-banners-container .widget-promo-banners-item:nth-child(5n+3){ background-color:var(--success-fill) !important; }
.tl-home .widget-promo-banners-container .widget-promo-banners-item:nth-child(5n+4){ background-color:var(--icon-blue) !important; }
.tl-home .widget-promo-banners-container .widget-promo-banners-item:nth-child(5n+5){ background-color:var(--icon-magenta) !important; }
.tl-home .widget-promo-banners-container .widget-promo-banners-item,
.tl-home .widget-promo-banners-container .widget-promo-banners-item *{
  color:var(--on-fill) !important;
}
.tl-home .widget-promo-banners-container .widget-promo-banners-item{
  box-shadow:var(--sh-2);
  border:0;
}
/* иконка карточки: 48–56 px, на светлой подложке-«стекле» */
.tl-home .widget-promo-banners-container .widget-promo-banners-item img,
.tl-home .widget-promo-banners-container .widget-promo-banners-item svg,
.tl-home .widget-promo-banners-container .widget-promo-banners-item i{
  width:52px; height:52px; font-size:52px;
  object-fit:contain; flex:0 0 auto;
  color:var(--on-fill) !important;
}
.tl-home .widget-promo-banners-container .widget-promo-banners-item-title,
.tl-home .widget-promo-banners-container .widget-promo-banners-item-name,
.tl-home .widget-promo-banners-container .widget-promo-banners-item h3,
.tl-home .widget-promo-banners-container .widget-promo-banners-item h4{
  font-size:17px; font-weight:700; line-height:1.3; margin:0;
}
.tl-home .widget-promo-banners-container .widget-promo-banners-item p,
.tl-home .widget-promo-banners-container .widget-promo-banners-item div,
.tl-home .widget-promo-banners-container .widget-promo-banners-item span{
  font-size:14.5px; line-height:1.55;
}
.tl-home .widget-promo-banners-container .widget-promo-banners-item a{
  color:var(--on-fill) !important; text-decoration:underline;
}

/* 4. Адаптив: 3 / 2 / 1 карточка, без горизонтальной прокрутки */
@media (max-width:1199px){
  .tl-home .widget-promo-banners-container .swiper-wrapper{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:767px){
  .tl-home .widget-promo-banners-container .swiper-wrapper{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px !important; }
  .tl-home .widget-promo-banners-container .widget-promo-banners-item{ padding:18px; }
  .tl-home .widget-promo-banners-container .widget-promo-banners-item img,
  .tl-home .widget-promo-banners-container .widget-promo-banners-item svg,
  .tl-home .widget-promo-banners-container .widget-promo-banners-item i{ width:44px; height:44px; font-size:44px; }
}
@media (max-width:479px){
  .tl-home .widget-promo-banners-container .swiper-wrapper{ grid-template-columns:1fr; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 42: ИЛЛЮСТРАЦИЯ БЛОКА «БЕЗОПАСНЫЕ СДЕЛКИ» (16.09.2026)
   Правка владельца: щит занимал почти всю правую половину и выглядел некачественно.
   Уменьшаем показ до 300 px на десктопе (220 px на телефоне), центрируем и даём
   воздух от края блока. Правило общего характера: иллюстрации не показываем крупнее
   их натурального размера (downscale всегда резче, чем upscale).
   ========================================================================== */
.tl-band img,
.tl-band-image img,
.tl-band-row img{
  width:auto;
  max-width:300px;
  height:auto;
  max-height:300px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}
.tl-band-illustration,
.tl-band-row > div:last-child{ display:flex; align-items:center; justify-content:center; padding:16px; }
/* логотип банка в этом же блоке оставляем компактным */
.tl-band img.tl-bank{ max-width:200px; max-height:80px; margin:16px 0; }
@media (max-width:991px){
  .tl-band img, .tl-band-row img{ max-width:240px; max-height:240px; }
}
@media (max-width:575px){
  .tl-band img, .tl-band-row img{ max-width:200px; max-height:200px; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 43: СТРАНИЦЫ «БЕЗОПАСНЫЕ СДЕЛКИ» И «МОБИЛЬНОЕ ПРИЛОЖЕНИЕ»
   --------------------------------------------------------------------------
   Задание владельца: переоформить разделы верхнего меню «Безопасные сделки» и
   «Скачать приложение» (и довести «Бизнес тарифы»). Общие правила системы:
   шапка-карточка, каждый смысловой блок — карточка, отступы по шкале,
   цвета только токены, на цветном — белый текст, картинки не крупнее файла.
   ========================================================================== */

/* ---------- 1. ОБЩЕЕ ДЛЯ СТАТИЧЕСКИХ СТРАНИЦ ЭТИХ РАЗДЕЛОВ ---------- */
.tl-page-static > .row:first-child,
.tl-page-static .promo-business-header-container-title{
  background:linear-gradient(135deg, var(--brand-tint) 0%, var(--surface) 70%);
  border:1px solid var(--line-soft);
  border-radius:var(--r-xl);
  padding:32px;
}
.tl-page-static .promo-business-header-container-title h1{ margin:0 0 12px; }
.tl-page-static .promo-business-header-container-title h3{ margin:0; color:var(--ink-2); font-weight:600; }
.tl-page-static .promo-business-header-container-list{ display:grid; gap:12px; margin-top:20px; }
.tl-page-static .promo-business-header-container-list > div{
  display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--ink-2); line-height:1.55;
}
.tl-page-static .promo-business-header-container-list i{ color:var(--brand-fill); font-size:19px; }

/* каждый смысловой блок статической страницы — карточка */
.tl-page-static > section,
.tl-page-static > .row:not(:first-child),
.tl-page-static .promo-business-section-container-title{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:24px;
  margin-top:24px !important;
}
.tl-page-static .promo-business-section-container-title h2{ margin:0 0 10px; font-size:24px; }
.tl-page-static .promo-business-section-container-title p{ margin:0; color:var(--ink-2); line-height:1.65; }
.tl-page-static > section + section{ margin-top:24px !important; }

/* текст → кнопка не меньше 16 px, кнопки одного ряда одной высоты */
.tl-page-static p + .btn-custom, .tl-page-static p + .btn-custom-big,
.tl-page-static ul + .btn-custom, .tl-page-static div + .btn-custom{ margin-top:16px !important; }
.tl-page-static .btn-custom, .tl-page-static .btn-custom-big{ margin-right:12px; }

/* ---------- 2. КАРТИНКИ: НЕ КРУПНЕЕ ФАЙЛА, БЕЗ ЖЁСТКИХ ВЫСОТ ---------- */
.tl-page-static img,
.tl-page-static img[height],
.tl-page-static img[width]{
  max-width:100%;
  height:auto !important;
  max-height:none;
  border-radius:var(--r-md);
}
/* иллюстрации «мобильного приложения» — компактно и по центру */
.tl-page-static img[src*="mob"]{ max-width:340px; display:block; margin:0 auto; }
.tl-page-static .text-center img{ margin-left:auto; margin-right:auto; }

/* ---------- 3. ПЛАШКА «🔥» И АКЦЕНТЫ — НЕ «КИСЛОТНО» ---------- */
.tl-page-static .btn-custom-big.button-color-scheme5{ font-size:15.5px; padding:14px 28px; }

/* ---------- 4. ТЕЛЕФОН ---------- */
@media (max-width:991px){
  .tl-page-static > .row:first-child,
  .tl-page-static .promo-business-header-container-title{ padding:22px; }
  .tl-page-static > section,
  .tl-page-static .promo-business-section-container-title{ padding:18px; }
}
@media (max-width:575px){
  .tl-page-static .btn-custom, .tl-page-static .btn-custom-big{ width:100%; margin-right:0; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 44: БЕЛЫЙ ТЕКСТ НА ЦВЕТНЫХ СТРОКАХ «БЕЗОПАСНЫХ СДЕЛОК»
   Строки списка в шапке страницы — фиолетовые (brand-fill), текст был тёмным
   (правило системы: на цветном фоне текст белый).
   ========================================================================== */
.tl-page-static .promo-business-header-container-list > div,
.tl-page-static .promo-business-header-container-list > div *{
  color:var(--on-fill) !important;
}
.tl-page-static .promo-business-header-container-list > div{
  padding:12px 16px;
  border-radius:var(--r-md);
  font-weight:600;
}
.tl-page-static .promo-business-header-container-list > div i{ color:var(--on-fill) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 45: СПИСОК ДИАЛОГОВ В КАБИНЕТЕ (16.09.2026)
   --------------------------------------------------------------------------
   Правка владельца: «Сообщения → Диалоги» — лысые строки без границ, всё сливается.
   Каждый диалог — строка-карточка: граница 1 px, внутри 16–20 px, между строками 12 px.
   Структура: аватар/иконка в плашке → название полужирным → превью в одну строку
   с многоточием (приглушённое) → дата справа. Непрочитанные — жирнее + бейдж.
   Плашки-подписи внутри строки (например «Заказ успешно оплачен…») — аккуратной
   пометкой, а не жёлтой полосой. Наведение/активный диалог — фирменная подсветка.
   ========================================================================== */
.chat-dialogues-container{ display:flex; flex-direction:column; gap:16px; }
.chat-dialogues-container h3{ margin:0 !important; font-size:19px; font-weight:700; color:var(--ink); }

.chat-dialogues-items{ display:flex; flex-direction:column; gap:12px; }

.chat-dialogues-item{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.chat-dialogues-item:hover{
  background:var(--brand-tint);
  border-color:var(--brand-tint-2);
  box-shadow:var(--sh-2);
}
.chat-dialogues-item.active,
.chat-dialogues-item.is-active{
  border-color:var(--brand-fill);
  box-shadow:inset 3px 0 0 var(--brand-fill), var(--sh-2);
}
.chat-dialogues-item:focus-visible{ outline:none; box-shadow:var(--tl-focus); }

/* аватар или иконка раздела */
.chat-dialogues-item-avatar{
  flex:0 0 auto;
  width:48px; height:48px;
  border-radius:var(--r-md);
  background:var(--brand-tint);
  border:1px solid var(--brand-tint-2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.chat-dialogues-item-avatar img{ width:100%; height:100%; object-fit:cover; }
.chat-dialogues-item-avatar i{ font-size:24px; color:var(--brand-fill); }

/* текст: название, превью, дата */
.chat-dialogues-item-content{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.chat-dialogues-item-content-channel{
  font-size:15.5px; font-weight:600; color:var(--ink);
  line-height:1.35;
  overflow-wrap:anywhere;
}
.chat-dialogues-item-content-channel p,
.chat-dialogues-item-content p{
  margin:0 !important;
  font-size:14px; font-weight:400; color:var(--muted);
  line-height:1.45;
  display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-dialogues-item-content-time,
.chat-dialogues-item-content-date,
.chat-dialogues-item-time{
  flex:0 0 auto;
  margin-left:auto;
  font-size:12.5px;
  color:var(--muted);
  white-space:nowrap;
  align-self:flex-start;
}
/* непрочитанные: жирное название + фирменный бейдж-счётчик */
.chat-dialogues-item.is-unread .chat-dialogues-item-content-channel,
.chat-dialogues-item.unread .chat-dialogues-item-content-channel{ font-weight:700; }
.chat-dialogues-item.is-unread .chat-dialogues-item-content p,
.chat-dialogues-item.unread .chat-dialogues-item-content p{ color:var(--ink-2); }
.chat-dialogues-item .label-circle-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 7px;
  border-radius:var(--r-pill);
  background:var(--accent-fill); color:var(--on-fill) !important;
  font-size:12px; font-weight:700;
}
/* пометки внутри строки (оплата заказа, статусы) — аккуратной плашкой, без «жёлтой полосы» */
.chat-dialogues-item [class*="action"],
.chat-dialogues-item [class*="notice"],
.chat-dialogues-item [class*="plaque"]{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:8px;
  padding:8px 12px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  color:var(--ink-2) !important;
  font-size:13px; line-height:1.45;
  white-space:normal;
}
.chat-dialogues-item [class*="action"] i,
.chat-dialogues-item [class*="notice"] i{ color:var(--brand-fill) !important; font-size:16px; }

/* пустое состояние */
.chat-dialogues-items:empty::after{
  content:"Диалогов пока нет — напишите продавцу из карточки лота.";
  display:block;
  padding:24px;
  background:var(--surface-2);
  border:1px dashed var(--line);
  border-radius:var(--r-lg);
  color:var(--muted);
  font-size:14.5px; line-height:1.6;
  text-align:center;
}

/* телефон: аватар + название + дата в строку, превью ниже */
@media (max-width:575px){
  .chat-dialogues-item{ padding:14px; gap:12px; align-items:flex-start; flex-wrap:wrap; }
  .chat-dialogues-item-content{ gap:6px; }
  .chat-dialogues-item-content-channel{ font-size:15px; }
  .chat-dialogues-item-time{ align-self:center; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 46: ОТСТУПЫ СТРОКИ ДИАЛОГА НА ТЕЛЕФОНЕ (16.09.2026)
   На 390 px внутренний отступ строки был 14 px — по правилу системы нужно ≥16 px.
   ========================================================================== */
@media (max-width:575px){
  .chat-dialogues-item{ padding:16px !important; }
  .chat-dialogues-item-avatar{ width:44px; height:44px; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 47: ПУСТЫЕ СОСТОЯНИЯ АНАЛИТИКИ (16.09.2026)
   Владелец: страница «Мои запросы доступа» выглядела как карточка с текстом.
   Теперь пустое состояние — с иконкой и кнопкой действия.
   ========================================================================== */
.ana-note.ana-empty{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
  padding:18px 20px !important;
  background:var(--surface-2) !important;
  border:1px dashed var(--line) !important;
  border-radius:var(--r-md) !important;
}
.ana-note.ana-empty > i{ font-size:20px; color:var(--brand-fill) !important; }
.ana-empty-action{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.ana-empty-action .btn-custom{ min-height:44px; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 48: ПОДПИСИ МОБИЛЬНОГО МЕНЮ (16.09.2026)
   В теме подписи нижнего меню были жёстко серыми (#646464) — в тёмной теме
   не читались. Переводим на токен темы.
   ========================================================================== */
.main-floating-menu a,
.main-floating-menu span,
.main-floating-menu div,
.main-floating-menu-item{ color:var(--muted) !important; }
.main-floating-menu a.active, .main-floating-menu a.is-active,
.main-floating-menu-item.active{ color:var(--brand-fill) !important; }
.main-floating-menu a:hover{ color:var(--brand-hover) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 49: СХЕМА 4 (СВЕТЛАЯ КНОПКА) — ТЁМНЫЙ ТЕКСТ (16.09.2026)
   У схемы 4 светлая заливка, поэтому текст на ней должен оставаться тёмным
   в любой теме (правило владельца: белый — только на цветном/тёмном фоне).
   ========================================================================== */
.btn-custom.button-color-scheme4, .btn-custom-mini.button-color-scheme4, .btn-custom-big.button-color-scheme4,
a.button-color-scheme4, button.button-color-scheme4, span.button-color-scheme4,
.col-md-9 a.btn-custom.button-color-scheme4, .col-md-9 span.btn-custom.button-color-scheme4{
  color:var(--on-brand-2) !important;
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 50: СТРАНИЦА «МАГАЗИНЫ» (16.09.2026)
   --------------------------------------------------------------------------
   Решение владельца: магазины включены и работают. Два штриха:
   1) «рельса» категорий на /shops — наши SVG-иконки категорий вместо картинок
      (тот же набор, что на главной и в каталоге; SVG масштабируется без потерь);
   2) пустое состояние и плитки — в общем стиле системы.
   ========================================================================== */

.widget-categories-or-subcategories{ display:block; }
.widget-categories-or-subcategories .row{ row-gap:12px; }
.widget-categories-or-subcategories a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  height:100%; min-height:104px; padding:16px 12px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  text-decoration:none;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.widget-categories-or-subcategories a:hover{
  border-color:var(--brand-tint-2); box-shadow:var(--sh-2); transform:translateY(-2px);
}
.widget-categories-or-subcategories a > div{
  font-size:13.5px; font-weight:600; color:var(--ink); text-align:center; line-height:1.35;
}
.widget-categories-or-subcategories a img{ display:none !important; }
.widget-categories-or-subcategories a::after{ content:none; }

.widget-categories-or-subcategories a[href*="/veb-sayty"] img{ display:none !important; }
.widget-categories-or-subcategories a[href*="/veb-sayty"]::after{
  content:''; display:block; width:44px; height:44px; margin:0 auto;
  background-color:var(--brand-fill);
  -webkit-mask:url("/resources/view/web/assets/images/categories/veb-sayty.svg") center/contain no-repeat;
          mask:url("/resources/view/web/assets/images/categories/veb-sayty.svg") center/contain no-repeat;
}
.widget-categories-or-subcategories a[href*="/domennye-imena"] img{ display:none !important; }
.widget-categories-or-subcategories a[href*="/domennye-imena"]::after{
  content:''; display:block; width:44px; height:44px; margin:0 auto;
  background-color:var(--brand-fill);
  -webkit-mask:url("/resources/view/web/assets/images/categories/domennye-imena.svg") center/contain no-repeat;
          mask:url("/resources/view/web/assets/images/categories/domennye-imena.svg") center/contain no-repeat;
}
.widget-categories-or-subcategories a[href*="/vk-gruppy"] img{ display:none !important; }
.widget-categories-or-subcategories a[href*="/vk-gruppy"]::after{
  content:''; display:block; width:44px; height:44px; margin:0 auto;
  background-color:var(--brand-fill);
  -webkit-mask:url("/resources/view/web/assets/images/categories/vk-gruppy.svg") center/contain no-repeat;
          mask:url("/resources/view/web/assets/images/categories/vk-gruppy.svg") center/contain no-repeat;
}
.widget-categories-or-subcategories a[href*="/telegram-kanaly"] img{ display:none !important; }
.widget-categories-or-subcategories a[href*="/telegram-kanaly"]::after{
  content:''; display:block; width:44px; height:44px; margin:0 auto;
  background-color:var(--brand-fill);
  -webkit-mask:url("/resources/view/web/assets/images/categories/telegram-kanaly.svg") center/contain no-repeat;
          mask:url("/resources/view/web/assets/images/categories/telegram-kanaly.svg") center/contain no-repeat;
}
.widget-categories-or-subcategories a[href*="/max-kanaly-i-chaty"] img{ display:none !important; }
.widget-categories-or-subcategories a[href*="/max-kanaly-i-chaty"]::after{
  content:''; display:block; width:44px; height:44px; margin:0 auto;
  background-color:var(--brand-fill);
  -webkit-mask:url("/resources/view/web/assets/images/categories/max-kanaly-i-chaty.svg") center/contain no-repeat;
          mask:url("/resources/view/web/assets/images/categories/max-kanaly-i-chaty.svg") center/contain no-repeat;
}
.widget-categories-or-subcategories a[href*="/yandex-dzen"] img{ display:none !important; }
.widget-categories-or-subcategories a[href*="/yandex-dzen"]::after{
  content:''; display:block; width:44px; height:44px; margin:0 auto;
  background-color:var(--brand-fill);
  -webkit-mask:url("/resources/view/web/assets/images/categories/yandex-dzen.svg") center/contain no-repeat;
          mask:url("/resources/view/web/assets/images/categories/yandex-dzen.svg") center/contain no-repeat;
}
.widget-categories-or-subcategories a[href*="/yandeks-dzen"] img{ display:none !important; }
.widget-categories-or-subcategories a[href*="/yandeks-dzen"]::after{
  content:''; display:block; width:44px; height:44px; margin:0 auto;
  background-color:var(--brand-fill);
  -webkit-mask:url("/resources/view/web/assets/images/categories/yandeks-dzen.svg") center/contain no-repeat;
          mask:url("/resources/view/web/assets/images/categories/yandeks-dzen.svg") center/contain no-repeat;
}
.widget-categories-or-subcategories a[href*="/marketplejsy"] img{ display:none !important; }
.widget-categories-or-subcategories a[href*="/marketplejsy"]::after{
  content:''; display:block; width:44px; height:44px; margin:0 auto;
  background-color:var(--brand-fill);
  -webkit-mask:url("/resources/view/web/assets/images/categories/marketplejsy.svg") center/contain no-repeat;
          mask:url("/resources/view/web/assets/images/categories/marketplejsy.svg") center/contain no-repeat;
}
.widget-categories-or-subcategories a[href*="/prilozheniya"] img{ display:none !important; }
.widget-categories-or-subcategories a[href*="/prilozheniya"]::after{
  content:''; display:block; width:44px; height:44px; margin:0 auto;
  background-color:var(--brand-fill);
  -webkit-mask:url("/resources/view/web/assets/images/categories/prilozheniya.svg") center/contain no-repeat;
          mask:url("/resources/view/web/assets/images/categories/prilozheniya.svg") center/contain no-repeat;
}
.widget-categories-or-subcategories a[href*="/telegram-boty"] img{ display:none !important; }
.widget-categories-or-subcategories a[href*="/telegram-boty"]::after{
  content:''; display:block; width:44px; height:44px; margin:0 auto;
  background-color:var(--brand-fill);
  -webkit-mask:url("/resources/view/web/assets/images/categories/telegram-boty.svg") center/contain no-repeat;
          mask:url("/resources/view/web/assets/images/categories/telegram-boty.svg") center/contain no-repeat;
}
.widget-categories-or-subcategories a[href*="/youtube-kanaly"] img{ display:none !important; }
.widget-categories-or-subcategories a[href*="/youtube-kanaly"]::after{
  content:''; display:block; width:44px; height:44px; margin:0 auto;
  background-color:var(--brand-fill);
  -webkit-mask:url("/resources/view/web/assets/images/categories/youtube-kanaly.svg") center/contain no-repeat;
          mask:url("/resources/view/web/assets/images/categories/youtube-kanaly.svg") center/contain no-repeat;
}

/* пустое состояние и список магазинов */
.shops-container-items{ margin-top:8px; }
.shops-container-items:empty::after,
.shops-container-items .row:empty::after{
  content:'Магазинов пока нет — создайте свой и продавайте лоты со страницы магазина.';
  display:block; padding:40px 24px; text-align:center;
  background:var(--surface-2); border:1px dashed var(--line); border-radius:var(--r-lg);
  color:var(--muted); font-size:15px; line-height:1.6;
}
@media (max-width:767px){
  .widget-categories-or-subcategories a{ min-height:88px; padding:14px 10px; }
  .widget-categories-or-subcategories a[href]::after{ width:36px; height:36px; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 51: ТОЧНЫЕ АЛИАСЫ КАТЕГОРИЙ НА СТРАНИЦЕ МАГАЗИНОВ
   В базе алиасы: yandeks-dzen (448) и marketpleysy (449) — добавляем правила под них.
   ========================================================================== */
.widget-categories-or-subcategories a[href*="/marketpleysy"] img{ display:none !important; }
.widget-categories-or-subcategories a[href*="/marketpleysy"]::after{
  content:''; display:block; width:44px; height:44px; margin:0 auto;
  background-color:var(--brand-fill);
  -webkit-mask:url("/resources/view/web/assets/images/categories/marketpleysy.svg") center/contain no-repeat;
          mask:url("/resources/view/web/assets/images/categories/marketpleysy.svg") center/contain no-repeat;
}
@media (max-width:767px){
  .widget-categories-or-subcategories a[href*="/marketpleysy"]::after{ width:36px; height:36px; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 52: МАСТЕР ПУБЛИКАЦИИ В СИСТЕМЕ ОФОРМЛЕНИЯ (16.09.2026)
   --------------------------------------------------------------------------
   Требование владельца: мастер (/ad/create, /ad/edit) оформления не имел — блоки
   голым текстом. Правки ТОЛЬКО оформлением: классы уже есть в разметке, логика,
   валидация и AJAX не затрагиваются.
   ========================================================================== */

/* 1. Каждый смысловой блок шага — карточка */
.ad-create-options-container-item,
.ad-create-options-container-item-extra{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:22px;
  margin-bottom:24px;
}
.ad-create-options-container-item:last-child{ margin-bottom:0; }
.ad-create-options-container-item-title{
  margin:0 0 12px;
  font-size:16.5px; font-weight:700; color:var(--ink); line-height:1.35;
}
.ad-create-options-container-item > * + *{ margin-top:14px; }
.ad-create-options-container-item .row{ row-gap:16px; }

/* 2. Подписи полей и сами поля */
.ad-create-options-container-item .form-control-label,
.ad-create-options-container-item label:not(.lk-vis-item):not(.switch){
  display:block;
  margin:0 0 7px;
  font-size:14px; font-weight:600; color:var(--ink-2);
}
.ad-create-options-container-item .form-control{ min-height:46px; }
/* поле + кнопка в одной строке: одна высота, отступы по шкале */
.ad-create-options-container-item .row{ align-items:flex-end; }
.ad-create-options-container-item .row > [class*="col"] > .btn-custom,
.ad-create-options-container-item .row > [class*="col"] > .btn-custom-mini,
.ad-create-options-container-item .row > [class*="col"] > .btn-custom-big{
  min-height:46px; width:100%;
}
.ad-create-options-container-item .btn-custom-big{ min-height:48px; }

/* 3. «Кто видит ссылку на сайт» — переключатель-чипы */
.lk-vis{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  padding:18px 20px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.lk-vis-title{
  flex:1 1 100%;
  display:block; margin-bottom:2px;
  font-size:15.5px; font-weight:700; color:var(--ink);
}
.lk-vis-item{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  min-height:44px; padding:0 18px;
  margin:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  color:var(--ink-2);
  font-size:14px; font-weight:600;
  cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.lk-vis-item input[type="radio"]{
  position:absolute; opacity:0; width:1px; height:1px; margin:0;
}
.lk-vis-item span{ pointer-events:none; }
.lk-vis-item:hover{ background:var(--brand-tint); border-color:var(--brand-tint-2); color:var(--brand-hover); }
.lk-vis-item:has(input:checked){
  background:var(--brand-fill); border-color:var(--brand-fill); color:var(--on-fill);
  box-shadow:var(--sh-accent);
}
.lk-vis-item:has(input:checked) span{ color:var(--on-fill); }
.lk-vis-item:has(input:focus-visible){ box-shadow:var(--tl-focus); }
.lk-vis-hint{
  flex:1 1 100%;
  margin:4px 0 0;
  padding:12px 16px;
  background:var(--surface);
  border:1px dashed var(--line);
  border-radius:var(--r-md);
  color:var(--muted); font-size:13px; line-height:1.55;
}

/* 4. Подсказки: читаемый цвет токена, отступ 16 px, без «воды» по ширине */
.ad-create-options-container-item .form-text,
.ad-create-options-container-item small,
.ad-create-options-container-item .ad-create-options-container-item-hint,
.ad-create-options-container-item [class*="hint"]{
  display:block;
  margin-top:16px;
  color:var(--muted) !important;
  font-size:13px; line-height:1.6;
}
.ad-create-options-container-item .form-label-error{
  display:block; margin-top:8px;
  color:var(--danger) !important; font-size:13px; font-weight:600;
}

/* 5. Переключатели (switch) — аккуратные строки */
.ad-create-options-container-item .switch,
.ad-create-options-container-item .switch-label{
  display:inline-flex; align-items:center; gap:12px;
  min-height:40px;
  font-size:14.5px; color:var(--ink-2);
}

/* 6. Правая колонка «Подготовка к публикации» — той же системой */
[class*="wiz-side"]{ --wiz-gap:16px; }
.wiz-side-step,
.wiz-side-step-item,
[class*="wiz-side"] > * + *{ margin-top:16px; }
.wiz-side-step{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:14px 16px;
}
.wiz-side-step-chip,
.wiz-nav-chip,
.wiz-step-head-chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 8px;
  border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--ink-2);
  font-size:12.5px; font-weight:700;
}
.wiz-side-step.is-done .wiz-side-step-chip,
.wiz-step-head-chip.is-done{ background:var(--success-fill); color:var(--on-fill); }
.wiz-nav{ margin-top:24px; display:flex; flex-wrap:wrap; gap:12px; }

/* 7. Телефон */
@media (max-width:991px){
  .ad-create-options-container-item{ padding:18px; margin-bottom:18px; }
  .wiz-side{ position:static !important; }
}
@media (max-width:575px){
  .lk-vis{ padding:16px; }
  .lk-vis-item{ width:100%; justify-content:flex-start; }
  .ad-create-options-container-item .row > [class*="col"]{ width:100%; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 46: СОДЕРЖАТЕЛЬНОЕ ОФОРМЛЕНИЕ ДВУХ СТРАНИЦ
   «БЕЗОПАСНЫЕ СДЕЛКИ» И «МОБИЛЬНОЕ ПРИЛОЖЕНИЕ» (16.09.2026, только локалка)
   --------------------------------------------------------------------------
   Задание владельца: на этих страницах нужны новые блоки и короткие тексты.

   /secure-deals         — схема по шагам (покупатель оплачивает -> деньги держит
                           БАНК -> продавец передаёт проект -> покупатель подтверждает
                           получение -> продавец получает деньги на указанный счёт или
                           карту, площадка берёт только комиссию), карточка банка-партнёра
                           АО ТБанк, преимущества карточками с иконками, блок «что если
                           что-то пойдёт не так», короткий FAQ, кнопки внизу;
   /mobilnoe-prilozhenie — шапка-карточка с описанием и кнопкой скачивания APK,
                           4 преимущества карточками с иконками, иллюстрация не крупнее
                           натурального размера, «как установить» по шагам, требования
                           к устройству.

   Взято готовое из системы (классы уже есть на главной, поэтому вид единый):
   tl-steps, tl-step, tl-step-num, tl-step-t, tl-step-d, tl-band, tl-bank, tl-check,
   tl-eyebrow, tl-sub, tl-app-row, tl-app-text, tl-app-art.
   Новое: tl-static-sec (обёртка секции без своей карточки), tl-steps-2, tl-steps-3,
   tl-muted-note, tl-faq, tl-cta-row, tl-req, tl-bank-facts.

   Правила системы соблюдены: каждый смысловой блок — карточка, внутри 24 px,
   между блоками 24 px, шкала 4/8/12/16/24/32, цвета только токенами,
   на цветной заливке — белый текст (--on-fill).
   ========================================================================== */

/* ---------- 1. СЕКЦИЯ-ОБЁРТКА (заголовок + сетка карточек, своей карточки нет) ---------- */
.tl-page-static > section.tl-static-sec{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin-top:32px !important;
}
.tl-page-static > section.tl-static-sec > h2{ margin:0 0 8px; }
.tl-page-static > section.tl-static-sec > .tl-eyebrow{ margin-bottom:10px; }
.tl-page-static > section.tl-static-sec > .tl-sub{ margin:0 0 24px; }

/* заголовок секции с отбивкой «плашка + текст» в одну строку */
.tl-page-static .tl-sec-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.tl-page-static .tl-sec-head .tl-eyebrow{ margin:0; }

/* ---------- 2. СЕТКИ ШАГОВ: 2 и 3 колонки к 4 колонкам главной ---------- */
/* шаг сетки карточек — 24 px (шкала системы), а не 20/14 px главной */
.tl-page-static .tl-steps{ gap:24px; }
.tl-page-static .tl-steps-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.tl-page-static .tl-steps-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:991px){
  .tl-page-static .tl-steps-2,
  .tl-page-static .tl-steps-3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:575px){
  .tl-page-static .tl-steps-2,
  .tl-page-static .tl-steps-3{ grid-template-columns:1fr; }
}

/* номер шага: цветная заливка, белый текст (правило системы) */
.tl-page-static .tl-step-num{
  display:flex;
  background:var(--brand-fill);
  color:var(--on-fill);
  box-shadow:none;
}

/* якорь «Как это работает» не должен уезжать под липкую шапку */
.tl-page-static .tl-anchor{ scroll-margin-top:110px; }

/* ---------- 3. ШАПКА-КАРТОЧКА СТРАНИЦЫ ---------- */
.tl-page-static > section.tl-hero-card{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:32px;
  align-items:center;
  background:linear-gradient(135deg, var(--brand-tint) 0%, var(--surface) 70%);
}
.tl-page-static > section.tl-hero-card h1{ margin:0 0 12px; }
.tl-page-static > section.tl-hero-card .tl-hero-lead{
  margin:0; font-size:17px; line-height:1.6; color:var(--ink-2);
}
.tl-page-static > section.tl-hero-card .tl-hero-media{ text-align:center; }
.tl-page-static > section.tl-hero-card .tl-hero-media img{
  display:block; margin:0 auto; width:100%; max-width:380px; height:auto;
}
@media (max-width:991px){
  .tl-page-static > section.tl-hero-card{ grid-template-columns:1fr; gap:24px; }
  .tl-page-static > section.tl-hero-card .tl-hero-media img{ max-width:300px; }
}
@media (max-width:575px){
  .tl-page-static > section.tl-hero-card .tl-hero-media img{ max-width:240px; }
}

/* ---------- 4. СПИСОК С ГАЛОЧКАМИ В ШАПКЕ И КАРТОЧКАХ ---------- */
.tl-page-static .tl-hero-list{ display:grid; gap:12px; margin:20px 0 0; padding:0; list-style:none; }
.tl-page-static .tl-hero-list li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:15px; line-height:1.55; color:var(--ink-2);
}
.tl-page-static .tl-hero-list li i{
  color:var(--brand-fill); font-size:19px; line-height:1.3; flex:0 0 auto;
}

/* ---------- 5. БАНК-ПАРТНЁР: пояснение под логотипом ---------- */
.tl-page-static .tl-band h2{ margin:14px 0 0; }
.tl-page-static .tl-band .tl-bank{
  width:200px; max-width:100%; height:auto;
  display:block; margin:20px 0 0; border-radius:var(--r-sm);
}
.tl-page-static .tl-band .tl-check{ margin-top:20px; }
.tl-page-static .tl-band .tl-check li i{ color:var(--success); }

/* ---------- 6. КАРТОЧКИ ПРЕИМУЩЕСТВ, РИСКОВ И ШАГОВ: внутренние отступы и иконка ---------- */
.tl-page-static .tl-step{ margin:0; }
.tl-page-static .tl-step-ico{
  display:flex;
  width:44px; height:44px; border-radius:var(--r-sm);
  align-items:center; justify-content:center;
  background:var(--brand-tint); color:var(--brand-fill);
  font-size:22px; line-height:1;
}
.tl-page-static .tl-step-ico-1{ background:var(--brand-tint-2); color:var(--brand-hover); }
.tl-page-static .tl-step-ico-2{ background:var(--brand2-tint); color:var(--accent-fill); }
.tl-page-static .tl-step-ico-3{ background:var(--success-tint); color:var(--success-ink); }
.tl-page-static .tl-step-ico-4{ background:var(--accent-fill); color:var(--on-fill); }

/* ---------- 7. КНОПКИ ВНИЗУ: текст -> кнопка не меньше 16 px ---------- */
.tl-page-static .tl-cta-row{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:24px;
}
.tl-page-static .tl-cta-row > div{ display:flex; margin:0; }
.tl-page-static .tl-cta-row .btn-custom,
.tl-page-static .tl-cta-row .btn-custom-big{ margin:0 !important; }
.tl-page-static section.tl-hero-card .tl-cta-row{ justify-content:flex-start; }
@media (max-width:575px){
  .tl-page-static .tl-cta-row{ flex-direction:column; }
  .tl-page-static .tl-cta-row > div{ width:100%; }
}

/* мелкая сноска под кнопкой APK */
.tl-page-static .tl-muted-note{
  margin:12px 0 0; font-size:13.5px; line-height:1.6; color:var(--muted);
}

/* ---------- 8. FAQ: раскрывающиеся строки внутри одной карточки ---------- */
.tl-page-static .tl-faq{ margin:0; }
.tl-page-static .tl-faq-item{ border-top:1px solid var(--line); }
.tl-page-static .tl-faq-item:first-child{ border-top:0; }
.tl-page-static .tl-faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0; margin:0;
  font-size:16px; font-weight:600; color:var(--ink);
  line-height:1.4; cursor:pointer; list-style:none;
}
.tl-page-static .tl-faq-q::-webkit-details-marker{ display:none; }
.tl-page-static .tl-faq-q:hover{ color:var(--brand-hover); }
.tl-page-static .tl-faq-q i{
  color:var(--brand-fill); font-size:20px; line-height:1; flex:0 0 auto;
  transition:transform .16s ease;
}
.tl-page-static .tl-faq-item[open] .tl-faq-q i{ transform:rotate(180deg); }
.tl-page-static .tl-faq-a{
  margin:0; padding:0 0 16px; font-size:15px; line-height:1.65; color:var(--ink-2);
}
@media (prefers-reduced-motion: reduce){
  .tl-page-static .tl-faq-q i{ transition:none; }
}

/* ---------- 9. «КАК УСТАНОВИТЬ» И ТРЕБОВАНИЯ (страница приложения) ---------- */
.tl-page-static .tl-req{ display:grid; gap:0; margin:0; }
.tl-page-static .tl-req-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:12px 0; border-top:1px solid var(--line);
}
.tl-page-static .tl-req-row:first-child{ border-top:0; padding-top:0; }
.tl-page-static .tl-req-row:last-child{ padding-bottom:0; }
.tl-page-static .tl-req-k{ font-size:15px; color:var(--muted); flex:0 0 auto; }
.tl-page-static .tl-req-v{ font-size:15px; font-weight:600; color:var(--ink); text-align:right; }
@media (max-width:575px){
  .tl-page-static .tl-req-row{ flex-direction:column; gap:6px; }
  .tl-page-static .tl-req-v{ text-align:left; }
}

/* ---------- 10. ИЛЛЮСТРАЦИЯ ПРИЛОЖЕНИЯ: не крупнее файла, без «белого прямоугольника» ---------- */
.tl-page-static .tl-app-art img{
  max-width:260px; max-height:none; width:100%; height:auto;
  margin:0 auto; border-radius:0; display:block;
}
@media (max-width:991px){
  .tl-page-static .tl-app-art img{ max-width:220px; }
}

/* ---------- 11. КАРТОЧКИ FAQ, ТРЕБОВАНИЙ И НИЖНЕГО ПРИЗЫВА ---------- */
.tl-page-static > section.tl-faq-card > h2{ margin:0 0 8px; }
.tl-page-static > section.tl-req-card > h2{ margin:0 0 16px; }
.tl-page-static > section.tl-cta-card{ text-align:center; }
.tl-page-static > section.tl-cta-card > h2{ margin:0; }
.tl-page-static > section.tl-cta-card > p{ margin:8px 0 0; }

/* кнопка после шагов установки — по левому краю карточки-секции */
.tl-page-static .tl-cta-row-left{ justify-content:flex-start; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 53: АКЦЕНТНАЯ ЗАЛИВКА #ff845c, БРЕНД-ОРАНЖЕВЫЙ В ДЕКОРЕ
   Решение владельца: акцентная заливка (там, где БЕЛЫЙ текст) — #ff845c (4,79:1),
   а фирменный #ff8257 остаётся в декоративных элементах без текста.
   ========================================================================== */
/* декор: фирменный оранжевый, где нет текста на заливке */
.tl-dot,
.tl-step::before,
.tl-about-data .tl-dot,
.ana-chip-wait::before,
.tl-lot-foot::before,
.tl-section-title::after,
.profile-home-sections-info-item::before{
  background-color:var(--brand-2) !important;
}
.tl-hero::after,
.tl-hero-inner::after,
.tl-band::after,
.tl-footer::after{
  background-image:linear-gradient(135deg, var(--brand-2) 0%, transparent 70%) !important;
}
.tl-cat-icon,
.module-categories-items-custom-2-item .tl-cat-icon{ box-shadow:0 0 0 6px rgba(255,130,87,.12); }

/* ВРЕМЕННО (для сравнения по просьбе владельца): исходная заливка #ff845c */
:root{ --accent-fill:#ff845c; --accent-fill-hover:#f96f3f; --accent-fill-active:#e05f2e; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 53: АКЦЕНТНАЯ ЗАЛИВКА #ff845c, БРЕНД-ОРАНЖЕВЫЙ В ДЕКОРЕ
   Решение владельца: акцентная заливка (там, где БЕЛЫЙ текст) — #ff845c (4,79:1),
   а фирменный #ff8257 остаётся в декоративных элементах без текста.
   ========================================================================== */
/* декор: фирменный оранжевый, где нет текста на заливке */
.tl-dot,
.tl-step::before,
.tl-about-data .tl-dot,
.ana-chip-wait::before,
.tl-lot-foot::before,
.tl-section-title::after,
.profile-home-sections-info-item::before{
  background-color:var(--brand-2) !important;
}
.tl-hero::after,
.tl-hero-inner::after,
.tl-band::after,
.tl-footer::after{
  background-image:linear-gradient(135deg, var(--brand-2) 0%, transparent 70%) !important;
}
.tl-cat-icon,
.module-categories-items-custom-2-item .tl-cat-icon{ box-shadow:0 0 0 6px rgba(255,130,87,.12); }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 54: ФИНАЛЬНЫЙ АКЦЕНТ — ФИРМЕННЫЙ #ff845c (16.09.2026)
   --------------------------------------------------------------------------
   Решение владельца: основа — два цвета логотипа. Акцент = #ff845c.
   Физика: белый на #ff845c даёт ~2,4:1, поэтому на акценте текст ТЁМНЫЙ (--ink),
   это ~8,9:1 — читаемо и выглядит осознанно (коралловый + тёмный).
   Фиолетовый #6640f4 остаётся с белым текстом (6,3:1). «Опасные» (отмена,
   арбитраж, блокировка) — красные с белым, их не трогаем.
   Тёмно-ржавые заливки (#ff845c, #ff845c) выведены из акцентных кнопок и бейджей.
   ========================================================================== */
:root{
  --brand-2:#ff845c;              /* фирменный оранжевый логотипа (декор и акцент) */
  --accent-fill:#ff845c;
  --accent-fill-hover:#f96f3f;
  --accent-fill-active:#e05f2e;
  --on-brand-2:#1b1630;           /* тёмный текст на акценте: ~8,9:1 */
  --warn-fill:#ff845c;
}

/* 1. Акцентные кнопки — фирменная заливка + тёмный текст (все состояния) */
.button-color-scheme5, a.button-color-scheme5, button.button-color-scheme5, span.button-color-scheme5,
.btn-custom.button-color-scheme5, .btn-custom-mini.button-color-scheme5, .btn-custom-big.button-color-scheme5,
.col-md-9 .button-color-scheme5, .col-md-9 a.button-color-scheme5, .col-md-9 span.button-color-scheme5,
.tl-page-static .button-color-scheme5, .modal .button-color-scheme5{
  background-color:var(--accent-fill) !important;
  border-color:var(--accent-fill) !important;
  color:var(--on-brand-2) !important;
}
.button-color-scheme5:hover, a.button-color-scheme5:hover, button.button-color-scheme5:hover,
.btn-custom.button-color-scheme5:hover, .btn-custom-mini.button-color-scheme5:hover, .btn-custom-big.button-color-scheme5:hover{
  background-color:var(--accent-fill-hover) !important; border-color:var(--accent-fill-hover) !important; color:var(--on-brand-2) !important;
}
.button-color-scheme5:active, a.button-color-scheme5:active, .btn-custom.button-color-scheme5:active{
  background-color:var(--accent-fill-active) !important; border-color:var(--accent-fill-active) !important; color:var(--on-brand-2) !important;
}

/* 2. Бейджи-акценты (ожидание, срочно, расход, статус) — #ff845c + тёмный текст */
.tl-lot-badge.is-urgent,
.status-label-color-warning,
.ana-chip-wait,
.ana-tag-expense,
.ana-tag-warn,
.tl-badge-warn,
.option-payment-item.active{
  background:var(--accent-fill) !important;
  color:var(--on-brand-2) !important;
  border-color:transparent !important;
}
.tl-lot-badge.is-urgent i, .status-label-color-warning i, .ana-chip-wait i{ color:inherit !important; }

/* 3. «Опасное» — красный с белым (стандарт), без изменений */
.tl-badge-danger, .status-label-color-danger, .ana-tag-danger,
.button-color-scheme6, a.button-color-scheme6, button.button-color-scheme6, span.button-color-scheme6{
  background-color:var(--danger-fill) !important; border-color:var(--danger-fill) !important; color:#ffffff !important;
}

/* 4. Декор — фирменные цвета без текста */
.tl-dot, .ana-chip-wait::before, .tl-cat-icon{ background-color:var(--brand-2) !important; }
.tl-cat-icon{ box-shadow:0 0 0 6px rgba(255,132,92,.14); }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 55: ТЁМНЫЙ ТЕКСТ НА АКЦЕНТЕ ДЛЯ ВСЕХ КОНТЕКСТОВ (16.09.2026)
   Ранее часть 43 задала белый текст кнопкам акцента внутри статических страниц
   (селектор специфичнее) — из-за этого «Скачать APK» оставался белым на #ff845c.
   Здесь перекрываем тем же (или более высоким) приоритетом.
   ========================================================================== */
.tl-page-static .btn-custom-big.button-color-scheme5,
.tl-page-static a.btn-custom-big.button-color-scheme5,
.tl-page-static .btn-custom.button-color-scheme5,
.tl-page-static a.btn-custom.button-color-scheme5,
.tl-page-static span.button-color-scheme5,
.modal .btn-custom-big.button-color-scheme5,
.modal a.btn-custom-big.button-color-scheme5{
  background-color:var(--accent-fill) !important;
  border-color:var(--accent-fill) !important;
  color:var(--on-brand-2) !important;
}
.tl-page-static a.btn-custom-big.button-color-scheme5:hover{ background-color:var(--accent-fill-hover) !important; color:var(--on-brand-2) !important; }

/* ==========================================================================
   ТРАДЕЛОТ — ЭТАП 2, ЧАСТЬ 56: ТЁМНЫЙ ТЕКСТ НА АКЦЕНТЕ В КАБИНЕТЕ (16.09.2026)
   В кабинете кнопки акцента (например «Пройти верификацию») перекрывались
   правилом с более высоким приоритетом. Ставим финальное правило по всем вариантам.
   ========================================================================== */
.col-md-9 .btn-custom.button-color-scheme5, .col-md-9 .btn-custom-mini.button-color-scheme5,
.col-md-9 .btn-custom-big.button-color-scheme5, .col-md-9 a.btn-custom.button-color-scheme5,
.col-md-9 a.btn-custom-mini.button-color-scheme5, .col-md-9 a.btn-custom-big.button-color-scheme5,
.col-md-9 span.btn-custom.button-color-scheme5, .col-md-9 span.btn-custom-mini.button-color-scheme5,
.profile-home-sections-info-item .btn-custom-mini.button-color-scheme5,
.profile-home-sections-info-item a.button-color-scheme5,
.option-payment-item .button-color-scheme5{
  background-color:var(--accent-fill) !important;
  border-color:var(--accent-fill) !important;
  color:var(--on-brand-2) !important;
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 46-Б: ДОПРАВКА К СТРАНИЦАМ «БЕЗОПАСНЫЕ СДЕЛКИ»
   И «МОБИЛЬНОЕ ПРИЛОЖЕНИЕ» ПОСЛЕ СМЕНЫ АКЦЕНТА (16.09.2026, только локалка)
   --------------------------------------------------------------------------
   Причина доправки: после части 46 владелец утвердил фирменный акцент #ff845c
   (части 54-56). На этом цвете белый текст даёт 2,4:1, поэтому:
     1) иконка риска «Сделка не состоялась» переведена с акцента на --danger-fill
        (белый значок на #c0392b = 5,4:1) — акцент с белым больше не используется;
     2) иконка преимущества на акцентной подложке получила тёмно-тёплый значок
        (--warm-ink: в светлой теме #a8431a на #fff0e9 = 5,4:1, в тёмной #ffb08a
        на #4a2a1c = 7,0:1);
     3) кнопка скачивания APK внутри статических страниц: заливка --accent-fill,
        текст ТЁМНЫЙ (--on-brand-2 = #1b1630, ~8,9:1) — правило системы «белый только
        на затемнённых заливках». Селектор специфичнее общего правила части 55,
        поэтому работает независимо от порядка блоков в файле.
   ========================================================================== */

.tl-page-static .tl-step-ico{ color:var(--brand-hover); }
.tl-page-static .tl-step-ico-1{ background:var(--brand-tint-2); color:var(--brand-hover); }
.tl-page-static .tl-step-ico-2{ background:var(--brand2-tint); color:var(--warm-ink, var(--brand2-active)); }
.tl-page-static .tl-step-ico-3{ background:var(--success-tint); color:var(--success-ink); }
.tl-page-static .tl-step-ico-4{ background:var(--danger-fill); color:var(--on-fill); }

/* кнопки-акценты на статических страницах: тёмный текст на фирменном акценте */
.tl-page-static .tl-cta-row .btn-custom.button-color-scheme5,
.tl-page-static .tl-cta-row .btn-custom-big.button-color-scheme5,
.tl-page-static .tl-cta-row a.btn-custom.button-color-scheme5,
.tl-page-static .tl-cta-row a.btn-custom-big.button-color-scheme5{
  background-color:var(--accent-fill) !important;
  border-color:var(--accent-fill) !important;
  color:var(--on-brand-2, var(--ink)) !important;
}
.tl-page-static .tl-cta-row a.btn-custom.button-color-scheme5:hover,
.tl-page-static .tl-cta-row a.btn-custom-big.button-color-scheme5:hover{
  background-color:var(--accent-fill-hover) !important;
  border-color:var(--accent-fill-hover) !important;
  color:var(--on-brand-2, var(--ink)) !important;
}

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 57: ДВЕ МЕЛОЧИ ТЁМНОЙ ТЕМЫ (16.09.2026)
   1) светлая схема кнопок (scheme4) — фон прозрачный, поэтому цвет текста должен
      быть токеном темы (--ink), а не жёстко тёмным: тогда читается и в светлой, и в тёмной;
   2) плашка способа оплаты (активная) — на коралловой заливке текст тёмный.
   ========================================================================== */
.btn-custom.button-color-scheme4, .btn-custom-mini.button-color-scheme4, .btn-custom-big.button-color-scheme4,
a.button-color-scheme4, button.button-color-scheme4, span.button-color-scheme4,
.col-md-9 a.btn-custom.button-color-scheme4, .col-md-9 span.btn-custom.button-color-scheme4{
  color:var(--ink) !important;
  background-color:transparent !important;
}
.option-payment-item.active, .option-payment-item.active *,
.option-payment-item.checked, .option-payment-item.checked *{
  color:var(--on-brand-2) !important;
}
.option-payment-item.active .option-payment-item-name,
.option-payment-item.active strong, .option-payment-item.active span,
.option-payment-item.active div{ color:var(--on-brand-2) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 58: ССЫЛКА В ПЛАШКЕ ГОТОВНОСТИ АНАЛИТИКИ (16.09.2026)
   Плашка «Аналитика N/M» залита фирменным зелёным (--success-fill), а внутренняя
   ссылка «Заполнить» оставалась фиолетовой от автора компонента — на зелёном это
   давало 1,47:1. Теперь текст и ссылка внутри плашки белые (правило: на цветном — белый).
   ========================================================================== */
.ana-ready-label, .ana-ready-label *,
.ana-ready-label a, .ana-ready-label .ana-ready-link, .ana-ready-label .ana-ready-percent{
  color:var(--on-fill) !important;
}
.ana-ready-label .ana-ready-link{ text-decoration:underline; }
.ana-ready-label i{ color:var(--on-fill) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 59: СИНЯЯ КАРТОЧКА — ТОН ПОД БЕЛЫЙ ТЕКСТ (16.09.2026)
   #2f6fd0 давал с белым 4,15:1 (ниже нормы 4,5). Берём более глубокий тон палитры,
   белый текст проходит с запасом. Фиолетовый/акцент/зелёный/малиновый — уже проходят.
   ========================================================================== */
:root{ --icon-blue:#24518f; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 60: КОШЕЛЁК — ВНУТРЕННИЕ ОТСТУПЫ СПОСОБА ОПЛАТЫ (16.09.2026)
   Правка владельца: два элемента внутри .option-payment-item-change стояли в 15 px
   от границы плашки. Задаём плашке собственные внутренние отступы 16/18 px и
   разносим строки внутри неё, чтобы текст нигде не подходил к рамке ближе 16 px.
   Логику и разметку компонента другого автора не трогаем — только оформление.
   ========================================================================== */
.option-payment-item-change{
  padding:16px 18px !important;
  display:flex; flex-direction:column; gap:12px;
  border-radius:var(--r-md);
}
.option-payment-item-change > * + *{ margin-top:0 !important; }
.option-payment-item-change strong,
.option-payment-item-change span,
.option-payment-item-change div,
.option-payment-item-change p{ margin:0 !important; }
.option-payment-item-change .btn-custom,
.option-payment-item-change .btn-custom-mini,
.option-payment-item-change .btn-custom-big{ margin-top:4px; }
/* на телефоне — те же правила, чуть меньше воздуха по бокам */
@media (max-width:575px){
  .option-payment-item-change{ padding:16px !important; }
}

/* ==========================================================================
   TRADELOT — ЭТАП 3, ЧАСТЬ 61: БЕЛЫЙ ТЕКСТ В АКЦЕНТНЫХ КНОПКАХ (16.09.2026)
   --------------------------------------------------------------------------
   Требование владельца: на оранжевых (акцентных) кнопках текст БЕЛЫЙ —
   «Разместить лот» (шапка и каталог), «Продать проект», «Купить сейчас»,
   «Скачать APK», кнопки-акценты на статических страницах.

   🔴 РЕШЕНИЕ ВЛАДЕЛЬЦА (прямое требование 16.09.2026, приоритет выше наших правил):
      ЗАЛИВКА АКЦЕНТНЫХ КНОПОК — РОВНО ФИРМЕННАЯ #ff845c, НЕ ЗАТЕМНЯТЬ.
      Меняется только ЦВЕТ ТЕКСТА: он БЕЛЫЙ. Порог 4,5:1 на этих кнопках
      осознанно не соблюдается (белый на #ff845c ≈ 2,4:1) — владелец проверяет
      глазами и сам скажет, если захочет затемнить.
      ⛔ НЕ «ИСПРАВЛЯТЬ» ЭТИ КНОПКИ (не затемнять заливку, не делать тёмный текст,
      не подгонять под порог) БЕЗ ПРЯМОЙ КОМАНДЫ ВЛАДЕЛЬЦА.
      СОСТОЯНИЯ — ТОЖЕ СВЕТЛЫЕ ФИРМЕННЫЕ, текст белый:
        hover  #f96f3f
        active #e05f2e
      ⛔ НЕ заменять их тёмными оттенками «под контраст»: ранее стояли #b03c10/#9c350e —
      владелец это отменил. Затемняющего токена (--accent-fill-strong) в проекте БОЛЬШЕ НЕТ.

   Цвет фирменного акцента, его состояний и ярких плашек — решение владельца;
   не затемнять и не «исправлять» контраст без его прямой команды.
   ========================================================================== */
:root{
  --accent-fill:#ff845c;          /* фирменный акцент — заливка кнопок и ярких плашек (решение владельца) */
  --accent-fill-hover:#f96f3f;    /* как было до правки */
  --accent-fill-active:#e05f2e;
}

/* декор без текста — фирменный оранжевый (как было) */
.header-wow-top-list .tl-top-shops i{ color:var(--brand-2) !important; }

/* Цвет фирменного акцента и ярких плашек — решение владельца;
   не затемнять и не «исправлять» контраст без его прямой команды.
   (счётчики в шапке и в списке диалогов, иконка шага на статических страницах
   берут тот же --accent-fill — как было до правки; отдельных затемнённых
   токенов для них НЕ заводим) */

/* 1. АКЦЕНТНЫЕ КНОПКИ: фирменная заливка #ff845c + БЕЛЫЙ текст (решение владельца).
      Селекторы повторяют контексты предыдущих частей (кабинет, статические
      страницы, модалки) — иначе правило с более высокой специфичностью
      вернуло бы тёмный текст. */
.button-color-scheme5, a.button-color-scheme5, button.button-color-scheme5,
input.button-color-scheme5, span.button-color-scheme5,
.btn-custom.button-color-scheme5, .btn-custom-mini.button-color-scheme5,
.btn-custom-big.button-color-scheme5, span.btn-custom.button-color-scheme5,
span.btn-custom-mini.button-color-scheme5, span.btn-custom-big.button-color-scheme5,
/* эти селекторы (элемент + два класса) специфичнее общих правил частей 17 и 32 —
   без них, например, кнопка «Разместить лот» в шапке каталога оставалась с тёмным текстом */
a.btn-custom.button-color-scheme5, a.btn-custom-mini.button-color-scheme5,
a.btn-custom-big.button-color-scheme5, button.btn-custom.button-color-scheme5,
button.btn-custom-mini.button-color-scheme5, button.btn-custom-big.button-color-scheme5,
.col-md-9 a.btn-custom.button-color-scheme5, .col-md-9 a.btn-custom-mini.button-color-scheme5,
.col-md-9 a.btn-custom-big.button-color-scheme5, .col-md-9 button.btn-custom.button-color-scheme5,
.col-md-9 button.btn-custom-mini.button-color-scheme5, .col-md-9 span.btn-custom.button-color-scheme5,
.col-md-9 span.btn-custom-mini.button-color-scheme5,
.tl-btn-accent, .tl-hero-cta-accent,
.col-md-9 .button-color-scheme5, .col-md-9 a.button-color-scheme5,
.col-md-9 span.button-color-scheme5, .col-md-9 button.button-color-scheme5,
.col-md-9 .btn-custom.button-color-scheme5, .col-md-9 .btn-custom-mini.button-color-scheme5,
.col-md-9 .btn-custom-big.button-color-scheme5, .col-md-9 a.btn-custom.button-color-scheme5,
.col-md-9 a.btn-custom-mini.button-color-scheme5, .col-md-9 a.btn-custom-big.button-color-scheme5,
.col-md-9 span.btn-custom.button-color-scheme5, .col-md-9 span.btn-custom-mini.button-color-scheme5,
.modal .button-color-scheme5, .modal .btn-custom.button-color-scheme5,
.modal .btn-custom-big.button-color-scheme5, .modal a.btn-custom-big.button-color-scheme5,
.modal-content .button-color-scheme5, .modal-content .btn-custom.button-color-scheme5,
.profile-home-sections-info-item .btn-custom-mini.button-color-scheme5,
.profile-home-sections-info-item a.button-color-scheme5,
.tl-page-static .button-color-scheme5, .tl-page-static a.button-color-scheme5,
.tl-page-static span.button-color-scheme5, .tl-page-static button.button-color-scheme5,
.tl-page-static .btn-custom.button-color-scheme5, .tl-page-static a.btn-custom.button-color-scheme5,
.tl-page-static .btn-custom-big.button-color-scheme5, .tl-page-static a.btn-custom-big.button-color-scheme5,
.tl-page-static span.btn-custom.button-color-scheme5,
.tl-page-static .tl-cta-row .btn-custom.button-color-scheme5,
.tl-page-static .tl-cta-row .btn-custom-big.button-color-scheme5,
.tl-page-static .tl-cta-row a.btn-custom.button-color-scheme5,
.tl-page-static .tl-cta-row a.btn-custom-big.button-color-scheme5{
  background-color:var(--accent-fill) !important;
  border-color:var(--accent-fill) !important;
  color:var(--on-fill) !important;
}
.button-color-scheme5:hover, a.button-color-scheme5:hover, button.button-color-scheme5:hover,
span.button-color-scheme5:hover, .btn-custom.button-color-scheme5:hover,
.btn-custom-mini.button-color-scheme5:hover, .btn-custom-big.button-color-scheme5:hover,
a.btn-custom.button-color-scheme5:hover, a.btn-custom-mini.button-color-scheme5:hover,
a.btn-custom-big.button-color-scheme5:hover, button.btn-custom.button-color-scheme5:hover,
span.btn-custom.button-color-scheme5:hover, span.btn-custom-mini.button-color-scheme5:hover,
.col-md-9 a.btn-custom.button-color-scheme5:hover, .col-md-9 a.btn-custom-big.button-color-scheme5:hover,
.col-md-9 button.btn-custom.button-color-scheme5:hover, .col-md-9 span.btn-custom.button-color-scheme5:hover,
.tl-page-static .button-color-scheme5:hover, .tl-page-static a.button-color-scheme5:hover,
.tl-page-static a.btn-custom.button-color-scheme5:hover,
.tl-page-static .btn-custom.button-color-scheme5:hover,
.tl-page-static .btn-custom-big.button-color-scheme5:hover,
.tl-page-static a.btn-custom-big.button-color-scheme5:hover,
.tl-page-static .tl-cta-row a.btn-custom.button-color-scheme5:hover,
.tl-page-static .tl-cta-row a.btn-custom-big.button-color-scheme5:hover{
  background-color:var(--accent-fill-hover) !important;
  border-color:var(--accent-fill-hover) !important;
  color:var(--on-fill) !important;
}
.button-color-scheme5:active, a.button-color-scheme5:active, button.button-color-scheme5:active,
.btn-custom.button-color-scheme5:active, .btn-custom-big.button-color-scheme5:active,
a.btn-custom.button-color-scheme5:active, a.btn-custom-mini.button-color-scheme5:active,
button.btn-custom.button-color-scheme5:active, span.btn-custom.button-color-scheme5:active,
.col-md-9 a.btn-custom.button-color-scheme5:active,
.tl-page-static a.btn-custom.button-color-scheme5:active{
  background-color:var(--accent-fill-active) !important;
  border-color:var(--accent-fill-active) !important;
  color:var(--on-fill) !important;
}
.option-payment-item .button-color-scheme5{ color:var(--on-fill) !important; }

/* 2. ПЛАШКИ-АКЦЕНТЫ (срочно, ожидание, расход) остаются СВЕТЛО-ОРАНЖЕВЫМИ
      с тёмным текстом: это не кнопки, и белое на светлом коралле нечитаемо.
      Раньше они брали цвет из --accent-fill, теперь — прямо из --brand-2. */
.tl-lot-badge.is-urgent, .status-label-color-warning, .ana-chip-wait,
.ana-tag-expense, .ana-tag-warn, .tl-badge-warn, .option-payment-item.active{
  background-color:var(--brand-2) !important;
  color:var(--on-brand-2) !important;
}
.tl-lot-badge.is-urgent i, .status-label-color-warning i, .ana-chip-wait i,
.ana-tag-expense i, .ana-tag-warn i{ color:inherit !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 3, ЧАСТЬ 62: ПОДЧЁРКИВАНИЙ НЕТ НИГДЕ (16.09.2026, вечер)
   --------------------------------------------------------------------------
   🔴 ПРЯМОЕ ТРЕБОВАНИЕ ВЛАДЕЛЬЦА: «Подчеркивание везде убрать, даже при наведении!!!».
   Поэтому подчёркивания нет НИ в обычном состоянии, НИ при наведении/фокусе — и
   «линия на ховере» тоже не используется (это отдельно оговорено владельцем).

   ЕДИНСТВЕННОЕ исключение (разрешено владельцем): ссылка внутри длинного абзаца
   юридической/статической страницы, где ссылку иначе не отличить от текста.
   Если появятся сомнения — убирать подчёркивание, а не добавлять.
   ========================================================================== */
a, a:hover, a:focus, a:focus-visible, a:active,
.tl-lot-link, .tl-lot-link:hover, .tl-lot-link:focus,
.blog-grid-item, .blog-grid-item:hover, .blog-grid-item-title, .blog-grid-item-title:hover{
  text-decoration:none !important;
}
.tl-footer-contact a, .tl-footer-contact a:hover,
.tl-chat-nm a, .tl-chat-nm a:hover,
.tl-chat-box-link, .tl-chat-box-link:hover,
.tl-about-data-lot, .tl-about-data-lot:hover,
.footer-content-link-inline a, .footer-content-link-inline a:hover,
.ana-ready-label .ana-ready-link, .ana-ready-label .ana-ready-link:hover{
  text-decoration:none !important;
}
/* разрешённое исключение: ссылка внутри абзаца юридической (статической) страницы
   и внутри длинного текста статьи блога — там ссылку иначе не отличить от текста */
.tl-page-static p a, .tl-page-static p a:hover,
.tl-page-static li a, .tl-page-static li a:hover,
.home-seo-text p a, .home-seo-text p a:hover,
.blog-post-card-content p a, .blog-post-card-content p a:hover{
  text-decoration:underline !important;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
/* адрес сайта в списках лотов: подчёркивания нет ни в каком состоянии */
.tl-lot-facts .tl-lot-link,
.tl-lot-facts .tl-lot-link:hover,
.tl-lot-facts .tl-lot-link:focus,
.tl-lot-facts .tl-lot-link.is-hidden{
  border-bottom:0 !important;
  text-decoration:none !important;
}

/* ==========================================================================
   TRADELOT — ЭТАП 3, ЧАСТЬ 63: ПЛИТКИ КАТЕГОРИЙ — СВЕТЛАЯ ПОДЛОЖКА (16.09.2026)
   --------------------------------------------------------------------------
   Требование владельца: оранжевые квадраты под иконками категорий (карточка
   лота, «рельса» категорий, каталог, главная) сделать белыми/светлыми, чтобы
   иконка читалась на белом, а не на оранжевом. Сама иконка — SVG с собственным
   цветом, подложка нужна только как плитка под иконкой.
   ПОДЛОЖКА БЕЗ ЖЁСТКОЙ РАМКИ (правка 16.09.2026, приёмка пункт 6): рамка 1 px
   --border (#c1c1c7) рисовала ВТОРУЮ рамку внутри плитки/карточки — значок и так
   объёмный (SVG с собственным скруглением и тенью). Владелец: «мягкая тень вместо
   жёсткой рамки, лишних линий внутри карточек нет». Стало: --surface + мягкая тень
   --sh-1, без рамки. Замер: элементов с рамкой внутри карточек было 10 на страницу
   (по числу категорий) — стало 0.
   ========================================================================== */
.tl-cat-icon,
.module-categories-items-custom-1-item .tl-cat-icon,
.module-categories-items-custom-2-item .tl-cat-icon,
.module-categories-items-custom-2-item-image .tl-cat-icon,
.module-categories-items-custom-3-item-image .tl-cat-icon,
.home-widget-categories-item .tl-cat-icon,
.widget-categories-or-subcategories a .tl-cat-icon,
.tl-lot-icon,
.tl-lot-row .tl-lot-icon{
  background:var(--surface) !important;
  border:0 !important;
  box-shadow:var(--sh-1) !important;
}
/* выбранная плитка в каталоге остаётся отличимой — фирменная светлая заливка
   (рамки больше нет, отличие даёт заливка + фирменное «кольцо» из тени) */
.widget-categories-or-subcategories a.active .tl-cat-icon{
  background:var(--brand-tint) !important;
  box-shadow:0 0 0 2px var(--brand-tint-2) !important;
}
/* строка лота «аукцион»: подложка иконки не должна теряться на тонированной карточке */
.tl-lot-row.is-auction .tl-lot-icon{ background:var(--surface) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 3, ЧАСТЬ 64: КАРТОЧКИ «ВОЗМОЖНОСТИ СЕРВИСА» — БЕЛЫЙ ТЕКСТ
   (16.09.2026)
   --------------------------------------------------------------------------
   Требование владельца: заголовок и текст внутри всех пяти карточек белые.
   Цвета карточек приходят ИЗ РАЗМЕТКИ (инлайн-стиль из настроек) — яркие,
   фирменные: синяя #2196f3, оранжевая #ff9800, фиолетовая #6640f4,
   зелёная #4caf50, графитовая #34495e.

   🔴 ЦВЕТ ФИРМЕННОГО АКЦЕНТА И ЯРКИХ ПЛАШЕК — РЕШЕНИЕ ВЛАДЕЛЬЦА;
      НЕ ЗАТЕМНЯТЬ И НЕ «ИСПРАВЛЯТЬ» КОНТРАСТ БЕЗ ЕГО ПРЯМОЙ КОМАНДЫ.
      Белый текст на синей (3,12:1), оранжевой (2,16:1) и зелёной (2,78:1)
      заливках не проходит порог 4,5:1 — это ОСОЗНАННОЕ исключение владельца
      (его формулировка: «ненадо темнить фон, я проверю, если что скажу затемнить»).
      ⛔ ЗАЛИВКИ КАРТОЧЕК НЕ ПЕРЕОПРЕДЕЛЯТЬ ЗАТЕМНЁННЫМИ ТОНАМИ — НИ ОДНОЙ:
         #2196f3 (синяя), #ff9800 (оранжевая, карточка «Магазины»),
         #6640f4 (фиолетовая), #4caf50 (зелёная), #34495e (графитовая).
      Яркие заливки приходят ИЗ РАЗМЕТКИ (настройки) — правила nth-child для них
      здесь НЕ пишем. То же правило: акцентные кнопки и их состояния hover/active.
   ========================================================================== */
.widget-promo-banners-container .widget-promo-banner-item{
  border:1px solid var(--border) !important;
}
/* текст и заголовок — белые; заливки остаются ЯРКИМИ из разметки */
.widget-promo-banners-container .widget-promo-banner-item h4,
.widget-promo-banners-container .widget-promo-banner-item p,
.widget-promo-banners-container .widget-promo-banner-item h4 *,
.widget-promo-banners-container .widget-promo-banner-item p *,
.widget-promo-banners-item h4, .widget-promo-banners-item p{
  color:var(--on-fill) !important;
}

/* ==========================================================================
   TRADELOT — ЭТАП 3, ЧАСТЬ 65: «БЕЗОПАСНЫЕ СДЕЛКИ» — ПОЯСНЕНИЕ ОБЫЧНЫМ ТЕКСТОМ
   (16.09.2026)
   --------------------------------------------------------------------------
   Владелец: текст под заголовком («Деньги держит банк, пока покупатель не
   получит проект…») слишком жирный. В разметке это h3 — отсюда и 21 px / 600.
   Приводим к обычному начертанию и кеглю соседних пояснений.
   ========================================================================== */
.tl-band-text > h3, .tl-band-text h3.mt15, .tl-band-text h3{
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.6 !important;
  color:var(--ink-2) !important;
  margin-top:12px !important;
}

/* ==========================================================================
   TRADELOT — ЭТАП 3, ЧАСТЬ 66: ПОЛЯ «ЗАПРОС ДОСТУПА К АНАЛИТИКЕ» (16.09.2026)
   --------------------------------------------------------------------------
   Владелец: на карточке лота в блоке подключения аналитики поле/селект выглядит
   тёмным, сделать в светлом стиле формы (белый фон, обычная рамка), как
   остальные поля; зелёный — только для статусов «подключено / готово».
   Здесь: у формы запроса доступа (и у формы данных аналитики) выравниваем ВСЕ
   поля под общий вид сайта — фон --surface, рамка --border, один радиус и одна
   высота 46 px, внутренние отступы 16 px. Селект перестаёт отличаться от input.
   ========================================================================== */
.ad-card-content-item .ana-acc-form select,
.ad-card-content-item .ana-acc-form input[type="text"],
.ad-card-content-item .ana-acc-form input[type="email"],
.ad-card-content-item .ana-acc-form input:not([type]),
.ad-card-content-item .ana-acc-form textarea,
.ana-acc-form select.ana-acc-service,
.ana-acc-form input, .ana-acc-form textarea, .ana-acc-form select,
.ana-acc-actions textarea,
.adf-block input, .adf-block select, .adf-block textarea, .adf-field input, .adf-field select{
  background-color:var(--surface) !important;
  color:var(--ink) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-sm) !important;
  min-height:46px !important;
  height:46px !important;
  padding:0 16px !important;
  font-size:15px !important;
  box-shadow:none !important;
}
.ad-card-content-item .ana-acc-form textarea,
.ana-acc-form textarea, .ana-acc-actions textarea, .adf-block textarea{
  height:auto !important;
  min-height:88px !important;
  padding:12px 16px !important;
  line-height:1.5 !important;
}
/* контейнер формы запроса доступа: своя рамка из инлайн-стиля была сиреневой
   (#ece8fb) и с сиреневым фоном (#fbfaff) — переводим на нейтральные токены */
.ana-acc-form, .ad-card-content-item .ana-acc-form{
  background:var(--surface-2) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-md) !important;
}
.ana-acc-form select:focus, .ana-acc-form input:focus, .ana-acc-form textarea:focus,
.adf-block select:focus, .adf-block input:focus{
  border-color:var(--brand) !important;
}
.ana-acc-form .ana-acc-submit, .ana-acc-approve{
  background-color:var(--brand-fill) !important;
  border:1px solid var(--brand-fill) !important;
  color:var(--on-fill) !important;
  min-height:46px;
  padding:0 22px !important;
  border-radius:var(--r-sm) !important;
}
.ana-acc-form .ana-acc-submit:hover, .ana-acc-approve:hover{
  background-color:var(--brand-fill-hover) !important;
  border-color:var(--brand-fill-hover) !important;
}
/* зелёный — только статус «подключено / готово». Заливки плашек НЕ затемняем:
   у плашек мастера (.sbadge-chip) остаются их собственные светлые тона
   (--success-tint / --success-ink и т. п.) — цвет ярких плашек решает владелец. */
.ana-chip-ok, .status-label-color-success, .ana-ready-ok{
  background-color:var(--success-fill) !important;
  color:var(--on-fill) !important;
  border-color:transparent !important;
}
/* плашка готовности аналитики — пилюля: текст не должен упираться в её край */
.ana-ready-label{ padding:6px 12px !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 3, ЧАСТЬ 67: КНОПКИ КАТАЛОГА И ПЕРЕКЛЮЧАТЕЛИ (16.09.2026)
   --------------------------------------------------------------------------
   Владелец: «Показать все категории», «Показать лоты», «Показать ещё» — один
   вид (высота, отступы, без подчёркиваний); переключатели «Срочно» и «Только с
   акцией» — аккуратной строкой с нормальными отступами.
   Замер «до»: 36 px / 0 16 px / 14 px, 48 px / 0 26 px / 15,5 px,
   44 px / 11 px 22 px / 14,5 px. Приводим все три к 48 px / 0 26 px / 15,5 px.
   ========================================================================== */
.widget-categories-or-subcategories-button-all .btn-custom-mini,
.widget-categories-or-subcategories-button-all span.btn-custom-mini,
button.actionApplyLiveFilters, button.actionApplyLiveFiltersMobile,
button.actionShowMoreItems, .actionShowMoreItems,
.catalog-container-options .btn-custom, .catalog-container-options .btn-custom-mini{
  min-height:48px !important;
  height:48px !important;
  padding:0 26px !important;
  font-size:15.5px !important;
  font-weight:600 !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:var(--r-pill) !important;
  text-decoration:none !important;
}
.actionShowMoreItems{ width:auto !important; }
button.actionApplyLiveFilters.width100, button.actionApplyLiveFiltersMobile.width100,
.params-buttons-sticky .btn-custom, .params-buttons-sticky .btn-custom-big{
  width:100% !important;
}
/* переключатели в панели фильтров: КАЖДЫЙ — отдельной строкой в лёгкой плашке
   (владелец 16.09.2026: «переключатели стоят впритык друг к другу и к рамке, ползунки
   съехали, кнопка без отступа»). Ползунок ровно по центру своей дорожки, дорожка 44×24,
   зазор между строками 12 px, кнопка «Показать лоты» — 20 px от последнего переключателя. */
.params-form-filters-container .params-form-item-switch,
.params-form .params-form-item-switch,
.params-form-item.params-form-item-switch{
  display:flex !important;
  align-items:center !important;
  width:auto !important;
  min-height:44px !important;
  margin:0 !important;
  padding:10px 14px !important;
  border:1px solid var(--line-soft) !important;
  border-radius:var(--card-radius-inner) !important;
  background:var(--surface-2) !important;
}
.params-form-filters-container .params-form-item-switch + .params-form-item-switch,
.params-form .params-form-item-switch + .params-form-item-switch{
  margin-top:12px !important;
}
/* переключатель и ЛЮБОЙ следующий пункт фильтра — тоже через 12 px
   (иначе после плашки переключателя следующий блок прилипал: зазор 0 px) */
.params-form-filters-container > .params-form-item + .params-form-item,
.params-form > .params-form-item + .params-form-item{
  margin-top:12px !important;
}
.params-form-item-switch .switch{
  display:inline-flex !important;
  align-items:center !important;
  margin:0 !important;
  min-height:24px;
  position:relative;
}
/* дорожка переключателя: 44×24, по центру строки */
.params-form-item-switch .switch .switch-toggle-slider{
  width:44px;
  height:24px;
  border-radius:999px;
  background:var(--surface-3);
  border:1px solid var(--border-strong) !important;
  top:50%;
  transform:translateY(-50%);
}
/* ползунок: 18 px, по центру дорожки (было 13 px со смещением 4/3 px — «съехавший») */
.params-form-item-switch .switch .switch-toggle-slider::after{
  width:18px;
  height:18px;
  left:2px;
  top:50%;
  margin:0;
  transform:translateY(-50%);
  background:var(--surface);
  box-shadow:var(--sh-1);
}
.params-form-item-switch .switch .switch-input:checked ~ .switch-toggle-slider{
  background:var(--brand);
  border-color:var(--brand) !important;
}
.params-form-item-switch .switch .switch-input:checked ~ .switch-toggle-slider::after{
  left:22px;
  background:var(--surface);
}
.params-form-item-switch .switch .switch-input ~ .switch-label{
  padding-left:56px !important;
}
/* кнопка «Показать лоты» — 20 px от последнего переключателя (было 0) */
.params-buttons-sticky{
  margin-top:20px !important;
}
.params-form-item-switch .switch-label{
  color:var(--ink-2) !important;
  font-size:14.5px !important;
  font-weight:500 !important;
  line-height:24px !important;
}
/* вложенные пункты фильтра: без своих рамок и БЕЗ ЛИНИЙ-РАЗДЕЛИТЕЛЕЙ
   (владелец: «лишние линии внутри карточек убрать»; приёмка 16.09.2026 нашла
   10 линий `border-top` между полями фильтров). Разделяем пункты зазором 12 px. */
.params-form .params-form-item,
.params-form-filters-container .params-form-item{
  border:0 !important;
  border-radius:0 !important;
}
.params-form .params-form-item + .params-form-item,
.params-form-filters-container .params-form-item + .params-form-item{
  border-top:0 !important;
}
/* ПЛАШКА ПЕРЕКЛЮЧАТЕЛЯ — ПОСЛЕ правил о разделителях (специфичность у них равная,
   поэтому побеждает последнее правило). Раньше эта плашка была объявлена ВЫШЕ и
   верхнюю линию у неё гасило правило «соседний пункт — без верхней линии»:
   замер приёмки 16.09.2026 — рамка 0/1/1/1 px, плашка «открыта сверху».
   Теперь рамка целая 1/1/1/1 px, радиус 14 px. */
.params-form .params-form-item.params-form-item-switch,
.params-form-filters-container .params-form-item.params-form-item-switch{
  border:1px solid var(--line-soft) !important;
  border-radius:var(--card-radius-inner) !important;
}

/* ==========================================================================
   TRADELOT — ЭТАП 3, ЧАСТЬ 68: СТРОКА ЛОТА — ССЫЛКА НАЗВАНИЕМ, АДРЕС РЯДОМ
   (16.09.2026)
   --------------------------------------------------------------------------
   Причина: строка лота целиком была ссылкой (<a class="tl-lot-row">), а внутри
   неё стояла вторая ссылка на сайт лота. Вложенные <a> запрещены HTML — браузер
   выбрасывал внутреннюю ссылку, и в списке оставалось «URL сайта:» без значения.
   Теперь строка — <div>, ссылка — название лота, а кликабельность всей строки
   сохранена «растянутой» ссылкой (::after на всю карточку). Ссылка на сайт и
   сердце «в избранное» лежат ВЫШЕ растянутой ссылки, поэтому работают.
   ========================================================================== */
.tl-lot-row{ position:relative; }
.tl-lot-name{ display:block; }
a.tl-lot-name{
  color:var(--ink) !important;
  text-decoration:none !important;
}
a.tl-lot-name:hover, a.tl-lot-name:focus{ color:var(--brand-hover) !important; text-decoration:none !important; }
a.tl-lot-name::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:var(--r-md);
}
.tl-lot-row .tl-lot-facts, .tl-lot-row .tl-lot-facts .tl-lot-link,
.tl-lot-row .tl-lot-fav, .tl-lot-row .tl-lot-meta, .tl-lot-row .tl-lot-badges,
.tl-lot-row .container-item-favorite, .tl-lot-row .tl-lot-actions,
.tl-lot-row .tl-lot-status, .tl-lot-row input, .tl-lot-row button{
  position:relative;
  z-index:2;
}
.tl-lot-row:focus-within{ border-color:var(--brand-tint-2); }

/* ==========================================================================
   TRADELOT — ЭТАП 3, ЧАСТЬ 69: ЗАЗОРЫ ПО ЗАМЕРУ — ТЕКСТ НЕ БЛИЖЕ 16 px К РАМКЕ
   (16.09.2026)
   --------------------------------------------------------------------------
   Замер measure_spacing.js на карточке лота и главной показал три места, где
   текст стоял ближе 16 px к границе своего блока (норма проекта — не меньше 16):
     * .ad-url-chip      — «Адрес сайта лота» и сам адрес: было 13 px (padding 12/14);
     * .auction-underway — «6 дн. 7 ч. 48 мин.»: было 9 px (padding 8/15);
     * блок cookie       — текст в белой коробке упирался в рамку (padding 0).
   Здесь только внутренние отступы; цвета блока адреса — на токены
   (в инлайн-стиле компонента были сиреневые #fbfaff / #ece8fb).
   ========================================================================== */
.ad-url-chip{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-md) !important;
  padding:16px 18px !important;
}
.ad-url-chip-label{ color:var(--muted) !important; }
.ad-url-chip-link{
  color:var(--brand-hover) !important;
  text-decoration:none !important;
  border-bottom:0 !important;
  overflow-wrap:anywhere;
}
/* наведение — только цвет, БЕЗ подчёркивания (требование владельца: подчёркиваний нет
   даже при наведении) */
.ad-url-chip-link:hover, .ad-url-chip-link:focus{
  color:var(--brand-active) !important;
  text-decoration:none !important;
  border-bottom:0 !important;
}
.auction-underway{ padding:16px !important; border-radius:var(--r-sm) !important; }
.footer-cookie-container > div{ padding:16px 18px !important; border-radius:var(--r-md) !important; }
.footer-cookie-container h6{ margin:0 0 8px !important; }
.footer-cookie-container p{ margin:0 0 16px !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 3, ЧАСТЬ 70: ССЫЛКА-КНОПКА АНАЛИТИКИ (16.09.2026)
   --------------------------------------------------------------------------
   Замер контраста нашёл пару ниже нормы: `a.adctx-btn` «Открыть карточку лота»
   на странице аналитики — фиолетовый текст #5533d8 на фиолетовой заливке
   #6640f4 давал 1,26:1 (текст перебивало правило кабинета для ссылок).
   Кнопка получает заливку и текст ТАКИЕ ЖЕ, как задумал автор блока
   (--brand-fill + белый) — цвета не подбирались, затемнения нет.

   🔴 ЯРКИЕ ПЛАШКИ BOOTSTRAP (`span.badge.text-bg-success` «Безопасная сделка»
      и подобные) ЗАТЕМНЯТЬ НЕЛЬЗЯ — цвет фирменного акцента и ярких плашек
      решает владелец. Здесь оставлены ИСХОДНЫЕ цвета бутстрапа; белый текст
      на них порог 4,5:1 не проходит — это осознанное исключение владельца.
      ⛔ не «исправлять» контраст без его прямой команды.
   ========================================================================== */
a.adctx-btn, .adctx-btn, .col-md-9 a.adctx-btn{
  background-color:var(--brand-fill) !important;
  border:1px solid var(--brand-fill) !important;
  color:var(--on-fill) !important;
  text-decoration:none !important;
}
a.adctx-btn:hover, .adctx-btn:hover, .col-md-9 a.adctx-btn:hover{
  background-color:var(--brand-fill-hover) !important;
  border-color:var(--brand-fill-hover) !important;
  color:var(--on-fill) !important;
}

/* ==========================================================================
   TRADELOT — ЭТАП 3, ЧАСТЬ 71: ЦВЕТА БЛОКОВ С ЖЁСТКИМИ HEX → ТОКЕНЫ (16.09.2026)
   --------------------------------------------------------------------------
   Сплошной замер контраста (светлая и тёмная темы, ключевые страницы) нашёл
   блоки, где авторский код печатает цвета своими hex: в тёмной теме светлый
   текст токенов оставался на светлой подложке (или наоборот). Переводим
   ТОЛЬКО ЦВЕТА этих блоков на токены темы — в светлой теме вид не меняется,
   в тёмной становится читаемым. Логику и разметку не трогаем.
   Блоки: контекст лота на странице аналитики (.adctx), переключатель доступа
   (.ana-acc-switch), итог формы (.adf-total), плитки магазинов, хлебные крошки,
   цена в сайдбаре лота, счётчик отзывов.
   ========================================================================== */
.adctx{
  background:var(--surface-2) !important;
  border:1px solid var(--border) !important;
  border-left:4px solid var(--brand-fill) !important;
}
.adctx-title, .adctx-title-name{ color:var(--ink) !important; }
.adctx-title-name{ color:var(--brand-hover) !important; }
.adctx-status{ background:var(--brand-tint) !important; color:var(--brand-hover) !important; }
.adctx-hint, .adctx-switch-label{ color:var(--muted) !important; }
.adctx-switch{ border-top:1px dashed var(--border) !important; }
.adctx-chip{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  color:var(--ink-2) !important;
  text-decoration:none !important;
}
.adctx-chip:hover{ border-color:var(--brand-2) !important; color:var(--warm-ink) !important; }
.adctx-btn-ghost{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  color:var(--brand-hover) !important;
}
.adf-total{ background:var(--surface-2) !important; color:var(--ink) !important; }
.adf-total b, .adf-total strong{ color:var(--ink) !important; }
.ana-acc-switch{
  background:var(--brand2-tint) !important;
  border:1px solid var(--brand-tint-2) !important;
}
.ana-acc-switch-title{ color:var(--ink) !important; }
.ana-acc-switch-hint{ color:var(--muted) !important; }
.ana-acc-open{ background:var(--brand-tint) !important; border:1px solid var(--brand-tint-2) !important; }
.ana-acc-open-title{ color:var(--brand-hover) !important; }
.breadcrumb, .breadcrumb span, .breadcrumb a{ color:var(--muted) !important; }
.ad-card-sidebar{ background-color:var(--surface) !important; }
.card-item-price-now, .card-item-price-old{ color:var(--ink) !important; }
.user-rating-stars-count-reviews{ color:var(--muted) !important; }
.widget-shops-item-content-title, .widget-shops-item-content-title a, .widget-shops-item-content-title span{ color:var(--ink) !important; }
.widget-shops-item-content-count{ color:var(--muted) !important; }
.status-label-color-secondary{ background-color:var(--surface-3) !important; color:var(--ink-2) !important; border-color:transparent !important; }
/* счётчик просмотров аналитики: у компонента число залито жёстким #6640f4 — в тёмной
   теме это давало 2,94:1. Токен вместо hex (в светлой теме тон тот же, читаемость лучше). */
.ana-acc-views b, .ana-acc-views strong{ color:var(--brand-hover) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 3, ЧАСТЬ 72: ЗАЗОР МЕЖДУ КНОПКАМИ В РЯДУ НА ТЕЛЕФОНЕ (16.09.2026)
   --------------------------------------------------------------------------
   Замер measure_spacing.js на 390 px: кнопки в ряду «Купить проект / Продать
   проект» стояли в 10 px друг от друга, а «Безопасные сделки / Бизнес тарифы» —
   в 12 px. Норма проекта «кнопка → кнопка» — не меньше 16 px.
   ========================================================================== */
@media (max-width:767px){
  .tl-cta > * + *, .tl-band-btnrow > * + *{ margin-top:16px !important; }
  .tl-cta, .tl-band-btnrow{ gap:16px !important; }
  /* подвал: на телефоне контейнер bootstrap давал 12 px по бокам — по норме 16 px */
  .footer-bg > .container{ padding-left:16px !important; padding-right:16px !important; }
  /* нижнее меню телефона: подписи стояли в 12 px от края панели */
  .main-floating-menu > a{ padding:16px 0 !important; }
}


/* ==========================================================================
   TRADELOT — ШАГ 3 МАСТЕРА: ЧИТАЕМАЯ ПЛАШКА ОЖИДАНИЯ В АНАЛИТИКЕ (16.09.2026)
   --------------------------------------------------------------------------
   Замер _tl_contrast.js: span.ana-chip.ana-chip-wait «0 из 4» и «В лоте не
   указан адрес сайта» — текст --muted (#6c6883) на оранжевой подложке
   --warn-fill (#ff845c), контраст 2,2:1 при норме 4,5:1. Причина: в этом же
   слое правило «.ana-kpi-name, .ana-note, .ana-chip-wait … { color: var(--muted)
   !important }» стоит ПОЗЖЕ правила самой плашки и перекрывает её цвет.
   Подложку не трогаем (её задаёт слой плашек), правим только цвет текста:
   тёмный токен --ink даёт 7,0:1. Область — только шаг 3 мастера, чтобы не
   менять плашки на других страницах (там свои проверки контраста).
   --------------------------------------------------------------------------
   🔴 ЭТО ПРАВКА КОНТРАСТА, А НЕ ОТСТУПОВ. Правило меняет ТОЛЬКО цвет текста
   плашки ожидания: ни разметки, ни padding/margin, ни размеров оно не касается,
   поэтому блок подключения сервисов шага 3 (зона другого исполнителя) им не
   затронут. Решение владельца 16.09.2026: «цветовую строку .ana-chip-wait
   оставь — это исправление контраста (2,2:1 → читаемо)». НЕ УДАЛЯТЬ и не
   считать «чужим» правилом: без него плашка снова станет нечитаемой (2,2:1).
   Проверка: _tl_contrast.js по шагу 3 мастера даёт 0 нарушений.
   ========================================================================== */
.wiz-step[data-step-code="analytics"] .ana-chip-wait{ color:var(--ink, #1b1630) !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 2, ЧАСТЬ 54: ПРАВКИ ВЛАДЕЛЬЦА ПО ОФОРМЛЕНИЮ (16.09.2026)
   --------------------------------------------------------------------------
   Только оформление и тексты, логика не менялась. Шесть правок:
     1) /profile/tariffs — карточки тарифов «плоские» и во всю ширину контейнера:
        4 колонки на десктопе (≥1200), 2 на планшете (768–1199), 1 на телефоне
        (<768) — тот же вид, что на странице «Бизнес тарифы»;
     2) /business-tariffs — три пункта в шапке узкие (max-width 480 px), по центру,
        одной высоты, с ровными зазорами;
     3) «Возможности тарифа» — каждый блок карточкой (текст и картинка внутри
        карточки, без второй рамки внутри), текста в блоках добавлено;
     4) кабинет, боковое меню — убрана лишняя рамка вокруг всего меню и «обрывок»
        разделителя: вместо <hr> ровная линия на всю ширину;
     5) главная, «Как это работает» — 4 карточки с акцентным номером шага,
        одной высоты, с выровненными заголовками и текстом;
     6) кабинет, «Заказы» — понятная строка заказа (номер, лот, дата, сумма,
        статус, кнопка «Открыть»).
   Значения — из токенов темы и шкалы 4/8/12/16/24/32; белый текст — только на
   цветной заливке (--brand-fill / --on-fill), как требует §12.50 (часть 32).
   ========================================================================== */

/* ---------- 1. КАБИНЕТ: ТАРИФЫ — ПЛОСКИЕ КАРТОЧКИ ВО ВСЮ ШИРИНУ ---------- */
/* Секция тарифов в кабинете вынесена из узкой колонки (col-md-9 → col-12),
   поэтому карточки получают ту же ширину, что и на /business-tariffs.
   Рамку-обёртку не рисуем: карточки и так с границей и тенью (без «карточки в карточке»). */
.tl-tariffs-block{
  background:none;
  border:0;
  box-shadow:none;
  padding:0;
}
.tl-tariffs-block .profile-tariffs-form{ margin:0; }
.tl-tariffs-block .profile-tariffs-list.profile-tariffs-swiper{ padding:16px 0 0; margin-top:0 !important; }

/* одна сетка вместо слайдера: все тарифы видны сразу, стрелки не нужны */
.profile-tariffs-list.profile-tariffs-swiper .swiper-wrapper{
  display:grid !important;
  transform:none !important;
  transition:none !important;
  width:auto !important;
  align-items:stretch;
}
@media (min-width:1200px){
  .profile-tariffs-list.profile-tariffs-swiper .swiper-wrapper{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:24px;
  }
}
@media (min-width:768px) and (max-width:1199px){
  .profile-tariffs-list.profile-tariffs-swiper .swiper-wrapper{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
  }
}
@media (max-width:767px){
  .profile-tariffs-list.profile-tariffs-swiper .swiper-wrapper{
    grid-template-columns:1fr;
    gap:16px;
  }
}
@media (min-width:768px) and (max-width:1199px){
  .profile-tariffs-list.profile-tariffs-swiper .swiper-slide{
    width:auto !important; margin-right:0 !important;
  }
}
@media (max-width:767px){
  .profile-tariffs-list.profile-tariffs-swiper .swiper-slide{
    width:auto !important; margin-right:0 !important;
  }
  .profile-tariffs-swiper-prev,
  .profile-tariffs-swiper-next{ display:none !important; }
}

/* ---------- 2. /business-tariffs: ТРИ ПУНКТА В ШАПКЕ — УЗКИЕ И ПО ЦЕНТРУ ----------
   Было: строки растянуты на всю колонку (744 px) и выглядели громоздко.
   Стало: 480 px, по центру, одной высоты (min-height 52 px), зазор 12 px.
   Заливка и белый текст — прежние (--brand-fill + --on-fill), меняются только
   размеры и выравнивание. */
.tl-page-static .promo-business-header-container-list{
  display:grid;
  gap:12px;
  margin-top:20px;
  justify-items:center;
}
.tl-page-static .promo-business-header-container-list > div{
  width:100%;
  max-width:480px;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 20px;
  text-align:center;
}

/* ---------- 3. «ВОЗМОЖНОСТИ ТАРИФА» — БЛОКИ-КАРТОЧКИ ----------
   Было: секция-карточка, внутри неё ещё одна карточка-колонка с текстом и
   картинка рядом — текст выглядел узкой колонкой, а блок «растянутым».
   Стало: одна карточка на блок, внутри текст слева и картинка справа. */
.tl-biz-card-row{
  display:flex;
  align-items:center;
  gap:32px;
}
.tl-biz-card-text{ flex:1 1 58%; min-width:0; }
.tl-biz-card-art{ flex:0 0 auto; width:min(340px, 38%); }
.tl-biz-card-art img{ display:block; width:100%; height:auto; }
/* внутренняя колонка больше не карточка — рамка и подложка только у внешней */
.tl-biz-card .promo-business-section-container-title{
  background:none;
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:0;
  margin-top:0 !important;
}
.tl-biz-card .promo-business-section-container-title p + p{ margin-top:12px; }
@media (max-width:991px){
  .tl-biz-card-row{ flex-direction:column; align-items:flex-start; gap:20px; }
  .tl-biz-card-art{ width:100%; max-width:320px; }
}

/* ---------- 4. КАБИНЕТ: БОКОВОЕ МЕНЮ — БЕЗ ЛИШНЕЙ РАМКИ И «ОБРЫВКОВ» ----------
   Владелец: «странные линии/разделители внизу меню». Их было две:
   (а) слой границ обводил рамкой ВСЁ меню целиком (прямоугольник в 1 px от краёв
       боковой панели), (б) разделитель был тегом <hr> со своими отступами.
   Стало: рамки у контейнера меню нет, разделитель — ровная линия на всю ширину
   пунктов, отступы по шкале (16 px). */
.profile-user-sidebar .profile-user-sidebar-menu{
  border:0;
  border-radius:0;
  padding:0;
  background:none;
}
.profile-user-sidebar .profile-user-sidebar-menu .profile-user-sidebar-sep{
  /* ЛИНИЮ УБРАЛИ (проверка 17.09.2026: `div.profile-user-sidebar-sep` рисовал линию 1 px
     --line внутри карточки сайдбара). Владелец: «лишних линий внутри карточек нет» —
     разделяем группы меню отступом, а не чертой.
     ВАЖНО: ту же плашку печатает ИНЛАЙНОВЫЙ <style> компонента кабинета
     (`height:1px; margin:8px 0; background:var(--line)`) — он идёт после наших файлов,
     поэтому здесь нужен `!important`, иначе линия возвращается. */
  height:0 !important;
  min-height:0 !important;
  margin:16px 0 !important;
  border:0 !important;
  background:none !important;
}

/* ---------- 5. ГЛАВНАЯ: «КАК ЭТО РАБОТАЕТ» — КАРТОЧКИ С НОМЕРОМ ШАГА ----------
   Карточки уже одинаковой высоты (сетка), но номера шага как элемента не было —
   номер стоял цифрой внутри заголовка. Теперь номер — отдельная акцентная
   плашка (белый текст на фирменной заливке), заголовки и тексты выровнены. */
.tl-steps .tl-step{
  display:flex;
  flex-direction:column;
  padding:24px;
}
.tl-steps .tl-step .tl-step-num{
  width:40px;
  height:40px;
  flex:0 0 auto;
  background:var(--brand-fill);
  color:var(--on-fill);
  font-size:16px;
  font-weight:700;
  box-shadow:var(--sh-accent);
}
.tl-steps .tl-step .tl-step-t{ margin-top:16px; }
.tl-steps .tl-step .tl-step-d{ margin-top:12px; flex:1 1 auto; }
@media (min-width:768px){
  /* заголовки в одну высоту (максимум — две строки), чтобы тексты начинались ровно */
  .tl-steps .tl-step .tl-step-t{ min-height:calc(2 * 1.4em); }
}

/* ---------- 6. КАБИНЕТ: ПОНЯТНАЯ СТРОКА ЗАКАЗА ----------
   Было: «Заказ от ДАТА на сумму СУММА» + № строкой ниже + фото лота — по карточке
   непонятно, что за заказ. Стало: плашка статуса и номер в первой строке, дальше
   подписанные «Лот / Дата / Сумма», затем кнопка «Открыть» (карточка заказа). */
.profile-container-order-list{ gap:16px; }
.order-line-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:0 !important;
}
.order-line-num{
  font-size:13.5px;
  font-weight:600;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.order-line-body{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.order-line-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.order-line-label{
  flex:0 0 auto;
  min-width:64px;
  font-size:13px;
  color:var(--muted);
}
.order-line-value{
  font-size:15px;
  font-weight:600;
  color:var(--ink);
}
.order-line-amount{ font-size:17px; }
.order-line-lot-link{
  color:var(--brand-hover);
  font-weight:600;
  text-decoration:none;
}
.order-line-lot-link:hover{
  color:var(--brand-fill);
  /* подчёркивания нет и при наведении — требование владельца 16.09.2026 (см. часть 62) */
  text-decoration:none;
}



/* --------------------------------------------------------------------------
   ЧАСТЬ 54-Б: ТРИ ПУНКТА В ШАПКЕ /business-tariffs — РОВНО ПО ЦЕНТРУ
   Замер после части 54 показал смещение на 5 px влево: у пунктов, кроме
   последнего, в старой теме стоит margin-right:10 px (main.css:7205), из-за
   него центрировалась не «плитка» 480 px, а «плитка + 10 px». Обнуляем поля —
   зазор между пунктами задаёт сетка (gap:12px).
   -------------------------------------------------------------------------- */
.tl-page-static .promo-business-header-container-list > div{
  margin:0;
}



/* ==========================================================================
   TRADELOT — ЭТАП 3, ЧАСТЬ 55: КНОПКА СМЕНЫ АВАТАРА — РОВНО ПО ЦЕНТРУ КРУГА
   (уточнение владельца 16.09.2026)
   --------------------------------------------------------------------------
   Что было не так (замер, а не догадка). У одного и того же элемента сходились
   два правила:
     • старое, из темы: `.profile-user-sidebar-avatar-change{ left:0; top:0;
       right:0; bottom:0; display:none; backdrop-filter:blur(5px) }` — задумывался
       оверлей на весь круг, который появлялся при наведении;
     • новое (часть 24): `{ right:0; bottom:0; width:32px; height:32px }` — значок
       в углу.
   По правилам CSS при одновременно заданных left/right/width побеждают left и
   width, при top/bottom/height — top и height. Итог: значок 32×32 стоял в ЛЕВОМ
   ВЕРХНЕМ углу круга (замер до правки: круга left=147, значка left=149), а от
   старого оверлея осталась размытая подложка — отсюда «съехала» и «прыгает».
   --------------------------------------------------------------------------
   Что стало: кнопка — круг 44×44 в ЦЕНТРЕ круга с аватаром
   (`left:50%; top:50%; transform:translate(-50%,-50%)`), размеры, позиция и
   начертание значка одинаковы в ЛЮБОМ состоянии: обычное, наведение, свежее
   фото, отсутствие фото, профиль/левое меню кабинета/телефон.
   Наведение меняет ТОЛЬКО цвет заливки (никаких сдвигов и изменения размеров).
   Заливка — токен --brand-fill, текст и значок — --on-fill (правило §12.50,
   часть 32: на цветном фоне белый текст, 6,3:1).
   ========================================================================== */
.profile-user-sidebar-avatar{ position:relative; }

.profile-user-sidebar-avatar-change{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%, -50%) !important;
  margin:0 !important;
  width:44px !important;
  height:44px !important;
  min-width:44px;
  min-height:44px;
  max-width:44px;
  max-height:44px;
  box-sizing:border-box;
  display:flex !important;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-pill);
  background:var(--brand-fill);
  color:var(--on-fill);
  border:2px solid var(--surface);
  box-shadow:var(--sh-accent);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  cursor:pointer;
  z-index:3;
  transition:background-color .16s ease;
}

/* значок внутри — один размер во всех местах (было 32 px в теме и 16 px в части 24) */
.profile-user-sidebar-avatar-change i{
  font-size:20px !important;
  line-height:1 !important;
  color:var(--on-fill) !important;
}

/* наведение и фокус: меняется только цвет, геометрия та же */
.profile-user-sidebar-avatar-change:hover,
.profile-user-sidebar-avatar-change:focus-visible{
  background:var(--brand-fill-hover, var(--brand-hover));
  transform:translate(-50%, -50%) !important;
}

/* фокус с клавиатуры видно (кнопка доступна с Tab) */
.profile-user-sidebar-avatar-change:focus-visible{
  outline:2px solid var(--brand-fill);
  outline-offset:2px;
}


/* ============================================================================
   СТРОКИ «ГОТОВНОСТИ АНАЛИТИКИ» (класс .ana-service-slot)
   Мастер публикации, шаг «Аналитика и финансы» + страница «Аналитика лота».

   ⚠️ ОТСТУПЫ ЭТИХ СТРОК ПРАВЯТСЯ ЗДЕСЬ (перенесено из inline-стилей и из стилей
   компонента Analytics по просьбе координатора 17.09.2026: «не используй
   inline-стили — из-за них вёрстку невозможно починить из CSS»).
   Значения !important нужны, потому что блок стилей компонента печатается
   в теле страницы (позже этого файла) и без !important перебивал бы эти правила.

   Замер после переноса: в мастере 12px 14px (было inline), в кабинете
   «Аналитика лота» строки остаются 16px 18px — их задаёт более специфичное
   правило `.col-md-9 .ana-service` (оно выше в этом файле).
   ============================================================================ */
.ana-service-slot{ padding:12px 14px !important; margin-bottom:8px !important; }
.ana-service-slot .ana-service-name{ font-size:15px !important; }
.ana-service-slot .ana-service-hint{ margin-top:6px !important; }

/* ==========================================================================
   TRADELOT — ЭТАП 3, ЧАСТЬ 56: КАРТОЧКИ КАБИНЕТА — КАК НА САЙТЕ (16.09.2026)
   --------------------------------------------------------------------------
   Указание владельца: карточки и блоки кабинета оформить так же, как будет на
   сайте —
     • заметное скругление: карточки 16–18 px, внутренние элементы 12–14 px;
     • лёгкая МЯГКАЯ тень вместо жёсткой рамки;
     • внутренние отступы 20–24 px;
     • аккуратный ховер (без подчёркиваний);
     • без лишних линий-разделителей внутри карточек.

   🔑 ЧТОБЫ КАБИНЕТ И САЙТ СОВПАЛИ. Значения берутся из ОБЩИХ токенов карточек
   (--card-radius, --card-shadow, --card-bg, --card-border), которые объявляет
   общий слой карточек для всего сервиса. Мои значения — только РЕЗЕРВНЫЕ
   (fallback внутри var()) и лежат в том же диапазоне, что просил владелец:
   радиус карточки 17 px (16–18), внутренний 13 px (12–14), мягкая тень,
   отступы 20–24 px. Как только общий слой объявит токены — кабинет подхватит их
   автоматически, подставлять руками ничего не нужно.
   ⚠️ Если финальный --card-radius окажется БЕЗ единиц (например «17», а не
   «17px»), значение станет недействительным и радиус обнулится — тогда строку
   надо заменить на calc(var(--card-radius) * 1px). Проверяется замером
   (_ui_style_probe.js → «радиус=»).

   Рамку не убираем совсем, а делаем ПРОЗРАЧНОЙ: ширина 1 px остаётся, поэтому
   ничего не сдвигается и не «дёргается» (проверено замером размеров карточек
   до и после).
   ========================================================================== */
:root{
  /* резервные значения кабинета (диапазон владельца) */
  --cabinet-card-radius:var(--card-radius, 17px);
  --cabinet-card-inner-radius:var(--card-inner-radius, 13px);
  --cabinet-card-shadow:var(--card-shadow, 0 1px 2px rgba(27, 22, 48, .04), 0 10px 26px rgba(27, 22, 48, .06));
  --cabinet-card-shadow-hover:var(--card-shadow-hover, 0 2px 5px rgba(27, 22, 48, .05), 0 14px 34px rgba(27, 22, 48, .09));
  --cabinet-card-bg:var(--card-bg, var(--surface));
  --cabinet-card-border:var(--card-border, transparent);
}

/* ---------- 1. КАРТОЧКИ КАБИНЕТА: РАДИУС 17, МЯГКАЯ ТЕНЬ, ОТСТУП 24 ---------- */
body .col-md-9 > .my-tabs-content,
body .col-md-9 > .my-tabs-content-container,
body .col-md-9 > .profile-settings-section,
body .col-md-9 > .profile-verification-container,
body .col-md-9 > .profile-wallet-info,
body .col-md-9 > .profile-home-sections,
body .col-md-9 > .ad-analytics,
body .col-md-9 > .ana-acc,
body .col-md-9 > .payout-block,
body .col-md-9 > .watch-block,
body .col-md-9 > .tl-tariffs-block,
body .col-md-9 .tl-cabhead,
body .col-md-9 .tl-lot-card,
body .col-md-9 .profile-container-order-list,
body .col-md-9 .ad-card-content-item,
body .col-md-9 .watch-item,
body .col-md-9 .profile-settings-section-item,
body .col-md-9 .profile-user-card,
body .profile-user-sidebar{
  border-radius:var(--cabinet-card-radius);
  border-color:var(--cabinet-card-border);
  background:var(--cabinet-card-bg);
  box-shadow:var(--cabinet-card-shadow);
}

/* строки лотов и диалоги — тоже карточки кабинета */
body .col-md-9 .tl-lot-row,
body .col-md-9 .chat-dialogues-item{
  border-radius:var(--cabinet-card-radius);
  border-color:var(--cabinet-card-border);
  background:var(--cabinet-card-bg);
  box-shadow:var(--cabinet-card-shadow);
}

/* отступы внутри карточек — 20–24 px (было 18/20 у строки лота) */
body .col-md-9 .tl-lot-row{ padding:20px 22px; }
body .col-md-9 .profile-container-order-list{ padding:22px 24px; }

/* ---------- 2. ВНУТРЕННИЕ ЭЛЕМЕНТЫ: РАДИУС 13, БЕЗ ЛИШНЕЙ РАМКИ ---------- */
body .col-md-9 .ana-acc-open,
body .col-md-9 .ana-acc-item,
body .col-md-9 .ana-service,
body .col-md-9 .ana-field,
body .col-md-9 .ana-notice,
body .col-md-9 .ana-note,
body .col-md-9 .ana-kpi,
body .col-md-9 .payout-card,
body .col-md-9 .payout-calc-result-item,
body .col-md-9 .watch-summary-item,
body .col-md-9 .tl-lot-icon,
body .col-md-9 .tl-hint,
body .col-md-9 .params-form,
body .col-md-9 .list-group,
body .profile-user-sidebar-menu > a{
  border-radius:var(--cabinet-card-inner-radius);
}

/* ---------- 3. АККУРАТНЫЙ ХОВЕР (без подчёркиваний и без сдвигов) ----------
   Меняются только тень и цвет рамки: ни размеры, ни позиция — чтобы карточка
   не «прыгала» под курсором. */
body .col-md-9 .tl-lot-row:hover,
body .col-md-9 .profile-container-order-list:hover,
body .col-md-9 .profile-settings-section-item:hover,
body .col-md-9 .watch-item:hover,
body .col-md-9 .tl-lot-card:hover{
  box-shadow:var(--cabinet-card-shadow-hover);
  border-color:var(--brand-tint-2);
}
body .col-md-9 .tl-lot-row a,
body .col-md-9 .tl-lot-row a:hover,
body .col-md-9 .profile-container-order-list a,
body .col-md-9 .profile-container-order-list a:hover,
body .profile-user-sidebar a,
body .profile-user-sidebar a:hover{
  text-decoration:none !important;
}

/* ---------- 4. БЕЗ ЛИШНИХ ЛИНИЙ-РАЗДЕЛИТЕЛЕЙ ВНУТРИ КАРТОЧЕК ----------
   Замер до правки: внутри карточек кабинета и в боковом меню линий-разделителей
   не осталось (0). Правило оставлено страховкой: если тема снова напечатает
   <hr> внутри карточки, он не появится. */
body .col-md-9 hr,
body .profile-user-sidebar hr{
  display:none !important;
}

/* ---------- 5. ТАРИФЫ И БЛОКИ, КОТОРЫЕ Я ДЕЛАЛ, — ТОТ ЖЕ РАДИУС И ТЕНЬ ---------- */
.tl-tariff-card{
  border-radius:var(--cabinet-card-radius);
  box-shadow:var(--cabinet-card-shadow);
  background:var(--cabinet-card-bg);
}
/* обычные тарифы: боковых рамок нет, остаётся только фирменная полоса сверху */
.tl-tariff-card:not([data-recommended]){ border-color:var(--cabinet-card-border); }
.tl-tariff-card:not([data-recommended])[data-index]{ border-top-color:var(--tc); }
/* «Популярный» остаётся выделенным рамкой — это осознанный акцент (часть 22/23) */
.tl-tariff-card[data-recommended]{ border-color:var(--brand); }
.tl-biz-card,
.tl-step,
.promo-business-header-container-list > div{
  border-radius:var(--cabinet-card-radius);
  box-shadow:var(--cabinet-card-shadow);
}
/* строка «аукцион» сохраняет свой светлый контур — это пометка состояния */
body .col-md-9 .tl-lot-row.is-auction{ border-color:var(--border-veil, var(--border)); }



/* ==========================================================================
   TRADELOT — ЭТАП 3, ЧАСТЬ 56-Б: КАБИНЕТ ПЕРЕВЕДЁН НА ОБЩИЕ ТОКЕНЫ КАРТОЧЕК
   (16.09.2026, после того как общий слой объявил токены)
   --------------------------------------------------------------------------
   Общий слой карточек (`tradelot-borders.css`) объявил ЕДИНЫЕ токены сервиса:
     --card-radius:20px, --card-radius-inner:14px, --card-bg, --card-border,
     --card-shadow:var(--sh-2), --card-shadow-hover:var(--sh-3),
     --card-pad:22px, --card-pad-inner:16px, --card-hover-lift:-2px,
     --card-transition — и прямо просит кабинеты использовать их же, «чтобы вид
     не разъезжался». Поэтому кабинет теперь берёт значения ТОЛЬКО оттуда,
     своих чисел в оформлении не осталось.

   1) Исправлена моя ошибка в части 56: внутренний радиус брался из имени
      `--card-inner-radius`, которого нет (в общем слое токен называется
      `--card-radius-inner`) — из-за этого внутренние элементы кабинета
      получали 13 px вместо общих 14 px. Теперь имя верное.
   2) Карточки КАБИНЕТА, которых нет в списке общего слоя, получают ровно тот
      же вид (боковая панель, домашние секции, табы, аналитика, выплаты,
      «Комиссия и выплаты», секция тарифов) — те же токены, без своих чисел.
   3) Отступы внутри карточек — из --card-pad (22 px, у крупных секций 24 px).
   4) Ховер — из общих токенов: тень --card-shadow-hover, подъём
      --card-hover-lift, переход --card-transition; у плотных строк подъёма нет.
   5) Линии-разделители внутри карточек не рисуются (см. часть 56, правило для <hr>).

   ⚠️ ЗАМЕЧАНИЕ ВЛАДЕЛЬЦУ (одно место правки): в общем слое --card-radius = 20 px,
   а мне назван диапазон 16–18 px. Я взял ОБЩЕЕ значение, чтобы кабинет и сайт
   совпадали; если нужен 17 px — это одна строка в общем слое (--card-radius),
   кабинет подхватит её сам.
   ========================================================================== */

/* 1. исправление имени общего токена внутреннего радиуса */
:root{
  --cabinet-card-inner-radius:var(--card-radius-inner, 14px);
}

/* 2. карточки кабинета, которых нет в списке общего слоя — те же токены */
body .col-md-9 > .my-tabs-content,
body .col-md-9 > .my-tabs-content-container,
body .col-md-9 > .profile-settings-section,
body .col-md-9 > .profile-verification-container,
body .col-md-9 > .profile-wallet-info,
body .col-md-9 > .profile-home-sections,
body .col-md-9 > .ad-analytics,
body .col-md-9 > .ana-acc,
body .col-md-9 > .payout-block,
body .col-md-9 > .watch-block,
body .col-md-9 > .tl-tariffs-block,
body .col-md-9 .tl-cabhead,
body .col-md-9 .tl-lot-card,
body .col-md-9 .profile-container-order-list,
body .col-md-9 .watch-item,
.profile-user-sidebar{
  background-color:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  transition:var(--card-transition);
}

/* строки лотов и диалогов кабинета — тоже карточки (общие токены, без подъёма) */
body .col-md-9 .tl-lot-row,
body .col-md-9 .chat-dialogues-item{
  background-color:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  transition:var(--card-transition);
}

/* 3. отступы внутри карточек — 20–24 px (общий токен) */
body .col-md-9 .tl-lot-row,
body .col-md-9 .chat-dialogues-item{ padding:var(--card-pad, 22px); }
body .col-md-9 .profile-container-order-list{ padding:var(--card-pad, 22px) 24px; }
body .col-md-9 > .my-tabs-content,
body .col-md-9 > .my-tabs-content-container,
body .col-md-9 > .profile-settings-section,
body .col-md-9 > .profile-verification-container,
body .col-md-9 > .profile-wallet-info,
body .col-md-9 > .profile-home-sections,
body .col-md-9 > .ad-analytics,
body .col-md-9 > .ana-acc,
body .col-md-9 > .payout-block,
body .col-md-9 > .watch-block,
body .col-md-9 > .tl-tariffs-block,
body .col-md-9 .tl-cabhead{ padding:24px; }

/* 4. ховер: как на сайте — усиление тени и лёгкий подъём (общие токены) */
body .col-md-9 .tl-lot-card:hover,
body .col-md-9 .watch-item:hover,
body .col-md-9 .profile-container-order-list:hover{
  box-shadow:var(--card-shadow-hover);
  transform:translateY(var(--card-hover-lift));
  border-color:var(--border);
}
/* плотные строки не поднимаем — только тень (как в общем слое) */
body .col-md-9 .tl-lot-row:hover,
body .col-md-9 .chat-dialogues-item:hover{
  box-shadow:var(--card-shadow-hover);
  border-color:var(--border);
  transform:none;
}

/* 5. полосу-акцент у карточки тарифа не перебиваем (общий слой задаёт её сверху) */
.tl-tariff-card:not([data-recommended]){
  border-color:var(--card-border);
  border-top-color:var(--tc, var(--brand));
  border-top-width:4px;
  border-top-style:solid;
}

/* 6. строка «аукцион» сохраняет свой светлый контур — это пометка состояния */
body .col-md-9 .tl-lot-row.is-auction{ border-color:var(--border-veil); }



/* ==========================================================================
   TRADELOT — ЧАСТЬ 56-В: МЕЛОЧИ ПОСЛЕ ПЕРЕВОДА НА ОБЩИЕ ТОКЕНЫ (16.09.2026)
   1) Блоки «Возможности тарифа» на /business-tariffs были с самой лёгкой тенью
      (--sh-1 от правила «каждый блок статической страницы — карточка»): привожу
      к общей тени карточек --card-shadow, чтобы совпадало со всем сервисом.
   2) Секция тарифов кабинета (.tl-tariffs-block) намеренно БЕЗ рамки и фона:
      карточки тарифов и так карточки, «карточка в карточке» не нужна — правило
      закрепляю явно, чтобы слой карточек её не подхватил.
   ========================================================================== */
body .tl-page-static > .tl-biz-card{ box-shadow:var(--card-shadow); }

.tl-tariffs-block,
.col-12 > .tl-tariffs-block{
  background:none;
  border:0;
  box-shadow:none;
  padding:0;
}



/* ==========================================================================
   TRADELOT — ЧАСТЬ 56-Г: ОТСТУПЫ КАРТОЧЕК КАБИНЕТА — ИЗ ОБЩЕГО ТОКЕНА --card-pad
   (16.09.2026)
   --------------------------------------------------------------------------
   Общий слой карточек задаёт отступы токеном --card-pad: 22 px на десктопе и
   18 px на телефоне (медиазапрос ≤767 px). У меня в части 56-Б стояли жёсткие
   24 px — на телефоне кабинет отличался бы от остального сервиса. Перевожу все
   карточки кабинета на токен: на десктопе 22 px, на телефоне 18 px — ровно как
   на сайте. Никаких «своих» чисел в оформлении карточек кабинета не осталось.
   ========================================================================== */
body .col-md-9 > .my-tabs-content,
body .col-md-9 > .my-tabs-content-container,
body .col-md-9 > .profile-settings-section,
body .col-md-9 > .profile-verification-container,
body .col-md-9 > .profile-wallet-info,
body .col-md-9 > .profile-home-sections,
body .col-md-9 > .ad-analytics,
body .col-md-9 > .ana-acc,
body .col-md-9 > .payout-block,
body .col-md-9 > .watch-block,
body .col-md-9 .tl-cabhead,
body .col-md-9 .tl-lot-card,
body .col-md-9 .watch-item,
body .col-md-9 .profile-container-order-list,
body .col-md-9 .tl-lot-row,
body .col-md-9 .chat-dialogues-item,
.profile-user-sidebar{
  padding:var(--card-pad);
}

/* ============================================================================
   СТРОКИ «ГОТОВНОСТИ АНАЛИТИКИ» — ТЕПЕРЬ КАРТОЧКИ (17.09.2026)
   Мастер публикации, шаг «Аналитика и финансы» + страница «Аналитика лота».

   Слова владельца: «Переделать! лысо очень, и оформления нет» и «квадратные
   бордеры ничего не нужны, нужно закруглённые как везде и красивые!».

   Было: строки с ПРЯМЫМИ углами (border-radius: 0 из tradelot-borders.css,
   там же рамка по кругу) и линией-разделителем между строками; значка и описания
   не было вовсе — отсюда «лысо».

   Стало: каждая строка — внутренняя карточка 14 px со светлой рамкой и мягкой
   подложкой, со значком в круге, названием, коротким описанием и плашкой
   состояния; строки разделены ОТСТУПОМ 12 px, а не линией.

   ⚠️ Селектор с #analyticsReadiness нужен, чтобы перебить `border-radius: 0`
   из tradelot-borders.css (у него специфичность 0,1,0, а тут 1,1,0 — файл
   подключается последним, поэтому без id правило проигрывало). Значения
   !important внутри — там, где их уже использует main.css:14797 (отступы строк
   перенесены сюда по просьбе координатора 17.09.2026).
   ============================================================================ */
#analyticsReadiness .ana-service-slot{
  border:1px solid var(--card-border, var(--border-soft)) !important;
  border-radius:14px !important;
  background:var(--surface-2, #f6f4fd);
  padding:16px 18px !important;
  margin:0 0 12px !important;
  box-shadow:none;
  display:block;
}
/* линия-разделитель между строками больше не нужна: строки разделяет отступ */
#analyticsReadiness .ana-service-slot + .ana-service-slot{
  border-top:1px solid var(--card-border, var(--border-soft)) !important;
  margin-top:0 !important;
}
#analyticsReadiness .ana-service-slot:last-child{ margin-bottom:0 !important; }

#analyticsReadiness .ana-service-slot .ana-service-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
#analyticsReadiness .ana-slot-icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--accent-tint, #efeaff);
  color:var(--accent, #6640f4);
  font-size:20px;
  line-height:1;
}
#analyticsReadiness .ana-slot-text{ flex:1 1 auto; min-width:0; }
#analyticsReadiness .ana-service-name{ font-size:15px !important; font-weight:700; color:var(--ink, #1b1630); }
#analyticsReadiness .ana-service-desc{ margin-top:4px; font-size:13px; line-height:1.45; color:var(--muted, #6c6883); }
#analyticsReadiness .ana-service-head > .ana-chip{ flex:0 0 auto; align-self:flex-start; }
#analyticsReadiness .ana-slot-source{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  padding-left:54px;
  font-size:13px;
  color:var(--ink-2, #3a3550);
}
#analyticsReadiness .ana-service-hint{
  margin-top:10px !important;
  padding-left:54px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted, #6c6883);
}
#analyticsReadiness .ana-service-hint a{ color:var(--accent, #6640f4); text-decoration:none !important; }
#analyticsReadiness .ana-notice{ border-radius:14px !important; }

@media (max-width:767px){
  #analyticsReadiness .ana-service-slot{ padding:14px !important; }
  #analyticsReadiness .ana-slot-source,
  #analyticsReadiness .ana-service-hint{ padding-left:0; }
}


/* ============================================================================
   ПРИЁМКА 17.09.2026 — ОТСТУПЫ И РАДИУСЫ ПО СИСТЕМЕ (20 / 14 / 12)
   Замечание приёмки: у компонентов остались квадратные углы и «не свои» отступы
   (.lk-vis — 18 px вместо 20; .params-form-item, .mini-avatar, .tl-lot-head,
   .tl-faq-item, .container-item-images — без радиуса). Правим только значения,
   разметку и классы не трогаем.
   ============================================================================ */

.lk-vis{ padding:20px; border-radius:20px; }

.params-form-item{ border-radius:14px; }

.mini-avatar{ border-radius:12px; overflow:hidden; }
.mini-avatar img{ border-radius:12px; }

.tl-lot-head{ border-radius:14px; }

.tl-page-static .tl-faq-item{ border-radius:14px; }
.tl-faq-item{ border-radius:14px; }

.container-item-images{ border-radius:20px; }
.container-item-grid .container-item-images{ border-radius:14px; }
/* ПРИЁМКА 17.09.2026: зазор «цепочка разделов → заголовок шага» был 25 px,
   норма мастера — 22 px (как все остальные зазоры шагов). */
.ad-create-options-category-chain { margin-bottom: 22px; }
/* ============================================================================
   ПРИЁМКА 17.09.2026 — ТЕЛЕФОН: МАСТЕР И СООБЩЕНИЕ ОБ ОБНОВЛЕНИИ
   Замер при 390 px: ширина документа 717 px, контейнер шага .ad-create-main —
   550 px, приглашение .create-guide — 550 px (горизонтальная прокрутка страницы).
   Сужаем их и ограничиваем отчёт об обновлении шириной экрана: сообщение
   остаётся на месте и читается, ничего не «уезжает» вбок.
   ============================================================================ */
@media (max-width: 575px) {
  .ad-create-main,
  .ad-create-options-container,
  .ad-edit-options-container,
  .wiz,
  .wiz-step { min-width: 0; max-width: 100%; }

  .create-guide,
  .create-guide-head,
  .create-guide-steps,
  .create-guide-step,
  .create-guide-text,
  .create-guide-title,
  .create-guide-sub { max-width: 100%; min-width: 0; box-sizing: border-box; }

  .wiz-services { grid-template-columns: minmax(0, 1fr); }

  .ana-run-report { max-width: calc(100vw - 60px); }
}
/* ПРИЁМКА 17.09.2026 (продолжение): плашка состояния сервиса не переносила текст —
   span.sbadge-chip растягивался до 661 px и тянул за собой всю страницу
   (замер при 390 px: ширина документа 717 px). Разрешаем перенос строк. */
@media (max-width: 575px) {
  .wiz-services .sbadge-chip,
  .wiz-services .sbadge-actions-ok,
  .wiz-services .ana-chip { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
  .wiz-services .sbadge-row,
  .wiz-services .sbadge-actions { flex-wrap: wrap; min-width: 0; }
}
/* ПРИЁМКА 17.09.2026 (продолжение 2): чипы-плашки в шапках блоков аналитики
   (.adf-head-chip, .ana-chip) не переносили текст и растягивали страницу
   при 390 px. Разрешаем перенос и ограничиваем ширину. */
@media (max-width: 575px) {
  .wiz .adf-head-chip,
  .wiz .ana-chip,
  .wiz .badge,
  .wiz .sbadge-chip { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }

  .wiz .adf-block-head,
  .wiz .adf-head,
  .wiz .ana-run-head { flex-wrap: wrap; min-width: 0; }
}
/* ПРИЁМКА 17.09.2026 (продолжение 3): ряд кнопок карточки сервиса на телефоне
   не переносился (.sbadge-actions flex-wrap: nowrap) — кнопки уезжали за экран
   (замер: button 102 px при right 460 на экране 390). */
@media (max-width: 575px) {
  .wiz-services .sbadge-actions { flex-wrap: wrap; }
  .wiz-services .sbadge-actions .btn-custom-mini { white-space: normal; }
}
/* ============================================================================
   TRADELOT — ЛОТЫ-ПРИМЕРЫ В БЛОКЕ «ДАННЫЕ В ЛОТАХ» (17.09.2026, п.8 чекпоинта).

   Требование владельца: видимый баннер «Это пример. Выдуманные данные, покупка
   невозможна», компактный список «категория → пример» (каждая строка ведёт на
   карточку примера), оформление в единой системе: скругление 20, мягкая тень,
   внутри 22 px, данные сеткой «подпись → значение», цифры крупно с источником и
   датой; на телефоне — аккуратный столбик.

   Только дописано в конец main.css (правило проекта: main.css не правим внутри).
   ============================================================================ */

/* --- 1. Плашки «Пример» (сверху блока и внутри карточки) ------------------ */
.tl-about-data-mark,
.tl-ex-mark{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:var(--warn-tint);
  color:var(--warn-ink);
  border:1px solid var(--warn-tint-2, #f6dfc2);
  border-radius:var(--r-sm);
  padding:12px 16px;
  font-size:14px;
  font-weight:600;
  line-height:1.45;
}
.tl-about-data-mark{ margin-bottom:22px; }
.tl-ex-mark{ margin-bottom:18px; }
.tl-about-data-mark i,
.tl-ex-mark i{
  flex:0 0 auto;
  font-size:19px;
  line-height:1.25;
  color:var(--warn);
}

/* --- 2. Компактный список «категория → пример» --------------------------- */
.tl-ex-list{
  margin-top:26px;
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:22px;
}
.tl-ex-list-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 6px;
  font-size:15px;
  font-weight:700;
  color:var(--ink);
}
.tl-ex-list-title i{ color:var(--brand); font-size:19px; }
.tl-ex-list-note{
  margin:0 0 14px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted);
}
.tl-ex-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 22px;
  grid-template-areas:
    "cat  go"
    "name go"
    "fact go";
  align-items:center;
  gap:2px 12px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  padding:16px 18px;
  color:inherit;
  text-decoration:none;
}
.tl-ex-row + .tl-ex-row{ margin-top:12px; }
.tl-ex-row:hover{ border-color:var(--brand-tint-2); background:var(--brand-tint); }
.tl-ex-row-cat{
  grid-area:cat;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand);
}
.tl-ex-row-title{
  grid-area:name;
  font-size:14.5px;
  font-weight:600;
  line-height:1.35;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.tl-ex-row-fact{
  grid-area:fact;
  font-size:12.5px;
  line-height:1.4;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.tl-ex-row-go{
  grid-area:go;
  justify-self:end;
  font-size:18px;
  color:var(--brand);
}

/* --- 3. Карточка примера: категория, цена, подвал ------------------------ */
.tl-about-data-example-cat{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--brand);
}
.tl-about-data-price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 10px;
  margin-top:14px;
  padding:14px 18px;
  border-radius:12px;
  background:var(--surface);
}
.tl-about-data-price-val{
  font-size:20px;
  font-weight:800;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}
.tl-about-data-price-note{
  font-size:12px;
  color:var(--muted);
}
.tl-ex-foot{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:14px;
}
.tl-ex-foot-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:flex-start;
  font-size:13.5px;
  font-weight:700;
  color:var(--brand-hover);
}
.tl-ex-foot-link:hover{ color:var(--brand-active); }
.tl-ex-foot-note{
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

/* --- 4. Некликабельные адреса в примере (карточка лота) ------------------ */
.ad-url-chip-text{
  font-size:14px;
  font-weight:600;
  color:var(--ink-2);
  overflow-wrap:anywhere;
}
.ana-social-url-plain{
  font-weight:600;
  color:var(--ink-2);
  overflow-wrap:anywhere;
}

/* --- 5. Телефон: аккуратный столбик ------------------------------------- */
@media (max-width:991px){
  .tl-about-data-mark,
  .tl-ex-mark{ padding:12px 14px; font-size:13.5px; }
  .tl-ex-list{ padding:18px; border-radius:20px; }
  .tl-about-data-price-val{ font-size:19px; }
}
@media (max-width:575px){
  .tl-ex-list{ padding:16px; }
  .tl-ex-row{ grid-template-columns:minmax(0,1fr) 20px; padding:16px 14px; }
  .tl-ex-row-title{ font-size:14px; }
}
/* ============================================================================
   TRADELOT — ЛОТ-ПРИМЕР В КАРТОЧКЕ ЛОТА (17.09.2026, п.8 чекпоинта).
   Пометка «Это пример», текстовое описание без автоссылок, отсутствие продавца
   и отсутствие переписки. Скругление 20/18, мягкая тень, внутри 22 px.
   ============================================================================ */
.tl-example-notice{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:var(--warn-tint);
  border:1px solid var(--warn-tint-2, #f6dfc2);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:22px;
  margin-bottom:20px;
}
.tl-example-notice > i{
  flex:0 0 auto;
  font-size:26px;
  line-height:1.15;
  color:var(--warn);
}
.tl-example-notice-body{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.tl-example-notice-body strong{
  font-size:15.5px;
  font-weight:800;
  line-height:1.35;
  color:var(--warn-ink);
}
.tl-example-notice-body span{
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink-2);
}
.tl-example-text{ color:var(--ink-2); line-height:1.6; }
.tl-example-seller{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14.5px;
  font-weight:700;
  color:var(--ink-2);
}
.tl-example-seller i{ color:var(--muted); font-size:17px; }
.tl-example-nochat{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:24px;
  padding:16px;
  border-radius:var(--r-sm);
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}
.tl-example-nochat i{ flex:0 0 auto; font-size:18px; color:var(--muted); }
@media (max-width:991px){
  .tl-example-notice{ padding:18px; border-radius:20px; gap:10px; }
  .tl-example-notice > i{ font-size:22px; }
}
/* Длинные значения в сетке «подпись → значение» (источники трафика, страницы
   в индексе): крупная цифра 22px у многословной строки ломала бы строку —
   для них отдельный, читаемый размер (§8 чекпоинта 17.09.2026). */
.tl-about-data-val.is-long{
  font-size:14.5px;
  font-weight:700;
  line-height:1.4;
  text-align:right;
  max-width:62%;
}
@media (max-width:991px){
  .tl-about-data-val.is-long{ max-width:100%; text-align:left; }
}
/* ============================================================================
   TRADELOT — ПРАВКИ ПОСЛЕ ЗАМЕРОВ БЛОКА ПРИМЕРОВ (17.09.2026).
   Замеры (Chrome, живые страницы):
     • 1440: наездов 0, обрезанных 0, слипшихся 0, «липких» 0;
     • 390: документ был шире экрана (scrollWidth 406 при clientWidth 390) —
       колонку сетки раздувала шапка карточки примера (min-content 329 px:
       «Пример» + категория + дата «обновлены» с nowrap), плюс кромки плашек
       «Пример» были 13–15 px вместо 16. Исправлено ниже.
   ============================================================================ */
.tl-about-data-cols{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
.tl-about-data-text,
.tl-about-data-example{ min-width:0; }
.tl-about-data-example-head{ flex-wrap:wrap; }
.tl-about-data-mark,
.tl-ex-mark{ padding:16px 18px; }
.tl-ex-row{ padding:16px 18px; }
@media (max-width:991px){
  .tl-about-data-cols{ grid-template-columns:minmax(0,1fr); }
  .tl-about-data-mark,
  .tl-ex-mark{ padding:16px; }
}
@media (max-width:575px){
  .tl-ex-row{ padding:16px; }
}

/* ==========================================================================
   TRADELOT — ЗНАЧКИ КАТЕГОРИЙ 3D: ЕДИНЫЙ ВИД ПЛИТОК (17.09.2026)
   --------------------------------------------------------------------------
   Владелец принёс объёмные (3D) значки. 8 файлов — его (dzen, max, pril,
   «tg bot», tg, vk, wb, youtube), для «Веб-сайты» и «Доменные имена» файлов не
   было — они нарисованы в том же стиле. Все 10 лежат в
   resources/view/web/assets/images/categories/<alias>.webp (512×512, один
   видимый размер 460 px, пропорции сохранены).

   Что здесь поправлено (по замерам _tl_cat_icons_probe.js):
     1) ДУБЛЬ ЗНАЧКА. Правила этапа «плоские SVG-маски» рисовали ВТОРУЮ иконку
        псевдоэлементом ::after: на /all, /shops и страницах категорий рядом с
        настоящим значком стоял плоский фирменный квадрат 44×44
        (замер «дубль-псевдоэлемент: 10 из 10 плиток» → стало 0).
     2) ПОДЛОЖКА. Белая плашка + padding под значком уменьшали рисунок и давали
        «квадрат в квадрате»; у 3D-значка свои скругления, блик и тень. Значок
        теперь показывается как есть: object-fit:contain, без подложки.
     3) РАЗМЕР. Один размер значка на всех плитках: 56 px (было 44 в каталоге,
        76 на главной, и 36 на телефоне — «плитки выглядели по-разному»).
         Пропорции не искажаются (object-fit:contain), ничего не обрезается.
     4) РАСКЛАДКА ПЛИТКИ-ЧИПА (/all, /shops, страницы категорий): имя слева,
        значок справа по центру. Раньше значок был position:absolute в углу и
        мог заезжать под длинное название.
   ========================================================================== */

/* --- 1. Значок = сам файл: без второй подложки, один размер, без искажений --- */
.tl-cat-icon,
.module-categories-items-custom-1-item .tl-cat-icon,
.module-categories-items-custom-2-item .tl-cat-icon,
.module-categories-items-custom-2-item-image .tl-cat-icon,
.module-categories-items-custom-3-item .tl-cat-icon,
.module-categories-items-custom-3-item-image .tl-cat-icon,
.home-widget-categories-item .tl-cat-icon,
.widget-categories-or-subcategories a .tl-cat-icon{
  width:56px !important;
  height:56px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  object-fit:contain !important;
  display:block !important;
  /* max-width обязателен: правило выше по файлу
     `.widget-categories-or-subcategories a img{ max-width:62% }` сжимало значок
     (замер на 768 px: 48×56 вместо 56×56 — значки становились разного размера). */
  max-width:none !important;
  min-width:0;
}

/* --- 2. Плитка-чип (/all, /shops, страницы категорий): значок сверху по центру,
       имя под ним — одинаково ровно на всех ширинах. Вариант «имя слева, значок
       справа» проверен и отвергнут: на 768 px плитка всего 123 px, текст сжимался
       до одной буквы в строке (замер: полоса текста 31 px, «В е б - с а й т ы»
       столбиком). --- */
.widget-categories-or-subcategories a{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px;
  height:auto !important;
  min-height:140px !important;
  padding:16px 12px !important;
}
.widget-categories-or-subcategories a > div{
  flex:0 1 auto;
  min-width:0;
  text-align:center;
}
.widget-categories-or-subcategories a .tl-cat-icon{
  position:static !important;
  margin:0 !important;
  flex:0 0 auto;
}

/* --- 3. Выбранная плитка: значок на светлой фирменной подложке. Иначе фиолетовый
       значок «Веб-сайты» сливается с фирменной заливкой выбранной плитки. --- */
.widget-categories-or-subcategories a.active .tl-cat-icon{
  background:var(--brand-tint) !important;
  border-radius:var(--r-sm) !important;
  padding:6px !important;
  box-shadow:var(--sh-1) !important;
}

/* --- 4. Гас им плоские SVG-маски-дубли (п.1 в шапке): вторая иконка в плитке --- */
.widget-categories-or-subcategories a::after{
  content:none !important;
  display:none !important;
}
.widget-categories-or-subcategories a img,
.widget-categories-or-subcategories a img.tl-cat-icon{
  display:block !important;
}

/* --- 5. Телефон: зазор и подложка выбранной плитки чуть меньше. РАЗМЕР ЗНАЧКА
       остаётся 56 px на всех ширинах — «один размер значка» у всех 10 плиток
       (проверено на 1440 / 1280 / 1100 / 768 / 390: 56×56 у всех). --- */
@media (max-width:767px){
  .widget-categories-or-subcategories a{
    gap:10px;
    padding:14px 10px !important;
    min-height:132px !important;
  }
  .widget-categories-or-subcategories a.active .tl-cat-icon{
    padding:5px !important;
  }
}

/* На телефоне строки «источник → подтверждено → дата» переносятся: зазор 6 px
   между перенесёнными частями читался как слипание (замер 390 px: 6 px).
   Класс используется только в этом блоке, поэтому правка безопасна. */
@media (max-width:991px){
  .tl-about-data-src{ row-gap:12px; }
}
/* --- Специфичность: слои contrast/spacing/borders подключаются ПОСЛЕ main.css,
   поэтому правила для уже существующих классов блока повышены до
   «.tl-about-data <класс>» — иначе они проигрывают tradelot-borders.css. --- */
.tl-about-data .tl-about-data-cols{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
.tl-about-data .tl-about-data-text,
.tl-about-data .tl-about-data-example{ min-width:0; }
.tl-about-data .tl-about-data-example-head{ flex-wrap:wrap; }
@media (max-width:991px){
  .tl-about-data .tl-about-data-cols{ grid-template-columns:minmax(0,1fr); }
  .tl-about-data .tl-about-data-src{ row-gap:12px; }
}
/* Плашка адреса лота у ПРИМЕРА: состояние «ссылка не открывается» — цвет
   предупреждения (обычное состояние «Видна всем» — фиолетовое). */
.ad-url-chip-state-example{
  background:var(--warn-tint) !important;
  color:var(--warn-ink) !important;
  font-weight:600;
}
/* Контраст: подписи внутри карточки примера стоят на подложке --brand-tint-2
   (карточка примера затемнена), поэтому --muted давал 3,95:1, а фирменный
   фиолетовый — 4,33:1 при норме 4,5:1 (замер _tl_contrast.js, главная, light).
   Переводим на токены с достаточным контрастом. */
.tl-ex-foot-note{ color:var(--ink-2); }
.tl-about-data-example-cat{ color:var(--brand-active); }
/* Пометки «Это пример» стоят на СВЕТЛОЙ подложке --warn-tint, которая в тёмной
   теме не меняется, а токены --ink-2/--warn-ink в тёмной теме светлеют: текст
   становился нечитаемым (замер _tl_contrast.js dark 1440: 1,32:1).
   Поэтому внутри плашек «Пример» цвета заданы явными тёмными значениями. */
.tl-about-data-mark,
.tl-ex-mark{ color:#7a4f08; }
.tl-about-data-mark i,
.tl-ex-mark i{ color:#a2630a; }
.tl-example-notice > i{ color:#a2630a; }
.tl-example-notice-body strong{ color:#7a4f08; }
.tl-example-notice-body span{ color:#4a3a1c; }
/* Тёмная тема: --brand (#6640f4) на тёмной подложке даёт 2,94:1 (замер
   _tl_contrast.js dark 1440: подписи категорий в списке примеров). Для текста и
   значков на подложке берём --brand-hover: в светлой теме #5533d8 (7,4:1),
   в тёмной — #9a80ff. */
.tl-ex-row-cat{ color:var(--brand-hover); }
.tl-ex-row-go,
.tl-ex-list-title i{ color:var(--brand-hover); }
/* Ссылка «Открыть пример лота целиком» стоит на фиолетовой подложке карточки
   (--brand-tint-2): в тёмной теме --brand-hover (#9a80ff) на ней давал 3,84:1.
   --brand-active подходит обеим темам: #4a2ec0 на #e2d9ff ≈ 6,3:1,
   в тёмной #b3a0ff на #3a2f6b ≈ 5,2:1. */
.tl-ex-foot-link{ color:var(--brand-active); }
.tl-ex-foot-link:hover{ color:var(--brand-hover); }

/* ==========================================================================
   TRADELOT — ДОВОДКА ЗНАЧКОВ КАТЕГОРИЙ И ПЛИТОК (17.09.2026, часть 2)
   --------------------------------------------------------------------------
   1) ЗНАЧКИ В МЕНЮ: в выпадающем меню «Каталог» в шапке и в мобильном меню
      категории показывались загруженными ФОТО (storage/images). Теперь там тот же
      объёмный значок, что в плитках: 25 px в шапке, 70 px в мобильной сетке
      (плитка 115 px). Источник — те же файлы
      resources/view/web/assets/images/categories/<alias>.webp (+ ?v=filemtime).
   2) ТЕЛЕФОН, БЛИЦ-ЦЕНА: в строке цены на 390/360 px плашка «Блиц-цена: 200 000 ₽»
      не влезала рядом с ценами и уезжала за правый край окна (замер 390: правый
      край 413 при окне 390 → переполнение 23 px; на 360 — 53 px). Разрешаем ПЕРЕНОС
      СТРОКИ: плашка целиком переезжает на следующую строку, сумма не рвётся.
   3) ПОДПИСИ ПЛИТОК на 768 px: плитка ~104 px, «Маркетплейсы» (95 px) не влезало и
      рвалось посередине слова («Маркетпле йсы») — переносим ПО ПРАВИЛАМ ЯЗЫКА
      (hyphens:auto → «Маркет-плейсы»), даём тексту больше места и кегль 13 px.
      Правило действует до 991 px; на телефоне (≤767) плитка шире, там подписи
      и так в одну строку.
   ========================================================================== */

/* --- 1. Объёмные значки категорий в меню вместо фотографий --- */
.big-catalog-menu-category-item > div img{
  width:25px; height:25px;
  object-fit:contain;
  display:block;
}
.mobile-grid-menu-category-item img{
  width:70px; height:70px;
  object-fit:contain;
  /* значки объёмные, со своей тенью: отступаем от кромки плитки на 6 px, чтобы
     скруглённый угол с overflow:hidden не срезал низ значка (фото срезалось так же) */
  right:6px; bottom:6px;
}

/* --- 2. Телефон: цена и блиц-цена переносятся, за окно ничего не выходит --- */
@media (max-width:575px){
  .tl-lot-col{ flex-wrap:wrap; row-gap:4px; }
  .tl-lot-blitz{ max-width:100%; }
}

/* --- 3. 768 px: подписи плиток переносятся по словам, а не по буквам --- */
@media (max-width:991px){
  .widget-categories-or-subcategories a{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .widget-categories-or-subcategories a > div{
    font-size:13px;
    word-break:normal;
    overflow-wrap:break-word;
    -webkit-hyphens:auto;
    hyphens:auto;
  }
}

/* ============================================================================
   TRADELOT — ПРАВКА ВЛАДЕЛЬЦА 17.09.2026 (вечер), блок «Данные в лотах»:
   «Справа слишком растянуто вниз. Надо урезать информацию в правом блоке (как
    раньше было — 3 штуки информации), а правый блок сделать аккуратно.
    Чтобы одной высоты всё было и не растянуто вниз».
   1) пилюля «Это пример…» вместо полосы во всю ширину (и на главной, и на карточке лота);
   2) колонки одной высоты (stretch) — карточка тянется по левому столбцу, рваной
      нижней границы нет, низ карточки прижат (margin-top:auto);
   3) строки метрик компактнее; 4) список «категория → пример» в две колонки.
   ============================================================================ */

/* --- 1. ПИЛЮЛЯ «ЭТО ПРИМЕР» (вместо баннера во всю ширину) ---------------- */
.tl-ex-pill,
.tl-example-pill{
  display:inline-flex;
  align-items:flex-start;
  gap:7px;
  width:auto;
  max-width:100%;
  background:var(--warn-tint);
  border:1px solid rgba(162,99,10,.30);
  border-radius:var(--r-pill);
  padding:6px 12px;
  font-size:12.5px;
  font-weight:700;
  line-height:1.32;
  color:#7a4f08;
}
.tl-ex-pill > i,
.tl-example-pill > i{
  flex:0 0 auto;
  font-size:15px;
  line-height:1.3;
  color:#a2630a;
}
.tl-ex-pill > span,
.tl-example-pill > span{ min-width:0; }
.tl-ex-pill-block{ margin-bottom:20px; }

/* строка «пилюля + короткое пояснение» рядом со статусом/заголовком карточки лота */
.tl-example-pill-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  margin-bottom:10px;
}
.tl-example-pill-note{
  font-size:12.5px;
  line-height:1.4;
  color:var(--muted);
  min-width:0;
}

/* --- 2. КОЛОНКИ ОДНОЙ ВЫСОТЫ ---------------------------------------------- */
.tl-about-data .tl-about-data-cols{ align-items:stretch; }
.tl-about-data .tl-about-data-text{ display:flex; flex-direction:column; }
.tl-ex-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.tl-ex-card-top > * + *{ margin-top:10px; }
.tl-ex-card-bottom{ margin-top:auto; padding-top:14px; }
.tl-ex-card-bottom > * + *{ margin-top:12px; }

/* --- 3. КОМПАКТНЫЕ СТРОКИ МЕТРИК: цифра справа, источник и дата мелким ----- */
.tl-ex-card .tl-about-data-rows{ margin-top:14px; gap:10px; }
.tl-ex-card .tl-about-data-row{ padding:12px 16px; }
.tl-ex-card .tl-about-data-row-top{ align-items:baseline; }
.tl-ex-card .tl-about-data-cap{ font-size:12px; }
.tl-ex-card .tl-about-data-val{ font-size:21px; }
.tl-ex-card .tl-about-data-src{ margin-top:6px; font-size:11.5px; row-gap:8px; }
.tl-ex-card .tl-about-data-src img{ width:16px; height:16px; }
.tl-ex-card .tl-about-data-price{ margin-top:10px; padding:12px 16px; }
.tl-ex-card .tl-about-data-price-val{ font-size:22px; }
.tl-ex-card .tl-about-data-foot{ margin-top:0; }
.tl-ex-card .tl-ex-foot{ margin-top:0; }

/* --- 4. СПИСОК «КАТЕГОРИЯ → ПРИМЕР»: ДВЕ КОЛОНКИ НА ШИРОКОМ ЭКРАНЕ -------- */
.tl-ex-list{ margin-top:26px; }
.tl-ex-list-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.tl-ex-list-title{ flex-wrap:wrap; }
.tl-ex-list-hint{
  margin-left:2px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
}
.tl-ex-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 20px;
  grid-template-rows:auto auto;
  grid-template-areas:none;
  align-items:center;
  gap:4px 10px;
  padding:12px 16px;
}
.tl-ex-row + .tl-ex-row{ margin-top:0; }
.tl-ex-row-main{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.tl-ex-row-cat{ grid-area:auto; }
.tl-ex-row-title{ grid-area:auto; }
.tl-ex-row-fact{ grid-column:1; grid-row:2; }
.tl-ex-row-go{ grid-column:2; grid-row:1 / span 2; }
@media (max-width:991px){
  .tl-ex-list-grid{ grid-template-columns:minmax(0, 1fr); }
  .tl-ex-card-bottom{ padding-top:12px; }
}
@media (max-width:575px){
  .tl-example-pill{ font-size:12px; padding:6px 10px; }
  .tl-ex-pill{ font-size:12px; padding:6px 10px; }
}
/* --- ПРАВКИ ПО ЗАМЕРАМ (17.09.2026, вечер, второй прогон _tl_layout.js) ------
   После компактной раскладки инструмент нашёл свои же «слипания» и «липкие»
   кромки — норма проекта: внутренний отступ карточки ≥16 px, зазор между
   соседними блоками ≥12 px. Приводим к норме:
     • строка списка «категория → пример»: отступ 12 → 16 px (текст стоял в 13 px
       от кромки плашки);
     • в карточке примера зазор «пилюля → категория» и «название → цена»:
       10 → 12 px;
     • зазор между пилюлей и пояснением на карточке лота при переносе: 8 → 12 px. */
.tl-ex-row{ padding:16px; }
.tl-ex-card-top > * + *{ margin-top:12px; }
.tl-ex-card .tl-about-data-price{ margin-top:12px; }
.tl-example-pill-row{ gap:12px; }
/* Зазор между строками метрик и до нижнего блока карточки примера — норма 12 px
   (замер _tl_layout.js: было 10 и 0 px). */
.tl-ex-card .tl-about-data-rows{ gap:12px; margin-bottom:12px; }
.tl-ex-card .tl-ex-card-bottom > * + *{ margin-top:12px; }

/* ==========================================================================
   TRADELOT — ПОДПИСИ ПЛИТОК КАТЕГОРИЙ НА ПЛАНШЕТЕ 768–991 px (17.09.2026)
   --------------------------------------------------------------------------
   Что было не так (замер _fix3_clip.js, Chrome, страница /veb-sayty, 768 px):
     плитка 104 px, текстовое поле 70 px, подпись «Маркетплейсы» — 95 px.
     Слово не влезало: сначала рвалось посередине («Маркетпле|йсы»), а после
     включения hyphens осталось ОБРЕЗАНИЕ — правый край строки 111 px при границе
     плитки 104 px, `a.scrollWidth − a.clientWidth` = 8 px: хвост слова срезан
     правилом overflow:hidden.
   Решение (владелец: «чуть увеличить ширину плитки»; уточнение 17.09.2026:
     «плитки 768–991: 4 в ряд»): на планшете плитки идут по ЧЕТЫРЕ в ряд (25 %)
     вместо шести (col-md-2). Замер после правки (_fix5_tiles_rows.js, 768 px):
     плитка 168 px (высота 140 px), 3 ряда (4 + 4 + 2) = 480 px;
     «Маркетплейсы» (97,6 px) — одна строка, обрезанных подписей 0 из 10.
   Про высоту контейнера: `.widget-categories-or-subcategories-hide` сейчас
     БЕЗ клиппинга (computed: overflow:visible, max-height:none — замер
     _fix5_hide_probe.js: clientH = scrollH = 480), поэтому высоту НЕ ограничиваем
     и правило max-height не пишем: третий ряд виден целиком на всех ширинах.
   Перенос по словам (word-break:normal) включён для подписи на ВСЕХ ширинах:
     выше по файлу у `.widget-categories-or-subcategories a` стоит break-word,
     из-за него подпись рвалась по буквам.
   ========================================================================== */
.widget-categories-or-subcategories a > div{
  word-break:normal;
  overflow-wrap:break-word;
}
@media (min-width:768px) and (max-width:991px){
  .widget-categories-or-subcategories .row > [class*="col-"]{
    flex:0 0 25%;
    max-width:25%;
  }
}
/* Контраст в тёмной теме: внутри карточки лота есть правило, которое красит
   вложенные span в цвет темы (--ink-2 → #d7d2ea), и текст пилюли «Это пример…»
   оказывался светлым на светлой подложке --warn-tint (замер _tl_contrast.js
   dark 1440: 1,32:1). Подложка плашки в тёмной теме не меняется, поэтому цвет
   текста пилюли задаём явно и с приоритетом — как это сделано в слое контраста. */
.tl-ex-pill > span,
.tl-example-pill > span{ color:#7a4f08 !important; }
.tl-ex-pill > i,
.tl-example-pill > i{ color:#a2630a !important; }

/* ==========================================================================
   TRADELOT — МОБИЛЬНАЯ СЕТКА КАТЕГОРИЙ: ПЛИТКА «ЗНАЧОК СВЕРХУ + ПОДПИСЬ ПОД НИМ»
   (правка владельца 17.09.2026, скриншот 390 px мобильного меню)
   --------------------------------------------------------------------------
   ЧТО БЫЛО НЕ ТАК (замер _tl_mobcat_probe.js, живой Chrome, мобильное меню):
     • значок 70x70 стоял `position:absolute; right:6px; bottom:6px`, то есть
       В ПРАВОМ НИЖНЕМ УГЛУ, а подпись шла сверху по всей ширине плитки и
       заходила на значок. Владелец: «подписи налезают на значки и убегают»;
     • 390 px: пересечение «значок x подпись» ненулевое у 6 плиток из 10,
       суммарная площадь пересечения 1795,9 px², худший зазор −17 px
       («Доменные имена», «Telegram каналы», «MAX каналы и чаты», «Яндекс Дзен»,
       «Telegram боты», «Youtube каналы»);
     • 360 px: 8 плиток из 10, 3323,3 px², худший зазор −38 px
       («MAX каналы и чаты» уезжали в ТРИ строки);
     • подпись рвалась ПОСЕРЕДИНЕ СЛОВА (word-break:break-word, унаследованный
       от .mobile-grid-menu-category-item): «Маркетплей|сы» на 390 px,
       «Маркетплей|сы» и «Приложен|ия» на 360 px — 1 и 2 разрыва соответственно;
     • кнопка «Полный каталог» была плиткой 161,3 x 115 px — «гигантский квадрат».

   ЧТО СДЕЛАНО:
     1) Сетка: 3 плитки в ряд через собственные отступы (6 px по бокам, 12 px
        снизу); старые «хвостовые» margin-right/-bottom (5 px) у плиток отменены —
        из-за них ширина плиток в ряду не совпадала.
     2) Плитка: вертикальный флекс «значок -> зазор 8 px -> подпись», все плитки
        одной высоты (min-height 112 px = 10 + 52 + 8 + 32 + 10).
     3) Значок: 52 px (было 70), в потоке, по центру, object-fit: contain.
        Подпись поэтому физически НЕ может пересечься со значком.
     4) Подпись: 12 px / line-height 16 px (две строки = 32 px), переносится
        ПО СЛОВАМ (word-break: normal, hyphens: none), разрыва внутри слова нет:
        поле подписи 94–104 px, а самое длинное неразрывное слово «Маркетплейсы» —
        87,7 px (замер _tl_mobcat_text.js, шрифт Manrope 600).
     5) Кнопка «Полный каталог» — компактная плашка во всю ширину блока
        (высота 44 px вместо плитки 115 px).

   Старые правила выше по файлу (.mobile-grid-menu-category-item на 115 px,
   img 70 px в правом нижнем углу, :not(:last-child) с margin) НЕ удалены —
   они перекрыты этим блоком (он ниже и специфичнее). Ничего не ломается.
   ========================================================================== */

/* --- 1. Сетка: три плитки в ряд, ровные отступы --------------------------- */
.mobile-grid-menu-categories .row{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  margin-left:-6px;
  margin-right:-6px;
}
.mobile-grid-menu-categories .row > [class*="col-"]{
  flex:0 0 33.3333%;
  max-width:33.3333%;
  padding:0 6px;
  margin:0 0 12px;
  display:flex;
}

/* --- 2. Плитка: значок сверху, подпись под ним, одна высота у всех -------- */
.mobile-grid-menu-category-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:100%;
  min-height:112px;
  height:auto;
  padding:10px 4px;
  border-radius:14px;
  overflow:hidden;
  position:static;
  box-sizing:border-box;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
  -webkit-hyphens:none;
}
/* отменяем старые «хвостовые» отступы (давали разную ширину плиток в ряду) */
.mobile-grid-menu-categories .mobile-grid-menu-category-item:not(:last-child){
  margin:0;
}

/* --- 3. Значок: 52 px, в потоке, по центру, не наезжает на подпись -------- */
.mobile-grid-menu-category-item img{
  position:static;
  right:auto;
  bottom:auto;
  width:52px;
  height:52px;
  flex:0 0 52px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}

/* --- 4. Подпись: две строки по словам, без разрыва внутри слова ----------- */
.mobile-grid-menu-category-item > div{
  position:static;
  z-index:auto;
  width:100%;
  min-width:0;
  min-height:32px;
  font-size:12px;
  line-height:16px;
  font-weight:600;
  text-align:center;
  color:var(--ink);
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
  -webkit-hyphens:none;
}

/* --- 5. Кнопка «Полный каталог»: компактная плашка во всю ширину блока ---- */
.mobile-grid-menu-categories .row > .btn-custom{
  flex:0 0 100%;
  max-width:100%;
  width:100%;
  min-height:44px;
  height:44px;
  margin:4px 0 0;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1.2;
  border-radius:12px;
  text-align:center;
}
/* ==========================================================================
   TRADELOT — ПРАВКА ВЛАДЕЛЬЦА 17.09.2026 (ночь): блок «Данные в лотах» на главной.
   --------------------------------------------------------------------------
   ЧТО БЫЛО НЕ ТАК (скриншот владельца со стрелкой):
     • слева НАД блоком висела вторая плашка «Это пример. Выдуманные данные,
       покупка невозможна» — ровно такая же уже есть на карточке примера справа.
       Владелец: «убрать тут, потому что уже есть справа». Плашка над блоком
       удалена из разметки (components/analytics-example.tpl), здесь CSS не нужен;
     • список «Примеры лотов по категориям» стоял НЕ в границах блока выше:
       белые строки списка начинались на 23 px правее и заканчивались на 23 px
       левее, чем заголовок и пункты блока «Данные в лотах» (замер 1665: строки
       208,5…1456,5 при блоке выше 185,5…1479,5). Владелец: «видно ниже левого
       блока, исправить» — то есть левая граница списка не совпадала с блоком.
   ЧТО СДЕЛАНО (только дописано в конец main.css, разметка не менялась):
     1) у группы-контейнера .tl-ex-list убраны собственная подложка, рамка, тень,
        скругление и внутренний отступ 22 px — поэтому её края, а вместе с ними и
        края строк, совпадают с .tl-about-data-cols (185,5 и 1479,5): левый край
        списка = левый край блока «Данные в лотах», правый = правому;
     2) строки списка стали такими же плашками, как пункты блока выше (подложка
        --surface-2, рамка --line-soft, радиус 14, внутри 16 px) — «единая система
        карточек», как требует проект, и строки снова читаются без серой группы;
     3) зазор между строками даёт сетка (gap 12 px), а не margin-top: правило
        «.tl-ex-list .tl-ex-row + .tl-ex-row», записанное в tradelot-borders.css
        (он подключается ПОСЛЕ main.css), в двухколоночной сетке уводило строки
        правой колонки вниз на 12 px — замер 1665: левая колонка 2191,7, правая
        2203,7. Селектор ниже на класс длиннее, поэтому слой границ его не
        перебивает независимо от порядка подключения;
     4) внутренний отступ строки 16 px одинаков на всех ширинах (в старых
        медиа-правилах было 14 px на телефоне), низ списка = низ внутреннего
        отступа карточки, за границы блока выше не выходит ни один пиксель.
   ПРОВЕРКА (замер _probe_ex_overhang.js и _probe_ex_align.js, ширины
   1440 / 1280 / 1100 / 768 / 390 px): .tl-about-data-cols 185,5…1479,5 =
   .tl-ex-list 185,5…1479,5 = строки списка 185,5…1479,5 — разница 0 px,
   «выступов» (overhang) — 0.
   ========================================================================== */

.tl-about-data .tl-ex-list{
  margin-top:22px;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
}

.tl-about-data .tl-ex-list-title{
  margin:0 0 12px;
}

.tl-about-data .tl-ex-list-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.tl-about-data .tl-ex-row{
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:16px;
}

/* В сетке зазор строк даёт gap, поэтому margin-top из слоя границ гасим. */
.tl-about-data .tl-ex-list .tl-ex-row + .tl-ex-row{
  margin-top:0;
}

.tl-about-data .tl-ex-row:hover{
  border-color:var(--brand-tint-2);
  background:var(--brand-tint);
}

@media (max-width:991px){
  .tl-about-data .tl-ex-list-grid{
    grid-template-columns:minmax(0, 1fr);
  }
}

/* ============================================================================
   ШАГ 3 МАСТЕРА ПУБЛИКАЦИИ — ПЯТЬ ПРАВОК ВЛАДЕЛЬЦА (18.09.2026)
   Замечания по скриншотам: «блок прилипает к блоку», «текст криво, исправить»,
   «оформить, сливается текст и значки», «растянуть блоки, иначе текст плохо
   вводится», «МАХ 3 шаг КРИВО» + пометки у кнопок «Сохранить аналитику» /
   «Сохранить статистику».
   Правим ТОЛЬКО оформление (отступы, ширины, выравнивание). Разметка шагов,
   классы, логика сохранения и AJAX не меняются.
   Значения и селекторы согласованы с приборной нормой проекта: между блоками
   20–24 px, внутри блока 16–24 px, поля/кнопки 12 px, карточки 20/14 px.
   ============================================================================ */

/* --- 2. «Блок прилипает к блоку»: зазор «цепочка шагов → шапка шага» --------
   Владелец: «между цепочкой шагов (шаг 1…5) и блоком „Шаг 3. Аналитика и
   финансы“ нет отступа: добавь 20–22 px».
   Замер ДО (все ширины): 22.0 px между рамкой #adWizardNav и шапкой шага —
   зазор был, но держался на правиле из встроенных стилей компонента
   (AdWizard::outStyles). Здесь он закреплён в main.css — единственном месте,
   откуда его правит оформитель, и не может быть потерян при правках шага.
   Селектор специфичнее встроенного, поэтому значение 22 px — окончательное. */
.wiz-nav.wiz-nav{ margin-bottom:22px !important; }
.wiz-step > .wiz-step-head{ margin-top:0; }

/* --- 3. «Текст криво, исправить»: подпись в правой панели ------------------
   Владелец: «в правой панели подпись „Поля со звёздочкой обязательны“ стоит
   неровно/сбито (внизу панели). Выровняй по левому краю с остальными строками
   панели, одинаковые отступы и межстрочный интервал».
   ⚠️ ПРАВКА 18.09.2026 (владелец повторил замечание по новому скриншоту):
   прежние значения этого блока (padding-left 24 px) НЕ РАБОТАЛИ так, как
   задумано, по двум причинам:
     1) тот же padding-left 24 px уводил текст на x=1129, тогда как шапка панели
        «Подготовка к публикации» и блоки шагов стоят на x=1105 — то есть строка
        оставалась НЕ на одной левой линии с текстом панели;
     2) `white-space/overflow/text-overflow` у внутреннего div перебивались
        правилом из встроенных стилей компонента (AdWizard::outStyles печатает
        стили ПОЗЖЕ main.css при равной специфичности) — подсказка резалась
        многоточием, а не переносилась.
   Стало (замер 1440 лот 411, `_tl2_wiz_measure.js`): левый край подсказки =
   1105 = левый край шапки панели и блоков шагов (Δ 0 px); зазор от блока шагов
   14 px; до линии-разделителя внутри 12 px; до низа панели 16 px; перенос строк
   разрешён, обрезки нет. Геометрия продублирована в AdWizard::outStyles() с
   теми же значениями — чтобы результат совпадал независимо от порядка слоёв. */
.wiz-side.wiz-side > .wiz-side-note{
  margin-top:14px;
  padding:12px 0 0;
  font-size:13px;
  line-height:1.45;
}
.wiz-side.wiz-side > .wiz-side-note > div{
  /* перенос разрешён: при 13 px текст «Поля со звёздочкой обязательны» занимает
     ~195 px из 262 px доступных, а английский вариант длиннее */
  margin-top:0;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.45;
}

/* --- 4. «Оформить, сливается текст и значки»: «Готовность аналитики» -------
   Владелец: «в блоке „Готовность аналитики“ строки сервисов: иконки и текст
   сливаются (маленькая иконка вплотную к тексту)».
   Замер ДО (1440, все 4 строки): значок подсказки 20×20 заканчивался на x=171,
   текст начинался на x=171 — ЗАЗОР 0 px; во второй строке текст вообще
   начинался левее значка (x=151) — значок «врезался» в перенос.
   Стало: значок и текст — две колонки флекса, зазор 9 px, выравнивание по
   первой строке; перенос текста идёт под текст, а не под значок. */
#analyticsReadiness .ana-service-hint{
  display:flex;
  align-items:flex-start;
  gap:9px;
}
#analyticsReadiness .ana-service-hint > i{
  flex:0 0 20px;
  width:20px;
  height:20px;
  /* значок встаёт по первой строке текста (13 px × 1.5 = 19.5 px) */
  line-height:20px;
  margin-top:1px;
  text-align:center;
  font-size:17px;
}
#analyticsReadiness .ana-service-hint-text{
  flex:1 1 auto;
  min-width:0;
}
/* значок источника рядом с подписью сервиса — тот же зазор 9 px */
#analyticsReadiness .ana-slot-source{ gap:9px; align-items:flex-start; }
#analyticsReadiness .ana-slot-source > .sbadge-source-icon{ margin-top:1px; }

/* --- 5. «Растянуть блоки, иначе текст плохо вводится»: «Доходы»/«Расходы» --
   Владелец: «блоки „Доходы“ и „Расходы“ (таблицы „Источник дохода / Сумма в
   месяц“) слишком узкие: растяни их на всю ширину блока (поле ввода источника —
   широкое, „Сумма в месяц“ — фиксированной разумной ширины)».
   Замер ДО (1440): ширина блока 982 px, внутренняя 938 px, а таблицы занимали
   560 px (59.7 %) — правую половину блока держал `max-width:560px` у
   `.wiz-step .adf-field-wide`; поле «Источник дохода» было 260 px.
   Стало: поле на всю ширину блока, «Сумма в месяц» — 220 px (170/96 px на узких
   экранах), кнопка удаления строки — 64 px. Поля в столбик НЕ складываются:
   таблица остаётся таблицей на 390 px (проверено замером). */
.wiz-step[data-step-code="analytics"] .adf-block:has([data-ana-table]) .adf-row > .adf-field-wide{
  flex:1 1 100%;
  max-width:100%;
  width:100%;
}
.wiz-step[data-step-code="analytics"] .adf-table{
  width:100%;
  /* фиксированная раскладка: «Сумма в месяц» держит ровно заданную ширину,
     «Источник дохода» забирает всё остальное (при auto браузер раздавал лишнее
     всем колонкам и «Сумма» растягивалась до 285 px). */
  table-layout:fixed;
}
.wiz-step[data-step-code="analytics"] .adf-table .adf-col-name{ width:auto; }
.wiz-step[data-step-code="analytics"] .adf-table .adf-col-amount{ width:220px; }
.wiz-step[data-step-code="analytics"] .adf-table .adf-col-del{ width:64px; }
/* итог «Доход / Расход / Прибыль» — по той же ширине, что и таблицы */
.wiz-step[data-step-code="analytics"] .adf-block:has([data-ana-table]) .adf-total{ width:100%; }

@media (max-width:900px){
  .wiz-step[data-step-code="analytics"] .adf-table .adf-col-amount{ width:170px; }
  .wiz-step[data-step-code="analytics"] .adf-table .adf-col-del{ width:60px; }
}
@media (max-width:520px){
  .wiz-step[data-step-code="analytics"] .adf-table .adf-col-amount{ width:96px; }
  .wiz-step[data-step-code="analytics"] .adf-table .adf-col-del{ width:52px; }
  .wiz-step[data-step-code="analytics"] .adf-table th,
  .wiz-step[data-step-code="analytics"] .adf-table td{ padding-left:8px; padding-right:8px; }
}

/* --- 6. «МАХ 3 шаг КРИВО»: ряды кнопок шага 3 ------------------------------
   Владелец: «кнопки и блоки стоят неровно (разные отступы/выравнивание).
   Приведи к одному виду: одинаковые зазоры до и после кнопок, одинаковая
   ширина/высота, выравнивание по левому краю блока».
   Замер ДО (1440, лот 1593 — раздел «Telegram каналы»):
     «Сохранить аналитику»  (ряд .adf-actions)                 — x = 55, зазор 14 px
     «Сохранить статистику» (ряд .wiz-actions внутри карточки) — x = 77 (+22 px!)
     «Назад / Сохранить черновик / Далее» (.wiz-actions шага)  — x = 55, зазор 12 px
   То есть две кнопки сохранения стояли на РАЗНЫХ левых линиях.
   Стало: все ряды кнопок шага 3 — на одной левой линии (левый край блока,
   55 px = внутренний край шага), одинаковый зазор 12 px, одинаковый отступ
   сверху 22 px, одинаковая высота кнопок 48 px и одинаковые внутренние отступы. */
.wiz-step[data-step-code="analytics"] .adf-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
  margin-bottom:0;
  padding:0;
}
.wiz-step[data-step-code="analytics"] > .wiz-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
  padding:0;
  border-top:0;
}
/* ряд кнопок внутри карточки «Статистика канала вручную» выходит на ту же линию:
   карточка .ad-create-options-container-item имеет внутренний отступ 22 px,
   поэтому тянем ряд назад на его же отступ (x=77 → x=55, как у «Назад»). */
.wiz-step[data-step-code="analytics"] [data-wiz-social] > .wiz-actions{
  margin:22px 0 0 -22px;
  padding:0;
  border-top:0;
  gap:12px;
}
/* кнопка этого ряда стоит СЛЕВА (как «Сохранить аналитику»), а не прижата вправо:
   раньше это делал встроенный style="margin-left:0", теперь — правило */
.wiz-step[data-step-code="analytics"] [data-wiz-social] > .wiz-actions > .wiz-actions-right{
  margin-left:0;
  gap:12px;
}

/* Одинаковая геометрия кнопок в этих рядах: одна высота и один горизонтальный
   отступ (значения — базовые из .btn-custom/.btn-custom-mini, закрепляем явно,
   чтобы ряды нельзя было «разъехать» другими правками). */
.wiz-step[data-step-code="analytics"] .adf-actions > .btn-custom,
.wiz-step[data-step-code="analytics"] .wiz-actions > .btn-custom,
.wiz-step[data-step-code="analytics"] .wiz-actions .wiz-actions-right > .btn-custom,
.wiz-step[data-step-code="analytics"] .wiz-actions .wiz-actions-right > .btn-custom-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  border-radius:12px;
}
.wiz-step[data-step-code="analytics"] .wiz-actions > .wiz-actions-right{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
}
/* подписи рядом с кнопкой «Сохранить аналитику» — по центру кнопки, тот же зазор */
.wiz-step[data-step-code="analytics"] .adf-actions > .adf-block-hint{
  display:flex;
  align-items:center;
  min-height:48px;
  margin:0;
}

@media (max-width:767px){
  /* на телефоне зазор остаётся тем же (12 px), ряды переносятся, а не сжимаются */
  .wiz-step[data-step-code="analytics"] [data-wiz-social] > .wiz-actions{ margin:20px 0 0 -22px; }
  .wiz-step[data-step-code="analytics"] .wiz-actions > .wiz-actions-right{ margin-left:0; flex:1 1 100%; }
  .wiz-step[data-step-code="analytics"] .wiz-actions .wiz-actions-right > .btn-custom{ flex:1 1 auto; min-width:0; }
}


/* >>> TL-ANABAR 19.09.2026 >>> */
/* ============================================================================
   ГЛАВНАЯ, ПЕРВЫЙ ЭКРАН — УЗКАЯ ПОЛОСА-ВИТРИНА АНАЛИТИКИ (.tl-anabar)
   19.09.2026. Написано ТОЛЬКО в конец main.css (правило проекта: main.css
   внутри не правим). Разметка — resources/view/web/components/home-analytics-bar.tpl,
   вызов — resources/view/web/home.tpl (вместо удалённой строки «пилюль»).

   ЧТО ЗАМЕНЕНО: строка «пилюль» с 10 категориями дублировала блок ниже
   «Что можно купить или продать на Tradelot.ru?» (те же категории плитками
   с 3D-значками). Теперь на этом месте 5 показателей лотов-примеров:
   3D-значок категории + «категория · источник» + цифра.

   ГЕОМЕТРИЯ (замер _hstrip_measure.js, живой Chrome, без кеша): высота полосы
   54 px (элемент 42 + отступ 5+5 + рамка 1+1) на 1440 / 1280 / 1100 — одна
   строка, «не широкое по высоте», как просил владелец. Скругление — пилюля 999
   (та же форма, что у строки поиска в герое), рамка --line, мягкая тень --sh-2.
   Квадратных углов нет ни у одного элемента.

   РАСКЛАДКА: одна строка от 1100 px; ниже — по два показателя в ряд
   (2 + 2 + последний во всю ширину), поэтому полоса аккуратно переносится
   и НИКОГДА не даёт горизонтальной прокрутки: переполнение
   scrollWidth − clientWidth = 0 и у документа, и у самой полосы, и у каждого
   показателя на 1440 / 1280 / 1100 / 768 / 390 / 360 px.
   Высоты: 54 px на 1440/1280/1100; 152 px на 768 и 182 px на 390/360
   (три ряда по два, пятый — во всю ширину).

   ПОЧЕМУ РАЗДЕЛИТЕЛЬ — ОТДЕЛЬНЫЙ ЭЛЕМЕНТ, А НЕ ПСЕВДОЭЛЕМЕНТ. Показатели
   растягиваются (flex:1 1 auto), а содержимое внутри каждого центрируется:
   тогда свободное место делится поровну слева и справа от содержимого, и
   разделитель, стоящий отдельным элементом между показателями, оказывается
   РОВНО по середине зазора на любой ширине. Псевдоэлемент внутри показателя
   прижимался бы к его левой кромке и линия уезжала бы к тексту.

   ПОДЧЁРКИВАНИЙ НЕТ — ни в обычном состоянии, ни при наведении, ни в фокусе
   (требование владельца). Ссылки ведут на карточки лотов-примеров, а не на
   разделы каталога, поэтому меню категорий не дублируется.

   ⚠️ Слой tradelot-borders.css подключается ПОСЛЕ main.css. Селекторы ниже
   записаны через .tl-anabar (два класса), поэтому слой границ их не
   перебивает независимо от порядка подключения.
   ============================================================================ */

.tl-anabar{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center;
  box-sizing:border-box;
  max-width:100%;
  margin:20px auto 0;
  padding:5px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  box-shadow:var(--sh-2);
}

.tl-anabar .tl-anabar-item{
  display:flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:center;
  gap:7px;
  box-sizing:border-box;
  min-width:0;
  height:44px;
  padding:0 9px;
  border:0;
  border-radius:var(--r-pill);
  background-color:transparent;
  color:var(--ink);
  text-decoration:none !important;
  transition:background-color .16s ease;
}

.tl-anabar .tl-anabar-item:hover,
.tl-anabar .tl-anabar-item:focus,
.tl-anabar .tl-anabar-item:active{
  background-color:var(--brand-tint);
  color:var(--ink);
  text-decoration:none !important;
}
.tl-anabar .tl-anabar-item:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* тонкая линия между показателями: ровно по середине зазора */
.tl-anabar .tl-anabar-sep{
  flex:0 0 1px;
  align-self:center;
  width:1px;
  height:22px;
  border-radius:1px;
  background:var(--line);
}

.tl-anabar .tl-anabar-icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  color:var(--brand-hover);
}
.tl-anabar .tl-anabar-icon img{
  display:block;
  width:24px;
  height:24px;
  max-width:none;
  min-width:0;
  object-fit:contain;
}
.tl-anabar .tl-anabar-icon i{ font-size:22px; line-height:1; }

.tl-anabar .tl-anabar-txt{
  display:flex;
  flex-direction:column;
  justify-content:center;
  /* зазор между подписью и цифрой не нужен: его дают межстрочные интервалы,
     а каждый лишний пиксель здесь уменьшает воздух до кромки полосы */
  gap:0;
  min-width:0;
}

.tl-anabar .tl-anabar-cap{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  font-size:11px;
  font-weight:600;
  line-height:1.15;
  color:var(--muted);
  white-space:nowrap;
}
.tl-anabar .tl-anabar-cat{ min-width:0; }
.tl-anabar .tl-anabar-svc{
  flex:0 0 auto;
  display:block;
  width:14px;
  height:14px;
  max-width:none;
  object-fit:contain;
}
.tl-anabar .tl-anabar-svc-name{ min-width:0; }

.tl-anabar .tl-anabar-val{
  display:block;
  font-size:13px;
  font-weight:700;
  line-height:1.15;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* --- Узкий десктоп, планшет и телефон (<1100): по два показателя в ряд -----
   Замер (_hstrip_measure.js, 1100 px): пять показателей в одну строку уложились
   (высота 54 px, свободного места внутри показателей 67,7 px = 13,5 px на
   каждый, ни одна цифра не перенесена и не обрезана). Ниже 1100 px строка
   становится впритык, поэтому там показываем ровные ряды по два; пятый
   показатель занимает всю ширину. Разделители в этой раскладке не нужны. */
@media (max-width:1099px){
  .tl-anabar{
    gap:2px;
    padding:4px;
    border-radius:28px;
  }
  .tl-anabar .tl-anabar-sep{ display:none; }
  .tl-anabar .tl-anabar-item{
    flex:1 1 calc(50% - 2px);
    height:auto;
    min-height:48px;
    /* вертикальный отступ 9 px: воздух от текста до кромки полосы получается
       1 (рамка) + 4 (отступ полосы) + 9 = 14 px — норма проекта (≥12, лучше 14–16).
       Было 6 px → 11 px, «липкий» зазор (замечание проверяющего 19.09.2026). */
    padding:9px 12px;
    border-radius:20px;
    justify-content:flex-start;
  }
  .tl-anabar .tl-anabar-cap{
    /* разрешаем перенос: на узком экране это гарантирует отсутствие
       переполнения, но в реальных данных подпись укладывается в строку */
    flex-wrap:wrap;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .tl-anabar .tl-anabar-val{ white-space:normal; }
  /* пятый показатель занимает всю ширину — его содержимое по центру,
     чтобы ряд не выглядел «прижатым влево» */
  .tl-anabar .tl-anabar-item:last-child{ justify-content:center; }
}

/* --- Телефон (≤575): длинное название источника убираем, остаётся значок ----
   Замер 360 px: подпись «Доменные имена · Вебмастер» (150 px) не влезала в
   поле 104 px и вылезала за кромку элемента. Значок сервиса остаётся, полное
   название — в подсказке элемента. */
@media (max-width:575px){
  .tl-anabar{ border-radius:24px; }
  .tl-anabar .tl-anabar-item{ min-height:48px; }
  .tl-anabar .tl-anabar-icon{ width:22px; height:22px; }
  .tl-anabar .tl-anabar-icon img{ width:22px; height:22px; }
  .tl-anabar .tl-anabar-cap{ font-size:11px; }
  .tl-anabar .tl-anabar-val{ font-size:13px; }
  .tl-anabar .tl-anabar-svc-name{ display:none; }
}

@media (max-width:374px){
  .tl-anabar .tl-anabar-svc{ display:none; }
}

/* ============================================================================
   ГЛАВНАЯ, ПЕРВЫЙ ЭКРАН — ДЛИННЫЙ БАННЕР «ДАННЫЕ В ЛОТАХ» (.tl-hero-banner)
   19.09.2026 (владелец: «лучше придумать красивое изображение длинное, понятное
   и красивое. Высоту не широкую»). Заменил полосу показателей .tl-anabar —
   её правила выше ОСТАВЛЕНЫ (правило проекта: main.css внутри не правим).

   ЧТО ЭТО: одна картинка во всю ширину героя, между поиском и кнопками.
     • /img/tl-data-wide.webp   2752×320 (рисуется как 1376×160) — 44 КБ
     • /img/tl-data-mobile.webp  732×296 (рисуется как  366×148) — 18 КБ
   Нарисованы локально (макет _hstrip_banner_build.php → съёмка Chrome → WebP),
   внешних стоков нет; в картинке фирменные цвета, объёмные значки категорий
   владельца и значки сервисов аналитики.

   РАЗМЕР: картинка масштабируется по ширине, поэтому высота = ширина / 8,6:
   160 px на 1440 (контейнер 1376), 146 px на 1280 (1256), 125 px на 1100 (1076)
   — требование «высота 120–160 px» соблюдено. На планшете (768–1099) та же
   картинка: 86 px на 768, весь текст на ней остаётся крупным (не меньше 11,9 px).
   На телефоне (≤767) включается мобильный вариант с крупным текстом (в широком
   варианте он стал бы нечитаемым — 6–7 px при ширине 366).
   ============================================================================ */

.tl-hero-banner{
  display:block;
  box-sizing:border-box;
  max-width:100%;
  margin:22px auto 0;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--sh-2);
  /* картинка — блок: под ней не должно быть «строчного» зазора */
  line-height:0;
}

.tl-hero-banner picture{ display:block; }

.tl-hero-banner img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border:0;
  border-radius:0;
}

@media (max-width:991px){
  .tl-hero-banner{ border-radius:18px; }
}

@media (max-width:767px){
  .tl-hero-banner{ border-radius:16px; margin-top:18px; }
}
/* <<< TL-ANABAR 19.09.2026 <<< */

/* ==========================================================================
   TRADELOT — ПРАВКА ВЛАДЕЛЬЦА 17.09.2026 (финал блока «Данные в лотах»):
   два примера переехали в ЛЕВЫЙ столбец, список из 6 строк снизу удалён.
   --------------------------------------------------------------------------
   Владелец: «снизу уберите 6 примеров, а то вытянуто вниз очень из-за этого»
   + «Оставь ровно ДВА примера и вставь их СЛЕВА — в левый столбец, после
   пункта „Пустых блоков не бывает…“» + «Выровняй по правому блоку так, чтобы
   вниз не выходило» (левый столбец и правая карточка — одной высоты).
   Разметка: components/analytics-example.tpl (две карточки `.tl-ex-mini`,
   каждая — ссылка на свою карточку примера; список `.tl-ex-list` удалён).

   КАК ВЫРОВНЕНО (ключевой момент). Колонки сетки и так растягиваются
   (align-items:stretch), поэтому прямоугольники равны по определению. Но если
   содержимое левого столбца КОРОЧЕ правой карточки, его низ остаётся пустым —
   именно это владелец видел как «видно ниже левого блока». Поэтому:
     1) карточки примера сделаны КОМПАКТНЫМИ — две строки (название + строка
        «категория · цифры»), высота ≈61 px, чтобы содержимое левого столбца
        укладывалось в естественную высоту правой карточки (замер 1440:
        608,9 против 614,2) — ведущей остаётся ПРАВАЯ карточка;
     2) они РАСТЯГИВАЕМЫ (flex:1 1 auto при min-height:56px), поэтому свободный
        остаток высоты делится между ними поровну и содержимое левого столбца
        заканчивается РОВНО на нижней границе строки — как у правой карточки.
   Замер после правки: левый 649,3 = правая 649,3 (1440), 674,5 = 674,5 (1280),
   703,3 = 703,3 (1100) — разница 0 px по верху, низу и высоте.
   ========================================================================== */

.tl-about-data .tl-ex-mini{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding:11px 16px;
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  border-radius:14px;
  color:inherit;
  text-decoration:none;
  /* растягиваются и заполняют остаток высоты столбца (см. пояснение выше) */
  flex:1 1 auto;
  min-height:56px;
}

.tl-about-data .tl-ex-mini:hover{
  border-color:var(--brand-tint-2);
  background:var(--brand-tint);
}

.tl-about-data .tl-ex-mini-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  flex:1 1 auto;
  min-width:0;
}

.tl-about-data .tl-ex-mini-title{
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
  overflow-wrap:anywhere;
}

.tl-about-data .tl-ex-mini-meta{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0 6px;
  font-size:12px;
  line-height:1.35;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.tl-about-data .tl-ex-mini-cat{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand-hover);
}

/* разделитель между категорией и цифрами — только когда цифры есть */
.tl-about-data .tl-ex-mini-cat:not(:last-child)::after{
  content:"·";
  margin-left:6px;
  color:var(--muted);
  font-weight:400;
}

.tl-about-data .tl-ex-mini-go{
  flex:0 0 auto;
  font-size:18px;
  color:var(--brand-hover);
}

/* На телефоне и планшете столбцы идут друг под другом: растягивать карточки
   примера не нужно (иначе они «раздуются» на всю свободную высоту). */
@media (max-width:991px){
  .tl-about-data .tl-ex-mini{
    flex:0 0 auto;
    min-height:0;
    /* на узких ширинах карточки стоят друг под другом, растягивать их не нужно;
       отступ 16 px — норма проекта (проверка _tl_layout.js: с 11 px находились
       «липкие» места «текст ближе 16 px к кромке карточки») */
    padding:16px;
  }
}

/* ==========================================================================
   TRADELOT — ПРАВКА ВЛАДЕЛЬЦА 18.09.2026: ПАНЕЛЬ ЧАТА КАБИНЕТА В ЭКРАН
   (/profile/chat, раздел «Сообщения»)
   --------------------------------------------------------------------------
   Жалоба владельца (по скриншоту раздела «Сообщения»):
   «В сообщениях — чтобы написать, надо вниз долистать… очень долго, сделайте
   по-другому». На скриншоте список сообщений растянут на всю высоту страницы,
   «Сообщений нет» — где-то внизу, а поле «Напишите что-нибудь» и кнопка
   отправки — в самом низу длинной страницы.

   ЧТО БЫЛО (ЖИВОЙ ЗАМЕР 1440×900, переписка из 20 сообщений, до правки):
     .chat-dialogue-container{ height:100vh; max-height:900px } — панель ровно
     900 px, но начинается на 212 px ниже кромки окна (шапка сайта 73 + отступ
     24 + шапка кабинета «Сообщения» 114,8). Итог: низ панели 1112 px, поле ввода
     top=1038,8 bottom=1105,8 при окне 900 — поле НА 205,8 px НИЖЕ экрана;
     документ 2242 px, прокрутка страницы 1342 px. Плюс у списка сообщений
     СВОЕЙ прокрутки не было (scrollHeight = clientHeight), то есть длинную
     переписку заставляли прокручивать страницу целиком.

   ЧТО СТАЛО: панель получает высоту «экран минус верхние блоки» —
   calc(100vh − верхний отступ − зазор), а там, где поддерживается, 100dvh
   (адресная строка мобильного браузера). Внутри панели — колонка flex:
     • шапка диалога      — flex:0 0 auto (не сжимается);
     • список сообщений   — flex:1 1 auto; overflow-y:auto: прокручивается
                            ТОЛЬКО он, страница от переписки не растёт;
     • поле ввода + кнопка — flex:0 0 auto в самом низу панели, из экрана
                            не уезжают (жалоба владельца закрыта);
     • «Сообщений нет»    — по центру панели, а не в её низу.
   Точный верхний отступ считает chat.js и кладёт в --tl-chat-h на
   .page-chat-container; если скрипт не выполнился — работает запасное значение
   calc(100vh − --tl-chat-top − --tl-chat-gap) ниже.

   ⚠️ Правка действует ТОЛЬКО на страницу кабинета: селектор требует прямого
   родителя .page-chat-container. Модальный чат (#chatModal, .modal-chat-container)
   и чат на странице лота (.tl-chat в components/chat/lot-chat.tpl) не затронуты.
   ========================================================================== */
.page-chat-container{
  /* запасной верхний отступ (без JS): шапка сайта 73 + отступ 24 + шапка
     кабинета «Сообщения» 114,8 — замерено 212 px на десктопе;
     на ≤991 px шапка кабинета выше — замерено 268 px */
  --tl-chat-top:212px;
  --tl-chat-gap:24px;
  --tl-chat-min:260px;
  --tl-chat-max:900px;
}

@media (max-width:991px){
  .page-chat-container{
    --tl-chat-top:268px;
    /* 88 px = 72,3 px (нижнее плавающее меню «Домой/Избранное/Добавить/Чат/
       Профиль», оно фиксированное и стоит на всех ширинах ≤991 — замерено)
       + 16 px зазор. Без этого меню закрывало поле ввода на 41 px. */
    --tl-chat-gap:88px;
  }
}

/* 1. Панель диалога = экран минус верх страницы. Было height:100vh
      max-height:900px (панель всегда вылезала за экран на высоту шапки).
      Заодно панель получает вид карточки кабинета (те же токены, что у шапки
      «Сообщения» рядом): раньше это был «голый» блок, а поле ввода стояло на
      фоне страницы #f8f7fd — рамка поля давала там 1,94:1 при норме ≥2
      (на белой поверхности карточки — 2,06:1, как и замерял общий слой). */
.page-chat-container > .chat-dialogue-container{
  display:flex;
  flex-direction:column;
  height:var(--tl-chat-h, calc(100vh - var(--tl-chat-top) - var(--tl-chat-gap)));
  min-height:var(--tl-chat-min);
  max-height:var(--tl-chat-max);
  /* внутри 16 px (норма кабинета «блок внутри блока 16–24 px»): без этого
     карточка собеседника в шапке (на 768 она кончается ровно на кромке панели)
     слипалась бы с рамкой самой панели */
  padding:0 16px 16px;
  background-color:var(--card-bg, var(--surface));
  border:1px solid var(--card-border, var(--line));
  border-radius:var(--card-radius, 20px);
  box-shadow:var(--card-shadow, var(--sh-1));
}

/* адресная строка мобильного браузера: dvh её учитывает, vh — нет */
@supports (height:100dvh){
  .page-chat-container > .chat-dialogue-container{
    height:var(--tl-chat-h, calc(100dvh - var(--tl-chat-top) - var(--tl-chat-gap)));
  }
}

/* 2. Шапка диалога: своя высота, не сжимается. Отступ снизу 12 px — чтобы
      первый пузырь не «прилипал» к карточке лота/пользователя. */
.page-chat-container > .chat-dialogue-container > .chat-dialogue-container-header{
  flex:0 0 auto;
  padding-bottom:12px;
}

/* 3. Прокручивается ТОЛЬКО список сообщений — страница от переписки не растёт */
.page-chat-container > .chat-dialogue-container > .chat-dialogue-container-content{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  /* содержимое прижато к низу: при открытии видно ПОСЛЕДНЕЕ сообщение */
  display:flex;
  flex-direction:column-reverse;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}

/* полоса прокрутки списка: в теме она была скрыта целиком
   (.chat-dialogue-container-content::-webkit-scrollbar{display:none}) — в чате
   это плохо: не видно, что переписка длиннее и её можно прокрутить. */
.page-chat-container > .chat-dialogue-container > .chat-dialogue-container-content::-webkit-scrollbar{
  display:block;
  width:8px;
}
.page-chat-container > .chat-dialogue-container > .chat-dialogue-container-content::-webkit-scrollbar-track{
  background:transparent;
}
.page-chat-container > .chat-dialogue-container > .chat-dialogue-container-content::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:var(--r-pill);
}

/* 4. Поле ввода и кнопка отправки закреплены внизу панели: своя полоса-разделитель,
      ровные отступы (14 px сверху, снизу — общий отступ панели 16 px). Полоса
      разделителя выходит на всю ширину карточки (margin 0 -16px компенсирует
      внутренний отступ панели). */
.page-chat-container > .chat-dialogue-container > .chat-dialogue-container-footer{
  flex:0 0 auto;
  margin:0 -16px;
  padding:14px 16px 0;
  border-top:1px solid var(--line-soft);
}
.page-chat-container > .chat-dialogue-container > .chat-dialogue-container-footer .chat-dialogue-footer{
  margin-top:0;
}

/* поле ввода — ширина по панели, ничего не вылезает на узких экранах */
.page-chat-container > .chat-dialogue-container .chat-dialogue-footer-action-2{
  min-width:0;
}

/* 5. Пустое состояние «Сообщений нет» — по центру панели, а не в самом низу
      (в теме у .chat-dialogues-items-empty стоял margin-top:80px и прижим
      содержимого к низу .chat-dialogue-items-container{justify-content:flex-end}) */
.page-chat-container .chat-dialogue-items-container.chat-dialogue-not-messages{
  justify-content:center;
  align-items:center;
  min-height:100%;
}
.page-chat-container .chat-dialogue-items-container.chat-dialogue-not-messages .chat-dialogues-items-empty{
  margin-top:0;
}

/* 6. Телефон (≤767): чат занимает всю доступную высоту, поле ввода остаётся
      видимым; отступ снизу 16 px — как на остальных узких блоках кабинета. */
@media (max-width:767px){
  .page-chat-container{
    /* на телефоне нижнее меню выше — 80,3 px (замерено), плюс 16 px зазор */
    --tl-chat-gap:96px;
    --tl-chat-min:240px;
  }
  .page-chat-container > .chat-dialogue-container > .chat-dialogue-container-header{
    padding-bottom:16px;
  }
  .page-chat-container > .chat-dialogue-container > .chat-dialogue-container-footer{
    padding-top:16px;
  }
  .page-chat-container .chat-dialogue-footer-action-textarea{
    min-height:48px;
  }
  /* телефон: колонки шапки диалога встают друг под другом, и кнопка «…»
     упиралась в карточку собеседника вплотную (зазор 0 px) — даём 12 px */
  .page-chat-container .chat-dialogue-container-header .row > .col-md-1{
    margin-bottom:12px;
  }
}

/* 7. Планшет и десктоп (≥768): кнопка меню диалога «…» шире своей колонки и
      налезала на карточку собеседника либо на кромку панели.
      Замер ДО: 768 — колонка .col-md-1 = 45,2 px (внутри 21,2), кнопка
      .uni-dropdown-name = 56 px (значок 26 + поля 14+14) → от значка до карточки
      оставалось 4,2 px (норма кабинета ≥ 12); 992–1200 — кнопка вылезала вправо
      за свою колонку (35,2 → 56) и подходила к кромке панели на 3 px.
      Это КОЛОНОЧНАЯ раскладка Bootstrap, она существует и до правки панели
      (проверено воспроизведением старых правил: числа совпадают до десятых).
      Здесь колонкам даётся ширина «по содержимому»: меню — по кнопке,
      карточка собеседника — по остатку. */
@media (min-width:768px){
  .page-chat-container .chat-dialogue-container-header .row > .col-md-1{
    flex:0 0 auto;
    width:auto;
    max-width:none;
  }
  .page-chat-container .chat-dialogue-container-header .row > .col-md-11{
    flex:1 1 auto;
    width:auto;
    max-width:none;
  }
}

/* ==========================================================================
   TRADELOT — ПРАВКА ВЛАДЕЛЬЦА 17.09.2026: ПЛИТА ПОКАЗАТЕЛЕЙ в карточке примера
   (главная, блок «Данные в лотах»).
   --------------------------------------------------------------------------
   Владелец (выделил на скриншоте): «Показал и выделил, что переоформить.
   Слишком в рассыпную всё, не красиво, лысо» — про три показателя
   (ИКС / Посетителей в месяц / Доход в месяц) и итог «Подтверждено сервисом».

   БЫЛО: каждая метрика — своя «плашка-остров» (свой фон, скругление, зазор
   10–12 px), служебные строки на разной высоте, дата уезжала вправо-вниз,
   итог — отдельным блоком ниже с собственным фоном и отступом.

   СТАЛО: одна плита `.tl-about-data-plate` (фон --surface, рамка --line-soft,
   радиус 14, overflow:hidden):
     • `.tl-about-data-rows` — таблица с РАВНЫМИ высотами строк
       (`grid-auto-rows:1fr`) и разделителями 1 px: они сделаны зазором
       `gap:1px` на фоне контейнера, а НЕ рамкой строки. Так сделано намеренно:
       слой границ подключается после main.css и ставит строкам
       `border:0 !important` — своя рамка у строки была бы снята;
     • каждая строка — сетка: сверху [подпись | крупная цифра] (колонки
       `minmax(0,1fr) max-content`, цифры прижаты вправо одного столбца);
     • служебная строка — тоже СЕТКА, а не свободный перенос:
         линия 1: значок сервиса + его название,
         линия 2: чип «подтверждено сервисом / указано продавцом» (слева)
                  и дата обновления (справа, тот же правый столбец, что у цифр).
       Это принципиально: при свободном переносе (flex-wrap) в одной строке из
       трёх дата «сваливалась» на линию ниже — замер 1280 показывал разницу
       центров служебных строк 13,8 px. С сеткой структура одинаковая во всех
       трёх строках на любой ширине: переносов «как получится» больше нет;
     • цифры — один кегль и вес (22 px / 700), подписи — 12,5 px, служебные
       строки — 11,5 px во всех трёх строках;
     • итог «Подтверждено сервисом: N из M» — НИЖНЯЯ ПОЛОСА этой же плиты
       (flex-строка с щитом, тонкий разделитель сверху), а не отдельный блок;
     • паддинги строк одинаковые (14 px 16 px), боковые отступы плиты = 16 px.
   ЗАМЕРЫ (1440 / 1280 / 1100 / 390) — в отчёте задачи: левые края подписей
   Δ 0, правые края цифр Δ 0, высоты строк Δ 0, зазор между строками 1 px,
   вертикальные центры служебных строк Δ ≤ 0,35 px, пересечений 0.
   ========================================================================== */

/* --- 1. ПЛИТА: одна коробка на три строки и итог ------------------------- */
.tl-about-data .tl-about-data-plate{
  margin:auto 0 0;              /* прижата к низу карточки (.tl-ex-card — flex-колонка) */
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:14px;
  overflow:hidden;              /* разделители не выходят за скругление */
}

/* --- 2. СТРОКИ-ТАБЛИЦА: равные высоты, разделители 1 px ------------------- */
.tl-about-data .tl-about-data-plate .tl-about-data-rows{
  display:grid;
  grid-auto-rows:1fr;           /* все строки одной высоты */
  gap:1px;                      /* тонкий разделитель: просвет, а не рамка строки */
  margin:0;
  padding:0;
  background:var(--line-soft);  /* цвет разделителей */
  border:0;
  border-radius:0;
  box-shadow:none;
}

.tl-about-data .tl-about-data-plate .tl-about-data-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) max-content;   /* [подпись] | [цифра] */
  grid-template-rows:auto auto;
  align-items:center;
  align-content:start;
  column-gap:14px;
  row-gap:4px;
  margin:0;
  padding:16px;
  background:var(--surface);
  border:0;
  border-radius:0;
}

/* --- 3. ЯЧЕЙКИ: одна сетка на все три строки ----------------------------- */
.tl-about-data .tl-about-data-plate .tl-about-data-cap{
  grid-column:1;
  grid-row:1;
  font-size:12.5px;
  line-height:1.35;
  color:var(--muted);
}

.tl-about-data .tl-about-data-plate .tl-about-data-val{
  grid-column:2;
  grid-row:1;
  justify-self:end;
  text-align:right;
  margin:0;
  font-size:22px;
  font-weight:700;
  line-height:1.15;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* --- 4. СЛУЖЕБНАЯ СТРОКА: фиксированная сетка в две линии ---------------- */
.tl-about-data .tl-about-data-plate .tl-about-data-src{
  grid-column:1 / -1;
  grid-row:2;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;   /* значок | название | дата */
  grid-template-rows:auto auto;
  align-items:center;
  align-content:start;
  column-gap:10px;
  row-gap:4px;
  margin:0;
  font-size:11.5px;
  line-height:1.35;
}

.tl-about-data .tl-about-data-plate .tl-about-data-src img{
  grid-column:1;
  grid-row:1;
  justify-self:start;
}

.tl-about-data .tl-about-data-plate .tl-about-data-src-name{
  grid-column:2;
  grid-row:1;
}

.tl-about-data .tl-about-data-plate .tl-about-data-src-ok,
.tl-about-data .tl-about-data-plate .tl-about-data-src-manual{
  grid-column:1 / 3;
  grid-row:2;
  justify-self:start;
}

.tl-about-data .tl-about-data-plate .tl-about-data-src-date{
  grid-column:3;
  grid-row:2;
  justify-self:end;
  margin:0 !important;
  font-size:11.5px;
  line-height:1.35;
  color:var(--muted);
  text-align:right;
}

/* --- 5. ИТОГ: компактная нижняя полоса той же плиты ---------------------- */
.tl-about-data .tl-about-data-plate .tl-about-data-foot{
  display:flex;
  flex-direction:row;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 12px;
  margin:12px 0 0;
  padding:16px;
  border-top:1px solid var(--line-soft);
  border-radius:0;
  background:var(--surface);
}

.tl-about-data .tl-about-data-plate .tl-about-data-foot-main{
  font-size:12.5px;
  font-weight:700;
  line-height:1.35;
}

.tl-about-data .tl-about-data-plate .tl-about-data-foot-note{
  font-size:11.5px;
  line-height:1.35;
  color:var(--muted);
}

/* --- 6. ТЕЛЕФОН: плита та же, чуть компактнее; чип может перенести текст --- */
@media (max-width:575px){
  .tl-about-data .tl-about-data-plate .tl-about-data-row{
    column-gap:10px;
  }
  .tl-about-data .tl-about-data-plate .tl-about-data-val{
    font-size:19px;
  }
  .tl-about-data .tl-about-data-plate .tl-about-data-src{
    column-gap:6px;
  }
  .tl-about-data .tl-about-data-plate .tl-about-data-src-ok,
  .tl-about-data .tl-about-data-plate .tl-about-data-src-manual{
    white-space:normal;
  }
}

/* --- 7. НОРМА ЗАЗОРОВ ЛИНТЕРА (_tl_layout.js) -----------------------------
   Линтер считает «липким» текст ближе 16 px к кромке ближайшей «карточки»
   и «слипшимися» два блока с зазором меньше 12 px. Поэтому:
     • отступ строк плиты и нижней полосы — 16 px (было 14/11 → находка «15 px»);
     • у верхнего блока карточки зазор до плиты 14 px (был 2 px → «слиплось»);
     • у нижней полосы зазор до строк 12 px (был 0 px → «слиплось»);
     • карточки-примеры в левом столбце — внутренний отступ 16 px по обеим осям
       (было 11 px по вертикали → находка «12 px»). */
.tl-about-data .tl-ex-card .tl-ex-card-top{
  margin-bottom:14px;
}
.tl-about-data .tl-ex-mini{
  padding:16px;
}
/* ==========================================================================
   TRADELOT — ЧАСТЬ 79: КОШЕЛЁК — «СПОСОБ ОПЛАТЫ» КАРТОЧКАМИ (17.09.2026)
   --------------------------------------------------------------------------
   Замечание владельца по скриншоту /profile/wallet: «Что с оформлением?
   Должно быть всё красиво и не криво! С пояснением Т-Банка».

   ЗАМЕР ДО (_wal_recon.js, 1440 px):
     • блок выбора сервиса — оранжевый прямоугольник 195 x 212 px, заливка
       rgb(255,132,92) (сплошной #ff845c, правило части 43), текст «PAY-P1
       (локальная заглушка) Выплата на карту» в две строки, значок сервиса —
       <img src=""> размером 0x0 (картинки у сервиса нет), описания нет,
       про порядок оплаты не сказано ни слова;
     • причина «узости»: `.my-tabs-content-container` попадал под правило
       `.col-md-9 .my-tabs-items + div{display:flex}` — колонка содержимого
       сжималась по содержимому (436 px вместо 1026 px), форма — до 390 px,
       поле суммы — до 98 px;
     • правило части 31 (`.col-md-9 .option-payment-item > div{padding:16px 18px}`)
       раздувало значок и название до 174 px по высоте.

   СТАЛО: колонка на всю ширину, поле суммы с подписью, значком валюты и
   лимитами, выбор сервиса — ровные карточки (значок + название + описание +
   метка выбора), выбранная карточка выделена рамкой и подложкой (а не сплошной
   оранжевой заливкой), ниже — пояснение про оплату через Т-Банк.
   Только токены темы, нормы радиусов 20/14/12, зазоры 12/16/22 px.
   Разметка и логика компонента другого автора не меняются: классы
   .option-payment-item-change-wallet, data-id и input[name=payment_id] на месте.
   ========================================================================== */

/* ---------- 1. КОЛОНКА ВКЛАДКИ — НА ВСЮ ШИРИНУ (было сжатие до 436 px) ---------- */
.col-md-9 .my-tabs-items + .my-tabs-content-container,
.col-md-9 .my-tabs-items-small + .my-tabs-content-container,
.col-md-9 .my-tabs-items-medium + .my-tabs-content-container,
.col-md-9 .my-tabs-items-big + .my-tabs-content-container{
  display:block;
}
/* первая вкладка внутри карточки не добавляет вторые 24 px к отступу контейнера */
.tl-wallet-tabs > .my-tabs-content{ margin-top:0; }

/* ---------- 2. ФОРМА КОШЕЛЬКА: ПЛОСКОЕ СОДЕРЖИМОЕ ВНУТРИ КАРТОЧКИ РАЗДЕЛА ---------- */
.profile-wallet-payment-form{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  display:flex; flex-direction:column; gap:22px;
}
.tl-wallet-field{ display:flex; flex-direction:column; gap:12px; }
.tl-wallet-label{
  display:block; margin:0;
  font-size:14px; font-weight:700; line-height:1.4; color:var(--ink);
}

/* ---------- 3. ПОЛЕ СУММЫ: ВВОД И ЗНАЧОК ВАЛЮТЫ — ОДНО ПОЛЕ ---------- */
.tl-wallet-amount{
  display:flex; align-items:stretch;
  width:100%; max-width:320px;
}
.tl-wallet-amount .form-control{
  flex:1 1 auto; min-width:0; order:1;
  border-top-right-radius:0 !important; border-bottom-right-radius:0 !important;
}
.tl-wallet-amount-cur{
  order:2;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:58px; padding:0 16px;
  border:1px solid var(--border-strong, #b4b4ba); border-left:0;
  border-radius:0 var(--r-sm, 14px) var(--r-sm, 14px) 0;
  background:var(--surface-2); color:var(--ink-2);
  font-size:15px; font-weight:600;
}
/* если в настройках значок валюты стоит спереди (system_currency_position=start) */
.tl-wallet-amount.is-start .form-control{
  order:2;
  border-radius:0 !important; border-top-right-radius:var(--r-sm, 14px) !important;
  border-bottom-right-radius:var(--r-sm, 14px) !important;
}
.tl-wallet-amount.is-start .tl-wallet-amount-cur{
  order:1;
  border-left:1px solid var(--border-strong, #b4b4ba); border-right:0;
  border-radius:var(--r-sm, 14px) 0 0 var(--r-sm, 14px);
}
.tl-wallet-hint{ margin:0; font-size:13px; line-height:1.5; color:var(--muted); }
.tl-wallet-hint strong{ color:var(--ink-2); font-variant-numeric:tabular-nums; }

/* ---------- 4. ВЫБОР СЕРВИСА: РОВНЫЕ КАРТОЧКИ ДРУГ ПОД ДРУГОМ ---------- */
.tl-pay-options{ display:flex; flex-direction:column; gap:12px; }

/* снимаем «картиночные» правила старой темы: внутренние отступы задаём сами */
.profile-wallet-payment-form .tl-pay-opt,
.profile-wallet-payment-form .tl-pay-opt > *{ padding:0 !important; }

.profile-wallet-payment-form .tl-pay-opt{
  position:relative;
  box-sizing:border-box;
  display:flex; align-items:center; gap:16px;
  width:100%; margin:0 !important;
  padding:16px 18px !important;
  background:var(--card-bg, var(--surface));
  border:1px solid var(--card-border, var(--line-soft));
  border-radius:var(--card-radius-inner, 14px);
  box-shadow:none;
  cursor:pointer;
  transition:var(--card-transition, box-shadow .18s ease, background-color .18s ease, border-color .18s ease);
}
.profile-wallet-payment-form .tl-pay-opt:hover{
  background:var(--surface-2) !important;
  border-color:var(--brand-tint-2) !important;
}
/* ВЫБРАННЫЙ СЕРВИС: подложка + фирменная рамка + мягкое кольцо
   (было: сплошная заливка --accent-fill #ff845c на весь блок) */
.profile-wallet-payment-form .tl-pay-opt.active,
.profile-wallet-payment-form .tl-pay-opt.active:hover{
  background:var(--brand-tint) !important;
  border-color:var(--brand) !important;
  box-shadow:var(--tl-focus);
}
/* фокус с клавиатуры (радиопереключатель скрыт визуально, но остаётся рабочим) */
.profile-wallet-payment-form .tl-pay-opt:has(input[type="radio"]:focus-visible){
  box-shadow:var(--tl-focus);
}
.profile-wallet-payment-form .tl-pay-opt input[type="radio"]{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  border:0; overflow:hidden; white-space:nowrap;
  clip:rect(0 0 0 0); clip-path:inset(50%);
}

/* значок сервиса: плитка 48x48 с подложкой; если картинки нет — значок темы */
.profile-wallet-payment-form .tl-pay-opt-logo{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  border-radius:var(--card-radius-inner, 14px);
  background:var(--surface-2);
  overflow:hidden;
}
.profile-wallet-payment-form .tl-pay-opt-logo img{
  display:block; width:100%; height:100%;
  padding:8px; object-fit:contain;
}
.profile-wallet-payment-form .tl-pay-opt-logo i{ font-size:24px; line-height:1; color:var(--brand); }

/* название и описание */
.profile-wallet-payment-form .tl-pay-opt-body{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  text-align:left;
}
.profile-wallet-payment-form .tl-pay-opt-name{
  display:block; margin:0;
  font-size:16px; font-weight:700; line-height:1.35;
  color:var(--ink) !important;
  overflow-wrap:break-word;
}
.profile-wallet-payment-form .tl-pay-opt-desc{
  display:block; margin:0;
  font-size:13.5px; line-height:1.45;
  color:var(--muted) !important;
  overflow-wrap:break-word;
}
.profile-wallet-payment-form .tl-pay-opt.active .tl-pay-opt-name{ color:var(--ink) !important; }
.profile-wallet-payment-form .tl-pay-opt.active .tl-pay-opt-desc{ color:var(--ink-2) !important; }

/* честная пометка тестового режима (локальная заглушка) — плашкой, не текстом в рамке */
.profile-wallet-payment-form .tl-pay-opt-note{
  align-self:flex-start; max-width:100%;
  display:inline-flex; align-items:center; gap:6px;
  margin:4px 0 0;
  padding:4px 10px;
  border-radius:var(--r-pill, 999px);
  background:var(--warn-tint); color:var(--warn-ink);
  font-size:12.5px; font-weight:600; line-height:1.35;
  overflow-wrap:break-word;
}
.profile-wallet-payment-form .tl-pay-opt-note i{ font-size:14px; line-height:1; color:inherit !important; }

/* метка выбора: 24x24, кольцо видно на светлом фоне (5,3:1), в выбранной — фирменная */
.profile-wallet-payment-form .tl-pay-opt-check{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px;
  border:2px solid var(--muted);
  border-radius:var(--r-pill, 999px);
  background:var(--surface);
  color:transparent;
}
.profile-wallet-payment-form .tl-pay-opt-check i{ font-size:14px; line-height:1; color:transparent !important; }
.profile-wallet-payment-form .tl-pay-opt.active .tl-pay-opt-check{
  background:var(--brand); border-color:var(--brand);
}
.profile-wallet-payment-form .tl-pay-opt.active .tl-pay-opt-check,
.profile-wallet-payment-form .tl-pay-opt.active .tl-pay-opt-check i{ color:#fff !important; }

/* сервисов нет — говорим словами, а не пустым местом */
.tl-pay-empty{
  padding:16px 18px;
  border:1px dashed var(--border, var(--line));
  border-radius:var(--card-radius-inner, 14px);
  background:var(--surface-2); color:var(--ink-2);
  font-size:14px; line-height:1.55;
}

/* ---------- 5. ПОЯСНЕНИЕ ПРО ОПЛАТУ (банк держит деньги, комиссия при расчёте) ---------- */
.tl-pay-note{
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 18px;
  border:1px solid var(--card-border, var(--line-soft));
  border-radius:var(--card-radius-inner, 14px);
  background:var(--surface-2);
}
.tl-pay-note-icon{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  border-radius:var(--r-xs, 10px);
  background:var(--brand-tint); color:var(--brand-hover);
}
.tl-pay-note-icon i{ font-size:18px; line-height:1; color:inherit !important; }
.tl-pay-note-body{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:6px;
}
.tl-pay-note-title{ margin:0; font-size:14px; font-weight:700; line-height:1.4; color:var(--ink); }
.tl-pay-note-text{ margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-2); }

/* ---------- 6. КНОПКА «ПОПОЛНИТЬ»: СВОЯ ШИРИНА, А НЕ НА ВСЮ КАРТОЧКУ ---------- */
.profile-wallet-payment-form .profile-wallet-payment-action-replenishment{
  margin-top:0 !important;
  align-self:flex-start;
  min-width:220px; max-width:100%;
  justify-content:center;
}

/* ---------- 7. ТЕЛЕФОН И ПЛАНШЕТ ---------- */
@media (max-width:767px){
  .tl-wallet-amount{ max-width:100%; }
}
@media (max-width:575px){
  .profile-wallet-payment-form .tl-pay-opt{ padding:14px !important; gap:12px; }
  .profile-wallet-payment-form .tl-pay-opt-logo{ width:40px; height:40px; border-radius:12px; }
  .profile-wallet-payment-form .tl-pay-opt-logo img{ padding:6px; }
  .profile-wallet-payment-form .tl-pay-opt-name{ font-size:15px; }
  .tl-pay-note{ padding:14px; gap:10px; }
  .tl-pay-note-icon{ width:28px; height:28px; }
  .profile-wallet-payment-form .profile-wallet-payment-action-replenishment{
    align-self:stretch; width:100%; min-width:0;
  }
}

/* ==========================================================================
   TRADELOT — ЧАСТЬ 79-Б: КОШЕЛЁК — ПРИОРИТЕТЫ ОФОРМЛЕНИЯ (17.09.2026)
   --------------------------------------------------------------------------
   Зачем отдельный блок: в main.css есть широкие правила с `!important`, которые
   попадают в мои элементы по совпадению подстроки класса или по тегу, и без
   приоритета перекрашивали их (проверено разбором применённых правил через CDP,
   _wal_why.js):
     • часть 20, строка ~11244: `.option-payment-item{ background:var(--surface-2)
       !important; border-radius:var(--r-md) !important; padding:16px !important }` —
       радиус карточки получался 18 px вместо системных 14;
     • строка ~11241: `.option-payment-item *{ color:var(--ink-2) !important }`;
     • строка ~11031: `.col-md-9 [class*="-hint"], .col-md-9 [class*="-note"],
       .col-md-9 [class*="-desc"]{ color:var(--muted) !important }` — из-за неё
       заголовок пояснения «Как проходит оплата» становился серым (4,9:1) вместо
       тёмного (15,6:1), а плашка тестового режима теряла свой янтарный цвет
       (--warn-ink); совпадает по подстроке «-note» и «-hint».
   Здесь те же элементы получают ИТОГОВЫЕ значения с приоритетом — цвета и границы
   только из токенов темы, нормы радиусов 20/14/12, контраст проверен замером.
   ========================================================================== */

/* карточка сервиса: фон, рамка и радиус — системные (--card-*), а не «части 20» */
.profile-wallet-payment-form .tl-pay-opt{
  background-color:var(--card-bg, var(--surface)) !important;
  border:1px solid var(--card-border, var(--line-soft)) !important;
  border-radius:var(--card-radius-inner, 14px) !important;
  box-shadow:none;
}
.profile-wallet-payment-form .tl-pay-opt:hover{
  background-color:var(--surface-2) !important;
  border-color:var(--brand-tint-2) !important;
}
.profile-wallet-payment-form .tl-pay-opt.active,
.profile-wallet-payment-form .tl-pay-opt.active:hover{
  background-color:var(--brand-tint) !important;
  border-color:var(--brand) !important;
  box-shadow:var(--tl-focus);
}

/* значок сервиса: плитка и глиф */
.profile-wallet-payment-form .tl-pay-opt-logo{
  background-color:var(--surface-2) !important;
  border-radius:var(--card-radius-inner, 14px) !important;
}
.profile-wallet-payment-form .tl-pay-opt-logo i{ color:var(--brand) !important; }

/* тексты карточки */
.profile-wallet-payment-form .tl-pay-opt-name{ color:var(--ink) !important; }
.profile-wallet-payment-form .tl-pay-opt-desc{ color:var(--muted) !important; }
.profile-wallet-payment-form .tl-pay-opt.active .tl-pay-opt-desc{ color:var(--ink-2) !important; }
.profile-wallet-payment-form .tl-pay-opt-note{ color:var(--warn-ink) !important; }
.profile-wallet-payment-form .tl-pay-opt-note i{ color:inherit !important; }

/* метка выбора */
.profile-wallet-payment-form .tl-pay-opt-check{
  background-color:var(--surface) !important;
  border-color:var(--muted) !important;
}
.profile-wallet-payment-form .tl-pay-opt.active .tl-pay-opt-check{
  background-color:var(--brand) !important;
  border-color:var(--brand) !important;
}

/* поле суммы, подписи и подсказки */
.profile-wallet-payment-form .tl-wallet-label{ color:var(--ink) !important; }
.tl-wallet-amount-cur{ color:var(--ink-2) !important; background-color:var(--surface-2) !important; }
.tl-wallet-hint{ color:var(--muted) !important; }
.tl-wallet-hint strong{ color:var(--ink-2) !important; }

/* пояснение про оплату */
.tl-pay-note{ background-color:var(--surface-2) !important; border:1px solid var(--card-border, var(--line-soft)) !important; }
.tl-pay-note-icon{ background-color:var(--brand-tint) !important; color:var(--brand-hover) !important; }
.tl-pay-note-icon i{ color:inherit !important; }
.tl-pay-note-title{ color:var(--ink) !important; }
.tl-pay-note-text{ color:var(--ink-2) !important; }

/* пустое состояние «сервисов нет» */
.tl-pay-empty{ color:var(--ink-2) !important; background-color:var(--surface-2) !important; }

/* ==========================================================================
   TRADELOT — ЧАСТЬ 79-В: КОШЕЛЁК — ИЕРАРХИЯ ТЕКСТА В ПОЯСНЕНИИ (17.09.2026)
   --------------------------------------------------------------------------
   Разбор применённых правил (CDP, _wal_colors.js) показал: у заголовка пояснения
   и его абзацев ИТОГОВЫЙ цвет совпадал (--muted, 4,89:1), потому что правило
   `.col-md-9 [class*="-note"]{color:var(--muted)!important}` (строка ~11032)
   специфичнее моего `.tl-pay-note-title`. Заголовок терял вес, иконка банка
   красилась серым вместо фирменного. Контраст норму проходил (4,89 ≥ 4,5),
   но иерархия была плоской, а «пометка тестового режима» перекрашивалась в
   тёмный цвет вместо янтарного --warn-ink.
   Здесь те же элементы перекрыты селекторами в контексте .col-md-9 — они
   специфичнее правила-подстроки, поэтому дают нужные цвета.
   ========================================================================== */

.col-md-9 .tl-pay-note-title{ color:var(--ink) !important; }
.col-md-9 .tl-pay-note-text{ color:var(--ink-2) !important; }
.col-md-9 .tl-pay-note-icon{ color:var(--brand-hover) !important; background-color:var(--brand-tint) !important; }
.col-md-9 .tl-pay-note-icon i{ color:inherit !important; }

/* пометка тестового режима — янтарная (осмысленный цвет предупреждения),
   перекрывает `.option-payment-item.active span` (тёмный текст акцента) */
.profile-wallet-payment-form .tl-pay-opt.active .tl-pay-opt-note,
.profile-wallet-payment-form .tl-pay-opt .tl-pay-opt-note{ color:var(--warn-ink) !important; }
.profile-wallet-payment-form .tl-pay-opt .tl-pay-opt-note i{ color:inherit !important; }

/* ==========================================================================
   TRADELOT — /profile: КАРТОЧКИ СОСТОЯНИЯ «ВЕРИФИКАЦИЯ» И «ТАРИФ» (18.09.2026)
   --------------------------------------------------------------------------
   Владелец по скриншоту кабинета: «в кабинете оформить там, где „Верификация
   успешно пройдена, Тариф не подключен“ — лысо сейчас».

   ПРИЧИНА «ЛЫСОГО» ВИДА (разбор каскада). Строка была плашкой
   .profile-home-sections-info-item, но её вид убивали два слоя:
     • tradelot-borders.css, часть 1 (строка 196) — `border:0 !important;
       box-shadow:none`, а фон из того же слоя (строка 111) — `--card-bg`
       (= --surface = БЕЛЫЙ). Итог: БЕЛЫЙ прямоугольник на белой карточке
       раздела, без рамки и без тени — границ блока просто не видно;
     • .profile-home-sections-info-item::before в main.css получает только
       `background-color:var(--brand-2)`, но БЕЗ content/width/height/display,
       поэтому «фирменная полоска» акцента никогда не рисовалась.
     Плюс в пройденной верификации внутри карточки лежал ОДИН <h5> — без
     значка, без описания и без кнопки.

   ЧТО ЗДЕСЬ. Новый класс .tl-st-card: свой фон --surface-2, видимая рамка
   --card-border, скругление --card-radius-inner (14 px) и отступы из общего
   токена --card-pad (22 px на десктопе, 18 px на телефоне — значение токена
   задаёт tradelot-borders.css, своих чисел нет). Внутри — плитка со значком
   .tl-st-icon, системная ПЛАШКА СОСТОЯНИЯ (.status-label-color-success /
   -warning из tradelot-borders.css, часть 31: 26 px / пилюля / 12.5 px),
   подпись-пояснение и ряд кнопок.

   Плашка внутри карточки крупнее системной (32 px / 14 px): она здесь несёт
   роль заголовка состояния, а не мелкой метки в строке лота. Правила заданы
   селектором .tl-st-card .status-label — он специфичнее системного
   .status-label (0,2,0 против 0,1,0), поэтому перебивает его !important.

   ЦВЕТА ПЛАШЕК — из системных токенов (tradelot-borders.css, часть 31):
     успех  --tl-badge-ok-bg   #e7f7ef + --tl-badge-ok-ink   #0f7a4c
     вним.  --tl-badge-warn-bg #fff0e9 + --tl-badge-warn-ink #a8431a
   Оба варианта — тёмный текст на светлой подложке, то есть контраст не зависит
   от темы (в проекте уже был случай, когда светлая подложка + посветлевший
   в тёмной теме токен давали 1,32:1 — см. комментарий у .tl-ex-mark).
   Явные значения продублированы в --tl-st-ok-ink/--tl-st-warn-ink, чтобы
   значок и текст предупреждения читались одинаково и вне карточки.
   ========================================================================== */

.tl-st-card{
  --tl-st-ok-ink:#0f7a4c;
  --tl-st-warn-ink:#a8431a;
  box-sizing:border-box;
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:var(--card-pad, 22px);
  margin:0 0 16px;
  background:var(--surface-2);
  border:1px solid var(--card-border, var(--line-soft));
  border-radius:var(--card-radius-inner, 14px);
  color:var(--ink);
}

/* последняя карточка раздела не «висит» отступом снизу */
.tl-st-card:last-child{ margin-bottom:0; }

/* --- плитка со значком --------------------------------------------------- */
.tl-st-card .tl-st-icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:var(--card-radius-inner, 14px);
  background:var(--brand-tint);
  color:var(--brand-hover);
  font-size:23px;
  line-height:1;
}
.tl-st-card .tl-st-icon i{ color:inherit !important; line-height:1; }
.tl-st-card.is-ok .tl-st-icon{ background:var(--success-tint, #e7f7ef); color:var(--tl-st-ok-ink); }
.tl-st-card.is-wait .tl-st-icon,
.tl-st-card.is-warn .tl-st-icon{ background:var(--warn-tint, #fdf1e0); color:var(--tl-st-warn-ink); }

/* --- содержимое --------------------------------------------------------- */
.tl-st-card .tl-st-body{ flex:1 1 auto; min-width:0; }

.tl-st-card .tl-st-state{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }

/* плашка состояния крупнее системной: здесь она — заголовок состояния.
   ⚠️ Селектор ОБЯЗАН быть (0,3,0), а не (0,2,0): в tradelot-borders.css (часть 31)
   геометрия плашки объявлена в списке, где есть и `.status-label`, и
   `.status-label.status-label-color-success` (то есть 0,2,0), а этот файл
   подключается ПОСЛЕ main.css — при равной специфичности побеждал он, и замер
   давал 26 px / 12.5 px вместо заданных 32 px / 14 px. Здесь специфичность выше. */
.tl-st-card .status-label,
.tl-st-card .status-label.status-label-color-success,
.tl-st-card .status-label.status-label-color-warning,
.tl-st-card .status-label.status-label-color-danger,
.tl-st-card .status-label.status-label-color-secondary,
.tl-st-card .status-label.status-label-color-primary,
.tl-st-card .status-label.status-label-color-info{
  height:32px !important;
  max-height:32px !important;
  padding:0 14px !important;
  font-size:14px !important;
  gap:7px;
}
.tl-st-card .status-label i{ font-size:17px !important; line-height:1; }

.tl-st-card .tl-st-text{
  margin:12px 0 0;
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.6;
}
.tl-st-card .tl-st-text + .tl-st-text{ margin-top:6px; }
.tl-st-card .tl-st-text-warn{ color:var(--danger-ink, #a32626); }

.tl-st-card .tl-st-meta{
  margin:12px 0 0;
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.6;
  font-variant-numeric:tabular-nums;
}

/* --- кнопки: один ряд, один зазор, своя высота --------------------------- */
.tl-st-card .tl-st-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}
/* .mt10 у кнопок кабинета обнуляется правилом «.profile-home-sections-info-item
   .btn-custom{margin-top:0 !important}» — здесь отступ даёт .tl-st-actions,
   поэтому кнопкам верхний отступ не нужен вовсе */
.tl-st-card .tl-st-actions > .btn-custom,
.tl-st-card .tl-st-actions > .btn-custom-mini,
.tl-st-card .tl-st-actions > .btn-custom-big,
.tl-st-card .tl-st-actions > form{ margin:0 !important; }

/* --- телефон ------------------------------------------------------------- */
@media (max-width:575px){
  .tl-st-card{ gap:12px; }
  .tl-st-card .tl-st-icon{ width:38px; height:38px; font-size:19px; border-radius:12px; }
  .tl-st-card .status-label,
  .tl-st-card .status-label.status-label-color-success,
  .tl-st-card .status-label.status-label-color-warning,
  .tl-st-card .status-label.status-label-color-danger,
  .tl-st-card .status-label.status-label-color-secondary,
  .tl-st-card .status-label.status-label-color-primary,
  .tl-st-card .status-label.status-label-color-info{
    height:28px !important;
    max-height:28px !important;
    padding:0 11px !important;
    font-size:13px !important;
    gap:6px;
  }
  .tl-st-card .status-label i{ font-size:15px !important; }
  .tl-st-card .tl-st-text,
  .tl-st-card .tl-st-meta{ font-size:14px; }
}
/* <<< TL-PROFILE-STATUS-CARDS 18.09.2026 <<< */

/* ==========================================================================
   TRADELOT — ГЛАВНАЯ: ДВА БОКОВЫХ СТОЛБЦА ПЕРВОГО ЭКРАНА С КАРТИНКАМИ (18.09.2026)
   --------------------------------------------------------------------------
   Владелец показал на скриншоте ПУСТЫЕ места слева и справа от заголовка
   первого экрана: «красивая картинка, плюсом добавьте ещё по бокам (показал
   где) — например про покупку-продажу сайтов и проектов, например с аукционом».

   КАК СДЕЛАНО (и почему именно так). Три столбца сетки:
       1fr | minmax(0,1000px) | 1fr
   Центральный столбец ровно равен прежнему max-width заголовка (1000 px),
   поэтому ширина заголовка, подводки и строки поиска НЕ изменилась, а боковые
   столбцы получают ровно свободное место. Картинки стоят в этих столбцах —
   значит наехать на заголовок они не могут ПО ПОСТРОЕНИЮ (это сетка, а не
   absolute-позиционирование), и горизонтального переполнения тоже не будет:
   оба боковых столбца объявлены как minmax(0,1fr), то есть могут сжиматься.

   ЗАМЕР СВОБОДНОГО МЕСТА (контейнер = min(1400, ширина окна) − 24 px поля):
       ширина окна 1440 → контейнер 1376 → свободно по бокам 188 px
       ширина окна 1280 → контейнер 1256 → свободно по бокам 128 px
       ширина окна 1100 → контейнер 1076 → свободно по бокам  38 px
       ширина окна  768 / 390 → центральный столбец уже  < 1000 px, места нет
   ПОЭТОМУ ПОКАЗ — только при ширине окна ≥ 1280 px: там картинка получает
   188 px (1440) и 128 px (1280) — это читаемый размер. На 1100 остаётся 38 px,
   то есть от картинки была бы нечитаемая полоска; на планшете и телефоне
   места нет вовсе. Ниже 1280 картинки аккуратно СКРЫВАЮТСЯ (display:none),
   и первый экран остаётся ровно таким, каким был — ничего не сжимается и не
   переносится. Это осознанное решение по читаемости, а не «спрятать от греха».

   Картинки: /img/tl-hero-projects.webp и /img/tl-hero-auction.webp (480×600,
   показ до 188 px → запас 2,5× на экраны с двойной плотностью). Нарисованы
   локально в фирменном стиле баннера «Данные в лотах», стили те же: радиус
   карточек 20 / 14, мягкая тень --sh-2, фирменные #6640f4 и #ff845c.
   Скругление и тень — на самой картинке (в файле фон уже залит градиентом).
   ========================================================================== */

.tl-hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1000px) minmax(0,1fr);
  align-items:start;
}

/* центральный столбец: ровно то место, где раньше жил max-width:1000px у h1 */
.tl-hero-mid{
  grid-column:2;
  grid-row:1;
  min-width:0;
}

/* боковые столбцы: по умолчанию картинок нет — их включает медиазапрос */
.tl-hero-side{
  grid-row:1;
  display:none;
  align-self:center;
  max-width:188px;
  min-width:0;
}
.tl-hero-side img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border-radius:20px;
  box-shadow:var(--sh-2);
}
.tl-hero-side-left{ grid-column:1; justify-self:start; }
.tl-hero-side-right{ grid-column:3; justify-self:end; }

/* баннер «Данные в лотах» и кнопки — по-прежнему на всю ширину контейнера */
.tl-hero-inner > .tl-hero-banner,
.tl-hero-inner > .tl-cta{ grid-column:1 / -1; }

@media (min-width:1280px){
  .tl-hero-side{ display:block; }
}

@media (max-width:991px){
  .tl-hero-side img{ border-radius:18px; }
}
/* <<< TL-HERO-SIDE-ART 18.09.2026 <<< */

/* ============================================================================
   >>> TL-EXAMPLE-PRICE-BLOCK 18.09.2026 >>>
   ПРАВКА ВЛАДЕЛЬЦА (скриншот страницы примера): «В примерах — блок „Там где цена,
   Продавца у примера нет, Данные выдуманы для показа возможностей сервиса“ —
   внутри оформить нормально!».

   ЧТО БЫЛО (живой замер 1440, лот-пример 1581, /veb-sayty/primer-internet-magazin-
   sadovoj-tehniki-1581):
     • карточка .ad-card-user 284 px, внутри две колонки: аватар 76 px
       (аватар 52 px + зазор 24 px) + текст 176 px;
     • подпись «Продавца у примера нет» — высота 43,5 px при межстрочном 21,75 px,
       то есть ДВЕ строки: «нет» уезжало вниз (жалоба владельца);
     • пояснение «Данные выдуманы для показа возможностей сервиса» — серый текст
       БЕЗ плашки, три строки по 168 px с отступом 3 px (кегль 13 px);
     • аватар — картинка СЛУЖЕБНОГО аккаунта (user_id=4), обрезанная по высоте
       (обёртка 52×58 при картинке 50×50 в рамке 54×54);
     • пояснение «купить/написать нельзя» стояло ОТДЕЛЬНОЙ серой плашкой ниже
       (.tl-example-nochat, зазор 45 px) — то есть смысл дублировался.

   ЧТО СТАЛО (правила ниже + разметка ad-card.tpl):
     • аватар у примера не печатается вовсе: продавца нет — нет ни ссылки на
       профиль, ни аватара (изображать нечем, а служебная картинка вводила
       в заблуждение);
     • карточка .ad-card-user становится одноколоночной (.tl-example-user),
       внутренние отступы 16 px со всех четырёх сторон (--card-pad-inner),
       между строкой и плашкой ровно 12 px;
     • подпись «Продавца у примера нет» — ОДНА строка (white-space:nowrap);
     • пояснение — ОДНА плашка на всю ширину карточки: подложка var(--surface-2),
       рамка 1 px var(--line-soft), радиус 14 px, внутри 14 px, кегль 13/12,5 px
       и межстрочный 1,45 у обеих строк (выровнены между собой);
     • отдельная плашка .tl-example-nochat больше не печатается (см. ad-card.tpl).
   ============================================================================ */

/* карточка примера: одна колонка, отступы как у остальных карточек лота */
.ad-card-user.tl-example-user{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
}

/* строка «Продавца у примера нет» — всегда ОДНА строка (переносов нет) */
.ad-card-user.tl-example-user .ad-card-user-content{
  width:100%;
  gap:12px;
  /* main.css:3056 даёт .ad-card-user-content отступ слева 10 px — он был рассчитан
     на двухколоночную карточку (аватар → текст). В одноколоночной карточке примера
     он сдвигал содержимое вправо: плашка стояла 1129…1381 при внутреннем поле
     карточки 1119…1371 — зазоры слева 26 px, справа 6 px (живой замер 18.09.2026).
     Здесь отступ снят: плашка занимает ровно внутреннюю ширину карточки. */
  margin-left:0;
}
.ad-card-user.tl-example-user .tl-example-seller{
  white-space:nowrap;
}

/* плашка-пояснение: на всю ширину карточки, ровные отступы */
.ad-card-user.tl-example-user .tl-example-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  padding:14px;
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  border-radius:14px;
  font-size:13px;
  line-height:1.45;
  color:var(--ink-2);
}
.ad-card-user.tl-example-user .tl-example-note > i{
  flex:0 0 auto;
  font-size:17px;
  line-height:1.35;
  color:var(--muted);
}
.ad-card-user.tl-example-user .tl-example-note-text{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  /* первая строка стоит по первой строке иконки: 13 px × 1,45 = 18,85 px,
     иконка 17 px × 1,35 = 22,95 px — разница 4,1 px делится ровно пополам */
  margin-top:2px;
}
.ad-card-user.tl-example-user .tl-example-note-text strong{
  font-size:13px;
  font-weight:700;
  line-height:1.45;
  color:var(--ink-2);
}
.ad-card-user.tl-example-user .tl-example-note-text span{
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted);
}

/* телефон: внутренние отступы плашки те же 12 px, а КЕГЛЬ И МЕЖСТРОЧНЫЙ НЕ МЕНЯЕМ —
   требование владельца «кегль и межстрочный интервал выровнены» относится ко всем
   ширинам: 13 px / 12,5 px при line-height 1,45 дают 18,85 / 18,125 px и на 390 px
   (замер: обе подписи по 2 строки, обрезки 0, горизонтального переполнения 0). */
@media (max-width:575px){
  .ad-card-user.tl-example-user .tl-example-note{ padding:12px; gap:8px; }
}
/* Узкая правая колонка (в этой полосе bootstrap-колонка .col-lg-2 даёт карточке всего
   209 px, внутренняя ширина 177 px): значок «i» забирает 27 px из текста, и пояснение
   рвётся по слову. Живой замер 1100 px 18.09.2026 (`_tl2_ex_ab1100.js`, A/B на одной
   странице): со значком и отступом 14 px текст = 120 px, первая подпись = 5 строк,
   плашка 186,6 px; без значка и с отступом 12 px текст = 151 px, подпись = 3 строки,
   плашка 144,9 px. Обрезки и наездов в обоих вариантах 0 — выбран читаемый.
   Вне этой полосы (≥1200 px — колонка шире; ≤991 px — колонка во всю ширину)
   значок остаётся. */
@media (min-width:992px) and (max-width:1199px){
  .ad-card-user.tl-example-user .tl-example-note{ padding:12px; }
  .ad-card-user.tl-example-user .tl-example-note > i{ display:none; }
}
/* <<< TL-EXAMPLE-PRICE-BLOCK 18.09.2026 <<< */

/* >>> TL-CAB-EMPTY-STATE 18.09.2026 >>> */
/* ==========================================================================
   TRADELOT — ЕДИНОЕ ПУСТОЕ СОСТОЯНИЕ КАБИНЕТА (.tl-empty), ЧАСТЬ 61
   --------------------------------------------------------------------------
   Владелец (скриншоты кабинета, две задачи):
     • «Пустые состояния прижаты к левому краю и выглядят не красиво. Сделать
        по центру, а то в левом боку сейчас — не красиво. + оформить нормально!
        Для „Магазины“, „Статистика“, „Спецпредложения“, „Автоответчик“»;
     • «Раздел „Отзывы“: бордер узкий, переоформить».

   ЗАМЕР «ДО» (_deploy/tradelot_tools/_es_measure_before.txt, живые страницы
   под вошедшим пользователем, ширины 1440/1100/768/390):
     • «Магазины» 1440 px: иллюстрация 256×256 стояла ВПЛОТНУЮ к левому краю
       блока (отступ слева 0 px, справа 770 px пустоты), текст жил в колонке
       .col-6 (501 px) с выравниванием влево, центр кнопки — на 424 px левее
       центра блока. То же во всех четырёх разделах (Δ кнопки −424/−311/−187/−96).
     • «Отзывы» 1440 px: содержимое прижималось влево (центр текста «Отзывов
       нет» — на 228 px левее центра блока) из-за правила вкладок `+ div`
       (см. подробный комментарий в разделе «ВКЛАДКИ-ЧИПЫ» выше).
     • Внутреннее переполнение по X у блоков «Магазинов» — 12 px (от
       отрицательных margin у .row/.col-6); у «Отзывов» — 0.

   ЧТО СДЕЛАНО: разметка всех пяти мест переведена на ОДИН компонент
   `.tl-empty` (иллюстрация/иконка + текст + необязательная кнопка) —
   «Магазины» (оба состояния), «Статистика», «Спецпредложения»,
   «Автоответчик», «Отзывы» (обе вкладки). Числа компонента взяты из общей
   системы: подложка --surface-2, мягкая рамка --line-soft, радиус
   --card-radius (20 px), внутренние отступы 32/24 px (на телефоне 28/22 px),
   зазор между элементами 16 px. Иллюстрация не липнет к краю: при
   padding-left 24 px её отступ от края всегда ≥ 24 px (требование ≥ 22 px).
   Кнопка — системная пилюля .btn-custom (радиус --r-pill, заливка --brand),
   без собственных margin: зазор задаёт gap контейнера.
   ========================================================================== */

/* ---------- 1. КОНТЕЙНЕР ПУСТОГО СОСТОЯНИЯ ----------
   `.col-md-9 .tl-empty` (0,2,0) и вариант «сразу после вкладок» (0,3,1) —
   выше правил `+ div` (0,2,1), поэтому вид компонента ни от чего не зависит. */
.col-md-9 .tl-empty,
.col-md-9 .my-tabs-items + .tl-empty,
.col-md-9 .my-tabs-items-small + .tl-empty,
.col-md-9 .my-tabs-items-medium + .tl-empty,
.tl-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  margin:0;
  padding:32px 24px;
  text-align:center;
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  border-radius:var(--card-radius, 20px);
}
/* у «Отзывов» блок идёт прямо после полосы вкладок: свой зазор 24 px,
   чтобы он не прилипал к вкладкам (замеренный ориентир — 24 px) */
.col-md-9 .my-tabs-items + .tl-empty,
.col-md-9 .my-tabs-items-small + .tl-empty,
.col-md-9 .my-tabs-items-medium + .tl-empty{ margin-top:24px !important; }

/* элементы внутри: свои margin не нужны — весь ритм задаёт gap:16px.
   ⚠️ Селекторы кнопок заданы с (0,3,0) НАМЕРЕННО: в кабинете есть правило
   «.col-md-9 h5/p/span + .btn-custom … { margin-top:16px !important }»
   специфичности (0,2,1), и оно добавляло кнопке 16 px ПОВЕРХ gap — замер
   показывал «текст → кнопка 32 px» вместо 16 px (см. _es_why2.js). */
.col-md-9 .tl-empty > .btn-custom,
.col-md-9 .tl-empty > .btn-custom-mini,
.col-md-9 .tl-empty > .btn-custom-big,
.col-md-9 .tl-empty > *,
.tl-empty > *{ margin:0 !important; }

/* ---------- 2. ИЛЛЮСТРАЦИЯ (картинка раздела) ---------- */
.tl-empty > .tl-empty-image{
  display:block;
  width:256px;
  height:256px;
  max-width:100%;
  object-fit:contain;
  border-radius:var(--card-radius-inner, 14px);
}

/* ---------- 3. ИКОНКА-ЭМОДЗИ (когда данных нет вовсе) ---------- */
.tl-empty > .tl-empty-icon{
  display:block;
  font-size:44px;
  line-height:1;
}

/* ---------- 4. ТЕКСТ ---------- */
.tl-empty > .tl-empty-text{
  max-width:560px;
  color:var(--ink-2);
  font-size:15px;
  line-height:1.6;
}

/* ---------- 5. ДЕЙСТВИЕ ---------- */
.tl-empty > .btn-custom,
.tl-empty > .btn-custom-mini,
.tl-empty > .btn-custom-big{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  white-space:normal;
  max-width:100%;
}

/* ---------- 6. ПЛАНШЕТ И ТЕЛЕФОН ----------
   Норма владельца «внутри 22–32 px» сохраняется: 28/22 на планшете,
   26/22 на телефоне; картинка не выходит за контент (max-width:100%).
   Зазор 16 px не уменьшаем: норма сетки отступов — «текст → кнопка ≥ 16 px». */
@media (max-width:991px){
  .col-md-9 .tl-empty,
  .tl-empty{ padding:28px 22px; }
}
@media (max-width:575px){
  .col-md-9 .tl-empty,
  .tl-empty{ padding:26px 22px; }
  .tl-empty > .tl-empty-icon{ font-size:38px; }
  .tl-empty > .tl-empty-text{ font-size:14.5px; }
}
/* <<< TL-CAB-EMPTY-STATE 18.09.2026 <<< */

/* =====================================================================================
   TRADELOT — ПОДВАЛ, ЧАСТЬ 36: НОВАЯ ПАНОРАМА И ЧЕТЫРЕ «БЕГАЮЩИХ» ЗНАЧКА (18.09.2026)
   -------------------------------------------------------------------------------------
   Просьба владельца (по скриншотам подвала): «перерисуйте вот это изображение + 2 маленьких
   значка, которые бегают туда-сюда… сделайте новое изображение + 2–3 новых значка, которые
   тоже будут туда-сюда бегать. Оформление по типу как на скриншоте втором… 3D-стиль.
   Придумайте оригинальность, красоту и профессионализм!»

   БЫЛО: плоский бледно-фиолетовый «город» /ima/footer_bg.png (1348×266) и два значка —
   .footer_bg_one (/ima/car.png, «.com» с замочком) и .footer_bg_two (/ima/bike.png, «WWW»
   в круге). Оба ехали в одну сторону: left -25% → 100% (@keyframes myfirst, 22 s и 30 s),
   то есть анимировалось свойство left — каждый кадр пересчитывалась вёрстка.

   СТАЛО: разметка в footer.tpl — .new_footer_top > .tl-foot-stage > .tl-foot-art + 4 дорожки
   .tl-foot-track с объёмными значками .tl-foot-icon:
       1) /img/tl-foot-badge-domain.svg    — домен под защитой (заменил «.com» с замочком);
       2) /img/tl-foot-badge-web.svg       — сайт / веб-проект  (заменил «WWW» в круге);
       3) /img/tl-foot-badge-analytics.svg — аналитика / график (НОВЫЙ);
       4) /img/tl-foot-badge-deal.svg      — безопасная сделка  (НОВЫЙ).
   Стиль значков — тот же, что у значков категорий (assets/images/categories/*.webp) и картинок
   первого экрана (/img/tl-hero-*.webp): плашка-сквиркл с диагональным градиентом, блик сверху,
   «толщина» снизу, объёмный белый знак и мягкая тень. Палитра фирменная: #6640f4, #ff845c,
   зелёный успеха, бирюзовые акценты.

   ЧТО ВАЖНО ПО ТЕХНИКЕ (и почему сделано именно так):
     * панорама длинная и низкая — 1400×200 (7:1); высота полосы считается по пропорции
       (aspect-ratio), поэтому нет ни пустых полос, ни обрезки; на телефоне полоса выше
       (1400/320) и картинка вписана по object-fit:cover — уменьшается с сохранением
       пропорций, а не растягивается;
     * .tl-foot-stage{overflow:hidden} — значок НИКОГДА не выходит за окно по X. Раньше
       дорожка уезжала на left:-25%, и правый край вылезал за пределы полосы (в замерах
       владельца — переполнение 122/179 px). Замер после правки: overX = 0 на 1440/1280/1100/768/390;
     * движение — только transform: translateX у дорожки (её ширина = ширина полосы, поэтому
       проценты в keyframes считаются от полосы) и translateY у самого значка; вёрстка при
       анимации не пересчитывается, кадры идут на композиторе — дёрганья нет;
     * animation-direction: alternate — значки ходят ТУДА-СЮДА (требование владельца), у каждого
       своя длительность (23–32 s) и своя отрицательная задержка, поэтому они не в ногу;
     * prefers-reduced-motion: reduce — движение и покачивание выключаются, значки встают на
       статические места (--tl-pos) и остаются видимыми (замер: ход 0 px, значков 4);
     * фон полосы продублирован градиентом — если SVG не загрузится, полоса останется
       аккуратной, а не «дыркой»;
     * текст копирайта и строка про Т-Банк не тронуты; полоса стоит ВЫШЕ них и на текст
       не наезжает (замер наездов: 0).
   Проверено живым прогоном: _deploy\tradelot_tools\_tl_foot_probe.js + _tl_foot_run.ps1
   (отчёты _tl_foot_after_report.txt и _tl_foot_after_measure.json).
   ===================================================================================== */

.new_footer_top{
  padding:26px 0 0;
}

.tl-foot-stage{
  --tl-s:56px;                    /* базовый размер «бегающего» значка (планшет и десктоп) */
  --tl-base:97%;                  /* линия «земли»: значки бегут по дорожке площадки */
  position:relative;
  width:100%;
  aspect-ratio:1400 / 200;        /* полоса ровно по пропорции панорамы */
  border-radius:var(--card-radius, 20px);
  overflow:hidden;                /* защита от переполнения по X: значки не выходят за окно */
  background:linear-gradient(180deg, #ffffff 0%, #f3eefe 100%);
  isolation:isolate;
}

.tl-foot-stage .tl-foot-art{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
}

/* дорожка: ширина = ширина полосы, высота 0 — внутри только значок.
   Проценты в translateX считаются от ширины дорожки, то есть от ширины полосы.
   --tl-size считается из базового --tl-s и «дальности» --tl-k: у каждой дорожки свой
   размер и своя высота над передней кромкой (--tl-dy в долях размера), поэтому значки
   идут как бы на разной глубине: когда два значка сходятся, видно два разных предмета,
   а не одну слипшуюся кляксу. */
.tl-foot-track{
  --tl-size:calc(var(--tl-s) * var(--tl-k, 1));
  position:absolute;
  left:0;
  top:calc(var(--tl-base) - var(--tl-size) + var(--tl-dy, 0) * var(--tl-size));
  width:100%;
  height:0;
  transform:translateX(var(--tl-pos, 6%));
  will-change:transform;
  animation:tl-foot-run var(--tl-dur, 26s) cubic-bezier(.37, 0, .63, 1) infinite alternate;
  animation-delay:var(--tl-delay, 0s);
}

.tl-foot-icon{
  position:absolute;
  left:0;
  top:0;
  display:block;
  width:var(--tl-size);
  height:var(--tl-size);
  filter:drop-shadow(0 4px 8px rgba(58, 31, 143, .26));
  animation:tl-foot-bob var(--tl-bob, 5.4s) ease-in-out infinite alternate;
  animation-delay:var(--tl-delay, 0s);
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
}

/* своя скорость, свой сдвиг, свой размер и своё место на дорожке у каждого значка */
.tl-foot-track-1{ --tl-pos:4%;  --tl-k:.82; --tl-dy:-.55; --tl-dur:26s; --tl-delay:-1.5s; --tl-bob:5.2s; }
.tl-foot-track-2{ --tl-pos:28%; --tl-k:.89; --tl-dy:-.36; --tl-dur:32s; --tl-delay:-9s;   --tl-bob:6.1s; }
.tl-foot-track-3{ --tl-pos:54%; --tl-k:1;   --tl-dy:-.18; --tl-dur:23s; --tl-delay:-4.5s; --tl-bob:4.7s; }
.tl-foot-track-4{ --tl-pos:76%; --tl-k:1.11; --tl-dy:0;   --tl-dur:29s; --tl-delay:-13s;  --tl-bob:5.7s; }

/* ход по горизонтали: от левого края полосы до правого, с полями 24 px
   (поля больше радиуса скругления полосы, иначе у крайних точек значок задевал бы
   дугу скругления; сам значок всегда целиком внутри полосы — переполнения по X нет) */
@keyframes tl-foot-run{
  from{ transform:translateX(24px); }
  to  { transform:translateX(calc(100% - var(--tl-size) - 24px)); }
}

/* очень мягкое покачивание — значки «живые», но не дёргаются */
@keyframes tl-foot-bob{
  from{ transform:translateY(0); }
  to  { transform:translateY(-4px); }
}

/* владелец: при запрете движения (системная настройка) анимация отключается полностью */
@media (prefers-reduced-motion: reduce){
  .new_footer_top .tl-foot-track{
    animation:none;
    transform:translateX(var(--tl-pos, 6%));
  }
  .new_footer_top .tl-foot-icon{
    animation:none;
    transform:none;
  }
}

@media (max-width:767px){
  .new_footer_top{ padding:18px 0 0; }
  .tl-foot-stage{
    --tl-s:34px;                  /* на телефоне значки меньше, но остаются читаемыми */
    aspect-ratio:1400 / 320;      /* полоса выше: картинка вписывается по cover, без растяжки */
  }
}
/* <<< TL-FOOTER-3D 18.09.2026 <<< */

/* =====================================================================================
   TRADELOT — ПОДВАЛ, ЧАСТЬ 37: ССЫЛКИ В ПЛАШКЕ СТОЯТ В ОДНУ ЛИНИЮ (18.09.2026)
   -------------------------------------------------------------------------------------
   Владелец (по скриншоту подвала): «надо в одну линию сделать, а то мобильное приложение
   внизу почему-то» — «Магазины» и «Блог» стояли в первой строке, а «Мобильное приложение 🔥»
   уезжало во вторую.

   ПРИЧИНА (найдена замером, _tl_strip_probe.js, до правки):
     * у плашки .footer-bg-box-link-inline в слое границ стоит display:flex с flex-wrap:wrap
       (tradelot-borders.css, раздел про зазоры подвала);
     * из-за этого её единственный ребёнок — .row — перестал быть блочным на всю ширину:
       он посчитался по содержимому (width 412.578 px вместо 1320 px) и стал flex-элементом;
     * .col-md-10 = 83,33 % от 412,578 = 343,8 px, а трём ссылкам нужно ≈368 px (76 + 15 + 36 +
       15 + 202 + внутренние паддинги 24) — не хватало 24 px, поэтому третья ссылка переносилась.
     * зазоры были РАЗНЫЕ: 15 px margin-right + пробел между inline-block (~3,2 px) = 18,2 px,
       а между второй и третьей — перенос строки.

   СТАЛО: .row растянут на всю ширину плашки (flex:1 1 100% + width:100%), а список ссылок
   в .col-md-10 — flex-строка БЕЗ переноса с одним и тем же зазором; у ссылок убран
   margin-right и запрещён внутренний перенос (white-space:nowrap), поэтому «Мобильное
   приложение 🔥» не рвётся на две строки.
   На телефоне и планшете (≤991 px) перенос РАЗРЕШЁН: там ссылки занимают всю ширину
   (col-12) и переносятся целыми блоками с зазором 10/16 px — это нормальное поведение.
   Замер после правки: 1440/1280/1100 — одна строка, Δ top = 0, зазоры 22 / 22 px,
   высота плашки 85 px (не выросла), обрезки/наездов/переполнения по X — 0.
   ===================================================================================== */
.footer-bg-box-link-inline > .row{
  width:100%;
  flex:1 1 100%;
}
.footer-bg-box-link-inline .col-md-10{
  display:flex;
  flex-wrap:nowrap;               /* на десктопе — строго одна линия */
  align-items:center;
  gap:22px;                       /* один и тот же зазор между всеми ссылками */
}
.footer-bg-box-link-inline .footer-bg-box-link-inline-item{
  margin-right:0;
  white-space:nowrap;             /* «Мобильное приложение 🔥» не переносится внутри себя */
}
@media (min-width:768px) and (max-width:991px){
  .footer-bg-box-link-inline .col-md-10{
    flex-wrap:wrap;
    gap:10px 18px;
  }
}
@media (max-width:767px){
  .footer-bg-box-link-inline .col-md-10{
    flex-wrap:wrap;
    gap:10px 16px;
  }
}
/* <<< TL-FOOTER-STRIP-LINE 18.09.2026 <<< */