/* mosbetontorg.ru */

html,
body {
    background: #F5F4F0;
}

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}

/* Контент-контейнер шире дефолтного Bootstrap (1170px) */
@media (min-width: 1200px) {
    .container {
        width: auto;
        max-width: 1400px;
    }
}

a {
    color: #316694;
    text-decoration: none;
}

h1, .h1 {
    display: block;
    margin-bottom: 15px;
    margin-top: 25px;
    clear: both;
}

.color1 {
    color: #15476f;
}
.color2 {
    color: #bc3128;
}

.table tr:hover {
    background: #fafafa;
}
.card {
    padding: 25px;
}


img {
    border-radius: 2px;
    height: auto;
    max-width: 100%;
}

.btn {
    cursor: pointer;
    border-radius: 2px;
}
.btn.btn-mb {
    margin-bottom: 13px;
}

.btn-primary {
    color: #fff;
    background-color: #15476f;
    border-color: #15476f;
}
.btn-outline-secondary {
    color: #16476e;
    border-color: #16476e;
}
.btn-outline-secondary:hover {
    color: #16476e;
    border-color: #16476e;
    background: #fafafa;
}

.list-group-item:first-child {
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
}
.list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

.container {
    width: 1300px;
    max-width: 100%;
}

.alt-font {
    font-family: 'Russo One', sans-serif;
}

.logo {
    margin: 20px 0 0 0;
    display: block;
}
.logo img {
    /*width: 460px;*/
}
.header .text {
    /* font-size: 18px; */
    font-weight: 500;
    line-height: 24px;
}
.header .text-1 {
    /* letter-spacing: 1px; */
}
.header .text-2 {
    color: #15476f;
}
.header .contacts {
    /* font-size: 18px; */
}
.header .work-time {
    color: #15476f;
    font-size: 14px;
    margin-bottom: 3px;
}
.header .phone {
    font-size: 26px;
    line-height: 22px;
}

.menu-top {
    margin-top: 8px;
    background: url(/includes/img/menu_bg.png);
    border-bottom: 1px solid #ced1da;
    border-top: 1px solid #ced1da;
}
.menu-top ul {
    margin: 0;
    padding: 15px 0 !important;
}
.menu-top li {
    display: inline-block;
    list-style: none;
    padding-right: 25px;
}
@media (max-width: 1140px) {
    .menu-top li { padding: 0 20px; }
}
@media (max-width: 992px) {
    .menu-top li {
        padding: 0 5px !important;
        margin: 0 0 10px;
        width: 32%;
    }
}
@media (max-width: 576px) {
    .menu-top li {
        width: 49%;
    }
}
.menu-top li a {
    color: #15476f;
    /* text-transform: uppercase; */
    /* font-weight: 600; */
    font-size: 18px;
}
.menu-top .spec {
    background: #bc3128;
    border: 0;
    border-radius: 2px;
    /*float: right;*/
    font-size: 16px;
    font-weight: 400;
    margin: 10px 0;
}
.menu-top .spec i {
    padding-right: 6px;
    margin-left: -4px;
}

/* Хлебные крошки — в стиле макета: серый текст, тонкий разделитель «>», hover-цвет акцент */
.breadcrumb {
    background: transparent;
    margin: 0;
    padding: 16px 0;
    font-family: 'Onest', 'Roboto', sans-serif;
    font-size: 13px;
    color: #9C9C9C;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}
.breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    color: #9C9C9C;
}
.breadcrumb .breadcrumb-item a {
    color: #9C9C9C;
    text-decoration: none;
    transition: color .15s;
}
.breadcrumb .breadcrumb-item a:hover {
    color: #E25A1B;
    text-decoration: none;
}
.breadcrumb .breadcrumb-item span {
    color: #6B6B6B;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: '>';
    margin: 0 8px;
    color: #9C9C9C;
    opacity: .4;
    font-weight: 400;
    padding: 0;
}
.sidebar li.list-group-item {
    /*padding: 6px 15px;*/
}
.sidebar li.list-group-item ul {
    margin-top: 4px;
}
.sidebar li.list-group-item ul li {
    line-height: 26px;
    font-size: 14px;
    float: left;
    width: 100%;
}

.table-wrapper {
    overflow: auto;
    width:100%;
}
table.table-price {
    /*width: auto;*/
}
table.table-chars {
    /*font-size: 14px;*/
    width: auto;
}
.item-btn {
    margin-top: -20px;
}
.item-phone {
    font-size: 23px;
    display: block;
    padding: 19px 0 0px;
    line-height: 20px;
    width: 215px;
    margin: 0 0 8px -10px;
}

.w-100 {
    width: 100%;
}
.input-count-val {
    border: none;
    background: transparent!important;
    cursor: default!important;
}
.calc-result {
    background: #e3f2fd;
    padding: 15px 30px;
    margin: -15px -15px 30px -15px;
}
.footer .menu {
    margin: 0;
    padding: 0;
}
.footer .menu li {
    display: inline-block;
    list-style: none;
    padding-right: 20px;
}

@media (max-width: 1140px) {
    .footer .menu > li { padding: 0 5px 5px; }
}
@media (max-width: 992px) {
    .footer .menu {
        margin: 12px 0;
    }
    .footer .menu > li {
        padding: 0 5px !important;
        margin: 0 0 10px;
        width: 32%;
    }
}
@media (max-width: 576px) {
    .footer .menu > li {
        width: 49%;
    }
}
.footer .logo {
    margin: 10px 0 0 0;
}
.footer .logo span {
    font-family: 'Russo One', sans-serif;
    font-size: 34px;
}
.footer .logo div {
    margin-left: 0px;
    font-size: 21px;
}
.custom-file-control:lang(ru)::before {
  content: "Выбрать файл";
}

.element-price input {
    width: 70%;
}
.element-price .result {
    font-size: 20px;
    display: block;
    margin-bottom: 5px;
}

.contacts-page {
    margin: 10px 0 0 30px;
}

.flexslider {
    margin: 0 0 15px!important;
}
.flex-control-nav {
    display: none;
    height: 0px;
    overflow: none;
}
.flex-direction-nav a {
    height: 47px!important;
    top: 48%!important;
}

#horizontal-multilevel-menu.mainMenu {
    background: none;
    float: none;
    min-height: unset;
    font-size: unset;
    list-style: unset;
}
#horizontal-multilevel-menu.mainMenu li {
    float: unset;
}
.menu-top #horizontal-multilevel-menu.mainMenu li a,
.menu-top #horizontal-multilevel-menu.mainMenu li span {
    color: #15476f !important;
    display: inline-block;
    font-weight: 400 !important;
    font-size: 18px;
    padding: 0;
    position: relative;
}
.menu-top #horizontal-multilevel-menu.mainMenu li a:hover {
    text-decoration: underline;
}
#horizontal-multilevel-menu.mainMenu li:last-child {
    padding-right: 0;
}
#horizontal-multilevel-menu li:hover, #horizontal-multilevel-menu li.jshover {
    background: none;
    color: unset;
}
#horizontal-multilevel-menu li:hover a.root-item, #horizontal-multilevel-menu li.jshover a.root-item {
    background: none;
    color: #fff;
}
#horizontal-multilevel-menu li a.root-item-selected {
    background: none !important;
}

#horizontal-multilevel-menu li ul {
    width: 170px;
    padding: 0 !important;
    margin: 0;
}

.menu-top #horizontal-multilevel-menu.mainMenu li ul li a,
.menu-top #horizontal-multilevel-menu.mainMenu li ul li span {
    padding: 7px 15px;
}
.sidebar li.list-group-item ul {
    display: block;
    width: 100%;
}

ul.gosts {

}
ul.gosts li {
    padding: 0 0 15px 0;
}

.table_subcaption span {
    font-size: 16px;
    font-weight: 400;
    padding: 10px 0;
}

p.rsp {
    color: green;
}

#horizontal-multilevel-menu.mainMenu li ul li {
    padding: 0;
}

.letters-list {

}
.letters-list .letters-item {
    display: inline-block;
    margin: 15px 70px 15px 0;
}
.letters-list .letters-item:nth-child(3n) {
    margin-right: 0;
}
.letters-list .letters-item a {
    display: inline-block;
}
.letters-list .letters-item a img {
    max-width: 230px;
    width: 230px;
}

.sertsBox {

}
.sertsBox a {
    float: left;
    margin: 0 28px 40px 0;
    width: 293px;
    max-width: 293px;
}
.sertsBox a img {
    display: block;
}
.sertsBox a span {
    display: block;
    text-align: center;
    padding: 10px 0 0 0;
}
.sertsBox a:nth-child(3n) {
    margin-right: 0;
}
.sertsBox a:nth-child(3n+1) {
    clear: both;
}

.about_items {

}
.about_items .about_item {
    float: left;
    width: 100%;
    clear: both;
    margin: 15px 0;
}

.about_items .about_item .about_img {
    float: left;
    width: 80px;  
}
.about_items .about_item .about_text {
    float: right;
    width: 850px;
    margin-top: 3px;
}
.about_items .about_item1 .about_text {
    margin: 12px 0 0 0;
}
.about_items .about_item3 .about_img {
    margin: 27px 0 0 0;
}
.about_items .about_item2 .about_img {
    margin: 14px 0 0 0;
}

.about_itemsBig .about_item1 .about_img {
    margin: 42px 0 0 0;
}
.about_itemsBig .about_item4 .about_img {
    margin: 13px 0 0 0;
}

#horizontal-multilevel-menu li a.parent_a:after,
#horizontal-multilevel-menu li span.parent_a:after {
    border-top: 6px solid #687891;
    border-left: 4px solid rgba(0, 0, 0, 0);
    border-right: 4px solid rgba(0, 0, 0, 0);
    content: "";
    right: -13px;
    position: absolute;
    top: 12px;
}
#horizontal-multilevel-menu li a.parent_a:hover:after,
#horizontal-multilevel-menu li span.parent_a:hover:after {
    border-top: unset;
    border-bottom: 6px solid #687891;
}
.smallH3 {
    font-size: 20px;
    line-height: 28px;
}

.geo {

}
.geo ul {
    column-count: 2;
}

ul.dostBottom {
    column-count: 2;
}

.sidebarDocs {
    padding: 0;
    margin: 20px 0 0 20px;
}
.sidebarDocs li {
    list-style: none;
    margin: 0 0 10px 0;
}
.sidebarDocs a {
    
}
.sidebarDocs a img {
    padding: 0 8px 0 0;
    position: relative;
    top: -3px;
}
.arendaBtn {
    width: 100%;
    background-color: #316694;
    color: #fff;
}

.sertsBoxSection a {
    float: left;
    margin: 0 27px 0 0;
    width: 170px;
    max-width: 170px;
}
.sertsBoxSection a:nth-child(5) {
    margin-right: 0;
}
.sertsBoxSection a:nth-child(3) {
    margin-right: 10px;
}
.sertsBoxSection a:nth-child(3n+1) {
    clear: none;
}
.sertsBox a img {
    max-width: 100%;
}

.clr {
    clear: both;
}

.letters-list .letters-item {
    display: inline-block;
    margin: 0px 35px 30px 0;
    width: 30%;
}
.letters-list .letters-item a img {
    max-width: 250px;
    width: 250px;
}
.thanks {
    margin-top: 20px;
}

.poddomens {}
.poddomens ul { column-count: 3; }
@media (max-width: 992px) {
    .poddomens ul { column-count: 2; }
}

.footerMenu {}
.footerMenu li.parent {
    position: relative;
}
.footerMenu li.parent a,
.footerMenu li.parent span {
    position: relative;
    display: inline-block;
}
.footerMenu li.parent ul {
    display: none;
    position: absolute;
    top: -145px;
    width: 230px;
    left: -16px;
    background: #f5f5f5;
    border: 1px solid #c1c1c1;
    padding: 0;
    margin: 0;
    text-align: left;
}
.footerMenu li.parent:hover > ul {
    display: block;
    z-index: 99999;
}
.footerMenu li.parent ul li {
    float: left;
    width: 100%;
    clear: both;
    padding: 5px 15px;
    border-bottom: 1px solid #dedede;
}
.footerMenu li.parent ul li a {
    display: block;
}
.footerMenu li.parent > a:after,
.footerMenu li.parent > span:after {
    border-bottom: 6px solid #687891;
    border-left: 4px solid rgba(0, 0, 0, 0);
    border-right: 4px solid rgba(0, 0, 0, 0);
    content: "";
    right: -13px;
    position: absolute;
    top: 11px;
}
.footerMenu li.parent:hover > a:after {
    border-bottom: unset;
    border-top: 6px solid #687891;
}

#flyCons {
    float: right;
    height: 100px;
    position: relative;
    right: 0px;
    margin: 14px 0 0 0;
}

.bigColWhiteBg {
    position: relative;
    z-index: 100;
    background: #fff;
}
.no-pad {
    padding: 0;
}
#flyCons.flyConsPrice {
    margin: 60px 0 0 0;
}
#flyCons.active {
    float: right;
    right: 60px;
    top: 25px !important;  
}

.plusesBox {
    
}
.plusesBox .plus {
    float: left;
    width: 290px;
    text-align: left;
    margin-right: 36px;
    margin-bottom: 20px;
}
.plusesBox .plus:nth-child(3n) {
    margin-right: 0;
}
.plusesBox .plus:nth-child(3n+1) {
    clear: both;
}
.plusesBox .plus img {
    height: 54px;
    display: inline-block;
    margin: 0 0 7px 0;
}
.plusesBox .plus p.red {
    font-weight: 500;
    line-height: 18px;
    font-size: 16px;
    color: #CC5247;
    margin: 5px 0 10px 0;
}
.plusesBox .plus .txt {
    line-height: 18px;
    font-size: 13px;
    color: #282C23;
}

*{box-sizing: border-box;}
body{margin:0;}
input{width:100%}
header{background: #666;padding: 20px; color: #fff; width: 100%;position:fixed;z-index:5}
.para1{background: red; padding: 10px;}
.para2{background: #ddd; padding: 60px;}
aside{width:100%; float: left;}
.right_side{float: right;width:100%;}
.side{background: #ddd; padding: 30px}
/* Удалены debug-заглушки: .fixed{background:red}, footer{height:800px,bg:#666}, .blackside{...},
   .search{background:red} — фиксированный height: 800px на тэге <footer> ломал новый редизайн подвала. */
.main{float: left;width: 100%; position: relative;}
.main .container{display:flex}



.sticky-div.fixed {
    position: fixed;
    background: none;
    padding: 0;
    width: 295px;
    text-align: center;
}
.sticky-div.footstick{position:absolute; bottom:0; top:inherit!important}

.sticky-div.fixed.fixed-absolute {
    position: absolute !important;
    top: unset !important;
    bottom: 0px !important;
}
.stickyPriceFull {
    top: 45px;
}
#bottomWrap {
    display: block;
    width: 100%;
    clear: both;
    float: left;
}

.main-lab {
    margin: 10px;
    max-height: 280px;
}

.advantages.row {
    margin-top: 30px;
    margin-bottom: 20px; }
    .advantages.row > [class*="col-"] {
        margin-bottom: 20px; }

.letters-list.row {
    margin-top: 30px;
    margin-bottom: 20px; }
.letters-list.row > [class*="col-"] {
    margin-bottom: 20px; }

.flex-direction-nav .flex-next {
    right: 0;
}
.flex-direction-nav .flex-prev {
    left: 0;
}
html {
    overflow-x: hidden;
}
.sticky-div.fixed {
    width: auto;
}
.plusesBox .plus {
    margin-right: 3%;
    width: 31%;
}

.sticky-div.fixed {
    width: 195px;
}
#flyCons {
    text-align: left !important;
}
.sticky-div {
    width: 195px;
    text-align: center;
}
.mobile_menu {
    display: none;
}

@media (max-width: 600px) {
    .plusesBox .plus {
        float: left;
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
        text-align: center;
        clear: both;
    }
    .stickyPriceFull {
        top: 0;
    }

    .mobile_menu {
        display: block;
    }
    .mobile_menu {
        /*float: left;*/
        width: 100%;
        padding: 15px 0;
        background: url(/includes/img/menu_bg.png);
        margin: 0 0 15px 0;
    }
    .mobile_menu img.mob_logo {
        max-width: 300px;
        width: 81%;
        float: left;
        margin: 0 0 0 0px;
        padding: 0 15px;
    }
    .mobile_menu a.switcher {
        float: right;
        margin: 11px 15px 0 0;
    }
    .mobile_menu a.switcher img {
        max-width: 30px;
    }
    .clr {
        clear: both;
    }
    .logo {
        display: none;
    }

    .mobile_menu .main_ul {
        display: none;
        list-style: none;
        margin: 20px 0 0;
        padding: 0;
    }
    .mobile_menu .main_ul li:first-child {
        border-top: 1px solid #ced1da;
    }
    .mobile_menu .main_ul li {
        padding: 8px 0;
        border-bottom: 1px solid #ced1da;
        padding: 8px 15px;
    }
    .mobile_menu .main_ul li a {
        display: block;
    }
    .mobile_menu .main_ul ul {
        display: none;
        margin: 10px 0;
    }
    .mobile_menu .main_ul li a.parent_a,
    .mobile_menu .main_ul li span.parent_a {
        position: relative;
        display: block;
    }
    .mobile_menu .main_ul li a.parent_a:after,
    .mobile_menu .main_ul li span.parent_a:after {
        border-top: 6px solid #687891;
        border-left: 4px solid rgba(0, 0, 0, 0);
        border-right: 4px solid rgba(0, 0, 0, 0);
        content: "";
        right: 0;
        position: absolute;
        top: 8px;
    }
    .mobile_menu .main_ul ul li, .mobile_menu .main_ul ul li:first-child {
        border: none;
    }
    .menu-top {
        display: none;
    }
    .sidebar {
        display: none;
    }
    .flexslider {
        display: none;
    }
    .main_h2 {
        padding-top: 0;
    }
    .header .phone {
        margin: 15px 0;
    }
}

.fly_inner .item-phone {
    width: unset;
}
/* было: h2 { padding-top: 20px } — глобальный паддинг на ВСЕ h2 ломал отступы внутри карточек.
   Удалено. Если где-то нужен — добавлять локальным правилом для конкретного контейнера. */

.simple_form {
    margin: 40px 0;
    border: 1px solid #ced1da;
    padding: 20px;
}

.winformer {
    margin: 20px 0;
    text-align: center;
}

@media (max-width: 420px) {
.sticky-div {
    width: 100%;
}
.sticky-div.fixed {
    width: 100%;
}
.sticky-div .item-phone {
    width: 100%;
}
.h5 {
    margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    font-size: 1.25rem;
    margin-top: 0;
}
}
.agenda-pump {
    margin: 0;
  }
  .agenda-pump .detail-block {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    background: #fff;
  }
  .agenda-pump .img-block {
    border: 1px solid #f2f2f2;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 302px;
        -ms-flex: 0 0 302px;
            flex: 0 0 302px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .agenda-pump .name {
    font-weight: 700;
    line-height: 25px;
    font-size: 18px;
    text-align: left;
    padding: 17px 0 14px 24px;
    border-bottom: 1px solid #f2f2f2;
  }
  .agenda-pump .option {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    border-bottom: 1px solid #f2f2f2;
    padding: 0;
  }
  .agenda-pump .option:last-child {
    border-bottom: none;
  }
  .agenda-pump .option strong {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 20%;
        -ms-flex: 0 0 20%;
            flex: 0 0 20%;
    font-size: 18px;
    text-align: left;
    padding: 5px 0 0px 20px;
  }
  .agenda-pump .option span {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    line-height: 20px;
    text-align: left;
    padding: 5px 0 9px 24px;
    border-right: 1px solid #f2f2f2;
  }
  .agenda-pump .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 25px;
    position: relative;
    background: #fff;
  }
  .agenda-pump .item:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(31,56,71,0.15);
    -webkit-filter: blur(35px);
            filter: blur(35px);
    z-index: -1;
  }

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

    .agenda-pump .option strong {
        -webkit-flex: 0 0 50%;
            -ms-flex: 0 0 50%;
                flex: 0 0 50%;
      }
      .agenda-pump .option span {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 45%;
            -ms-flex: 0 0 45%;
                flex: 0 0 45%;
      }
  }
  @media (max-width: 767px) {
    .agenda-pump .item {
      display: block;
    }
    .agenda-pump .img-block {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 200px;
        -ms-flex: 0 0 200px;
        flex: 0 0 200px;
    }
}

#rusprof_banner {
    background: #FFFFFF;
    border: 1px solid #DFDFDF;
    box-sizing: border-box;
    border-radius: 3px;
    font-family: Roboto;
    color: #575757;
    font-size: 16px;
    line-height: 19px;
    padding: 25px;
}

#rusprof_banner .rp_logo {
    margin-top: 15px;
}

#rusprof_banner .title {
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    font-weight: bold;
}

#rusprof_banner .estimate {
    font-size: 14px;
    line-height: 21px;
    color: #2BD075;
}

#rusprof_banner .bar {
    height: 16px;
    width: 100%;
    background: #F0F0F0;
    position: relative;
    margin-top: 10px;
    margin-bottom: 25px;
}
#rusprof_banner .bar .green {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 15%;
    background: linear-gradient(92.98deg, #2ACF76 47.53%, #36E526 100%);
}

#rusprof_banner .results {
    padding: 5px 0;
}

#rusprof_banner .results .line {
    margin: 19px 0;
}

#rusprof_banner .results .line .number {
    min-width: 27px;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
}

#rusprof_banner .results .line .text {
    
}

#rusprof_banner .plus {
    font-size: 24px;
    line-height: 28px;
    display: flex;
    text-align: center;
    color: #2BD077;
}

#rusprof_banner .minus {
    font-size: 24px;
    line-height: 28px;
    display: flex;
    text-align: center;
    color: #AE3D31;
}

#rusprof_banner .neitral {
    font-size: 24px;
    line-height: 28px;
    display: flex;
    text-align: center;
    color: #1E476C;
}

#rusprof_banner .more {
    color: #3E6690;
}

@media (max-width: 1023px) {
    #rusprof_banner .title {
        flex-wrap: wrap;
    }
}

.bnasos_grid .agenda-pump {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0px 10px;
}
.bnasos_grid .agenda-pump .item {
    flex-direction: column;
}

@media (max-width: 480px) {
    .bnasos_grid .agenda-pump {
        grid-template-columns: 1fr;
    }

    .bnasos_grid .agenda-pump .option span {
        font-size: 13px;
        flex: 0 0 65%;
    }
    .bnasos_grid .agenda-pump .option strong {
        font-size: 14px;
        flex: 0 0 35%;
    }
}

.menu_info_page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    list-style: none;
    grid-gap: 10px 10px;
    padding: 0;
}
.menu_info_page li {
    list-style: none;
    padding: 20px;
    margin: 0;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #dfdfdf;
}
.menu_info_page li a {
    font-size: 18px;
    text-transform: uppercase;
}

@media (max-width: 480px) {
    .menu_info_page {
        grid-template-columns: 1fr;
    }
}

.top-geo {
    margin-left: 66px;
    margin-top: -14px;
    display: block;
    margin-bottom: 10px;
}

#citylist .dost_list {
    display: grid;
    gap: 20px 40px;
    grid-template-columns : 1fr 1fr 1fr 1fr;
    justify-content : space-between;
}
#citylist .dost_list li {

}

.agenda-pump.sb .item {
    flex-direction: column;
}

.agenda-pump.sb .img-block {
    flex: auto;
}

.agenda-pump.sb  .name {
    text-align: center;
    padding: 15px;
}

.agenda-pump.sb .option span {
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
}

.agenda-pump.sb .option strong {
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
}

/*
.b24-widget-button-wrapper {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}*/

.mobile_menu {
    position: -webkit-sticky;
    position: sticky;
    z-index: 20;
    top: 0;
}

.mobile_menu__contacts {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 15px;
}

@media (min-width: 601px) {
    .mobile_menu__contacts {
        display: none;
    }
}

.mobile_menu__contacts-phone {
    margin-right: 10px;
    font-size: 18px;
    line-height: 1.2;
    font-family: 'Russo One', sans-serif;
    color: inherit;
    text-decoration: none;
}

@media (min-width: 375px) {
    .mobile_menu__contacts-phone {
        font-size: 20px;
    }
}

.mobile_menu__contacts-phone:hover {
    text-decoration: none;
}

.mobile_menu__contacts-callback {
    border-radius: 4px;
}

.mobile_menu__contacts-email {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}

@media (min-width: 601px) {
    .mobile_menu__contacts-email {
        display: none;
    }
}

@media (max-width: 600px) {
    .header .contacts .phone {
        display: none;
    }

    .header .contacts .address {
        display: none;
    }

    .header .top-geo {
        margin-top: 0;
        margin-left: 0;
    }
}

.header .callback-button {
    display: none;
}

@media (min-width: 601px) {
    .header-row--sticky {
        padding: 0;
    }

    .header-row--sticky .header-row__wrapper {
        position: fixed;
        z-index: 50;
        top: 0;
        width: 100vw;
        padding: 10px 15px;
        background-color: #ffffff;
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
        -webkit-transition: -webkit-transform 0.3s;
        transition: -webkit-transform 0.3s;
        -o-transition: transform 0.3s;
        transition: transform 0.3s;
        transition: transform 0.3s, -webkit-transform 0.3s;
        margin: 0;
    }

    .header-row--sticky .header-row__wrapper::after {
        content: "";
        position: absolute;
        z-index: 5;
        left: 0;
        top: 100%;
        width: 100%;
        height: 60px;
        background-image: -o-linear-gradient(top, rgba(122, 122, 122, 0.1), transparent);
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(122, 122, 122, 0.1)), to(transparent));
        background-image: linear-gradient(to bottom, rgba(122, 122, 122, 0.1), transparent);
    }

    .header-row--sticky .text.text-center {
        display: none;
    }

    .header-row--sticky .text.callback-button {
        display: block;
    }

    .header-row--slide-header .header-row__wrapper {
        -webkit-animation-name: slide-header;
        animation-name: slide-header;
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }

    @-webkit-keyframes slide-header {
        from {
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
        }
        to {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }

    @keyframes slide-header {
        from {
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
        }
        to {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }
}

@media (min-width: 601px) and (max-width: 991px) {
    .header-row--sticky .header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .header-row--sticky .header .callback-button,
    .header-row--sticky .header .contacts {
        width: 50%;
    }
}

.aireview_item {
    position: relative;
    background-color: #fff;
    padding-top: 20px;
    border-bottom: 1px solid #f2f2f2;
}
.aireview_item:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(31, 56, 71, 0.15);
    -webkit-filter: blur(35px);
    /* filter: blur(35px); */
    z-index: -1;
}

/* ===== ПОДВАЛ САЙТА — тёмный, в стиле редизайна ===== */
.site-footer {
    background: #151515;
    color: rgba(255, 255, 255, .65);
    font-family: 'Onest', 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 40px;
}
.site-footer a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    transition: color .15s;
}
.site-footer a:hover {
    color: #fff;
    text-decoration: none;
}
.site-footer__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 44px 20px 28px;
    display: grid;
    grid-template-columns: 1.2fr 1.6fr 1fr;
    gap: 40px;
}
@media (max-width: 900px) {
    .site-footer__inner { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
    /* В стопке выравниваем колонки по центру */
    .site-footer__col { align-items: center; text-align: center; }
    .site-footer__col--menu ul,
    .site-footer__col--menu ol { justify-items: center; }
}
.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__logo img { height: 64px; width: auto; display: block; }
@media (max-width: 768px) { .site-footer__logo img { height: 50px; } }
.site-footer__tag { font-size: 12.5px; color: rgba(255, 255, 255, .5); }

.site-footer__title {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, .4);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 6px;
}

.site-footer__col--menu ul,
.site-footer__col--menu ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.site-footer__col--menu li { margin: 0; }
.site-footer__col--menu a { font-size: 13.5px; }
@media (max-width: 560px) {
    .site-footer__col--menu ul, .site-footer__col--menu ol { grid-template-columns: 1fr; }
}

.site-footer__phone {
    font-size: 18px;
    font-weight: 800;
    color: #fff !important;
    letter-spacing: -.2px;
    margin-bottom: 2px;
}
.site-footer__phone:hover { color: #E25A1B !important; }
.site-footer__mail { font-size: 14px; color: rgba(255, 255, 255, .8) !important; }
.site-footer__addr { font-size: 13px; color: rgba(255, 255, 255, .5); margin-top: 4px; }

.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding: 16px 20px;
}
.site-footer__copy {
    max-width: 1400px;
    margin: 0 auto;
    font-size: 12px;
    color: rgba(255, 255, 255, .35);
    text-align: center;
}

/* Видео-блок в footer.php — карточка в едином стиле со страницей */
.video-section {
    background: #FFF;
    border-radius: 20px;
    padding: 32px;
    margin: 20px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    font-family: 'Onest', 'Roboto', sans-serif;
}
.video-section h2 {
    font-size: 21px;
    font-weight: 800;
    color: #151515;
    margin: 0 0 16px;
    letter-spacing: -.2px;
}
.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #151515;
}
.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
@media (max-width: 600px) {
    .video-section { padding: 20px; border-radius: 14px; }
    .video-section h2 { font-size: 18px; }
}

/* ============================================================
   РЕДИЗАЙН СТРАНИЦЫ ТОВАРА (catalog.element)
   Шаблон-эталон: .claude/templates/product-card-b75-m100-hub-v5.html
   Все правила скоупированы под .product-page чтобы не задеть остальной сайт
   ============================================================ */

:root {
    --pp-bg: #F5F4F0;
    --pp-white: #FFF;
    --pp-dark: #151515;
    --pp-text: #2A2A2A;
    --pp-muted: #6B6B6B;
    --pp-light: #9C9C9C;
    --pp-accent: #E25A1B;
    --pp-accent-h: #C44A12;
    --pp-accent-bg: #FFF4ED;
    --pp-accent-bg2: #FFEADB;
    --pp-blue: #2563EB;
    --pp-blue-bg: #EEF4FF;
    --pp-green: #15803D;
    --pp-green-bg: #EEFBF0;
    --pp-amber: #B45309;
    --pp-amber-bg: #FFFBEB;
    --pp-border: #E2E0DB;
    --pp-border-l: #EEECE8;
    --pp-r: 10px;
    --pp-rl: 14px;
    --pp-rxl: 20px;
    --pp-sh: 0 1px 3px rgba(0, 0, 0, .05);
    --pp-shm: 0 4px 16px rgba(0, 0, 0, .06);
    --pp-shl: 0 8px 32px rgba(0, 0, 0, .07);
    --pp-wa: #25D366;
    --pp-tg: #229ED9;
}

.product-page,
.product-page * {
    box-sizing: border-box;
}

/* При переходе по якорным ссылкам учитываем высоту липкого хедера, чтобы цель не уезжала под него */
.product-page [id] {
    scroll-margin-top: calc(var(--hd-height, 114px) + 16px);
}

.product-page {
    font-family: 'Onest', 'Roboto', sans-serif;
    background: var(--pp-bg);
    color: var(--pp-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.product-page h1 {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.22;
    margin-bottom: 4px;
    letter-spacing: -.4px;
}

.product-page a {
    color: var(--pp-accent);
    text-decoration: none;
}

.product-page a:hover {
    text-decoration: underline;
}

/* SWITCHER */
.product-page .switcher {
    display: inline-flex;
    background: var(--pp-border-l);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 20px;
}

.product-page .sw-btn {
    padding: 9px 20px;
    border-radius: 9px;
    border: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    color: var(--pp-muted);
    background: transparent;
}

.product-page .sw-btn.active {
    background: var(--pp-white);
    color: var(--pp-dark);
    box-shadow: var(--pp-sh);
}

.product-page .sw-btn.active.granite {
    color: var(--pp-blue);
}

/* INTENT NAV */
.product-page .intent-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--pp-white);
    border-radius: var(--pp-rl);
    box-shadow: var(--pp-sh);
}

.product-page .intent-nav .in-label {
    font-size: 11px;
    color: var(--pp-light);
    align-self: center;
    margin-right: 4px;
}

.product-page .intent-badge {
    padding: 8px 14px;
    border-radius: var(--pp-r);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s;
}

.product-page .ib-buy { background: var(--pp-accent-bg2); color: var(--pp-accent); }
.product-page .ib-buy:hover { background: var(--pp-accent); color: #fff; text-decoration: none; }
.product-page .ib-compare { background: var(--pp-blue-bg); color: var(--pp-blue); }
.product-page .ib-compare:hover { background: var(--pp-blue); color: #fff; text-decoration: none; }
.product-page .ib-info { background: var(--pp-green-bg); color: var(--pp-green); }
.product-page .ib-info:hover { background: var(--pp-green); color: #fff; text-decoration: none; }

/* PRODUCT GRID — главная сетка страницы товара.
   DOM-порядок: main-col--top → .pc → main-col--bottom.
   На десктопе .pc стоит справа и спанит обе строки (sticky). На мобильном — всё стопкой,
   .pc встаёт ровно между hero+якорями и секциями. */
.product-page .product-grid {
    display: grid;
    grid-template-columns: 1fr 370px;
    grid-template-rows: auto auto;
    gap: 32px;
    align-items: start;
}
.product-page .main-col,
.product-page .main-col--top,
.product-page .main-col--bottom { min-width: 0; }
.product-page .main-col--top    { grid-column: 1; grid-row: 1; }
.product-page .main-col--bottom { grid-column: 1; grid-row: 2; }
.product-page .pc               { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 1199px) {
    .product-page .product-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 20px;
    }
    .product-page .main-col--top,
    .product-page .main-col--bottom,
    .product-page .pc { grid-column: 1; grid-row: auto; }
    .product-page .pc { position: static; padding: 20px; }
    /* На мобильном .pc — только цена + кнопки. Телефон/соцсети/trust — уже есть в шапке и подвале. */
    .product-page .pc .ph,
    .product-page .pc .wh,
    .product-page .pc .msg-row,
    .product-page .pc .tr { display: none; }
    .product-page .pc .btn1 { margin-top: 14px; }
    .product-page .pc .pv { font-size: 32px; }
}

.product-page .sub {
    font-size: 15px;
    color: var(--pp-muted);
    margin-bottom: 18px;
}

/* Карточки «применение по типу конструкции» — 2 колонки, на мобильном в столбик */
.product-page .pp-app-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 14px 0;
}
@media (max-width: 640px) {
    .product-page .pp-app-grid { grid-template-columns: 1fr; }
}

/* HERO PHOTO WITH OVERLAY */
.product-page .hero-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--pp-rl);
    overflow: hidden;
    margin-bottom: 20px;
    background: var(--pp-dark);
}

/* На десктопе 16:9 съедало весь первый экран: 695px при 312px контента.
   Режем до 21:9 с потолком 480px — заголовок и кнопки видны сразу, ниже начинается страница.
   min-height держит узкие колонки (карточка с сайдбаром), чтобы контент не вылез за фото. */
@media (min-width: 601px) {
    .product-page .hero-photo { aspect-ratio: 21/9; max-height: 480px; min-height: 460px; }
}

.product-page .hero-photo .hp-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product-page .hero-photo .hp-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    color: rgba(255, 255, 255, .2);
    font-size: 12px;
    text-align: center;
}

.product-page .hero-photo .hp-placeholder .ph-icon { font-size: 28px; opacity: .3; }
.product-page .hero-photo .hp-placeholder .ph-text { font-weight: 600; font-size: 13px; color: rgba(255, 255, 255, .3); }
.product-page .hero-photo .hp-placeholder .ph-desc { font-size: 11px; max-width: 280px; color: rgba(255, 255, 255, .2); }

.product-page .hero-photo .hp-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .18) 55%, transparent 100%);
    border-radius: var(--pp-rl);
}

.product-page .hero-photo .hp-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 28px 24px;
    color: #fff;
}

.product-page .hero-photo .hp-content h1 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.18;
    margin-bottom: 6px;
    letter-spacing: -.4px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

.product-page .hero-photo .hp-content .hp-sub { font-size: 14px; color: rgba(255, 255, 255, .75); margin-bottom: 16px; line-height: 1.5; }
.product-page .hero-photo .hp-content .hp-cta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.product-page .hero-photo .hp-content .hp-price { font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -.5px; line-height: 1; }
.product-page .hero-photo .hp-content .hp-price-note { font-size: 11px; color: rgba(255, 255, 255, .6); margin-top: 2px; }

.product-page .hero-photo .hp-content .hp-btn {
    padding: 12px 28px;
    background: var(--pp-accent);
    color: #fff;
    border: none;
    border-radius: var(--pp-r);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s;
    white-space: nowrap;
}

.product-page .hero-photo .hp-content .hp-btn:hover { background: var(--pp-accent-h); }

@media (max-width: 600px) {
    /* hero растёт по контенту (а не зажат 16:9), фото — фоном: H1 + подзаголовок + характеристики не обрезаются */
    .product-page .hero-photo { aspect-ratio: auto; }
    .product-page .hero-photo .hp-img { position: absolute; inset: 0; }
    .product-page .hero-photo .hp-overlay { background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .5) 100%); }
    .product-page .hero-photo .hp-content { position: relative; inset: auto; padding: 18px 16px 16px; }
    .product-page .hero-photo .hp-content h1 { font-size: 22px; }
    .product-page .hero-photo .hp-content .hp-price { font-size: 26px; }
    .product-page .hero-photo .hp-content .hp-sub { font-size: 13px; margin-bottom: 12px; }
    /* плашка характеристик компактнее (2×2, меньше отступы/шрифт) */
    .product-page .sg--hero { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .product-page .sg--hero .sc { padding: 9px 8px; }
    .product-page .sg--hero .sc .v { font-size: 17px; }
    .product-page .sg--hero .sc .l { font-size: 10px; }
}
/* Очень узкие экраны (smartphone portrait) — 4-сетка хар-к в hero сжимается до 2×2 */
@media (max-width: 400px) {
    .product-page .hero-photo .hp-content h1 { font-size: 18px; line-height: 1.15; }
    .product-page .sg--hero { grid-template-columns: repeat(2, 1fr); }
    .product-page .sg--hero .sc { padding: 10px 8px; }
    .product-page .sg--hero .sc .v { font-size: 16px; }
}

/* 1024–1199: карточка цены .pc переносится JS-ом внутрь .hero-photo и
   плавает поверх фото справа-сверху как тёмный «стеклянный» блок (как .sg--hero). */
@media (min-width: 1024px) and (max-width: 1199px) {
    /* фото повыше, чтобы вместить карточку */
    .product-page .hero-photo { aspect-ratio: auto; min-height: 560px; }
    /* заголовок/характеристики не уезжают под карточку */
    .product-page .hero-photo .hp-content { right: 372px; }
    .product-page .hero-photo .pc {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 3;
        width: 332px;
        max-width: 42%;
        margin: 0;
        padding: 22px;
        background: rgba(20, 20, 20, .5);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: var(--pp-rxl);
        box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
        color: #fff;
    }
    /* перекраска содержимого под тёмное стекло */
    .product-page .hero-photo .pc .pl { color: rgba(255, 255, 255, .6); }
    .product-page .hero-photo .pc .pv { color: #fff; }
    .product-page .hero-photo .pc .pu { color: rgba(255, 255, 255, .7); }
    .product-page .hero-photo .pc .pn { color: rgba(255, 255, 255, .55); border-bottom-color: rgba(255, 255, 255, .15); }
    /* табы — в стиле тёмного блока: стеклянные неактивные, сплошной акцент активный */
    .product-page .hero-photo .pc .pt { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .75); }
    .product-page .hero-photo .pc .pt.active { background: var(--pp-accent); border-color: var(--pp-accent); color: #fff; }
    .product-page .hero-photo .pc .btn2 { color: #fff; border-color: rgba(255, 255, 255, .3); }
    .product-page .hero-photo .pc .btn2:hover { border-color: #fff; }
}

/* <1024: .pc в стопке — центрируем описание цены, а рынок и кнопки
   не тянем на всю ширину, ограничиваем и центрируем */
@media (max-width: 1023px) {
    .product-page .pc .pl,
    .product-page .pc .pv,
    .product-page .pc .pn { text-align: center; }
    .product-page .pc .market-price,
    .product-page .pc .btn1,
    .product-page .pc .btn2 {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* SPECS GRID 4-column */
.product-page .sg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--pp-border-l);
    border-radius: var(--pp-rl);
    overflow: hidden;
    margin-bottom: 20px;
}

@media (max-width: 600px) { .product-page .sg { grid-template-columns: repeat(2, 1fr); } }

.product-page .sc { background: var(--pp-white); padding: 14px; text-align: center; }
.product-page .sc .v { font-size: 22px; font-weight: 800; color: var(--pp-dark); }
.product-page .sc .l { font-size: 10px; color: var(--pp-light); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }

/* SG внутри hero: полупрозрачное стекло на тёмном фоне, белый текст */
.product-page .sg--hero {
    background: rgba(255, 255, 255, .08);
    margin-top: 16px;
    margin-bottom: 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .1);
}
.product-page .sg--hero .sc { background: transparent; padding: 12px 10px; }
.product-page .sg--hero .sc .v { color: #fff; font-size: 20px; }
.product-page .sg--hero .sc .l { color: rgba(255, 255, 255, .55); }

/* PRICE CARD (sidebar) */
.product-page .pc {
    background: var(--pp-white);
    border-radius: var(--pp-rxl);
    padding: 24px;
    box-shadow: var(--pp-shl);
    position: sticky;
    /* --hd-height задаётся в header-v2.css; 16px — отступ от низа хедера */
    top: calc(var(--hd-height, 114px) + 16px);
    border: 1px solid var(--pp-border-l);
}
/* На мобильном .pc становится обычным блоком в потоке — никакого sticky/overflow */
@media (max-width: 1199px) {
    .product-page .pc {
        position: static;
        top: auto;
        padding: 20px;
    }
    .product-page .pc .ph,
    .product-page .pc .wh,
    .product-page .pc .msg-row,
    .product-page .pc .tr { display: none; }
    .product-page .pc .btn1 { margin-top: 14px; }
    .product-page .pc .pv { font-size: 32px; }
}

.product-page .price-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.product-page .pt {
    flex: 1;
    padding: 7px;
    border-radius: var(--pp-r);
    border: 1.5px solid var(--pp-border-l);
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    color: var(--pp-muted);
    background: var(--pp-bg);
}
.product-page .pt.active {
    border-color: var(--pp-accent);
    background: var(--pp-accent-bg);
    color: var(--pp-accent);
}
.product-page .pc .pl { font-size: 11px; color: var(--pp-light); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .3px; }
.product-page .pc .pv { font-size: 36px; font-weight: 800; color: var(--pp-dark); line-height: 1.1; }
.product-page .pc .pu { font-size: 14px; font-weight: 400; color: var(--pp-muted); }
.product-page .pc .pn { font-size: 12px; color: var(--pp-light); margin-top: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--pp-border-l); }
.product-page .pc .market-price {
    font-size: 12px;
    color: var(--pp-green);
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--pp-green-bg);
    border-radius: 6px;
    text-align: center;
}

.product-page .btn1 {
    display: block;
    width: 100%;
    padding: 13px;
    background: var(--pp-accent);
    color: #fff;
    border: none;
    border-radius: var(--pp-r);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    text-align: center;
    margin-top: 12px;
    font-family: inherit;
}
.product-page .btn1:hover { background: var(--pp-accent-h); }

.product-page .btn2 {
    display: block;
    width: 100%;
    padding: 11px;
    background: transparent;
    color: var(--pp-text);
    border: 1.5px solid var(--pp-border);
    border-radius: var(--pp-r);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    text-align: center;
    margin-top: 8px;
    font-family: inherit;
}
.product-page .btn2:hover { border-color: var(--pp-dark); }

.product-page .ph {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--pp-dark);
    text-decoration: none;
}
.product-page .ph:hover { color: var(--pp-accent); text-decoration: none; }
.product-page .wh { text-align: center; font-size: 11px; color: var(--pp-light); margin-top: 3px; }

.product-page .msg-row { display: flex; gap: 8px; margin-top: 12px; }
.product-page .msg-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px;
    border-radius: var(--pp-r);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
    color: #fff;
}
.product-page .msg-btn:hover { text-decoration: none; }
.product-page .msg-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.product-page .msg-wa { background: var(--pp-wa); }
.product-page .msg-wa:hover { background: #1FBA5A; }
.product-page .msg-tg { background: var(--pp-tg); }
.product-page .msg-tg:hover { background: #1B89B9; }

.product-page .tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--pp-border-l);
}
.product-page .tri { text-align: center; font-size: 10px; color: var(--pp-muted); line-height: 1.3; }
.product-page .tri b { display: block; font-size: 13px; color: var(--pp-dark); font-weight: 700; }

/* SECTION CARD */
.product-page .s {
    background: var(--pp-white);
    border-radius: var(--pp-rxl);
    padding: 32px;
    margin-bottom: 20px;
    box-shadow: var(--pp-sh);
}
.product-page .s h2 { font-size: 21px; font-weight: 800; margin: 0 0 16px; letter-spacing: -.2px; }
.product-page .s h3 { font-size: 16px; font-weight: 700; margin: 24px 0 10px; }
.product-page .s p { font-size: 15px; margin: 0 0 14px; }
.product-page .s > *:last-child { margin-bottom: 0; }

/* Ужимаем карточки на мобильном — меньше padding, меньше радиус, меньше заголовок */
@media (max-width: 600px) {
    .product-page .s { padding: 20px 16px; border-radius: 14px; }
    .product-page .s h2 { font-size: 18px; }
    .product-page .s h3 { font-size: 15px; margin: 18px 0 8px; }
}

/* ANCHOR NAV */
/* 50px от табов до следующего блока — на всех страницах с табами. */
.product-page .anav { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 50px; }
/* В карточке товарного табы закрывают верхнюю колонку, а следующий блок стоит в нижней:
   между ними ещё gap сетки (32px, до 1199px — 20px). Вычитаем его, чтобы вышло те же 50px. */
.product-page .main-col--top > .anav:last-child { margin-bottom: 18px !important; }
@media (max-width: 1199px) {
    .product-page .main-col--top > .anav:last-child { margin-bottom: 30px !important; }
}
.product-page .anav a {
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--pp-border);
    color: var(--pp-muted);
    text-decoration: none;
    transition: all .2s;
}
.product-page .anav a:hover { border-color: var(--pp-accent); color: var(--pp-accent); background: var(--pp-accent-bg); }
/* На мобиле чипы навигации подрастают до комфортной зоны нажатия (было 32px). */
@media (max-width: 600px) {
    .product-page .anav { gap: 7px; }
    .product-page .anav a { padding: 10px 14px; font-size: 12.5px; }
}

/* TABLES */
.product-page .ft { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0; }
.product-page .ft th, .product-page .ft td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--pp-border-l); }
.product-page .ft th { font-weight: 600; color: var(--pp-dark); width: 45%; }
.product-page .ft td { color: var(--pp-muted); }
.product-page .ft tr:hover { background: var(--pp-bg); }

.product-page .dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; border: 1px solid var(--pp-border-l); border-radius: var(--pp-r); overflow: hidden; margin: 16px 0; }
.product-page .dt th { background: var(--pp-dark); color: #fff; padding: 10px 14px; text-align: left; font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.product-page .dt td { padding: 10px 14px; border-bottom: 1px solid var(--pp-border-l); }
.product-page .dt tr:last-child td { border-bottom: none; }
.product-page .dt tbody tr:hover { background: var(--pp-accent-bg); }

.product-page .vs { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; border: 1px solid var(--pp-border-l); border-radius: var(--pp-r); overflow: hidden; margin: 16px 0; }
.product-page .vs th { padding: 12px 14px; text-align: left; font-weight: 600; font-size: 12px; }
.product-page .vs td { padding: 10px 14px; border-bottom: 1px solid var(--pp-border-l); }
.product-page .vs tr:last-child td { border-bottom: none; }
/* Заголовок — единый цвет для всех ячеек строки (как левая колонка), независимо от col-hl/col-bl */
.product-page .vs thead th,
.product-page .vs thead th.col-hl,
.product-page .vs thead th.col-bl {
    background: var(--pp-bg);
    border-bottom: 1px solid var(--pp-border-l);
}
/* Подсветка колонок в теле — тёплая/холодная */
.product-page .vs td.col-hl { background: var(--pp-accent-bg); }
.product-page .vs td.col-bl { background: var(--pp-blue-bg); }
/* Hover на строку: лёгкое затемнение поверх любого фона колонки (не ломает оранжевый/синий тон) */
.product-page .vs tbody tr td { transition: background-image .15s; }
.product-page .vs tbody tr:hover td { background-image: linear-gradient(rgba(0, 0, 0, .045), rgba(0, 0, 0, .045)); }

/* INFO BOXES & EXAMPLES */
.product-page .info-box {
    padding: 20px 24px;
    border-left: 4px solid var(--pp-accent);
    background: var(--pp-accent-bg);
    border-radius: var(--pp-r);
    margin: 16px 0;
    font-size: 14px;
    line-height: 1.7;
}
.product-page .info-box strong { color: var(--pp-dark); }
.product-page .info-blue { border-left-color: var(--pp-blue); background: var(--pp-blue-bg); }

.product-page .example {
    padding: 20px 24px;
    border-radius: var(--pp-rl);
    background: var(--pp-bg);
    margin: 16px 0;
    font-size: 14px;
}
.product-page .example .ex-title { font-weight: 700; font-size: 13px; color: var(--pp-dark); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 10px; }
.product-page .example .ex-line { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--pp-border-l); }
.product-page .example .ex-line:last-child { border: none; padding-top: 10px; font-weight: 700; font-size: 16px; color: var(--pp-accent); }

/* COMPARE GRADES GRID */
.product-page .cg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0; }
@media (max-width: 700px) { .product-page .cg { grid-template-columns: 1fr; } }
.product-page .cc { padding: 18px; border-radius: var(--pp-rl); border: 1.5px solid var(--pp-border-l); transition: all .2s; }
.product-page .cc:hover { box-shadow: var(--pp-shm); }
.product-page .cc.cur { border-color: var(--pp-accent); background: var(--pp-accent-bg); }
.product-page .cc .cm { font-size: 17px; font-weight: 800; margin-bottom: 2px; }
.product-page .cc .ck { font-size: 12px; color: var(--pp-muted); margin-bottom: 8px; }
.product-page .cc .cp { font-size: 20px; font-weight: 800; color: var(--pp-dark); margin-bottom: 8px; }
.product-page .cc .cu { font-size: 12px; color: var(--pp-muted); line-height: 1.5; }
.product-page .cc a { color: inherit; text-decoration: none; }

/* EQUAL GRID */
.product-page .eq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 16px 0; }
@media (max-width: 600px) { .product-page .eq-grid { grid-template-columns: 1fr; } }
.product-page .eq { padding: 18px; border-radius: var(--pp-rl); border: 1px solid var(--pp-border-l); transition: all .2s; }
.product-page .eq:hover { box-shadow: var(--pp-shm); }
.product-page .eq .eq-t { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.product-page .eq .eq-d { font-size: 13px; color: var(--pp-muted); margin-bottom: 8px; line-height: 1.5; }
.product-page .eq .eq-v { font-size: 18px; font-weight: 700; color: var(--pp-dark); }

/* VARIANT LINKS */
.product-page .vlinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
@media (max-width: 600px) { .product-page .vlinks { grid-template-columns: repeat(2, 1fr); } }
.product-page .vlink { padding: 14px; border-radius: var(--pp-rl); border: 1px solid var(--pp-border-l); text-align: center; text-decoration: none; transition: all .2s; }
.product-page .vlink:hover { border-color: var(--pp-accent); box-shadow: var(--pp-shm); text-decoration: none; }
.product-page .vlink .vl-cat { font-size: 11px; color: var(--pp-light); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 3px; }
.product-page .vlink .vl-name { font-size: 14px; font-weight: 700; color: var(--pp-dark); margin-bottom: 5px; }
.product-page .vlink .vl-price { font-size: 16px; font-weight: 800; color: var(--pp-accent); }

/* minmax(0,1fr): без него длинное слово в подписи распирает свою колонку и они разъезжаются по ширине. */
.product-page .nlinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
@media (max-width: 600px) { .product-page .nlinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.product-page .nlink { padding: 14px; border-radius: var(--pp-rl); background: var(--pp-amber-bg); text-align: center; text-decoration: none; transition: all .2s; border: 1px solid transparent; }
.product-page .nlink:hover { border-color: var(--pp-amber); box-shadow: var(--pp-shm); text-decoration: none; }
.product-page .nlink .nl-name { font-size: 13px; font-weight: 700; color: var(--pp-amber); margin-top: 4px; }
/* Подпись под названием — используется в блоке перелинковки на соседние разделы каталога (хаб). */
.product-page .nlink .nl-sub { font-size: 11.5px; line-height: 1.35; color: var(--pp-light); margin-top: 3px; }

/* STRENGTH BAR */
.product-page .strength-bar { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.product-page .strength-bar .day { font-size: 12px; font-weight: 600; color: var(--pp-dark); min-width: 56px; }
.product-page .strength-bar .bar { flex: 1; height: 22px; background: var(--pp-border-l); border-radius: 4px; overflow: hidden; }
.product-page .strength-bar .fill { height: 100%; border-radius: 4px; }
.product-page .strength-bar .pct { font-size: 12px; font-weight: 600; min-width: 36px; text-align: right; }

/* PIE CHART */
.product-page .pie-row { display: flex; align-items: center; gap: 28px; margin: 20px 0; flex-wrap: wrap; }
.product-page .pie-chart { width: 150px; height: 150px; border-radius: 50%; flex-shrink: 0; }
.product-page .pie-legend { flex: 1; font-size: 13px; line-height: 2; }
.product-page .pie-legend span { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* FAQ */
.product-page .faq { border-bottom: 1px solid var(--pp-border-l); }
.product-page .faq:last-child { border: none; }
.product-page .fq {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--pp-dark);
    gap: 12px;
    transition: color .2s;
    user-select: none;
}
.product-page .fq:hover { color: var(--pp-accent); }
/* Chevron-стрелка без фона. Анимация синхронизирована с .fa (та же длительность и easing). */
.product-page .fq .arr {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: transparent;
    font-size: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 8px;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.product-page .faq.open .fq .arr {
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23E25A1B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* Закрыто = display:none, никаких отступов в DOM-потоке.
   JS перед раскрытием меняет на display:block + max-height: scrollHeight,
   на закрытие через transitionend возвращает обратно. */
.product-page .fa {
    display: none;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.4, 0, .2, 1);
}
.product-page .faq.open .fa { display: block; }
/* Шрифт ответа — принудительно фирменный (внутри IncludeFile Битрикса может уйти в default-serif) */
.product-page .fa,
.product-page .fa *,
.product-page .fai,
.product-page .fai * {
    font-family: 'Onest', 'Roboto', sans-serif;
}
.product-page .fai { padding: 0 0 15px; font-size: 14px; color: var(--pp-muted); line-height: 1.75; }

/* REVIEWS */
.product-page .rv { background: var(--pp-bg); border-radius: var(--pp-rl); padding: 20px; margin-top: 12px; }
.product-page .rv-h { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.product-page .rv-av {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--pp-accent-bg);
    color: var(--pp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.product-page .rv-n { font-weight: 700; font-size: 14px; }
.product-page .rv-d { font-size: 11px; color: var(--pp-light); }
.product-page .rv-s { color: #F59E0B; font-size: 13px; letter-spacing: 2px; margin-bottom: 6px; }
.product-page .rv-t { font-size: 14px; line-height: 1.7; }
.product-page .rv-tag { display: inline-block; margin-top: 6px; font-size: 11px; padding: 3px 10px; background: var(--pp-green-bg); color: var(--pp-green); border-radius: 12px; font-weight: 600; }

/* DOCS */
.product-page .doc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
@media (max-width: 700px) { .product-page .doc-grid { grid-template-columns: repeat(2, 1fr); } }
.product-page .doc { padding: 16px; border-radius: var(--pp-rl); border: 1px solid var(--pp-border-l); text-align: center; transition: all .2s; cursor: pointer; }
.product-page .doc:hover { border-color: var(--pp-accent); box-shadow: var(--pp-shm); }
.product-page .doc .doc-t { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.product-page .doc .doc-d { font-size: 11px; color: var(--pp-muted); }
.product-page .doc .doc-btn { display: inline-block; margin-top: 6px; font-size: 11px; padding: 3px 10px; background: var(--pp-accent-bg); color: var(--pp-accent); border-radius: 12px; font-weight: 600; }

/* FACTORY */
.product-page .factory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
@media (max-width: 600px) { .product-page .factory { grid-template-columns: 1fr; } }
.product-page .fac { padding: 18px; border-radius: var(--pp-rl); border: 1px solid var(--pp-border-l); text-align: center; }
.product-page .fac .fac-v { font-size: 17px; font-weight: 800; color: var(--pp-dark); }
.product-page .fac .fac-l { font-size: 12px; color: var(--pp-muted); margin-top: 4px; line-height: 1.4; }

/* GUARANTEES */
.product-page .guarantee-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0; }
@media (max-width: 600px) { .product-page .guarantee-grid { grid-template-columns: 1fr; } }
.product-page .guarantee { padding: 18px; border-radius: var(--pp-rl); background: var(--pp-green-bg); border: 1px solid transparent; }
.product-page .guarantee .g-title { font-weight: 700; font-size: 14px; color: var(--pp-green); margin-bottom: 4px; }
.product-page .guarantee .g-text { font-size: 13px; color: var(--pp-text); line-height: 1.6; }

/* CALCULATOR */
.product-page .calc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; }
@media (max-width: 700px) {
    .product-page .calc-grid { grid-template-columns: 1fr 1fr; }
    .product-page .calc-grid .cb { grid-column: span 2; }
}
.product-page .cf label { display: block; font-size: 11px; font-weight: 600; color: var(--pp-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px; }
.product-page .cf input, .product-page .cf select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1.5px solid var(--pp-border);
    border-radius: var(--pp-r);
    font-size: 14px;
    font-family: inherit;
    line-height: 1;
    transition: border-color .2s;
    background: var(--pp-white);
    box-sizing: border-box;
}
.product-page .cf input:focus, .product-page .cf select:focus { outline: none; border-color: var(--pp-accent); }
/* Селекты в калькуляторе — кастомный chevron вместо нативной стрелки */
.product-page .cf select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236B6B6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    cursor: pointer;
}
.product-page .cf select::-ms-expand { display: none; }
/* Узкий вариант .cf — не растягивается на всю ширину (для «Бетононасос») */
.product-page .cf--narrow { max-width: 340px; }
.product-page .cb {
    padding: 10px 22px;
    background: var(--pp-dark);
    color: #fff;
    border: none;
    border-radius: var(--pp-r);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s;
    height: 44px;
    white-space: nowrap;
}
.product-page .cb:hover { background: #333; }
.product-page .cr {
    margin-top: 16px;
    padding: 18px 22px;
    background: var(--pp-accent-bg);
    border-radius: var(--pp-rl);
    display: none;
    border: 1px solid var(--pp-accent-bg2);
}
.product-page .cr.vis { display: block; }
.product-page .cr .rt { font-size: 28px; font-weight: 800; color: var(--pp-accent); }
.product-page .cr .rb { font-size: 13px; color: var(--pp-muted); margin-top: 4px; line-height: 1.6; }

.product-page .abn-box {
    background: var(--pp-blue-bg);
    border: 1.5px solid var(--pp-blue);
    border-radius: var(--pp-rl);
    padding: 20px 24px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.product-page .abn-box .ab-text { font-size: 14px; color: var(--pp-dark); }
.product-page .abn-box .ab-text strong { font-size: 15px; display: block; margin-bottom: 3px; }
.product-page .abn-box .ab-btn {
    padding: 10px 22px;
    background: var(--pp-blue);
    color: #fff;
    border: none;
    border-radius: var(--pp-r);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
}
.product-page .abn-box .ab-btn:hover { opacity: .9; text-decoration: none; }

/* ORDER FORM SECTION */
.product-page .form-section {
    background: linear-gradient(135deg, var(--pp-dark) 0%, #2D2D2D 100%);
    border-radius: var(--pp-rxl);
    padding: 36px;
    margin-bottom: 20px;
    color: #fff;
}
.product-page .form-section h2 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.product-page .form-section .form-sub { font-size: 14px; color: rgba(255, 255, 255, .5); margin-bottom: 20px; }
.product-page .form-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .product-page .form-stack { grid-template-columns: 1fr; } }
.product-page .form-stack .form-comment { grid-column: 1 / -1; }
.product-page .form-stack .form-submit { grid-column: 1 / -1; }
.product-page .form-stack label { display: block; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .5); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px; }
.product-page .form-stack input, .product-page .form-stack select, .product-page .form-stack textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1.5px solid rgba(255, 255, 255, .15);
    border-radius: var(--pp-r);
    font-size: 14px;
    font-family: inherit;
    background: rgba(255, 255, 255, .07);
    color: #fff;
}
.product-page .form-stack select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.55)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer;
}
.product-page .form-stack select::-ms-expand { display: none; }
/* Опции при раскрытии — тёмные, чтобы совпадало с формой */
.product-page .form-stack select option {
    background: #2A2A2A;
    color: #fff;
}
.product-page .form-stack input::placeholder,
.product-page .form-stack textarea::placeholder { color: rgba(255, 255, 255, .3); }
.product-page .form-stack input:focus,
.product-page .form-stack select:focus,
.product-page .form-stack textarea:focus { outline: none; border-color: var(--pp-accent); }
.product-page .form-stack textarea { resize: vertical; min-height: 110px; font-family: inherit; line-height: 1.5; }
/* Дейт-пикер в тёмной форме: белая иконка календаря через filter, без нативного UI */
.product-page .form-stack input[type="date"] {
    color-scheme: dark;
    font-family: inherit;
    position: relative;
}
.product-page .form-stack input[type="date"]::-webkit-calendar-picker-indicator {
    /* brightness(0) → красит всё в чистый чёрный, invert(1) → в чистый белый.
       Без brightness(0) нативная иконка не была pure-black и invert давала серый. */
    filter: brightness(0) invert(1);
    opacity: .55;
    width: 18px;
    height: 18px;
    margin-right: 2px;
    cursor: pointer;
    transition: opacity .15s;
}
.product-page .form-stack input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.product-page .form-stack input[type="date"]:not(:focus):not(:valid)::-webkit-datetime-edit { color: rgba(255, 255, 255, .3); }
/* Прячем нативные стрелки number-инпута */
.product-page input[type="number"]::-webkit-outer-spin-button,
.product-page input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-page input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.product-page .form-submit {
    display: inline-block;
    width: auto;
    padding: 14px 96px;
    background: var(--pp-accent);
    color: #fff;
    border: none;
    border-radius: var(--pp-r);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s;
    margin-top: 0;
    justify-self: center;
}
.product-page .form-submit:hover { background: var(--pp-accent-h); }
.product-page .form-section form { margin: 0; }
.product-page .form-note { font-size: 11px; color: rgba(255, 255, 255, .3); margin-top: 8px; text-align: center; }

/* FINAL CTA */
.product-page .cta {
    background: var(--pp-dark);
    border-radius: var(--pp-rxl);
    padding: 40px;
    text-align: center;
    margin-bottom: 40px;
    color: #fff;
}
.product-page .cta h2 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.product-page .cta p { color: rgba(255, 255, 255, .5); font-size: 14px; margin-bottom: 20px; }
.product-page .cta .btn-c {
    display: inline-block;
    padding: 14px 40px;
    background: var(--pp-accent);
    color: #fff;
    border: none;
    border-radius: var(--pp-r);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s;
    text-decoration: none;
}
.product-page .cta .btn-c:hover { background: var(--pp-accent-h); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(226, 90, 27, .35); text-decoration: none; }
.product-page .cta-msg { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }


/* Таблицы на мобильном — горизонтальный скролл вместо переполнения */
@media (max-width: 600px) {
    .product-page .vs td, .product-page .vs th,
    .product-page .dt td, .product-page .dt th { padding: 7px 8px; font-size: 12px; }
    .product-page .vs,
    .product-page .dt,
    .product-page .ft {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        font-size: 12px;
        -webkit-overflow-scrolling: touch;
    }
}

/* INFO BOX — green variant */
.product-page .info-green { border-left-color: var(--pp-green); background: var(--pp-green-bg); }
.product-page .info-amber { border-left-color: #d98a1f; background: #FFF6E9; }

/* PHOTO GRID (после таблицы характеристик) */
.product-page .photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0 0;
}
@media (max-width: 600px) {
    .product-page .photo-grid { grid-template-columns: repeat(2, 1fr); }
}
.product-page .photo-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--pp-r);
    display: block;
}

/* STEPS (install guide) */
.product-page .steps { counter-reset: pp-step; margin: 16px 0; }
.product-page .step {
    position: relative;
    padding: 16px 16px 16px 56px;
    margin-bottom: 10px;
    background: var(--pp-bg);
    border-radius: var(--pp-rl);
    counter-increment: pp-step;
}
.product-page .step::before {
    content: counter(pp-step);
    position: absolute;
    left: 16px;
    top: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pp-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}
.product-page .step-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; color: var(--pp-dark); }
.product-page .step-desc { font-size: 13px; color: var(--pp-muted); line-height: 1.6; }

/* CLASS MAP (марки бетона решёткой) */
.product-page .class-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 16px 0; }
.product-page .cm-item { padding: 10px; border-radius: var(--pp-r); border: 1px solid var(--pp-border-l); text-align: center; font-size: 13px; transition: all .2s; }
.product-page .cm-item:hover { border-color: var(--pp-accent); background: var(--pp-accent-bg); }
.product-page .cm-item .cm-m { font-weight: 700; font-size: 14px; color: var(--pp-dark); }
.product-page .cm-item .cm-c { color: var(--pp-muted); font-size: 12px; }
.product-page .cm-item.active { background: var(--pp-accent-bg2); border-color: var(--pp-accent); }

/* WIDE TABLE — для большой матрицы материалов */
.product-page .wt {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    border: 1px solid var(--pp-border-l);
    border-radius: var(--pp-r);
    overflow: hidden;
    margin: 16px 0;
}
.product-page .wt th {
    background: var(--pp-dark);
    color: #fff;
    padding: 9px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.product-page .wt td { padding: 9px 10px; border-bottom: 1px solid var(--pp-border-l); }
.product-page .wt tr:last-child td { border-bottom: none; }
.product-page .wt tbody tr:hover { background: var(--pp-accent-bg); }
@media (max-width: 700px) {
    .product-page .wt { display: block; overflow-x: auto; }
}

/* Антибот-ловушка (honeypot): убрана за пределы экрана — человек её не видит и не заполняет,
   а боты-автозаполнители вписывают значение и отсекаются на сервере. Не использовать display:none
   (часть ботов такие поля пропускает — нам нужно, чтобы бот её заполнил). */
.oconfirm-trap {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* Офферные блоки карточки (компактный «производитель» после hero + «подача в день») —
   стили вынесены из инлайна, на переменных темы. Марко-/цено-независимы, на всех карточках. */
.product-page .pp-offer { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 16px 18px; }
.product-page .pp-offer--accent { border: 2px solid var(--pp-accent, #E25A1B); background: linear-gradient(180deg, var(--pp-accent-bg, #FFF4ED) 0%, #fff 70%); }
.product-page .pp-offer__main { flex: 1; min-width: 250px; }
.product-page .pp-offer__badge { display: inline-block; background: var(--pp-accent, #E25A1B); color: #fff; font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 20px; margin-bottom: 7px; }
.product-page .pp-offer__head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.product-page .pp-offer__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pp-accent-bg, #FFF4ED); color: var(--pp-accent, #E25A1B); font-size: 18px; flex: none; }
.product-page .pp-offer__title { font-size: 18px; font-weight: 800; line-height: 1.25; }
.product-page .pp-offer__text { margin: 0; font-size: 13.5px; color: var(--pp-muted, #444); }
.product-page .pp-offer__cta { display: flex; flex-direction: column; gap: 8px; min-width: 150px; }
.product-page .pp-offer__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--pp-accent, #E25A1B); color: #fff; font-weight: 700; padding: 9px 16px; border-radius: 9px; text-decoration: none; font-size: 14px; border: none; cursor: pointer; font-family: inherit; }
.product-page .pp-offer__btn:hover { background: var(--pp-accent-h, #c84e16); }
.product-page .pp-offer__msgs { display: flex; gap: 8px; }
.product-page .pp-offer__msgs .msg-btn { flex: 1; justify-content: center; }
@media (max-width: 600px) {
    .product-page .pp-offer__cta { width: 100%; min-width: 0; }
    .product-page .pp-offer__title { font-size: 16px; }
}

/* ==================== ХАБ /katalog/beton-tovarnyy/ ==================== */
/* Чек-листы .chk (узлы 3/6/7/9) — не было в теме, переносим из макета узлов */
.product-page .chk { list-style: none; padding: 0; margin: 12px 0; }
.product-page .chk li { padding: 8px 0 8px 28px; position: relative; border-bottom: 1px solid var(--pp-border-l); font-size: 14px; }
.product-page .chk li:last-child { border-bottom: none; }
.product-page .chk li:before { content: "✓"; position: absolute; left: 4px; top: 8px; color: var(--pp-green); font-weight: 700; }
.product-page .chk li strong { color: var(--pp-dark); }

/* Hero-бейджи хаба: 5 в ряд (масштаб производства вместо спек одной марки) */
/* Бейджи hero на мобиле — одной строкой, а не сеткой 2×2: сетка занимала пол-экрана
   и отодвигала кнопки за первый экран. Ужимаем шрифт и отступы, чтобы 4 колонки влезли. */
@media (max-width: 600px) {
    .product-page .hero-photo .sg--hero { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 11px 7px; }
    .product-page .hero-photo .sg--hero .sc { padding: 0 2px; }
    .product-page .hero-photo .sg--hero .v { font-size: 16px; }
    .product-page .hero-photo .sg--hero .l { font-size: 8.5px; letter-spacing: 0; line-height: 1.2; }
}
@media (max-width: 360px) {
    .product-page .hero-photo .sg--hero .v { font-size: 14px; }
    .product-page .hero-photo .sg--hero .l { font-size: 7.5px; }
}

/* Кнопки скачивания прайса/договора */
.hub-dl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.hub-dl a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--pp-dark); background: var(--pp-bg); border: 1px solid var(--pp-border); border-radius: 9px; padding: 9px 14px; }
.hub-dl a:hover { border-color: var(--pp-accent); color: var(--pp-accent); }

/* Заглушки под ассеты (фикс-пропорции, чтобы вёрстка не ехала до фото) */
/* Класс висит на самом <img> (инфографика-SVG): держим ширину контейнера, но не растягиваем выше исходных 720px. */
.hub-asset { display: block; width: 100%; max-width: 760px; height: auto; border-radius: var(--pp-rl); background: #fff; border: 1px solid var(--pp-border-l); margin: 14px 0; }
/* Инфографика всегда вписывается в ширину экрана — без горизонтального скролла.
   На узком экране подписи мелкие, поэтому картинка кликабельна: тап открывает SVG в полный размер. */
.hub-asset-link { display: block; text-decoration: none; }
/* Растровые схемы в <figure> (страница безусадочного бетона): во всю ширину колонки, с подписью. */
.product-page .bz-fig { margin: 18px 0; }
.product-page .bz-fig .hub-asset { max-width: 100%; margin: 0; }
.product-page .bz-fig figcaption { font-size: 13px; line-height: 1.45; color: var(--pp-muted); margin-top: 8px; }
/* На мобиле схемы - на всю ширину экрана без полей карточки: подписи на них мелкие. */
@media (max-width: 600px) {
    /* 16px - поле карточки .s, 15px - поле контейнера страницы. */
    .product-page .s .bz-fig { margin-left: -31px; margin-right: -31px; }
    .product-page .bz-fig .hub-asset { border-radius: 0; border-left: 0; border-right: 0; }
    .product-page .bz-fig figcaption { padding: 0 16px; }
}
.hub-asset-link:hover .hub-asset { border-color: var(--pp-accent); }
@media (max-width: 760px) {
    .hub-asset-link { position: relative; }
    .hub-asset-link:after {
        content: "Нажмите, чтобы увеличить";
        display: block; text-align: center;
        font-size: 11.5px; color: var(--pp-light);
        margin: -6px 0 10px;
    }
}
.hub-ph { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; background: repeating-linear-gradient(45deg, #f4f2ee, #f4f2ee 12px, #efece6 12px, #efece6 24px); color: var(--pp-light); font-size: 13px; padding: 24px; border-radius: var(--pp-rl); border: 1px dashed var(--pp-border); margin: 14px 0; }

/* Прайс-таблица хаба на мобиле — горизонтальный скролл, как у прочих .wt */
.product-page .hub-price-wrap { overflow-x: auto; }

/* ===== ГЛАВНАЯ (.main-page) — доборы к дизайн-системе карточек ===== */
/* Развилка «частник/подрядчик»: две крупные карточки вместо трёх. */
.product-page .cg--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .product-page .cg--2 { grid-template-columns: 1fr; } }
/* Заголовок и текст внутри .cc на главной (в карточках марок там своя типографика .cm/.cp). */
.product-page .cc h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--pp-dark); }
.product-page .cc p { font-size: 13.5px; line-height: 1.6; margin: 0 0 8px; color: var(--pp-muted); }
.product-page .cc p:last-child { margin-bottom: 0; }
/* Крупная цифра в плитке (доставка, цифры завода). */
.product-page .num { font-size: 26px; font-weight: 800; color: var(--pp-accent); line-height: 1.1; }
.product-page .numlbl { font-size: 12.5px; color: var(--pp-muted); line-height: 1.5; margin-top: 4px; }
/* Акцентная плитка раздела в перелинковке (товарный бетон). */
.product-page .nlink--acc { border-color: var(--pp-accent); background: var(--pp-accent-bg); }
/* Главная без sticky-сайдбара: контент на всю ширину контейнера. */
.product-page .product-grid--full { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .product-page .product-grid--full { grid-template-columns: minmax(0, 1fr); } }
/* Вторая кнопка hero — контурная на тёмном фоне (как «рассчитать стоимость» в шапке). */
.product-page .btn1--ghost { background: transparent; border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; }
.product-page .btn1--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
/* Кнопки hero — в один ряд (у .btn1 по умолчанию width:100%, иначе они падают друг под друга). */
.product-page .hp-btns { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
/* На широком экране кнопки по контенту (иначе на всю ширину контейнера растягиваются),
   на узком — делят строку поровну. */
.product-page .hp-btns .btn1 { width: auto; flex: 0 1 auto; margin-top: 0; padding: 13px 26px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
@media (max-width: 600px) {
    /* Компактнее: текст в одну строку, кнопки не занимают полэкрана по высоте. */
    .product-page .hp-btns { gap: 8px; margin-top: 14px; }
    .product-page .hp-btns .btn1 { flex: 1 1 0; min-width: 0; padding: 10px 6px; font-size: 12px; font-weight: 600; white-space: nowrap; border-radius: 8px; }
}
@media (max-width: 400px) { .product-page .hp-btns .btn1 { font-size: 11.5px; padding: 10px 4px; } }

/* Быстрый расчёт — компактная заявка в середине главной. */
.product-page .qc-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; margin: 16px 0 0; }
.product-page .qc-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.product-page .qc-f label { font-size: 12.5px; color: var(--pp-muted); font-weight: 600; }
.product-page .qc-f input, .product-page .qc-f select {
    width: 100%; padding: 11px 12px; font-size: 14px; font-family: inherit;
    border: 1.5px solid var(--pp-border); border-radius: 9px; background: #fff; color: var(--pp-dark);
}
.product-page .qc-f input:focus, .product-page .qc-f select:focus { outline: none; border-color: var(--pp-accent); }
.product-page .qc-submit { grid-column: 1 / -1; width: auto; justify-self: start; margin-top: 4px; padding: 13px 28px; }
.product-page .qc-contacts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pp-border-l); }
.product-page .qc-phone { font-size: 19px; font-weight: 800; color: var(--pp-dark); text-decoration: none; letter-spacing: -.2px; }
.product-page .qc-phone:hover { color: var(--pp-accent); }
.product-page .qc-msg { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 900px) { .product-page .qc-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
    .product-page .qc-form { grid-template-columns: minmax(0, 1fr); }
    .product-page .qc-submit { width: 100%; justify-self: stretch; }
    .product-page .qc-msg { margin-left: 0; width: 100%; }
    .product-page .qc-msg .msg-btn { flex: 1 1 0; }
}

/* Плитка разделов на узком экране: одна колонка и текст по левому краю.
   В две колонки по 152px длинные названия («Керамзитобетон», «Промышленные полы»)
   рвутся по одному слову в строку и плитки разъезжаются по высоте. */
@media (max-width: 560px) {
    .product-page .nlinks { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .product-page .nlink { text-align: left; padding: 12px 14px; }
    .product-page .nlink .nl-name { margin-top: 0; font-size: 14px; }
    .product-page .nlink .nl-sub { margin-top: 2px; font-size: 12px; }
}

/* Благодарственные письма — плитка сканов. */
.product-page .letters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.product-page .letter { display: block; text-decoration: none; }
.product-page .letter img {
    display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
    border: 1px solid var(--pp-border); border-radius: 10px; background: #fff; transition: all .2s;
}
.product-page .letter:hover img { border-color: var(--pp-accent); box-shadow: var(--pp-shm); }
.product-page .letter-cap { display: block; margin-top: 7px; font-size: 12px; color: var(--pp-muted); text-align: center; line-height: 1.3; }
@media (max-width: 1000px) { .product-page .letters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .product-page .letters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* ══════════════════════════════════════════════════════════════
   ХАБ ТОЩЕГО БЕТОНА /katalog/toshchiy-beton/
   ══════════════════════════════════════════════════════════════ */

/* Пирог основания: слои сверху вниз, рабочий слой подсвечен */
.product-page ul.layers { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.product-page ul.layers li {
    padding: 11px 14px;
    background: #F7F6F3;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-r);
    font-size: 14px;
    line-height: 1.45;
}
.product-page ul.layers li.acc { background: #FFF4ED; border-color: var(--pp-accent); }
.product-page ul.layers li.acc strong { color: var(--pp-accent); }

/* Оценочные ячейки в сравнительных таблицах */
.product-page .wt td.good { color: #1d7a3d; }
.product-page .wt td.warn { color: #b8481a; }
.product-page .wt td.muted { color: var(--pp-muted); }
.product-page p.muted { color: var(--pp-muted); font-size: 13px; }

@media (max-width: 600px) {
    .product-page ul.layers li { font-size: 13px; padding: 10px 12px; }
}

/* ══════════════════════════════════════════════════════════════
   КАРТОЧКИ КЕРАМЗИТОБЕТОНА — классы из узлов раздела.
   Без них .card/.grid2/.grid3/.step не оформлены, а <h4> внутри
   карточек рендерится дефолтом браузера и выглядит крупнее <h3>.
   ══════════════════════════════════════════════════════════════ */
.product-page .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.product-page .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.product-page .card {
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    padding: 15px;
    background: #fff;
}
.product-page .card.acc { border-color: var(--pp-accent); background: var(--pp-accent-bg, #FFF4ED); }
.product-page .card h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; line-height: 1.35; }
.product-page .card p  { margin: 0 0 8px; font-size: 13.5px; color: #4a4740; }
.product-page .card p:last-child { margin-bottom: 0; }


@media (max-width: 640px) {
    .product-page .grid2,
    .product-page .grid3 { grid-template-columns: 1fr; }
    .product-page .card h4 { font-size: 14.5px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ХАБ ТЯЖЁЛОГО БЕТОНА — подсветка строк и ячеек в таблицах
   .hl ставится на tr (вся строка) или на отдельные td: так в тексте
   выделяют «свою» строку — например В22,5/М300 в таблице классов.
   ═══════════════════════════════════════════════════════════════════ */
.product-page .wt tr.hl > td,
.product-page .wt tr.hl > th { background: #FFF6E9; }
.product-page .wt td.hl { background: #FFF6E9; font-weight: 600; }
.product-page .wt tr.hl td.good,
.product-page .wt td.good.hl { background: #E8F5E9; }
.product-page .wt tr.hl > td:first-child { box-shadow: inset 3px 0 0 var(--pp-accent); }

/* Подпись под таблицей или схемой: раньше .muted работал только на td */
.product-page p.muted { font-size: 13px; color: var(--pp-muted); margin: 6px 0 0; }