h1 {
    font-family: 'metapro-bold', arial, Helvetica, sans-serif;
    font-size: 50px;
}

h2 {
    font-family: 'metapro-bold', arial, Helvetica, sans-serif;
    font-size: 40px;
    padding: 15px 0 15px 0;
}

h3 {
    font-family: 'metapro-bold', arial, Helvetica, sans-serif;
    font-size: 30px;
    padding: 15px 15px 15px 15px;
}

h4 {
    font-family: 'metapro-bold', arial, Helvetica, sans-serif;
    font-size: 34px;
    padding: 15px 15px 15px 0;
}

h5 {
    font-family: 'metapro-bold', arial, Helvetica, sans-serif;
    font-size: 25px;
    padding: 15px 15px 15px 0;
}

h6 {
    font-family: 'metapro-bold', arial, Helvetica, sans-serif;
    font-size: 23px;
    padding: 20px 15px 20px 18px;
    font-style: oblique;
}

hr{position: relative; clear: both;}

a {
    font-family: 'ptsans-regular', Arial, Helvetica, sans-serif;
    color: #f45927;
    border-bottom: 1px solid #ffcaca;
    text-decoration: inherit;
}

h4 a:hover {
    color: #f4a427;
    border-bottom: 1px solid #ffcaca;
}

a:hover {
    color: black;
    border-bottom: none;
    text-decoration: inherit;
}

p {
    font-family: 'ptsans-regular', Arial, Helvetica, sans-serif;
    padding: 10px 0 10px 0;
    line-height: 1.5;
}

b {
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
}

iframe{width: 98%; height: 510px;}

.bold {
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif
}

.center {
    text-align: center
}

.padd {
    padding-top: 40px;
}

.padd35 {
    padding-top: 35px;
}

.padd50 {
    padding-top: 50px;
}

.padd65 {
    padding-top: 65px;
}

.topimg img {
    max-width: 100%;
}

sup {
    vertical-align: top;
    font-size: 0.6em;
}

#video h4 {
    padding: 50px 0 35px 0;
}

@font-face {
    font-family: "ptsans-regular";
    src: url("../fonts/ptsans-regular.eot");
    src: url("../fonts/ptsans-regular.woff2") format("woff2"),
    url("../fonts/ptsans-regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/ptsans-regular.woff") format("woff"),
    url("../fonts/ptsans-regular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "ptsans-bold";
    src: url("../fonts/ptsans-bold.eot");
    src: url("../fonts/ptsans-bold.woff2") format("woff2"),
    url("../fonts/ptsans-bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/ptsans-bold.woff") format("woff"),
    url("../fonts/ptsans-bold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "metapro-bold";
    src: url("../fonts/metapro-bold.eot");
    src: url("../fonts/metapro-bold.woff2") format("woff2"),
    url("../fonts/metapro-bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/metapro-bold.woff") format("woff"),
    url("../fonts/metapro-bold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "metapro-bolditalic";
    src: url("../fonts/metapro-bolditalic.eot");
    src: url("../fonts/metapro-bolditalic.woff2") format("woff2"),
    url("../fonts/metapro-bolditalic.eot?#iefix") format("embedded-opentype"),
    url("../fonts/metapro-bolditalic.woff") format("woff"),
    url("../fonts/metapro-bolditalic.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

#head {
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    background: #f7f7f7;
    z-index: 1000;
    border-bottom: 2px solid #e0e0e0;
    padding: 10px 20px;
}

.header {
    max-width: 1240px;
    min-width: 980px;
    margin: auto;
}


.logo a {
    border-bottom: none;
}

.logo a img{
    max-width: 100%;
}

.menu {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: -20px;
    width: 51%;
}
.fa {
    font-size:23px!important;
}
#menus {
}

.contact {
    display: inline-block;
    vertical-align: bottom;
    text-align: right;
}

.tel{
    text-decoration: inherit;
    color: black;
    font-family: 'ptsans-bold', Arial, Helvetica, sans-serif;
    font-size: 25px;
    border-bottom: none;
    padding: 0;
    line-height: 1;
    margin: 7px 0 10px;
}

.price {
    height: 50px;
    width: 100px;
    float: left;
}

.price img {
    padding: 15px 10px 15px 0;
    float: left;
}

.price a {
    padding: 15px 0 0 0;
    float: left;
    text-decoration: inherit;
    color: grey;
    border-bottom: 1px solid rgb(176, 176, 176);
}

.price a:hover {
    color: #f7845b;
    border-bottom: 1px solid #ffcaca;
}

.price2 {
    height: 100px;
    margin-top: 80px;
    width: 300px;
    float: left;
    margin-bottom: 200px;
}

.price2 img {
    padding: 15px 30px 15px 20px;
    float: left;
}

.price2 a {
    padding: 20px 00px 0 0;
    border-bottom: 1px solid rgb(176, 176, 176);
    float: left;
    text-decoration: inherit;
    color: black;
    font-size: 30px;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
}

.price2 a:hover {
    color: #f7845b;
    border-bottom: 1px solid #ffcaca;
}

.price3 {
    height: 40px;
    margin-top: 45px;
    width: 200px;
    float: left;
    margin-left: 40px;
    font-size: 18px;
}

.price3 img {
    float: left;
}

.price3 a {
    padding: 8px 0 0 0;
    margin-left: 15px;
    border-bottom: 1px solid rgb(176, 176, 176);
    float: left;
    text-decoration: inherit;
    color: black;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
}

.price3 a:hover {
    color: #f7845b;
    border-bottom: 1px solid #ffcaca;
}

.msg {
    width: 700px;
    float: left;
}

.msg .msg2 {
    padding: 15px 0 20px 0;
    display: none;
    max-width: 360px;
    border-radius: 3px;
    font-size: 21px;
    margin-top: 20px;
    position: relative;
}

.msg h6 {
    padding: 0;
}

.msg [type="submit"] {
    border: none;
    border-radius: 3px;
    font-size: 24px;
    background: linear-gradient(to top, #ffbe00 28%, #ffda00 100%);
    color: #000;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    padding: 15px 25px 15px 25px;
    margin-top: 10px;
}

.msg [type="submit"]:hover {
    background: #ffea00;
}

.msg [type="submit"]:active {
    background: linear-gradient(to bottom, #ffbe00 28%, #ffda00 100%);
}

a.more {
    margin: 35px 0 0 0;
    height: 43px;
    width: 284px;
    float: left;
    border-radius: 3px;
    font-size: 24px;
    color: #000;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    text-align: center;
    padding-top: 15px;
    background: linear-gradient(to top, #ffbe00 28%, #ffda00 100%);
    border-bottom: none;
}

a.more:hover {
    background: #ffea00;
}

a.more:active {
    background: linear-gradient(to bottom, #ffbe00 28%, #ffda00 100%);
}

#utils16 p {
    font-size: 16px;
    padding: 10px 0 0 0;
}

#utils18 p {
    font-size: 18px;
    padding: 10px 0 0 0;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
}

#util p {
    font-family: 'metapro-bold', arial, Helvetica, sans-serif;
    font-size: 23px;
    margin-top: 20px;
    padding: 10px 0 0 0;
}

#nav, #nav ul, #nav li {
    margin: 0;
    padding: 0;
}

#nav, #nav ul {
}

#nav {
    position: relative;
    font-size: 20px;
    font-family: 'metapro-bold', Arial, Helvetica, sans-serif;
}

#nav > li > ul {
    position: absolute;
    z-index: 5;
    left: 86px;
    padding: 15px 0;
    margin-top: 15px;
    display: none;
    background-color: white;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.3), 0 10px 10px rgba(0, 0, 0, 0.3);
}

#nav > li:hover > ul {
    display: block;
}

#nav li {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding: 0 4% 15px 3%;
}

#nav li li {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding: 0 4% 3px 3%;
}

#nav ul li {
    display: block;
    text-align: left;
}

#nav a {
    color: black;
    text-decoration: none;
    border-bottom: none;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
}

#nav .posic p {
    color: #f45927;
    text-decoration: none;
    border-bottom: none;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    padding: 0;
    line-height: 1;
}

#nav .posic2 p {
    color: #f45927;
    line-height: 1;
}

#nav ul a {
    font: 17px/36px 'ptsans-regular', arial, Helvetica, sans-serif;
}

#nav ul a:hover, #nav a:hover {
    color: #f4a427;
}

/* Подменю второго уровня (выпадает вправо) */
#nav li.has-submenu {
    position: relative;
}

#nav li.has-submenu > ul.submenu {
    display: none !important;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    padding: 10px 0;
    margin: 0;
    min-width: 260px;
    z-index: 10;
}

#nav li.has-submenu:hover > ul.submenu {
    display: block !important;
}

#nav li.has-submenu > ul.submenu > li {
    display: block;
    text-align: left;
    padding: 0;
}

#nav li.has-submenu > ul.submenu > li > a {
    display: block;
    padding: 8px 20px;
    color: #333;
    text-decoration: none;
    border-bottom: none;
    white-space: nowrap;
    font: 17px/24px 'ptsans-regular', arial, Helvetica, sans-serif;
}

#nav li.has-submenu > ul.submenu > li > a:hover {
    color: #f4a427;
    background: #f5f5f5;
}

#nav .posic.has-submenu p,
#nav .posic2.has-submenu p {
    cursor: pointer;
}


/* Стрелка ► только у пунктов второго уровня с подменю */
#nav > li > ul li.has-submenu > a::after,
#nav > li > ul li.posic.has-submenu > p::after,
#nav > li > ul li.posic2.has-submenu > p::after {
    content: ' \25BA';
    font-size: 10px;
    vertical-align: middle;
}

#content {
    max-width: 1240px;
    min-width: 980px;
    width: 100%;
    margin: auto;
    box-sizing: border-box;
    padding: 100px 20px 0;
}

#content h1 {
    width: 700px;
    float: left;
}
ul.social-icon {
    display: inline-block;
    vertical-align: middle;
}
a.first-lavel-item  {
    padding-right: 20px;
}

a.first-lavel-item.telegram {
    color: #01a7e5;
    border: none;
    padding-left: 13px;
}

.top110 {
    margin-top: 110px;
}

.top65 {
    margin-top: 65px;
}

.main img {
    width: 600px;
    float: left;
}

.cont img {
    width: 600px;
    float: left;
}

.cont h1 {
    margin-top: 80px;
    margin-bottom: 50px;
}

.left {
    width: 60%;
    float: left;
}

.left.cont p {
    padding: 10px 0 0 0;
}

.left550 {
    width: 60%;
    float: left;
}

.right {
    width: 40%;
    float: left;
    overflow: hidden;
}

#map-canvas {
    height: 400px;
    width: 100%;
}

.left2 {
    width: 60%;
    float: left;
}

.right2 {
    width: 40%;
    float: left;
}

.right2 img, .right img{
    max-width: 100%;
}

.textfull {
    width: 100%;
    float: left;
}

.textfull img{max-width: 100%;}

.textfull p {
    font-size: 17px;
}

.text {
    width: 55%;
    float: left;
}

.text p {
    font-size: 17px;
}

.text strong {
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
}

/* Отступы ужаты 06.08.2026: было padding-left 58px и margin-bottom 20px —
   списки на товарных страницах читались как разрозненные абзацы */
.text ul li {
    font-size: 17px;
    font-family: 'ptsans-regular', Arial, Helvetica, sans-serif;
    padding-left: 30px;
    margin-bottom: 7px;
    line-height: 1.5;
    position: relative;
}
.text ul li:before {
    position: absolute;
    left: 2px;
    width: 16px;
    top: 12px;
    content: "";
    height: 2px;
    background: #f45927;
}

.text1 p {
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    font-style: oblique;
    font-size: 22px;
    padding: 0;
}

.text1 hr {
    height: 70px;
    width: 4px;
    float: left;
    margin-right: 30px;
    margin-top: 20px;
    background-color: #f45927;
    border: none
}

.text2 hr {
    height: 2px;
    width: 18px;
    float: left;
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 22px;
    background-color: #f45927;
    border: none
}

.text2 p {
    margin-left: 58px;
}

.text3 hr {
    height: 100%;
    width: 4px;
    float: left;
    margin-right: 20px;
    background-color: #f45927;
    border: none;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

.text3_1 hr {
    height: 30px;
    width: 4px;
    float: left;
    margin-right: 20px;
    background-color: #f45927;
    border: none;
}

.text3_0 hr {
    height: 60px;
    width: 4px;
    float: left;
    margin-right: 20px;
    background-color: #f45927;
    border: none;
}

.text3_0 {
    padding: 30px 0 30px 0;
}

.text3_2 {
    margin-left: 60px;
    position: relative;
}

.text3_2 hr {
    height: 100%;
    width: 4px;
    float: left;
    margin-right: 30px;
    background-color: #f45927;
    border: none;
    position: absolute;
    left: 0;
}

.line{
    padding: 10px 25px;
    position: relative;
    margin-bottom: 10px;
}
.line p{
    padding: 0;
}

.line:before{
    content: '';
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #f45927;
    position: absolute;
    left: 0;
}

.text3_2 li {
    margin-bottom: 10px;
    font-size: 16px;
}

.text3_2 li:last-child{
    margin-bottom: 0;
}

.text3_2 span {
    border-bottom: 1px dotted rgb(176, 176, 176);
}

.text3_2 span:hover {
    color: #f6b652;
    border-bottom: 1px dotted #f6b652;
}

.text3 {
    margin: 30px 0 30px 0;
    position: relative;
}

.text3 p {
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    font-style: oblique;
    padding: 0;
}

#calc {
    background-color: #efefef;
    width: 98%;
    margin-top: 30px;
    margin-bottom: 45px;
    float: left;
    padding: 30px 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#calc p {
    padding: 0
}

#calc h5 {
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    padding: 0;
    margin-bottom: 20px;
}

#calc .itog_left {
    width: 55%;
    display: inline-block;
    vertical-align: middle;
}

#calc .itog_left p {
    font-size: 32px;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
}

#calc .itog_right {
    display: inline-block;
    vertical-align: middle;
    width: 44%;
}

#calc .itog_right p {
    font-size: 20px;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
}

.cleft1 {
    width: 30%;
    height: 80px;
    float: left;
}
.cleft2{
    float: left;
    width: 70%;
    text-align: justify;
}
.cleft2:after{
    content: '';
    display: inline-block;
    width: 100%;
}
.cleft2 select {
    font-size: 26px;
    border: 2px solid #c7c7c7;
    padding: 10px 10px 10px 10px;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: url("../img/subc.png") no-repeat right;
    background-position: 82px 7px;
    width: 120px;
    background-color: white;
    text-indent: 0.01px;
}

.cleft2 select::-ms-expand {
    display: none;
}

#calc .calc1 {
    width: 140px;
    float: left;
    font-size: 21px;
}

#calc .calc1_1 {
    width: 140px;
    float: left;
    font-size: 16px;
    color: #828282;
}

#calc .calc1_0 {
    width: 140px;
    float: left;
    font-size: 21px;
    margin-top: 20px;
}

#calc hr {
    height: 4px;
    width: 100%;
    float: left;
    background-color: #aeaeae;
    border: none;
}

#calc .calc-note {
    clear: both;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #d6d6d6;
    font-family: 'ptsans-regular', Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: #828282;
}

#_mass, #_area, #_run_area {
    font-size: 26px;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    border: none;
    -moz-appearance: textfield;
    display: inline-block;
    vertical-align: middle;
}

#_mass::-webkit-inner-spin-button, #_area::-webkit-inner-spin-button, #_run_area::-webkit-inner-spin-button {
    display: none;
}

#_mass,#_area, #_run_area {
    width: 50%;
}

#rovn {
    display: inline-block;
    vertical-align: middle;
    font-size: 26px;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
}

#kg, #mkv, #mp {
    display: inline-block;
    vertical-align: middle;
    background-color: white;
    border: 2px solid #c7c7c7;
    border-radius: 2px;
    width: 26%;
    font-size: 0;
    padding: 15px 0 15px 2%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#kg p, #mkv p, #mp p {
    font-size: 21px;
    font-family: 'ptsans-regular', Arial, Helvetica, sans-serif;
    color: #828282;
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    width: 40%;
    position: relative;
}

#kg p:before, #mkv p:before, #mp p:before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: #828282;
}

#kg hr, #mkv hr, #mp hr {
    width: 1px;
    height: 45px;
    margin: 9px 14px 0 0;
}

.itog_rez {
    position: absolute;
    margin-top: 20px;
    margin-left: 300px;
}

.sidebar {
    width: 388px;
    margin-top: 0;
    float: right;
}

.sidebar h2 {
    font-family: 'metapro-bold', arial, Helvetica, sans-serif;
    font-size: 36px;
    margin-left: 26px;
    padding: 25px 0 20px 0;
}

.sidebar p {
    font-size: 19px;
    margin-left: 26px;
    padding: 0 0 15px 0;
}

.block {
    width: 380px;
    border: 4px solid #ffde00;
    margin-top: 40px;
    background-color: #fffceb;
    float: right;
}

.block._fix{
    margin-top: 0 !important;
    top: 0;
    position: fixed;
    margin-left: 0;
    float: none;
}

.box {
    border: 4px solid #ffde00;
    margin-bottom: 38px;
    width: 98%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.box p {
    padding: 0;
}

.box ul {
    padding: 15px 0 20px 0;
    display: none;
}

.box h6 {
    position: relative;
    padding-left: 60px;
    cursor: pointer;
}

.box h6:before{
    content: '';
    width: 0;
    height: 0;
    border-top: 18px solid #000000;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    position: absolute;
    top: 23px;
    left: 29px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
.box._open h6:before{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.box h6:hover span{
    color: #f6b652;
    border-bottom: 1px dotted #ffcaca;
}

.box li {
    padding: 0 15px 0 25px;
    font-size: 17px;
}
.box li:before {
    display: none;
}
.text .text {
    float: none;
}
.box span {
    border-bottom: 1px dotted rgb(176, 176, 176);
}

.box2 {
    border: 4px solid #ffde00;
    margin-bottom: 145px;
    margin-right: 35px;
    margin-top: 35px;
}

.box2_1 {
    padding-left: 25px;
    padding-bottom: 30px;
}

#subimg1, #subimg2, #subimg3 {
    width: 42px;
    height: 17px;
    margin-top: 3px;
    float: left;
    background-repeat: no-repeat;
}

.s7 {
    /* было 70px — длинные названия занимали три строки и подавляли всё остальное;
       44px даёт спокойную лесенку 44 -> 26 -> 21 (аудит 06.08.2026) */
    font-size: 44px;
    line-height: 1.12;
    margin-top: 24px;
}

.s5 {
    font-size: 50px;
    margin-top: 80px;
    margin-bottom: 40px;
}

#footer_bg {
    width: 100%;
    height: 160px;
    background-color: #e8e8e8;
}

#footer {
    width: 100%;
    max-width: 1240px;
    margin: auto;
    min-width: 980px;
    padding: 0 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#footer .fleft {
    float: left;
    margin-top: 20px;
    max-width: calc(100% - 140px);
}

#footer .fleft p {
    color: #8a8a8a;
    font-size: 15px;
    padding: 10px 0 0 0;
}

#footer .bold {
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
}

#footer .fright {
    float: right;
}

#footer .fright a {
    float: right;
    margin-top: 20px;
    border-bottom: none;
}

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

#gallery {
    position: relative;
    border: 4px solid rgb(234, 234, 234);
    width: 98%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#thumbs {
    padding: 10px;
    height: 100px;
    overflow: hidden;
    position: absolute;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
}

#thumbs img {
    height: 100%;
    display: block;
    margin: 0;   /* перебивает отступы .text img — они сдвигали миниатюры вниз */
}
/* picture-обёртка (webp) — блок на всю высоту, иначе фото съезжает вниз
   от базовой линии и не совпадает с рамкой (06.08.2026) */
#thumbs picture {
    display: block;
    height: 100%;
}
#thumbs span{
    float: left;
    margin-right: 6px;
    height: 100%;
    display: inline-block;
    position: relative;
    cursor: pointer;
}
#thumbs span:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#thumbs span:hover:before {
    border: 4px solid #ff2a00;
}

#thumbs span.active{
    cursor: default;
}

#thumbs span.active:before {
    border: 4px solid #ffde00;
}

#largeImage {
    cursor: pointer;
    width: 100%;
    height: 100%;
}

#panel {
    position: relative;
}

.content_msg {
    display: none;
}

.content_msg_call {
    display: none;
}

.feedback__form {
    max-width: 600px;
    margin: 100px auto 0;
    font-size: 21px;
    position: relative;
}

.form-correct {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.form-itm {
    opacity: 1;
    visibility: visible;
    background: #fff;
    position: relative;
    z-index: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.form-itm._hide {
    opacity: 0;
    visibility: hidden;
}

.form-itm input, .form-itm textarea {
    border: 2px solid #c7c7c7;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    font-size: 26px;
}

.form-itm input:hover, .form-itm textarea:hover {
    border: 2px solid #f4b327;
}

.form-itm [required] {
    width: 100%;
    box-sizing: border-box;
    margin: 16px 0 30px 0;
    padding: 2%;
    border-radius: 3px;
    border: 2px solid #c7c7c7;
    font-size: 26px;
}

.form-itm [required]:focus, #feedback-form2 [required]:focus {
    border: 2px solid #f4b327;
}

.form-itm [type="submit"] {
    border: none;
    border-radius: 3px;
    font-size: 24px;
    background: linear-gradient(to top, #ffbe00 28%, #ffda00 100%);
    color: #000;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    padding: 15px 25px 15px 25px;
    margin-top: 10px;
}

.form-itm [type="submit"]:hover {
    background: #ffea00;
    border: none;
}

.form-itm [type="submit"]:focus {
    border: none;
    background: linear-gradient(to bottom, #ffbe00 28%, #ffda00 100%);
}

.form-itm [type="submit"]:focus:valid {
    border: none;
    background: linear-gradient(to bottom, #ffbe00 28%, #ffda00 100%);
}
.form-box{
    position: relative;
}
.form-itm .form_hint,
.form-itm .form_hint2 {
    color: #f42727;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    font-size: 16px;
    padding: 1px 6px;
    z-index: 999;
    position: absolute;
    display: none;
    white-space: nowrap;
    top: 43px;
    left: 105%;
}

.form-itm ._error[required],
.form-itm ._empty[required]{
    border: 2px solid #f42727;
}

.form-itm ._error[required] + .form_hint,
.form-itm ._error[required] + .form_hint2,
.form-itm ._empty[required] + .form_hint,
.form-itm ._empty[required] + .form_hint2 {
    display: block;
}

.action-box{
    margin: 30px 0;
    clear: both;
}

.btn{
    color: #000;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    background: linear-gradient(to top, #ffbe00 28%, #ffda00 100%);
    cursor: pointer;
    border: none;
    text-decoration: none;
    display: inline-block;
    vertical-align: top;
    border-radius: 3px;
    margin-right: 10px;
}

.btn:last-child{
    margin-right: 0;
}

.btn:hover {
    background: #ffea00;
}

.btn:active {
    background: linear-gradient(to bottom, #ffbe00 28%, #ffda00 100%);
}

.btn-small{
    font-size: 14px;
    padding: 7px 15px 5px;
}
.btn-big{
    font-size: 24px;
    padding: 15px 30px;
}
.price-title{
    float: none !important;
    margin: 65px 0;
}
.price-table{
    border: 1px solid #e0e0e0;
    border-top: 0;
    overflow: hidden;
}
.price-line{
    font: 18px/24px 'ptsans-regular', arial, Helvetica, sans-serif;
}
.price-line._th{
    background: #fff0ae;
    font: 18px/24px 'ptsans-bold', arial, Helvetica, sans-serif;
}
.price-line._th .price-col{
    vertical-align: middle;
}
.price-line._th span{
    font-size: 9px;
    position: relative;
    top: -6px;
}
.price-col{
    display: inline-block;
    vertical-align: top;
    width: 12%;
    padding: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}
.price-line._th:first-child .price-col:before{
    content: '';
    position: absolute;
    width: 0;
    left: 0;
    top: 0;
    height: 20000px;
    margin-top: -100px;
    border-left: 1px solid #e0e0e0;
}
.price-line._th:first-child .price-col:first-child:before{
    display: none;
}
.price-col._first{
    border: none;
    width: 24% !important;
}
.price-col strong{
    font: 18px/24px 'ptsans-bold', arial, Helvetica, sans-serif;
}
.price-col-desc {
    margin-bottom: 20px;
}
@media (max-width: 1240px) {
    #nav{font-size: 15px;}
    .tel{font-size: 20px;}
    .btn-small {font-size: 10px; padding: 7px 12px 5px;}
    .menu{}
}

/***30.07.2015***/

.m-footer {
    font-size: 0;
}
.m-footer .link {
    display: inline-block;
    vertical-align: middle;
    color: #8a8a8a;
    border-color: transparent;
    width: 33.33%;
    font-size: 14px;
    text-decoration: none;
}
.m-footer .link:hover {
    border-bottom: 1px solid transparent;
    text-decoration: underline;
}

.page-title {
    font-size: 56px;
    font-weight: bold;
    padding: 80px 0 55px 0;
}

.blog {
    width: 750px;
    float: left;
    padding: 0 0 75px 0;
}

.blog-cont {
    width: 100%;
    margin: 0 0 60px 0;
}

.blog-cont__title-width {
    width: 600px;
    padding: 0 0 20px 0;
}

.blog-cont__title {
    font-size: 32px;
    color: #ffbe00;
    font-weight: bold;
}

.blog-cont__date {
    font-size: 16px;
    color: #000000;
    float: left;
    width: 100%;
    margin: 0 0 25px 0;
}

.blog-cont__text {
    font-size: 16px;
    color: #000000;
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
}

.pagination {
    float: left;
}

.pagination__item {
    float: left;
    margin: 0 3px 0 0;
}

.pagination__link {
    color: #000;
    font-size: 20px;
    background: #e8e8e8;
    padding: 3px 10px;
    border-radius: 2px;
    border: none;
    transition: background 0.5s;
}

.pagination__link-active {
    color: #fff;
    background: #f45927;
}

.pagination__link:hover {
    background: #ff916e;
}

.nav-cat__link {
    float: left;
    font-size: 17px;
    color: #000;
    font-weight: bold;
    border: none;
    margin: 10px 0 0 0;
}

.nav-cat__link:nth-child(2):before {
    content: " ";
    display: block;
    float: left;
    margin: 6px 10px 0px 9px;
    height: 8px;
    width: 21px;
    background-image: url("../img/arrownav.svg");
}

.nav-cat__link-active {
    color: #f45927;
}

.title-single-blog {
    font-size: 70px;
    font-weight: bold;
    padding: 80px 0 55px 0;
}

.text img {
    margin: 20px 0;
    max-width: 660px;
}

.btn-comebackblog {
    color: #000;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    background: linear-gradient(to top, #e2e2e2, #eeeeee);
    cursor: pointer;
    border: none;
    text-decoration: none;
    display: inline-block;
    vertical-align: top;
    border-radius: 3px;
    font-size: 14px;
    padding: 7px 15px 5px;
    margin: 35px 0;
}

.btn-comebackblog:hover {
    background: linear-gradient(to top, #d2d2d2, #eeeeee);
}

._footer-menu-link {
    margin-left: 20px;
}

/*wisiwyg table*/

table {
    width: 100%;
    margin-bottom: 65px;
    font-family: PTSans, sans-serif;
    border-bottom: 2px solid #fff0ae;
}

table > caption {
    margin-bottom: 20px;
    padding-right: 15px;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: #000000;
}

table > thead > tr {
    background: #fff0ae;
}

table > thead > tr > td {
    padding: 15px 5px 15px 15px;
    font-size: 15px;
    font-weight: bold;
    color: #000;
}

table > tbody > tr:nth-child(even) {
    background: rgba(255,240,174,0.4);
}

table > tbody > tr > td  {
    padding: 15px;
    font-size: 18px;
    text-align: left;
    color: #000;
}

@media screen and (max-width: 1080px) {
    table > caption {
        font-size: 18px;
    }
    table > thead > tr > td {
        font-size: 13px;
        padding: 10px 5px 10px 10px;
    }
    table > tbody > tr > td {
        font-size: 14px;
        padding: 10px;
    }
}

a.btn.btn-small.call {
    display:none;
}
a.callback.call {
    display:none;
}

.logo {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5%;
    width: 18%;
}

.hide_desctop{
    display: none !important;
}
.hide_mob{
    display: block !important;
}

@media screen and (min-width: 1023px) {
.logo {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5%;
    width: 18%;
}
}
@media screen and (max-width: 1024px) {
.logo {
    height: 100%;
    text-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
}
.header {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}
.contact {
    display: inline-block;
    vertical-align: bottom;
    text-align: center;
    width: 100%;
}
.menu {
    width:100%;
    display: flex;
    justify-content: normal;
    order: 2;
}
.contact {
    text-align: center;
    justify-content: center;
    align-items: center;
    align-content: center;
    order: 1;
    width: 50%;
}
ul.social-icon  {
    display: none;
}
.tel {
    display: block;
    font-size: 53px;
}
.btn.btn-small.schet {
    display: inline-block;
    font-size: 66px;
    margin: 10px;
    padding: 10px 30px 10px 30px;
}

a.btn.btn-small.call  {
    display: inline-block;
}
a.callback.call {
    margin-top: 190px;
    display: block;
    position: fixed;
    right: 0;
    top: 200px;
    z-index: 99999;
}

.btn-small {
    display: none;
}
.logo a img {
    max-width: 100%;
    width: 450px;
}
#content {
    padding: 340px 20px 0;
}
.feedback__form {
    margin: 360px auto 0;
}
#nav li {
    font-size: 37px;
    padding: 15px;
}
i.fa.fa-phone {
    color: white;
    background-color: red;
    padding: 50px;
    height: 70px;
    margin: 50px;
    line-height: 70px!important;
    border-radius: 50%;
    font-size: 100px!important;
}
}

@media screen and (max-width: 768px) {
    .feedback__form {
        margin: 130px 10px -250px !important;
    }
    #head{
        padding: 10px 0 !important;
        top: 0 !important;
    }
    .header{
        min-width: 100%;
    }
    .logo{
        margin-right: 0;
        width: 50%;
    }
    .logo a img {
        width: auto !important;
        margin: 0 auto;
        padding: 0 10px;
    }
    .tel {
        display: block;
        font-size: 16px !important;
    }
    .btn.btn-small.schet {
        font-size: 14px !important;
    }
    .btn-big {
        font-size: 12px !important;
        padding: 10px 20px !important;
    }
    .menu{
        margin-bottom: 0;
    }
    #nav {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        font-size: 15px !important;
    }
    #nav li {
        font-size: 13px !important;
        padding: 5px !important;
    }
    #nav > li > ul {
        left: 0;
        padding: 10px 10px;
        margin-top: 0;
        margin: 15px;
    }
    #nav li > ul {
        display: none;
    }
    #nav li:hover > ul {
        display: none;
    }
    #nav li ul.d__block {
        display: block;
    }
    #nav li ul{
        overflow: scroll;
        height: 350px;
    }
    #nav ul a {
        font: 15px/18px 'ptsans-regular', arial, Helvetica, sans-serif;
    }
    .tel {
        margin: 5px 0;
    }
    .btn.btn-small.schet {
        margin: 5px;
    }
    .feedback__form {
        margin: 310px 10px -290px;
        max-width: 100%;
    }
    .form-itm [type="submit"] {
        font-size: 14px;
    }
    #content{
        min-width: 100%;
        padding: 130px 10px 0;
    }
    #content h1 {
        width: 100% !important;
        float: none !important;
        font-size: 28px !important;
        line-height: 1.15;
    }
    /* глобальное h2 { 18px !important } перебивало .text h2 — возвращаем разделам вес */
    .text h2 { font-size: 21px !important; }
    .text h3 { font-size: 18px !important; }
    h2 {
        font-size: 18px !important;
    }
    h3 {
        font-size: 18px;
        padding: 15px 0;
    }
    h4{
        font-size: 16px;
        padding: 10px 0;
    }
    .text{
        width: 100% !important;
        float: none !important;
    }
    .text ul li {
        font-size: 14px !important;
        padding-left: 50px !important;
        margin-bottom: 15px !important;
    }
    .textfull{
        float: none;
        display: flex;
        flex-wrap: wrap;
    }
    .textfull p {
        font-size: 14px !important;
    }
    .left,
    .left2{
        width: 100%;
        float: none;
    }
    .right,
    .right2{
        width: 100%;
        float: none;
    }
    .text3_2{
        margin-left: 0;
    }
    .hide_desctop{
        display: block !important;
    }
    .hide_mob{
        display: none !important;
    }
    .price-table {
        overflow-x: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }
    #footer{
        min-width: 100%;
    }
    a.callback.call {
        margin-top: 0 !important;
        right: initial !important;
        top: initial !important;
        bottom: 40px !important;
        left: 20px;
    }
    i.fa.fa-phone {
        padding: 20px !important;
        height: 40px !important;
        margin: 0px !important;
        line-height: 40px !important;
        font-size: 36px !important;
        display: inline !important;
    }
    .block {
        width: 100%;
        float: none;
    }
    .block._fix {
        position: relative;
    }
    .left550,
    .blog{
        width: 100% !important;
        float: none  !important;
    }
    .blog-cont__title-width{
        width: 100% !important;
    }
    .blog{
        display: flex;
        flex-wrap: wrap;
    }
    .page-title,
    .title-single-blog{
        padding: 20px 0 20px 0 !important;
    }
    .blog-cont {
        margin: 0 0 20px 0;
    }
    .blog-cont__title {
        font-size: 18px;
    }
    .blog-cont__date {
        display: block;
        font-size: 12px;
        color: #000000;
        float: none  !important;
        margin: 0 0 15px 0;
    }
    .nav-cat__link {
        font-size: 14px;
        margin: 10px 0;
    }
    .text p {
        font-size: 15px;
        padding: 5px 0;
        line-height: 1.2;
    }
    .action-box {
        margin: 10px 0;
    }
    .btn-comebackblog {
        margin: 15px 0;
    }
    .cont h1 {
        margin-top: 0;
        margin-bottom: 20px;
    }
    .padd {
        padding-top: 0;
    }
    .msg {
        width: 100%;
    }
    .msg [type="submit"] {
        font-size: 14px;
        padding: 10px 20px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .form-box {
        font-size: 14px;
    }
    .form-itm [required] {
        margin: 17px 0;
        font-size: 16px;
    }
    .s5 {
        margin-top: 0;
        margin-bottom: 0;
    }
    .sidebar h2 {
        margin-left: 0;
        padding: 15px 0;
    }
    .sidebar {
        width: 100%;
        float: none;
    }
    .sidebar .block{
        padding: 5px;
        width: 95%;
    }
    .sidebar p {
        font-size: 16px;
        margin-left: 0;
        padding: 0;
    }
    .box2 {
        margin-bottom: 20px;
        margin-right: 0;
        margin-top: 20px;
    }
    .box {
        margin-bottom: 15px;
    }
    .box h6 {
        position: relative;
        padding-left: 40px;
    }
    .box h6:before {
        border-top: 10px solid #000000;
        border-right: 5px solid transparent;
        border-left: 10px solid transparent;
        left: 10px;
    }
    .text img {
        margin: 15px auto;
        max-width: 100%;
        height: auto;
        display: block;
        float: none !important;
    }
    h6 {
        font-size: 15px;
        padding: 12px 15px;
    }
    #util p {
        font-size: 18px;
        margin-top: 10px;
    }
    #utils18 p {
        font-size: 14px;
        padding: 10px 0 0 0;
    }
    .s7 {
        font-size: 28px;
        line-height: 1.15;
        margin-top: 16px;
    }
    .text{
        overflow-x: auto;
    }
    table {
        width: 100%;
        margin-bottom: 10px;
    }
    iframe {
        width: 100%;
        height: 170px;
    }
    .top65 {
        margin-top: 0;
    }
    #footer_bg {
        height: auto;
    }
    #footer {
        min-width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    #footer .fleft,
    #footer .fright{
        float: none;
        max-width: 100% !important;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
    }
    ._footer-menu-link{
        display: block;
        margin: 5px 0;
        border-bottom: 0;
    }
    .price-title {
        margin: 25px 0 !important;
    }
    .price-line {
        font: 16px/16px 'ptsans-bold', arial, Helvetica, sans-serif !important;
        width: min-content !important;
        display: flex !important;
    }
    .price-line._th .price-col {
        margin: auto !important;
    }
    .price-col._first {
        width: 153px !important;
        text-align: left;
    }
    .price-col {
        width: 110px !important;
        text-align: center !important;
        padding: 5px 15px !important;
    }

    /* Подменю на мобильных */
    #nav li.has-submenu > ul.submenu {
        position: static !important;
        left: auto !important;
        box-shadow: none !important;
        min-width: auto !important;
        padding: 5px 0 5px 15px !important;
    }
}

@media screen and (max-width: 340px){
    #content {
        padding: 150px 10px 0 !important;
    }
}

.phonewrap  {
    display: table;
}

.fa-phone {
    color: #fff;
    display: inline-block;
    font-size: 21px !important;
    line-height: 26px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    vertical-align: middle;
    animation: 1200ms ease 0s normal none 1000 running shake;
}

@keyframes shake {
0% {
    transform: rotateZ(0deg);
}
10% {
    transform: rotateZ(-30deg);
}
20% {
    transform: rotateZ(15deg);
}
30% {
    transform: rotateZ(-10deg);
}
40% {
    transform: rotateZ(7.5deg);
}
50% {
    transform: rotateZ(-6deg);
}
60% {
    transform: rotateZ(5deg);
}
70% {
    transform: rotateZ(-4.28571deg);
}
80% {
    transform: rotateZ(3.75deg);
}
90% {
    transform: rotateZ(-3.33333deg);
}
100% {
    transform: rotateZ(0deg);
}
}
/* breadcrumbs 07.2026 v2 - nav-cat style */
.breadcrumbs { margin: 10px 0 0; }
.breadcrumbs .crumbs-line { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.breadcrumbs .crumbs-line li { float: left; font-size: 17px; font-weight: bold; line-height: 1.3; }
.breadcrumbs .crumbs-line li + li:before { content: " "; display: block; float: left; margin: 6px 10px 0 9px; height: 8px; width: 21px; background-image: url("../img/arrownav.svg"); background-repeat: no-repeat; }
.breadcrumbs a { color: #000; text-decoration: none; border: none; }
.breadcrumbs a:hover { color: #f45927; }
.breadcrumbs .active { color: #f45927; }
.breadcrumbs .sep { display: none; }
@media (max-width: 768px) { .breadcrumbs .crumbs-line li { font-size: 14px; } }

/* cookie notice + form consent 07.2026 */
.cookie-notice { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #fffbe6; border-top: 2px solid #FFD500; padding: 12px 20px; display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 14px; box-shadow: 0 -2px 10px rgba(0,0,0,.08); }
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; max-width: 800px; }
.cookie-notice a { color: #f45927; }
.cookie-notice .btn { background: #FFD500; border: none; padding: 8px 24px; font-weight: bold; cursor: pointer; white-space: nowrap; }
.cookie-notice .btn:hover { background: #f45927; color: #fff; }
.form-consent label { font-size: 13px; font-weight: normal; display: block; line-height: 1.4; }
.form-consent input[type=checkbox] { margin-right: 6px; }
.form-consent a { color: #f45927; }
@media (max-width: 768px) { .cookie-notice { flex-direction: column; gap: 10px; text-align: center; } }

/* form-consent validation hint 07.2026 */
.form-consent { margin-top: 4px; }
.form-consent .form_hint-consent { display: none; color: #f42727; font-size: 13px; margin-top: 6px; }
.form-consent._empty { outline: 2px solid #f42727; outline-offset: 4px; border-radius: 2px; }
.form-consent._empty .form_hint-consent { display: block; }

/* Активный пункт (деактивированная само-ссылка <p>) в выпадающем подменю:
   зеркалим бокс обычной ссылки, чтобы не съезжал влево (audit 31.07.2026) */
#nav li.has-submenu > ul.submenu > li > p {
    display: block;
    margin: 0;
    padding: 8px 20px;
    white-space: nowrap;
    font: 17px/24px 'ptsans-regular', arial, Helvetica, sans-serif;
}

/* --- Блог: типографика статей (audit 31.07.2026) --- */
.title-single-blog {
    font-size: 42px;
    padding: 35px 0 20px 0;
    line-height: 1.15;
}
.text { line-height: 1.6; }
.text h2 {
    font-size: 26px;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    padding: 22px 0 6px;
    line-height: 1.25;
}
.text h3 {
    font-size: 21px;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    padding: 16px 0 4px;
    line-height: 1.3;
}
.text ul, .text ol {
    padding: 8px 0 8px 24px;
    line-height: 1.6;
    font-size: 17px;
}
.text li { padding: 3px 0; }
.text table { border-collapse: collapse; margin: 12px 0; }
.text td, .text th { border: 1px solid #e0e0e0; padding: 6px 10px; }
.text blockquote {
    border-left: 3px solid #f4a427;
    margin: 10px 0;
    padding: 4px 16px;
    color: #444;
}

/* Блог: ограничение высоты фото в статьях (audit 01.08.2026, поправлено 04.08) */
.text img {
    max-height: 480px;
    height: auto;   /* пропорции сохраняем, но ширину из атрибута не перебиваем */
}

/* --- Мобильная адаптация: меню и таблица прайса (аудит 04.08.2026) --- */
@media screen and (max-width: 768px) {
    /* меню переносится на несколько строк, а не уезжает за край экрана */
    #nav {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    #nav > li {
        max-width: 100%;
    }
    /* выпадающий список раскрывается под пунктом, на всю ширину */
    #nav > li > ul {
        position: static !important;
        left: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 6px 0 0 !important;
        padding: 6px 0 !important;
        box-sizing: border-box !important;
    }
    #nav li ul {
        height: auto !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    /* длинные названия переносятся, а не обрезаются */
    #nav li ul li,
    #nav li ul a,
    #nav li ul p,
    #nav li.has-submenu > ul.submenu > li > a {
        white-space: normal !important;
    }
    /* подсказка, что таблица прайса прокручивается вбок */
    .price-table {
        -webkit-overflow-scrolling: touch;
    }
    .price-table.is-scrollable::before {
        content: "\2194  проведите пальцем, чтобы увидеть все колонки";
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        display: block;
        flex: 0 0 auto;
        font-size: 12px;
        color: #8a8a8a;
        padding: 2px 0 6px;
    }
}

/* Прокручиваемые таблицы в статьях (аудит 04.08.2026) */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 768px) {
    .table-scroll.is-scrollable::before {
        content: "↔  проведите пальцем, чтобы увидеть всю таблицу";
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        display: block;
        font-size: 12px;
        color: #8a8a8a;
        padding: 2px 0 6px;
    }
}

/* Кнопка «Прайс-лист» в шапке на планшетах и телефонах (аудит 04.08.2026) */
@media screen and (max-width: 1024px) {
    .btn-box a.btn.btn-small {
        display: inline-block !important;
    }
}
@media screen and (max-width: 768px) {
    .btn-box .btn.btn-small {
        font-size: 11px !important;
        padding: 8px 9px !important;
        margin: 3px 2px !important;
    }
}

/* Пропорции картинок при заданных width/height (аудит 04.08.2026).
   Атрибуты нужны, чтобы браузер резервировал место и не дёргал вёрстку,
   но высоту должен считать сам — иначе изображение растягивается. */
img[width][height] {
    height: auto;
}

/* Фото товара: ограничиваем высоту, иначе вертикальные снимки занимают весь экран
   (аудит 06.08.2026) */
.topimg img {
    max-height: 520px;
}
@media screen and (max-width: 768px) {
    .topimg img {
        max-height: 340px;
    }
}

/* Фото товара — отдельным блоком в правой колонке над «Продукцией».
   Раньше оно лежало в верхнем блоке рядом с H1 и растягивало его по своей высоте,
   из-за чего текст начинался на ~210 px ниже (аудит 06.08.2026) */
.topimg-col {
    float: right;
    width: 388px;
    margin: 0 0 24px 20px;
    /* узкие фото (столбики) иначе прижимаются к левому краю колонки
       и не совпадают по центру с блоком «Продукция» под ними */
    text-align: center;
}
.topimg-col img {
    max-width: 100%;
    max-height: 520px;
}
/* На узких экранах колонки выстраиваются в столбик — возвращаем фото
   на прежнее место, сразу под заголовок, чтобы оно не уехало под весь текст */
@media screen and (max-width: 1024px) {
    #content {
        display: flex;
        flex-direction: column;
    }
    #content > .breadcrumbs { order: 1; }
    #content > .textfull { order: 2; }
    #content > .topimg-col {
        order: 3;
        float: none;
        width: auto;
        margin: 0 0 20px;
        text-align: center;
    }
    #content > .text { order: 4; }
    #content > .sidebar { order: 5; }
    #content > .topimg-col img { max-height: 340px; }
}


/* ===== Прайс-лист: оглавление, секции, зебра, липкая шапка (аудит 06.08.2026) ===== */
.price-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -25px 0 12px;
}
.price-toc-link {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid #e6c200;
    border-radius: 16px;
    background: #fffbe6;
    font: 15px/1.2 'ptsans-regular', arial, Helvetica, sans-serif;
    color: #333;
    text-decoration: none;
}
.price-toc-link:hover { background: #fff0ae; }
.price-sec-title {
    font: 26px/1.25 'ptsans-bold', arial, Helvetica, sans-serif;
    padding: 30px 0 10px;
    scroll-margin-top: 120px;
}
html { scroll-behavior: smooth; }
/* зебра: 1-й ребёнок таблицы — шапка, чётные — товарные строки через одну */
.price-table .price-line:nth-child(even) { background: #fafaf3; }
/* липкая шапка колонок под фикс-шапкой сайта — только десктоп:
   на мобильном таблица прокручивается вбок, вертикальный sticky там не работает.
   overflow: clip вместо hidden — hidden создаёт scroll-контейнер и глушит sticky,
   clip просто обрезает 20000px-линии разделителей */
@media screen and (min-width: 769px) {
    .price-table { overflow: hidden; overflow: clip; }
    .price-line._th { position: sticky; top: 93px; z-index: 2; }
}
@media screen and (max-width: 768px) {
    .price-sec-title { font-size: 20px !important; padding: 20px 0 8px; }
    /* на телефоне оглавление — одна прокручиваемая строка, а не стена кнопок в 370px */
    .price-toc {
        margin: 0 -10px 10px;
        padding: 0 10px 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .price-toc-link { flex: 0 0 auto; white-space: nowrap; }
}


/* Прайс-секции внутри товарных страниц: вёрстка прайса рассчитана на всю ширину
   страницы, а колонка .text — 55% (~660px); проценты давали слипшиеся колонки.
   Только десктоп — мобильные правила ≤768 работают как на общем прайсе. */
@media screen and (min-width: 769px) {
    .text .price-line { display: flex; }
    .text .price-col {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding: 12px 10px;
    }
    .text .price-col._first { flex: 0 0 36%; width: auto !important; }
    .text .price-line._th { position: static; }   /* липкая шапка тут не нужна: таблицы короткие */
    .text .price-table { margin-bottom: 8px; }
}


/* Плашка «изготовим любую длину» в прайсе и на страницах столбиков (06.08.2026) */
.price-note {
    background: #fffbe6;
    border-left: 3px solid #f4a427;
    padding: 14px 18px;
    margin: 14px 0 22px;
    font-size: 17px;
    line-height: 1.5;
}
.price-note p { margin: 0 0 8px; }
.price-note p:last-child { margin-bottom: 0; }
.price-note .btn.btn-small {
    display: inline-block !important;
    margin-left: 6px;
    cursor: pointer;
}
@media screen and (max-width: 768px) {
    .price-note { font-size: 15px; padding: 12px 14px; }
}


/* Карточки цветов газонной ленты (06.08.2026) */
.color-cards {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 14px 0 6px;
}
.color-card {
    flex: 1 1 200px;
    max-width: 300px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
}
.color-swatch {
    grid-row: 1 / 3;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: inline-block;
}
.color-card-title {
    margin: 0 !important;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
}
.color-card-note {
    margin: 0 !important;
    font-size: 15px;
    color: #666;
}


/* Карточки видов сигнальных лент на обзорной странице (06.08.2026) */
.tape-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 16px 0 8px;
}
.tape-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 10px;
    text-decoration: none;
    color: #333;
    text-align: center;
    transition: border-color .15s, box-shadow .15s;
}
a.tape-card:hover {
    border-color: #f4a427;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.tape-card-img {
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tape-card-img img {
    max-height: 84px !important;
    max-width: 128px;
    width: auto;
    height: auto;
    margin: 0 !important;   /* глушим отступы .text img */
}
.tape-card-img._noimg {
    font-size: 40px;
    color: #f4a427;
}
.tape-card-t {
    font-size: 14px;
    line-height: 1.35;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
}


/* Список продукции в шапке главной: 34px было слишком крупно (06.08.2026) */
#content__home .left h4 {
    font-size: 24px;
    padding: 8px 15px 8px 0;
}
#content__home .left h4 + p {
    margin-top: -2px;
    font-size: 15px;
    color: #555;
}
.home-list-note {
    font-size: 15px;
    color: #777;
    font-style: italic;
    margin: -4px 0 6px;
}
@media screen and (max-width: 768px) {
    #content__home .left h4 { font-size: 19px !important; padding: 6px 0; }
}


/* Полоса фактов на главной (06.08.2026) */
.fact-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 34px;
    border-top: 1px solid #f0e6b0;
    border-bottom: 1px solid #f0e6b0;
    background: #fffdf2;
    padding: 12px 16px;
    margin: 4px 0 26px;
    font-size: 15px;
    color: #555;
    text-align: center;
}
.fact-strip span { white-space: nowrap; }
@media screen and (max-width: 768px) {
    .fact-strip { flex-direction: column; gap: 4px; }
    .fact-strip span { white-space: normal; }
}


/* Фото секций главной: вертикальные снимки не выше 560px и без искажений
   (width:auto обязателен — max-height при жёсткой ширине давит пропорции) */
#content__home .left img, #content__home .left2 img,
#content__home .right img, #content__home .right2 img {
    width: auto;
    max-width: 100%;
    max-height: 560px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* Столбики на главной: вертикальный снимок ужимаем сильнее остальных секций */
#content__home img[src*="stolbiki-vse-2"] { max-height: 400px; display: block; margin: 0 auto; }


/* Подпись в карточках столбиков (06.08.2026) */
.tape-card-sub {
    font-size: 13px;
    color: #777;
    line-height: 1.3;
}


/* Пакеты на главной: фото ужато до общего ряда секций */
#content__home img[src*="paket-cement"] { max-height: 340px; }
/* ======================================================================
   Страница контактов: офис/склад, связь, карточка предприятия, карта,
   маршрут; доступность форм и анти-спам (правки 06.08.2026)
   ====================================================================== */

/* Видимый фокус с клавиатуры. Сброс в <head> глушил outline на всём сайте,
   поэтому здесь он возвращается только для клавиатурной навигации. */
:focus-visible {
    outline: 2px solid #f45927 !important;
    outline-offset: 2px;
}

/* Honeypot: поле-приманка для ботов. Человек его не видит и не таб-ает. */
.hp-field {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Офис и склад --- */
.places {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 6px 0 22px;
}
.place {
    display: flex;
    flex-direction: column;
    flex: 1 1 240px;
    padding: 16px 18px 14px;
    border: 1px solid #e3e6ea;
    border-top: 3px solid #f45927;
    border-radius: 4px;
    background: #fbfcfd;
}
.place__title {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 0 10px;
    font: 20px/1.2 'ptsans-bold', arial, Helvetica, sans-serif;
}
.place__title .fa {
    width: 22px;
    text-align: center;
    font-size: 19px;
    color: #f45927;
}
.place p {
    padding: 0 0 8px;
    font-size: 16px;
    line-height: 1.45;
}
.place__hours {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.place__hours .fa {
    flex: 0 0 auto;
    width: 22px;
    padding-top: 3px;
    text-align: center;
    font-size: 15px;
    color: #9aa3ad;
}
/* Часы и примечание — двумя строками, иначе в карточке склада
   длинное примечание переносит само время */
.place__hours-body,
.place__time,
.place__muted {
    display: block;
}
.place__muted {
    font-size: 14px;
    color: #6b7280;
}
/* Плашки прижаты к низу, чтобы совпадали между карточками
   независимо от длины текста выше */
.place__tag {
    align-self: flex-start;
    margin-top: auto;
    padding: 6px 10px !important;
    border-radius: 3px;
    background: #fff3cd;
    font-size: 14px !important;
    color: #7a5b00;
}

/* --- Телефоны, Viber, почта --- */
.contact-lines {
    margin: 0 0 22px;
    padding: 0;
}
.contact-lines__item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #eef0f3;
    font-size: 18px;
}
.contact-lines__item:last-child {
    border-bottom: 0;
}
.contact-lines__item > .fa {
    width: 20px;
    text-align: center;
    font-size: 17px;
    color: #f45927;
}
.contact-lines__item a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #cfd6dd;
}
.contact-lines__item a:hover {
    border-bottom-color: #f45927;
}
.viber-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding: 3px 11px;
    border: 0 !important;
    border-radius: 14px;
    background: #7360f2;
    color: #fff !important;
    font-size: 14px;
    text-decoration: none;
    vertical-align: middle;
}
.viber-btn:hover {
    background: #5f4ce0;
}
.viber-btn__ico {
    display: block;
}

/* --- Карточка предприятия --- */
.doc-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 20px 0 6px;
    padding: 16px 18px;
    border: 1px solid #e3e6ea;
    border-left: 3px solid #ffbe00;
    border-radius: 4px;
    background: #fffdf5;
}
.doc-card__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.doc-card__title {
    font: 19px/1.2 'ptsans-bold', arial, Helvetica, sans-serif;
}
.doc-card__hint {
    font-size: 14px;
    color: #6b7280;
}
.doc-card__links {
    display: flex;
    gap: 10px;
}
.doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 3px;
    background: linear-gradient(to top, #ffbe00 28%, #ffda00 100%);
    color: #000;
    font: 16px/1 'ptsans-bold', arial, Helvetica, sans-serif;
    text-decoration: none;
}
.doc-btn:hover {
    background: #ffea00;
}
.doc-btn .fa {
    font-size: 17px;
}

/* --- Карта: грузится по клику, тянется по ширине колонки --- */
.map-embed {
    position: relative;
    width: 100%;
    min-height: 320px;
    aspect-ratio: 6 / 5;
    overflow: hidden;
    border-radius: 4px;
    background-color: #eaeef2;
    background-image:
        linear-gradient(#dfe5ea 1px, transparent 1px),
        linear-gradient(90deg, #dfe5ea 1px, transparent 1px);
    background-size: 28px 28px;
}
.map-embed__btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: 'ptsans-regular', arial, Helvetica, sans-serif;
}
.map-embed__btn .fa {
    font-size: 34px;
    color: #e2413a;
}
.map-embed__label {
    padding-bottom: 2px;
    border-bottom: 1px dashed #9aa3ad;
    font: 18px/1 'ptsans-bold', arial, Helvetica, sans-serif;
    color: #1a1a1a;
}
.map-embed__btn:hover .map-embed__label {
    border-bottom-color: #f45927;
}
.map-embed__hint {
    font-size: 14px;
    color: #6b7280;
}
.map-embed.is-loaded {
    background-image: none;
}
.map-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Блок для водителей --- */
.route {
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid #e3e6ea;
    border-radius: 4px;
    background: #fbfcfd;
}
.route__title {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 0 8px;
    font: 19px/1.2 'ptsans-bold', arial, Helvetica, sans-serif;
}
.route__title .fa {
    font-size: 18px;
    color: #f45927;
}
.route__text {
    padding: 0 0 12px;
    font-size: 15px !important;
    line-height: 1.5;
    color: #333;
}
.route__coords {
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    white-space: nowrap;
}
.route__note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 12px;
    padding: 10px 12px !important;
    border-radius: 3px;
    background: #fff3cd;
    font-size: 14px !important;
    line-height: 1.45;
    color: #7a5b00;
}
.route__note .fa {
    flex: 0 0 auto;
    padding-top: 2px;
    font-size: 15px;
}
/* Фото въезда — ориентир для водителя */
.route__photo {
    margin: 0 0 12px;
}
.route__photo img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #e3e6ea;
    border-radius: 3px;
}
.route__photo figcaption {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: #6b7280;
}

.route__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.route__btn {
    display: inline-block;
    padding: 9px 14px;
    border: 1px solid #f45927;
    border-radius: 3px;
    background: #fff;
    color: #f45927;
    font-size: 15px;
    text-decoration: none;
}
.route__btn:hover {
    background: #f45927;
    color: #fff;
}

/* --- Раскладка страницы контактов --- */

/* Правая колонка отодвинута от текста, иначе карта липнет к реквизитам */
.contacts-layout > .right {
    box-sizing: border-box;
    padding-left: 44px;
}

/* Иконка телефона подхватывала глобальные правила плавающей кнопки звонка
   (белый цвет, тряска, на мобильном 36px с паддингом 20px). Селектор нарочно
   длиннее, чем `i.fa.fa-phone` в мобильной медиа-выборке, иначе тот выигрывает. */
.contacts-layout .contact-lines__item > i.fa.fa-phone {
    width: 20px;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 17px !important;
    line-height: inherit !important;
    color: #f45927;
    text-shadow: none;
    animation: none;
}

/* --- Реквизиты --- */
.req-line {
    line-height: 1.5;
}

/* --- Формы --- */

/* «Написать письмо» стал настоящей кнопкой вместо input[type=submit] */
.msg .msg-hide {
    border: none;
    border-radius: 3px;
    padding: 15px 25px;
    background: linear-gradient(to top, #ffbe00 28%, #ffda00 100%);
    color: #000;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    font-size: 24px;
}
.msg .msg-hide:hover {
    background: #ffea00;
}
.msg .msg-hide:active {
    background: linear-gradient(to bottom, #ffbe00 28%, #ffda00 100%);
}

/* Подписи полей стали <label>, раскладка от этого меняться не должна */
.form-itm .form-box > label {
    display: block;
}

/* Чекбокс согласия не должен растягиваться правилом .form-itm [required] */
.form-itm .form-consent input[type="checkbox"][required] {
    width: auto;
    margin: 0 6px 0 0;
    padding: 0;
    vertical-align: middle;
}

/* Сообщения об отправке позиционируются absolute — форме письма нужен
   свой контекст, иначе они уезжают к первому позиционированному предку */
.msg .msg2 {
    position: relative;
}

/* Сообщение о неудачной отправке — на месте блока «успешно отправлено» */
.form-failed {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.form-failed-text {
    color: #c0392b;
    line-height: 1.4;
}
.form-failed-text a {
    color: #c0392b;
}

/* ======================================================================
   Страница «Закупаем отходы ПВД» (06.08.2026)

   Всё заскоплено на .text--util. Причина: у сайта есть свой маркер списка
   `.text ul li:before` — оранжевая чёрточка с отступом 58px и отбивкой 20px
   на пункт. Его вес (0,1,2) выше, чем у одиночного класса, поэтому правила
   ниже начинаются с двух классов, иначе маркер и отступы не перебить.
   ====================================================================== */

/* Шапка страницы приведена к общему виду: .textfull вместо бывшего .textfull2,
   а сайдбар вынесен прямым потомком #content — только так на него работает
   готовое правило #content > .sidebar { order: 5 }, которое на мобильном
   отправляет «Продукцию» вниз. Класс .textfull2 и его правила удалены. */

/* Заголовок отбивался от хлебных крошек на 80px, тогда как на остальных
   страницах .s7 отбивается на 24px. Класс .s5 стоит только здесь. */
.s5 {
    margin-top: 24px;
    margin-bottom: 20px;
}

.text.text--util h2 {
    padding: 20px 0 4px;
    font-size: 23px;
}

.text.text--util p {
    padding: 0 0 8px;
    font-size: 16px;
    line-height: 1.5;
}

.text.text--util .util-lead {
    padding-bottom: 10px;
    font-size: 17px;
}

/* --- Списки «принимаем» / «не принимаем» --- */
.text.text--util .util-list {
    padding: 2px 0 4px !important;
}
.text.text--util .util-list li {
    position: relative;
    margin: 0;
    padding: 2px 0 2px 24px;
    font-size: 16px;
    line-height: 1.45;
}
.text.text--util .util-list li::before {
    left: 2px;
    top: 2px;
    width: auto;
    height: auto;
    background: none;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.45;
}
.text.text--util .util-list--yes li::before {
    content: '✓';
    color: #2e7d32;
}
.text.text--util .util-list--no li::before {
    content: '✕';
    color: #c0392b;
}

.text.text--util .util-note {
    margin: 4px 0 0;
    padding: 10px 12px;
    border-radius: 3px;
    background: #fff3cd;
    font-size: 15px;
    line-height: 1.45;
    color: #7a5b00;
}
.text.text--util .util-note a {
    color: #7a5b00;
}

/* --- Контактные лица --- */
.text.text--util .util-persons {
    padding: 2px 0 4px !important;
}
.text.text--util .util-persons li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    margin: 0;
    padding: 7px 0;
    border-bottom: 1px solid #eef0f3;
}
.text.text--util .util-persons li:last-child {
    border-bottom: 0;
}
.text.text--util .util-persons li::before {
    display: none;
}
.text.text--util .util-persons__name {
    min-width: 148px;
    font-size: 15px;
    color: #6b7280;
}
.text.text--util .util-persons__tel {
    border-bottom: 1px solid #cfd6dd;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #000;
    text-decoration: none;
}
.text.text--util .util-persons__tel:hover {
    border-bottom-color: #f45927;
}
/* отступ у кнопки задан для строки контактов на странице «Контакты»,
   здесь расстояние держит gap самого списка */
.text.text--util .util-persons .viber-btn {
    margin-left: 0;
}

/* Временная пометка (снипет NoticeUntil). Лёгкая «таблетка» по ширине текста,
   а не серая плита во всю колонку: это заметка о графике, она не должна
   выглядеть весомее самих контактов над ней. */
/* Плашку вставляют снипетом в контент любой страницы, а там у абзацев свои
   правила с бóльшим весом — например .text.text--util p (0,2,1) против
   .notice-until (0,1,0). Без !important они обнуляют боковые поля и
   подменяют кегль, и текст с иконкой упираются в скруглённые края.
   Боковые поля намеренно больше радиуса скругления, иначе содержимое
   визуально «съезжает» в закругление. */
.notice-until {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 12px 0 0 !important;
    padding: 9px 22px 9px 18px !important;
    border: 1px solid #e6e8ec;
    border-radius: 18px;
    background: #fff;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #5b616b;
}
.notice-until .fa {
    flex: 0 0 auto;
    font-size: 14px;
    color: #f45927;
}

@media screen and (max-width: 768px) {
    .notice-until {
        display: flex;
        align-items: flex-start;
        padding: 10px 15px !important;
        border-radius: 8px;
    }
    .notice-until .fa {
        padding-top: 2px;
    }
}

@media screen and (max-width: 768px) {
    .text.text--util h2 {
        padding: 16px 0 3px;
        font-size: 20px;
    }
    .text.text--util .util-lead {
        font-size: 16px;
    }
    .text.text--util .util-list li {
        font-size: 15px;
    }
    .text.text--util .util-persons__name {
        min-width: 0;
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    /* Страницу чаще всего открывают водители в дороге, поэтому «Как проехать»
       поднимается в самое начало, а карта уходит вниз — маршрут всё равно
       открывают кнопками в родном навигаторе. */
    .contacts-layout {
        display: flex;
        flex-direction: column;
    }
    .contacts-layout > .right {
        display: contents;
    }
    .contacts-layout > .clear {
        display: none;
    }
    .contacts-layout .route {
        order: 1;
        margin: 0 0 18px;
    }
    .contacts-layout > .left {
        order: 2;
    }
    .contacts-layout .map-embed {
        order: 3;
    }
    .contacts-layout > .contacts-reps {
        order: 4;
    }

    .places {
        gap: 12px;
    }
    .place {
        flex: 1 1 100%;
        padding: 14px 15px 12px;
    }
    .place__title {
        font-size: 18px;
    }
    .contact-lines__item {
        flex-wrap: wrap;
        font-size: 16px;
    }
    .viber-btn {
        margin-left: 8px;
    }
    .doc-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .doc-card__links {
        width: 100%;
    }
    .doc-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    .map-embed {
        min-height: 260px;
        aspect-ratio: 4 / 3;
    }
    .route__links {
        flex-direction: column;
    }
    .route__btn {
        text-align: center;
    }
    .msg .msg-hide {
        margin: 10px 0;
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* ======================================================================
   Страница ЛЗС: факты, цена по запросу, преимущества, шаги, документы
   (правки 06.08.2026)

   Все списки заскоплены двумя классами: внутри .text действует правило
   .text ul li:before (0,1,2) — оранжевая чёрточка с отступом 58px и
   отбивкой 20px. Одиночного класса не хватает, чтобы его перебить.
   ====================================================================== */

/* --- Ключевые факты под заголовком ---
   Не карточки, а одна лёгкая строка с разделителями: четыре отдельные
   плашки перетягивали на себя внимание и при переносе давали кривой
   ряд «3 + 1 во всю ширину». Сетка вместо flex как раз не даёт
   последнему элементу растянуться. */
.text .key-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 4px 0 26px;
    padding: 15px 0 3px !important;
    border-top: 2px solid #f45927;
}
.text .key-facts li {
    margin: 0;
    padding: 0 16px;
    border-left: 1px solid #e6e8ec;
}
.text .key-facts li:first-child {
    padding-left: 0;
    border-left: 0;
}
.text .key-facts li::before {
    display: none;
}
.key-facts__v {
    display: block;
    font: 17px/1.2 'ptsans-bold', arial, Helvetica, sans-serif;
    color: #1a1a1a;
}
.key-facts__k {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.35;
    color: #6b7280;
}

/* --- Цена по запросу + действия --- */
.ask-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 24px 0;
    padding: 18px 20px;
    border: 1px solid #e3e6ea;
    border-left: 3px solid #ffbe00;
    border-radius: 4px;
    background: #fffdf5;
}
.ask-price__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ask-price__title {
    font: 22px/1.2 'ptsans-bold', arial, Helvetica, sans-serif;
}
.ask-price__hint {
    max-width: 420px;
    font-size: 14px;
    line-height: 1.45;
    color: #6b7280;
}
.ask-price__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ask-price__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border: 0;
    border-radius: 3px;
    font: 17px/1 'ptsans-bold', arial, Helvetica, sans-serif;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.ask-price__btn--call {
    border: 1px solid #f45927;
    background: #fff;
    color: #f45927;
}
.ask-price__btn--call:hover {
    background: #f45927;
    color: #fff;
}
.ask-price__btn--bill {
    background: linear-gradient(to top, #ffbe00 28%, #ffda00 100%);
    color: #000;
}
.ask-price__btn--bill:hover {
    background: #ffea00;
}

/* --- Преимущества цифрами --- */
.text .adv-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 20px;
    padding: 0 !important;
}
.text .adv-grid li {
    flex: 1 1 210px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #e3e6ea;
    border-radius: 4px;
    background: #fff;
}
.text .adv-grid li::before {
    display: none;
}
.adv-grid__num {
    display: block;
    font: 26px/1.1 'ptsans-bold', arial, Helvetica, sans-serif;
    color: #f45927;
}
.adv-grid__txt {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.4;
    color: #333;
}

/* --- Пронумерованные шаги --- */
.text .steps {
    counter-reset: step;
    margin: 4px 0 20px;
    padding: 0 !important;
    list-style: none;
}
.text .steps li {
    counter-increment: step;
    position: relative;
    margin: 0;
    padding: 6px 0 6px 42px;
    font-size: 16px;
    line-height: 1.5;
}
.text .steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 6px;
    width: 26px;
    height: 26px;
    background: #ffd500;
    border-radius: 50%;
    font: 15px/26px 'ptsans-bold', arial, Helvetica, sans-serif;
    color: #1a1a1a;
    text-align: center;
}

/* --- Список с галочками --- */
.text .check-list {
    margin: 4px 0 20px;
    padding: 0 !important;
}
.text .check-list li {
    position: relative;
    margin: 0;
    padding: 5px 0 5px 28px;
    font-size: 16px;
    line-height: 1.45;
}
.text .check-list li::before {
    content: '✓';
    left: 2px;
    top: 5px;
    width: auto;
    height: auto;
    background: none;
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #2e7d32;
}

/* --- Главные документы --- */
.text .docs-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 24px;
    padding: 0 !important;
}
.text .docs-main li {
    margin: 0;
    padding: 0;
}
.text .docs-main li::before {
    display: none;
}
/* Обе разновидности строки — ссылка целиком и строка со страницами —
   намеренно один и тот же элемент .docs-main__row внутри <li>. Раньше у
   второй класс висел на самом <li>, и правило .text .docs-main li (0,2,1)
   обнуляло ей отступы: строки стояли на разной высоте и с разным полем. */
.docs-main__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    min-height: 46px;
    padding: 12px 16px;
    border: 1px solid #e3e6ea;
    border-left: 3px solid #f45927;
    border-radius: 3px;
    background: #fff;
    text-decoration: none;
}
a.docs-main__row:hover {
    background: #fffaf5;
    border-left-color: #f4a427;
}
.docs-main__name {
    font: 16px/1.35 'ptsans-bold', arial, Helvetica, sans-serif;
    color: #1a1a1a;
}
.docs-main__note {
    font-size: 14px;
    line-height: 1.35;
    color: #6b7280;
}
.docs-main__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.docs-main__pages a {
    font-size: 14px;
    color: #f45927;
}
.docs-main__pages a:hover {
    color: #f4a427;
}

/* --- Остальные документы: нативная «раскрывашка» вместо js-аккордеона --- */
.docs-more {
    margin: 0 0 12px;
    border: 1px solid #e3e6ea;
    border-radius: 3px;
    background: #fbfcfd;
}
.docs-more__summary {
    padding: 13px 16px;
    font: 16px/1.3 'ptsans-bold', arial, Helvetica, sans-serif;
    color: #1a1a1a;
    cursor: pointer;
}
.docs-more__summary:hover {
    color: #f45927;
}
.docs-more[open] .docs-more__summary {
    border-bottom: 1px solid #e3e6ea;
}
.docs-more__count {
    margin-left: 8px;
    font-family: 'ptsans-regular', arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #9aa3ad;
    white-space: nowrap;
}
.docs-more__body {
    padding: 4px 16px 16px;
}

/* Документы сгруппированы по назначению: сплошным списком два с половиной
   десятка писем и протоколов читаются как свалка */
.docs-group + .docs-group {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e6e8ec;
}
.docs-group__title {
    margin: 0 0 6px;
    font: 13px/1.3 'ptsans-bold', arial, Helvetica, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9aa3ad;
}
.text .docs-group__list {
    display: block;
    margin: 0;
    padding: 0 !important;
}
.text .docs-group__list li {
    margin: 0;
    padding: 5px 0 5px 15px;
    font-size: 15px;
    line-height: 1.4;
    color: #333;
}
.text .docs-group__list li::before {
    left: 0;
    top: 12px;
    width: 8px;
}
.docs-group__meta {
    margin-left: 8px;
    font-size: 13px;
    color: #9aa3ad;
    white-space: nowrap;
}
.docs-group__pages {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-left: 8px;
}
.docs-group__pages a {
    font-size: 14px;
}

/* Техкарта остаётся раскрытой: у .box список по умолчанию display: none,
   он рассчитан на js-аккордеон по клику на h6, которого здесь нет */
.box--open ul {
    display: block;
}
.box--open h3 {
    padding: 16px 20px 0;
    font: 19px/1.25 'ptsans-bold', arial, Helvetica, sans-serif;
}

/* Миниатюры галереи теперь одного формата 4:3 */
#thumbs span img {
    display: block;
    height: 100%;
    width: auto;
}

@media screen and (max-width: 768px) {
    .text .key-facts {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 0;
        padding-bottom: 6px !important;
    }
    /* в две колонки левая граница нужна только правому столбцу */
    .text .key-facts li:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }
    .ask-price {
        flex-direction: column;
        align-items: stretch;
    }
    .ask-price__actions {
        width: 100%;
    }
    .ask-price__btn {
        flex: 1 1 auto;
    }
    .text .adv-grid li {
        flex: 1 1 100%;
    }
    .adv-grid__num {
        font-size: 22px;
    }
}

/* ======================================================================
   Кнопки заказа в тексте товарных страниц (06.08.2026)

   Намеренно не используют .btn/.btn-small: у тех в медиа-выборках лежит
   `.btn-small { display: none }` при ≤1024px и следом
   `.btn.btn-small.schet { font-size: 66px }` — то есть на планшетах кнопка
   раздувается до 66 пикселей кегля. Класс .schet оставлен: по нему
   навешан обработчик открытия формы в script.js.
   ====================================================================== */
.order-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0;
    clear: both;
}
.order-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border: 0;
    border-radius: 3px;
    background: linear-gradient(to top, #ffbe00 28%, #ffda00 100%);
    color: #000;
    font: 17px/1 'ptsans-bold', arial, Helvetica, sans-serif;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.order-btn:hover {
    background: #ffea00;
}

@media screen and (max-width: 768px) {
    .order-row {
        gap: 10px;
    }
    .order-btn {
        flex: 1 1 100%;
        padding: 12px 18px;
        font-size: 15px;
    }
}

/* --- Строка Telegram в контактах ---
   Ссылка намеренно оформлена как телефон и почта рядом, без цветной
   кнопки: это такой же канал связи, а не отдельное действие. Иконка
   в общем акцентном цвете строки контактов. */
.contact-lines__item > .fa-telegram {
    font-size: 18px;
}

/* --- Цвета газонной ленты: образец рядом с названием --- */
.text .color-list {
    padding: 2px 0 6px !important;
}
.text .color-list li {
    position: relative;
    margin: 0;
    padding: 6px 0 6px 30px;
    font-size: 16px;
    line-height: 1.45;
}
.text .color-list li::before {
    display: none;
}
.color-dot {
    position: absolute;
    left: 2px;
    top: 8px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.18);
}

/* --- Прайс с объединёнными ячейками наименований (ленты сигнальные) --- */
.price-grid td[rowspan] {
    vertical-align: middle;
    background: #fcfcfd;
}
.price-grid tbody td:first-child {
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
}

/* --- Липкая шапка у таблицы цен на товарных страницах ---
   .table-scroll задаёт overflow-x: auto, а по спецификации это делает
   скроллируемой и вертикаль: sticky внутри такого контейнера прилипает
   к нему самому и не срабатывает вовсе. Поэтому на десктопе, где таблица
   и так помещается в колонку, обёртке возвращается overflow: visible.
   На узких экранах горизонтальная прокрутка важнее липкой шапки.
   Отступ 93px — высота фиксированной шапки сайта, как на странице прайса.
   Фон на ячейках обязателен: без него строки таблицы просвечивают сквозь. */
@media screen and (min-width: 1025px) {
    .table-scroll--sticky {
        overflow: visible;
    }
    /* обязательно вместе с .table-scroll--sticky: без overflow: visible
       у обёртки шапка прилипает без условий и наезжает на первую строку */
    .table-scroll--sticky .price-grid thead td {
        position: -webkit-sticky;
        position: sticky;
        top: 93px;
        z-index: 2;
        background: #fff0ae;
        box-shadow: 0 1px 0 #e6d17a;
    }
}

/* --- Ссылка назад в раздел с товарной страницы --- */
.back-link {
    margin: 22px 0 0;
    padding: 0 !important;
    font-size: 15px !important;
}
.back-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f45927;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.back-link a::before {
    content: '←';
    font-size: 17px;
    line-height: 1;
}
.back-link a:hover {
    border-bottom-color: #f45927;
}

/* --- Предупреждающая плашка в тексте (вместо эмодзи) --- */
.note-plate {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0 !important;
    padding: 12px 14px !important;
    border-radius: 3px;
    background: #fff3cd;
    font-size: 15px !important;
    line-height: 1.45;
    color: #7a5b00;
}
.note-plate .fa {
    flex: 0 0 auto;
    padding-top: 2px;
    font-size: 16px;
    color: #d9822b;
}

/* --- Характеристики товара: пары «параметр — значение» ---
   Вместо таблицы с жёлтой шапкой и зеброй: восемь простых пар не нуждаются
   в оформлении ведомости, тут достаточно двух колонок и тонких линеек. */
.specs {
    display: grid;
    grid-template-columns: minmax(150px, 230px) 1fr;
    margin: 4px 0 22px;
}
.specs dt,
.specs dd {
    margin: 0;
    padding: 11px 0;
    border-top: 1px solid #eef0f3;
}
.specs dt {
    padding-right: 18px;
    font-size: 15px;
    line-height: 1.4;
    color: #6b7280;
}
.specs dd {
    font-size: 16px;
    line-height: 1.4;
    color: #1a1a1a;
}
.specs dt:first-of-type,
.specs dt:first-of-type + dd {
    border-top: 0;
}

@media screen and (max-width: 600px) {
    .specs {
        grid-template-columns: 1fr;
    }
    .specs dt {
        padding: 10px 0 0;
    }
    .specs dd {
        padding: 2px 0 10px;
        border-top: 0;
    }
    .specs dt:first-of-type {
        padding-top: 0;
    }
}

/* --- Блок товара: картинка слева, характеристики справа ---
   Пришло на смену инлайновому float: right в тексте страницы.
   Флоат тут не годится: .specs — грид, а грид-контейнер не обтекает
   плавающие элементы, и характеристики уезжали бы под картинку. */
.tape-block {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin: 0 0 28px;
}
.tape-block__pic {
    flex: 0 0 200px;
}
.tape-block__pic img {
    display: block;
    width: 100%;
    height: auto;
}
.tape-block__body {
    flex: 1 1 0;
    min-width: 0;
}
.tape-block .specs {
    margin-top: 0;
}
.tape-block__body p {
    margin: 0;
}

/* оглавление по товарам внутри страницы: у .price-toc отрицательный
   верхний отступ, он рассчитан на страницу общего прайса */
.text .price-toc {
    margin: 14px 0 24px;
}

@media screen and (max-width: 700px) {
    .tape-block {
        flex-direction: column;
        gap: 14px;
    }
    .tape-block__pic {
        flex: 0 0 auto;
        max-width: 220px;
    }
}

/* узкий вариант блока товара — для высокой картинки столбика */
.tape-block--narrow .tape-block__pic {
    flex: 0 0 72px;
}

/* --- Прайс-блоки внутри товарных страниц ---
   Колонок шесть, а колонка .text — 55% ширины: длинные заголовки вроде
   «Количество м.п в рулоне» не помещались и наезжали на соседние.
   Наименованию отдаём меньше, длинным словам разрешаем перенос.
   Липкую шапку включаем: таблицы на товарных страницах выросли.
   Правило перебивает `.text .price-line._th { position: static }` выше. */
@media screen and (min-width: 769px) {
    .text .price-col {
        padding: 12px 8px;
        overflow-wrap: anywhere;
    }
    .text .price-col._first {
        flex: 0 0 30%;
    }
    .text .price-line._th {
        position: -webkit-sticky;
        position: sticky;
        top: 93px;
        z-index: 2;
        background: #fff0ae;
    }
    .text .price-line._th .price-col {
        font-size: 14px;
        line-height: 1.25;
    }
}

/* --- Карточка сопутствующего товара внутри статьи --- */
.related {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 4px 0 26px;
    padding: 16px 20px;
    border: 1px solid #e3e6ea;
    border-left: 3px solid #ffbe00;
    border-radius: 4px;
    background: #fffdf5;
}
.related__pic {
    flex: 0 0 78px;
}
.related__pic img {
    display: block;
    width: 100%;
    height: auto;
}
.related__body {
    flex: 1 1 0;
    min-width: 0;
}
.related__body p {
    margin: 0;
    font-size: 16px !important;
    line-height: 1.5;
}
.related__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 10px !important;
    font-size: 15px !important;
}

@media screen and (max-width: 600px) {
    .related {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

/* --- Компактный вывод прайс-секции (priceSection &view=list) ---
   Шесть колонок не помещаются в колонку .text шириной 55%. Одинаковые
   для всей секции значения снипет выносит наверх, остальное — карточками. */
.price-list {
    margin: 4px 0 22px;
}
/* Общие для секции параметры — не сноска, а характеристики всей линейки:
   подаём как строку фактов, тем же приёмом, что .key-facts на ЛЗС. */
.price-list__common {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 16px !important;
    padding: 13px 0 3px !important;
    border: 0;
    border-top: 2px solid #f45927;
    background: none;
}
.price-common__item {
    padding: 0 22px;
    border-left: 1px solid #e6e8ec;
}
.price-common__item:first-child {
    padding-left: 0;
    border-left: 0;
}
.price-common__v {
    display: block;
    font: 20px/1.15 'ptsans-bold', arial, Helvetica, sans-serif;
    color: #1a1a1a;
}
.price-common__k {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.3;
    color: #6b7280;
}
.text .price-list__items {
    margin: 0;
    padding: 0 !important;
}
.text .price-list__items > li {
    margin: 0 0 10px;
    padding: 14px 16px;
    border: 1px solid #e3e6ea;
    border-left: 3px solid #f45927;
    border-radius: 3px;
    font-size: 16px;
    line-height: 1.45;
}
.text .price-list__items > li::before {
    display: none;
}
.price-item__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 11px;
}
.price-item__name p {
    margin: 0;
    padding: 0;
    font-size: 16px !important;
    line-height: 1.4;
}
.price-item__vals {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}
.price-item__vals + .price-item__vals {
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid #eef0f3;
}
.price-item__val {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.price-item__k {
    font-size: 13px;
    line-height: 1.25;
    color: #9aa3ad;
}
.price-item__v {
    font: 17px/1.2 'ptsans-bold', arial, Helvetica, sans-serif;
    color: #1a1a1a;
}

@media screen and (max-width: 600px) {
    .price-item__vals {
        gap: 10px 20px;
    }
}

/* Кружок с цветом ленты. Класс проставляет снипет по названию позиции. */
.price-swatch {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-top: 2px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 50%;
    box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .08);
}
.price-swatch--yellow     { background: #f5c518; }
.price-swatch--green      { background: #3d8b3d; }
.price-swatch--orange     { background: #f07818; }
.price-swatch--red        { background: #d0342c; }
.price-swatch--black      { background: #2b2b2b; }
.price-swatch--brown      { background: #6b4a2f; }
.price-swatch--grey       { background: #9aa3ad; }
.price-swatch--white-blue { background: repeating-linear-gradient(45deg, #1f5fbf 0 6px, #fff 6px 12px); }
.price-swatch--white-red  { background: repeating-linear-gradient(45deg, #d0342c 0 6px, #fff 6px 12px); }

/* --- Компактный перечень документов товара ---
   Для одной-двух бумаг карточки .docs-main избыточны: там оформление
   рассчитано на список из пяти позиций с пояснениями. */
.text .doc-links {
    margin: 2px 0 22px;
    padding: 0 !important;
}
.text .doc-links li {
    margin: 0;
    padding: 5px 0;
    font-size: 16px;
}
.text .doc-links li::before {
    display: none;
}
.doc-links a {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
}
.doc-links .fa {
    font-size: 16px;
    color: #d0342c;
}
.price-swatch--yellow-black { background: repeating-linear-gradient(45deg, #1a1a1a 0 6px, #f5c518 6px 12px); }

/* --- Прайс-таблицы на телефоне: карточки вместо боковой прокрутки ---------
   Липкую шапку на телефоне включить нельзя, и это не наша недоработка:
   чтобы шесть-семь колонок помещались, таблица едет вбок, а по спецификации
   контейнер с overflow-x: auto становится скролл-портом и по вертикали.
   Внутри такого контейнера position: sticky; top: N ни к чему не липнет —
   вертикальной прокрутки в нём нет, а страница снаружи ему не указ.

   Поэтому решаем причину, а не следствие: на узком экране колонок нет
   вообще. Каждая строка — карточка, подпись стоит рядом со значением,
   листать вбок и держать шапку перед глазами больше не нужно. Ровно тот
   же приём, что в .price-list на товарных страницах, — вид единый.

   Подписи проставляет скрипт в чанке script: он читает шапку и пишет её
   в data-k каждой ячейке, после чего вешает is-cards. Без JS остаётся
   сегодняшнее поведение — таблица с боковой прокруткой. */

/* Отдельная иллюстрация по центру колонки статьи. Раньше центровка
   стояла инлайновыми стилями прямо в контенте — вынес в класс. */
.text .pic-center {
    margin: 22px 0;
    text-align: center;
}
.pic-center img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}
.pic-center figcaption {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.4;
    color: #6b7280;
}

/* Блоки исполнений скрипт собирает рядом с исходными колонками —
   на десктопе они не нужны, показываем их только в карточках. */
.price-vars {
    display: none;
}

/* Подсказка к ленте разделов прайса. На десктопе оглавление переносится
   по строкам и листать нечего, поэтому по умолчанию подсказка скрыта;
   класс is-on ставит скрипт, когда строка действительно не помещается. */
.price-toc-hint {
    display: none;
}

@media screen and (max-width: 768px) {

    /* ---- лента разделов прайса ---- */
    /* без префикса .text: на price.html оглавление лежит вне колонки статьи */
    /* Подсказку не замечали: 13px серым сливалось с текстом. Делаем плашкой —
       крупнее, тёмным текстом, на фирменном жёлтом фоне (обратная связь 07.08.2026) */
    .price-toc-hint.is-on {
        display: flex !important;
        align-items: center;
        gap: 8px;
        margin: 0 0 10px !important;
        padding: 9px 12px !important;
        background: #fff7d6;
        border-left: 3px solid #f4a427;
        border-radius: 4px;
        font: 15px/1.35 'ptsans-bold', arial, Helvetica, sans-serif !important;
        color: #333 !important;
    }
    .price-toc-hint span {
        color: #f45927;
        font-size: 22px;
        line-height: 1;
        flex: 0 0 auto;
        animation: tocNudge 1.6s ease-in-out 3;
    }
    @keyframes tocNudge {
        0%, 100% { transform: translateX(0); }
        50%      { transform: translateX(6px); }
    }
    @media (prefers-reduced-motion: reduce) {
        .price-toc-hint span { animation: none; }
    }
    /* правый край подтаивает — сразу видно, что строка продолжается.
       Маска рисуется по границам блока, а не по содержимому, поэтому
       при прокрутке остаётся на месте; в конце списка её убираем. */
    .price-toc.is-scrollable {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    }
    .price-toc.is-scrollable.is-end {
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* ---- див-таблицы прайса (снипет priceSection, режим table) ---- */
    .price-table.is-cards {
        display: block !important;
        overflow: visible !important;
        border: 0 !important;
    }
    /* подсказка «проведите пальцем» — прокрутки больше нет */
    .price-table.is-cards::before {
        display: none !important;
    }
    .price-table.is-cards .price-line._th {
        display: none !important;
    }
    .price-table.is-cards .price-line {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 11px 16px;
        width: auto !important;
        margin: 0 0 10px !important;
        padding: 13px 15px !important;
        border: 1px solid #e3e6ea !important;
        border-left: 3px solid #f45927 !important;
        border-radius: 3px !important;
        background: #fff !important;
        font: 16px/1.45 'ptsans-regular', arial, Helvetica, sans-serif !important;
    }
    .price-table.is-cards .price-col {
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
    }
    .price-table.is-cards .price-col.is-title {
        display: block !important;
        grid-column: 1 / -1;
        font: 16px/1.35 'ptsans-bold', arial, Helvetica, sans-serif !important;
        color: #1a1a1a !important;
    }
    .price-table.is-cards .price-col[data-k] {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        margin: 0 !important;
        font: 17px/1.2 'ptsans-bold', arial, Helvetica, sans-serif !important;
        color: #1a1a1a !important;
    }
    .price-table.is-cards .price-col[data-k]:empty {
        display: none !important;
    }
    .price-table.is-cards .price-col[data-k]::before {
        content: attr(data-k);
        font: 13px/1.25 'ptsans-regular', arial, Helvetica, sans-serif !important;
        color: #9aa3ad !important;
    }
    .price-table.is-cards .price-col-desc {
        font: inherit !important;
    }
    .price-table.is-cards .price-line:last-child {
        margin-bottom: 0 !important;
    }

    /* позиция с несколькими исполнениями: вместо колонок показываем
       по блоку на исполнение, чтобы значения одного рулона стояли рядом */
    .price-table.is-cards .price-line.is-multi .price-col[data-k] {
        display: none !important;
    }
    .price-table.is-cards .price-vars {
        display: block !important;
        grid-column: 1 / -1;
    }
    .price-table.is-cards .price-var {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 11px 16px;
    }
    .price-table.is-cards .price-var + .price-var {
        margin-top: 11px;
        padding-top: 11px;
        border-top: 1px solid #eef0f3;
    }
    .price-table.is-cards .price-cell {
        display: flex;
        flex-direction: column;
        gap: 3px;
        font: 17px/1.2 'ptsans-bold', arial, Helvetica, sans-serif;
        color: #1a1a1a;
    }
    .price-table.is-cards .price-cell::before {
        content: attr(data-k);
        font: 13px/1.25 'ptsans-regular', arial, Helvetica, sans-serif;
        color: #9aa3ad;
    }

    /* ---- обычные <table class="price-grid"> ---- */
    .table-scroll.is-cards {
        overflow: visible !important;
    }
    .table-scroll.is-cards::before {
        display: none !important;
    }
    .price-grid.is-cards,
    .price-grid.is-cards tbody {
        display: block !important;
        width: 100% !important;
        border: 0 !important;
    }
    .price-grid.is-cards thead {
        display: none !important;
    }
    .price-grid.is-cards tbody tr {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 11px 16px;
        margin: 0 0 10px !important;
        padding: 13px 15px !important;
        border: 1px solid #e3e6ea !important;
        border-left: 3px solid #f45927 !important;
        border-radius: 3px;
        background: #fff !important;
        font: 16px/1.45 'ptsans-regular', arial, Helvetica, sans-serif !important;
    }
    .price-grid.is-cards tbody tr:last-child {
        margin-bottom: 0 !important;
    }
    /* заголовок карточки: первая ячейка строки, а у продолжений rowspan —
       название группы, которое скрипт перенёс в data-title */
    .price-grid.is-cards tbody tr[data-title]::before {
        content: attr(data-title);
        display: block;
        grid-column: 1 / -1;
        font: 16px/1.35 'ptsans-bold', arial, Helvetica, sans-serif;
        color: #1a1a1a;
    }
    .price-grid.is-cards tbody td {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        font: 17px/1.2 'ptsans-bold', arial, Helvetica, sans-serif !important;
        color: #1a1a1a !important;
        background: none !important;
    }
    .price-grid.is-cards tbody td.is-title,
    .price-grid.is-cards tbody td:empty {
        display: none !important;
    }
    .price-grid.is-cards tbody td::before {
        content: attr(data-k);
        font: 13px/1.25 'ptsans-regular', arial, Helvetica, sans-serif !important;
        color: #9aa3ad !important;
    }
}


/* ================== добавлено 07.08.2026 (рабочий ПК) ==================
   ВНИМАНИЕ: css_append.css лежит на домашней машине, здесь его нет — этот блок
   дописан прямо в style.css. Копия блока: _claude/css_append_added_0708.css,
   её нужно влить в css_append.css при следующей сборке из дома. */

/* Кнопка Telegram в шапке: иконка сидела в ссылке с несимметричными полями
   (13px слева, 20px справа) и висела между строкой телефона и строкой кнопок.
   Собираем в аккуратный столбик и выравниваем по центру блока контактов. */
@media screen and (min-width: 769px) {
    ul.social-icon {
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        margin: 0 16px 0 8px;
        gap: 2px;
    }
    ul.social-icon li { display: block; text-align: center; }
    ul.social-icon a.telegram {
        display: block;
        padding: 0 !important;
        line-height: 1;
    }
}


/* Отступ под фиксированную шапку. Раньше было жёстко 130px, а шапка на телефоне
   выросла до ~163px (в неё вернулись кнопки «Заказать счёт» и «Прайс-лист»),
   и заголовок страницы уезжал под неё. Теперь высоту меряет скрипт в чанке
   script и кладёт в --head-h; 176px — запасное значение, если скрипт не сработал.
   (07.08.2026, по жалобе на «поехавшую» мобильную версию) */
@media screen and (max-width: 768px) {
    #content {
        padding-top: calc(var(--head-h, 176px) + 14px) !important;
    }
}


/* Мобильную шапку не трогаем: её компактный вид (логотип + телефон в строку,
   кнопки во второй, Telegram скрыт) задан выше и заказчика устраивает. */

/* --- Пропорции фото товара (07.08.2026) ---
   max-height, добавленный 06.08, применялся к <img> вместе с атрибутами width/height:
   браузер зажимал обе стороны независимо и растягивал снимок по ширине
   (столбики 561x1040 показывались как 388x520 на десктопе и 355x340 на мобильном).
   width/height:auto перебивают атрибуты и возвращают «вписать, сохранив пропорции». */
.topimg img,
.topimg-col img {
    width: auto;
    height: auto;
}

/* --- Карточки столбиков (07.08.2026) ---
   Столбик — предмет с пропорциями 1:10, в квадратике карточки от него оставалась
   нитка шириной 7-13 px. Показываем верх столбика: object-fit:cover с привязкой
   к верхнему краю сам вырезает голову (наклейку, крышку, жёлтый оголовок) —
   отдельные файлы-кропы не нужны. Ширину держим одинаковой у всех четырёх. */
.tape-cards--posts .tape-card-img img {
    width: 38px;
    height: 84px;
    max-width: none;
    max-height: none !important;
    object-fit: cover;
    object-position: 50% 0;
    border-radius: 3px;
}

/* Вертикальные фото после починки пропорций стали заметно уже (столбики — 183 px
   при колонке 355). Поднимаем потолок высоты на узких экранах, чтобы главное фото
   товара не выглядело миниатюрой. */
@media screen and (max-width: 1024px) {
    .topimg img,
    #content > .topimg-col img { max-height: 420px; }
}

/* --- Карта сайта (07.08.2026) ---
   Дерево разделов: три уровня. Оранжевые квадраты-маркеры и отступы обычных
   списков давали на третьем уровне сдвиг под 160 px, поэтому маркеры снимаем,
   вложенность показываем тонкой линейкой слева. */
.text .sitemap-list { padding-left: 0; }
.text .sitemap-list li { padding: 4px 0; }
.text .sitemap-list li::before { display: none; }
.text .sitemap-list > li { padding-top: 12px; }
.text .sitemap-list > li > a {
    font: 19px/1.35 ptsans-bold, arial, Helvetica, sans-serif;
}
.text .sitemap-list .sitemap-list {
    margin: 4px 0 10px 3px;
    padding: 2px 0 2px 18px;
    border-left: 2px solid #e6e8ec;
    font-size: 16px;
}
.text .sitemap-list .sitemap-list > li > a {
    font-family: inherit;
    font-size: 16px;
}
.text .sitemap-list .sitemap-list .sitemap-list { border-left-color: #f4a427; }

/* --- Страница 404: карточки разделов без фотографий ---
   В обычной карточке под снимок отведено 84 px; для иконки это пустое поле. */
.text .tape-card-img._noimg {
    height: 46px;
    font-size: 34px;
    color: #f4a427;
}
.text .tape-card-img._noimg .fa { font-size: inherit; line-height: 1; }

/* --- Официальные представители на странице контактов (07.08.2026) ---
   Было три строки подряд: название, «тел. …», ссылка на сайт — читалось как
   обрывок текста. Теперь карточка в одном ряду с блоками «Головной офис»
   и «Склад». Иконки телефона и сайта берутся по атрибуту href, а не по классу:
   разметка живёт в TV и правится через TinyMCE, классы у ссылок он может снять. */
.contacts-reps .rep-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
    margin: 12px 0 4px;
}
.contacts-reps .rep-card {
    padding: 14px 16px;
    border: 1px solid #e6e8ec;
    border-left: 3px solid #f4a427;
    border-radius: 6px;
    background: #fbfbfc;
}
.contacts-reps .rep-card p {
    margin: 0 !important;
    padding: 0 !important;
}
.contacts-reps .rep-card__name {
    font: 18px/1.3 ptsans-bold, arial, Helvetica, sans-serif;
    color: #222;
}
.contacts-reps .rep-card__what {
    margin-top: 5px !important;
    color: #777;
    font-size: 15px;
    line-height: 1.4;
}
.contacts-reps .rep-card__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 11px !important;
}
.contacts-reps .rep-card__contacts a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 16px;
    text-decoration: none;
}
.contacts-reps .rep-card__contacts a:hover { text-decoration: underline; }
.contacts-reps .rep-card__contacts a::before {
    font: normal normal normal 15px/1 FontAwesome;
    color: #f4a427;
}
.contacts-reps .rep-card__contacts a[href^="tel:"]::before { content: "\f095"; }
.contacts-reps .rep-card__contacts a[href^="http"]::before { content: "\f08e"; }

/* --- Разделители <hr> между блоками (07.08.2026) ---
   На узких экранах .textfull становится flex-контейнером, и <hr> превращался
   в флекс-элемент: ширина считалась по содержимому, линия схлопывалась в
   квадратик 2x2 px. На главной из-за этого пропадали все семь разделителей
   между блоками продукции. Возвращаем линии полную строку. */
.textfull hr {
    flex: 0 0 100%;
    width: 100%;
}
.contacts-reps hr { margin: 8px 0 18px; }

/* --- Ссылка на отказное письмо под кнопкой заказа (07.08.2026) ---
   Через TV product.document.rb шаблон рисовал ради одного документа тяжёлый
   спойлер в жёлтой рамке. Здесь — короткая строка там, где покупатель
   как раз и думает про сертификат: сразу под «Заказать счёт». */
.text .doc-note {
    margin: 10px 0 18px !important;
    font-size: 15px !important;
    line-height: 1.45;
}
.text .doc-note a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: #5a6270;
    text-decoration: none;
    border-bottom: 1px dotted #b9bec7;
}
.text .doc-note a:hover {
    color: #1a1a1a;
    border-bottom-color: #f4a427;
}
.text .doc-note a::before {
    content: "\f0f6";
    font: normal normal normal 14px/1 FontAwesome;
    color: #f4a427;
}

/* --- Сравнение «кирпич / ЛЗС» (07.08.2026) ---
   Обычная <table> получала прайсовое оформление: жёлтая шапка, зебра, рамки —
   ведомость посреди текстовой страницы. Здесь сравнение двух вариантов,
   а не ведомость: те же тонкие линейки, что у .specs, и акцент на своей колонке.
   На узких экранах строка разворачивается сверху вниз — свайпать не нужно. */
.text .vs {
    margin: 8px 0 26px;
}
.text .vs__row {
    display: grid;
    grid-template-columns: minmax(150px, 220px) 1fr 1fr;
    gap: 0 22px;
    padding: 12px 0;
    border-top: 1px solid #eef0f3;
}
.text .vs__row--head {
    padding: 0 0 8px;
    border-top: 0;
}
.text .vs__row--head .vs__k,
.text .vs__row--head .vs__a,
.text .vs__row--head .vs__b {
    font: 15px/1.3 ptsans-bold, arial, Helvetica, sans-serif;
    color: #6b7280;
}
.text .vs__row--head .vs__b { color: #d1541f; }
.text .vs__k {
    font-size: 15px;
    line-height: 1.45;
    color: #6b7280;
}
.text .vs__a {
    font-size: 16px;
    line-height: 1.45;
    color: #7a808a;
}
.text .vs__b {
    font-size: 16px;
    line-height: 1.45;
    color: #1a1a1a;
}

@media screen and (max-width: 700px) {
    .text .vs__row--head { display: none; }
    .text .vs__row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 0;
    }
    .text .vs__k {
        font: 16px/1.35 ptsans-bold, arial, Helvetica, sans-serif;
        color: #1a1a1a;
        margin-bottom: 2px;
    }
    .text .vs__a::before,
    .text .vs__b::before {
        font: 13px/1.3 ptsans-bold, arial, Helvetica, sans-serif;
        letter-spacing: .02em;
    }
    .text .vs__a::before { content: "Кирпич: "; color: #9aa0a6; }
    .text .vs__b::before { content: "Лента ЛЗС: "; color: #d1541f; }
}

/* --- Прайс: жирный только у названия товара (07.08.2026) ---
   Правило .price-grid tbody td:first-child метило колонку «Наименование»,
   но у строк-продолжений (первая ячейка объединена через rowspan) первой
   оказывается «Исполнение» — и часть исполнений выходила жирной вперемешку
   с обычными. Цепляемся за класс ячейки-заголовка, а не за позицию. */
.price-grid tbody td:first-child {
    font-family: inherit;
}
.price-grid tbody td.is-title {
    font-family: 'ptsans-bold', arial, Helvetica, sans-serif;
}

/* --- Переход к позиции прайса (07.08.2026) ---
   С карточек товара ведём не в начало раздела, а к конкретной строке.
   Шапка сайта фиксированная, поэтому строке нужен отступ прокрутки,
   иначе она уедет под шапку. Подсветка гаснет сама. */
.price-line[id],
.price-sec[id] {
    scroll-margin-top: calc(var(--head-h, 176px) + 18px);
}
.price-line:target {
    animation: price-hit 2.6s ease-out 1;
}
@keyframes price-hit {
    0%, 55% { background: #fff3cd; }
    100%    { background: transparent; }
}

/* Отступ прокрутки к позиции прайса: фиксированная шапка сайта плюс липкая
   строка заголовков самой таблицы (её высоту меряет скрипт в --price-th-h).
   На телефоне таблица показывается карточками, липкой строки нет — там 0. */
.price-table .price-line[id] {
    scroll-margin-top: calc(var(--head-h, 176px) + var(--price-th-h, 0px) + 16px);
}

/* --- Отступ прокрутки для якорей внутри текста (07.08.2026) ---
   Шапка сайта фиксированная: без этого заголовок, к которому ведёт ссылка,
   встаёт ровно под верхний край экрана и прячется за шапкой. Правило для
   строк прайса задано отдельно и точнее — там перекрывают две шапки. */
.text [id],
.textfull [id],
#content h2[id],
#content h3[id] {
    scroll-margin-top: calc(var(--head-h, 176px) + 16px);
}

/* --- Прайс: ссылки позиций на страницы товаров (07.08.2026) ---
   Цвет наследуем, кликабельность показывает пунктир — как у ссылки на
   отказное письмо. Позиции без страниц (оптика, таможня) остаются текстом. */
.price-name-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #b9bec7;
}
.price-name-link:hover {
    color: #d1541f;
    border-bottom-color: #f4a427;
}

/* --- Секции «цена по запросу» (ЛЗС, газонная): вместо сетки из «Звоните» --- */
.price-askbox { margin: 0 0 26px; }
.price-ask {
    margin: 0 0 12px;
    padding: 14px 16px;
    border: 1px solid #e6e8ec;
    border-left: 3px solid #f4a427;
    border-radius: 6px;
    background: #fbfbfc;
}
.price-ask__name { font-size: 16px; line-height: 1.45; }
.price-ask__name p { margin: 0 !important; padding: 0 !important; }
.price-ask__facts {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    color: #6b7280;
    font-size: 15px !important;
}
.price-ask__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 12px;
}
.price-ask__label {
    padding: 6px 10px;
    border-radius: 3px;
    background: #fff3cd;
    color: #7a5b00;
    font-size: 14px;
}
.price-ask__tel {
    font: 17px/1.2 'ptsans-bold', arial, Helvetica, sans-serif;
    text-decoration: none;
    white-space: nowrap;
}
.price-ask__tel:hover { text-decoration: underline; }

/* --- Кнопка «Распечатать» у заголовка прайса --- */
.price-print {
    float: right;
    margin: 6px 0 0 16px;
    padding: 8px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    color: #444;
    font: 14px 'ptsans-regular', arial, Helvetica, sans-serif;
    cursor: pointer;
}
.price-print .fa { margin-right: 7px; color: #f4a427; }
.price-print:hover { border-color: #f4a427; color: #1a1a1a; }
@media screen and (max-width: 768px) {
    /* печать со смартфона — редкость, а место в шапке дорогое */
    .price-print { display: none; }
}

/* --- Кнопка «Наверх» (по сайту): выше чата, ниже — ничего не перекрывает --- */
.totop {
    position: fixed;
    right: 16px;
    bottom: 112px;
    z-index: 900;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(34, 34, 34, 0.5);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s, background .2s;
}
.totop::before {
    content: "\f077";
    font: normal normal normal 16px/1 FontAwesome;
}
.totop.is-on { opacity: 1; visibility: visible; }
.totop:hover { background: rgba(34, 34, 34, 0.8); }
@media screen and (max-width: 768px) {
    .totop { right: 12px; bottom: 98px; width: 40px; height: 40px; }
}

/* --- Печать прайса (и любой страницы): только @media print,
       экранной вёрстки не касается --- */
@media print {
    #head, #footer_bg, .breadcrumbs, .price-toc, .totop, .price-print,
    #cookie-notice, jdiv, #jivo-iframe-container, .content_msg, .msg,
    .order-row, .order-btn, .schet, .back-link { display: none !important; }
    #content { padding-top: 0 !important; }
    body { background: #fff; }
    .price-line._th { position: static !important; }
    .price-line, .price-ask { break-inside: avoid; page-break-inside: avoid; }
    .price-sec-title { break-after: avoid; page-break-after: avoid; }
    .price-ask {
        border: 1px solid #bbb;
        border-left-width: 3px;
        background: #fff;
    }
    .price-ask__label { background: none; padding: 0; }
    a { color: #000 !important; text-decoration: none !important; }
    .price-name-link, .doc-note a { border-bottom: 0 !important; }
    .table-scroll { overflow: visible !important; }
    .table-scroll::after, .price-table::after { display: none !important; }
}

/* --- Прайс, правки заказчика (07.08.2026, вечер) ---
   Печать — фишкой в ряду оглавления (стиль даёт .price-toc-link), не плавает. */
.price-toc-print { cursor: pointer; }
@media screen and (max-width: 768px) {
    .price-toc-print { display: none; }
}
/* «Наверх» на мобильном — на одной линии с кнопкой звонка (центр 61px от низа),
   левее пузыря чата (он занимает правый угол: 65px + отступ 20). */
@media screen and (max-width: 768px) {
    .totop { right: 92px; bottom: 41px; }
}

/* --- Слайдер маршрута на контактах (07.08.2026) ---
   Кадры трёх разных пропорций (панорама въезда, горизонтальный вход,
   вертикальная дверь) — поэтому лента одной высоты со скролл-снапом,
   а не рамка фиксированного размера с обрезкой. */
.route-slider { position: relative; margin: 12px 0 4px; }
.route-slider__track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 6px;
}
.route-slider__track::-webkit-scrollbar { display: none; }
.route-slider__track picture { flex: 0 0 auto; scroll-snap-align: center; }
.route-slider__track img {
    display: block;
    height: 400px;
    width: auto;
    max-width: none;
    margin: 0;
    border-radius: 6px;
}
.route-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.45);
    color: #fff;
    cursor: pointer;
}
.route-slider__btn:hover { background: rgba(20, 20, 20, 0.7); }
.route-slider__btn._prev { left: 10px; }
.route-slider__btn._next { right: 10px; }
.route-slider__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px 0 0;
}
.route-slider__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d5d9df;
    cursor: pointer;
}
.route-slider__dot._on { background: #f4a427; }
@media screen and (max-width: 768px) {
    .route-slider__track img { height: 300px; }
    .route-slider__btn { width: 36px; height: 36px; }
}

/* Слайдер: правило img[width][height]{height:auto} (защита пропорций, 04.08)
   специфичнее класса и возвращало кадрам натуральный размер. Дублируем
   селектор с теми же атрибутами — (0,3,1) против (0,2,1). */
.route-slider__track img,
.route-slider__track img[width][height] {
    height: 400px;
    width: auto;
}
@media screen and (max-width: 768px) {
    .route-slider__track img,
    .route-slider__track img[width][height] { height: 300px; }
}

/* Слайдер: на узких экранах колонка контактов — float без ширины, она
   растягивается по содержимому ленты (1481px) и тянет страницу вбок.
   Ограничиваем ленту вьюпортом; на десктопе колонка уже 100vw — безвредно. */
.route-slider,
.route-slider__track {
    max-width: calc(100vw - 20px);
}

/* Контакты, узкие экраны: .right { display:contents } делает .route флекс-элементом.
   Две беды: width:100% у .route считался без паддингов (18+18) — блок 393px в окне
   375 и страница скроллилась вбок ещё ДО слайдера; и min-width:auto не давал
   флекс-элементу ужаться под содержимое ленты. Правим обе, а ограничение
   ленты вьюпортом (100vw) выше по файлу больше не нужно — хватает 100%. */
.contacts-layout .route {
    box-sizing: border-box;
    min-width: 0;
}
.route-slider,
.route-slider__track {
    max-width: 100%;
}

/* Проценты здесь зацикливаются (width:100% флекс-элемента против max-content
   скролл-ленты) — ограничение задаём от вьюпорта: 10+10 поля #content
   и 18+18 паддинги .route. На десктопе колонка уже этого лимита — безвредно. */
.route-slider,
.route-slider__track {
    max-width: calc(100vw - 56px);
}

/* Слайдер v2 (07.08.2026): кадры собраны в единый холст 4:3, слайд занимает
   окно ленты целиком — внутри слайда больше нечего листать. Правила ленты
   натуральной ширины выше по файлу перекрываются этими. */
.route-slider__track picture { flex: 0 0 100%; }
.route-slider__track img,
.route-slider__track img[width][height] {
    width: 100%;
    height: auto;
    max-width: 100%;
}
/* --- Текстовая страница-документ (политика ПДн и подобные) ---
   Базовый .text — колонка 55% под товарные страницы с картинкой справа;
   у документа правой колонки нет, и полстраницы пустовало. */
#content .text--doc {
    width: auto !important;
    max-width: 900px;
    float: none !important;
}

/* --- Печать прайс-листа -------------------------------------------
   До этого печатались все пять экранов: шапка с меню, оглавление,
   формы, футер. На бумаге нужен только сам прайс: строка реквизитов,
   дата и таблицы. Остальное убираем, кегль и отступы ужимаем —
   вместо пяти страниц выходит около двух. */
@media print {
    @page { margin: 12mm; }

    /* всё служебное — долой. jdiv — виджет Jivosite */
    #head, #footer, #footer_bg, .breadcrumbs, .cookie-notice,
    .price-toc, .price-toc-hint, .content_msg, .content_msg_call,
    .msg, .btn-box, .action-box, .order-row, .order-btn, .schet,
    .marquee, .notice-until, jdiv {
        display: none !important;
    }

    /* строка реквизитов вместо шапки: прайс живёт на столе у снабженца,
       и контакты должны остаться на бумаге */
    #content::before {
        content: "ООО «РеполимерЭнерго» · 223034, Минский р-н, г. Заславль, ул. Советская, 122 · +375 (17) 517 56 45 · repolimer77@mail.ru · repolimer.by";
        display: block;
        padding-bottom: 3mm;
        margin-bottom: 4mm;
        border-bottom: 1pt solid #888;
        font: 9pt/1.4 arial, sans-serif;
        color: #333;
    }

    #content { padding: 0 !important; margin: 0 !important; width: auto !important; }

    .price-title {
        margin: 0 0 4mm !important;
        font-size: 14pt !important;
        line-height: 1.3 !important;
    }
    .price-sec-title {
        padding: 5mm 0 2mm !important;
        font-size: 11.5pt !important;
        break-after: avoid-page;
        page-break-after: avoid;
    }

    .price-line {
        font-size: 9pt !important;
        line-height: 1.35 !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .price-line._th { font-size: 8.5pt !important; }
    .price-col { padding: 4px 6px !important; }
    .price-col strong,
    .price-col .bold { font-size: 9pt !important; line-height: 1.35 !important; }
    .price-col-desc { margin-bottom: 3px !important; }

    /* ссылки на товарные страницы на бумаге — обычный текст.
       Подчёркивание у ссылок сайта нарисовано рамкой снизу, а не
       text-decoration — снимаем и её. */
    #content a {
        color: #000 !important;
        text-decoration: none !important;
        border-bottom: 0 !important;
    }

    /* «цена по запросу»: текст и телефон оставляем, кнопку убрали выше.
       На экране подпись и телефон разносит flex; в печати он не действует,
       и телефон прилипал к слову «партии» — ставим двоеточие и отступ. */
    .price-ask {
        border: 1pt solid #bbb;
        padding: 2mm 3mm !important;
        margin: 0 0 3mm !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .price-ask__name p, .price-ask__facts, .price-ask__label, .price-ask__tel {
        font-size: 9pt !important;
        line-height: 1.35 !important;
    }
    .price-ask__name p { margin: 0 0 1mm !important; }
    .price-ask__facts { margin: 0 0 1mm !important; }
    .price-ask__cta { display: block !important; margin: 0 !important; }
    .price-ask__label::after { content: ": "; }
    .price-ask__tel { margin-left: 1mm; font-family: 'ptsans-bold', arial, sans-serif; }

    /* примечание о размерах под таблицами столбиков — компактно, без цветной полосы */
    .price-note {
        margin: 2mm 0 3mm !important;
        padding: 2mm 3mm !important;
        border: 0 !important;
        border-left: 2pt solid #999 !important;
        background: none !important;
        font-size: 9pt !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .price-note p { margin: 0 0 1mm !important; font-size: 9pt !important; line-height: 1.35 !important; }
    .price-note-contacts { font-size: 9pt !important; }
}

/* --- Ровная жирность имён в прайсе (09.08.2026) ---
   «Жирный» на сайте — это семейство ptsans-bold, а не font-weight.
   Базовое правило a { font-family: ptsans-regular } перебивало
   наследование от <strong>, и позиции со ссылкой на товар выходили
   обычными, а три позиции без своей страницы — жирными. Ссылке
   возвращаем шрифт родителя. */
.price-name-link {
    font-family: inherit;
}

/* --- Кнопка «Распечатать» в оглавлении прайса, вид (09.08.2026) ---
   Была одета в ту же жёлтую пилюлю, что и разделы, и терялась среди них.
   Отжимаем вправо и переодеваем: белая, серая рамка, оранжевый принтер —
   читается как действие, а не как ещё один раздел. На телефоне кнопка
   скрыта ещё правилом рабочей сессии — там ей и правда не место. */
.price-toc .price-toc-print {
    margin-left: auto;
    background: #fff;
    border-color: #c9ced6;
    color: #333;
}
.price-toc .price-toc-print:hover {
    background: #f4f6f8;
    border-color: #9aa3ad;
}
.price-toc .price-toc-print .fa {
    color: #f45927;
    margin-right: 3px;
}