/* base color */
.top-blocks {
    white-space: nowrap
}

.horizontal-menu>li+li {
    margin-left: 27px
}

a:focus, a:hover {
    color: var(--jv-primary)
}

/* Bootstrap styles */
.tooltip.in {
    animation: .3s ease 0s normal none 1 running jump;
}

.tooltip-inner {
    background-color: #333333
}

@keyframes jump {
    0%,100% {
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -moz-transform: translateY(-4px);
        -o-transform: translateY(-4px);
        -ms-transform: translateY(-4px);
        transform: translateY(-4px)
    }
}

@-webkit-keyframes jump {
    0%,100% {
        -webkit-transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-4px)
    }
}

/* basic styles */
.text-gray {
    color: gray;
}

.text-red {
    color: red;
}

.text-green {
    color: green;
}

.text-orange {
    color: orange;
}

.fs-10 {
    font-size: 10px;
}

.fs-11 {
    font-size: 11px;
}

.fs-12 {
    font-size: 12px;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.fs-15 {
    font-size: 15px;
}

.fs-16 {
    font-size: 16px;
}

.fs-17 {
    font-size: 17px;
}

.fs-18 {
    font-size: 18px;
}

.fs-19 {
    font-size: 19px;
}

.fs-20 {
    font-size: 20px;
}

.list-informations .li-name {
    color: #737373
}

.product-item__heading a:hover, .product-item__heading a:focus {
    text-decoration: none
}

.swiper-wrapper .product-layout {
    height: auto
}

.product-item__rating {
    margin-bottom: 15px;
}

.product-item-price-stock {
    flex-wrap: wrap
}

.main-price {
    font-size: 29px;
    font-weight: 600;
}

.catalog-list .product-item__image a img {
    margin-top: 0;
    margin-bottom: 0
}

.text-empty p {
    font-size: 18px;
    font-weight: 600;
}

.review-answer {
    padding: 10px 15px;
    background: rgb(150 202 88 / 6%);
    border: 1px solid rgb(139 195 74 / 64%);
    color: #333;
    font-weight: 500;
    line-height: 24px
}

.top-panel__logo img {
    max-height: 44px
}

.product-rewards .reward-description h3 {
    font-weight: 600
}

.catalog .additional-categories {
    padding: 4px;
    margin-left: -4px
}

.header-submenu__col--grey {
    max-height: calc(100vh - 95px);
}

.header-submenu__rightside {
    max-height: calc(100vh - 135px)
}

.header-submenu__col--grey, .header-submenu__rightside {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.catalog-sections .catalog-section__item {
    background: #fff;
    border: 1px solid #ededed;
    transition: all .3s;
    padding: 12px 20px;
}

.catalog-sections .catalog-section__item:hover {
    border-color: #fff;
    background: #fff;
    box-shadow: 0 5px 30px rgb(34 34 34 / 10%);
}

@media only screen and (min-width: 768px) {
    .catalog-section-item__image {
        margin-right: 24px;
    }
}

.category-banner__full img {
    border-radius: 12px;
}

.category-section__list {
    padding-bottom: 0;
    height: 100%;
}

.catalog-section__item__title {
    font-size: 15px;
}

.category-column {
    padding-bottom: 20px;
}

.container-push {
    position: relative;
    margin-bottom: 30px
}

@media (max-width: 767px) {
    .product-button__container {
        width: 100%;
    }
}

.product-item__amount .product-item__amount-input {
    width: 35px;
    appearance: none;
}

.header-submenu__col--grey {
    width: 390px;
}

.minicart-price>p {
    font-weight: 600;
}

.price-tax {
    padding-bottom: 6px;
    margin-top: -3px;
    font-size: 12px;
    font-weight: 400
}

.header-links .dropdown-menu {
    overflow: hidden;
}

.header-submenu__subchild__item a:hover, .submenu-link:hover, .submenu-link:focus, .child-link:hover, .child-link:focus {
    color: var(--jv-primary);
}

.title-module {
    border-radius: 3px 3px 0 0;
    height: 44px;
    font-weight: 600;
    text-transform: unset;
    font-size: 16px;
}

.toolbar-form__input__title {
    font-size: 13px;
    font-weight: 500
}


.product-item__delay i:active, .product-item__delay i:hover {
    color: #5a5a5a
}

.text-dotted-border {
    border-bottom: 1px dotted;
    color: #f96839;
}

.catalog-section__item__count {
    color: #333;
    background: #f6f6f6;
    border-radius: 2px;
    font-weight: 500;
    top: 0;
    right: 0;
    border-top-right-radius: 8px;
}

@media (min-width: 992px) {
    .top-panel__wrapper {
        border-bottom: 1px solid #e7e7e7;
    }
}

.modal-content {
    border-radius: 6px
}

.product-item-price-old {
    position: relative;
    text-decoration: none
}

.product-item-price-old:before {
    background-color: #ec0000;
    border-radius: 20px;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    right: 0;
    top: 10px;
    -webkit-transform: rotate(172deg);
    -ms-transform: rotate(172deg);
    transform: rotate(172deg);
    width: 100%;
}

.table-list .table-list__item div:first-child {
    color: #737373
}

.product-price__main .price-new {
    color: inherit
}

.top-info__blocks .btn-group>button>strong {
    margin-right: 5px
}

.product-item-marker, .card-percent span {
    color: #ffffff;
    line-height: 20px;
    background-color: #00bcd4;
    transform: rotate(-10deg);
    font-weight: 600;
    box-shadow: 2px 3px 0 0px #12808e;
    border-radius: 0
}

.product-item__delay:hover i {
    color: #333333
}

.product-right {
    display: flex;
    flex-wrap: wrap
}

.product-option, .product-busket {
    flex: 50
}

@media only screen and (max-width: 767px) {
    .product-price__current {
        font-size: 15px
    }

    .product-item-price-old {
        font-size: 13px;
        line-height: 16px
    }

    .main-price {
        font-size: 23px
    }

    .product-right {
        flex-direction: column;
        padding-top: 15px;
    }

    .product-item {
        padding: 5px
    }
}

@media only screen and (min-width: 768px) {
    .product-option {
        margin-right: 20px
    }

    .product-item .xdstickers_wrapper.position_upleft {
        top: 15px;
        left: 15px
    }

    .product-item .xdstickers_wrapper.position_upright {
        top: 15px;
        right: 15px
    }
}

.product-button__container .btn>i {
    font-size: 17px;
    margin-right: 6px;
}

.brands-new .brand-link {
    margin-bottom: 20px
}

.mini>.mini-content {
    position: relative
}

.cart-panel {
    position: absolute;
    height: auto;
    width: 500px;
    top: 121px;
    border-radius: 16px;
    -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
}

.cart-panel .minicart-total {
    display: block;
    box-shadow: none;
    position: relative;
    padding: 20px 30px 40px
}

.minicart-totals {
    padding-right: 0;
    margin-bottom: 20px
}

.cart-panel .mini, .cart-panel.top .mini {
    margin-top: auto;
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: auto
}

.viewed-price__block {
    font-weight: 500
}

.minicart-quantity {
    background: #eaeaea;
    color: inherit;
}

.minicart-empty {
    margin: 20% auto
}

.empty-icon__cart {
    padding-top: 0
}

.header-middle {
    /* position: relative; */
    /* padding: 0; */
    /* margin: 18px 0; */
}

.product-reward span {
    display: flex;
    align-items: center
}

.product-reward .reward-modal__button {
    margin-left: 7px
}

.cart-panel .mini-list li {
    border-top: 1px solid #f0f0f0
}

.cart-panel .mini, .cart-panel.top .mini {
    border-bottom: 1px solid #f0f0f0
}

.minicart-empty i {
    font-size: 10rem;
}

.empty-cart__title {
    font-size: 22px;
    font-weight: 500;
    margin: 30px 0 0;
}

.icon-special path {
    fill: #737373;
    fill-rule: evenodd;
}

.cart-panel .mini-list .minicart-price {
    padding-top: 0;
}

#form-currency button.dropdown-toggle, #form-language button.dropdown-toggle {
    background: #ffffff;
    border-radius: 4px;
}

@media (min-width: 768px) {
    .shadow-lift-hover {
        -webkit-transition: -webkit-box-shadow .25s ease,-webkit-transform .25s ease;
        transition: -webkit-box-shadow .25s ease,-webkit-transform .25s ease;
        transition: box-shadow .25s ease,transform .25s ease;
        transition: box-shadow .25s ease,transform .25s ease,-webkit-box-shadow .25s ease,-webkit-transform .25s ease;
    }

    /* #388: карточка товара в выдаче поиска только наливалась тенью, тогда как
       плитки каталога (.jv-product-card) при наведении приподнимаются без тени.
       Приводим к общему поведению сайта. */
    .shadow-lift-hover:focus, .shadow-lift-hover:hover {
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
        z-index: 1;
    }
}

.manufacturer-logo h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 15px;
}

.xdstickers {
    padding: 5px 8px;
    border-radius: 4px;
    box-shadow: 0 6px 12px rgb(0 0 0 / 12%);
}

.language-select, .currency-select {
    padding: 6px 12px;
    width: calc(100% - 10px);
    border-radius: 4px;
}

@media only screen and (min-width: 992px) {
    .language-select, .currency-select {
        margin: 5px;
    }

    .language-select img, .currency-select img {
        vertical-align: baseline;
    }
}

.cart-panel .mini-list .minicart-info .minicart-name {
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
}

.header-submenu__title {
    text-transform: unset;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
}

.header-submenu .category-link {
    padding: 0 10px;
    margin-left: 10px;
}

.xdstickers_wrapper .xdstickers {
    position: relative;
    padding: 4px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 10px;
    font-weight: 500;
    box-shadow: 0 3px 12px rgb(0 0 0 / 20%);
}

.slide-header {
    background: transparent;
    height: 48px;
    min-height: 48px;
    border-bottom: 1px solid #f1f6f7;
}

.slide-title {
    font-size: 15px;
    font-weight: 600;
}

.menu-mobile__informations .title-information {
    font-weight: 600;
}

.swiper-slideshow {
    margin-top: 0;
}

.alert.alert-cart, .alert.alert-comp, .alert.alert-wish {
    box-shadow: 0 5px 30px rgb(34 34 34 / 10%);
}

.text-last {
    margin-bottom: 15px;
}

.text-last .text-last__form {
    display: flex;
    align-items: center;
}

.text-last i {
    font-size: 17px;
    color: #ff5200;
    vertical-align: middle;
}

.text-last__descr {
    flex-grow: 1;
    max-width: 320px;
    color: #333333;
}

.manufacturer-logo i {
    font-size: 35px;
    opacity: .1;
}

@media (max-width: 1199px) {
    .pt-lg-10 {
        padding-top: 10px;
    }

    .pt-lg-15 {
        padding-top: 15px;
    }

    .pt-lg-20 {
        padding-top: 20px;
    }

    .pt-lg-25 {
        padding-top: 25px;
    }

    .pt-lg-30 {
        padding-top: 30px;
    }

    .pb-lg-10 {
        padding-bottom: 10px;
    }

    .pb-lg-15 {
        padding-bottom: 15px;
    }

    .pb-lg-20 {
        padding-bottom: 20px;
    }

    .pb-lg-25 {
        padding-bottom: 25px;
    }

    .pb-lg-30 {
        padding-bottom: 30px;
    }
}

@media (max-width: 991px) {
    .pt-md-10 {
        padding-top: 10px;
    }

    .pt-md-15 {
        padding-top: 15px;
    }

    .pt-md-20 {
        padding-top: 20px;
    }

    .pt-md-25 {
        padding-top: 25px;
    }

    .pt-md-30 {
        padding-top: 30px;
    }

    .pb-md-10 {
        padding-bottom: 10px;
    }

    .pb-md-15 {
        padding-bottom: 15px;
    }

    .pb-md-20 {
        padding-bottom: 20px;
    }

    .pb-md-25 {
        padding-bottom: 25px;
    }

    .pb-md-30 {
        padding-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .pt-sm-10 {
        padding-top: 10px;
    }

    .pt-sm-15 {
        padding-top: 15px;
    }

    .pt-sm-20 {
        padding-top: 20px;
    }

    .pt-sm-25 {
        padding-top: 25px;
    }

    .pt-sm-30 {
        padding-top: 30px;
    }

    .pb-sm-10 {
        padding-bottom: 10px;
    }

    .pb-sm-15 {
        padding-bottom: 15px;
    }

    .pb-sm-20 {
        padding-bottom: 20px;
    }

    .pb-sm-25 {
        padding-bottom: 25px;
    }

    .pb-sm-30 {
        padding-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .pt-xs-10 {
        padding-top: 10px;
    }

    .pt-xs-15 {
        padding-top: 15px;
    }

    .pt-xs-20 {
        padding-top: 20px;
    }

    .pt-xs-25 {
        padding-top: 25px;
    }

    .pt-xs-30 {
        padding-top: 30px;
    }

    .pb-xs-10 {
        padding-bottom: 10px;
    }

    .pb-xs-15 {
        padding-bottom: 15px;
    }

    .pb-xs-20 {
        padding-bottom: 20px;
    }

    .pb-xs-25 {
        padding-bottom: 25px;
    }

    .pb-xs-30 {
        padding-bottom: 30px;
    }
}

.cursor-pointer {
    cursor: pointer;
}

.product-weight {
    display: inline-block;
}

.weight-block {
    display: block;
    padding: 3px 15px 1px 10px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    font-weight: 400;
    font-size: 13px;
    color: #333333;
}

.weight-block .block-title {
    display: block;
    font-size: 12px;
    color: #b0b0b0;
    transition: all .3s;
    line-height: normal;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 6px 15px;
    clear: both;
    font-weight: 400;
    color: #333333;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #333333;
    background-color: #f5f5f5;
}

.header-links__text {
    cursor: pointer;
}

.header-links__text:hover {
    color: var(--jv-primary);
}

.header-links svg {
    transition: all .3s;
}

.header-links.open svg {
    transform: rotate(180deg);
}

.footer-bottom__text p {
    font-size: 13px;
}

.bottom-menu li a, .footer-bottom__text p, .footer-bottom__powered p {
    color: rgb(255 255 255 / 46%);
}

.footer-column__title {
    padding-bottom: 20px;
    font-weight: 500;
    font-size: 13px;
}

.footer-column__payment img {
    max-height: 18px;
}

@media (min-width: 768px) {
    .text-sm-right {
        text-align: right;
    }

    .text-sm-left {
        text-align: left;
    }
}

@media (min-width: 992px) {
    .text-md-right {
        text-align: right;
    }

    .text-md-left {
        text-align: left;
    }
}

@media (min-width: 1200px) {
    .text-lg-right {
        text-align: right;
    }

    .text-lg-left {
        text-align: left;
    }
}

@media (min-width: 1440px) {
    .text-xl-right {
        text-align: right;
    }

    .text-xl-left {
        text-align: left;
    }
}

.header-open, .header-email, .header-address {
    color: #737373;
}

.header-phone .header-phone__menu {
    position: absolute;
    top: 100%;
    left: 0;
    padding: 20px;
    text-align: left;
    background: #fff;
    border-radius: 6px;
    z-index: 5;
    min-width: 240px;
    max-width: 480px;
    display: none;
    -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
}

.header-phone:hover .header-phone__menu {
    display: block;
}

.header-phone__title {
    color: #333333;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
}

.header-phone__menu .phone-item {
    padding-bottom: 15px;
}

.header-phone__menu .phone-item:last-child {
    padding-bottom: 0;
}

.main-slider {
    position: relative;
}

/* style paginations */
.pagination {
    box-shadow: none;
    display: flex;
    justify-content: center
}

.pagination>li>a, .pagination>li>span {
    font-size: 14px;
    color: #111;
    border: 0;
    float: none;
    font-weight: 500;
    background-color: #fff;
    margin: 0;
    line-height: 100%;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #ededed
}

.pagination li {
    display: inline-block;
    margin: 5px
}

/* product counter */
.number {
    user-select: none;
    position: relative;
    text-align: left;
    padding: 0;
    width: 100%;
    border: 1px solid #e8e8e8;
    display: block;
    border-radius: 6px;
    overflow: hidden;
}

.number-minus, .number-plus {
    position: absolute;
    top: 0;
    width: 40px;
    height: 38px;
    line-height: 40px;
    display: block;
    background: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    font-family: arial;
    color: #333333;
    text-decoration: none;
    border: 0;
    padding: 0;
}

.number-minus {
    left: 0;
}

.number-plus {
    right: 0;
}

.number-minus:hover, .number-plus:hover {
    background: #fafafa;
}

.number-minus:active, .number-plus:active {
    background: #f2f2f2;
}

.number-text {
    display: inline-block;
    color: #333;
    height: 38px;
    padding: 0;
    background: #fff;
    outline: none;
    border: none;
    width: 100%;
    text-align: center;
    font-size: 17px;
}

/* style breadcrumb */
.navigation-content {
    position: relative;
    padding: 19px 0 24px 0;
}

@media (max-width: 767px) {
    .navigation-content:after {
        content: "";
        position: absolute;
        right: 0;
        background-image: linear-gradient(to right,transparent 0,#ffffff 100%);
        height: 25px;
        width: 8px;
        top: 0;
    }
}

.breadcrumb::-webkit-scrollbar {
    height: 0;
}

.fake-checkbox input:checked+label .option-name, .fake-radio input:checked+label .option-name, .fake-radio input:checked+label img, .fake-radio input:checked+label img:hover {
    border-color: #333333;
    color: #333333;
    background: transparent
}

/* Custom styles swiper navigation */
.swiper-nav-next, .swiper-nav-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: none;
}

.swiper-nav-next {
    right: -15px
}

.swiper-nav-prev {
    left: -15px
}

.swiper-button-disabled {
    display: none
}

.navigation-button {
    align-items: center;
    background-color: #fff;
    border-radius: 40px;
    box-shadow: 0 4px 16px rgb(0 0 0 / 15%);
    cursor: pointer;
    display: flex;
    height: 40px;
    width: 40px;
    justify-content: center
}

.navigation-button:hover {
    box-shadow: 0 8px 16px rgb(0 0 0 / 39%);
}

@media only screen and (max-width: 767px) {
    .swiper-buttons, .navigation-button {
        display: none
    }

    .navigation-button {
        height: 35px;
        width: 35px
    }
}

.swiper {
    margin-bottom: 30px;
}

.btn-addtools button, .product-share .dropdown-toggle {
    height: 40px;
    width: 40px;
}

.header-phone > div {
    padding: 7.5px 12px;
    border: 1px solid #d7d7d7;
    border-radius: 6px;
    background: #f9f9f9;
}

.product-item__text_model, .product-item__text_sku {
    display: inline-block;
    border-radius: 2px;
    line-height: normal;
}

.product-top-info .product-item__text_model, .product-top-info .product-item__text_sku {
    margin-bottom: 0;
}

.attribute-block {
    margin-bottom: 20px;
}

.attribute-block h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 15px;
}

.attribute-table {
    width: 100%;
    line-height: normal;
}

.attribute-item__feature {
    padding-right: 24px;
    position: relative;
    background: #fff;
}

.attribute-item {
    text-align: left;
    width: 50%;
    padding-top: 5px;
    padding-bottom: 5px;
}

.attribute-item__description {
    padding-left: 4px;
}

.attribute-feature {
    position: relative;
    padding-right: 4px;
    background: inherit;
    z-index: 1;
    white-space: nowrap;
    display: inline-block;
    color: grey;
}

.attribute-item__feature:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 13px;
    height: 1px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAAAAAA+i0toAAAAAnRSTlMA/1uRIrUAAAAMSURBVHheY7j1/z8ABY8C2UtBe8oAAAAASUVORK5CYII=) 0 0 repeat-x
}

.attribute-all {
    line-height: 17px;
    display: inline-block;
    margin-top: 12px;
    color: inherit;
    cursor: pointer;
    border-bottom: 1px dashed #767676;
}

.attribute-all:hover {
    color: var(--jv-primary);
    border-color: var(--jv-primary);
}

.product-purchased {
    position: relative;
    margin-bottom: 20px;
    border-radius: 6px;
    background: #fff6c4;
    padding: 10px 15px;
}

.product-purchased i {
    font-size: 20px;
    vertical-align: top;
}

#accordion {
    margin-bottom: 20px;
}

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.gap-15 {
    gap: 15px;
}

.gap-20 {
    gap: 20px;
}

.gap-25 {
    gap: 25px;
}

.gap-30 {
    gap: 30px;
}

.m-0 {
    margin: 0 !important;
}

.mt-0, .my-0 {
    margin-top: 0 !important;
}

.mr-0, .mx-0 {
    margin-right: 0 !important;
}

.mb-0, .my-0 {
    margin-bottom: 0 !important;
}

.ml-0, .mx-0 {
    margin-left: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.mt-1, .my-1 {
    margin-top: 0.25rem !important;
}

.mr-1, .mx-1 {
    margin-right: 0.25rem !important;
}

.mb-1, .my-1 {
    margin-bottom: 0.25rem !important;
}

.ml-1, .mx-1 {
    margin-left: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.mt-2, .my-2 {
    margin-top: 0.5rem !important;
}

.mr-2, .mx-2 {
    margin-right: 0.5rem !important;
}

.mb-2, .my-2 {
    margin-bottom: 0.5rem !important;
}

.ml-2, .mx-2 {
    margin-left: 0.5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.mt-3, .my-3 {
    margin-top: 1rem !important;
}

.mr-3, .mx-3 {
    margin-right: 1rem !important;
}

.mb-3, .my-3 {
    margin-bottom: 1rem !important;
}

.ml-3, .mx-3 {
    margin-left: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.mt-4, .my-4 {
    margin-top: 1.5rem !important;
}

.mr-4, .mx-4 {
    margin-right: 1.5rem !important;
}

.mb-4, .my-4 {
    margin-bottom: 1.5rem !important;
}

.ml-4, .mx-4 {
    margin-left: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.mt-5, .my-5 {
    margin-top: 3rem !important;
}

.mr-5, .mx-5 {
    margin-right: 3rem !important;
}

.mb-5, .my-5 {
    margin-bottom: 3rem !important;
}

.ml-5, .mx-5 {
    margin-left: 3rem !important;
}

.p-0 {
    padding: 0 !important;
}

.pt-0, .py-0 {
    padding-top: 0 !important;
}

.pr-0, .px-0 {
    padding-right: 0 !important;
}

.pb-0, .py-0 {
    padding-bottom: 0 !important;
}

.pl-0, .px-0 {
    padding-left: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.pt-1, .py-1 {
    padding-top: 0.25rem !important;
}

.pr-1, .px-1 {
    padding-right: 0.25rem !important;
}

.pb-1, .py-1 {
    padding-bottom: 0.25rem !important;
}

.pl-1, .px-1 {
    padding-left: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.pt-2, .py-2 {
    padding-top: 0.5rem !important;
}

.pr-2, .px-2 {
    padding-right: 0.5rem !important;
}

.pb-2, .py-2 {
    padding-bottom: 0.5rem !important;
}

.pl-2, .px-2 {
    padding-left: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.pt-3, .py-3 {
    padding-top: 1rem !important;
}

.pr-3, .px-3 {
    padding-right: 1rem !important;
}

.pb-3, .py-3 {
    padding-bottom: 1rem !important;
}

.pl-3, .px-3 {
    padding-left: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.pt-4, .py-4 {
    padding-top: 1.5rem !important;
}

.pr-4, .px-4 {
    padding-right: 1.5rem !important;
}

.pb-4, .py-4 {
    padding-bottom: 1.5rem !important;
}

.pl-4, .px-4 {
    padding-left: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

.pt-5, .py-5 {
    padding-top: 3rem !important;
}

.pr-5, .px-5 {
    padding-right: 3rem !important;
}

.pb-5, .py-5 {
    padding-bottom: 3rem !important;
}

.pl-5, .px-5 {
    padding-left: 3rem !important;
}

.m-n1 {
    margin: -0.25rem !important;
}

.mt-n1, .my-n1 {
    margin-top: -0.25rem !important;
}

.mr-n1, .mx-n1 {
    margin-right: -0.25rem !important;
}

.mb-n1, .my-n1 {
    margin-bottom: -0.25rem !important;
}

.ml-n1, .mx-n1 {
    margin-left: -0.25rem !important;
}

.m-n2 {
    margin: -0.5rem !important;
}

.mt-n2, .my-n2 {
    margin-top: -0.5rem !important;
}

.mr-n2, .mx-n2 {
    margin-right: -0.5rem !important;
}

.mb-n2, .my-n2 {
    margin-bottom: -0.5rem !important;
}

.ml-n2, .mx-n2 {
    margin-left: -0.5rem !important;
}

.m-n3 {
    margin: -1rem !important;
}

.mt-n3, .my-n3 {
    margin-top: -1rem !important;
}

.mr-n3, .mx-n3 {
    margin-right: -1rem !important;
}

.mb-n3, .my-n3 {
    margin-bottom: -1rem !important;
}

.ml-n3, .mx-n3 {
    margin-left: -1rem !important;
}

.m-n4 {
    margin: -1.5rem !important;
}

.mt-n4, .my-n4 {
    margin-top: -1.5rem !important;
}

.mr-n4, .mx-n4 {
    margin-right: -1.5rem !important;
}

.mb-n4, .my-n4 {
    margin-bottom: -1.5rem !important;
}

.ml-n4, .mx-n4 {
    margin-left: -1.5rem !important;
}

.m-n5 {
    margin: -3rem !important;
}

.mt-n5, .my-n5 {
    margin-top: -3rem !important;
}

.mr-n5, .mx-n5 {
    margin-right: -3rem !important;
}

.mb-n5, .my-n5 {
    margin-bottom: -3rem !important;
}

.ml-n5, .mx-n5 {
    margin-left: -3rem !important;
}

.m-auto {
    margin: auto !important;
}

.mt-auto, .my-auto {
    margin-top: auto !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

.mb-auto, .my-auto {
    margin-bottom: auto !important;
}

.ml-auto, .mx-auto {
    margin-left: auto !important;
}

@media (min-width: 576px) {
    .m-sm-0 {
        margin: 0 !important;
    }

    .mt-sm-0, .my-sm-0 {
        margin-top: 0 !important;
    }

    .mr-sm-0, .mx-sm-0 {
        margin-right: 0 !important;
    }

    .mb-sm-0, .my-sm-0 {
        margin-bottom: 0 !important;
    }

    .ml-sm-0, .mx-sm-0 {
        margin-left: 0 !important;
    }

    .m-sm-1 {
        margin: 0.25rem !important;
    }

    .mt-sm-1, .my-sm-1 {
        margin-top: 0.25rem !important;
    }

    .mr-sm-1, .mx-sm-1 {
        margin-right: 0.25rem !important;
    }

    .mb-sm-1, .my-sm-1 {
        margin-bottom: 0.25rem !important;
    }

    .ml-sm-1, .mx-sm-1 {
        margin-left: 0.25rem !important;
    }

    .m-sm-2 {
        margin: 0.5rem !important;
    }

    .mt-sm-2, .my-sm-2 {
        margin-top: 0.5rem !important;
    }

    .mr-sm-2, .mx-sm-2 {
        margin-right: 0.5rem !important;
    }

    .mb-sm-2, .my-sm-2 {
        margin-bottom: 0.5rem !important;
    }

    .ml-sm-2, .mx-sm-2 {
        margin-left: 0.5rem !important;
    }

    .m-sm-3 {
        margin: 1rem !important;
    }

    .mt-sm-3, .my-sm-3 {
        margin-top: 1rem !important;
    }

    .mr-sm-3, .mx-sm-3 {
        margin-right: 1rem !important;
    }

    .mb-sm-3, .my-sm-3 {
        margin-bottom: 1rem !important;
    }

    .ml-sm-3, .mx-sm-3 {
        margin-left: 1rem !important;
    }

    .m-sm-4 {
        margin: 1.5rem !important;
    }

    .mt-sm-4, .my-sm-4 {
        margin-top: 1.5rem !important;
    }

    .mr-sm-4, .mx-sm-4 {
        margin-right: 1.5rem !important;
    }

    .mb-sm-4, .my-sm-4 {
        margin-bottom: 1.5rem !important;
    }

    .ml-sm-4, .mx-sm-4 {
        margin-left: 1.5rem !important;
    }

    .m-sm-5 {
        margin: 3rem !important;
    }

    .mt-sm-5, .my-sm-5 {
        margin-top: 3rem !important;
    }

    .mr-sm-5, .mx-sm-5 {
        margin-right: 3rem !important;
    }

    .mb-sm-5, .my-sm-5 {
        margin-bottom: 3rem !important;
    }

    .ml-sm-5, .mx-sm-5 {
        margin-left: 3rem !important;
    }

    .p-sm-0 {
        padding: 0 !important;
    }

    .pt-sm-0, .py-sm-0 {
        padding-top: 0 !important;
    }

    .pr-sm-0, .px-sm-0 {
        padding-right: 0 !important;
    }

    .pb-sm-0, .py-sm-0 {
        padding-bottom: 0 !important;
    }

    .pl-sm-0, .px-sm-0 {
        padding-left: 0 !important;
    }

    .p-sm-1 {
        padding: 0.25rem !important;
    }

    .pt-sm-1, .py-sm-1 {
        padding-top: 0.25rem !important;
    }

    .pr-sm-1, .px-sm-1 {
        padding-right: 0.25rem !important;
    }

    .pb-sm-1, .py-sm-1 {
        padding-bottom: 0.25rem !important;
    }

    .pl-sm-1, .px-sm-1 {
        padding-left: 0.25rem !important;
    }

    .p-sm-2 {
        padding: 0.5rem !important;
    }

    .pt-sm-2, .py-sm-2 {
        padding-top: 0.5rem !important;
    }

    .pr-sm-2, .px-sm-2 {
        padding-right: 0.5rem !important;
    }

    .pb-sm-2, .py-sm-2 {
        padding-bottom: 0.5rem !important;
    }

    .pl-sm-2, .px-sm-2 {
        padding-left: 0.5rem !important;
    }

    .p-sm-3 {
        padding: 1rem !important;
    }

    .pt-sm-3, .py-sm-3 {
        padding-top: 1rem !important;
    }

    .pr-sm-3, .px-sm-3 {
        padding-right: 1rem !important;
    }

    .pb-sm-3, .py-sm-3 {
        padding-bottom: 1rem !important;
    }

    .pl-sm-3, .px-sm-3 {
        padding-left: 1rem !important;
    }

    .p-sm-4 {
        padding: 1.5rem !important;
    }

    .pt-sm-4, .py-sm-4 {
        padding-top: 1.5rem !important;
    }

    .pr-sm-4, .px-sm-4 {
        padding-right: 1.5rem !important;
    }

    .pb-sm-4, .py-sm-4 {
        padding-bottom: 1.5rem !important;
    }

    .pl-sm-4, .px-sm-4 {
        padding-left: 1.5rem !important;
    }

    .p-sm-5 {
        padding: 3rem !important;
    }

    .pt-sm-5, .py-sm-5 {
        padding-top: 3rem !important;
    }

    .pr-sm-5, .px-sm-5 {
        padding-right: 3rem !important;
    }

    .pb-sm-5, .py-sm-5 {
        padding-bottom: 3rem !important;
    }

    .pl-sm-5, .px-sm-5 {
        padding-left: 3rem !important;
    }

    .m-sm-n1 {
        margin: -0.25rem !important;
    }

    .mt-sm-n1, .my-sm-n1 {
        margin-top: -0.25rem !important;
    }

    .mr-sm-n1, .mx-sm-n1 {
        margin-right: -0.25rem !important;
    }

    .mb-sm-n1, .my-sm-n1 {
        margin-bottom: -0.25rem !important;
    }

    .ml-sm-n1, .mx-sm-n1 {
        margin-left: -0.25rem !important;
    }

    .m-sm-n2 {
        margin: -0.5rem !important;
    }

    .mt-sm-n2, .my-sm-n2 {
        margin-top: -0.5rem !important;
    }

    .mr-sm-n2, .mx-sm-n2 {
        margin-right: -0.5rem !important;
    }

    .mb-sm-n2, .my-sm-n2 {
        margin-bottom: -0.5rem !important;
    }

    .ml-sm-n2, .mx-sm-n2 {
        margin-left: -0.5rem !important;
    }

    .m-sm-n3 {
        margin: -1rem !important;
    }

    .mt-sm-n3, .my-sm-n3 {
        margin-top: -1rem !important;
    }

    .mr-sm-n3, .mx-sm-n3 {
        margin-right: -1rem !important;
    }

    .mb-sm-n3, .my-sm-n3 {
        margin-bottom: -1rem !important;
    }

    .ml-sm-n3, .mx-sm-n3 {
        margin-left: -1rem !important;
    }

    .m-sm-n4 {
        margin: -1.5rem !important;
    }

    .mt-sm-n4, .my-sm-n4 {
        margin-top: -1.5rem !important;
    }

    .mr-sm-n4, .mx-sm-n4 {
        margin-right: -1.5rem !important;
    }

    .mb-sm-n4, .my-sm-n4 {
        margin-bottom: -1.5rem !important;
    }

    .ml-sm-n4, .mx-sm-n4 {
        margin-left: -1.5rem !important;
    }

    .m-sm-n5 {
        margin: -3rem !important;
    }

    .mt-sm-n5, .my-sm-n5 {
        margin-top: -3rem !important;
    }

    .mr-sm-n5, .mx-sm-n5 {
        margin-right: -3rem !important;
    }

    .mb-sm-n5, .my-sm-n5 {
        margin-bottom: -3rem !important;
    }

    .ml-sm-n5, .mx-sm-n5 {
        margin-left: -3rem !important;
    }

    .m-sm-auto {
        margin: auto !important;
    }

    .mt-sm-auto, .my-sm-auto {
        margin-top: auto !important;
    }

    .mr-sm-auto, .mx-sm-auto {
        margin-right: auto !important;
    }

    .mb-sm-auto, .my-sm-auto {
        margin-bottom: auto !important;
    }

    .ml-sm-auto, .mx-sm-auto {
        margin-left: auto !important;
    }
}

@media (min-width: 768px) {
    .m-md-0 {
        margin: 0 !important;
    }

    .mt-md-0, .my-md-0 {
        margin-top: 0 !important;
    }

    .mr-md-0, .mx-md-0 {
        margin-right: 0 !important;
    }

    .mb-md-0, .my-md-0 {
        margin-bottom: 0 !important;
    }

    .ml-md-0, .mx-md-0 {
        margin-left: 0 !important;
    }

    .m-md-1 {
        margin: 0.25rem !important;
    }

    .mt-md-1, .my-md-1 {
        margin-top: 0.25rem !important;
    }

    .mr-md-1, .mx-md-1 {
        margin-right: 0.25rem !important;
    }

    .mb-md-1, .my-md-1 {
        margin-bottom: 0.25rem !important;
    }

    .ml-md-1, .mx-md-1 {
        margin-left: 0.25rem !important;
    }

    .m-md-2 {
        margin: 0.5rem !important;
    }

    .mt-md-2, .my-md-2 {
        margin-top: 0.5rem !important;
    }

    .mr-md-2, .mx-md-2 {
        margin-right: 0.5rem !important;
    }

    .mb-md-2, .my-md-2 {
        margin-bottom: 0.5rem !important;
    }

    .ml-md-2, .mx-md-2 {
        margin-left: 0.5rem !important;
    }

    .m-md-3 {
        margin: 1rem !important;
    }

    .mt-md-3, .my-md-3 {
        margin-top: 1rem !important;
    }

    .mr-md-3, .mx-md-3 {
        margin-right: 1rem !important;
    }

    .mb-md-3, .my-md-3 {
        margin-bottom: 1rem !important;
    }

    .ml-md-3, .mx-md-3 {
        margin-left: 1rem !important;
    }

    .m-md-4 {
        margin: 1.5rem !important;
    }

    .mt-md-4, .my-md-4 {
        margin-top: 1.5rem !important;
    }

    .mr-md-4, .mx-md-4 {
        margin-right: 1.5rem !important;
    }

    .mb-md-4, .my-md-4 {
        margin-bottom: 1.5rem !important;
    }

    .ml-md-4, .mx-md-4 {
        margin-left: 1.5rem !important;
    }

    .m-md-5 {
        margin: 3rem !important;
    }

    .mt-md-5, .my-md-5 {
        margin-top: 3rem !important;
    }

    .mr-md-5, .mx-md-5 {
        margin-right: 3rem !important;
    }

    .mb-md-5, .my-md-5 {
        margin-bottom: 3rem !important;
    }

    .ml-md-5, .mx-md-5 {
        margin-left: 3rem !important;
    }

    .p-md-0 {
        padding: 0 !important;
    }

    .pt-md-0, .py-md-0 {
        padding-top: 0 !important;
    }

    .pr-md-0, .px-md-0 {
        padding-right: 0 !important;
    }

    .pb-md-0, .py-md-0 {
        padding-bottom: 0 !important;
    }

    .pl-md-0, .px-md-0 {
        padding-left: 0 !important;
    }

    .p-md-1 {
        padding: 0.25rem !important;
    }

    .pt-md-1, .py-md-1 {
        padding-top: 0.25rem !important;
    }

    .pr-md-1, .px-md-1 {
        padding-right: 0.25rem !important;
    }

    .pb-md-1, .py-md-1 {
        padding-bottom: 0.25rem !important;
    }

    .pl-md-1, .px-md-1 {
        padding-left: 0.25rem !important;
    }

    .p-md-2 {
        padding: 0.5rem !important;
    }

    .pt-md-2, .py-md-2 {
        padding-top: 0.5rem !important;
    }

    .pr-md-2, .px-md-2 {
        padding-right: 0.5rem !important;
    }

    .pb-md-2, .py-md-2 {
        padding-bottom: 0.5rem !important;
    }

    .pl-md-2, .px-md-2 {
        padding-left: 0.5rem !important;
    }

    .p-md-3 {
        padding: 1rem !important;
    }

    .pt-md-3, .py-md-3 {
        padding-top: 1rem !important;
    }

    .pr-md-3, .px-md-3 {
        padding-right: 1rem !important;
    }

    .pb-md-3, .py-md-3 {
        padding-bottom: 1rem !important;
    }

    .pl-md-3, .px-md-3 {
        padding-left: 1rem !important;
    }

    .p-md-4 {
        padding: 1.5rem !important;
    }

    .pt-md-4, .py-md-4 {
        padding-top: 1.5rem !important;
    }

    .pr-md-4, .px-md-4 {
        padding-right: 1.5rem !important;
    }

    .pb-md-4, .py-md-4 {
        padding-bottom: 1.5rem !important;
    }

    .pl-md-4, .px-md-4 {
        padding-left: 1.5rem !important;
    }

    .p-md-5 {
        padding: 3rem !important;
    }

    .pt-md-5, .py-md-5 {
        padding-top: 3rem !important;
    }

    .pr-md-5, .px-md-5 {
        padding-right: 3rem !important;
    }

    .pb-md-5, .py-md-5 {
        padding-bottom: 3rem !important;
    }

    .pl-md-5, .px-md-5 {
        padding-left: 3rem !important;
    }

    .m-md-n1 {
        margin: -0.25rem !important;
    }

    .mt-md-n1, .my-md-n1 {
        margin-top: -0.25rem !important;
    }

    .mr-md-n1, .mx-md-n1 {
        margin-right: -0.25rem !important;
    }

    .mb-md-n1, .my-md-n1 {
        margin-bottom: -0.25rem !important;
    }

    .ml-md-n1, .mx-md-n1 {
        margin-left: -0.25rem !important;
    }

    .m-md-n2 {
        margin: -0.5rem !important;
    }

    .mt-md-n2, .my-md-n2 {
        margin-top: -0.5rem !important;
    }

    .mr-md-n2, .mx-md-n2 {
        margin-right: -0.5rem !important;
    }

    .mb-md-n2, .my-md-n2 {
        margin-bottom: -0.5rem !important;
    }

    .ml-md-n2, .mx-md-n2 {
        margin-left: -0.5rem !important;
    }

    .m-md-n3 {
        margin: -1rem !important;
    }

    .mt-md-n3, .my-md-n3 {
        margin-top: -1rem !important;
    }

    .mr-md-n3, .mx-md-n3 {
        margin-right: -1rem !important;
    }

    .mb-md-n3, .my-md-n3 {
        margin-bottom: -1rem !important;
    }

    .ml-md-n3, .mx-md-n3 {
        margin-left: -1rem !important;
    }

    .m-md-n4 {
        margin: -1.5rem !important;
    }

    .mt-md-n4, .my-md-n4 {
        margin-top: -1.5rem !important;
    }

    .mr-md-n4, .mx-md-n4 {
        margin-right: -1.5rem !important;
    }

    .mb-md-n4, .my-md-n4 {
        margin-bottom: -1.5rem !important;
    }

    .ml-md-n4, .mx-md-n4 {
        margin-left: -1.5rem !important;
    }

    .m-md-n5 {
        margin: -3rem !important;
    }

    .mt-md-n5, .my-md-n5 {
        margin-top: -3rem !important;
    }

    .mr-md-n5, .mx-md-n5 {
        margin-right: -3rem !important;
    }

    .mb-md-n5, .my-md-n5 {
        margin-bottom: -3rem !important;
    }

    .ml-md-n5, .mx-md-n5 {
        margin-left: -3rem !important;
    }

    .m-md-auto {
        margin: auto !important;
    }

    .mt-md-auto, .my-md-auto {
        margin-top: auto !important;
    }

    .mr-md-auto, .mx-md-auto {
        margin-right: auto !important;
    }

    .mb-md-auto, .my-md-auto {
        margin-bottom: auto !important;
    }

    .ml-md-auto, .mx-md-auto {
        margin-left: auto !important;
    }
}

@media (min-width: 992px) {
    .m-lg-0 {
        margin: 0 !important;
    }

    .mt-lg-0, .my-lg-0 {
        margin-top: 0 !important;
    }

    .mr-lg-0, .mx-lg-0 {
        margin-right: 0 !important;
    }

    .mb-lg-0, .my-lg-0 {
        margin-bottom: 0 !important;
    }

    .ml-lg-0, .mx-lg-0 {
        margin-left: 0 !important;
    }

    .m-lg-1 {
        margin: 0.25rem !important;
    }

    .mt-lg-1, .my-lg-1 {
        margin-top: 0.25rem !important;
    }

    .mr-lg-1, .mx-lg-1 {
        margin-right: 0.25rem !important;
    }

    .mb-lg-1, .my-lg-1 {
        margin-bottom: 0.25rem !important;
    }

    .ml-lg-1, .mx-lg-1 {
        margin-left: 0.25rem !important;
    }

    .m-lg-2 {
        margin: 0.5rem !important;
    }

    .mt-lg-2, .my-lg-2 {
        margin-top: 0.5rem !important;
    }

    .mr-lg-2, .mx-lg-2 {
        margin-right: 0.5rem !important;
    }

    .mb-lg-2, .my-lg-2 {
        margin-bottom: 0.5rem !important;
    }

    .ml-lg-2, .mx-lg-2 {
        margin-left: 0.5rem !important;
    }

    .m-lg-3 {
        margin: 1rem !important;
    }

    .mt-lg-3, .my-lg-3 {
        margin-top: 1rem !important;
    }

    .mr-lg-3, .mx-lg-3 {
        margin-right: 1rem !important;
    }

    .mb-lg-3, .my-lg-3 {
        margin-bottom: 1rem !important;
    }

    .ml-lg-3, .mx-lg-3 {
        margin-left: 1rem !important;
    }

    .m-lg-4 {
        margin: 1.5rem !important;
    }

    .mt-lg-4, .my-lg-4 {
        margin-top: 1.5rem !important;
    }

    .mr-lg-4, .mx-lg-4 {
        margin-right: 1.5rem !important;
    }

    .mb-lg-4, .my-lg-4 {
        margin-bottom: 1.5rem !important;
    }

    .ml-lg-4, .mx-lg-4 {
        margin-left: 1.5rem !important;
    }

    .m-lg-5 {
        margin: 3rem !important;
    }

    .mt-lg-5, .my-lg-5 {
        margin-top: 3rem !important;
    }

    .mr-lg-5, .mx-lg-5 {
        margin-right: 3rem !important;
    }

    .mb-lg-5, .my-lg-5 {
        margin-bottom: 3rem !important;
    }

    .ml-lg-5, .mx-lg-5 {
        margin-left: 3rem !important;
    }

    .p-lg-0 {
        padding: 0 !important;
    }

    .pt-lg-0, .py-lg-0 {
        padding-top: 0 !important;
    }

    .pr-lg-0, .px-lg-0 {
        padding-right: 0 !important;
    }

    .pb-lg-0, .py-lg-0 {
        padding-bottom: 0 !important;
    }

    .pl-lg-0, .px-lg-0 {
        padding-left: 0 !important;
    }

    .p-lg-1 {
        padding: 0.25rem !important;
    }

    .pt-lg-1, .py-lg-1 {
        padding-top: 0.25rem !important;
    }

    .pr-lg-1, .px-lg-1 {
        padding-right: 0.25rem !important;
    }

    .pb-lg-1, .py-lg-1 {
        padding-bottom: 0.25rem !important;
    }

    .pl-lg-1, .px-lg-1 {
        padding-left: 0.25rem !important;
    }

    .p-lg-2 {
        padding: 0.5rem !important;
    }

    .pt-lg-2, .py-lg-2 {
        padding-top: 0.5rem !important;
    }

    .pr-lg-2, .px-lg-2 {
        padding-right: 0.5rem !important;
    }

    .pb-lg-2, .py-lg-2 {
        padding-bottom: 0.5rem !important;
    }

    .pl-lg-2, .px-lg-2 {
        padding-left: 0.5rem !important;
    }

    .p-lg-3 {
        padding: 1rem !important;
    }

    .pt-lg-3, .py-lg-3 {
        padding-top: 1rem !important;
    }

    .pr-lg-3, .px-lg-3 {
        padding-right: 1rem !important;
    }

    .pb-lg-3, .py-lg-3 {
        padding-bottom: 1rem !important;
    }

    .pl-lg-3, .px-lg-3 {
        padding-left: 1rem !important;
    }

    .p-lg-4 {
        padding: 1.5rem !important;
    }

    .pt-lg-4, .py-lg-4 {
        padding-top: 1.5rem !important;
    }

    .pr-lg-4, .px-lg-4 {
        padding-right: 1.5rem !important;
    }

    .pb-lg-4, .py-lg-4 {
        padding-bottom: 1.5rem !important;
    }

    .pl-lg-4, .px-lg-4 {
        padding-left: 1.5rem !important;
    }

    .p-lg-5 {
        padding: 3rem !important;
    }

    .pt-lg-5, .py-lg-5 {
        padding-top: 3rem !important;
    }

    .pr-lg-5, .px-lg-5 {
        padding-right: 3rem !important;
    }

    .pb-lg-5, .py-lg-5 {
        padding-bottom: 3rem !important;
    }

    .pl-lg-5, .px-lg-5 {
        padding-left: 3rem !important;
    }

    .m-lg-n1 {
        margin: -0.25rem !important;
    }

    .mt-lg-n1, .my-lg-n1 {
        margin-top: -0.25rem !important;
    }

    .mr-lg-n1, .mx-lg-n1 {
        margin-right: -0.25rem !important;
    }

    .mb-lg-n1, .my-lg-n1 {
        margin-bottom: -0.25rem !important;
    }

    .ml-lg-n1, .mx-lg-n1 {
        margin-left: -0.25rem !important;
    }

    .m-lg-n2 {
        margin: -0.5rem !important;
    }

    .mt-lg-n2, .my-lg-n2 {
        margin-top: -0.5rem !important;
    }

    .mr-lg-n2, .mx-lg-n2 {
        margin-right: -0.5rem !important;
    }

    .mb-lg-n2, .my-lg-n2 {
        margin-bottom: -0.5rem !important;
    }

    .ml-lg-n2, .mx-lg-n2 {
        margin-left: -0.5rem !important;
    }

    .m-lg-n3 {
        margin: -1rem !important;
    }

    .mt-lg-n3, .my-lg-n3 {
        margin-top: -1rem !important;
    }

    .mr-lg-n3, .mx-lg-n3 {
        margin-right: -1rem !important;
    }

    .mb-lg-n3, .my-lg-n3 {
        margin-bottom: -1rem !important;
    }

    .ml-lg-n3, .mx-lg-n3 {
        margin-left: -1rem !important;
    }

    .m-lg-n4 {
        margin: -1.5rem !important;
    }

    .mt-lg-n4, .my-lg-n4 {
        margin-top: -1.5rem !important;
    }

    .mr-lg-n4, .mx-lg-n4 {
        margin-right: -1.5rem !important;
    }

    .mb-lg-n4, .my-lg-n4 {
        margin-bottom: -1.5rem !important;
    }

    .ml-lg-n4, .mx-lg-n4 {
        margin-left: -1.5rem !important;
    }

    .m-lg-n5 {
        margin: -3rem !important;
    }

    .mt-lg-n5, .my-lg-n5 {
        margin-top: -3rem !important;
    }

    .mr-lg-n5, .mx-lg-n5 {
        margin-right: -3rem !important;
    }

    .mb-lg-n5, .my-lg-n5 {
        margin-bottom: -3rem !important;
    }

    .ml-lg-n5, .mx-lg-n5 {
        margin-left: -3rem !important;
    }

    .m-lg-auto {
        margin: auto !important;
    }

    .mt-lg-auto, .my-lg-auto {
        margin-top: auto !important;
    }

    .mr-lg-auto, .mx-lg-auto {
        margin-right: auto !important;
    }

    .mb-lg-auto, .my-lg-auto {
        margin-bottom: auto !important;
    }

    .ml-lg-auto, .mx-lg-auto {
        margin-left: auto !important;
    }
}

@media (min-width: 1200px) {
    .m-xl-0 {
        margin: 0 !important;
    }

    .mt-xl-0, .my-xl-0 {
        margin-top: 0 !important;
    }

    .mr-xl-0, .mx-xl-0 {
        margin-right: 0 !important;
    }

    .mb-xl-0, .my-xl-0 {
        margin-bottom: 0 !important;
    }

    .ml-xl-0, .mx-xl-0 {
        margin-left: 0 !important;
    }

    .m-xl-1 {
        margin: 0.25rem !important;
    }

    .mt-xl-1, .my-xl-1 {
        margin-top: 0.25rem !important;
    }

    .mr-xl-1, .mx-xl-1 {
        margin-right: 0.25rem !important;
    }

    .mb-xl-1, .my-xl-1 {
        margin-bottom: 0.25rem !important;
    }

    .ml-xl-1, .mx-xl-1 {
        margin-left: 0.25rem !important;
    }

    .m-xl-2 {
        margin: 0.5rem !important;
    }

    .mt-xl-2, .my-xl-2 {
        margin-top: 0.5rem !important;
    }

    .mr-xl-2, .mx-xl-2 {
        margin-right: 0.5rem !important;
    }

    .mb-xl-2, .my-xl-2 {
        margin-bottom: 0.5rem !important;
    }

    .ml-xl-2, .mx-xl-2 {
        margin-left: 0.5rem !important;
    }

    .m-xl-3 {
        margin: 1rem !important;
    }

    .mt-xl-3, .my-xl-3 {
        margin-top: 1rem !important;
    }

    .mr-xl-3, .mx-xl-3 {
        margin-right: 1rem !important;
    }

    .mb-xl-3, .my-xl-3 {
        margin-bottom: 1rem !important;
    }

    .ml-xl-3, .mx-xl-3 {
        margin-left: 1rem !important;
    }

    .m-xl-4 {
        margin: 1.5rem !important;
    }

    .mt-xl-4, .my-xl-4 {
        margin-top: 1.5rem !important;
    }

    .mr-xl-4, .mx-xl-4 {
        margin-right: 1.5rem !important;
    }

    .mb-xl-4, .my-xl-4 {
        margin-bottom: 1.5rem !important;
    }

    .ml-xl-4, .mx-xl-4 {
        margin-left: 1.5rem !important;
    }

    .m-xl-5 {
        margin: 3rem !important;
    }

    .mt-xl-5, .my-xl-5 {
        margin-top: 3rem !important;
    }

    .mr-xl-5, .mx-xl-5 {
        margin-right: 3rem !important;
    }

    .mb-xl-5, .my-xl-5 {
        margin-bottom: 3rem !important;
    }

    .ml-xl-5, .mx-xl-5 {
        margin-left: 3rem !important;
    }

    .p-xl-0 {
        padding: 0 !important;
    }

    .pt-xl-0, .py-xl-0 {
        padding-top: 0 !important;
    }

    .pr-xl-0, .px-xl-0 {
        padding-right: 0 !important;
    }

    .pb-xl-0, .py-xl-0 {
        padding-bottom: 0 !important;
    }

    .pl-xl-0, .px-xl-0 {
        padding-left: 0 !important;
    }

    .p-xl-1 {
        padding: 0.25rem !important;
    }

    .pt-xl-1, .py-xl-1 {
        padding-top: 0.25rem !important;
    }

    .pr-xl-1, .px-xl-1 {
        padding-right: 0.25rem !important;
    }

    .pb-xl-1, .py-xl-1 {
        padding-bottom: 0.25rem !important;
    }

    .pl-xl-1, .px-xl-1 {
        padding-left: 0.25rem !important;
    }

    .p-xl-2 {
        padding: 0.5rem !important;
    }

    .pt-xl-2, .py-xl-2 {
        padding-top: 0.5rem !important;
    }

    .pr-xl-2, .px-xl-2 {
        padding-right: 0.5rem !important;
    }

    .pb-xl-2, .py-xl-2 {
        padding-bottom: 0.5rem !important;
    }

    .pl-xl-2, .px-xl-2 {
        padding-left: 0.5rem !important;
    }

    .p-xl-3 {
        padding: 1rem !important;
    }

    .pt-xl-3, .py-xl-3 {
        padding-top: 1rem !important;
    }

    .pr-xl-3, .px-xl-3 {
        padding-right: 1rem !important;
    }

    .pb-xl-3, .py-xl-3 {
        padding-bottom: 1rem !important;
    }

    .pl-xl-3, .px-xl-3 {
        padding-left: 1rem !important;
    }

    .p-xl-4 {
        padding: 1.5rem !important;
    }

    .pt-xl-4, .py-xl-4 {
        padding-top: 1.5rem !important;
    }

    .pr-xl-4, .px-xl-4 {
        padding-right: 1.5rem !important;
    }

    .pb-xl-4, .py-xl-4 {
        padding-bottom: 1.5rem !important;
    }

    .pl-xl-4, .px-xl-4 {
        padding-left: 1.5rem !important;
    }

    .p-xl-5 {
        padding: 3rem !important;
    }

    .pt-xl-5, .py-xl-5 {
        padding-top: 3rem !important;
    }

    .pr-xl-5, .px-xl-5 {
        padding-right: 3rem !important;
    }

    .pb-xl-5, .py-xl-5 {
        padding-bottom: 3rem !important;
    }

    .pl-xl-5, .px-xl-5 {
        padding-left: 3rem !important;
    }

    .m-xl-n1 {
        margin: -0.25rem !important;
    }

    .mt-xl-n1, .my-xl-n1 {
        margin-top: -0.25rem !important;
    }

    .mr-xl-n1, .mx-xl-n1 {
        margin-right: -0.25rem !important;
    }

    .mb-xl-n1, .my-xl-n1 {
        margin-bottom: -0.25rem !important;
    }

    .ml-xl-n1, .mx-xl-n1 {
        margin-left: -0.25rem !important;
    }

    .m-xl-n2 {
        margin: -0.5rem !important;
    }

    .mt-xl-n2, .my-xl-n2 {
        margin-top: -0.5rem !important;
    }

    .mr-xl-n2, .mx-xl-n2 {
        margin-right: -0.5rem !important;
    }

    .mb-xl-n2, .my-xl-n2 {
        margin-bottom: -0.5rem !important;
    }

    .ml-xl-n2, .mx-xl-n2 {
        margin-left: -0.5rem !important;
    }

    .m-xl-n3 {
        margin: -1rem !important;
    }

    .mt-xl-n3, .my-xl-n3 {
        margin-top: -1rem !important;
    }

    .mr-xl-n3, .mx-xl-n3 {
        margin-right: -1rem !important;
    }

    .mb-xl-n3, .my-xl-n3 {
        margin-bottom: -1rem !important;
    }

    .ml-xl-n3, .mx-xl-n3 {
        margin-left: -1rem !important;
    }

    .m-xl-n4 {
        margin: -1.5rem !important;
    }

    .mt-xl-n4, .my-xl-n4 {
        margin-top: -1.5rem !important;
    }

    .mr-xl-n4, .mx-xl-n4 {
        margin-right: -1.5rem !important;
    }

    .mb-xl-n4, .my-xl-n4 {
        margin-bottom: -1.5rem !important;
    }

    .ml-xl-n4, .mx-xl-n4 {
        margin-left: -1.5rem !important;
    }

    .m-xl-n5 {
        margin: -3rem !important;
    }

    .mt-xl-n5, .my-xl-n5 {
        margin-top: -3rem !important;
    }

    .mr-xl-n5, .mx-xl-n5 {
        margin-right: -3rem !important;
    }

    .mb-xl-n5, .my-xl-n5 {
        margin-bottom: -3rem !important;
    }

    .ml-xl-n5, .mx-xl-n5 {
        margin-left: -3rem !important;
    }

    .m-xl-auto {
        margin: auto !important;
    }

    .mt-xl-auto, .my-xl-auto {
        margin-top: auto !important;
    }

    .mr-xl-auto, .mx-xl-auto {
        margin-right: auto !important;
    }

    .mb-xl-auto, .my-xl-auto {
        margin-bottom: auto !important;
    }

    .ml-xl-auto, .mx-xl-auto {
        margin-left: auto !important;
    }
}

#catalogDescription {
    position: relative;
    height: 150px;
    overflow: hidden;
    margin-bottom: 15px;
    transition: height .3s;
}

#catalogDescription.text-hidden:after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 90px;
    background-image: linear-gradient(to bottom,transparent 0,#ffffff 100%);
}

.product-item__description {
    margin-bottom: 10px;
}

#showMoreBtn,
.manufacturer-logo .btn {
    background: transparent;
    padding: 0;
    border: 0;
    color: inherit;
    border-bottom: 1px dashed;
    border-color: #767676;
    border-radius: 0;
}

#showMoreBtn:hover,
.manufacturer-logo .btn:hover {
    color: var(--jv-primary);
    border-color: var(--jv-primary);
}

.header-phone__menu .header-add-phone {
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.header-phone__menu .header-add-phone a {
    color: inherit;
    font-weight: 600;
    font-size: 15px;
}

.header-phone__menu .header-add-phone a:hover {
    color: var(--jv-primary);
}

/* ===== Партнеры: скрытие/показ ===== */
.jw-partner-hidden {
    display: none !important;
}
.jv-product__partners.jw-partners-expanded .jw-partner-hidden {
    display: flex !important;
}

/* ============ HEADER POLISH (jv) ============ */
/* Единый брейкпоинт нижнего меню: показываем только там, где реально помещается (>=1100),
   ниже — прячем и показываем бургер. Убирает «мёртвую зону» 992–1100 и скачки разделителя,
   которые возникали из-за рассинхрона брейкпоинтов default.css(991) и 08-responsive(930/850/780). */
/* горизонтальное меню показываем >=992 (Bootstrap md), ниже — мобильное меню */
@media (min-width: 992px) { .top-menu__wrapper { display: block !important; } }
@media (max-width: 991px) { .top-menu__wrapper { display: none !important; } }
/* на 992–1199 прячем правый блок (Регистрация/Калькулятор/валюта/язык), чтобы левое меню не сталкивалось */
@media (min-width: 992px) and (max-width: 1199px) { .top-info__panels .top-blocks.top-right { display: none !important; } }
/* бургер — только на мобилке (<992), где нет горизонтального меню */
@media (min-width: 992px) { .custom__burger-menu-button { display: none !important; } }
/* чуть плотнее пункты меню, чтобы 7 штук + правый блок помещались уже от 1100 */
.horizontal-menu > li + li { margin-left: 16px; }
/* поиск не должен схлопываться в пустой квадрат — держим минимум */
.top-panel__search-container .search-block,
.top-panel__search-container .search-block input[type="text"] { min-width: 200px; }

/* ============ КАТАЛОГ-ВИТРИНА (jv) — временно без e-commerce ============ */
/* карточка: прячем «В корзину» и цену */
.jv-product-card__btn-cart { display: none !important; }
.jv-product-card__price { display: none !important; }
/* «Подробнее» — во всю ширину карточки + оранжевая */
.jv-product-card__actions .jv-product-card__btn-more {
  flex: 1 1 100%; width: 100%; justify-content: center;
  background: var(--jv-accent) !important; color: #fff !important; border: none !important;
  transition: background .18s ease;
}
.jv-product-card__actions .jv-product-card__btn-more:hover {
  background: var(--jv-primary-hover, #d94a17) !important; color: #fff !important;
}
/* корзина в шапке — скрыть */
.top-panel__mini-cart { display: none !important; }
/* сердечко-избранное: закрашиваем оранжевым после клика */
.jv-product-card__like { cursor: pointer; }
.jv-product-card__like.is-active path { stroke: var(--jv-accent) !important; fill: var(--jv-accent) !important; }

/* ============ ПУШ-ТОСТ (wishlist/cart/compare) — брендстиль JazzWay ============ */
.alert.alert-cart, .alert.alert-comp, .alert.alert-wish {
  width: 380px !important; max-width: calc(100vw - 32px);
  border-radius: 14px !important;
  border: 1px solid #EDEDED !important;
  box-shadow: 0 14px 40px rgba(23, 32, 51, .16) !important;
  background: #fff !important;
  padding: 18px 46px 18px 66px !important;
  font-size: 14px !important; line-height: 1.5 !important; color: var(--jv-text-primary);
  right: 20px;
  transition: top .32s cubic-bezier(.22,.61,.36,1), opacity .32s ease !important;
}
.alert.alert-cart a, .alert.alert-comp a, .alert.alert-wish a {
  color: var(--jv-accent); font-weight: 600; text-decoration: none;
}
.alert.alert-cart a:hover, .alert.alert-comp a:hover, .alert.alert-wish a:hover { text-decoration: underline; }
/* иконка-кружок: мягкий оранжевый фон + оранжевый чек */
.alert.alert-cart i, .alert.alert-comp i, .alert.alert-wish i {
  top: 16px !important; left: 16px !important;
  width: 36px !important; height: 36px !important;
  background: #FFF0EA !important; color: var(--jv-accent) !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center; justify-content: center;
  font-size: 16px !important;
}
/* крестик */
.alert.alert-cart .close, .alert.alert-comp .close, .alert.alert-wish .close {
  position: absolute; top: 12px; right: 14px;
  font-size: 20px; line-height: 1; color: var(--jv-text-muted);
  opacity: .6; background: none; border: 0; cursor: pointer; transition: opacity .15s;
}
.alert.alert-cart .close:hover, .alert.alert-comp .close:hover, .alert.alert-wish .close:hover { opacity: 1; }

/* ============ Каталог: блок выбранных фильтров — компактные чипы ============ */
.selected-options { display: flex; flex-direction: column; gap: 12px; }
.selected-options .ocfilter-option { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.selected-options .ocfilter-option > span { font-size: 13px; color: var(--jv-text-muted); font-weight: 500; }
/* компактная пилюля «значение ×» вместо full-width кнопки */
.selected-options .ocfilter-option .btn {
  display: inline-flex !important; flex-direction: row-reverse; align-items: center; gap: 7px;
  width: auto !important; max-width: 100%; float: none !important;
  padding: 6px 12px !important; border-radius: 20px !important;
  background: #FFF0EA !important; color: var(--jv-accent) !important;
  border: 1px solid #F6C9B7 !important;
  font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important;
  transition: all .15s ease;
}
.selected-options .ocfilter-option .btn:hover {
  background: var(--jv-accent) !important; color: #fff !important; border-color: var(--jv-accent) !important;
}
.selected-options .ocfilter-option .btn i { font-size: 10px; }
/* ссылка/кнопка «Сбросить все» */
.selected-options .ocfilter-clear, .selected-options a[href], .selected-options .btn-clear {
  font-size: 13px !important; color: var(--jv-text-muted) !important; text-decoration: none;
  background: none !important; border: 0 !important; padding: 2px 0 !important; width: auto !important;
}
.selected-options .ocfilter-clear:hover, .selected-options a[href]:hover { color: var(--jv-accent) !important; }

/* (removed: мёртвое sticky-informer-show — перекрыто phone-hide ниже) */

/* ============ МОБИЛКА: читаемость (тема использует vw-шрифты, схлопываются на 375) ============ */
@media (max-width: 767px){
  /* карточки каталога/поиска */
  .jv-product-card__descr { font-size: 13px !important; line-height: 1.45 !important; }
  .jv-product-card__sku-text, .jv-product-card__sku-text strong { font-size: 12px !important; }
  .jv-product-card__btn-more { font-size: 14px !important; }
  /* верхняя полоска шапки (город / N магазинов / телефон) */
  .header__descr, .header__descr *, .header__descr-left, .header__descr-left p,
  .header__descr-right, .header__descr-right a, .header__descr-right p { font-size: 12px !important; }
}

/* ============ МОБИЛКА #42: таблица характеристик + поиск-колонки ============ */
/* характеристики товара: на мобилке стек «название → значение» (значения уходили за экран) */
@media (max-width: 767px){
  .jv-table-dots-item { flex-wrap: wrap !important; align-items: flex-start !important; }
  .jv-table-dots-label { white-space: normal !important; flex: 1 1 100% !important; max-width: 100% !important; }
  .jv-table-dots-separator { display: none !important; }
  .jv-table-dots-value { flex: 1 1 100% !important; max-width: 100% !important; text-align: left !important; font-weight: 600 !important; margin-top: 1px !important; }
}
/* поиск: разумное число колонок на планшете (было repeat(6) до 1366) */
@media (max-width: 1366px){ #product-search .catalog-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 900px) { #product-search .catalog-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 767px) { #product-search .catalog-grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* ============ ВИТРИНА #44: карусели главной как каталог (без цен/корзины) ============ */
.product-item__price { display: none !important; }
.product-item .btn-buy, .product-item .number { display: none !important; }  /* scoped к каруселям — страницу товара не трогает */
/* «Подробнее» в карусели — единый оранжевый CTA как в каталоге */
.product-item__button-link {
  display: block !important; width: 100% !important; box-sizing: border-box;
  text-align: center; text-decoration: none;
  background: var(--jv-accent) !important; color: #fff !important; border: none !important;
  border-radius: 12px !important; padding: 11px 16px !important;
  font-weight: 500 !important; font-size: 15px !important; line-height: 1.2 !important;
  transition: background .18s ease;
}
.product-item__button-link:hover { background: var(--jv-primary-hover, #d94a17) !important; color: #fff !important; }

/* SEO: h1 на главной, скрыт визуально (доступен ботам/скринридерам) */
.jv-seo-h1{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* =================================================================
   ЕДИНАЯ СИСТЕМА КНОПОК — по дизайн-аудиту 11.07.2026
   3 размера · 1 радиус (10px) · веса 500/600. Панели/карточки (r15-16) НЕ трогаем.
   ================================================================= */

/* 1) ЕДИНЫЙ РАДИУС 10px (убираем 0 / 5 / 7.82 / 8 / 12 / 14 / 15) */
.search-btn.btn,
.btn.btn-border,
.jv-btn-primary,
button#button-cart.jv-btn-primary,
.jv-product__question-btn,
.jv-product__related-btn,
.product-item__button-link,
.jv-product-card__btn-more,
.jvnews__top-button,
.footer__top-rigth .footer__form .form-group button {
  border-radius: 10px !important;
}

/* 2) ВЕС ШРИФТА: 500 по умолчанию, 600 у акцентных (убираем 400/450) */
.btn.btn-border, .search-btn.btn, .jv-product__question-btn,
.jv-product__related-btn, .jvnews__top-button,
.footer__top-rigth .footer__form .form-group button { font-weight: 500 !important; }
.jv-btn-primary, .sup-btn--primary, .sup-btn--ghost { font-weight: 600 !important; }

/* 3) МЕЛКИЕ CTA → компактный 36px, читаемый шрифт 14px */
.jv-product__related-btn {
  min-height: 36px !important; height: auto !important;
  font-size: 14px !important; padding: 8px 16px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}

/* 4) ВЫСОТЫ standalone-CTA → тач-дружественные (medium ≥44) */
.jv-product__question-btn { min-height: 44px !important; }
.footer__top-rigth .footer__form .form-group button { min-height: 44px !important; }
.jvnews__top-button { min-height: 40px !important; }

/* 5) ТАЧ-ТАРГЕТЫ ШАПКИ на мобилке ≥44px */
@media (max-width: 991px){
  /* тач-таргет: высота 44 (вертикальный тап) — без min-width, чтобы не раздувать ряд шапки */
  .custom__burger-menu-button,
  .top-panel__btn-catalog,
  .top-panel__search-btn {
    min-height: 44px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  /* иконки-кнопки: расширяем кликаемую зону до 44 псевдоэлементом, layout не трогаем */
  .top-panel__menu-icon-container, .custom__burger-menu-button { position: relative; }
  .top-panel__menu-icon-container::after, .custom__burger-menu-button::after {
    content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    height:44px; width:44px;
  }
}

/* 6) ТОВАР: убрать горизонтальный сдвиг ~10px (трек карусели «Популярные») */
.jv-product__popular-wrap { overflow-x: clip; max-width: 100%; }
.jv-product__bottom-inform--popular, .container.jv-product__popular-wrap { overflow-x: clip; }

/* 6b) ТОВАР: swiper-карусель «Популярные» шире вьюпорта → жёстко обрезаем */
.jv-product__popular-wrap, .jw-popular-module, .jw-popular-module .swiper, .jw-popular-module .swiper-extension {
  overflow-x: hidden !important; max-width: 100% !important;
}

/* 7) МОБИЛКА: элементы шапки/меню с захардкоженной шириной 380/400px → в размер вьюпорта */
@media (max-width: 991px){
  /* FIX 12.07: было 100vw -> блок вылезал на ~30px вправо (сидит в padded-контейнере
     .header-middle: margin:20 + .top-header padding:10 = сдвиг 30). 100% = ширина родителя. */
  .top-panel__thead.top-panels, .top-panels,
  .top-panel__cols.top-panel__left,
  .mobile__header-content--bottom,
  .top-panel__search, .input-group.jv-search-block {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  .mobile-catalog.catalog-category,
  .jw-sidemenu-overlay,
  .menu-mobile__informations,
  .header-search__mobile.slide-search,
  .header-search__mobile {
    max-width: 100vw !important;
  }
}

/* 7b) МОБИЛКА: гарантированно без горизонтального скролла (fixed-бары темы захардкожены на 380px,
   что раздувает layout-viewport; clip на html разрывает круг, sticky/off-canvas не ломает) */
@media (max-width: 991px){
  html { overflow-x: clip !important; }
}

/* 7c) МОБИЛКА: off-canvas панели каталога (fixed, hardcoded 380px, торчат за экран) → обрезать */
@media (max-width: 991px){
  /* не трогаем overflow самого off-canvas каталога (у него свой горизонтальный слайд под-уровней) —
     ограничиваем только ширину, а сам горизонтальный скролл документа обрезает body ниже */
  .mobile-catalog, .mobile-catalog.catalog-category,
  .mobile-catalog.catalog-children, .mobile-catalog__panel { max-width: 100vw !important; }
  /* 27.08.2026: `body{overflow-x:hidden}` отсюда убран. Он дублировал
     7b выше (html{overflow-x:clip}), а платой был отказ position:sticky
     во всём документе: overflow на body делает его скролл-контейнером,
     и sticky внутри перестаёт липнуть (NOTES §132). Из-за этого якорную
     полосу низа карточки приходилось фиксировать скриптом, и на быстрой
     прокрутке она уезжала за экран. Проверено после снятия: главная,
     каталог, карточка, проекты, калькулятор — горизонтальной прокрутки
     на 390px нет, её по-прежнему обрезает clip на html. */
}

/* ================= ПРАВКИ ШАПКИ / КРОШЕК (11.07.2026) ================= */
/* 1) Убрать иконку телефона из мобильной шапки (дублирует «Каталог» + бургер) */
.top-panel__cols .top-panel__informer.top-panel__menu-icon-container,
.top-panel__left .top-panel__menu-icon-container,
.sticky .top-panel__cols .top-panel__informer.top-panel__menu-icon-container,
.top-panel__informer.top-panel__menu-icon-container { display: none !important; }

/* 2) Sticky-шапка: НЕ показывать горизонтальное меню (моё старое правило min-width:992 его выводило) */
.sticky .top-menu__wrapper { display: none !important; }

/* 3) Крошки + заголовок страницы — единый вид на ВСЕХ типах страниц
   (было: крошки top 170/190/205; h1 34/32/30px). Приводим к 30px + компактный отступ. */
.catalog-product__block { margin-top: 0 !important; }
.catalog-product__container, .jv-portfolio.container { padding-top: 0 !important; }
.navigation-content { padding-top: 12px !important; padding-bottom: 4px !important; margin-top: 0 !important; }
.navigation-title { margin-top: 0 !important; padding-top: 0 !important; }
/* h2 в этом же правиле — из-за портфолио: при открытом кейсе h1 отдан названию
   проекта, а заголовок списка становится h2 (jv_portfolio_list.twig, 16.08).
   Оформление заголовка раздела от этого меняться не должно. */
.navigation-title h1, .navigation-title h2, .catalog-product__block h1, .catalog-product__container h1 {
  font-size: 30px !important; margin: 6px 0 16px !important; line-height: 1.2 !important;
}
/* #295: 6px сверху хватало на десктопе, но на узких экранах крошки переносятся
   в 2 строки и заголовок товара к ним слипался. +10px на мобильных ширинах. */
@media (max-width: 767px) {
  /* #474 (QA 05.08): на мобилке 30px для длинных названий товара избыточен */
  .catalog-product__container h1 { margin-top: 16px !important; font-size: 28px !important; }
}
/* лиды/подзаголовки с отрицательным margin под старый отступ заголовка → обнулить (иначе наезжают) */
.sup__lead, .jv-portfolio__lead, .ab-head__lead { margin-top: 0 !important; }

/* ============ ВЫРАВНИВАНИЕ «О компании» (.ab-*) с шапкой/сайтом (12.07) ============
   Причина: .page-wrapper даёт padding 20px, а секции .ab-* добавляли СВОЮ padding 20px
   → контент уезжал на 40px (у шапки/каталога — 20px). Плюс maxW 1880 vs сайтовые 1840
   → рассинхрон ниже ~1880px. Убираем двойной отступ + равняем ширину. */
.ab-head, .ab-crumb, .ab-title,
.ab-hero, .ab-geo, .ab-figures, .ab-quality, .ab-lab, .ab-adv {
  max-width: 1840px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* тот же двойной-отступ баг у jv-страниц (техподдержка/портфолио/где-купить) на .jv-portfolio.container */
.jv-portfolio.container {
  max-width: 1840px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===== Размеры шрифтов по требованию (12.07): подзаголовок 16, город/партнёры 14 ===== */
.sup__lead { font-size: 16px !important; }
@media (min-width: 768px){
  .header__descr-left .jw-city-selector__name,
  .header__descr-left a p,
  .header__descr-left p { font-size: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER — RESPONSIVE SYSTEM (консолидировано 12.07.2026)
   Единая когерентная раскладка шапки. Тема имела конфликтующие брейкпоинты
   (490/768/980/1340) + дублирующие search/logo-элементы → отсюда была «болтанка».
     • МОБИЛКА  ≤490     : лого + «Каталог» (ряд), поиск отдельной строкой  (раскладка темы)
     • ПЛАНШЕТ  491–991  : то же (лого не растягиваем, вернули строку поиска)
     • ДЕСКТОП  ≥992     : лого + «Каталог» + инлайн-поиск + иконки + гориз. меню
   Проверено CDP на 375/480/490/491/600/767/950/991/992/1024/1100/1300/1670/1900:
   лого всегда слева, «Каталог» виден, поиск есть, overflow=0.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — ОБЩЕЕ — лого всегда влево (тема даёт .img-responsive{margin:auto} → центрирует при широкой колонке) */
.top-header .img-responsive,
.top-panel__logo .img-responsive,
.top-panel__logo img { margin-left: 0 !important; margin-right: 0 !important; }

/* — ДЕСКТОП ≥992 — */
@media (min-width: 992px){
  /* убрать двойные отступы (тема ниже ~1340 давала header-middle padding + top-menu margin
     поверх .top-header padding=20 → контент шапки уезжал на 40, а страница на 20) */
  .top-panel__cols.header-middle { padding-left: 0 !important; padding-right: 0 !important; }
  .top-menu__wrapper { margin-left: 0 !important; margin-right: 0 !important; }
  /* воздух под навигацией (тень .top-header прилипала к пунктам меню) */
  .top-menu__wrapper { padding-bottom: 12px !important; }
}

/* — ПЛАНШЕТ / МАЛЫЙ НОУТ 491–991 — */
@media (min-width: 491px) and (max-width: 991px){
  /* колонка лого НЕ растягивается (тема давала flex:1 → выдавливало «Каталог» за край + пустота) */
  .top-panel__cols.top-panel__left .top-panel__logo { flex: 0 0 auto !important; }
  /* зазор лого ↔ «Каталог» */
  .top-panel__cols.top-panel__left .top-panel__btn-catalog { margin-left: 16px !important; }
  /* вернуть строку поиска (тема прячет мобильный search-контейнер в этом диапазоне) */
  .mobile__header-content--bottom { display: block !important; width: 100% !important; }
  .mobile__header-content--bottom .top-panel__search { display: flex !important; width: 100% !important; }
}

/* — ТАЧ-ТАРГЕТЫ (a11y #2): дропдаун выбора города — пункты были 12px → ≥40px — */
.jw-city-dropdown a, .jw-city-dropdown li > a, .jw-city-selector__list a,
#jw-city-dropdown a, #jw-city-dropdown li { min-height: 40px !important; }
/* #303: на мыши 40px + gap давали шаг 45px и «дырявый» список. Тач-таргет
   остаётся там, где он и нужен — на сенсорных экранах (парное правило
   в jw-citymanager.css). */
@media (hover: hover) and (pointer: fine) {
  .jw-city-dropdown a, .jw-city-dropdown li > a, .jw-city-selector__list a,
  #jw-city-dropdown a, #jw-city-dropdown li { min-height: 32px !important; }
}
.jw-city-dropdown a, .jw-city-selector__list a { display: flex !important; align-items: center !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   HEADER — 8-СТАДИЙНОЕ СВОРАЧИВАНИЕ по Figma (node 375:1431) — 12.07.2026
   Заменяет прошлый «HEADER FOLDING» блок. Перебивает старые header-правила
   через специфичность + порядок (в конце файла) + !important.

   ИНЛАЙН (≥870): [лого · Каталог · поиск(flex) · Сравнение · Избранное · Где-купить]
                  ряд меню: nav-left + [Регистрация · Калькулятор].
     сбросы при сужении: Калькулятор(<1050) → Сравнение(<950) → Избранное(<890) → Где-купить(<870).
   СТЕК (<870):  [лого ↔ Каталог] / [поиск на всю ширину] / [ряд меню].
     сбросы: Регистрация+Калькулятор скрыты; магазины(<490); Контакты(<660);
     Техподдержка(<560); Каталог→иконка(<400).
   Видимая шапка ≤991 = .top-panel__thead (лого+Каталог+поиск в мобильной ветке);
   десктоп-кластер .top-panel__tfoot содержит дубль-Каталог(скрыт)+пустой поиск(скрыт)
   +Сравнение+Избранное — на инлайне показываем, в стеке прячем.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- ИНЛАЙН ≥870 ---------- */
@media (min-width: 870px){
  .top-panel__cols.header-middle{ align-items: center !important; }
  .top-panel__col.top-panel__thead.top-panels{
    display: flex !important; align-items: center !important;
    flex: 1 1 auto !important; gap: 16px !important; width: auto !important; max-width: none !important;
  }
  .top-panel__thead .top-panel__cols.top-panel__left{
    display: flex !important; flex: 0 0 auto !important; align-items: center !important;
    gap: 16px !important; width: auto !important; justify-content: flex-start !important;
  }
  .top-panel__thead .top-panel__cols.top-panel__left .top-panel__btn-catalog{
    display: flex !important; flex: 0 0 auto !important; margin: 0 !important;
  }
  .top-panel__thead .top-panel__cols.top-panel__left .top-panel__btn-catalog .btn.catalog-button > span{ display: inline-block !important; }
  .top-panel__thead .mobile__header-content--bottom{
    display: block !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important;
  }
  .top-panel__thead .mobile__header-content--bottom .top-panel__search{ display: flex !important; width: 100% !important; }
  .top-panel__col.top-panel__tfoot.top-panels{ display: flex !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important; align-items: center !important; }
  .top-panel__col.top-panel__tfoot.top-panels .top-mobile__icons{ width: auto !important; max-width: none !important; display: flex !important; align-items: center !important; gap: 0px !important; }
  .top-panel__col.top-panel__tfoot.top-panels .top-panel__btn-catalog{ display: none !important; }
  .top-panel__col.top-panel__tfoot.top-panels .top-panel__search-container{ display: none !important; }
  /* ряд меню + правый блок видны (перебивают старое 992–1199 hide и ≤991 nav-hide) */
  .top-menu__wrapper{ display: block !important; }
  .top-info__panels .top-blocks.top-right{ display: block !important; }
  .top-info__panels .top-blocks.top-right .link__stub{ display: flex !important; gap: 20px !important; }
}
/* прогрессивные сбросы правого блока (инлайн) */
@media (max-width: 1049px){ .top-info__panels .top-blocks.top-right .link__stub a:last-child{ display: none !important; } } /* Калькулятор */
@media (max-width: 1049px){ .top-panel__compare{ display: none !important; } }   /* Сравнение — единый порог с Калькулятором: один сдвиг вместо двух */
@media (max-width: 949px){ .top-panel__wishlist{ display: none !important; } }   /* Избранное */
@media (max-width: 889px){ .my__wigets-item{ display: none !important; } }       /* Где-купить */

/* ---------- СТЕК <870 ---------- */
@media (max-width: 869px){
  .top-panel__col.top-panel__tfoot.top-panels{ display: none !important; }
  .my__wigets-item{ display: none !important; }
  .header__button-menu-right{ display: none !important; }
  .top-info__panels .top-blocks.top-right{ display: none !important; }
  /* ряд лого ↔ Каталог */
  .top-panel__cols.top-panel__left{
    width: auto !important; max-width: 100% !important; justify-content: space-between !important;
    align-items: center !important; flex-wrap: nowrap !important; gap: 16px !important;
  }
  .top-panel__cols.top-panel__left .top-panel__logo{ flex: 0 1 auto !important; min-width: 0 !important; margin: 0 !important; }
  .top-panel__cols.top-panel__left .top-panel__logo img{ max-width: 184px !important; height: auto !important; }
  .top-panel__cols.top-panel__left .top-panel__btn-catalog{ flex: 0 0 auto !important; margin: 0 !important; }
  .top-panel__btn-catalog .btn.catalog-button > span{ display: inline-block !important; }
  /* поиск строкой */
  .mobile__header-content--bottom{ display: block !important; width: 100% !important; margin-top: 12px !important; }
  .mobile__header-content--bottom .top-panel__search{ display: flex !important; width: 100% !important; }
  /* ряд меню (горизонтальный) виден в стеке — перебиваем тема-hide ≤991 */
  .top-menu__wrapper{ display: block !important; margin-top: 8px !important; }
  .top-info__panels{ justify-content: flex-start !important; }
  .top-blocks.top-left{ width: 100% !important; }
  .horizontal-menu{ display: flex !important; flex-wrap: nowrap !important; gap: 16px !important; }
}
/* сбросы пунктов меню + магазины + Каталог-иконка (в стеке) */
@media (max-width: 660px){ .horizontal-menu > li:last-child{ display: none !important; } }       /* Контакты */
@media (max-width: 560px){ .horizontal-menu > li:nth-last-child(2){ display: none !important; } } /* Техподдержка */
@media (max-width: 490px){ .header__descr-left > a{ display: none !important; } }                 /* N магазинов */
@media (max-width: 400px){
  .top-panel__btn-catalog .btn.btn-border.catalog-button > span{ display: none !important; }
  .top-panel__btn-catalog .btn.btn-border.catalog-button{
    /* #128: 56 -> 48, вровень с бургером */
    width: 48px !important; min-width: 48px !important; height: 48px !important;
    padding: 0 !important; justify-content: center !important; border-radius: 12px !important;
  }
  a[href^="tel"]{ white-space: nowrap !important; }
}

/* правый бургер темы дублирует кнопку «Каталог» — прячем на всех адаптивах шапки */
@media (max-width: 991px){ .header__button-menu-right{ display: none !important; } }

/* ряд меню в стеке: тема ужимает пункты до 11px/line-height:10 (ждёт что меню скрыто) — возвращаем читаемость */
@media (max-width: 869px){
  .top-menu__wrapper .horizontal-menu > li{ height: auto !important; }
  .top-menu__wrapper .horizontal-menu > li > a{ font-size: 15px !important; line-height: 1.4 !important; height: auto !important; padding: 4px 0 !important; white-space: nowrap !important; }
}

/* ---------- ≤490: распарковка (стадии 7-8 Figma) ----------
   Тема на ≤490 паркует весь .top-header за экран (top:-500% ≈ -35584px) и держит
   .top-panel__thead как fixed-мини-шапку БЕЗ ряда меню — в Figma (стадии 5-8) меню
   видно. Распарковываем → тот же чистый стек, что уже работает на 491-869
   (город·тел / лого·Каталог / поиск / меню). Дубль город/тел мобильной ветки прячем. */
@media (max-width: 490px){
  .top-header,
  .top-panel__cols.header-middle{ position: static !important; top: auto !important; }
  .top-panel__col.top-panel__thead.top-panels,
  .top-panel__thead{ position: static !important; top: auto !important; }
  /* тема резервировала body padding-top ~145px под fixed-шапку — теперь шапка в потоке,
     резерв повисает пустотой сверху → убираем */
  body{ padding-top: 0 !important; }
  /* дубль город/тел из мобильной ветки — оставляем один (в .top-header) */
  .top-panel__thead .mobile__header-content--top{ display: none !important; }
  /* ряд меню помещается (как в Figma стадии 7-8): мельче + меньше gap;
     overflow-x:auto — safety для самых узких (360), без жёсткой обрезки */
  .top-menu__wrapper .horizontal-menu{
    gap: 10px !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .top-menu__wrapper .horizontal-menu::-webkit-scrollbar{ display: none; }
  .top-menu__wrapper .horizontal-menu > li > a{ font-size: 13px !important; }
}

/* ---------- Единый размер элементов шапки на десктоп-инлайне (≥870) ----------
   Тема мешала vw-единицы (лого 12.76vw, высоты 3.125vw) + фикс-px + !important
   на ад-хок порогах (245px, 60px, ≤991→40px, @1360, @1860) → немонотонные
   скачки при ресайзе (лого 160→235→179, высота 40→60→56, радиус 10.81→15).
   Пиним единые значения по всему инлайну — плавно, без прыжков.
   Проверено в харнессе на 880/969/1200/1400/1600: 52/52/44, без overflow. */
@media (min-width: 870px){
  html body .top-panel__btn-catalog .btn.catalog-button,
  html body .top-panel__search,
  html body .top-panel__search input[type=text],
  html body .top-panel__search .btn,
  html body .top-panel__search .search-btn{
    height: 52px !important; min-height: 52px !important; max-height: 52px !important;
  }
  html body .top-panel__logo img{
    height: 44px !important; max-height: 44px !important; min-height: 0 !important;
    width: auto !important; max-width: none !important;
  }
  /* Поиск — бесшовная пилюля. Обёртка: рамка+скругление+белый фон. БЕЗ overflow:
     hidden — внутри живёт дропдаун подсказок .smartsearch (absolute), клиппинг его
     обрезал бы. Кнопка тянется с перекрытием рамки (top/right/bottom −3px) и несёт
     СВОЁ правое скругление 14px = радиусу пилюли → оранж ложится на оранж рамки,
     субпиксельная белая щель (vw-ширины темы × Retina) физически невозможна. */
  html body .top-panel__search .input-group.jv-search-block{
    box-sizing: border-box !important;
    /* Пилюля целиком = высоте кнопки «Каталог» (52). Без явной высоты бокс = input(52)
       + border(6) = 58 → был на 6px выше каталога (фидбек #48). Пинуем 52 border-box:
       контент 46 = высоте input ниже, кнопка держит свой overlap −3px. */
    height: 52px !important; min-height: 52px !important; max-height: 52px !important;
    border: 3px solid var(--jv-primary) !important;
    border-radius: 14px !important;
    background: #fff !important;
    padding: 0 !important;
  }
  html body .top-panel__search .input-group.jv-search-block input[type=text]{
    height: 46px !important; min-height: 46px !important; max-height: 46px !important;
    border: none !important; border-radius: 0 !important; margin: 0 !important;
    background: transparent !important;
  }
  html body .top-panel__search .input-group.jv-search-block .search-btn,
  html body .top-panel__search .input-group.jv-search-block .btn{
    border: none !important; margin: 0 !important;
    top: -3px !important; right: -3px !important; bottom: -3px !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    border-radius: 0 14px 14px 0 !important;
  }
  /* Тема рисует на кнопке белый псевдо-«колпачок» (07-footer:1046 — ::after 11×54px,
     radius 0 15 15 0, #fff) — маска под СТАРУЮ геометрию. В новой пилюле он
     ложится белым скруглённым пятном поверх кнопки (тот самый «сломанный угол»
     на Retina). Убираем. */
  html body .top-panel__search .btn::after,
  html body .top-panel__search .search-btn::after{
    display: none !important; content: none !important;
  }
}

/* ===== Витрина без корзины (P0 UX-аудит) =====
   JV-шаблоны очищены в разметке (product/category/search/jw_popular/latest/special),
   НО часть страниц рендерится из серверных OCMOD-копий system/storage/modification/,
   которые overlay-деплой не обновляет (тех-долг: modification мимо overlay).
   Поэтому глушим ВСЕ триггеры корзины через CSS — работает независимо от stale-копий.
   Цены-дисплей («Купить у производителя») намеренно оставлены. */
#button-cart,
.jv-product__price-right,
.jv-product-card__btn-cart,
.btn-buy,
.product-busket,
.top-panel__mini-cart,
.panel-cart { display: none !important; }

/* Свитчеры вариантов (световой поток / установочные размеры и т.п.) скрыты
   в карточках листинга — по запросу. Встречаются только в category.twig. */
.jv-group-card { display: none !important; }

/* Цены скрыты (решение по витрине: закуп через партнёров, розничные цены —
   отдельным «Прайс-листом» на техподдержке). Блок «Купить у партнёров» остаётся.

   18.08: .jv-product__price-block выведен из-под скрытия. Теперь это не «розничная
   цена вообще», а цена нашего интернет-магазина pgp-shop.ru рядом с кнопкой
   «Купить онлайн» — блок появляется, только когда есть рабочая ссылка туда
   (см. buildKitPrice в catalog/controller/product/product.php). В листингах
   цены по-прежнему скрыты — правила ниже не трогаем. */
.product-item__price,
.product-item__blocks .product-price__main,
.product-item-price-old,
.product-item-price-economy,
.product-item-price-stock,
.product-price-tax { display: none !important; }

/* ===== Видимые focus-рамки для клавиатуры (P1 a11y-аудит) =====
   Восстановление после outline:none в custom.css/jw-citymanager.
   :focus-visible = только клавиатура, мышь не затрагивается. */
.top-menu__wrapper .horizontal-menu > li > a,
.header__descr-left > a,
.header__descr-right a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

/* #395/#396: было outline-offset:2px + border-radius:3px.
   Отступ рисовал кольцо в стороне от собственной рамки поля — два контура
   с зазором («двойная обводка»), а принудительный радиус 3px спрямлял углы
   у полей со скруглением 7px и больше, из-за чего в углах проглядывал белый
   фон. Теперь кольцо ложится вплотную к рамке и повторяет её форму: outline
   в современных браузерах следует border-radius элемента, поэтому радиус
   здесь не задаём вовсе. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid var(--jv-primary, #E94E1B) !important;
  outline-offset: 0 !important;
}

/* Поиск: без дополнительной focus-обводки (контейнер и так с оранжевой рамкой) */
.jv-search-block input:focus-visible,
#search input:focus-visible,
input[name="search"]:focus-visible,
.top-panel__search input:focus-visible { outline: none !important; }

/* Калькулятор и форма подписки: свой focus-индикатор (кольцо/оранжевая рамка),
   глобальная outline давала двойное выделение (jvc) и вылезала за края pill-инпута (jvsub) */
.jvc-input:focus-visible,
#jvc-product:focus-visible,
.jvsub__input:focus-visible,
#jvsub-form .jvsub__input:focus-visible { outline: none !important; }

/* Плавный скролл по якорям + отступ под липкую шапку (кнопка «Узнать подробнее») */
html { scroll-behavior: smooth; }
#ab-more { scroll-margin-top: 100px; }

/* ===== prefers-reduced-motion (P0 a11y-аудит) =====
   Уважаем системную настройку «уменьшить движение»: гасим анимации/переходы,
   бесконечные циклы и плавный скролл. Слайдеры остаются рабочими — просто без
   анимации перелистывания. Значение .01ms (не 0) сохраняет событие transitionend. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
}

/* ===== Поиск: автоподсказка (smartsearch) ===== */
/* 1) Витрина без корзины — цен в подсказке быть не должно */
.jv-search-block .smartsearch .price,
.jv-search-block .smartsearch .oldprice { display: none !important; }

/* 2) Выпадашка — чистый card ровно под блоком (единый режим, убираем хрупкий wrap ≥992px) */
.jv-search-block .smartsearch {
  top: 100% !important;
  left: 0 !important;
  margin-top: 6px !important;
  width: 100% !important;
  border-radius: 14px !important;
  border: 1px solid #ececec !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
  overflow: hidden !important;
}
.jv-search-block .smartsearch ul.items { margin-top: 0 !important; }
.jv-search-block .smartsearch li.item:first-child { border-top: none !important; }

/* Видимая часть — ~4 строки (строка с плиткой 96px ≈ 117px), остальное — внутренний
   скролл; база модуля тянула список до calc(100vh - 150px) = «во весь экран».
   На телефонах (строки выше из-за переноса названий) экран страхует 100vh-кап. */
.jv-search-block .smartsearch ul.items {
  max-height: min(470px, calc(100vh - 220px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.jv-search-block .smartsearch ul.items::-webkit-scrollbar { width: 6px; }
.jv-search-block .smartsearch ul.items::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }

/* 2а) Строка подсказки — «каталожная плитка» + чип артикула (гибрид A+B, 13.07).
   Фото 96px в серой плитке (сервер отдаёт 192×192 — чётко на Retina), название 15/600,
   совпадение и hover — бренд-оранжевый вместо жёлтого #fcfeab и синего #003fbe. */
.jv-search-block .smartsearch li.item { border-top-color: #f4f4f4 !important; }
.jv-search-block .smartsearch li.item .item_block { padding: 10px 14px !important; gap: 16px; }
.jv-search-block .smartsearch li.item .item_block .image {
  flex: none !important;
  width: 96px; height: 96px;
  padding-right: 0 !important;
  border-radius: 12px;
  background: #f6f6f6;
  display: flex; align-items: center; justify-content: center;
}
.jv-search-block .smartsearch li.item .item_block .image img {
  max-width: 82px; max-height: 82px; width: auto; height: auto;
}
.jv-search-block .smartsearch li.item .item_block .title a {
  font-size: 15px; font-weight: 600 !important; line-height: 1.35 !important;
}
.jv-search-block .smartsearch li.item .item_block a b { color: var(--jv-primary) !important; }
/* hover и клавиатурная навигация (.current) — единый вид.
   Без заливки строки (тяжело смотрится): окрашивается только контент —
   название в бренд, чип теплеет, плитка фото чуть темнеет. transparent
   обязателен: гасит жёлтый #fcfeab базового smartsearch.css на .current. */
.jv-search-block .smartsearch li.item:hover,
.jv-search-block .smartsearch li.item.current { background: transparent !important; }
.jv-search-block .smartsearch li.item:hover .item_block .title a,
.jv-search-block .smartsearch li.item.current .item_block .title a { color: var(--jv-primary) !important; }
.jv-search-block .smartsearch li.item:hover .item_block .image,
.jv-search-block .smartsearch li.item.current .item_block .image { background: #efefef; }
/* артикул — чип */
.jv-search-block .smartsearch li.item .item_block .title span {
  display: inline-block !important;
  font-size: 12px !important; font-weight: 600;
  color: #5f5f5f !important;
  background: #f2f2f2;
  border-radius: 6px;
  padding: 2px 8px;
  margin-top: 6px !important;
}
.jv-search-block .smartsearch li.item:hover .item_block .title span,
.jv-search-block .smartsearch li.item.current .item_block .title span {
  background: #FFE8DE; color: #c93f12 !important;
}
/* футер «Показать все результаты» — текстовая ссылка вместо серой плашки */
.jv-search-block .smartsearch .button { background: #fff !important; border-top: 1px solid #f0f0f0; }
.jv-search-block .smartsearch .button a {
  color: var(--jv-primary) !important;
  font-weight: 700; font-size: 14.5px;
  padding: 14px !important;
}
.jv-search-block .smartsearch .button a:hover { color: var(--jv-primary-hover) !important; }

/* 3) [легаси-блок кнопки поиска удалён 13.07 — заменён «пилюлей» в блоке
   «Единый размер элементов шапки» выше: обёртка несёт рамку+радиус 14, кнопка
   с перекрытием рамки и правым скруглением 14, псевдо-колпачок ::after убит] */
.jv-search-block input[name="search"] {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ===== Категория на мобиле: убрать разделитель под крошками + лишний отступ до фильтров ===== */
@media (max-width: 767px) {
  /* разделитель-линия под хлебными крошками — не нужен */
  #product-category .navigation-content { border-bottom: none !important; }
  /* поджать заголовок */
  #product-category .jv-category__title h1 { margin: 4px 0 10px !important; }
  /* чипсы фильтра: sticky top:154px создавал ~58px пустоты над ними и не двигался
     минус-маргином (наложение). Делаем обычным потоком — садятся сразу под заголовок. */
  #product-category .jv-mfilter { position: static !important; margin-top: 0 !important; }
}

/* ===== Карточка товара (каркас hero+masonry 2026-07-23, отступы через gap
   сетки в jv-product.css; старые правила каркаса content-wrapper/middle-row
   и reflow-компакт удалены вместе с jv-product-reflow.js) ===== */
.jv-product__buy { align-self: flex-start !important; height: max-content !important; }
.jv-product__content { margin-bottom: 20px !important; }
.jv-product__bottom-inform--models { margin-bottom: 20px !important; }
/* Таблицу логистики не обрезаем — горизонтальный скролл внутри блока */
.jv-product__logical { overflow-x: auto !important; }

/* B) Группы вариантов — в ряд с переносом (садятся рядом, если есть место) */
.jv-group__variants {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px 28px !important;
  align-items: flex-start !important;
}
.jv-group__row { flex: 0 1 auto !important; }

/* C) Чипсы вариантов — уменьшенная минимальная ширина */
.jv-group__value { min-width: 36px !important; }

/* ===== Карточка товара (по запросу) ===== */
/* 2) Подзаголовок «Купить у партнёров:» — 18.08 возвращён по макету Figma 505-76
   (раньше был скрыт по запросу). Он отделяет плитки партнёров от блока цены
   нашего магазина: без него две группы карточек читались как одна. */

/* 3a) Сопутствующие товары: правое поле как у соседей по колонке (28.08).
   Раньше здесь стояло `padding-right: 0` — карточки уходили вплотную к краю
   блока. Из-за этого правая вертикаль колонки ломалась: плитки партнёров в
   «Приобрести» заканчивались на 20px левее, чем лента сопутствующих и стрелки
   листания. Замерено на PGL 02: партнёры 1398px, стрелки 1419 при ширине окна
   1440; на 1920 — 1860 против 1879; на 390 — 354 против 373. Разнобой в 19–20px
   виден именно на стрелках: они висят у самого края, а логотип партнёра над
   ними — с отступом.
   Возвращаем поле: теперь всё в колонке кончается на одной линии, а лента
   по-прежнему обрезается краем блока и читается как продолжающаяся. */
.jv-product__related { padding-right: 20px !important; }

/* 4) Логистика: заголовок как секционный (24px, чёрный) */
.jv-logtable__cap { font-size: 24px !important; font-weight: 700 !important; color: var(--jv-text-primary) !important; }

/* 5) Документация: анимация наведения на ссылки/кнопки */
.jv-product__certificate-link { transition: color .2s ease, transform .2s ease !important; }
.jv-product__certificate-link:hover { color: var(--jv-primary, #E94E1B) !important; transform: translateX(4px); }

/* ===== Модуль «Популярные товары» (jw-popular): умеренная типографика (taste-аудит) =====
   Заголовок 34→28, названия карточек 26→18 на десктопе/планшете (≥601px) — чтобы
   секция не перебивала H1 страницы (на карточке товара — H1 товара 30px, секции 22px).
   Мобильные размеры (заголовок 24px ≤600, карточки 14–16px) НЕ трогаем.
   !important — модуль грузит свой CSS динамически, гарантируем победу каскада. */
@media (min-width: 601px) {
  .jw-popular__title { font-size: 28px !important; }
  .jw-popular-module .product-item__title--name { font-size: 18px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ШАПКА — выравнивание и мобильная сборка (ревизия 13.07 по фидбеку клиента)
   1) ≥870: все ряды (город/лого/меню/правые блоки) на одной линии 30px —
      тема мешала top-header pl20 + header-middle pl10..20/ml0..20 +
      descr ml10 + container pl0..10 на разных порогах → плашка «двигалась».
   2) 541-869: оранж-пилюля поиска = как на десктопе (было: рамка на инпуте,
      квадратные внешние углы, живой белый ::after-колпачок).
   3) ≤540: мобильная шапка по Figma (стадия 8): единая линия 16px, серый
      пилл поиска с плоской иконкой (вместо коробки-в-коробке), плотный ритм.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- 1) единая линия рядов на инлайне ≥870 --- */
@media (min-width: 870px){
  html body .top-header{ padding-left: 20px !important; padding-right: 20px !important; }
  html body .top-panel__cols.header-middle{
    padding-left: 10px !important; padding-right: 10px !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  html body .top-header .header__descr{
    margin-left: 10px !important; margin-right: 10px !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  html body .top-header .header__descr .container{
    padding-left: 0 !important; padding-right: 0 !important;
    margin: 0 !important; max-width: none !important;
  }
  /* Горизонтальные margin убраны: ряд меню стоял на 30px (top-header 20 + margin 10),
     а лого/поиск/гео — на 20px. Пользователь заметил лишние margin-left/right:10px
     (фидбек #28/#29). Ряд меню теперь на единой линии 20px, как остальные ряды. */
  html body .top-menu__wrapper{ margin-left: 0 !important; margin-right: 0 !important; }
  /* >1880 контейнер ряда лого/поиска капался на 1840 и центрировался (+10..∞ слева),
     а город/меню шли во всю ширину → ряды разъезжались («разные шапки» 1800 vs 1900).
     Плюс vw-отступы меняли вертикальный ритм. Пиним контейнер и вертикаль. */
  html body .top-header .container{ max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  html body .top-panel__cols.header-middle{ margin-top: 12px !important; margin-bottom: 0 !important; }
  html body .top-menu__wrapper{ margin-top: 14px !important; }
  /* ≤~980 тема ужимала тексты второго ряда до 11px (меню/телефон/правые ссылки) —
     «шапка уменьшается» при 984→956. Пиним 16px на всём инлайне. */
  html body .top-menu__wrapper .horizontal-menu > li{ height: auto !important; }
  html body .top-menu__wrapper .horizontal-menu > li > a{
    font-size: 16px !important; line-height: 1.4 !important; height: auto !important; padding: 0 !important;
  }
  html body .top-blocks.top-right .link__stub a{ font-size: 16px !important; line-height: 1.4 !important; }
  html body .top-header .header__descr a[href^="tel"]{ font-size: 16px !important; line-height: 1.4 !important; }
  /* ≤980 тема ужимала и кнопку «Каталог» (текст 20→14, паддинг 24→10) и шрифт
     инпута поиска (20→14) — «шапка уменьшается», волна вторая. Пиним. */
  html body .top-panel__btn-catalog .btn.catalog-button{ padding: 0 24px !important; }
  html body .top-panel__btn-catalog .btn.catalog-button > span{ font-size: 20px !important; }
  /* QA 29.07 (#241): плейсхолдер/ввод были 20px — крупнее остального инлайна шапки,
     уменьшили до 18px (кнопка «Каталог» осталась 20px как акцент). */
  html body .top-panel__search input[type=text]{ font-size: 18px !important; }
  /* ↑ волна 3 (остаток того же 980-скачка, ловили 15.07 по фидбеку): тема на ≤980
     меняла ещё ВЕС текста «Каталог» (400→300) и РАЗМЕР иконки-сетки —
     .line-menu/.custom__element-miniblock на >980 сидят на vw (@1860: 1.521vw/1.25vw),
     а на ≤980 — фикс 20/8px → квадратики скакали на 980 (984↔970). Плюс padding
     кнопки поиска тема давала только ≤980 (лупа дёргалась). Пиним всё на инлайне. */
  html body .top-panel__btn-catalog .btn.catalog-button > span{ font-weight: 400 !important; }
  html body .top-panel__btn-catalog .btn.catalog-button .line-menu{
    width: 20px !important; height: 20px !important; line-height: 20px !important;
  }
  html body .top-panel__btn-catalog .btn.catalog-button .line-menu .custom__element-miniblock{
    width: 8px !important; height: 8px !important;
  }
  html body .top-panel__search .btn{ padding: 3px 10px 3px 20px !important; }
  /* ≤980 тема ужимала и кластер иконок: «Где купить» svg 40→28, подпись 12→8px.
     Пиним иконки и подписи; бейджи-счётчики (.count) не трогаем. */
  html body .my__wigets-item svg{ width: 40px !important; height: 40px !important; }
  html body .my__wigets-item p{ font-size: 12px !important; }
  html body .top-panel__wishlist .icon-box svg,
  html body .top-panel__compare .icon-box svg{ width: 41px !important; height: 41px !important; }
  html body .top-panel__title{ font-size: 12px !important; }
  /* кластер иконок стоял на правой линии 40px вместо 30 (свой margin-right:10) —
     визуально «втянут» относительно телефона и «Регистрации проекта» */
  html body .my__wigets-item{ margin-right: 0 !important; }
}

/* --- 2) оранж-пилюля поиска на стеке 541-869 --- */
@media (min-width: 541px) and (max-width: 869px){
  html body .top-panel__search .input-group.jv-search-block{
    box-sizing: border-box !important;
    border: 3px solid var(--jv-primary) !important;
    border-radius: 14px !important;
    background: #fff !important;
    padding: 0 !important;
  }
  html body .top-panel__search .input-group.jv-search-block input[type=text]{
    border: none !important; border-radius: 0 !important; margin: 0 !important;
    background: transparent !important;
  }
  html body .top-panel__search .input-group.jv-search-block .search-btn,
  html body .top-panel__search .input-group.jv-search-block .btn{
    border: none !important; margin: 0 !important;
    top: -3px !important; right: -3px !important; bottom: -3px !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    border-radius: 0 14px 14px 0 !important;
  }
  html body .top-panel__search .btn::after,
  html body .top-panel__search .search-btn::after{ display: none !important; content: none !important; }
}

/* --- 3) мобильная шапка ≤540 (Figma стадия 8) --- */
@media (max-width: 540px){
  /* единая линия контента 16px */
  .top-header{ padding-left: 0 !important; padding-right: 0 !important; }
  .top-panel__cols.header-middle{ margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; }
  .top-header .header__descr .container{ padding-left: 16px !important; padding-right: 16px !important; max-width: none !important; margin: 0 !important; }
  .top-header .header__descr{ padding-top: 0 !important; padding-bottom: 0 !important; }
  .top-panel__cols.top-panel__left{ padding: 0 !important; margin: 10px 16px 0 !important; width: auto !important; }
  .mobile__header-content--bottom{ padding: 0 !important; margin: 12px 16px 0 !important; width: auto !important; }
  .top-menu__wrapper{ margin: 10px 16px 0 !important; padding: 0 0 12px !important; }
  .top-blocks.top-left{ padding: 0 !important; margin: 0 !important; }
  .top-panel__cols.top-panel__left .top-panel__logo img{ max-width: 132px !important; height: auto !important; }
  /* поиск: один серый пилл, плоская иконка внутри справа */
  .top-panel__search .input-group.jv-search-block{
    background: var(--jv-bg-surface, #F2F3F6) !important; border: none !important;
    border-radius: 22px !important; height: 44px !important; padding: 0 !important; overflow: visible !important;
  }
  .top-panel__search .input-group.jv-search-block input[type=text]{
    background: transparent !important; border: none !important; border-radius: 0 !important;
    height: 44px !important; padding: 0 44px 0 16px !important; font-size: 16px !important; margin: 0 !important;
  }
  .top-panel__search .input-group.jv-search-block .search-btn,
  .top-panel__search .input-group.jv-search-block .btn{
    background: transparent !important; border: none !important; border-radius: 0 !important;
    position: absolute !important; right: 0 !important; top: 0 !important; bottom: 0 !important; left: auto !important;
    width: 44px !important; height: 44px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  .top-panel__search .btn::after,
  .top-panel__search .search-btn::after{ display: none !important; content: none !important; }
  .top-panel__search .search-btn i,
  .top-panel__search .btn i{ color: #999 !important; font-size: 18px !important; }
  /* меню */
  .top-menu__wrapper .horizontal-menu{ gap: 14px !important; }
  .top-menu__wrapper .horizontal-menu > li > a{ font-size: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ТАКТИЛЬНЫЙ ПРОХОД (дизайн-аудит 13.07, линза interaction craft)
   1) :active scale(0.97) на всё нажимаемое — интерфейс отвечает на нажатие.
   2) hover-lift карточек только на устройствах с курсором (на таче hover
      срабатывает по тапу — карточка «подпрыгивала» и залипала).
   3) Точечные transition-свойства + сильный ease-out (--jv-ease-out) на
      интерактиве вместо вялого transition:all.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- 1) тактильный отклик нажатия --- */
.btn.catalog-button,
.jv-product-card__btn-more,
.product-item__button-link,
.top-panel__search .search-btn,
.jv-btn-primary,
.jv-product__related-btn,
.jv-product__question-btn,
.sup-btn,
.jv-group__value,
.jv-category-pagination .pagination a,
.jv-mfilter__dd-item,
.jw-sidemenu-ask-btn{
  transition: transform 120ms var(--jv-ease-out, ease-out),
              background-color 150ms ease,
              border-color 150ms ease,
              color 150ms ease,
              box-shadow 150ms ease !important;
}
.btn.catalog-button:active,
.jv-product-card__btn-more:active,
.product-item__button-link:active,
.top-panel__search .search-btn:active,
.jv-btn-primary:active,
.jv-product__related-btn:active,
.jv-product__question-btn:active,
.sup-btn:active,
.jv-group__value:active,
.jv-category-pagination .pagination a:active,
.jv-mfilter__dd-item:active,
.jw-sidemenu-ask-btn:active{
  transform: scale(0.97) !important;
}

/* --- 2) hover-подъёмы только при реальном курсоре --- */
@media (hover: none), (pointer: coarse){
  .jv-product-card:hover,
  .jv-subcategory-card:hover{ transform: none !important; box-shadow: none !important; }
  .jv-product__certificate-link:hover{ transform: none !important; }
}

/* --- 3) карточки: явные свойства перехода (были transition:all у части) --- */
.jv-product-card,
.jv-subcategory-card{
  transition: transform 180ms var(--jv-ease-out, ease-out),
              box-shadow 180ms var(--jv-ease-out, ease-out),
              border-color 150ms ease,
              background-color 150ms ease !important;
}

/* ═══ Шапка/мобилка — добивка по фидбеку (13.07, вечер) ═══ */

/* Квадратики иконки «Каталог» плыли пружинящей анимацией 0.4s (elastic-кривая
   с отскоком) при ресайзе и ховере — «странная анимация в кнопке каталога». */
.custom__element-miniblock{ transition: none !important; }

/* Стек 541-869: тема ужимала телефон до 11px */
@media (min-width: 541px) and (max-width: 869px){
  html body .header__descr a[href^="tel"],
  html body .header__descr-right a{ font-size: 16px !important; }
}

/* Мобилка ≤540: тема держала max-height:36 на инпуте (текст висел выше центра
   пилюли-44) и на кнопке; отступ до слайдера 56 → 28 (просьба клиента: вдвое) */
@media (max-width: 540px){
  html body .top-panel__search .input-group.jv-search-block input[type=text]{
    height: 44px !important; min-height: 44px !important; max-height: 44px !important;
  }
  html body .top-panel__search .input-group.jv-search-block .search-btn,
  html body .top-panel__search .input-group.jv-search-block .btn{
    height: 44px !important; min-height: 44px !important; max-height: 44px !important;
  }
  html body .jvhs{ padding-top: 28px !important; }
}

/* ≤400: кнопка-иконка «Каталог» была 56×36 (max-height:36 темы) — теперь квадрат.
   #128: 56 -> 48, вровень с бургером 48 (усреднение по фидбэку) */
@media (max-width: 400px){
  html body .top-panel__btn-catalog .btn.btn-border.catalog-button{
    height: 48px !important; min-height: 48px !important; max-height: 48px !important;
    width: 48px !important; min-width: 48px !important;
  }
}

/* ═══ Шапка — пакет полировки по фидбеку (13.07, ночь) ═══ */

/* Hover пункта меню больше не сдвигает низ сайта: тема меняла line-height и
   добавляла border-bottom (рос ряд). Подчёркивание — без влияния на макет. */
html body .horizontal-menu a:hover{
  line-height: 1.4 !important; border-bottom: none !important;
  text-decoration: underline !important; text-underline-offset: 6px !important;
}

/* Избранное/Сравнение: hover как у «Где купить» (иконка оранж, текст чёрный) */
.top-panel__wishlist:hover path,
.top-panel__compare:hover path{ stroke: var(--jv-primary) !important; }
.top-panel__wishlist:hover .top-panel__title,
.top-panel__compare:hover .top-panel__title{ color: var(--jv-text-primary) !important; }

/* «42 магазина партнёров»: та же hover-модель (серый → чёрный + оранж-иконка) */
html body .header__descr-left > a{ color: var(--jv-text-muted) !important; transition: color .15s ease; }
html body .header__descr-left > a:hover{ color: var(--jv-text-primary) !important; }
html body .header__descr-left > a:hover svg path{ stroke: var(--jv-primary) !important; }

/* Разлёт квадратиков иконки «Каталог» на hover — убит окончательно */
.custom__menu-button-animated:hover .line-menu .custom__element-miniblock{ transform: none !important; }

@media (min-width: 541px){
  /* Внутреннее скругление поиска (референс клиента): пилюля оранжевая,
     белое поле с радиусом 11 утоплено внутрь, лупа на оранжевом */
  html body .top-panel__search .input-group.jv-search-block{ background: var(--jv-primary) !important; }
  html body .top-panel__search .input-group.jv-search-block input[type=text]{
    background: #fff !important; border-radius: 11px !important; width: calc(100% - 58px) !important;
  }
  /* Иконка «магазинов» дёргалась 23→15 на <980 */
  html body .header__descr-left a svg{ width: 23px !important; height: 23px !important; }
}

@media (min-width: 870px){
  /* Подпись под иконками прыгала (margin-top 9→4 на <980) → менялась высота
     кластера. Было стабильных 8px; #142 — ужато до 4px. */
  html body .my__wigets-item p{ margin-top: 4px !important; }
  html body .top-panel__title{ margin-top: 4px !important; }
}

/* ===== Главная, мобила: «Каталог продукции» — сетка 2 в ряд ===== */
/* Было: вертикальный список горизонтальных строк (картинка сбоку, чётные
   перевёрнуты) — выглядело неаккуратно. Стало: 2 карточки в ряд, картинка
   сверху, название снизу (мини-версия десктопной карточки). */
@media (max-width: 767px){
  .jv-showcase__grid{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .jv-showcase__card,
  .jv-showcase__card:nth-child(even){
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
    padding: 10px 10px 14px !important;
    border-radius: 14px !important;
    background: #fff !important;
  }
  .jv-showcase__card-img-wrap{
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    align-self: auto !important;
  }
  .jv-showcase__card-img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  .jv-showcase__card-name{
    flex: none !important;
    display: block !important;
    padding: 10px 2px 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    margin-top: 0 !important;
  }
}

/* ===== Hero-слайдер: точки внутри слайдера снизу ===== */
/* Было: точки в потоке под слайдером; активная выглядела огромной (~30px) —
   в базовом jv_home_slider.css у --active фон задан ШОРТКАТОМ background:,
   а шорткат сбрасывает background-clip: content-box → красилась вся тап-зона
   (23px) и ещё ×1.3 scale. Поэтому здесь только background-color.
   Стало: маленькие точки поверх картинки у нижнего края (с отступом, как
   стрелки у боковых), неактивная белая, активная оранжевая. drop-shadow
   (не box-shadow!) обводит только видимый кружок. На мобиле отступ меньше:
   в арте баннеров у нижнего края нарисованы чипы («5 лет» и т.п.) — точки
   садятся в свободную полоску под ними. */
.jvhs__dots{
  position: absolute !important;
  left: 50% !important; right: auto !important;
  transform: translateX(-50%);
  width: auto;
  bottom: 10px;
  padding: 2px 6px !important;
  z-index: 5;
  /* #309: капсула-подложка убрана — тёмная плашка бросалась в глаза поверх
     арта. Контраст белой точки на светлом баннере держим тенью у самих точек
     (см. .jvhs__dot ниже), а не заливкой контейнера.
     Заодно gap в ноль: расстояние между точками складывалось из gap 8px и
     прозрачных тап-зон по 8px с каждой стороны — шаг выходил 31px. */
  background: none;
  border-radius: 0;
  gap: 0 !important;
}
.jvhs__dot{
  width: 7px !important;
  height: 7px !important;
  padding: 6px !important;        /* тап-зона 19px; на мобилке ниже возвращаем 8px */
  background-color: #fff !important;
  background-clip: content-box !important;
  /* #314: тень/обводка у точек не нужна — только белая точка и оранжевая активная */
  box-shadow: none !important;
  border: none !important;
}
.jvhs__dot--active{
  background-color: var(--jv-primary) !important;
  background-clip: content-box !important;
  transform: none !important;
}
@media (max-width: 767px){
  .jvhs__dots{ bottom: 8px; }
  /* на тач-экранах тап-зону не режем (#309 касался десктопной плотности).
     Аудит 02.09: 6 + 8×2 = 22px, Lighthouse требует 24 — padding 9px. */
  .jvhs__dot{ width: 6px !important; height: 6px !important; padding: 9px !important; }
}

/* ===== Единая левая линия 20px: шапка = контент (аудит клиента 14.07) ===== */
/* Контент (page-wrapper) стоит на 20px, шапка стояла на 30: top-header 20
   + 10 у header-middle (наша же «полировка», padding 10px со всех сторон)
   и + 10 margin у header__descr (гео-строка). Горизонтальные добавки в ноль,
   вертикальный ритм не трогаем. */
@media (min-width: 870px){
  html body .top-panel__cols.header-middle{ padding: 10px 0 !important; }
  html body .top-header .header__descr{ margin-left: 0 !important; margin-right: 0 !important; }
}

/* Фидбек #36/#56: гео-строка (город/партнёры/телефон) и ряд лого-поиск были прижаты
   к соседним объектам/разделителю (верт. отступ ~4px). Добавляем воздуха
   сверху и снизу ряду header-middle. Специфичный селектор — чтобы перебить ад-хок
   правила темы, ставящие 4px. Мобилку ≤540 не трогаем (там свой компактный ритм).
   Фидбек #75: 16px оказалось много — ужато до 8px. */
@media (min-width: 541px){
  html body .top-header .top-panel__cols.header-middle{
    padding-top: 8px !important; padding-bottom: 8px !important;
  }
}
/* Стек <870: те же 30 набегали из top-header padding 10 + margin 20 у рядов */
@media (max-width: 869px){
  html body .top-header{ padding-left: 0 !important; padding-right: 0 !important; }
  /* отступы между пунктами ряда меню — плотнее (было ~30px) */
  html body .top-menu__wrapper li, html body .top-menu__wrapper a{ margin-left: 6px !important; }
  html body .top-menu__wrapper li:first-child, html body .top-menu__wrapper a:first-child{ margin-left: 0 !important; }
}
/* Стек: белое поле поиска ближе к лупе (зазор 18→8px). На десктопе ≥870
   не трогаем — там свои 58px, меньше нельзя: поле заедет под кнопку. */
@media (min-width: 541px) and (max-width: 869px){
  html body .top-panel__search .input-group.jv-search-block input[type=text]{ width: calc(100% - 48px) !important; }
}

/* ===== «Где купить»: табы Офлайн/Онлайн в строку заголовка ===== */
/* Табы стояли отдельной строкой под h1 — поднимаем в правый конец строки
   заголовка (центры выровнены: -54px = зазор 16 + высота ряда h1 36 +
   разница высот 2), контент ниже поднимается на освободившееся место.
   .gk-toggle — неймспейс страницы jv_gdekupit, портфолио не задевает. */
@media (min-width: 768px){
  .gk-toggle{
    margin-top: -54px !important;
    margin-left: auto !important;
    width: max-content !important;
    position: relative; z-index: 2;
  }
}

/* ===== Техподдержка: брендбук-карточка на промежуточных ширинах ===== */
/* В диапазоне 721–1360 карточка (2×2 ячейки бенто, высота фикс. 392/416px)
   не вмещала контент: обложка 250px съедала колонку текста (заголовок по
   слову на строке), низ с палитрой обрезался overflow'ом. Ужимаем обложку
   и вертикальные зазоры — контент помещается с запасом. ≤720 не трогаем
   (там свой одноколоночный мобильный вариант). */
@media (min-width: 721px) and (max-width: 1360px){
  .sup-card--brand{ padding: 22px !important; gap: 14px !important; }
  .sup-brand__grid{ grid-template-columns: 150px 1fr !important; gap: 18px !important; }
  .sup-brand__meta{ padding-top: 14px !important; gap: 18px !important; }
  .sup-meta-label{ margin-bottom: 8px !important; }
  .sw__chip{ height: 32px !important; }
  .sup-card--brand .sup-card__title{ font-size: 18px !important; }
  .sup-brand__head .sup-btn{ margin-top: 12px !important; height: 42px !important; }
}

/* ===== Широкие экраны: шапка и подвал не шире контента ===== */
/* Контент центрирован контейнерами max-width:1880 (внутри 1840 + 2×20),
   а ряды шапки и footer-container тянулись во всю ширину (на 2560+ —
   «разъезжаются по краям»). Капим на ту же сетку: ряды шапки 1840
   (внутри .top-header pad 20), контейнер подвала 1920 (внутри pad 40) —
   левая линия контента совпадает (напр. 80px на 2000w). Медиа ≥1900:
   ниже кап не работает, а margin:auto не должен ломать стек <870. */
@media (min-width: 1900px){
  html body .top-header .header__descr,
  html body .top-header .top-panel__cols.header-middle,
  html body .top-header .top-menu__wrapper{
    max-width: 1840px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
html body .site-footer .container{ max-width: 1920px; margin: 0 auto; }
/* Колонки подвала на широких — гарантированный зазор (flex space-between,
   на средних ширинах колонки сходились впритык) */
@media (min-width: 1500px){
  html body .footer__top{ gap: 0 48px; }
}

/* ===== Плашки подкатегорий — горизонтальный чип по референсу (14.07) ===== */
/* Было: --main вертикальные карточки 8 в ряд (фото сверху, имя снизу, серое),
   --sub гибрид. Стало (референс клиента): фото слева в белом окошке, справа
   название тёмным + «(N товара/товаров)» серым. Счётчик отдаёт контроллер
   category.php (заведён в overlay, склонение pluralProducts). */
.jv-category__subcategories--main,
.jv-category__subcategories--sub{
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: 16px !important;
}
.jv-subcategory-card,
.jv-category__subcategories--sub .jv-subcategory-card{
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
  gap: 14px !important;
  padding: 10px 14px 10px 10px !important;
  border: 1.5px solid var(--jv-border) !important;
  border-radius: 16px !important;
  background: #fff !important;
}
.jv-subcategory-card__image,
.jv-category__subcategories--sub .jv-subcategory-card__image{
  flex: none !important;
  width: 84px !important;
  height: 84px !important;
  aspect-ratio: auto !important;
  border-radius: 12px !important;
}
.jv-subcategory-card__image img{ width: 90% !important; height: 90% !important; }
.jv-subcategory-card__content{ gap: 5px !important; width: auto !important; min-width: 0; }
.jv-subcategory-card__name,
.jv-category__subcategories--sub .jv-subcategory-card__name{
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--jv-text-primary) !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 2 !important;
  text-align: left !important;
}
.jv-subcategory-card__count{
  font-size: 13px !important;
  color: var(--jv-text-muted) !important;
  line-height: 1.2;
}
/* hover: как в референсе — карточка не перекрашивается целиком, подсветка бренда */
/* #481 (07.08): бегущая обводка #387 снята, возвращён прежний ховер —
   подъём + оранжевая рамка + лёгкая тень. !important нужен: базовая рамка
   карточки выше задана с !important и иначе перебивала бы ховер. */
.jv-subcategory-card:hover,
.jv-category__subcategories--sub .jv-subcategory-card:hover{
  background: #fff !important;
  border-color: var(--jv-accent) !important;
  box-shadow: 0 4px 16px rgba(242, 91, 36, 0.1) !important;
}
.jv-subcategory-card:hover .jv-subcategory-card__name{ color: var(--jv-primary) !important; }
@media (max-width: 560px){
  .jv-category__subcategories--main,
  .jv-category__subcategories--sub{ grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .jv-subcategory-card, .jv-category__subcategories--sub .jv-subcategory-card{
    flex-direction: column !important; text-align: center !important; padding: 10px !important;
  }
  .jv-subcategory-card__name, .jv-category__subcategories--sub .jv-subcategory-card__name{ text-align: center !important; font-size: 14px !important; }
}

/* Плашки подкатегорий, 561–900: база превращает ряд в горизонтальную
   скролл-ленту с карточками min-width 117px — горизонтальный чип там
   не влезал (текст обрезался). В ленте чип шире и с фото поменьше.
   ≤560 не трогаем — там вертикальная мини-карточка в ленте. */
@media (min-width: 561px) and (max-width: 900px){
  .jv-category__subcategories--main .jv-subcategory-card,
  .jv-category__subcategories--sub .jv-subcategory-card{
    min-width: 235px !important;
    flex: 0 0 auto !important;
    padding: 8px 14px 8px 8px !important;
  }
  .jv-subcategory-card__image,
  .jv-category__subcategories--sub .jv-subcategory-card__image{ width: 60px !important; height: 60px !important; }
  .jv-subcategory-card__name,
  .jv-category__subcategories--sub .jv-subcategory-card__name{ font-size: 14px !important; }
}

/* Hover-модель: «Регистрация проекта»/«Калькулятор» — текст чёрный (был глобальный
   оранж от a:hover); город — текст чёрный + иконка оранжевая (citymanager красил
   текст оранжевым) */
html body .top-blocks.top-right .link__stub a:hover{ color: var(--jv-text-primary) !important; }
html body .jw-city-selector__trigger:hover{ color: var(--jv-text-primary) !important; }
html body .jw-city-selector__trigger:hover svg path{ stroke: var(--jv-primary) !important; }

/* «Регистрация проекта / Калькулятор освещенности» вровень с рядом меню:
   пункт меню — inline-flex min-height:40 (текст по центру 40px), правые ссылки
   22px сидели сверху → тексты не на одной линии. Центрируем правый блок в общем
   flex-ряду (top-info__panels) — серединки текстов совпадают. Проверено 900/1300/1500: delta 0. */
.top-menu__wrapper .top-info__panels{ align-items: center !important; }

/* ═══ Поиск всегда в одну строку в диапазоне 541–869 (вкл. липкую шапку) ═══
   Ниже 869 тема раскладывала видимую шапку (.top-panel__thead) блочно:
   [лого | Каталог] строкой 1, поиск во всю ширину строкой 2. В липком хедере
   (fixed ≤767) — то же. Собираем в один flex-ряд: [лого Каталог] [поиск————].
   Ниже 541 остаётся штатный мобильный слой (серый пилл отдельной строкой). */
@media (min-width: 541px) and (max-width: 869px){
  html body .top-panel__thead{
    display: flex !important; align-items: center !important;
    gap: 14px !important; flex-wrap: nowrap !important;
  }
  html body .top-panel__thead .top-panel__left{
    flex: 0 0 auto !important; width: auto !important;
    justify-content: flex-start !important; gap: 14px !important;
  }
  html body .top-panel__thead .mobile__header-content--bottom{
    flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important;
  }
  html body .top-panel__thead .mobile__header-content--bottom .top-panel__search,
  html body .top-panel__thead .mobile__header-content--bottom .top-panel__search .input-group.jv-search-block{
    width: 100% !important; min-width: 0 !important;
  }
}

/* ═══ Шапка ≥870: сжать вертикальный воздух (по фидбеку «большие отступы») ═══
   Было 209px: город 50 (контент 40 + воздух), паддинги ряда поиска 10/10,
   зазоры 12/14. Стало ~193: убираем лишний воздух, ритм плотнее, выравнивание
   Регистрация/Калькулятор с меню сохранено. */
@media (min-width: 870px){
  html body .top-header .header__descr{ min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  html body .jw-city-selector__trigger,
  html body .header__descr-left > a{ padding-top: 0 !important; padding-bottom: 0 !important; }
  html body .top-panel__cols.header-middle{ margin-top: 8px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
  html body .top-menu__wrapper{ margin-top: 8px !important; padding-bottom: 10px !important; }
}

/* ═══ Мобильная липкая шапка [поиск · Каталог], появляется при скролле ВВЕРХ ═══
   Паттерн vseinstrumenti: скрыта у верха и при скролле вниз, выезжает при скролле
   вверх. Поиск ИЗОЛИРОВАН (свой инпут + прямой POST к smartsearch-эндпоинту, своя
   выпадашка) — НЕ .jv-search-block, поэтому тема не синхронит значения и не заливает
   результаты в чужие блоки: нет «двух меню» и дёрганья скролла. Каталог → мегаменю.
   Только <768. */
.jw-msticky{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: none; align-items: center; gap: 10px; padding: 8px 12px;
  background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.10);
  transform: translateY(-100%);
  transition: transform .28s cubic-bezier(.23,1,.32,1);
  will-change: transform;
}
@media (max-width: 767px){ .jw-msticky{ display: flex; } }
.jw-msticky.is-visible{ transform: translateY(0); }

/* 🔴 Панель выезжает ПОД лентой фидбэка, а не под неё. Лента липкая с z-index
   1200, панель — 1000: в перекрытии клик по полю поиска доставался ленте
   (проверено 03.09 — elementFromPoint в центре поля возвращал .jw-bug-banner,
   поиск и «Каталог» на мобильном были недоступны при прокрутке вверх).
   Высоту ленты публикует сам модуль фидбэка (--jw-sticky-offset в
   js/jw-feedback.js); когда ленту снимут, переменной не будет и панель сама
   вернётся к top: 0 по запасному значению. */
.jw-msticky{ top: var(--jw-sticky-offset, 0px); }

/* поиск в баре — серый пилл */
.jw-msticky .jw-msticky__search{
  flex: 1 1 auto; min-width: 0; position: relative;
  display: flex; align-items: center; height: 44px;
  background: #F2F3F6; border-radius: 22px; padding: 0 6px 0 16px;
}
.jw-msticky .jw-msticky__input{
  flex: 1 1 auto; min-width: 0; height: 44px;
  border: 0; background: transparent; border-radius: 0;
  font-size: 16px; color: #171717; outline: none; padding: 0;   /* 16px: iOS не зумит поле при фокусе */
}
.jw-msticky .jw-msticky__go{
  flex: 0 0 auto; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%; color: #999; padding: 0; cursor: pointer;
}
/* своя выпадашка результатов — фиксированная, на всю ширину, скролл внутри */
.jw-msticky .jw-msticky__results{
  position: fixed; left: 0; right: 0; width: 100vw; top: 60px;
  max-height: calc(100vh - 70px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 0 0 14px 14px; box-shadow: 0 8px 20px rgba(0,0,0,.12); z-index: 1001;
}

/* кнопка Каталог */
.jw-msticky__cat{
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px; background: var(--jv-primary) !important; color: #fff;
  border: 0; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.jw-msticky__cat svg{ width: 18px; height: 18px; flex: 0 0 auto; }
.jw-msticky__cat:active{ transform: scale(0.97); }

/* #302: бургер в липкой панели, справа от «Каталога». Вид — как у бургера
   шапки (#228): три оранжевые линии в рамке того же цвета, без заливки. */
.jw-msticky__burger{
  flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 4px;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 2px solid var(--jv-primary, #E94E1B);
  border-radius: 12px; cursor: pointer;
}
.jw-msticky__burger span{
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--jv-primary, #E94E1B);
}
.jw-msticky__burger:active{ transform: scale(0.97); }

/* ═══ Мобильный липкий бар — доводка выдачи и закрытия (по фидбеку с видео) ═══
   Изолированная выпадашка теряла стили темы (.jv-search-block scope) → картинки
   192px; фон скроллился; синее выделение; нельзя закрыть. Чиним. */
.jw-msticky, .jw-msticky *{ -webkit-tap-highlight-color: transparent !important; }
.jw-msticky__input:focus{ outline: none !important; }        /* убрать оранжевый focus-контур */
.jw-msticky__results{ -webkit-user-select: none; user-select: none; }  /* без синего выделения текста */
/* крестик очистки/закрытия — виден когда есть запрос */
.jw-msticky__clear{
  flex: 0 0 auto; width: 34px; height: 34px; display: none;
  align-items: center; justify-content: center;
  background: transparent; border: 0; color: #999; font-size: 24px; line-height: 1; padding: 0; cursor: pointer;
}
.jw-msticky.has-query .jw-msticky__clear{ display: flex; }
/* подложка: тап закрывает, фон под ней не скроллится */
.jw-msticky__overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 999; display: none; }
.jw-msticky__overlay.is-open{ display: block; }
body.jw-msticky-lock{ overflow: hidden !important; }
/* стили строк выдачи (как у поиска темы, но заскоплено на наш контейнер) */
.jw-msticky__results li.item{ border-top: 1px solid #f4f4f4; list-style: none; }
.jw-msticky__results li.item .item_block{ display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
.jw-msticky__results li.item .item_block .image{
  flex: none; width: 64px; height: 64px; padding-right: 0;
  border-radius: 10px; background: #f6f6f6; display: flex; align-items: center; justify-content: center;
}
.jw-msticky__results li.item .item_block .image img{ max-width: 54px; max-height: 54px; width: auto; height: auto; }
.jw-msticky__results li.item .item_block .title{ flex-grow: 1; padding-right: 10px; }
.jw-msticky__results li.item .item_block .title a{ font-size: 14px; font-weight: 600; line-height: 1.35; color: #171717; }
.jw-msticky__results li.item .item_block a b{ color: var(--jv-primary) !important; }
.jw-msticky__results li.item .item_block .title span{
  display: inline-block; font-size: 11px; font-weight: 600; color: #5f5f5f;
  background: #f2f2f2; border-radius: 6px; padding: 2px 8px; margin-top: 5px;
}
.jw-msticky__results li.item .item_block .price{ white-space: nowrap; color: #171717; font-weight: 600; font-size: 14px; }
.jw-msticky__results .button{ background: #fff; border-top: 1px solid #f0f0f0; text-align: center; }
.jw-msticky__results .button a{ display: block; color: var(--jv-primary); font-weight: 700; font-size: 14px; padding: 14px; }

/* Мобильный бар — правки выдачи по фидбеку:
   цену не показываем; максимум ~5 строк, дальше прокрутка; ничего не вылезает
   за края; чип артикула компактный (smartsearch.css делал span block). */
.jw-msticky__results .price,
.jw-msticky__results .oldprice{ display: none !important; }
.jw-msticky__results{ overflow-x: hidden !important; }
.jw-msticky__results ul.items{
  max-height: 480px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch;
}
.jw-msticky__results li.item .item_block .title span{
  display: inline-block !important; width: auto !important; max-width: 100% !important;
}

/* Синее выделение текста в самом баре (кнопка «Каталог», пилюля) — снимаем;
   поле ввода остаётся выделяемым/редактируемым. */
.jw-msticky{ -webkit-user-select: none; user-select: none; }
.jw-msticky .jw-msticky__input{ -webkit-user-select: text; user-select: text; }

/* ============================================================
   ПРАВКИ ВЁРСТКИ по клиентским комментам (2026-07-15)
   Карточка товара / шапка / футер — мобилка.
   Всё в custom.css (грузится последним) → независимо от OCMOD-кэша шаблонов.
   ============================================================ */

/* [1] «Артикул» + «Код для заказа» — в один ряд (было flex-direction:column) */
@media (max-width: 767px){
  .jv-product__top-options_first{
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px 22px !important;
    align-items: center !important;
  }
}

/* [2] Хлебные крошки — строго в одну строку, хвост (имя товара) режем «…» */
@media (max-width: 767px){
  #product-product .navigation-content .breadcrumb{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }
  #product-product .navigation-content .breadcrumb > li:not(:last-child){
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  #product-product .navigation-content .breadcrumb > li:last-child{
    flex: 0 1 auto !important;
    min-width: 0 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* [3] Меню-ряд шапки (Главная·Каталог·…) — меньше воздуха сверху/снизу */
@media (max-width: 869px){
  .top-menu__wrapper{ margin-top: 2px !important; padding-bottom: 4px !important; }
}

/* [4][5] Характеристики (верхний блок + «Технические характеристики») —
   строго в одну строку с пунктирной линией. Перебивает мобильный стек 3230-3233. */
@media (max-width: 767px){
  .jv-table-dots-item{
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    overflow: hidden !important;
  }
  .jv-table-dots-label{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .jv-table-dots-separator{
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 16px !important;
    margin: 0 8px !important;
  }
  .jv-table-dots-value{
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
    text-align: right !important;
    margin-top: 0 !important;
  }
}

/* [6] Убрать кнопку «Свернуть характеристики» + показать все ТХ (снять сворачивание) */
.jv-product__specifications-expand{ display: none !important; }
#jv-block-specifications .jv-product__specifications-items .jv-table-dots-item:nth-child(n+23),
.jv-product__bottom-inform .jv-product__specifications-items .jv-table-dots-item:nth-child(n+23){
  display: flex !important;
}

/* [7] «Список моделей» — название в одну строку (таблица горизонтально скроллится) */
.jv-product__models-table td.name{ white-space: nowrap !important; }

/* [8] «Популярные товары» — отступ по краям + заголовок вровень с другими блоками */
@media (max-width: 767px){
  /* Свои боковые поля блоку больше не нужны: их даёт .product (16px, как
     у шапки товара) — до 27.08 он был сдвинут на 10px влево, и 12px здесь
     компенсировали сдвиг. Со снятым сдвигом они давали двойной отступ:
     заголовок «Популярные товары» стоял на 32px против 16px у остального. */
  #product-product .jv-product__popular-wrap{ padding-left: 0 !important; padding-right: 0 !important; }
  #product-product .jv-product__popular-wrap .jw-popular-module.container-push{ width: 100% !important; }
  #product-product .jv-product__popular-wrap .jw-popular__header{ padding-left: 0 !important; padding-right: 0 !important; }
  /* Вертикальные отступы. Над заголовком стояло 106px: 56 хвоста низа
     карточки + 20 зазора + 30 своего margin — на экране 844px это пустая
     треть. Хвост низа ужат до 24 (jv-product-lower.css), здесь margin
     16/20, итого 36 над заголовком. */
  #product-product .jv-product__popular-wrap .jw-popular-module{ margin: 16px 0 20px !important; }
  /* Снизу общий отступ страницы 50px давал вместе с margin блока 80px до
     подвала. На странице товара ужимаем до 24 — :has, потому что id
     страницы висит на внутреннем div, а не на body. Где :has не
     поддерживается, остаётся прежний отступ — не ломается ничего. */
  .wrapper-middle:has(#product-product){ padding-bottom: 24px; }
}

/* [9] Футер: соц-иконки в нормальном потоке (было position:absolute → наезд на телефон/почту) */
@media (max-width: 500px){
  .footer__top-left p + p{ margin-bottom: 0 !important; }
  .footer__top-rigth .social__links{
    position: static !important;
    width: auto !important;
    margin: 4px 0 20px !important;
    justify-content: flex-start !important;
  }
}

/* ============================================================
   КАТЕГОРИЯ — мобилка (клиентские комменты, 2026-07-15, раунд 2)
   Проверено в браузере на проде (375px).
   ============================================================ */

/* [cat-1/3] Единый левый край: контент категории висел на .page-wrapper(10px),
   шапка — на 16px. Сдвигаем контент к 16px (крошки/заголовок/тулбар/сетка). */
@media (max-width: 767px){
  .jv-category-page{ margin-left: 6px !important; margin-right: 6px !important; }
}

/* [cat-2] Поиск: плейсхолдер не обрезается (меньше правый отступ; на узких — компактнее).
   Было 40px — на ширине ~588px пустая белая зона справа съедала место и резала
   «Найти товары на JazzWay» (плейсхолдер 191px > поле 168px, фидбек #54). Кнопка-лупа
   лежит отдельным оранжевым элементом поверх, поэтому большой правый отступ не нужен. */
@media (max-width: 767px){
  html body .mobile__header-content--bottom input[name="search"]{ padding-right: 14px !important; }
}
@media (max-width: 380px){
  .mobile__header-content--bottom input[name="search"]{ font-size: 15px !important; }
}

/* [cat-4] Карточка: показать «Подробнее» на мобилке (оранжевая на всю ширину — стили уже есть) */
@media (max-width: 767px){
  .jv-product-card__actions .jv-product-card__btn-more{ display: flex !important; }
}

/* [cat-5..8] Мобильный дровер фильтров:
   - не на всю ширину: справа, зазор слева ~45px, сайт видно
   - затемнение сайта (box-shadow-спред, без доп. элемента) — только когда открыт
   - крупнее/аккуратнее чипы
   - убрана кнопка «Показать все фильтры» (она раскрывала бесполезные
     фильтры с 1 значением, которые прячет jv-a11y.js) */
/* #370: «боковое меню с фильтрами сделать по размерам, отступам и прочему как
   меню бургера — должна быть преемственность, и скругление с левого края сверху
   и снизу у белой подложки». Приводим к контракту .jw-bd (см. блок «БУРГЕР»
   ниже по файлу): те же 340px / 88vw, та же тень и кривая анимации, тот же
   цвет затемнения. Плюс два своих пункта: скругление левых углов и z-index
   выше ленты фидбэка (1200) — она накрывала шапку панели, и заголовок
   «Фильтры» уходил под чёрную полосу. */
/* ⚠️ #376: БЛОК ОБЯЗАН ЖИТЬ ВНУТРИ @media (max-width: 900px).
   Без медиазапроса `display:flex !important` действовал и на десктопе. Панель
   уезжала за экран трансформом, глазу незаметна — но у неё оставались размеры,
   поэтому `$('.ocfilter-mobile').is(':visible')` в module.twig давал true.
   А по этому флагу OCFilter делает
       $('.ocf-offcanvas-body').html($('#ocfilter').remove().get(0).outerHTML)
   — то есть ВЫРЕЗАЕТ панель фильтров из десктопной колонки и переносит
   в мобильный офф-канвас. Итог на широком экране: пустая серая плашка вместо
   фильтров, при живых фильтрах в мобильной панели.
   Правило `@media (min-width:901px) .ocfilter-mobile{display:none!important}`
   в jv-category.css это не спасало: у него специфичность 0-1-0 против 0-2-0
   здесь, и !important в обоих — выигрывает более специфичный, а не медийный.
   Срабатывало не всегда (:visible зависит от того, успел ли посчитаться лэйаут
   к моменту выполнения инлайн-скрипта) — отсюда «то моргает, то пропадает». */
@media (max-width: 900px) {
  .ocf-offcanvas.ocfilter-mobile{
    left: auto !important;
    right: 0 !important;
    width: 340px !important;
    max-width: 88vw !important;
    z-index: 3001 !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 20px 0 0 20px !important;
    overflow: hidden !important;   /* прокрутка живёт на .ocf-offcanvas-body */
    box-shadow: -8px 0 30px rgba(0, 0, 0, .15) !important;
    transform: translateX(101%) !important;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1) !important;
  }
  .ocf-offcanvas.ocfilter-mobile.active{
    transform: translateX(0) !important;
    /* затемнение — спредом тени, как было; цвет берём бургерный (rgba(20,20,20,.45)) */
    box-shadow: -8px 0 30px rgba(0, 0, 0, .15),
                0 0 0 100vw rgba(20, 20, 20, .45) !important;
  }
  .ocf-offcanvas.ocfilter-mobile .ocf-offcanvas-body{ flex: 1 1 auto; }
}
/* Шапка панели и крестик — в jv-category.css (он подключается позже, и правила
   с той же специфичностью выигрывают там; дублировать их здесь бесполезно). */
.ocf-offcanvas-body .ocfilter-option label{
  padding: 9px 14px !important;
  font-size: 15px !important;
  border-radius: 8px !important;
  border-width: 1.5px !important;
  line-height: 1.15 !important;
}
.ocf-offcanvas-body .ocf-option-values{ gap: 8px !important; }
.jv-ocf-more{ display: none !important; }

/* ⚠️ ВАЖНО (16.07): у OCFilter свой лимит — опции сверх `show_options_limit` он
   кладёт в контейнер #ocfilter-hidden-options (display:none), а раскрывает их
   его родная кнопка .jv-ocf-more — которую мы скрыли строкой выше. Итог: часть
   фильтров была заперта НАВСЕГДА (ничем не раскрывалась) — отсюда «у ламп мало
   фильтров». Нейтрализуем нативное скрытие: видимостью управляет наша кнопка
   «Показать все фильтры» (category.twig JS, класс .jv-filter-extra). */
#ocfilter-hidden-options{ display: block !important; }

/* Фильтры категории: непервичные скрыты под нашей кнопкой «Показать все фильтры»
   (category.twig JS); основные (data-jv-primary) — открыты, остальные после клика
   показываются свёрнутыми. */
.ocfilter-option.jv-filter-extra{ display: none !important; }

/* #376, вторая половина «моргания». Класс .jv-filter-extra вешает JS — а до его
   выполнения браузер успевал нарисовать ВСЕ непервичные фильтры раскрытыми
   (замер на ДПО: панель 2777px против ~800px после инициализации, 9 групп из 17
   исчезали на глазах). Правило ниже задаёт то же состояние ЧИСТЫМ CSS, до
   единой строчки JS: data-jv-primary приходит с сервера в самой разметке
   (filter_item.twig), значит выбор «первичный/нет» доступен уже на этапе
   парсинга. JS после этого ничего не меняет — менять нечего, вспышки нет.
   Раскрытие по кнопке — через .jv-ocf-expanded на панели (ставит тот же
   обработчик в category.twig, который снимает .jv-filter-extra). */
#ocfilter:not(.jv-ocf-expanded) .ocfilter-option:not([data-jv-primary="1"]){ display: none; }
.jv-ocf-showall{
  display: block; width: 100%; margin: 6px 0 2px; padding: 10px 0;
  background: none; border: none; cursor: pointer; text-align: left;
  color: var(--jv-primary, #E94E1B); font-weight: 600; font-size: 14px;
}
.jv-ocf-showall:hover{ color: var(--jv-primary-hover, #cf4416); }

/* ═══════════════════════════════════════════════════════════════════════════
   СЛАЙДЕР ФИЛЬТРА OCFilter (type=slide_dual) — бренд-стиль по Figma (2026-07-15)
   Рендерится только у числовых осей, переведённых в slide_dual (Мощность,
   Световой поток и т.п.). Базовый nouislider (v7) даёт синий connect + высокие
   ручки с насечками — приводим к бренду: тонкий трек, тёмная активная полоса,
   круглые оранжевые ручки. Разметка: .ocfilter-option → .ocf-option-name
   (тайтл + inline #left-value/#right-value) → .ocf-option-values → .scale.ocf-target.
   ⚠️ Пиксельную подгонку позиций ручек проверить на ЖИВОМ проде после включения
   типа (слайдера нет, пока опция radio; агент-браузер до прода не достаёт).
   ═══════════════════════════════════════════════════════════════════════════ */
.ocfilter-option .scale.ocf-target,
.ocfilter-option .noUi-target{ border: none !important; box-shadow: none !important; background: #e9e9e9 !important; }
/* ⚠️ .ocf-option-values — flex-контейнер (под пилюли-чипы). Слайдер внутри него —
   flex-элемент с flex:0 1 auto и без своего контента → ужимался до width:0, обе
   ручки слипались в точку слева. Даём полную ширину (проверено на проде 16.07). */
.ocfilter-option .scale.ocf-target{ width: 100% !important; flex: 1 1 100% !important; }
/* margin по вертикали 28px→15px: карточка фильтра-диапазона была на 13px выше
   соседних чип-фильтров (#189). Замерено на проде: 118px против 105px, после
   правки все 105px. */
/* #315/#316: значения ручек переехали НАД дорожкой (см. .jv-handle-value ниже) —
   освобождаем им место сверху, заодно дорожка отходит от названия фильтра
   (было тесно: 10px). Низ прежний. */
.ocfilter-option .noUi-horizontal{ height: 4px !important; margin: 27px 10px 5px !important; }
.ocfilter-option .noUi-background{ background: #e9e9e9 !important; box-shadow: none !important; }
/* активная полоса между ручками — светло-серая (#d9d9d9), не чёрная */
.ocfilter-option .noUi-connect{ background: #d9d9d9 !important; box-shadow: none !important; }
.ocfilter-option .noUi-horizontal .noUi-handle{
  width: 16px !important; height: 16px !important; border-radius: 50% !important;
  background: var(--jv-primary, #E94E1B) !important; border: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.28) !important; cursor: pointer;
  /* Ручка у noUiSlider — position:relative, а не absolute, поэтому `right` она
     игнорирует: побеждает библиотечный left:-17px (рассчитан на 34px-ручку) и
     наша 16px-ручка уезжала на ~9px влево от дорожки — «первый выглядывает»
     (#190). Центрируем через left и гасим right. Проверено замером на проде:
     центр ручки совпал с началом дорожки. */
  top: -6px !important; left: -8px !important; right: auto !important;
}
.ocfilter-option .noUi-handle::before,
.ocfilter-option .noUi-handle::after{ display: none !important; } /* убрать насечки */
.ocfilter-option .noUi-handle:hover{ background: var(--jv-primary-hover, #cf4416) !important; }
.ocfilter-option .noUi-active{ box-shadow: 0 2px 8px rgba(233,78,27,.45) !important; }
/* «Флажок» у слайдера. Две причины, гасим обе:
   1) .noUi-tooltip — подсказка noUiSlider при наведении (глобально, не только .ocfilter-option).
   2) .ocfilter-option-popover — Bootstrap-поповер OCFilter на мобилке (кнопка «Показать N товаров»
      под ручкой при перетаскивании). Именно он «наезжал» на шкалу и читался как кривая вёрстка;
      применение теперь мгновенное (см. инстант-переход в category.twig), поповер не нужен. */
.noUi-tooltip{ display: none !important; }
.ocfilter-option-popover{ display: none !important; }
/* #285: статичные подписи шкалы (min/середина/max) не показывали, что именно
   выбрано — по картинке было не понять, где стоят ручки. Числа шкалы убраны
   (риски остались), вместо них под каждой ручкой её текущее значение
   (навешивает JS в category.twig). */
.ocfilter-option .noUi-value-horizontal{ display: none !important; }
/* #315: значение — НАД ручкой (снизу оно упиралось в соседнюю карточку фильтра),
   кегль на 2px мельче. Ручка 16px с top:-6px, поэтому -16px ставит подпись
   аккурат над кружком. */
.ocfilter-option .noUi-handle .jv-handle-value{
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 600; line-height: 1;
  color: var(--jv-text-primary, #1a1a1a); white-space: nowrap;
  pointer-events: none; user-select: none;
}
/* числовой диапазон в названии опции убран (см. JS в category.twig); прячем и стилем,
   чтобы не мигал оранжевым до отработки скрипта */
.ocfilter-option .ocf-option-name [id^="left-value"],
.ocfilter-option .ocf-option-name [id^="right-value"]{ display: none !important; }
/* Карточка слайдера выше: подписи шкалы (числа) абсолютны и вылезали за нижний
   край карточки — добавляем место под них. :has поддерживается всеми актуальными браузерами.
   QA 29.07 (#245): место нужно только РАЗВЁРНУТОМУ блоку — в свёрнутом виде
   (.ocf-option-values.jv-collapsed → display:none) шкалы нет, а padding оставался
   и слайдерные группы были выше остальных (65px против 38px).
   #315: подписи ушли наверх — снизу остаётся только выступ ручки (6px), запас
   уменьшен с 38 до 21px ровно на столько, на сколько вырос верхний margin
   дорожки (10→27), чтобы высота карточки фильтра осталась прежней.
   #319: +5px воздуха снизу — ручка слайдера почти упиралась в край карточки. */
.ocfilter-option:has(.noUi-horizontal):not(:has(.ocf-option-values.jv-collapsed)){ padding-bottom: 26px !important; }

/* Блок выбранных фильтров: OCFilter рисует .selected-options, но jv-a11y прячет его
   содержимое как «одно значение» → оставался пустой блок с подложкой. Убираем блок,
   активные фильтры видны в H1/крошках, сброс — кнопкой «Сбросить все» в шапке. */
:is(#product-category #column-left, .ocf-offcanvas-body) .selected-options{ display: none !important; }

/* Шапка фильтров: «Сбросить все» справа напротив заголовка «Фильтры», без подложки. */
#ocfilter .panel-heading{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jv-ocf-reset{ margin-left: auto; background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--jv-primary, #E94E1B); white-space: nowrap; }
.jv-ocf-reset:hover{ color: var(--jv-primary-hover, #cf4416); }

/* Страница «Избранное» (витринная, карточки из localStorage) */
/* #109: гориз. padding 20 наслаивался на отступ родителя → крошки/заголовок
   стояли на 40px вместо общесайтовых 20px. Горизонталь в ноль, низ оставляем. */
/* QA 29.07 (#240): max-width 1880 против сайтовых 1840 → на широких экранах контент
   страницы стоял на x=20, а логотип/шапка и прочие jv-страницы — на x=40 («выравнивание
   не как на всём сайте»). Равняем ширину по .jv-portfolio.container / .ab-*.
   Верхний padding убран: вертикальный ритм задаёт .navigation-content (12px). */
.jv-fav-page.container{ width: 100%; max-width: 1840px; margin: 0 auto; padding: 0 0 60px; }
.jv-fav-page .jv-category__title h1{ margin: 6px 0 22px; }
/* подзаголовок — как .sup__lead/.ct__lead на других страницах, в одну строку */
.jv-fav__lead{ margin: 0 0 26px; font-size: 16px; line-height: 1.5; color: var(--jv-text-secondary); }
/* заголовок + «Очистить всё» справа */
.jv-fav-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.jv-fav-head #jv-fav-clear{ flex: 0 0 auto; }
/* Пустое состояние страниц «Избранное»/«Сравнение» — в стилистике 404 (#186).
   Раньше был голый абзац с кнопкой; теперь иконка + заголовок + пояснение +
   пара действий, как на .jv-404. Один компонент на обе страницы. */
.jv-emptystate{ max-width: 560px; margin: 40px auto 90px; text-align: center; }
.jv-emptystate__icon{ color: var(--jv-border-light, #D9D9D9); margin: 0 0 18px; line-height: 0; }
.jv-emptystate__icon svg{ display: inline-block; }
.jv-emptystate__title{ margin: 0 0 12px; font-size: 28px; font-weight: 800; color: var(--jv-text-primary, #171717); }
.jv-emptystate__text{ margin: 0 0 26px; font-size: 15px; line-height: 1.6; color: var(--jv-text-secondary, #303131); }
.jv-emptystate__actions{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.jv-emptystate__btn{ display: inline-flex; align-items: center; height: 46px; padding: 0 22px;
  border: 1px solid var(--jv-primary, #E94E1B); border-radius: 10px; font-weight: 600; font-size: 15px;
  color: var(--jv-primary, #E94E1B); background: transparent; text-decoration: none; transition: all .15s ease; }
.jv-emptystate__btn:hover{ background: var(--jv-primary, #E94E1B); color: #fff; text-decoration: none; }
.jv-emptystate__btn--primary{ background: var(--jv-primary, #E94E1B); color: #fff; }
.jv-emptystate__btn--primary:hover{ opacity: .9; color: #fff; }
@media (max-width: 480px){
  .jv-emptystate{ margin: 24px auto 60px; }
  .jv-emptystate__title{ font-size: 22px; }
  .jv-emptystate__actions{ flex-direction: column; }
  .jv-emptystate__btn{ justify-content: center; }
}
/* хвост старой заглушки избранного — блок теперь несёт .jv-emptystate */
.jv-fav-empty{ padding: 0; }

/* Подвал: скрыть неактивные соц-иконки (нет ссылки → aria-disabled).
   Self-correcting: добавят ссылку в настройках — иконка вернётся сама. */
.social__links a[aria-disabled="true"]{ display: none !important; }

/* ================================================================
   КАРТОЧКИ ТОВАРОВ: единый вид «Популярных» и «Новинок» (мобильный формат)
   ─────────────────────────────────────────────────────────────────
   custom.css грузится после 07-footer/08-responsive, но jw_popular.css
   грузится ПОЗЖЕ (инлайн в теле модуля) и в @media ≤360 активно двигает
   .quantity__models/.product-item__model — поэтому здесь !important.
   Заливка сердца после клика — общая для обоих модулей.
   ================================================================ */
.product__like.is-liked svg path{ fill: var(--jv-primary, #E94E1B) !important; stroke: var(--jv-primary, #E94E1B) !important; }

/* #51: на десктопе у «Популярных»/«Новинок» видима иконочная кнопка .jv-fav-alt
   (контурное сердце шрифтом uicons), а SVG .product__like скрыт. Контурный глиф
   нельзя «залить» цветом — поэтому в активном состоянии подменяем его залитым
   сердцем через CSS-маску (цвет = бренд-оранжевый). JS вешает .is-liked на саму
   кнопку (jv-scripts.js, массив HEARTS). */
.product-item__delay.jv-fav-alt.is-liked i::before{ content:"" !important; }
.product-item__delay.jv-fav-alt.is-liked i{
    display:inline-block; width:1.05em; height:1.05em; line-height:1;
    background-color: var(--jv-primary, #E94E1B);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>") center/contain no-repeat;
}

@media (max-width: 767px) {
    /* 1) Сердце-избранное: крупная кликабельная SVG-иконка вместо мелкой иконочной кнопки */
    .jw-popular-module .product-item__icons,
    .jv-latest-module .product-item__icons{ display: none !important; }

    .jw-popular-module .product-item__image .product__like,
    .jv-latest-module .product-item__image .product__like{
        display: block !important;
        top: 10px !important; right: 10px !important; left: auto !important;
        z-index: 3;
        padding: 4px; line-height: 0; cursor: pointer;
    }
    .jw-popular-module .product-item__image .product__like svg,
    .jv-latest-module .product-item__image .product__like svg{
        width: 24px !important; height: 24px !important;
    }

    /* 4) Кол-во моделей: пилюля с фоном в верхнем левом углу, шрифт крупнее */
    .jw-popular-module .quantity__models,
    .jv-latest-module .quantity__models{
        top: 10px !important; left: 10px !important; right: auto !important; bottom: auto !important;
        display: flex !important; align-items: baseline; gap: 3px;
        padding: 3px 8px !important; height: auto !important;
        background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 999px;
        box-shadow: 0 1px 4px rgba(0,0,0,.12); z-index: 3;
    }
    .jw-popular-module .quantity__models .quantity,
    .jw-popular-module .quantity__models .models,
    .jv-latest-module .quantity__models .quantity,
    .jv-latest-module .quantity__models .models{
        font-size: 10px !important; line-height: 1;
        color: var(--jv-text-primary, #000) !important; opacity: 1 !important;
    }

    /* 3) Скрыть код заказа */
    .jw-popular-module .product-item__model,
    .jv-latest-module .product-item__model{ display: none !important; }

    /* 2) Описание — 3 строки */
    .jw-popular-module .product-item__short-description,
    .jv-latest-module .product-item__short-description,
    .jv-latest-module p.product-item__short-description{
        -webkit-line-clamp: 3 !important; line-clamp: 3 !important;
        min-height: 0 !important;
    }
}

/* ==== БАННЕР «Это новый сайт JazzWay» — УДАЛЁН 02.08.2026 ====
   Была отдельная оранжевая плашка 20px над шапкой. Две служебные ленты подряд
   съедали ~55px первого экрана на мобиле (четверть до логотипа). Ссылка возврата
   переехала в ленту фидбэка — .jw-bug-banner__btn, см. блок JW-FEEDBACK ниже. */

/* ==== Мобильное меню (ряд «Главная / Каталог / О компании …») — скрыть на адаптивах.
   Перебивает ре-показ .top-menu__wrapper на ≤991 (правила «8-стадийного сворачивания»
   выше re-enable'ят его для стека). В конце файла + !important = выигрывает по каскаду. ==== */
@media (max-width: 991px) {
    .top-menu__wrapper { display: none !important; }
}

/* =========================================================================
   ГЛАВНАЯ · ТИПОГРАФИЧЕСКАЯ СИСТЕМА (5 стилей) — 2026-07-23
   Сводит разнобой кеглей/весов блоков главной к 5 ролям одной гарнитуры
   TT Norms Pro. Скоуп — только главная (#common-home) и только десктоп
   (≥1200px): мобильные/планшетные брейкпоинты модулей НЕ затрагиваются,
   шапка и подвал НЕ затрагиваются. Полностью обратимо (удалить блок).
   Роли: Display 56/600 · H2 36/600 · H3 20/500 · Body 16/400 · Small 13/500·400
   ========================================================================= */
@media (min-width: 1200px) {

  /* — 1 · Display — заголовок баннера «Честная позиция» — */
  #common-home .jvb__title { font-size: 56px; font-weight: 600; line-height: 1.05; }

  /* — 2 · Заголовок секции (H2): «Каталог продукции», «Популярные товары»,
        новости, плитки-промо — единый размер вместо 44/34/32/30/26 — */
  /* #313: !important — иначе «умеренная типографика» модуля (28px с !important,
     см. @media(min-width:601px) выше, она нужна на карточке товара, где секции
     не должны спорить с H1) оставляла «Популярные товары» мельче соседей.
     На главной H1 нет, секции равны между собой. */
  #common-home .jv-showcase__title,
  #common-home .jw-popular__title,
  #common-home .jvnews__top-title { font-size: 36px !important; font-weight: 600; line-height: 1.12; letter-spacing: normal; /* #27: без межбуквенного интервала */ }
  /* фидбек #31: 36px в промо-плитках был велик — контент не помещался в 232px и CTA
     «Перейти в раздел» прилипал к нижнему краю (2px). Уменьшаем заголовок. */
  #common-home .jv-promo-blocks .promo-list-item h3 {
    font-size: 24px !important; font-weight: 600 !important; line-height: 1.15 !important; margin-bottom: 10px !important; }
  /* CTA — воздух снизу и симметричные вертикальные отступы карточки */
  #common-home .jv-promo-blocks .promo-list-item {
    padding-top: 20px !important; padding-bottom: 22px !important; }
  #common-home .jv-promo-blocks .promo-list-item .promo-cta { margin-bottom: 0 !important; }

  /* — 3 · Подзаголовок / название карточки (H3) — */
  #common-home .jv-showcase__card-name,
  #common-home .jw-popular-module .product-item__heading { font-size: 20px; font-weight: 500; line-height: 1.25; }
  #common-home .jw-popular-module .product-item__title--name { font-weight: 500; }
  #common-home .jvsub__modal-title { font-size: 20px; font-weight: 600; }
  /* JW-FEEDBACK #257: в блоке «Новинки» название карточки было 26px — заметно
     крупнее, чем в «Популярных товарах» на той же странице. Равняем на популярные. */
  #common-home .jv-latest-module .product-item__heading,
  #common-home .jv-latest-module .product-item__title--name .product-item__heading span {
    font-size: 20px !important; font-weight: 500; line-height: 1.25;
  }
  #common-home .jv-latest-module .product-item__title--name { font-weight: 500; }

  /* — 4 · Основной текст (body) — вместо 23/19/16/15/14 — */
  #common-home .jv-promo-blocks .promo-list-item p { font-size: 16px !important; font-weight: 400; line-height: 1.5; }
  #common-home .jw-popular-module .product-item__short-description,
  #common-home .jvsub__text,
  #common-home .jvb__description { font-size: 16px; font-weight: 400; line-height: 1.5; }

  /* — 5 · Кнопки / мелкое / мета — */
  #common-home .jv-promo-blocks .promo-list-item a { font-size: 13px !important; font-weight: 500; }
  #common-home .jv-showcase__more-btn,
  #common-home .jw-popular-module .product-item__button-link,
  #common-home .jvnews__top-button,
  #common-home .jvsub__btn { font-size: 13px; font-weight: 500; }
  #common-home .jw-popular__count,
  #common-home .jw-popular__filter-btn,
  #common-home .jvnews__item .date { font-size: 13px; font-weight: 400; }
}
/* QA 29.07 (#231): Display-заголовок баннера «Честная позиция» — 56px берётся
   с 1200px, но на 1200–1439 колонка контента всего ~544px: заголовок уходил
   в 4 строки и вылезал за нижний край блока (scrollHeight 299 > 294).
   Ступень для узкого десктопа; ≥1440 остаётся 56px. */
@media (min-width: 1200px) and (max-width: 1439px) {
  #common-home .jvb__title { font-size: 38px; line-height: 1.1; }
}
/* ===== /ГЛАВНАЯ · ТИПОГРАФИЧЕСКАЯ СИСТЕМА ===== */

/* ==== JW-FEEDBACK (временный внутренний модуль сбора багов) — START ==== */
.jw-bug-banner {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;               /* тоньше прежних 60px, но не впритык: +4px воздуха сверху и снизу */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #14181f;            /* тёмный акцент, контраст с оранжевой лентой */
    color: #fff;
    font-size: 13px;
    line-height: 1.3;
    padding: 10px 44px;   /* +4px по вертикали: с 6px кнопки сидели вплотную к краям */
    text-align: center;
    z-index: 6;
}
.jw-bug-banner__text { opacity: .92; }
.jw-bug-banner__btn {
    flex: none;
    display: inline-block;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--jv-primary, #E94E1B);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 15px;
    cursor: pointer;
    transition: opacity .15s ease;
}
.jw-bug-banner__btn:hover { opacity: .88; }
.jw-bug-banner__btn,
.jw-bug-banner__btn:hover,
.jw-bug-banner__btn:focus { color: #fff; text-decoration: none; }
.jw-bug-banner__btn-short { display: none; }
/* «Заметили ошибку?» — вторичная кнопка: обводка и серый, чтобы не спорить с
   оранжевой «Вернуться на старый сайт». Габариты те же, отличается только окраска. */
.jw-bug-banner__btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .38);
    color: #c8cfd8;
    font-weight: 500;
    transition: border-color .15s ease, color .15s ease;
}
.jw-bug-banner__btn--ghost:hover,
.jw-bug-banner__btn--ghost:focus {
    opacity: 1;
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}
.jw-bug-banner__close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
}
.jw-bug-banner__close:hover { opacity: 1; }
.jw-bug-closed .jw-bug-banner { display: none; }

/* режим прицела */
body.jw-fb-picking,
body.jw-fb-picking * { cursor: crosshair !important; }
.jw-fb-highlight {
    position: fixed;
    z-index: 2147483000;
    pointer-events: none;
    border: 2px solid var(--jv-primary, #E94E1B);
    background: rgba(233, 78, 27, .12);
    border-radius: 3px;
    transition: all .04s linear;
}
.jw-bug-banner.is-picking { background: #23303f; }
.jw-bug-banner.is-picking .jw-bug-banner__btn { display: none; }

/* пин в точке клика */
.jw-fb-pin {
    position: absolute;
    z-index: 2147483001;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50% 50% 50% 0;
    background: var(--jv-primary, #E94E1B);
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    pointer-events: none;
}

/* модалка */
.jw-fb-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483002;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.jw-fb-modal {
    box-sizing: border-box;
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
    font-size: 14px;
    color: #14181f;
}
.jw-fb-modal__title { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.jw-fb-modal__where {
    font-size: 12px;
    color: #64707d;
    background: #f3f5f7;
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 12px;
    word-break: break-all;
}
/* ФИО отправителя — необязательное поле над текстом замечания */
.jw-fb-modal__who {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #d3dae1;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
    font: inherit;
}
.jw-fb-modal__who:focus,
.jw-fb-modal__ta:focus { outline: none; border-color: var(--jv-primary, #E94E1B); }
.jw-fb-modal__ta {
    box-sizing: border-box;
    width: 100%;
    min-height: 96px;
    resize: vertical;
    border: 1px solid #d3dae1;
    border-radius: 6px;
    padding: 8px 10px;
    font: inherit;
}
.jw-fb-modal__ta.is-error { border-color: #d0342c; }
.jw-fb-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}
.jw-fb-modal__btn {
    border: 0;
    border-radius: 6px;
    padding: 9px 16px;
    font-weight: 600;
    cursor: pointer;
}
.jw-fb-modal__btn--send { background: var(--jv-primary, #E94E1B); color: #fff; }
.jw-fb-modal__btn--send[disabled] { opacity: .55; cursor: default; }
.jw-fb-modal__btn--cancel { background: #eceff2; color: #14181f; }

/* тост */
.jw-fb-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 2147483003;
    background: #14181f;
    color: #fff;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.jw-fb-toast--err { background: #d0342c; }

/* 640–1023: места хватает на одну строку, но впритык — при штатных отступах
   44px элементам не хватало пары пикселей и лента срывалась в две строки (86px).
   Поджимаем поля и просветы, подписи оставляем полными. */
@media (min-width: 640px) and (max-width: 1023px) {
    .jw-bug-banner { padding: 10px 24px; gap: 10px; }
    .jw-bug-banner__btn { padding: 6px 12px; }
    .jw-bug-banner__close { right: 6px; }
}

@media (max-width: 639px) {
    /* ровно ДВЕ строки: подпись сверху, обе кнопки под ней. Граница 600px не
       случайна: элементам в строку нужно 553px, при полях 24px это 601px вьюпорта —
       ровно впритык, без запаса на округление, поэтому граница отодвинута до 640
       (запас ~39px). Ниже лента срывалась в перенос и вырастала до 82px. Подпись занимает всю
       ширину (flex-basis 100%) и держится в одну строку — без nowrap она рвётся
       на четыре при 320px и лента вырастает до 85px. Кнопки берут короткие подписи. */
    .jw-bug-banner {
        font-size: 11px;
        padding: 6px 24px;   /* симметрично: крестик лежит поверх, кнопки остаются по центру */
        gap: 5px;
        min-height: 0;
    }
    .jw-bug-banner__text {
        flex: 0 0 100%;
        white-space: nowrap;
        text-align: center;
    }
    .jw-bug-banner__btn { font-size: 11px; padding: 4px 10px; }
    .jw-bug-banner__btn-full { display: none; }
    .jw-bug-banner__btn-short { display: inline; }
    .jw-bug-banner__close { right: 4px; width: 22px; height: 22px; font-size: 17px; }
}
/* ==== JW-FEEDBACK — END ==== */

/* ==== FOOTER-2026-07-23 — правки футера (компания/каталог/соцсети) — START ==== */

/* (4) Телефон и e-mail — цветом основного текста, как название компании */
.footer__top-left .contact a { color: var(--jv-text-primary); }

/* (5–7) Убран блок «Навигация»: «Каталог» занимает освободившееся место,
   гарантированный отступ от формы справа */
.footer__top { gap: 40px; }
.footer__top-center { flex: 1 1 auto; min-width: 0; }
.footer__top-center .wrapper__links--catalog { width: 100%; box-sizing: border-box; }

/* Левая колонка: прижимаем контакты вверх (без вертикального «разгона» на всю
   высоту карточки) и ограничиваем ширину, чтобы адрес переносился компактно */
.footer__top-left { justify-content: flex-start; max-width: 340px; }

/* Каталог: multicol вместо grid — колонки равномерно заполняют карточку, а
   двухстрочные пункты НЕ раздувают соседние (нет «сцепки строк», как в grid).
   3 колонки по умолчанию, 4 — на широких экранах. */
.footer__top-center .wrapper__links--catalog .content {
    display: block;
    column-count: 3;
    column-gap: 40px;
}
.footer__top-center .wrapper__links--catalog .content a {
    display: block;
    margin-bottom: 13px;
    line-height: 120%;
    break-inside: avoid;
}
.footer__top-center .wrapper__links--catalog .content a:last-child { margin-bottom: 0; }
@media (min-width: 1600px) {
    .footer__top-center .wrapper__links--catalog .content { column-count: 4; }
}

/* (9–10) Соцсети-кнопки: единый стиль + отклик на наведение */
.footer__top-rigth .social__links a {
    display: inline-flex;
    align-items: center;
    transition: opacity .15s ease, transform .15s ease;
}
.footer__top-rigth .social__links a:hover { opacity: .82; transform: translateY(-1px); }

@media (max-width: 767px) {
    .footer__top-left { max-width: none; }
    .footer__top-center .wrapper__links--catalog .content { column-count: 2; column-gap: 16px; }
    .footer__top-center .wrapper__links--catalog .content a { margin-bottom: 10px; }
}
@media (max-width: 480px) {
    .footer__top-center .wrapper__links--catalog .content { column-count: 1; }
}

/* Фидбек #42/#43: вертикальный стек включался только ≤500, поэтому на промежуточных
   ширинах (~574) футер оставался горизонтальным 3-колоночным (левая колонка и
   «Каталог» жались в ряд), а строка копирайта не переносилась. Стекуем 501–767. */
@media (min-width: 501px) and (max-width: 767px) {
    .footer__top { flex-direction: column; gap: 28px; }
    .footer__top-left,
    .footer__top-center { width: 100%; max-width: none; }
    /* #214: копирайт и ссылки политики шли столбиком в 4 строки — на этих
       ширинах места хватает на 2 строки, раскладываем в ряд с переносом */
    .footer__descr { flex-direction: row; flex-wrap: wrap; align-items: baseline;
        justify-content: flex-start; column-gap: 20px; row-gap: 8px; }
}

/* #213: блок «Каталог» в подвале был сдвинут вправо относительно остальных
   колонок (margin-left 15px у .footer__top-center + внутренний padding 14px
   у .wrapper__links) — на стекнутом подвале это читается как кривое
   выравнивание. Ставим все колонки на общую левую линию. */
@media (max-width: 767px) {
    .footer__content .footer__top-center { margin-left: 0 !important; }
    .footer__content .wrapper__links { padding-left: 0 !important; padding-right: 0 !important; }
    /* QA 29.07 (#225): белая подложка со скруглением у колонок ссылок
       (07-footer.css: .footer__top-center .wrapper__links — background #fff
       + border-radius 20px) на мобилке читается как лишняя «плашка».
       Подвал и так светлый — убираем подложку. */
    .footer__content .wrapper__links {
        background: transparent !important;
        border-radius: 0 !important;
    }
}
/* ==== FOOTER-2026-07-23 — END ==== */

/* ==== JW-FEEDBACK v2 (липкость, подсказка, кнопка подвала, рубильник) — START ==== */

/* липкая лента + «тоньше» при прокрутке */
.jw-bug-banner {
    position: sticky;   /* было relative — теперь прилипает к верху */
    top: 0;
    z-index: 1200;
    transition: min-height .18s ease, padding .18s ease, font-size .18s ease;
}
.jw-bug-banner.is-stuck {
    min-height: 34px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 13px;
    gap: 10px;
}
.jw-bug-banner.is-stuck .jw-bug-banner__btn { padding: 5px 14px; font-size: 12px; }
.jw-bug-banner.is-stuck .jw-bug-banner__close { width: 24px; height: 24px; font-size: 18px; }

/* смещаем фикс-шапку темы вниз на высоту тонкой ленты, чтобы не перекрывала (десктоп) */
@media (min-width: 992px) {
    html.jw-stuck .sticky .top-header { top: 34px; }
}

/* #514: компенсация под фикс-шапку. Раньше здесь стояли фиксированные 185px (тема)
   и 174px (со «стуканутой» лентой), а реальная высота шапки в потоке — 157px:
   в момент залипания контент уезжал вниз на 28px, при утоньшении ленты — обратно
   на 11px. Отсюда «рывки и отступы». Высоту меряет скрипт шапки и кладёт в
   --jw-header-h; число в fallback — только на случай, если JS не отработал.
   Только ≥992: ниже у темы своя мобильная архитектура шапки (.top-panel__thead
   фиксируется, остальное паркуется за экран — см. NOTES), там компенсация другая
   и трогать её этой правкой нельзя. */
@media (min-width: 992px) {
    .site-main.sticky { padding-top: var(--jw-header-h, 185px) !important; }
}

/* плавающая подсказка режима указания (работает и когда лента скрыта / запуск из подвала) */
.jw-fb-hint {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483004;
    background: #14181f;
    color: #fff;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
    pointer-events: none;
    white-space: nowrap;
}

/* кнопка «Нашли ошибку на сайте?» в подвале — как ссылка-сосед, но с курсором */
.footer__descr .jw-fb-open {
    cursor: pointer;
    text-decoration: none;
}
.footer__descr .jw-fb-open:hover { text-decoration: underline; }

/* ==== JW-FEEDBACK · РУБИЛЬНИК быстрого скрытия ==== */
/* Чтобы мгновенно спрятать — сними обрамляющие слэш-звёздочки у нужной строки: */
/* .jw-bug-banner    { display: none !important; } */    /* липкая лента фидбека (кнопка в подвале останется) */
/* Оранжевой плашки «старый сайт» больше нет — ссылка возврата живёт внутри ленты
   фидбэка (кнопка .jw-bug-banner__btn) и уедет вместе с ней. */

/* ==== JW-FEEDBACK v2 — END ==== */

/* ============================================================
   #32 — БУРГЕР-МЕНЮ (десктоп: при коллизии пунктов 992–1199)
   Кнопка-бургер уже есть в разметке (.custom__burger-menu-button справа от
   «Где купить»). Здесь: чёрный квадрат + показ в зоне коллизии (класс
   html.jw-burger-on ставит JS в header.twig) + выезжающая панель jw-bd.
   В зоне 992–1199 правый блок меню (Регистрация/Калькулятор) и так был скрыт
   темой — панель возвращает к ним доступ (полное меню + лого + адрес/телефон).
   ============================================================ */
/* кнопка-бургер по умолчанию скрыта; свой класс jw-burger-btn (НЕ catalog/burger-menu),
   чтобы core-JS темы не вешал на неё открытие каталог-сайдменю */
.jw-burger-btn { display: none; }
html.jw-burger-on .header__button-menu-right { display: inline-flex !important; align-items: center; }
/* QA 29.07 (#228): бургер без заливки — оранжевая обводка и оранжевые линии
   (было: чёрная плашка #1a1a1a с белыми линиями). */
html.jw-burger-on .jw-burger-btn {
  display: flex !important; align-items: center; justify-content: center;
  width: 52px; height: 52px; min-width: 52px; padding: 0 !important; gap: 0 !important;
  background: transparent !important; border: 1.5px solid var(--jv-primary, #E94E1B) !important;
  border-radius: 12px !important; cursor: pointer;
}
html.jw-burger-on .jw-burger-btn:hover { opacity: .88 !important; }
html.jw-burger-on .jw-burger-btn .burger-lines { position: relative; width: 24px; height: 15px; margin: 0; }
html.jw-burger-on .jw-burger-btn .custom__burger-line { background: var(--jv-primary, #E94E1B) !important; height: 2.5px !important; }
/* в зоне бургера прячем горизонтальный ряд-меню целиком */
html.jw-burger-on .top-menu__wrapper { display: none !important; }

/* выезжающая панель */
.jw-bd-ov { position: fixed; inset: 0; background: rgba(20,20,20,.45); opacity: 0; visibility: hidden;
  transition: opacity .25s ease; z-index: 3000; }
.jw-bd-ov.open { opacity: 1; visibility: visible; }
.jw-bd { position: fixed; top: 0; right: 0; height: 100%; width: 340px; max-width: 88vw; background: #fff;
  z-index: 3001; transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0,0,0,.15); }
.jw-bd.open { transform: none; }
.jw-bd__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 14px; border-bottom: 1px solid #eee; }
.jw-bd__logo { height: 36px; width: auto; }
.jw-bd__close { width: 40px; height: 40px; border: none; background: #f2f3f6; border-radius: 10px;
  font-size: 22px; line-height: 1; cursor: pointer; color: #333; }
.jw-bd__nav { flex: 1; overflow-y: auto; padding: 6px 0; }
.jw-bd__nav a { display: block; padding: 13px 22px; color: #171717; text-decoration: none; font-size: 16px; font-weight: 500; border-bottom: 1px solid #f4f4f4; }
.jw-bd__nav a:hover { background: #f7f8fa; color: #E94E1B; }
.jw-bd__foot { padding: 16px 22px 22px; border-top: 1px solid #eee; }
.jw-bd__addr { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: #777; }
.jw-bd__tel { font-size: 18px; font-weight: 700; color: #171717; text-decoration: none; }
body.jw-bd-open { overflow: hidden; }

/* Мобилка (<992): бургер рядом справа от кнопки «Каталог» (JS переносит его в ряд лого,
   ставит html.jw-burger-mobile). В прилипающем меню (.site-main.sticky) — не нужен. */
@media (max-width: 991px) {
  html.jw-burger-mobile .top-panel__cols.top-panel__left { justify-content: flex-end !important; column-gap: 10px; }
  html.jw-burger-mobile .top-panel__cols.top-panel__left .top-panel__logo { margin-right: auto !important; }
  /* #228: тот же вид, что и на десктопе — без заливки, оранжевый контур */
  html.jw-burger-mobile .jw-burger-btn {
    display: flex !important; order: 2; align-items: center; justify-content: center;
    width: 56px; height: 56px; min-width: 56px; flex: 0 0 auto; padding: 0 !important;
    background: transparent !important; border: 1.5px solid var(--jv-primary, #E94E1B) !important;
    border-radius: 12px !important; cursor: pointer;
  }
  html.jw-burger-mobile .jw-burger-btn .burger-lines { position: relative; width: 24px; height: 15px; margin: 0; }
  html.jw-burger-mobile .jw-burger-btn .custom__burger-line { background: var(--jv-primary, #E94E1B) !important; height: 2.5px !important; }
  /* в липком меню бургер не нужен (просьба клиента) */
  .site-main.sticky .jw-burger-btn { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Фидбэк #71/#72/#75/#100/#101/#102: геометрия шапки (проверено визуально
   на 1710/1176/829/600/375). Не трогать без скриншотов всех брейкпоинтов.
   ═══════════════════════════════════════════════════════════════════════════ */
/* #72: подписи под иконками (Сравнение/Избранное/корзина) — убрать padding-top
   4px из default.css; зазор иконка↔текст оставляет единый margin-top 8px */
.mini-cart > a .top-panel__title { padding-top: 0 !important; }
/* #101/#102: зазор между «Где купить» и бургером в зоне 992–1199 */
html.jw-burger-on .header__button-menu-right { margin-left: 14px !important; }
/* #75: паддинги ряда лого/поиска 16 → 8 — правится по месту в блоке
   «Фидбек #36/#56» (~4249): тот селектор специфичнее (0,3,2), сюда не дублируем */
/* #71: липкая шапка плотнее — pt 0 / pb 2, без верхнего margin (было 101px → 63px).
   Специфичность (0,4,0) бьёт правило ≥870 выше — паддинги липкой не унаследуются */
.site-main.sticky .top-panel__cols.header-middle {
  /* #156/#157: чуть воздуха вокруг ряда каталога/поиска в липкой шапке */
  padding-top: 2px !important; padding-bottom: 6px !important; margin-top: 0 !important;
}
/* #100/#128/#133: размеры и позиция бургера по диапазонам.
   768–1199 — бургер справа в своём контейнере (jw-burger-on, #133 «не прыгает
   налево»); высота = кнопке «Каталог»: 870+ обе 52 (дефолт), 768–869 обе 40.
   <541 — бургер в левом ряду у «Каталога» (jw-burger-mobile), #128: обе кнопки
   усреднены к 48px (был каталог 40–56 против бургера 56). */
@media (min-width: 541px) and (max-width: 869px){
  html.jw-burger-on .jw-burger-btn {
    width: 40px !important; height: 40px !important; min-width: 40px !important;
  }
  html.jw-burger-on .jw-burger-btn .burger-lines { width: 20px !important; height: 13px !important; }
}
/* #137: 541–991 ряд лого/каталог/поиск ужимается, бургер не вылезает за край
   (thead был фикс-ширины 100% и выталкивал контейнер бургера за viewport) */
@media (min-width: 541px) and (max-width: 991px){
  html.jw-burger-on .top-panel__cols.header-middle > .top-panel__thead {
    flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important;
  }
  html.jw-burger-on .header__button-menu-right { flex: 0 0 auto !important; }
}
@media (max-width: 540px){
  html.jw-burger-mobile .jw-burger-btn {
    width: 48px !important; height: 48px !important; min-width: 48px !important;
    align-self: center;
  }
  html.jw-burger-mobile .jw-burger-btn .burger-lines { width: 22px !important; height: 14px !important; }
  html.jw-burger-mobile .top-panel__btn-catalog.mobile .catalog-button {
    height: 48px !important; min-height: 48px !important; max-height: 48px !important;
  }
}

/* #97: активный вид перехваченных кнопок «В избранное» (страница товара) —
   свой класс .jv-fav-adopt ставит jv-scripts.js, срывая старый wishlist.add */
.jv-fav-adopt.is-liked svg path { fill: var(--jv-primary, #E94E1B) !important; stroke: var(--jv-primary, #E94E1B) !important; }

/* #480: «В сравнение» после добавления — оранжевая, как сердечко избранного.
   Иконка-«весы» строковая (штрихи без заливки) → красим только stroke; у
   font-иконочных вариантов (fi) — color. Класс .jv-comp-adopt ставит
   jv-scripts.js, onclick с серверным compare.add остаётся жить. */
.jv-comp-adopt.is-added svg path { stroke: var(--jv-primary, #E94E1B) !important; }
.jv-comp-adopt.is-added, .jv-comp-adopt.is-added i { color: var(--jv-primary, #E94E1B) !important; }

/* #108: панель действий на «Избранном» (экспорт PDF/Excel + очистить) */
.jv-fav-head__actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* JS прячет блок через [hidden], но display:flex выше по силе, чем встроенный
   [hidden]{display:none} → на пустом «Избранном» кнопка «Скачать» оставалась видимой
   и выгружала пустой файл. Возвращаем атрибуту силу. */
.jv-fav-head__actions[hidden]{ display: none !important; }
.jv-fav-head__actions .jw-btn{ height: 40px; padding: 0 16px; font-size: 13px; }

/* #130: страницы «Информация» (политики и т.п.) — читабельная вёрстка:
   мера ~860px, ритм заголовков/абзацев/списков в токенах сайта */
/* #332/#333: текст политики стоял на x=10, а логотип, крошки и вся сетка
   сайта — на x=20: страница «съезжала» влево на 10px. Колонке вернули
   горизонтальные отступы (их обнулял общий сброс #content), теперь левая
   кромка совпадает с общесайтовой линией. */
#information-information #content { max-width: 860px; padding: 0 10px 48px; }
#information-information #content h1 { margin: 6px 0 22px; }
#information-information #content h2 { font-size: 20px; font-weight: 700; margin: 28px 0 10px; color: var(--jv-text-primary, #171717); }
#information-information #content p { font-size: 15px; line-height: 1.6; color: var(--jv-text-secondary, #303131); margin: 0 0 12px; }
#information-information #content ul,
#information-information #content ol { padding-left: 22px; margin: 0 0 14px; }
#information-information #content li { font-size: 15px; line-height: 1.6; color: var(--jv-text-secondary, #303131); margin-bottom: 6px; }
#information-information #content a { color: var(--jv-primary, #E94E1B); }

/* #135: пуш-тост (добавлено в сравнение/избранное/корзину) — правый нижний угол.
   Тема анимировала top (слайд сверху) — переводим на fixed bottom + fade;
   инлайновый top от JS темы перебивается top:auto !important. */
.alert.alert-cart, .alert.alert-comp, .alert.alert-wish {
  position: fixed !important; top: auto !important; bottom: 24px !important;
  right: 20px !important; left: auto !important;
  transition: opacity .32s ease !important;
}

/* #136: дропдаун «Скачать» (экспорт PDF/Excel) */
.jv-dl { position: relative; display: inline-flex; }
.jv-dl__btn { display: inline-flex; align-items: center; gap: 6px; }
.jv-dl__btn svg { transition: transform .2s ease; }
.jv-dl.is-open .jv-dl__btn svg { transform: rotate(180deg); }
.jv-dl__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px;
  background: #fff; border: 1px solid #e5e5e5; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 6px; display: none; z-index: 60; }
.jv-dl.is-open .jv-dl__menu { display: block; }
.jv-dl__menu a { display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--jv-text-primary, #171717); font-size: 14px; font-weight: 500; text-decoration: none; }
.jv-dl__menu a:hover { background: #f5f6f8; color: var(--jv-primary, #E94E1B); text-decoration: none; }

/* #139: экшены «Избранного» на узких экранах — не теснятся, свободный ряд.
   #366/#368: ряд вернули на строку заголовка — «поставить напротив заголовка
   справа в одну строчку». Отдельная строка съедала 60px по высоте ради одной
   кнопки, а заголовок «Избранное» (158px) и «Скачать» (110px) свободно
   помещаются рядом даже на 385px. */
@media (max-width: 700px) {
  .jv-fav-head { row-gap: 10px; align-items: center; flex-wrap: nowrap; }
  .jv-fav-head h1 { min-width: 0; }
  .jv-fav-head__actions { width: auto; flex: 0 0 auto; justify-content: flex-end; }
}

/* QA 29.07 (#226): на «Избранном» вместо дропдауна PDF/Excel — одна кнопка
   прямого скачивания Excel с иконкой формата. */
.jv-fav-dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.jv-fav-dl:hover { text-decoration: none; }
.jv-fav-dl__icon { flex: 0 0 auto; }
/* на мобилке ряд экшенов прижимаем вправо — при выравнивании влево
   кнопка упиралась в край и обрезалась */
@media (max-width: 700px) {
  .jv-fav-head__actions { justify-content: flex-end; }
}

/* #143: страница 404 — стилистика сайта, возврат на главную */
.jv-404 { max-width: 560px; margin: 40px auto 90px; text-align: center; }
.jv-404__code { font-size: 96px; font-weight: 800; line-height: 1; letter-spacing: -.03em;
  color: var(--jv-primary, #E94E1B); margin-bottom: 14px; }
.jv-404__title { margin: 0 0 12px; font-size: 28px; }
.jv-404__text { margin: 0 0 26px; font-size: 15px; line-height: 1.6; color: var(--jv-text-secondary, #303131); }
.jv-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.jv-404__btn { display: inline-flex; align-items: center; height: 46px; padding: 0 22px;
  border: 1.5px solid var(--jv-primary, #E94E1B); border-radius: 12px; font-size: 14px; font-weight: 600;
  color: var(--jv-primary, #E94E1B); background: #fff; text-decoration: none; transition: background .2s, color .2s; }
.jv-404__btn:hover { background: var(--jv-primary, #E94E1B); color: #fff; text-decoration: none; }
.jv-404__btn--primary { background: var(--jv-primary, #E94E1B); color: #fff; }
.jv-404__btn--primary:hover { background: var(--jv-primary-hover, #d1410f); border-color: var(--jv-primary-hover, #d1410f); }

/* 404: поиск и список разделов. Человек попадает сюда, когда искал конкретный
   товар (снят с производства, опечатка в адресе) — отправлять его «на главную»
   значит заставить искать заново. */
.jv-404 { max-width: 640px; }
.jv-404__search { display: flex; gap: 10px; margin: 0 0 22px; }
.jv-404__search input {
  flex: 1 1 auto;
  height: 46px;
  padding: 0 18px;
  border: 1.5px solid var(--jv-border-light, #D9D9D9);
  border-radius: 12px;
  font-size: 15px;
  color: var(--jv-text-primary, #171717);
  background: #fff;
}
.jv-404__search input:focus { outline: none; border-color: var(--jv-primary, #E94E1B); }
.jv-404__search button {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 24px;
  border: none;
  border-radius: 12px;
  background: var(--jv-primary, #E94E1B);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.jv-404__search button:hover { background: var(--jv-primary-hover, #d1410f); }

/* #335/#337: разделы стоят выше кнопки «На главную», своей формы поиска на
   странице больше нет (она дублировала поиск в шапке) — линия-разделитель
   переехала с верха блока ссылок на низ: она отделяет разделы от кнопки. */
.jv-404__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  margin: 26px 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--jv-border-light, #D9D9D9);
}
.jv-404__links a {
  font-size: 14px;
  color: var(--jv-text-secondary, #303131);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.jv-404__links a:hover { color: var(--jv-primary, #E94E1B); border-bottom-color: currentColor; }

@media (max-width: 560px) {
  .jv-404__search { flex-direction: column; }
  .jv-404__search button { width: 100%; }
  .jv-404__links { gap: 10px 16px; }
}

/* #140/#141: вертикальные зазоры шапки (десктоп): у гео-строки был padding-top
   10px у .container, у ряда лого/поиска — margin-top 8px. Фидбэк: в ноль. */
@media (min-width: 870px){
  html body .top-header .header__descr .container{ padding-top: 0 !important; }
  html body .top-header .top-panel__cols.header-middle{ margin-top: 0 !important; }
}

/* ==== Шапка: равные высоты и отступы на планшетных ширинах (фидбэк 27.07) ====
   #181 «Высота бургера и кнопки каталога должны быть равны высоте поиска»:
   замерено на проде при 782px — поиск 52px, кнопка «Каталог» 44px, бургер
   (в диапазоне 541–869) 40px. Приводим всех к 52px.
   #182 «зачем-то меняется размер» на 776px — следствие того же разнобоя:
   с едиными 52px скачка на брейкпоинте больше нет.
   #194 «отступ между каталогом, поиском и бургером одинаковый» — ряд уже
   раздаёт gap:16px, но бургер выпадал из ритма своей меньшей высотой. */
@media (min-width: 541px) and (max-width: 991px) {
  html body .top-panel__btn-catalog .btn.btn-border.catalog-button {
    height: 52px !important; min-height: 52px !important; max-height: 52px !important;
  }
  html.jw-burger-on .jw-burger-btn,
  html.jw-burger-mobile .jw-burger-btn {
    width: 52px !important; height: 52px !important; min-width: 52px !important;
  }
  /* одинаковый шаг между всеми элементами ряда */
  .top-panel__col.top-panel__thead { gap: 16px; }
}

/* ==== #193/#192: контент скакал на 20px при пересечении 1360px ====
   07-footer.css в @media(max-width:1360px) обнуляет margin у .page-wrapper,
   тогда как выше 1360 он равен 20px. На 1353 vs 1370 замерено: верх хлебных
   крошек 193 против 213 — весь контент под шапкой прыгал вверх (то же самое
   пользователь описал как «прыгает меню»). Возвращаем отступ в диапазоне
   981–1360; ниже 980 обнуление осмысленное (там свои мобильные отступы). */
@media (min-width: 981px) and (max-width: 1360px) {
  .page-wrapper { margin-top: 20px !important; }
}

/* ═══════════════ QA-раунд 28.07 ═══════════════ */

/* #161: на 541–991 бургер и «Каталог» уже 52px (см. правило выше), а само поле
   поиска остаётся 46px — ряд смотрится разнокалиберным. Поднимаем поиск до 52,
   чтобы все три элемента ряда были одной высоты. */
@media (min-width: 541px) and (max-width: 991px) {
  html body .top-panel__search,
  html body .top-panel__search .input-group.jv-search-block {
    height: 52px !important; min-height: 52px !important;
  }
  html body .top-panel__search .input-group.jv-search-block input { height: 100% !important; }
}

/* #162/#163: зазоры шапки ниже 870 (правило #140/#141 висело только на ≥870):
   у гео-строки padding-top 10px, у ряда лого/поиска margin-top 10px. В ноль.
   Ниже 541 не трогаем — там своя мобильная раскладка. */
@media (min-width: 541px) and (max-width: 869px) {
  html body .top-header .header__descr .container { padding-top: 0 !important; }
  html body .top-header .top-panel__cols.header-middle { margin-top: 0 !important; }
}

/* #179/#180: строка меню на десктопе — margin-top 0, нижний отступ 4px
   (было 8/10, между рядом поиска и меню оставался лишний воздух). */
@media (min-width: 870px) {
  html body .top-menu__wrapper { margin-top: 0 !important; padding-bottom: 4px !important; }
}

/* ═══════════════ #212: скелетон загрузки ═══════════════
   Уровень B — резерв высоты рядов шапки: пока стили/шрифты не применились,
   ряды схлопывались и весь контент прыгал вверх. Просто держим их высоту.
   Уровень C — плейсхолдеры первого экрана (баннер + плитки витрины) под
   классом html.jw-skel, который jv-skeleton.js вешает только если страница
   не отрисовалась за 220 мс: на быстром канале скелетон не появляется. */

/* --- B: шапка не схлопывается --- */
@media (min-width: 870px) {
  html body .top-header .header__descr { min-height: 40px; }
  html body .top-panel__cols.header-middle { min-height: 73px; }
  html body .top-menu__wrapper { min-height: 44px; }
}
@media (min-width: 541px) and (max-width: 869px) {
  html body .top-panel__cols.header-middle { min-height: 68px; }
}

/* --- общий шиммер --- */
html.jw-skel .jw-skel-box {
  position: relative;
  overflow: hidden;
  background: #ECEDEF;
  border-radius: 12px;
}
html.jw-skel .jw-skel-box::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  animation: jwSkelSweep 1.25s infinite;
}
@keyframes jwSkelSweep { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  html.jw-skel .jw-skel-box::after,
  html.jw-skel .jvhs::before,
  html.jw-skel .jv-showcase__card::before { animation: none; }
}

/* --- C: баннер главной --- */
html.jw-skel .jvhs { position: relative; min-height: 290px; }
html.jw-skel .jvhs::before {
  content: "";
  position: absolute; inset: 0; z-index: 5;
  background: #ECEDEF;
  border-radius: 16px;
  animation: jwSkelPulse 1.4s ease-in-out infinite;
}
html.jw-skel .jvhs > * { visibility: hidden; }

/* --- C: плитки витрины каталога --- */
html.jw-skel .jv-showcase__card { position: relative; min-height: 240px; }
html.jw-skel .jv-showcase__card::before {
  content: "";
  position: absolute; inset: 0; z-index: 5;
  background: #ECEDEF;
  border-radius: 14px;
  animation: jwSkelPulse 1.4s ease-in-out infinite;
}
html.jw-skel .jv-showcase__card > * { visibility: hidden; }
@keyframes jwSkelPulse { 0%,100% { opacity: 1; } 50% { opacity: .62; } }

/* после загрузки плейсхолдеры исчезают мягко, без рывка */
html.jw-skel-done .jvhs > *,
html.jw-skel-done .jv-showcase__card > * { animation: jwSkelFade .28s ease both; }
@keyframes jwSkelFade { from { opacity: 0; } to { opacity: 1; } }

/* ═══════════ #218: единый заголовок страниц ═══════════
   Эталон сайта — h1 в .navigation-title: 30px / 600 / lh 1.2, margin 6 0 16,
   левый край вровень с хлебными крошками, зазор от крошек 6px.
   «Сравнение» (32px, своя обёртка), «Отрасли» (34px, отступ 20px сверху) и
   «Избранное» (700 вместо 600) из этого ритма выбивались. */
#content .jv-cmp-head h1,
.jvsol__top .jvsol__title,
.jv-fav-page .navigation-title h1 {
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
/* у «Сравнения» и «Отраслей» вертикальный ритм держит обёртка — у самого
   заголовка отступы обнуляем; на «Избранном» обёртки нет, там остаётся
   эталонный margin 6/16, иначе заголовок прилипает к хлебным крошкам */
#content .jv-cmp-head h1,
.jvsol__top .jvsol__title { margin: 0 !important; }
.jv-fav-page .navigation-title h1 { margin: 6px 0 16px !important; }
/* обёртки заголовков — тот же вертикальный ритм, что у .navigation-title h1 */
#content .jv-cmp-head { margin: 6px 0 16px !important; }
.jvsol__top { margin: 6px 0 16px !important; }
/* «Сравнение»: контент стоял на 10px левее крошек — bootstrap-ряд внутри
   .content-wrapper тянет отрицательный margin-left -10px. Обнуляем ряд целиком,
   чтобы и заголовок, и таблица встали на общую левую линию сайта. */
#product-compare .content-wrapper > .row,
#content .content-wrapper > .row:has(.jv-cmp-head) { margin-left: 0; margin-right: 0; }

/* #224: подвал на узких экранах — список «Каталог» шёл одной колонкой в два
   десятка пунктов, читался сплошняком. Разбиваем на две колонки и даём
   строкам воздух. Короткие списки (Компания, Покупателям) не трогаем. */
@media (max-width: 767px) {
  /* #414: раскладка была на grid — ячейки строки выравниваются по самому
     высокому пункту, и под однострочными («Лампы») зияла пустота в высоту
     двухстрочного соседа. Multicol, как на десктопе: строки не сцеплены. */
  .footer__content .wrapper__links--catalog .content {
    display: block;
    column-count: 2;
    column-gap: 16px;
  }
  .footer__content .wrapper__links--catalog .content a {
    display: block;
    line-height: 1.35;
    /* #343: зазор между строками — один, собственным отступом ссылки. */
    margin-bottom: 4px;
    break-inside: avoid;
  }
  .footer__content .wrapper__links--catalog .content a:last-child { margin-bottom: 0; }
}

/* Главные характеристики: строка из профиля клиента, которой нет в выгрузке 1С.
   Значение — «Не заполнен в 1С», красным, чтобы пробел данных был заметен. */
.jv-table-dots-value.jv-spec-empty {
  color: #d0342c;
  font-weight: 600;
}

/* #313: на мобилке заголовок «Популярные товары» стоял на 10px от края, а
   соседний «Каталог продукции» — на 20px (общая левая линия сайта). Двигаем
   только шапку модуля: карусель под ней остаётся во всю ширину и доезжает
   до края экрана. На десктопе обе секции и так на одной линии — не трогаем. */
@media (max-width: 600px) {
  #common-home .jw-popular__header { padding-left: 10px; }
  /* и единый кегль секционных заголовков главной: «Каталог продукции» был
     18px против 24px у «Популярных товаров» и «Новостей» — на десктопе их
     уже свела типографическая система (@media min-width:1200px выше). */
  #common-home .jv-showcase__title,
  #common-home .jw-popular__title,
  #common-home .jvnews__top-title { font-size: 24px !important; font-weight: 600; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   #326: ЕДИНАЯ ШКАЛА «ЗАГОЛОВОК + ПОДЗАГОЛОВОК» НА КОНТЕНТНЫХ СТРАНИЦАХ
   Замер по проду (h1 и первый лид, ширина 1710):
     h1  — 30px/36 везде, но отступы врозь: 6/16 (контакты, поддержка,
           портфолио, каталог, избранное), 0/0 (новости, отрасли), 6/22 (избранное)
     лид — 16px везде, а нижний отступ 20 / 22 / 26 / 30 / 34 и два
           отрицательных верхних (-12 у поддержки, -18 у регистрации проекта —
           костыли, компенсировавшие отступ h1)
   Приводим к одному ритму: h1 6/16, лид 16/1.5 с отступом 26 и без «минусов».
   Исключения намеренные:
     • «О компании» — отдельный лендинг со своей вёрсткой (hero 72px, abx-h2 34px);
     • новости (.jvnews__top-title) и отрасли (.jvsol__title) — их h1 стоит в
       одной флекс-строке с табами и кнопкой справа, вертикальные отступы там
       нулевые ПО ДЕЛУ, иначе заголовок съезжает относительно кнопок. Единый
       ритм на этих страницах держит лид.
   ═══════════════════════════════════════════════════════════════════════════ */
:is(#sup-root, #ct-root, .jv-portfolio, .jv-fav-page, #rq-root, .jvc) h1,
#product-category .jv-category__title h1 {
  margin: 6px 0 16px !important;
}
.sup__lead,
.ct__lead,
.jvnews__lead,
.jvsol__intro,
.jv-portfolio__lead,
.jv-fav__lead,
.rq__lead,
.jvc-intro {
  margin: 0 0 26px !important;
  max-width: 720px;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--jv-text-secondary);
}

/* #330: карточка «Каталог» в подвале расширена влево на 25px — между ней и
   колонкой контактов был лишний воздух, а пункты каталога тесно жались в три
   колонки. Только на широких экранах: ниже 1200px подвал перестраивается в
   одну колонку и отрицательный отступ там наехал бы на соседа. */
@media (min-width: 1200px) {
  .footer__top-center { margin-left: -25px; }
}

/* #331: поля формы в подвале были 12px, а на ширинах до 1860px размер задан в
   0.652vw — на 1710px это 11px, на 1360px и уже вовсе 8px, читать невозможно.
   Фиксируем 14px (те самые +2px к базовым 12) и снимаем vw-масштабирование. */
#jvf-footer-form-block input,
#jvf-footer-form-block textarea,
#jvf-footer-form-block select {
  font-size: 14px !important;
}
#jvf-footer-form-block input::placeholder,
#jvf-footer-form-block textarea::placeholder { font-size: 14px !important; }

/* ── Узкие экраны (<1200): воздух у линии шапки и поле поиска ───────────────
   #338: контент шапки упирался в её нижнюю границу (тень .top-header) —
   добавляем 5px снизу.
   #339: хлебные крошки начинались сразу под той же линией — 12 → 17px сверху.
   #340: в поле поиска зарезервировано 90px справа под кнопку-лупу, но на этих
   ширинах кнопка вынесена ЗА поле — резерв просто съедал текст, и он обрывался
   «белой рамкой» задолго до правого края. Возвращаем обычный отступ. */
@media (max-width: 1199px) {
  /* специфичность как у правила «единой левой линии» выше (html body …),
     иначе оно перебивает наш нижний отступ своим padding: 10px 0 */
  html body .top-panel__cols.header-middle { padding-bottom: 13px !important; }
  .catalog-product__container .navigation-content { padding-top: 17px !important; }
  .top-panel__search input[type="text"] { padding-right: 18px !important; }
}


/* ==== СКЕЛЕТОНЫ ФОТО ТОВАРА (#10, #24) ====
   Класс .jv-imgskel вешает jv-image-skeleton.js и только на те карточки, чьё
   фото ещё не загружено. Подложка живёт в ::before под изображением и гаснет
   по .jv-imgskel--done: у товаров прозрачные PNG, оставлять её под картинкой
   нельзя — просвечивала бы. */
.jv-imgskel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, #F2F3F6 30%, #E8E9ED 45%, #F2F3F6 60%);
    background-size: 300% 100%;
    animation: jv-imgskel-shimmer 1.3s ease-in-out infinite;
    opacity: 1;
    transition: opacity .25s ease;
    pointer-events: none;
}
.jv-imgskel--done::before {
    opacity: 0;
    animation: none;
}
/* Изображению НЕЛЬЗЯ ставить opacity: 0 — Chrome не грузит lazy-картинки,
   которые визуально не отображаются: скелетон висел вечно, а фото в плитке
   не появлялись вовсе. Картинка рисуется как обычно, поверх подложки, а
   подложка гаснет по --done (иначе просвечивала бы сквозь прозрачный PNG). */

@keyframes jv-imgskel-shimmer {
    0%   { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

/* ==== СКЕЛЕТОН КАРТОЧКИ НА ВРЕМЯ ОБНОВЛЕНИЯ ВЫДАЧИ (#611) ====
   Плитки-заглушки на время, пока jv-catalog-ajax.js тянет новую выдачу.
   Подложка и анимация те же, что у скелетона фото выше, — отдельного
   «языка загрузки» в каталоге не заводим.

   Габариты повторяют настоящую карточку (квадрат фото + четыре строки),
   поэтому при подмене сетка не прыгает по высоте. */
.jv-card-skeleton {
    pointer-events: none;
}
.jv-card-skeleton__img,
.jv-card-skeleton__line {
    background: linear-gradient(100deg, #F2F3F6 30%, #E8E9ED 45%, #F2F3F6 60%);
    background-size: 300% 100%;
    animation: jv-imgskel-shimmer 1.3s ease-in-out infinite;
    border-radius: 6px;
}
.jv-card-skeleton__img {
    aspect-ratio: 1 / 1;
    border-radius: var(--jv-radius-lg, 10px);
    margin-bottom: 12px;
}
.jv-card-skeleton__line {
    height: 11px;
    margin-bottom: 8px;
}

/* Пока сетка обновляется, старые карточки не должны выглядеть кликабельными. */
.jv-products-grid[aria-busy="true"] {
    cursor: progress;
}

/* Тем, кто просил не анимировать интерфейс, оставляем ровную подложку. */
@media (prefers-reduced-motion: reduce) {
    .jv-imgskel::before { animation: none; transition: none; }
}

/* ============================================================
   JV: Проекты с этим товаром — свёрнутая строка под блоком
   «Приобрести продукцию» (вариант D, стенд product_projects_stand,
   решение 07.08). Нативный <details>, компактные строки-ссылки.
   ============================================================ */
.jv-prj {
    margin-top: 16px;
    background: #fff;
    border: 1px solid var(--jv-border, #d9d9d9);
    border-radius: var(--jv-radius-xl, 15px);
    overflow: hidden;
}
.jv-prj__head {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    -webkit-tap-highlight-color: transparent;
}
.jv-prj__head::-webkit-details-marker { display: none; }
.jv-prj__avs { display: flex; flex: none; }
.jv-prj__avs img,
.jv-prj__rest {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid #fff;
    margin-left: -12px;
    background: #F2F3F6;
}
.jv-prj__avs img:first-child { margin-left: 0; }
.jv-prj__rest {
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #5b5b60;
}
.jv-prj__txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jv-prj__title { font-size: 14.5px; font-weight: 700; color: var(--jv-text, #171717); }
.jv-prj__sub {
    font-size: 12.5px; color: var(--jv-text-muted, #8b8b90);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jv-prj__chev { margin-left: auto; flex: none; color: #8b8b90; transition: transform .2s; }
.jv-prj[open] .jv-prj__chev { transform: rotate(180deg); }

.jv-prj__list {
    padding: 2px 18px 12px;
    border-top: 1px solid #eef0f3;
    /* у ходовых товаров по 20-30 проектов — простыня на пол-страницы;
       ограничиваем и скроллим внутри блока */
    max-height: 480px;
    overflow-y: auto;
}
.jv-prj__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    text-decoration: none;
    border-top: 1px solid #eef0f3;
}
.jv-prj__row:first-child { border-top: 0; }
.jv-prj__img {
    width: 52px; height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex: none;
    background: #F2F3F6;
}
.jv-prj__name {
    min-width: 0;
    font-size: 13.5px; font-weight: 600; line-height: 1.3;
    color: var(--jv-text, #171717);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.jv-prj__row:hover .jv-prj__name { color: var(--jv-accent, #E94E1B); }
.jv-prj__meta {
    margin-left: auto; flex: none;
    font-size: 12px; color: var(--jv-text-muted, #8b8b90);
    white-space: nowrap;
}
@media (max-width: 480px) {
    /* на узких экранах мету под название, иначе название сжимается в столбик */
    .jv-prj__row { flex-wrap: wrap; }
    .jv-prj__name { flex: 1 1 60%; }
    .jv-prj__meta { margin-left: 64px; flex-basis: 100%; margin-top: -4px; }
}
@media (prefers-reduced-motion: reduce) {
    .jv-prj__chev { transition: none; }
}

/* Блок проектов — отдельная ячейка hero-грида в последней колонке, под серой
   плашкой «Приобрести продукцию» (репорт 07.08: внутри плашки раскрытие
   растягивало фон галереи — у отдельной ячейки свой грид-ряд, соседей не тянет).
   -2/-1 = последняя колонка при любом их числе (3 → 2 → 1 по брейкпоинтам). */
.jv-product__hero > .jv-prj {
    grid-column: -2 / -1;
    align-self: start;
    margin-top: 0;   /* вертикаль даёт row-gap грида */
}
/* Десктоп (3 колонки): высоту первого ряда задаёт галерея, поэтому «второй ряд»
   уезжал к её низу — между плашкой покупки и блоком зияла дыра (репорт 07.08).
   Раскладываем явно: галерея и характеристики тянутся на оба ряда, покупка —
   ряд 1 третьей колонки (auto = по контенту), блок проектов — сразу под ней. */
@media (min-width: 1200px) {
    .jv-product__hero { grid-template-rows: auto 1fr; }
    .jv-product__hero #jv-block-gallery { grid-column: 1; grid-row: 1 / 3; }
    .jv-product__hero .jv-product__characteristics { grid-column: 2; grid-row: 1 / 3; }
    .jv-product__hero .jv-product__buy { grid-column: 3; grid-row: 1; }
    .jv-product__hero > .jv-prj { grid-column: 3; grid-row: 2; }
    /* при раскрытом списке соседи-спаны переходят на контентную высоту, иначе
       рост второго ряда растягивал их серые подложки (та же болячка, что и
       внутри плашки — только теперь через высоту грид-рядов) */
    .jv-product__hero:has(> .jv-prj[open]) #jv-block-gallery,
    .jv-product__hero:has(> .jv-prj[open]) .jv-product__characteristics { align-self: start; }
}

/* ==========================================================================
   #536 — согласие в форме подвала: явный чекбокс под полем вопроса
   Раньше это была пассивная приписка под кнопкой; теперь галка обязательна,
   а ссылка на политику подсвечена брендовым оранжевым.
   ========================================================================== */
.footer__form .footer__form-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* #575: отступы поменяны местами — воздух нужен над строкой согласия
     (она отбивается от поля вопроса), а не под ней. */
  margin: 10px 0 4px;
  font-size: 12px;
  line-height: 1.4;
  opacity: .85;
  cursor: pointer;
  user-select: none;
}
.footer__form .footer__form-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--jv-primary, #E94E1B);
  cursor: pointer;
}
.footer__form .footer__form-consent a {
  color: var(--jv-primary, #E94E1B);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer__form .footer__form-consent a:hover { text-decoration: none; }
/* видимый фокус на галке — она в тёмном подвале */
.footer__form .footer__form-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--jv-primary, #E94E1B);
  outline-offset: 2px;
}

/* ==========================================================================
   #545 — ховер кнопки «Каталог»
   Две болячки, обе от общего темного правила `02-forms.css .btn:hover{opacity:.8}`:
   1) кнопка выцветала (клиент: «становится бледнее, плохо выглядит на стенде»);
   2) при opacity<1 браузер поднимает элемент в отдельный композитный слой и
      растрирует заново — а кнопка стоит на дробных координатах (x≈178.24,
      w≈150.60), поэтому по шву появлялся сдвиг на пиксель, будто её
      «разламывает пополам».
   Лечим оба разом: вместо прозрачности — затемнение фона брендовым
   --jv-primary-hover, слой не создаётся, субпиксельного шва нет.
   ========================================================================== */
html body .top-panel__btn-catalog .btn.catalog-button:hover,
html body .top-panel__btn-catalog .btn.catalog-button:focus,
html body .btn.catalog-button:hover,
html body .btn.catalog-button:focus {
  opacity: 1 !important;
  background-color: var(--jv-primary-hover, #d1410f) !important;
  color: #fff !important;
}

/* Правовые страницы (Политика ПД и приложения): нумерованные пункты «N.M»
   и таблицы из документов клиента. Номер вынесен из потока текста, чтобы
   многострочный пункт держал висячую строку по левой кромке абзаца. */
#information-information #content .jw-doc-lead {
  font-size: 15px;
  font-weight: 600;
  color: var(--jv-text-primary, #171717);
  margin: 0 0 10px;
}
#information-information #content .jw-doc-item {
  padding-left: 46px;
  position: relative;
}
#information-information #content .jw-doc-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  font-weight: 600;
  color: var(--jv-text-primary, #171717);
}
/* таблица шире меры 860px — скроллим её саму, страница по горизонтали не едет */
#information-information #content .jw-doc-tablewrap {
  overflow-x: auto;
  margin: 0 0 18px;
  -webkit-overflow-scrolling: touch;
}
#information-information #content .jw-doc-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.45;
}
#information-information #content .jw-doc-table th,
#information-information #content .jw-doc-table td {
  border: 1px solid var(--jv-border, #d9d9d9);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  color: var(--jv-text-secondary, #303131);
}
#information-information #content .jw-doc-table th {
  background: var(--jv-bg-surface, #F2F3F6);
  font-weight: 600;
  color: var(--jv-text-primary, #171717);
}
@media (max-width: 600px) {
  #information-information #content .jw-doc-item { padding-left: 38px; }
  #information-information #content .jw-doc-num { width: 34px; }
}


/* ==========================================================================
   Выбранная серия в каталоге — оранжевая рамка
   Правило живёт здесь и с !important осознанно: рамку плашки выше в этом же
   файле задаёт `border: 1.5px solid var(--jv-border) !important`, и подсветка
   из jv-category.css до элемента не доезжала (box-shadow применялся, а
   border-color — нет).
   ========================================================================== */
.jv-category__series-grid .jv-series-card.is-active {
  border-color: var(--jv-primary, #E94E1B) !important;
}


/* Скрытый хвост серий. Атрибута [hidden] мало: плашке выше в этом же файле
   задан `display: flex !important`, и браузерное `[hidden]{display:none}`
   до неё не доезжает — свёрнутая сетка показывала все карточки. */
.jv-category__series-grid [hidden] {
  display: none !important;
}


/* ==========================================================================
   Единая левая кромка мобильной вёрстки (≤540)
   --------------------------------------------------------------------------
   Шапка на телефоне стоит на 16px (блок «мобильная шапка ≤540» выше в этом
   файле), а контент жил на 10px (.page-wrapper из 08-responsive.css) — на
   каталоге и вовсе на 36 (10 внешних + 6 компенсации .jv-category-page +
   20 контейнера). Из-за этого логотип/поиск и заголовки страниц стояли на
   разных вертикалях.

   Кромку задаёт единственный источник — .page-wrapper (margin 16px).
   Блоки, которые сознательно выходят на всю ширину (подвал, витрина
   категорий, новостная карусель), тянем на новую кромку отрицательным
   margin: они были рассчитаны на прежние 10px и иначе отъехали бы на 6px
   внутрь. width:auto нужен потому, что у части из них ширина зафиксирована
   под старую геометрию.

   Выше 540px шапка и контент и так стоят на 20px — там ничего не трогаем.
   ========================================================================== */
@media (max-width: 540px) {
  .page-wrapper {
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* полноширинные блоки внутри обёртки. Подвал тянем только когда он лежит
     внутри .page-wrapper (главная, каталог, контентные страницы): на карточке
     товара он висит снаружи, и безусловный -16px уводил бы его за экран. */
  .page-wrapper .site-footer,
  .jv-showcase,
  .jv-showcase__title-wrap {
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: auto !important;
    max-width: none !important;
  }
  .jv-showcase,
  .jv-showcase__title-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* у подвала свои 17px — приводим к общей кромке */
  .site-footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .site-footer__inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* карусель новостей на главной уходит только за правый край */
  .jvnews {
    margin-left: 0 !important;
    margin-right: -16px !important;
    width: auto !important;
  }
  /* заголовок «Популярные товары» держал свои 10px поверх обёртки */
  .jw-popular__header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* каталог: кромку держит .page-wrapper, свои компенсации гасим
     (6px у страницы + 20px у контейнера давали суммарные 36px) */
  .jv-category-page {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #product-category .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* карточка товара: та же компенсация под старые 10px (jv-product.css) */
  .product-content > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── Ловушка для ботов (JvFormGuard::TRAPS) ────────────────────────────────
   Общий класс: custom.css грузится на всех страницах, поэтому годится и для
   модалки карточки, и для формы подвала. Не display:none и не visibility:hidden —
   часть краулеров такие поля распознаёт и пропускает. Поле выведено за край
   экрана: в разметке обычное, для человека физически недоступно (плюс
   tabindex=-1 в шаблоне, чтобы не поймать его с клавиатуры).
   Формы, закрытые раньше, держат свои классы: .ct-trap, .jvsub__trap, .rq-trap. */
.jv-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ═══ #657: «Каталог» и поиск в шапке — как в липкой панели ═══
   На мобилке шапка и липкая панель (.jw-msticky) показывали ОДНИ И ТЕ ЖЕ две
   кнопки по-разному: в панели «Каталог» — пилюля 44px с иконкой-сеткой 18px и
   подписью, в шапке — безымянный квадрат 48×48 (подпись пряталась правилом
   ≤400px), бургер 48 против 44, лупа поиска в другом кегле. При прокрутке одна
   пара сменяла другую и читалась как другой набор кнопок.
   Приводим шапку к панели: те же 44px, тот же радиус 12, та же подпись.
   Замерено на 320px: ряд 288px (лого 134 + «Каталог» 114 + бургер 44),
   горизонтального переполнения нет. */
@media (max-width: 767px){
  html body .top-panel__cols.top-panel__left{ gap: 10px !important; }
  html body .top-panel__cols.top-panel__left .top-panel__logo img{ max-width: 168px !important; }
  html body .top-panel__btn-catalog .btn.btn-border.catalog-button,
  html.jw-burger-mobile .top-panel__btn-catalog.mobile .catalog-button{
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    width: auto !important; min-width: 0 !important;
    height: 44px !important; min-height: 44px !important; max-height: 44px !important;
    padding: 0 16px !important; border-radius: 12px !important;
  }
  /* подпись возвращаем: правило ≤400px её прятало ради квадратной иконки */
  html body .top-panel__btn-catalog .btn.btn-border.catalog-button > span{
    display: inline-block !important; padding: 0 !important;
    font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important;
    color: #fff !important; white-space: nowrap !important;
  }
  html body .top-panel__btn-catalog .btn.catalog-button .line-menu{ width: 18px !important; height: 18px !important; }
  html body .top-panel__btn-catalog .btn.catalog-button .line-menu .custom__element-miniblock{
    width: 8px !important; height: 8px !important; border-radius: 2px !important;
  }
  html.jw-burger-mobile .jw-burger-btn,
  html.jw-burger-on .jw-burger-btn{
    width: 44px !important; height: 44px !important; min-width: 44px !important;
    border-width: 2px !important; border-radius: 12px !important;
  }
  /* поиск: та же серая пилюля с полем 16px и лупой у правого края */
  html body .mobile__header-content--bottom .jv-search-block{ padding: 0 6px 0 16px !important; }
  html body .mobile__header-content--bottom .jv-search-block input[type=text]{ font-size: 16px !important; padding: 0 !important; }
  html body .mobile__header-content--bottom .search-btn{ width: 38px !important; height: 38px !important; padding: 0 !important; }
}

/* #664 (вторая часть, «шапка повторно опускается»). Скрипт шапки решает, липнуть
   ли ей, по позиции прокрутки — и на свежей странице делает это при нуле, то есть
   «не липнуть». Дальше мы программно возвращаем человека на прежнюю высоту, шапка
   видит прокрутку и въезжает своей анимацией fixed_header (0.7s) — зритель видит,
   как она опускается второй раз за переход.
   Пока идёт восстановление, анимацию гасим: шапка должна просто оказаться там, где
   и была. Класс снимается не по таймеру, а когда шапка сама выйдет из липкого
   состояния (человек прокрутил к верху) — снять его раньше значит запустить ту
   самую анимацию, которую мы и прячем: смена animation-name с none на имя
   стартует анимацию заново. */
html.jw-scroll-restore .sticky .top-header { animation: none !important; }


/* ==========================================================================
   QA-раунд 19.08 (вечер) — мобильная пачка #678–#690
   Все замечания поданы с телефона (viewport 385px), поэтому правки живут
   в мобильных медиазапросах и десктоп не трогают.
   ========================================================================== */

@media (max-width: 767px) {
  /* #688: заголовок формы обратной связи в подвале стоял по правому краю —
     единственный правый текст в колонке, где всё остальное слева. Плюс кегль
     был 12px против 14px у соседних строк подвала. */
  #jvf-footer-form-block p.title {
    text-align: left;
    font-size: 14px;
  }

  /* #686: нижняя колонка подвала — по центру, копирайт уходит последней
     строкой (в разметке он идёт первым, порядок меняем визуально). */
  .footer__descr {
    align-items: center;
    text-align: center;
  }
  .footer__descr > p { order: 1; }
}

/* #687: отступы строки согласия снова меняются местами — воздух нужен ПОД ней,
   а не над. ⚠️ Это отменяет решение #575 (там просили ровно наоборот, и в
   custom.css выше стоит соответствующий комментарий). Оставляю оба следа, чтобы
   при следующем заходе было видно: параметр уже дважды переигрывали. */
.footer__form .footer__form-consent { margin: 4px 0 10px; }

/* Последний пункт хлебных крошек — ссылка на уровень выше (JW-FEEDBACK #732,
   01.09.2026). Ссылку создаёт jv-a11y.js, здесь только вид: цвет и кегль
   наследуются от <li>, чтобы крошка выглядела ровно как прежде, а от ссылки
   осталось лишь поведение — курсор и подчёркивание при наведении. */
.breadcrumb > li > .breadcrumb-up {
  display: inline-flex; align-items: center; gap: inherit;
  color: inherit; font: inherit; text-decoration: none;
}
.breadcrumb > li > .breadcrumb-up:hover { text-decoration: underline; }
.breadcrumb > li > .breadcrumb-up:focus-visible {
  outline: 2px solid var(--jv-primary, #E94E1B); outline-offset: 2px; border-radius: 3px;
}


/* ==========================================================================
   АУДИТ 02.09 — доступность и печать (BACKLOG §18.3)
   ========================================================================== */

/* Skip-link: первая ссылка в <body> (header.twig + OCMOD-копия). Спрятана за
   экраном, появляется только по фокусу с клавиатуры — мышью её не видно. */
.jv-skip {
  position: absolute; left: 16px; top: -200px; z-index: 10000;
  padding: 10px 16px; border-radius: 8px;
  background: var(--jv-text-primary, #171717); color: #fff;
  font: 600 15px/1.2 var(--jv-font-family, sans-serif);
  text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.jv-skip:focus, .jv-skip:focus-visible {
  top: 16px; outline: 2px solid #fff; outline-offset: 2px;
}

/* Контраст текста: токен --jv-text-muted переведён на #6b6b6b (jv-variables.css),
   но часть подписей сидит на жёстком #999 с !important — крошки, подписи иконок
   шапки («Сравнение», «Избранное», «Где купить»), выпадашка городов, подзаголовок
   модалки вопроса. Проверено на /lampy 02.09: после смены токена эти остались
   rgb(153,153,153). Шкала ползунка (noUi-value, 10px) и крестик очистки поиска —
   не текст, оставлены. */
.navigation-content .breadcrumb > li > a,
.top-panel__title,
.jw-city-dropdown__item,
.jw-city-dropdown__popular-title,
.jw-ask-modal__subtitle { color: var(--jv-text-muted) !important; }

/* Печать любой страницы: раньше 01-base.css (H5BP) дописывал URL после каждой
   ссылки, а шапка/подвал/cookie-бар/липкий поиск/фильтры прятались только на
   карточке товара (jv-product-lower.css). Общее правило для всех страниц. */
@media print {
  .top-header, .site-footer, footer.site-footer, .jw-cookie, #jw-msticky,
  #jwBugBanner, .jw-bug-banner, .jw-sidemenu-panel, .jw-sidemenu-overlay,
  aside#jw-bd, .jw-burger-btn, .jv-mfilter, .jv-catalog-toolbar, .jv-sort-wrap,
  .ocfilter, #ocfilter, .jv-skip, .swiper-pagination, .jvhs__dots, .jvhs__arrow,
  .menu-mobile__informations { display: none !important; }
  a[href]:after, abbr[title]:after { content: none !important; }
  a, a:visited { text-decoration: none; color: inherit; }
  body { background: #fff !important; color: #000 !important; }
  .page-wrapper, .wrapper-middle, #content { margin: 0 !important; padding: 0 !important; width: auto !important; }
  img { max-width: 100% !important; page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }
}

/* ------------------------------------------------------------------
   #747/#748 (03.09.2026): кнопки «Смотреть все товары» у блоков главной.
   Популярные: ссылка носит класс прежней кнопки «Фильтр» (jw_popular.css),
   здесь только цвет текста и стрелка. Новинки: заголовок блока — flex,
   ссылка уходит вправо через margin-left:auto, вид как у популярных.
   ------------------------------------------------------------------ */
.jw-popular__all { text-decoration: none; color: var(--jv-text-primary, #000); }
.jw-popular__all:hover { color: var(--jv-primary, #E94E1B); border-color: var(--jv-primary, #E94E1B); text-decoration: none; }
.jw-popular__all svg { flex-shrink: 0; }
.jv-latest__head { justify-content: space-between; gap: 16px; }
.jv-latest__all {
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: auto; padding: 10px 16px;
  font-size: 14px; font-weight: 500; line-height: 1;
  color: var(--jv-text-primary, #000); text-decoration: none;
  border: 1px solid var(--jv-border, #d9d9d9); border-radius: 5px;
  transition: border-color var(--jv-transition-fast, 0.2s ease), color var(--jv-transition-fast, 0.2s ease);
}
.jv-latest__all:hover { color: var(--jv-primary, #E94E1B); border-color: var(--jv-primary, #E94E1B); text-decoration: none; }
@media (max-width: 767px) {
  .jv-latest__all, .jw-popular__all { padding: 8px 12px; font-size: 13px; }
}

/* ═══ Область нажатия мелких иконок на мобильном (03.09.2026) ═══
   Замер перед показом: «Поделиться» 18px, «В избранное»/«В сравнение» 25px,
   стрелки галереи 21px, «Подписаться» 21px, «Показать ещё» 21px — всё это
   меньше 32px, в которые целится палец, и промахи заметны именно на телефоне.

   Растим ТОЛЬКО зону нажатия, а не сам значок: рисунок остаётся прежнего
   размера, невидимый ::after добирает недостающее до 44×44. Поэтому вёрстка
   не разъезжается — псевдоэлемент вынут из потока и ничего не двигает.
   Правило живёт до 767px: на десктопе метится курсором, там 18px достаточно. */
@media (max-width: 767px) {
  .jw-share-toggle,
  .jv-fav-adopt, .jv-comp-adopt,
  .jv-product__slider-nav,
  .jw-hb__like, .jw-hb__link,
  .jvsub__btn, #jvsc-show-more {
    position: relative;
  }
  .jw-share-toggle::after,
  .jv-fav-adopt::after, .jv-comp-adopt::after,
  .jv-product__slider-nav::after,
  .jw-hb__like::after, .jw-hb__link::after,
  .jvsub__btn::after, #jvsc-show-more::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    min-width: 100%; min-height: 100%;   /* у крупных кнопок зону не сужаем */
    transform: translate(-50%, -50%);
    /* фон не рисуем и события не перехватываем у соседей: псевдоэлемент
       принадлежит самой кнопке, клик по нему считается кликом по ней */
    background: transparent;
  }
}

/* #761: подпись страны у городов СНГ в результатах поиска селектора города в шапке */
.jw-city-dropdown__item .jw-city-dropdown__country { margin-left: 8px; color: var(--jv-text-muted, #999); font-size: 12px; }