.text-banner{position:absolute;z-index:2;top:35%;left:29%;text-align:center;color:#fff}
.text-banner p{font-size:19px;width:80%;position:relative;margin:55px auto}
a.title-card {
    color: #0071B6;
}
#main-uslugi{text-align:center;z-index:2;position:relative;margin-top:-16%;padding-bottom:9%}
a.staty-href{color:#000}
a.staty-href:hover{color:#ff4f3d}
div#content li{margin:5px 0}
#tooltip{z-index:9999;position:absolute;display:none;top:0;left:0;background-color:#004370;padding:5px 10px;color:#fff;opacity:.9;border-radius:5px}
div#tabs li {
    list-style-type: none !important;
}

.politika-form {
	font-size:13px;
}
.centr-contact-block {
    margin-top: 20px;
}

.ia-title.js-acc-open h2 {
    margin: 10px 0 !important;
}

.column {
    column-count: 2;
}
.reg-content-image img {
    width: 46%;
    margin: 10px 2%;
}

.posad-content img{margin-left:3px}
section.posad-content .obmen {
    margin: 0px 15px 30px;
}

section.posad-content-remont #text-block1 {
    width: 57%;
    padding-right: 30px;
    float: left;
    margin: 20px 15px;
}
#text-block1 {
    width: 100%;
    padding-right: 30px;
    float: left;
    margin: 20px 15px;
}
.text-block1-image{float:right;width:40%;margin-top:25px}
.text-block1-image img{width:100%}
.home-tabs-links li{padding-bottom:20px}
.home-tabs-links li.active a{color:#e26456!important}
.tab-content-full{text-align:left}
section#posad-vopros-zakaz-1{background:#f8fafa;padding:30px;border-left:3px solid #e26456;margin:0 0 30px;text-align:center}
.tab-content.active img{float:left;height:160px}
.tab-content-mini{border-bottom:1px solid #e8eaea}
.tab-content-full li::before {
    display: block;
    float: left;
    content: "—";
    color: rgb(41, 89, 142);
    font-weight: 900;
    padding-right: 10px;
}
.tab-content-full li {
	list-style-type: none !important;
}

.home-tabs-links li {
    display: inline-block;
}
.katalog-page {
    padding: 10px 0 0;
}
.oborudovanie-obmen-block{width:50%;float:left}
.oborudovanie-obmen-block h3{font-size:16px!important;font-weight:600!important}
.oborudovanie-obmen{border-bottom:1px solid #e8eaea}
.grey-text{color:#7e96a5}
section#home-tabs h2{font-size:22px;padding:20px 0 0}
.home-tabs-links{text-align:center;padding-bottom:20px}
.home-tabs-links a{margin:0 10px;color:#064f7b;font-weight:600;border-bottom:1px solid}
.home-tabs-links a:hover{color:#000}
#nav-top{position:relative;margin:auto;width:100%;height:40px;text-align: center;}
#nav-top li.active{background:#ff4f3d}
#nav-top a{color:#fff}
#nav-top li:hover{background:#77cdff}
section#top{background:#47a3da}
.center-top{display: inline-block;margin: auto;}
#home-tabs{background:#fff;margin:20px 0 30px;box-shadow:0 2px 6px rgba(163,163,163,0.7);position:relative}
#home-tabs h2{font-size:18px;text-align:center;font-weight:400;text-transform:uppercase;color:#343434;line-height:30px}
#home-tabs .tabs-buttons{width:26%;float:left;display:block;color:#343434;border-bottom:1px solid #dcdcdc;background:#fff}
#home-tabs .tabs-buttons li{display:block;line-height:30px;border-top:1px solid #dcdcdc;padding:10px 15px;cursor:pointer;font-size:15px;position:relative}
#home-tabs .tabs-buttons li.active{border-bottom:2px solid #00adef;background:#fff;border-right:none;z-index:1;box-shadow:-4px 5px 20px -7px rgba(0,0,0,0.27)}
#home-tabs .tabs-buttons li:hover{color:#000}
#home-tabs .tab-content{width:850px;float:right;color:#222328;display:none}
span.icon-akcia img{padding-right:10px}
#home-tabs .tab-content h3{font-weight:400;margin:15px 0;font-size:1.375rem}
#home-tabs .tab-content.active{display:block;box-shadow:0 2px 8px rgba(0,0,0,0.25);padding:30px;position:relative;min-height:587px}
.tab-content.active a{color:#00558e}
#home-tabs .tab-content{width:74%;float:left}
.clear::after{display:table;content:"";clear:both}
#tovar{padding:20px;box-shadow:0 0 10px rgba(0,0,0,0.1)}
#tovar h2{font-size:30px;text-align:center;text-transform:uppercase;padding:20px}
*{margin:0;padding:0}
body{font-family:'Montserrat',sans-serif;color:#4B4B4B;background:none;font-size:14px;line-height:20px}
h1,h2,h3,h4,h5{font-family:'Montserrat',sans-serif}
.center{margin:auto;max-width:1200px;margin-top:8px}
span.old-prise{font-size:17px;text-decoration:line-through}
.button{cursor:pointer;display:block;margin:20px auto;border:1px solid transparent;border-radius:10px;background:#a5c8dc;color:#fff;line-height:30px;width:250px;text-align:center;box-shadow:0 2px 4px rgba(0,0,0,0.25);font-size:20px;transition:all .3s ease}
.button:hover{color:#FFF;background:#b34134;border:1px solid #b34134}
.videoWrapper{margin:20px auto;position:relative;padding-bottom:56.25%;padding-top:25px;height:0}
.videoWrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}
#ob-right{width:48%;float:right;background:#F1F6FA;padding:20px}
#ob-left{width:48%;float:left;background:#F1F6FA;padding:20px}
.table-block{width:100%;overflow:auto}
.imgTable{margin:5px;width:300px;height:0 auto}
#akcia-main img{max-width:150px;height:auto;border-radius:8px;flex-shrink:0}
#contacts-img{padding:5px;float:right;border:1px solid #00558E;margin:-20px 0 20px}
#help-cards{margin:-20px -51px 0}
.pluso{margin:20px 20px 0 0;float:right}
.opt-image-top{max-width:250px;height:auto;border:1px solid #ccc;padding:3px;margin:0 0 10px 10px;float:right}
.opt-image{max-width:250px;height:auto;border:1px solid #ccc;padding:3px}
#delivery_1{width:20px;margin-top:4px;margin-right: 5px;}
#delivery_2{width:20px;margin-top:4px;margin-right: 5px;}
#delivery_3{width:20px;margin-top:4px;margin-right: 5px;}
#delivery_4 {width: 20px;margin-top: 4px;margin-right: 5px;}
label.delivery.input-parent p {
    margin-top: 0px !important;
}
div#cart-form-page h4 {
    margin: 20px 0;
    text-transform: uppercase;
    display: inline-block;
    border-bottom: 1px solid;
}
.checkbox.radio-zakaz label {
    width: auto;
}
.oformit-zakaz {
    background: #ff4f3d;
    color: white;
    text-align: center;
    float: right;
    margin-top: 20px;
    transition: 0.2s;
}

.oformit-zakaz a {
    color: white;
    padding: 10px 20px;
    display: block;
}

.oformit-zakaz:hover {
    background: #b12415;
    transition: 0.2s;
}
a{color:#ff4f3d}
a.help-list{color:#0372B6;font-size:20px;line-height:30px}
a.help-list:hover{text-decoration:underline}
table{width:100%;text-align:center}
f
.delete{width:17px;height:17px;display:block;margin:0 auto;border:none;background:url(../images/cross102.png) no-repeat,#5D91BC;background-size:15px 15px;background-position:1px center}
.delete:hover{background:url(../images/cross102.png) no-repeat,#ff4f3d;background-size:15px 15px;background-position:1px center}
.ya-share2.ya-share2_inited{padding:20px}
.title{text-align:center!important}
.count{width:100px}
.form-group .input-sm{width:80px!important;margin-left:10px!important}
table img{margin:5px;width:150px;height:75px}
#content h1{font-size:30px;line-height:normal;margin-bottom:20px}
h1 span{text-transform:uppercase;color:#e13421}
.help-list li{margin:10px 0;font-size:18px}
#content ul li {
    list-style: inside;
}

div#content ol {
    margin: 0px 25px;
    line-height: 18px;
}

div#content h3 {
    margin: 10px 0;
}
#content p{margin:10px 0;word-spacing:2px;line-height:20px}
#content dl{display:block;width:100%;margin-bottom:20px;line-height:20px;min-height:20px;height:auto}
#content dt{display:block;width:50%;float:left;line-height:20px}
#content dd{display:block;width:50%;float:left;line-height:20px}
.B_crumbBox{padding-bottom:50px}
/* ── Breadcrumbs (Главная / Раздел / Страница) ──
   The HTML has a literal » text node between <li> items baked into every
   page. font-size:0 on the <ul> collapses those » (and all whitespace),
   then only the item text (span) and the CSS "/" separator are restored. */
#Breadcrumbs{margin:6px 0 22px}
#Breadcrumbs ul{font-size:0;margin:0;padding:0;list-style:none;line-height:1.5}
#Breadcrumbs li{display:inline;margin:0}
#Breadcrumbs li:before{display:none;content:none}
#Breadcrumbs li:not(:last-child)::after{content:"/";font-size:14px;color:#c4ccd4;margin:0 9px}
#Breadcrumbs span{font-size:14px}
#Breadcrumbs a{color:#0071B6;text-decoration:none;transition:color .15s}
#Breadcrumbs a:hover{color:#005a91;text-decoration:underline}
#Breadcrumbs li:last-child a{color:#8a94a0;cursor:default;pointer-events:none}
.site-breadcrumbs{margin:6px 0 22px;background:transparent}
.site-breadcrumbs ol{font-size:0;margin:0;padding:0;list-style:none;line-height:1.5}
.site-breadcrumbs li{display:inline;margin:0;list-style:none}
.site-breadcrumbs li:before{display:none;content:none}
.site-breadcrumbs li:not(:last-child)::after{content:"/";font-size:14px;color:#c4ccd4;margin:0 9px}
.site-breadcrumbs a,.site-breadcrumbs span{font-size:14px}
.site-breadcrumbs a{color:#0071B6;text-decoration:none;transition:color .15s}
.site-breadcrumbs a:hover{color:#005a91;text-decoration:underline}
.site-breadcrumbs li:last-child span{color:#8a94a0}
/* ── Site header: logo / business name / phone numbers ──────────
   Rebuilt on flexbox with wrapping instead of the old float+fixed-
   width layout, which needed a hand-tuned override at ~7 different
   breakpoints (1225/900/830/770/700/500/370px) and still broke at
   in-between widths. Flex-wrap reflows itself at any width; only two
   breakpoints remain, purely for type-scale/spacing, not structure. */
#header{position:relative;display:flex;flex-wrap:wrap;align-items:center;
  gap:10px 24px;max-width:1200px;width:100%;box-sizing:border-box;
  margin:10px auto 0;padding:16px 20px}
#header>*{margin:0}
.clear{clear:both}
.clear1{clear:both;height:20px}
#header .clear{display:none}
#logo{width:220px;height:64px;flex:0 0 auto;
  background:url(../images/Tricolor_logo_Horiz.png) no-repeat center/contain}
#center-header-block{flex:1 1 240px;min-width:0;
  padding-left:16px;margin-left:0;border-left:2px solid #005598;
  color:#00558E;text-transform:uppercase;font-weight:600;
  font-size:20px;line-height:1.3;height:auto}
#right-header-block,#right-header-block2{flex:0 0 auto;width:auto;height:auto}
.phone,.phone2{display:flex;align-items:center;gap:8px;white-space:nowrap;
  color:#fff;background-color:#ff4f3d;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.75-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:14px center;background-size:20px 20px;
  font-size:18px;font-weight:600;padding:12px 18px 12px 44px;
  border-radius:6px;width:auto;margin:0;float:none}
.phone a,.phone2 a{color:#fff;text-decoration:none}
@media screen and (max-width:1000px){
#header{flex-direction:column;align-items:center;text-align:center;padding:16px;gap:10px}
#center-header-block{flex:0 0 auto;border-left:none;border-top:2px solid #005598;
  margin:0;padding-top:10px;text-align:center;width:100%;box-sizing:border-box}
}
@media screen and (max-width:480px){
#logo{width:170px;height:50px}
#center-header-block{font-size:16px}
.phone,.phone2{font-size:15px;padding:10px 14px 10px 38px;
  background-size:18px 18px;background-position:11px center}
}
#wrapper{width:1200px;min-height:700px;min-height:100vh;margin:50px auto;background:#fff;max-width:100%}
#mini-cart{float:right;height:30px;margin-top:5px;margin-right:5px;background:url(../images/shopping122.png) no-repeat,#ff4f3d;background-size:25px 25px;background-position:5px 1px;width:140px}
#mini-cart span#cart-name{display:block;float:left;margin-top:5px;margin-left:35px}
#mini-cart span#cart-count{display:block;float:left;margin-top:5px;margin-left:5px}
nav{margin:auto;width:100%;background:#47a3da}
#nav{width:1200px;max-width:100%;position:relative}
#nav li{float:left;padding:0;list-style:none;line-height:40px;text-align:center;-webkit-transition:color .3s ease;transition:color .3s ease}
#nav li>a{display:block;padding:0 14px}
#nav li.active:hover{color:#fff}
#nav a{color:#fff;text-decoration:none}
#nav a:hover{color:#fff}
#nav li:hover{background:#77cdff}
#nav li.active{background:#ff4f3d}
#slider{height:240px;padding:19px}
/* ── Homepage banner: exact-size desktop (1400×400) and mobile (767×631)
   carousels, edited/rendered separately — never cropped or stretched, since
   the container ratio always matches the reference design ratio. ── */
#banner-desktop,#banner-mobile{background:#eaf2f4;position:relative;overflow:hidden;width:100%}
#banner-desktop{display:block;aspect-ratio:1400/400}
#banner-mobile{display:none;aspect-ratio:767/631}
@media screen and (max-width:767px){
  #banner-desktop{display:none}
  #banner-mobile{display:block}
}
.banner-swiper-desktop,.banner-swiper-desktop .swiper-wrapper,
.banner-swiper-mobile,.banner-swiper-mobile .swiper-wrapper{height:100%}
.banner-swiper-desktop .swiper-slide,.banner-swiper-mobile .swiper-slide{background-size:cover;background-position:center;position:relative}
.banner-swiper-desktop .swiper-pagination-bullet,.banner-swiper-mobile .swiper-pagination-bullet{background:#fff;opacity:.65}
.banner-swiper-desktop .swiper-pagination-bullet-active,.banner-swiper-mobile .swiper-pagination-bullet-active{opacity:1;background:#0071B6}
.banner-swiper-desktop .swiper-button-prev,.banner-swiper-desktop .swiper-button-next,
.banner-swiper-mobile .swiper-button-prev,.banner-swiper-mobile .swiper-button-next{color:#fff}
.banner-swiper-desktop .swiper-button-prev:after,.banner-swiper-desktop .swiper-button-next:after,
.banner-swiper-mobile .swiper-button-prev:after,.banner-swiper-mobile .swiper-button-next:after{font-size:22px}
.banner-slide-title{position:absolute;transform:translate(-50%,-50%);text-align:center;
  max-width:85%;white-space:pre-wrap;text-shadow:0 2px 6px rgba(0,0,0,.45);margin:0;line-height:1.25;
  font-family:'Montserrat',sans-serif}
.banner-slide-btn{position:absolute;transform:translate(-50%,-50%);background:#fff;
  padding:9px 22px;border-radius:4px;box-shadow:0 3px 10px rgba(0,0,0,.3);
  text-decoration:none;white-space:nowrap;display:inline-block;transition:.2s;
  font-family:'Montserrat',sans-serif}
.banner-slide-btn:hover{background:#f0f0f0}
.banner-slide-link{position:absolute;inset:0;display:block;text-decoration:none;color:inherit;z-index:1}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.banner-reg {
   
    float: right;
    margin: 30px 0;
    text-align: center;
    border-radius: 3px;
    transition: 0.25s;
}
.banner-reg:hover a{
    background: #fff;
    transition: 0.25s;
}
.banner-reg a {
    background: #ddedf8;
    color: black;
    padding: 10px 20px;
    display: block;
    box-shadow: 3px 3px 7px 0px #3a3a3a94;
    width: 250px;transition: 0.25s;
}

.banner-oplata {
    
    float: right;
    text-align: center;
    border-radius: 3px;
    transition: 0.25s;
}
.banner-oplata:hover a{
    background: #fff;
    transition: 0.25s;
}
.banner-oplata a {
    background: #ddedf8;
    color: black;
    padding: 10px 20px;
    display: block;
    box-shadow: 3px 3px 7px 0px #3a3a3a94;
    width: 250px;transition: 0.25s;
}
div#tab-content2 h2 {
    margin: 15px 0;
}
.block-uslugi{width:30%;float:left;margin:auto;height:150px;margin-right:15px;margin-left:15px}
.block-uslugi h2{margin-top:55px;padding:10px;font-size:30px;color:#000;background:rgba(249,249,249,0.89)}
.block-uslugi:nth-child(1){background:url(../remont-resiv.jpg);box-shadow:0 2px 6px rgba(163,163,163,0.7)}
.block-uslugi:nth-child(2){background:url(../trikolor-obmen.png);box-shadow:0 2px 6px rgba(163,163,163,0.7)}
.block-uslugi:nth-child(3){background:url(../Trikolor-b211.png);box-shadow:0 2px 6px rgba(163,163,163,0.7)}
.block-uslugi:hover{box-shadow:0 0 6px #44acea}
.zakaz-uslugi{margin:20px auto;width:200px;padding:10px;color:#fff;text-transform:uppercase;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,0.25);background:#47a3da}
.zakaz-uslugi a{color:#fff}
.zakaz-uslugi:hover{background:#4d93c3}
#content{padding:20px 35px;min-height:700px}
.chanal-breadcrumbs{padding:20px 35px}
.card{width:31.666666666667%;float:none;margin:.83333333333333%;background:#fff;
  border:1px solid #e8edf1;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 4px 16px rgba(20,40,60,.07);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{outline:none;transform:translateY(-4px);box-shadow:0 12px 30px rgba(20,40,60,.15);border-color:#d7e3ee}
.card-media{display:block}
/* Фото заполняет блок целиком: contain оставлял поля бокса вокруг снимка, и у
   фото с не-белым фоном (серый градиент) это выглядело как рамка-зазор. */
.card-image{aspect-ratio:3/4;overflow:hidden;background:#f4f7fa;padding:0}
.card-image img{display:block;width:100%;height:100%;object-fit:cover;margin:0;
  transition:transform .25s ease}
.card:hover .card-image img{transform:scale(1.05)}
.card-title{padding:14px 16px 0;background:none;color:#1a2733;text-align:left;display:block;width:auto}
.card-title h2,.card-title h3{font-size:14.5px;font-weight:600;line-height:1.4;color:#1a2733;display:block;
  width:auto;padding:0;text-align:left}
/* «div#content h3{margin:10px 0}» (1,0,2) бьёт «.card-title h3» (0,1,2) и добавляет
   каталогу 10px, которых нет на главной (#cards лежит вне #content) — отсюда и были
   разные промежутки. Обнуляем с достаточной специфичностью. */
#content .card-title h2,#content .card-title h3,.card-title h2,.card-title h3{margin:0}
a.title-card{transition:color .2s ease}
.card:hover a.title-card{color:#0071B6}
.dop-card-prise{font-size:16px}
.dop-card-prise span{font-size:18px!important}
.card-description{height:auto;font-size:12px;width:90%;margin:auto;color:#333;padding:0;text-align:justify;overflow:hidden}
.card-price span{color:#ff4f3d;font-size:19px;font-weight:700}
/* margin-top:auto прижимает цену и кнопку к низу, когда заголовки разной длины */
.card-price{color:#8a94a0;font-size:13px;font-weight:500;background:none;padding:12px 16px 0;
  width:auto;margin:auto 0 12px;height:auto;float:none;line-height:1.3}
.card-price-complect span{color:#ff3400;font-size:25px}
.card-price-complect{color:#000;font-size:20px;background:none;padding:10px 15px;width:94%;margin:auto;font-weight:600;margin-bottom:20px;height:100px;float:none;line-height:25px}
.card-price-complect p{margin:6px 0!important;line-height:18px}
.article{text-align:left;color:red;font-weight:600;margin-bottom:10px;font-size:16px}
.card-buttons{height:auto;overflow:hidden}
.card a.podr{display:none}
.podr{display:none}
.card-buttons button,.btn-add-cart{display:block;width:100%;background:#47a3da;color:#fff;border:none;height:44px;font-size:15px;font-family:'Montserrat',sans-serif;cursor:pointer;-webkit-transition:background .3s ease;transition:background .3s ease;letter-spacing:.3px}
.card-buttons button:hover,.btn-add-cart:hover{background:#ff4f3d}
/* legacy cart drawer css — kept for reference, overridden by newer rules below */
#cart-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000}
#cart-overlay.open{display:block}
#cart-drawer{position:fixed;top:0;right:-440px;width:420px;max-width:100vw;height:100%;background:#fff;z-index:1001;box-shadow:-4px 0 28px rgba(0,0,0,.2);transition:right .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
#cart-drawer.open{right:0}
.cart-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:#0071B6;color:#fff;font-size:18px;font-weight:700;flex-shrink:0}
.cart-close{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;line-height:1;padding:0 4px}
.cart-close:hover{opacity:.7}
#cart-items{flex:1;overflow-y:auto;padding:12px 20px}
.cart-empty{color:#999;text-align:center;padding:40px 0;font-size:15px}
.cart-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0}
.cart-item-info{flex:1;min-width:0}
.cart-item-title{display:block;font-size:13px;font-weight:600;color:#0071B6;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-item-price{font-size:12px;color:#666}
.cart-item-actions{display:flex;align-items:center;gap:5px;flex-shrink:0}
.cart-item-actions button{background:#f0f4f8;border:none;width:26px;height:26px;border-radius:4px;cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center}
.cart-item-actions button:hover{background:#0071B6;color:#fff}
.cart-item-actions span{min-width:22px;text-align:center;font-weight:700;font-size:14px}
.cart-item-remove{background:#fff0f0!important;color:#c00!important}
.cart-item-remove:hover{background:#c00!important;color:#fff!important}
.cart-total{padding:14px 0 0;font-size:16px;text-align:right;border-top:2px solid #0071B6;margin-top:6px}
#cart-form-section{padding:0 20px 24px;border-top:1px solid #eee;overflow-y:auto;flex-shrink:0}
.order-field{margin-bottom:11px}
.order-field label{display:block;font-size:12px;color:#555;margin-bottom:4px;font-weight:600;letter-spacing:.2px}
.order-field input,.order-field select{width:100%;box-sizing:border-box;border:1px solid #d0d7de;border-radius:6px;padding:9px 11px;font-size:14px;font-family:inherit;color:#222}
.order-field input:focus,.order-field select:focus{outline:none;border-color:#0071B6;box-shadow:0 0 0 3px rgba(0,113,182,.12)}
.order-row{display:flex;gap:10px}
.order-row .order-field{flex:1}
.order-submit{width:100%;background:#0071B6;color:#fff;border:none;border-radius:8px;padding:14px;font-size:16px;font-weight:700;cursor:pointer;margin-top:10px;transition:background .2s;font-family:'Montserrat',sans-serif}
.order-submit:hover{background:#ff4f3d}
.order-submit:disabled{opacity:.6;cursor:default}
.order-success{background:#e8f5e9;border:1px solid #66bb6a;color:#2e7d32;padding:24px 20px;border-radius:8px;text-align:center;font-size:15px;margin:20px 0;line-height:1.6}
@media(max-width:480px){#cart-drawer{width:100vw}}
#card-title-with-sale{font-size:17px;background:#E2F3FE;color:#0071B6;text-align:center;font-weight:100;padding:0 20px;overflow:hidden;width:100%}
#card-title-with-sale h3{font-size:16px;display:table-cell;vertical-align:middle;width:400px}
.sale-card{padding:0;float:left;margin:-10px;margin-right:5px;margin-bottom:5px;height:32px}
.sale-card a{background:#fe623a;color:#fff;padding:5px 7px;margin-right:15px;font-size:14px;border-radius:0 15px}
.sale-card a:hover{background:#fea534}
.podr a{color:#fff}
table.table.table-striped form button:hover{background:url(../images/cross102.png) no-repeat,#ff4f3d;background-size:15px 15px;background-position:7px center}
.ustanovka{font-size:20px;font-weight:600;margin:20px 0}
.ustanovka span{color:#ff4f3d;font-size:24px}
.highslide-html{border:2px solid #47a3da}
.highslide-container table{left:170px!important}
/*#highslide-wrapper-0{left:180px!important}*/
.card-buttons button:hover{background:#ff4f3d}
/* ── Карточка товара/установки: слева медиа (миниатюры|фото), справа инфо ── */
.pdp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;
  align-items:start;margin:16px 0 8px}
.pdp-media{display:flex;gap:14px;align-items:flex-start;min-width:0}
/* миниатюры — вертикальной колонкой слева от основного фото */
#gallery-small-image{flex:0 0 72px;width:72px;float:none;margin:0;
  display:flex;flex-direction:column;gap:10px}
#gallery-small-image img{width:72px;height:72px;object-fit:cover;background:#fff;
  border:1px solid #e8edf1;border-radius:10px;cursor:pointer;display:block;margin:0;
  transition:border-color .2s ease,transform .15s ease}
#gallery-small-image img:hover{border-color:#0071B6;transform:translateY(-2px)}
#gallery-small-image img.active{border-color:#0071B6;box-shadow:0 0 0 1px #0071B6}
/* пустые <a> нужны только чтобы JS открывал лайтбокс — из потока их убираем,
   programmatic .click() на скрытом элементе всё равно срабатывает */
#gallery-small-image a.glightbox{display:none}
.pdp-main-link{flex:1;min-width:0;display:block;border:1px solid #e8edf1;border-radius:14px;
  overflow:hidden;background:#fff;cursor:zoom-in}
#goods-big-image{display:block;float:none;margin:0;width:100%;height:auto}
.pdp-info{min-width:0}
.pdp-info h1{font-size:26px;line-height:1.3;color:#1a2733;margin:0 0 20px}
@media screen and (max-width:860px){
  .pdp{grid-template-columns:1fr;gap:24px}
  .pdp-info h1{font-size:21px}
}
/* Точки-индикаторы карусели — только мобила (см. media ниже), десктоп не трогаем */
.pdp-dots{display:none}
@media screen and (max-width:600px){
  /* Мобильная карусель фото: свайп по горизонтали + точки снизу (референс tricolor.ru).
     Десктопная раскладка (колонка миниатюр + большое фото) остаётся как есть. */
  .pdp-media{flex-direction:column;gap:10px}
  /* большое отдельное фото прячем ТОЛЬКО когда есть галерея (у товара >1 фото);
     у одиночного фото галереи нет — оно остаётся видимым */
  #gallery-small-image ~ .pdp-main-link{display:none}
  #gallery-small-image{flex:none;width:100%;display:flex;flex-direction:row;flex-wrap:nowrap;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:12px;margin:0;background:transparent;scrollbar-width:none}
  #gallery-small-image::-webkit-scrollbar{display:none}
  #gallery-small-image img{scroll-snap-align:center;flex:0 0 100%;width:100%;height:auto;
    aspect-ratio:3/4;object-fit:cover;margin:0;background:transparent;border-radius:14px;
    border:none!important;box-shadow:none!important;transform:none!important}
  .pdp-dots{display:flex;justify-content:center;gap:8px;margin-top:2px}
  .pdp-dots button{width:8px;height:8px;padding:0;border:none;border-radius:50%;
    background:#cfd8e0;cursor:pointer;transition:background .2s,width .2s}
  .pdp-dots button.active{background:#0071B6;width:20px;border-radius:4px}
}
span.price-digit {
    color: #ff4f3d;
    font-size: 30px;
    padding-right: 5px;
}
#goods-big-price{background:none;float:none;margin:0 0 20px;padding:0;
  text-transform:uppercase;font-weight:600;font-size:16px;color:#5a6672;letter-spacing:.4px}
button.in-cart{display:block;background:#5D91BC;color:#fff;padding:10px;width:220px;font-size:20px;margin-bottom:20px;float:right;margin-top:20px;border:none}
button.in-cart:hover{background:#ff4f3d;cursor:pointer}
/* Вкладки товара/установки/обмена — сегментированный переключатель */
#tabs{margin:30px 0 0;background:#f2f6f9;border:1px solid #e8edf1;border-radius:14px;padding:6px;position:relative}
#tabs ul{display:flex;gap:6px;margin:0;padding:0;list-style:none}
#tabs li{flex:1;float:none;width:auto;list-style:none;text-align:center;line-height:1.35;padding:12px 14px;
  border-radius:10px;font-size:15px;font-weight:500;color:#5a6672;cursor:pointer;user-select:none;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease}
#tabs li:hover{color:#0071B6;background:#e8f1f8}
#tabs li.active-tab{background:#fff;color:#0071B6;font-weight:600;box-shadow:0 2px 8px rgba(20,40,60,.10)}
#tab-contents{margin-top:18px}
#tab-contents .tab-content{padding:28px 30px;display:none;max-width:none;margin:0;background:#fff;
  border:1px solid #e8edf1;border-radius:14px;box-shadow:0 4px 20px rgba(20,40,60,.06);
  line-height:1.7;color:#4a5560;font-size:15px}
#tab-contents .tab-content p{margin:0 0 12px}
#tab-contents .tab-content p:last-child{margin-bottom:0}
#tab-contents .tab-content ul{margin:6px 0;padding-left:0;list-style:none}
/* list-style:none must sit on the li itself — «#content ul li{list-style:inside}» targets
   the li directly and would otherwise beat inheritance from the ul, giving a double marker */
#tab-contents .tab-content ul li{position:relative;padding:9px 0 9px 20px;margin:0;line-height:1.5;
  border-bottom:1px solid #f0f3f6;list-style:none}
#tab-contents .tab-content ul li:last-child{border-bottom:none}
#tab-contents .tab-content ul li::before{content:"";position:absolute;left:2px;top:17px;width:6px;height:6px;border-radius:50%;background:#0071B6}
.tab-content{padding:20px;display:none;max-width:900px;margin:0 auto}
.active-tab-content{display:block}
/* must out-specify «#tab-contents .tab-content{display:none}» above */
#tab-contents .tab-content.active-tab-content{display:block}
@media screen and (max-width:640px){
  #tabs{padding:5px;border-radius:12px}
  #tabs ul{flex-direction:column;gap:4px}
  #tabs li{padding:11px 12px;font-size:14px;text-align:left}
  #tab-contents .tab-content{padding:20px 18px}
}
.visible{display:none}
#otor:hover{background:#ff4f3d;cursor:pointer}
#cart-form-bg{width:100%;height:100%;top:0;left:0;position:fixed;background:rgba(0,0,0,.3);display:none}
#cart-form{width:660px;margin:auto;position:fixed;background:#fff;max-width:100%;max-height:100%;top:5%;left:0;right:0;bottom:0;padding:20px;overflow:auto;height:520px;display:none}
#form-head{font-size:20px;text-align:center}
#close-form:hover{background:url(../images/cross102.png) no-repeat,#ff4f3d;background-size:15px 15px;background-position:1px center}
/* ── Modern article/news/promo cards (Новости, Статьи, Акции) ── */
.articles-grid{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.5rem}
.pagination{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;
  margin-top:2rem;padding:1.5rem 0 0;border-top:1px solid #eee}
.action{width:calc(33.333% - 1rem);margin:0;background:#fff;border-radius:8px;overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,.12);transition:box-shadow .2s ease,transform .2s ease;
  display:flex;flex-direction:column}
.action:hover{background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.18);transform:translateY(-3px)}
.action .clear{display:none}
.action-image{width:100%;aspect-ratio:16/10;overflow:hidden;background:#E2F3FE;flex-shrink:0}
.action-image img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.action-content{display:flex;flex-direction:column;flex:1;width:auto;float:none;padding:0}
.action-title{font-size:16px;text-align:left;padding:16px 18px 6px;overflow:hidden;font-weight:700;line-height:1.35;height:auto}
.action-title h2,.action-title h3{font:inherit;line-height:inherit;margin:0;padding:0}
.action-title a{color:#0071B6;text-decoration:none}
.action-description{padding:0 18px;overflow:hidden;line-height:1.5;color:#5a5a5a;font-size:13.5px;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;flex:1;height:auto;margin-bottom:14px}
.action-buttons{padding:0 18px 18px;display:block}
.action-buttons a{display:block;float:none;margin:0;text-align:center;background:#47a3da;color:#fff!important;
  padding:11px;border-radius:6px;font-weight:600;text-decoration:none;transition:background .2s ease}
.action-buttons a:hover{background:#0071B6}
@media(max-width:750px){.action{width:calc(50% - 1rem)}}
@media(max-width:480px){.action{width:100%}}

/* ── Tariff / subscription detail page ── */
.tariff-hero{display:flex;gap:2rem;align-items:center;flex-wrap:wrap;background:#fff;
  border-radius:10px;box-shadow:0 3px 12px rgba(0,0,0,.1);padding:2rem;margin:1.5rem 0}
.tariff-hero-logo{width:180px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.tariff-hero-logo img{width:100%;height:auto;max-height:180px;object-fit:contain}
.tariff-hero-info{flex:1;min-width:240px}
.tariff-hero-info h1{margin:0 0 .5rem;font-size:26px}
.tariff-hero-channels{color:#0071B6;font-weight:600;font-size:15px;margin-bottom:.75rem}
.tariff-hero-price{font-size:28px;font-weight:700;color:#222;margin-bottom:1rem}
.tariff-hero-price .price-digit{color:#e13421}
.tariff-description{background:#fff;border-radius:10px;box-shadow:0 3px 12px rgba(0,0,0,.08);
  padding:1.75rem 2rem;margin-bottom:1.5rem;line-height:1.7;color:#444}
.tariff-fields{display:flex;flex-wrap:wrap;background:#fff;border-radius:10px;overflow:hidden;
  margin-bottom:2rem;box-shadow:0 3px 12px rgba(0,0,0,.08)}
.tariff-field{flex:1;min-width:160px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:.35rem;padding:1.4rem 1.1rem;
  border-right:1px solid #eee;border-bottom:1px solid #eee}
.tariff-field:last-child{border-right:none}
.tariff-field-label{font-weight:700;color:#222;font-size:14.5px;line-height:1.3}
.tariff-field-value{color:#777;font-size:12.5px;line-height:1.4}
.tariff-related{margin:2.5rem 0}
.tariff-related h2{font-size:20px;margin-bottom:1rem}
.tariff-card .action-image{aspect-ratio:4/3;padding:16px;box-sizing:border-box}
.tariff-card .action-image a{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.tariff-card .action-image img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
@media(max-width:600px){
  .tariff-hero{flex-direction:column;text-align:center;padding:1.5rem}
  .tariff-hero-logo{width:140px}
  .tariff-field{flex:1 1 50%;border-right:1px solid #eee}
  .tariff-field:nth-child(2n){border-right:none}
}

/* ── News / promo / article detail page ── */
.article-hero-banner{position:relative;margin:1.5rem 0 2rem;border-radius:14px;overflow:hidden;
  min-height:380px;display:flex;align-items:flex-end;background-color:#1a1a1a;
  background-size:cover;background-position:center;box-shadow:0 8px 28px rgba(0,0,0,.2)}
.article-hero-banner::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.82) 100%)}
.article-hero-banner-inner{position:relative;z-index:1;padding:3rem 3rem 2.25rem;width:100%;box-sizing:border-box}
.article-hero-cat{display:inline-block;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:700;padding:5px 14px;
  border-radius:20px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:1rem}
.article-hero-banner h1{margin:0 0 .75rem;font-size:34px;line-height:1.28;font-weight:700;
  color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.4);max-width:900px}
.article-hero-authorline{color:rgba(255,255,255,.9);font-size:14.5px}
.article-hero-authorline b{color:#fff;font-weight:700}
.article-hero-authorline .sep{margin:0 9px;opacity:.55}
.article-hero-plain{margin:1.5rem 0}
.article-meta{display:flex;align-items:center;gap:10px;margin-bottom:.6rem}
.article-meta-date{font-size:13px;color:#888}
.article-meta-cat{display:inline-block;background:#e8f4fd;color:#0071B6;font-size:12px;font-weight:700;
  padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px}
.article-hero-plain h1{margin:0 0 1.2rem;font-size:28px;line-height:1.3}
.article-body{max-width:820px;margin:0 auto;background:#fff;border-radius:10px;
  box-shadow:0 3px 12px rgba(0,0,0,.08);padding:1.75rem 2.25rem;line-height:1.7;color:#444}
.article-body p{margin:0 0 1rem;line-height:1.7}
.article-body h2,.article-body h3,.article-body h4{margin:1.5rem 0 .75rem;color:#222;line-height:1.35}
.article-body img{max-width:100%;height:auto;border-radius:8px;margin:.5rem 0}
.article-body ul,.article-body ol{margin:0 0 1rem 1.2rem;padding:0}
.article-back{max-width:820px;margin:1.75rem auto 0}
.article-back-btn{display:inline-flex;align-items:center;gap:6px;background:#f0f6fb;color:#0071B6!important;
  padding:10px 18px;border-radius:6px;text-decoration:none;font-weight:600;transition:background .2s ease}
.article-back-btn:hover{background:#e0eef8}
.article-related{max-width:820px;margin:2.5rem auto}
.article-related h2{font-size:20px;margin-bottom:1rem}
.article-offers{max-width:1000px;margin:2.5rem auto 0}
.article-offers h2{font-size:24px;line-height:1.3;margin:0 0 1rem;color:#222}
.article-offers-grid{margin:0}
.article-offers-grid .card{margin-top:0;margin-bottom:16px}
@media(max-width:600px){
  .article-hero-banner{min-height:280px;border-radius:10px}
  .article-hero-banner-inner{padding:1.75rem 1.5rem 1.5rem}
  .article-hero-banner h1{font-size:23px}
  .article-hero-cat{font-size:11px;padding:4px 11px}
  .article-hero-authorline{font-size:13px}
  .article-hero-plain h1{font-size:22px}
  .article-body{padding:1.25rem 1.4rem}
  .article-offers h2{font-size:20px}
}

#pacs{margin-top:0;width:100%;    text-align: center;background:#ddf2ff;background-size:100% 102%;overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,0.1)}
#pacs a{color:#353535}
#pacs .center{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:12px;padding:8px 5px}
#pacs .center>a{display:block;flex:0 1 180px;min-width:0}
.pac{display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    aspect-ratio:4/3;
    box-sizing:border-box;
    padding:8px;
    margin:0;
    border-radius:8px;
    transition:background .15s ease, box-shadow .15s ease;}
.pac span{display:none}
.pac:hover{background:#d6f0ff;box-shadow:0 2px 6px rgba(163,163,163,0.7)}
.pac img{display:block;margin:auto;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
#pack{margin-top:-30px}
#pack-pack{padding:20px;border-bottom:1px solid #ccc;min-height:215px;overflow:hidden;position:relative}
#pack-description{margin-top:10px;line-height:20px}
#pack .B_crumbBox{padding-left:20px;margin-top:20px}
#pack-image{width:180px;height:180px;float:left}
#pack-image img{display:block;float:left}
#pack-content{float:left;max-width:760px}
#pack-price{background:#e13421;background:-moz-linear-gradient(45deg,#e13421 0%,#af2819 0%,#e13421 37%,#e13421 37%,#e13421 39%,#af2819 60%,#af2819 100%);background:-webkit-gradient(linear,left bottom,right top,color-stop(0%,#e13421),color-stop(0%,#af2819),color-stop(37%,#e13421),color-stop(37%,#e13421),color-stop(39%,#e13421),color-stop(60%,#af2819),color-stop(100%,#af2819));background:-webkit-linear-gradient(45deg,#e13421 0%,#af2819 0%,#e13421 37%,#e13421 37%,#e13421 39%,#af2819 60%,#af2819 100%);background:-o-linear-gradient(45deg,#e13421 0%,#af2819 0%,#e13421 37%,#e13421 37%,#e13421 39%,#af2819 60%,#af2819 100%);background:-ms-linear-gradient(45deg,#e13421 0%,#af2819 0%,#e13421 37%,#e13421 37%,#e13421 39%,#af2819 60%,#af2819 100%);background:linear-gradient(45deg,#e13421 0%,#af2819 0%,#e13421 37%,#e13421 37%,#e13421 39%,#af2819 60%,#af2819 100%);color:#fff;text-align:center;padding:10px;width:200px;font-size:20px;right:20px;top:20px}
#pack h1{color:#00558e}
.right-block {
    width: 15%;
    float: right;
}
.oplata-online {
    width: 200px;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
    background: #47a3da;
    text-transform: uppercase;
}

.oplata-online:hover {
    background: #ff4f3d;
}


.oplata-online a {
    color: #fff;
    font-weight: 500;
}

#news-main{width:60%;margin-top:25px;margin-bottom:15px;box-sizing:border-box;border-radius:10px;
  background:#fff;box-shadow:0 2px 6px rgba(163,163,163,0.7);float:left;padding:25px}
#news-main>a>h2{text-transform:uppercase;text-align:left;padding:10px 0;color:#000;font-size:22px;line-height:1.3;margin:0 0 12px}
#news-main>a>h2:hover{color:#5d91bc}
/* стрелка «смотреть все» — CSS-шеврон вместо отсутствовавшего images/right.png */
#news-main>a>h2::after{content:'';float:right;width:9px;height:9px;margin:6px 2px 0 0;border-top:2px solid #b8c2cc;border-right:2px solid #b8c2cc;transform:rotate(45deg);transition:border-color .15s}
#news-main>a>h2:hover::after{border-color:#5d91bc}
.news-row{display:flex;align-items:center;gap:14px}
.news-block img{width:90px;height:70px;object-fit:cover;border-radius:8px;flex-shrink:0}
.news-description{flex:1;min-width:0;text-align:left;color:#000}
.news-description h3{margin:0 0 4px;font-size:15px;line-height:1.35;font-weight:600;text-transform:none;padding:0;color:inherit}
.news-description p{margin:0;font-size:13px;color:#666;line-height:1.4}
.news-block{padding:12px 4px;border-top:1px solid #eee;border-radius:8px;transition:background .15s ease}
.news-block:first-child{border-top:none}
.news-block:hover{background:#f5fafd}
#akcia-main{text-align: center;
    width: 100%;
    line-height: 30px;
    float: left;
    padding: 25px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(163,163,163,0.7);}
#akcia-main a{color:#3c3c3c}
.akcia-promo-row{display:flex;align-items:center;gap:18px;margin-top:18px}
.akcia-main-text{flex:1;min-width:0;text-align:left}
#akcia-main>a>h2{margin-top:0}
.akcia-main-text h3{font-size:16px;line-height:1.4;font-weight:600}
.akcia-main-text p{margin:6px 0 0;font-size:13px;color:#666;line-height:1.4}
#akcia-main > a > h3{text-align:left;text-transform:uppercase;padding:10px;color:#000;font-size:22px;line-height:1.3;margin-top:0}
#akcia-main > a:hover > h3{color:#5d91bc}
#akcia-main > a > h3::after{content:'';float:right;width:9px;height:9px;margin:6px 2px 0 0;border-top:2px solid #b8c2cc;border-right:2px solid #b8c2cc;transform:rotate(45deg);transition:border-color .15s}
#akcia-main > a:hover > h3::after{border-color:#5d91bc}
.sertif{float:left;width:100%;box-sizing:border-box;text-align:center;margin:25px 0;
  padding:25px;border-radius:10px;background:#fff;box-shadow:0 2px 6px rgba(163,163,163,0.7)}
.sertif h2{text-transform:uppercase;text-align:left;color:#000;font-size:22px;line-height:1.3;margin:0 0 15px}
.sertif img {
    width: auto;
    max-width: 100%;
    height: auto !important;
    max-height: 370px;
    display: inline-block;
    object-fit: contain;
}
.sertif .sertif-certificate-image{display:block;width:auto;max-width:100%;height:auto;margin:0 auto;object-fit:contain}
.more-akcia:hover{background:#63c9ff}
.more-akcia{width:220px;margin:20px auto 0;padding:12px 10px;background:#47a3da;color:#fff;
  border-radius:6px;text-align:center;font-weight:600;line-height:1.3;box-sizing:border-box;
  transition:background .2s ease}
.main-news-right-block {
    text-align: center;
    width: 37%;
    float: right;
    margin-top: 25px;
}
#channels-slider{width:100%;overflow:hidden}
#channels-nav{width:114px;height:47px;position:absolute;bottom:20px;right:20px}
#channels-left{width:47px;float:right;height:47px;margin-right:20px;background:url(../images/next15.png) no-repeat;background-size:47px 47px;opacity:.5}
#channels-right{width:47px;float:right;height:47px;background:url(../images/next16.png) no-repeat;opacity:.5;background-size:47px 47px}
#channels-right:hover{opacity:.8}
#channels-left:hover{opacity:.8}
.channel-level1{display:block;float:left;width:125px;list-style:none;text-align:center;font-size:12px}
.channel-level1 span{display:block;width:100%;overflow:visible!important}
.channel-level2{list-style:none!important;position:relative;background:url(../images/chbg.jpg) no-repeat;background-size:100% 100%;width:97px;height:58px;margin:10px auto;text-align:center}
.channel-level2 img{width:50px;height:auto;margin-top:10px}
.channel-level2 span{display:none}
#help{color:#fff;position:absolute;background:#6EBC44;display:none;top:58px;left:0;font-size:16px;font-weight:900;padding:20px;z-index:100}
.help-block{float:left;width:300px;min-height:200px;margin:55px;margin-top:20px;background:#5D91BC;border:1px solid #5D91BC}
.help-title{width:100%;color:#fff;font-size:18px;padding:20px;height:100px;line-height:20px;text-align:center;text-shadow:1px 1px 2px #000}
.help-description{background:#F0F0F0;min-height:120px;text-align:center;padding:20px;line-height:20px;font-size:14px;color:#000}
.video{margin-top:20px}
.video-title{background:#ddd;width:1000px;font-size:18px;color:#00558e;padding:10px 20px;float:left;word-wrap:nowrap;line-height:20px}
.video-button{padding:10px 20px;color:#ff4f3d;text-align:center;background:#ddd}
.video-button:hover{text-decoration:underline;cursor:pointer}
.video-content{display:none;padding:0;overflow:hidden;background:#D0CBCA}
.video-content iframe{display:block;margin:20px 2%;float:left;width:21%;height:auto}
.resiver{width:262px;margin:10px;min-height:270px;border:1px solid #ccc;overflow:hidden;float:left}
.resiver:hover{box-shadow:0 0 20px rgba(0,85,142,.5)}
.resiver-image img{height:auto;width:100%}
.resiver-title{color:#0071B6;font-size:20px;height:80px;line-height:20px;text-align:center;padding:10px;overflow:hidden}
.resiver-description{margin-top:5px;height:75px;padding:10px;line-height:20px;text-align:center;overflow:hidden;color:#4B4B4B}
#footer{background:#5D91BC;padding:20px;text-align:center;color:#fff}
#foot-left{width:50%;float:left;text-align:left}
#foot-right{width:180px;float:right;text-align:center}
#sitemap ul{padding:10px;list-style:none;margin:10px 20px}
#sitemap ul ul,#sitemap ul ul,#sitemap ul ul ul,#sitemap ul ul ul ul{padding:10px;list-style-type:none;margin:10px 20px;border-left:1px solid #5D91BC}
#sitemap ul li{padding:2px;list-style:none}
#sitemap a{color:#333}
#sitemap a:hover{color:#ff4f3d}
#sitemap li:before{display:none;float:left;width:0;height:0;content:"—"}
.sitemap-html{margin-bottom:10px}
.sitemap-html a{color:#fff;font-weight:600}
/* ── Auto-generated sitemap (karta-sajta.html) ── */
.sitemap-cols{column-count:3;column-gap:32px;margin:20px 0 10px}
.sitemap-group{display:block;width:100%;margin-bottom:26px}
.sitemap-group h2{font-size:17px;color:#0071B6;border-bottom:2px solid #daeeff;
  padding-bottom:7px;margin:0 0 12px;break-inside:avoid;break-after:avoid}
.sitemap-cols ul{list-style:none;margin:0;padding:0}
.sitemap-cols ul li{padding:3px 0;list-style:none;line-height:1.4;font-size:14px;break-inside:avoid}
.sitemap-cols ul li:before{display:none}
.sitemap-cols a{color:#333;text-decoration:none}
.sitemap-cols a:hover{color:#0071B6;text-decoration:underline}
/* Товары в карте сгруппированы по категориям — подгруппа не рвётся между колонками */
.sitemap-subgroup{break-inside:avoid;margin-bottom:14px}
.sitemap-cat{font-size:14px;font-weight:700;margin:0 0 4px;line-height:1.35}
.sitemap-cat a{color:#0071B6;text-decoration:none}
.sitemap-cat a:hover{text-decoration:underline}
@media screen and (max-width:900px){.sitemap-cols{column-count:2}}
@media screen and (max-width:560px){.sitemap-cols{column-count:1}}
.sitemap-html a:hover{color:#ff4f3d}
a#social-seti{color:#ff4f3d}
a#social-seti:hover{color:#fff}
#posad-banner{padding:20px;background:#f4fbff;box-shadow:0 0 10px rgba(0,0,0,0.1)}
.posad-banner-text {
    float: left;
    margin-right: 2%;
    width: 66%;
    font-size: 16px;
}

.posad-banner-img {
    width: 32%;
    float: left;
}

.posad-banner-img img {
    width: 100%;
}
.posad-banner-text h2 {
    margin-bottom: 15px;
}
.posad-banner-form{float:left;width:325px;margin-top:15px;background:#daecf7;padding:25px;text-align:center}
.posad-banner-form h2{margin-bottom:25px;text-transform:uppercase;line-height:30px}
.posad-banner-form input{width:275px;padding:10px;border:none;margin:0 0 15px}
.posad-banner-form .posad-submit{background:#e26456;color:#fff;font-weight:600;cursor:pointer}
.posad-banner-text h1{margin:15px 0 25px!important}
.posad-banner-form .posad-submit:hover{background:#b33225}
.why-we-block-image{width:60px;text-align:center;vertical-align:middle;height:60px;float:left;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,0.25);border-radius:50%}
/* иконки уже перекрашены в фирменный синий (цвет запечён в webp) */
.why-we-block-image img{width:40px;height:40px;object-fit:contain;margin:10px auto 0;display:block}
.why-we-block{float:left;width:23%;margin:10px 1%}
.why-we-block p{float:left;margin-left:22px!important}
.why-we-text{float:left;width:calc(100% - 60px)}
section#why-we{background:#fbfbfb;margin:20px 0}
section.posad-content h2{margin:25px 0;font-size:27px;line-height:30px}
section.posad-content ol li{list-style-type:decimal;margin:15px 0;list-style-type:decimal;margin:15px 0}
section#posad-vopros-zakaz{background:#f8fafa;padding:30px;border-left:3px solid #e26456;margin:30px 0;text-align:center}
button.posad-zakaz{background:#e26456;font-size:16px}
button.posad-vopros{font-size:16px;background:#a5c8dc}
button2.posad-zakaz{background:#e26456;font-size:16px}
button2.posad-vopros{font-size:16px;background:#a5c8dc}
.button2{display:block;background:#47a3da;text-align:center;line-height:44px;width:100%;float:none;color:#fff;-webkit-transition:background .3s ease;transition:background .3s ease;text-decoration:none;border:none;font-family:'Montserrat',sans-serif;cursor:pointer;font-size:15px}
button2:hover{background:#ff4f3d}
section#posad-vopros-zakaz button{width:200px;margin:10px}
section#posad-vopros-zakaz .posad-zakaz:hover{background:#b34134}
section#posad-vopros-zakaz .posad-vopros:hover{background:#87b5d0}
section#posad-vopros-zakaz button img{margin:0 10px;width:16px}
/* ── Consultation CTA (Товары, Установка, Обмен, Ремонт) ── */
.konsult-cta{margin:48px 0;border-radius:18px;overflow:hidden;
  background:linear-gradient(120deg,#0071B6 0%,#0a8ed6 100%);box-shadow:0 12px 30px rgba(0,113,182,.22)}
.konsult-cta-inner{display:flex;align-items:center;gap:24px;padding:30px 40px;flex-wrap:wrap;justify-content:center}
.konsult-cta-icon{flex-shrink:0;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center}
.konsult-cta-icon svg{width:30px;height:30px;fill:#fff}
.konsult-cta-text{flex:1;min-width:180px;color:#fff}
.konsult-cta-label{font-size:23px;font-weight:700;line-height:1.2}
.konsult-cta-sub{font-size:14.5px;opacity:.9;margin-top:5px}
.konsult-cta-phone{flex-shrink:0;display:inline-flex;align-items:center;gap:10px;background:#fff;color:#0071B6;
  font-size:23px;font-weight:700;padding:15px 28px;border-radius:12px;text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.15);transition:transform .15s,box-shadow .15s;white-space:nowrap}
.konsult-cta-phone svg{width:22px;height:22px;fill:#0071B6}
.konsult-cta-phone:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.25)}
@media screen and (max-width:640px){
  .konsult-cta-inner{padding:26px 22px;gap:16px;text-align:center}
  .konsult-cta-label{font-size:20px}
  .konsult-cta-phone{font-size:20px;padding:13px 24px;width:100%;justify-content:center}
}
.obmen-posad{float:left;width:20%;border:1px solid transparent}
.obmen-posad img{width:95%}
.obmen-posad:hover{box-shadow:0 0 10px rgba(0,0,0,0.1)}
div#modal-backing{position:fixed;z-index:100;background:rgba(0,0,0,.5);top:0;left:0;width:100%;height:100%;display:none}
form#modal-form,form#question-form{position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;width:550px;height:440px;z-index:9999;background:#dae9f1;display:none;box-shadow:0 0 6px #a7a1a1;max-width:100%;overflow:auto}
form p span{font-size:15px;line-height:12px}
.close-button{position:absolute;top:10px;right:10px;width:35px;height:35px;cursor:pointer}
.close-button svg{fill:#728088!important;transition:all .3s ease;transform:rotate(45deg)}
.close-button svg:hover{transform:rotate(225deg)}
form#modal-form p,form#question-form p{color:#2b2b2b;font-size:35px;text-align:center;margin:25px 0 40px}
form#modal-form input,form#question-form input{width:450px;margin:10px auto;padding:8px;float:none}
form#modal-form .your-comment,form#question-form .your-comment{height:80px}
form#modal-form input[type="submit"],form#question-form input[type="submit"]{width:200px;background:#e46e62;color:#fff;margin-top:20px;cursor:pointer;border:none}
form#modal-form input[type="submit"]:hover,form#question-form input[type="submit"]:hover{background:#a54a41}
section#home-why-we-block {
    background: #f3faff;
    padding: 40px 0;
}

.home-include {
    margin-top: 40px;
}

div#home-text-block1 {
    width: 50%;
    float: left;
    margin-left: 3%;
}

.home-text-block1-image {
    float: right;width: 46%;
}
.home-text-block1-image img {
    width: 100%;
}


.registration-submit input {
    background: #47a3da;
    border: 0;
    color: white;
    width: 200px;
    text-transform: uppercase;
    padding: 15px 0px;
    cursor: pointer;
    transition: 0.25s;
}

.registration-submit input:hover {
    background: #5d91bc;
    transition: 0.25s;
}
.modal-registration-block h2 {
    background: #e9f7ff;
    padding: 15px;
    font-weight: 400;
}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;appearance: textfield;
}
input[type="number"]:hover,input[type="number"]:focus {
-moz-appearance: number-input;appearance: auto;
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

.modal-registration-column {
    padding: 30px 0;
}
.modal-registration-input {
    display: inline-block;
    width: 49%;
    vertical-align: top;
    margin: 10px 0;
}
form#modal-registration {
    margin: 20px 0;
}
.input--hoshi {
	overflow: hidden;
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: 10px 0;
	max-width: 350px;
	width: 100%;
	vertical-align: top;
}

.input__field--hoshi {
	padding: 0.85em 0.15em;
	width: 100%;
	background: transparent;
	color: #595F6E;
}

.input__label--hoshi {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 0.25em;
	width: 100%;
	height: 100%;
	text-align: left;
	pointer-events: none;
	display: inline-block;
	color: #4b4b4b;
	font-weight: bold;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.input__label-content--hoshi {
	display: block;
	padding: 0;
	width: 100%;
}

.input__label--hoshi::before, .input__label--hoshi::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-bottom: 2px solid #b4daf1;
}

.input__label--hoshi::after {
	margin-top: 2px;
	border-bottom: 4px solid red;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.7s;
}

.input__label--hoshi-color-1::after {
	border-color: hsl(200, 100%, 50%);
}

.input__label--hoshi-color-2::after {
	border-color: hsl(160, 100%, 50%);
}

.input__label--hoshi-color-3::after {
	border-color: hsl(20, 100%, 50%);
}

.input__field--hoshi:focus + .input__label--hoshi::after, .input--filled .input__label--hoshi::after {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.input__field--hoshi:focus + .input__label--hoshi .input__label-content--hoshi, .input--filled .input__label-content--hoshi {
	-webkit-animation: anim-1 0.5s forwards;
	animation: anim-1 0.5s forwards;
}

@-webkit-keyframes anim-1 {
	50% {
		opacity: 0;
		-webkit-transform: translate3d(1em, 0, 0);
		transform: translate3d(1em, 0, 0);
	}
	51% {
		opacity: 0;
		-webkit-transform: translate3d(-1em, -40%, 0);
		transform: translate3d(-1em, -40%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, -40%, 0);
		transform: translate3d(0, -40%, 0);
	}
}

@keyframes anim-1 {
	50% {
		opacity: 0;
		-webkit-transform: translate3d(1em, 0, 0);
		transform: translate3d(1em, 0, 0);
	}
	51% {
		opacity: 0;
		-webkit-transform: translate3d(-1em, -40%, 0);
		transform: translate3d(-1em, -40%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, -40%, 0);
		transform: translate3d(0, -40%, 0);
	}
}
.input__field {
    position: relative;
    display: block;
    float: right;

    border: none;
    border-radius: 0;
    background: #f9f9f9;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.modal-registration-input input:hover, .modal-registration-input input:focus, .modal-registration-input input:active {outline:none !important;border:0}


 /* */ 

@media screen and (max-width: 1250px) {
#help-cards{margin:-20px 0 0}
.help-block{width:30.3333333%;margin:20px 1.5%}
#main-uslugi{margin-top:-11%;padding-bottom:4%}
#news-main {
    width: 56%;
    margin-left: 2%;}
.main-news-right-block {
    text-align: center;
    width: 37%;
    float: right;
    margin-top: 25px;
    margin-right: 2%;
}
}
@media screen and (max-width: 1225px) {
.resiver{width:23%;margin:10px 1%}
#pack-content{clear:both;width:auto;max-width:100%}
.video-title{width:auto;float:none}
.video-button{display:none}
#nav li>a{padding:0 16px}
}
@media screen and (max-width: 1120px) {
.home-include {
    margin-top: 40px;
    padding: 0 20px;
}
#channels-slider{display:none}
#channels-nav{display:none}
.help-block{width:46%;margin:20px 2%}
#nav:before{display:inline-block;content:"Меню";font-size:20px;font-weight:400;line-height:40px;color:#FFF;padding:0 0 0 20px}
#mini-cart{position:absolute;right:0;top:0}
#nav li{height:0;width:100%;display:block;float:none;overflow:hidden}
/* на мобиле меню — вертикальный список по центру; резерв под корзину (72px)
   тут не нужен и сдвигал пункты влево. !important — потому что базовое правило
   «#nav > ul{padding-right:72px}» стоит ниже в файле и при равной специфичности
   иначе побеждает по порядку. */
#nav > ul{padding-right:0!important}
}
@media screen and (max-width: 1024px) {
.news-block img {
    width: 80px;
    height: 62px;
}
.resiver{width:31.33333333%}
.card{width:46%;margin:20px 2%}
.card-title{width:auto;display:block}
#contacts-img{width:auto;float:none;    margin-top: 20px;display:block}
.block-uslugi{width:28%}
#main-uslugi{padding-bottom:2%}
.why-we-block-image{float:none;margin:auto}
.why-we-text{float:left;width:100%}
}
@media screen and (max-width: 900px) {
.home-news-promo-row{display:flex;flex-direction:column}
#news-main{order:2}
.main-news-right-block {
    order: 1;
    text-align: center;
    width: 100%;
    float: right;
    margin-top: 0;
    margin-right: 0;
}
td.image,th.image{display:none}
#content{padding:20px;min-height:0}
#slider{display:none}
.video-content iframe{width:29.33333333%}
#news-main{width:90%;margin-left:5%}
#akcia-main{width:90%;float:none;margin:25px auto}
.more-akcia{margin: 16px auto 0;}
#card-title-with-sale{padding:15px}
.card-title{padding:15px}
#card-title-with-sale h3{font-size:16px}
#main-uslugi{padding-bottom:1%}
.sertif {
    width: 90%;
    margin: 25px auto;
    float: none;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

#pacs{height:auto;padding:8px 5px}
#pacs .center{justify-content:center;gap:8px;padding:0}
#pacs .center>a:nth-child(n+5){display:none}
}


@media screen and (max-width: 830px) {
.modal-registration-input{width:100%;}
.input--hoshi{max-width:100%;}

.why-we-block p {
    float: none;
    font-size: 13px;
    margin-left: 0!important;
    margin: auto;
    text-align: center;
}
.modal-registration-column {
    padding: 30px 0;
    display: flex;
    flex-wrap: wrap;
}
.modal-registration-input:nth-child(1) {order:0}
.modal-registration-input:nth-child(2) {order:3}
.modal-registration-input:nth-child(3) {order:1}
.modal-registration-input:nth-child(4) {order:4}
.modal-registration-input:nth-child(5) {order:2}
#nav-top li {padding: 0 15px;}
}

@media screen and (max-width: 770px) {
.obmen-posad{width:33%}
.why-we-block p{float:left;font-size:13px;margin-left:0!important}
.posad-banner-text h1{font-size:2
5px!important}
.posad-banner-text{float:none;width:100%}
.posad-banner-form{float:none;width:100%}
.posad-banner-form input{width:90%;padding:10px;margin:7px 5%;border:none}
#ob-right{width:auto;float:none;margin:20px}
#ob-left{width:auto;float:none;margin:20px}
.resiver{width:48%}
.video-content iframe{width:46%}
.help-block{width:auto;margin:20px 0;float:none}
#help-cards{margin:0}
#foot-left{width:auto;float:none}
#foot-right{float:none;margin:20px auto 0}
#tovar h2{padding:0;line-height:35px}
.highslide-container table{left:-70px!important}
div#highslide-wrapper-0{left:-60px!important}
#text-block1{float:none;width:100%}
.text-block1-image{float:none;width:100%}
.text-block1-image img{width:100%}
#nav-top {height: auto;}
#nav-top li {width: 50%;}
}

@media screen and (max-width: 700px) {
.card-title {
    height: auto !important;
}
.card-title h3{width:auto}
.card-description{height:auto}
#card-title-with-sale h3{width:100%;height:auto!important}
#akcia-main{width:90%}
.card{width:96%}
.block-uslugi{width:52%;margin:5px 21%}
}


@media screen and (max-width: 610px) {
.why-we-block p {
    float: none;}
.why-we-block {
    display: inline-block;
    width: 47%;
    margin: 10px 1%;
    text-align: center !important;    float: none;
}
#nav-top li {
    padding: 0 15px;
}
}

/* «Почему мы» на мобиле — ровная сетка 2×2, иконка по центру кружка, всё выровнено */
@media screen and (max-width:610px){
  .home-why-we{display:grid;grid-template-columns:1fr 1fr;gap:22px 6px;align-items:start}
  .home-why-we .clear{display:none}
  .why-we-block{width:auto!important;margin:0!important;float:none;display:flex!important;
    flex-direction:column;align-items:center;text-align:center}
  .why-we-block-image{float:none;margin:0 auto!important}
  .why-we-text{width:100%!important;float:none}
  .why-we-block p{float:none;margin:8px 0 0!important;text-align:center}
}

@media screen and (max-width: 600px) {
.reg-content-image img {
    width: 46% !important;
    margin: 10px 2%;
}
.banner-reg,.banner-oplata{float:none;}
.banner-reg a,.banner-oplata a{display: inline-block;}
span.icon-akcia img{height:18px!important;width:auto!important}
.tab-content-mini img{width:40%!important}
form#modal-form,form#question-form{width:90%}
form#modal-form input,form#question-form input{width:90%}
.posad-konsult-tel{font-size:35px}
.posad-konsult-tel img{height:35px!important;width:auto!important}
section#posad-konsult p{font-size:27px}
#why-we{display:none}
#content h1{font-size:22px}
#content img{width:100%;height:auto}
.card-image img{width:100%!important;height:100%!important;object-fit:cover!important}
#home-tabs .tabs-buttons li{font-size:12px;line-height:20px;padding:5px}
#home-tabs .tab-content{font-size:12px;line-height:20px}
#home-tabs .tab-content.active{padding:10px}
}


@media screen and (max-width: 580px) {
.home-text-block1-image{display:none}
div#home-text-block1{width:97%}
#nav-top li {
   font-size:13px;
}
}

/* ── Cart icon in nav ───────────────────────────────────────────── */
#nav{position:relative}
/* The cart block is absolutely positioned, so it is out of flow and the floated
   menu items would happily run underneath it. Reserve its width on the menu list
   itself — that shrinks the float container instead of relying on the labels
   staying short. 72px = реальная ширина корзины (64px) + зазор; 104px было с
   запасом и вместе с более длинным пунктом «Обслуживание» ломало меню на 2 ряда. */
#nav > ul{padding-right:72px;box-sizing:border-box}
#cart-icon-block{position:absolute;right:0;top:0;height:40px;display:flex;align-items:center;padding:0 10px;z-index:10}
#cart-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 10px;background:rgba(255,255,255,0.15);border-radius:20px;text-decoration:none;transition:background .2s}
#cart-btn:hover{background:rgba(255,255,255,0.28)}
.cart-badge{display:inline-block;background:#e63c2f;color:#fff;border-radius:50%;min-width:20px;height:20px;font-size:12px;line-height:20px;text-align:center;font-weight:700;padding:0 3px;box-sizing:border-box}
#cart-toast{position:fixed;bottom:30px;left:28px;background:#0071B6;color:#fff;padding:12px 22px;border-radius:8px;font-size:14px;z-index:9999;opacity:0;transform:translateY(12px);transition:opacity .28s,transform .28s;pointer-events:none}
#cart-toast.show{opacity:1;transform:translateY(0)}

/* ── Floating cart button: shows bottom-right only while the cart has items ── */
#cart-fab{position:fixed;right:24px;bottom:24px;width:56px;height:56px;border-radius:50%;
  background:#0071B6;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,0.3);z-index:9998;text-decoration:none;
  opacity:0;transform:scale(.6);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,background .2s}
#cart-fab.show{opacity:1;transform:scale(1);pointer-events:auto}
#cart-fab:hover{background:#005a91}
.cart-fab-badge{position:absolute;top:-4px;right:-4px;background:#e63c2f;color:#fff;
  border-radius:50%;min-width:22px;height:22px;font-size:12px;line-height:22px;
  text-align:center;font-weight:700;padding:0 4px;box-sizing:border-box;border:2px solid #fff}
@media screen and (max-width:600px){
  #cart-fab{right:16px;bottom:16px;width:50px;height:50px}
}

/* ── Card buttons ───────────────────────────────────────────────── */
.card-buttons{height:auto;overflow:hidden;padding:0 14px 14px}
.card-buttons button,.card-buttons .btn-add-cart,.card-buttons .card-detail-btn{border-radius:10px}
.pdp-cart-slot{display:block;clear:both;width:100%;box-sizing:border-box;margin-top:20px}
.btn-add-cart{display:block;width:100%;background:#47a3da;color:#fff;border:none;border-radius:10px;height:44px;font-size:15px;font-family:'Montserrat',sans-serif;cursor:pointer;transition:background .25s;box-sizing:border-box}
.btn-add-cart:hover{background:#ff4f3d}
.btn-out-of-stock{display:block;width:100%;height:44px;border:1px solid #d8dee5;border-radius:10px;background:#eef1f4;color:#687684;font:600 15px 'Montserrat',sans-serif;cursor:not-allowed;box-sizing:border-box}
.in-cart-wrap{display:flex;align-items:stretch;height:44px;box-sizing:border-box;border-radius:10px;overflow:hidden}
/* segments must be flush — только внешний wrap скруглён и обрезан, иначе на стыках торчат углы */
.card-buttons .in-cart-wrap button{border-radius:0}
.btn-qty-dec,.btn-qty-inc{background:#47a3da;color:#fff;border:none;width:40px;font-size:20px;cursor:pointer;transition:background .2s;flex-shrink:0}
.btn-qty-dec:hover,.btn-qty-inc:hover{background:#0071B6}
.in-cart-mid{flex:1;background:#e8f4fd;display:flex;flex-direction:column;align-items:center;justify-content:center}
.in-cart-label{font-size:11px;color:#0071B6;font-weight:600;line-height:1.2}
.in-cart-qty{font-size:13px;color:#333;line-height:1.2}

/* ── Корзина (korzina.php) ──────────────────────────────────────── */
/* NB: the legacy «#content table tr th{background:#00558E}» (1,0,3) and
   «#content table tr:nth-child(odd)» (1,1,2) hijack any table inside #content,
   so every rule here is #content-scoped to out-specify them. */
.cart-page-wrap{max-width:940px;margin:28px auto 64px;padding:0 20px}
.cart-page-header{font-size:28px;font-weight:700;color:#1a2733;margin:0 0 22px;padding:0;border:none}

#korzina-empty{text-align:center;padding:64px 24px;background:#fff;border:1px solid #e8edf1;border-radius:16px;
  box-shadow:0 4px 20px rgba(20,40,60,.06);color:#8a94a0;font-size:16px}
#korzina-empty p{margin:0 0 18px;font-size:17px;color:#4a5560}
#korzina-empty a{display:inline-block;background:#0071B6;color:#fff;text-decoration:none;padding:12px 26px;
  border-radius:10px;font-size:15px;font-weight:600;transition:background .25s,transform .15s ease}
#korzina-empty a:hover{background:#005b93;color:#fff;transform:translateY(-2px)}

#korzina-main{background:#fff;border:1px solid #e8edf1;border-radius:16px;overflow:hidden;
  box-shadow:0 4px 20px rgba(20,40,60,.06)}
#content .korzina-table{width:100%;table-layout:fixed;border-collapse:collapse;margin:0}
/* kill the legacy zebra «#content table tr:nth-child(odd/even)» (1,1,2) — needs
   to be beaten outright, not by source order */
#content .korzina-table tr:nth-child(odd),#content .korzina-table tr:nth-child(even){background:#fff}
#content .korzina-table th{text-align:left;padding:15px 22px;background:#f7fafc;color:#8a94a0;font-size:11.5px;
  font-weight:600;text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid #e8edf1}
#content .korzina-table td{padding:18px 22px;border-bottom:1px solid #f0f3f6;vertical-align:middle;overflow:hidden}
#content .korzina-table tbody tr:last-child td{border-bottom:none}
#content .korzina-table tbody tr:hover{background:#fbfdff}
.ki-item{display:flex;align-items:center;gap:15px;min-width:0}
.ki-item-txt{min-width:0}
.ki-thumb{width:60px;height:60px;flex-shrink:0;border:1px solid #eef2f6;border-radius:10px;overflow:hidden;
  background:#f7fafc;display:flex;align-items:center;justify-content:center;transition:border-color .2s,transform .15s ease}
a.ki-thumb:hover{border-color:#0071B6;transform:translateY(-2px)}
.ki-thumb img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.ki-thumb-ph{font-size:22px;opacity:.35;line-height:1}
.ki-title{display:block;font-size:15.5px;font-weight:600;color:#1a2733;line-height:1.4;text-decoration:none}
a.ki-title:hover{color:#0071B6}
.ki-unit{display:block;margin-top:3px;font-size:12.5px;color:#8a94a0}
.ki-td-qty{width:132px}
.ki-qty-ctrl{display:inline-flex;align-items:center;border:1px solid #e3ebf1;border-radius:9px;overflow:hidden;background:#fff}
.ki-qty-ctrl button{background:#f2f6f9;color:#0071B6;border:none;width:34px;height:34px;font-size:17px;font-weight:600;
  cursor:pointer;transition:background .2s,color .2s;flex-shrink:0}
.ki-qty-ctrl button:hover{background:#0071B6;color:#fff}
.ki-qty-ctrl span{flex:1;text-align:center;font-size:14px;font-weight:600;min-width:36px;color:#1a2733}
.ki-td-sum{width:124px;font-size:16px;font-weight:700;color:#1a2733;white-space:nowrap}
.ki-td-del{width:56px;text-align:center}
.ki-del{background:#f4f7fa;border:none;color:#aeb6c0;width:30px;height:30px;border-radius:50%;
  font-size:13px;cursor:pointer;transition:background .2s,color .2s;display:inline-flex;
  align-items:center;justify-content:center;line-height:1}
.ki-del:hover{background:#e63c2f;color:#fff}
#content .korzina-table .korzina-total-row td{padding:20px 22px;font-weight:700;font-size:16px;
  background:#f7fafc;border-top:1px solid #e8edf1;border-bottom:none;color:#1a2733}
#content .korzina-table .korzina-total-row td:last-child{text-align:right;overflow:visible}
#korzina-total-sum{color:#0071B6;font-size:23px;font-weight:700;white-space:nowrap}

/* Мобила: таблица корзины не влезает в 4 колонки → строки-товары в карточки,
   шапку скрываем, «Итого» — flex во всю ширину. Десктоп-таблица не трогается. */
@media screen and (max-width:560px){
  #content .korzina-table{display:block;width:100%}
  #content .korzina-table thead{display:none}
  #content .korzina-table tbody{display:block}
  #content .korzina-table tbody tr{display:block;position:relative;padding:16px 16px 14px;border-bottom:1px solid #f0f3f6}
  #content .korzina-table tbody td{display:block;padding:0;border:none;overflow:visible}
  #content .korzina-table .ki-td-title{margin-bottom:14px;padding-right:38px}
  #content .korzina-table .ki-td-qty{display:inline-block!important;vertical-align:middle}
  #content .korzina-table .ki-td-sum{float:right;font-size:17px;font-weight:700;color:#0071B6;line-height:34px}
  #content .korzina-table .ki-td-del{position:absolute;top:12px;right:8px}
  #content .korzina-table tfoot{display:block}
  #content .korzina-table .korzina-total-row{display:flex;justify-content:space-between;align-items:center}
  #content .korzina-table .korzina-total-row td{display:block;padding:16px;border-top:1px solid #e8edf1;border-bottom:none}
  #content .korzina-table .korzina-total-row td:first-child{border-top:none}
}

#korzina-footer{margin-top:22px;text-align:right}
.btn-checkout{display:inline-block;background:#ff4f3d;color:#fff;border:none;padding:15px 38px;font-size:16px;
  font-weight:600;font-family:'Montserrat',sans-serif;cursor:pointer;border-radius:11px;text-decoration:none;
  box-shadow:0 6px 18px rgba(255,79,61,.32);transition:background .25s,transform .15s ease,box-shadow .25s}
.btn-checkout:hover{background:#e13d2c;color:#fff;transform:translateY(-2px);box-shadow:0 9px 24px rgba(255,79,61,.4)}
@media screen and (max-width:640px){
  .cart-page-wrap{padding:0 12px}
  #content .korzina-table th,#content .korzina-table td{padding:14px 12px}
  #content .korzina-table .korzina-total-row td{padding:16px 12px}
  .ki-td-qty{width:112px}
  .ki-td-sum{width:96px;font-size:14.5px}
  .btn-checkout{display:block;text-align:center}
}

/* ── Оформление заказа (zakaz.php) ─────────────────────────────── */
.zakaz-page-wrap{max-width:1080px;margin:36px auto 70px;padding:28px 20px;
  background:#f5f8fb;border-radius:18px;box-sizing:border-box}
.zakaz-page-header{font-size:28px;font-weight:700;color:#1a2b3c;margin:0 0 30px}
.zakaz-cols{display:flex;gap:28px;align-items:flex-start}
.zakaz-form-col{flex:1 1 580px;min-width:0;background:#fff;border-radius:14px;
  padding:36px 40px;box-sizing:border-box;
  box-shadow:0 2px 8px rgba(20,40,70,.05),0 12px 32px rgba(20,40,70,.07);
  border:1px solid #eef1f6}
#zakaz-form{display:flex;flex-direction:column}
.zakaz-summary-col{flex:0 0 300px;background:#f6faff;border-radius:14px;padding:26px;
  border:1px solid #d7e7f5;position:sticky;top:16px;box-sizing:border-box;
  box-shadow:0 2px 8px rgba(20,40,70,.04)}
.zakaz-summary-col h2{font-size:16px;color:#0071B6;margin:0 0 16px;font-weight:700;
  border-bottom:2px solid #dcecf9;padding-bottom:10px}
.zakaz-summary-list{list-style:none;margin:0;padding:0}
.zakaz-summary-list li{font-size:13.5px;padding:10px 0;border-bottom:1px solid #e4eef8;color:#333;line-height:1.5}
.zakaz-summary-list li:last-child{border-bottom:none}
.zakaz-summary-total{margin-top:14px;font-weight:700;font-size:18px;color:#0071B6;padding-top:12px;border-top:2px solid #dcecf9}

.zf-field{margin-bottom:20px}
.zf-field label{display:block;width:auto;float:none;font-size:13px;color:#5a6672;font-weight:600;margin-bottom:7px}
/* float:none is load-bearing: the legacy global «input{float:left}» takes the field
   out of flow, which collapses the DaData .suggestions-wrapper (inserted right after
   the input) onto the input's own top edge — so the dropdown rendered on top of the
   field. Keeping the input in flow puts the wrapper where it belongs: below it. */
.zf-field input,.zf-field select,.zf-field textarea{float:none;width:100%;box-sizing:border-box;padding:12px 14px;
  border:1.5px solid #dde5ef;border-radius:9px;font-size:14.5px;font-family:'Montserrat',sans-serif;
  outline:none;transition:border-color .2s,box-shadow .2s;background:#fbfcfe;color:#222}
.zf-field input::placeholder,.zf-field textarea::placeholder{color:#a7b2bf}
.zf-field input:focus,.zf-field select:focus,.zf-field textarea:focus{
  border-color:#47a3da;background:#fff;box-shadow:0 0 0 4px rgba(71,163,218,.14)}
.zf-field textarea{height:90px;resize:vertical}
.zf-required{color:#e63c2f}

/* Способ получения заказа: две крупные взаимоисключающие карточки. */
.zf-method{min-width:0;margin:0 0 20px;padding:0;border:0}
.zf-method legend{display:block;width:100%;margin:0 0 9px;padding:0;float:none;
  font-size:13px;color:#5a6672;font-weight:600}
.zf-method-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.zf-method-option{position:relative;display:flex;align-items:center;gap:11px;min-width:0;
  padding:14px 13px;border:1.5px solid #dde5ef;border-radius:11px;background:#fbfcfe;
  box-sizing:border-box;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.zf-method-option:hover{border-color:#9ac9e6;background:#fff}
.zf-method-option.active{border-color:#0071B6;background:#f1f9ff;box-shadow:0 0 0 3px rgba(0,113,182,.1)}
.zf-method-option input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.zf-method-check{position:relative;flex:0 0 21px;width:21px;height:21px;border:2px solid #a9b7c5;
  border-radius:6px;background:#fff;box-sizing:border-box;transition:border-color .2s,background .2s}
.zf-method-option input:focus-visible+.zf-method-check{outline:3px solid rgba(71,163,218,.28);outline-offset:2px}
.zf-method-option input:checked+.zf-method-check{border-color:#0071B6;background:#0071B6}
.zf-method-option input:checked+.zf-method-check:after{content:'';position:absolute;left:5px;top:1px;
  width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.zf-method-copy{display:block;min-width:0;line-height:1.3}
.zf-method-copy strong{display:block;color:#263746;font-size:13.5px;font-weight:700}
.zf-method-copy small{display:block;margin-top:4px;color:#83909d;font-size:11.5px;line-height:1.35}

.zf-pickup-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;
  margin:0 0 20px;padding:14px;background:#f6faff;border:1px solid #d7e7f5;border-radius:12px;box-sizing:border-box}
.zf-pickup-panel[hidden],#zf-delivery-fields[hidden]{display:none!important}
.zf-pickup-photo{display:block;width:100%;height:100%;min-height:190px;object-fit:cover;
  border-radius:9px;background:#e9f0f6}
.zf-pickup-info{min-width:0;padding:5px 2px}
.zf-pickup-info h2{margin:0 0 12px;color:#0071B6;font-size:16px;line-height:1.3}
.zf-pickup-info p{margin:0 0 8px;color:#465462;font-size:12.5px;line-height:1.5}
.zf-pickup-info p strong{color:#273746}
.zf-pickup-info .zf-pickup-note{margin-top:12px;padding-top:10px;border-top:1px solid #d7e7f5;
  color:#0071B6;font-weight:600}
.zf-pickup-map{grid-column:1/-1;height:260px;overflow:hidden;border-radius:9px;background:#e9f0f6}
.zf-pickup-map iframe,.zf-pickup-map>div{display:block;width:100%!important;max-width:100%;border:0}
.zf-pickup-map-links{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.zf-pickup-map-links a{display:block;padding:11px 10px;border:1.5px solid #47a3da;border-radius:8px;
  background:#fff;color:#0071B6;font-size:12.5px;font-weight:600;text-align:center;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s}
.zf-pickup-map-links a:hover{background:#0071B6;border-color:#0071B6;color:#fff}

/* ── Подсказки адреса DaData (zakaz.php) ────────────────────────────
   The plugin inserts .suggestions-wrapper as a SIBLING right after the input
   (createWrapper: el.after(wrapper)), so the wrapper's top edge sits exactly at
   the input's bottom edge. The bundled css/suggestions.min.css is a trimmed copy
   of the vendor stylesheet with position/left/min-width/z-index stripped out, so
   the list never became a floating overlay and collided with the field. Restore
   the overlay here and style it like the rest of the form. */
.suggestions-wrapper{position:relative;z-index:60}
.suggestions-suggestions{position:absolute;top:6px;left:0;right:0;min-width:100%;box-sizing:border-box;
  background:#fff;border:1px solid #e3ebf1;border-radius:12px;overflow:hidden;cursor:default;z-index:9999;
  box-shadow:0 12px 32px rgba(20,40,60,.16)}
.suggestions-suggestion{padding:11px 15px;font-size:14px;line-height:1.4;color:#1a2733;cursor:pointer;
  transition:background .15s ease}
.suggestions-suggestion+.suggestions-suggestion{border-top:1px solid #f2f5f8}
.suggestions-suggestion:hover,.suggestions-selected{background:#f2f8fd}
.suggestions-suggestions strong{font-weight:600;color:#0071B6}
.suggestions-subtext{font-size:12.5px;color:#8a94a0}
.suggestions-hint{padding:9px 15px;font-size:12.5px;color:#8a94a0}
/* DaData branding badge — hidden per request */
.suggestions-promo{display:none!important}
.zf-time-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px;min-height:44px}
.zf-time-chip{width:100%;box-sizing:border-box;display:block;line-height:1.3;padding:10px 8px;
  text-align:center;border:1.5px solid #dde5ef;border-radius:9px;background:#fbfcfe;
  font-size:13.5px;font-family:'Montserrat',sans-serif;color:#3d4a57;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s}
.zf-time-chip:hover:not(:disabled):not(.active){border-color:#47a3da;background:#fff}
.zf-time-chip.active{background:#0071B6;border-color:#0071B6;color:#fff;font-weight:600;
  box-shadow:0 3px 10px rgba(0,113,182,.28)}
.zf-time-chip.active:hover{background:#0071B6;border-color:#0071B6;color:#fff}
.zf-time-chip:disabled{background:#f1f3f6;color:#b7c0cb;cursor:not-allowed;
  text-decoration:line-through;border-color:#e7ebf0}
.zf-time-hint{grid-column:1/-1;font-size:13px;color:#8b96a3}

/* ── Flatpickr calendar (дата доставки на zakaz.php) — brand colours ── */
#zf-date{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2347a3da' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:42px}
.flatpickr-calendar{box-shadow:0 8px 28px rgba(20,40,70,.16);border-radius:12px;font-family:'Montserrat',sans-serif}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:#0071B6;border-color:#0071B6}
.flatpickr-day.today{border-color:#0071B6}
.flatpickr-day:hover{background:#e8f4fd}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{color:#c9d2db}
.flatpickr-months .flatpickr-month,.flatpickr-current-month .flatpickr-monthDropdown-months{color:#1a2b3c}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#0071B6}
span.flatpickr-weekday{color:#5a6672}
@media screen and (max-width:480px){
  .flatpickr-calendar{font-size:12.5px;width:296px!important}
  .flatpickr-days,.dayContainer{width:100%!important;min-width:100%!important;max-width:100%!important}
  .flatpickr-day{height:34px;line-height:34px;max-width:none}
  .flatpickr-current-month{font-size:13.5px;padding:0 30px}
}

.zf-checkbox{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;line-height:1.5;color:#3d4a57;
  cursor:pointer;margin:4px 0 22px;width:auto;float:none;
  background:#f6faff;border:1px solid #dcecf9;border-radius:10px;padding:14px 16px}
.zf-checkbox input{width:auto;flex-shrink:0;margin-top:2px;padding:0;float:none;
  cursor:pointer;accent-color:#0071B6;transform:scale(1.15)}

#zakaz-error{margin-top:4px}
.zakaz-consent-note{font-size:12.5px;line-height:1.6;color:#8b96a3;margin:16px 0 0;text-align:center}
/* Подпись SmartCaptcha (требование Яндекса при невидимом режиме) */
.captcha-note{font-size:11px;line-height:1.5;color:#aab2bd;margin:10px 0 0;text-align:center}
.captcha-note a{color:#8a94a0;text-decoration:underline}
.zakaz-consent-note a{color:#47a3da;text-decoration:underline}
.zakaz-consent-note a:hover{color:#0071B6}

.btn-submit-order{display:block;width:100%;background:#e63c2f;color:#fff;border:none;
  padding:15px 20px;font-size:16px;font-weight:600;letter-spacing:.3px;
  font-family:'Montserrat',sans-serif;cursor:pointer;border-radius:9px;margin-top:8px;
  box-shadow:0 4px 14px rgba(230,60,47,.3);
  transition:background .2s,transform .15s,box-shadow .2s}
.btn-submit-order:hover:not(:disabled){background:#b32d22;transform:translateY(-1px);box-shadow:0 6px 18px rgba(230,60,47,.4)}
.btn-submit-order:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px rgba(230,60,47,.35)}
.btn-submit-order:disabled{background:#ccc;cursor:not-allowed;box-shadow:none;transform:none}

.zakaz-success-box{text-align:center;padding:60px 40px;max-width:600px;margin:36px auto 70px;
  background:#fff;border-radius:14px;box-sizing:border-box;
  box-shadow:0 2px 8px rgba(20,40,70,.05),0 12px 32px rgba(20,40,70,.07);border:1px solid #eef1f6}
.zakaz-success-icon{font-size:64px;display:block;margin:0 auto 20px;line-height:1}
.zakaz-success-title{font-size:26px;font-weight:700;color:#0071B6;margin:0 0 14px}
.zakaz-success-num{font-size:17px;color:#333;margin:0 0 14px}
.zakaz-success-num strong{color:#e63c2f;font-size:22px;display:block;margin-top:6px}
.zakaz-success-text{font-size:15px;color:#555;margin:0 0 30px;line-height:1.7}
.zakaz-back-btn{display:inline-block;background:#0071B6;color:#fff;padding:12px 28px;border-radius:8px;text-decoration:none;font-size:15px;transition:background .2s}
.zakaz-back-btn:hover{background:#005a94;color:#fff}
/* Виджет SmartCaptcha фиксированной ширины — на узких экранах его служебные
   элементы тянули страницу вправо (блок «уезжал»). Клипаем переполнение.
   На iOS Safari overflow-x:hidden на body НЕнадёжен, поэтому дублируем клип на
   #content (в обычном контейнере iOS клипает верно) + width:100% на html/body.
   Только мобила: на десктопе sticky-колонка заказа, ей overflow-clip вреден. */
.smart-captcha{max-width:100%;overflow:hidden}
.smart-captcha iframe{max-width:100%!important}
@media screen and (max-width:720px){
html,body{overflow-x:hidden;width:100%;max-width:100%}
#content{overflow-x:hidden}
/* колонки в стек и НА ВСЮ ШИРИНУ: базовый align-items:flex-start в column-режиме
   сжимал форму по контенту (капча 302px + инпуты) → блок «уезжал» за экран */
.zakaz-cols{flex-direction:column;align-items:stretch}
.zakaz-form-col{padding:26px 22px;width:100%;box-sizing:border-box}
.zakaz-summary-col{flex:none;width:100%;box-sizing:border-box;position:static}
.zf-time-slots{grid-template-columns:repeat(2,1fr)}
.zf-time-chip{padding:10px 4px;font-size:13px}
}

@media screen and (max-width:520px){
.zf-method-options{grid-template-columns:1fr}
.zf-pickup-panel{grid-template-columns:1fr;padding:12px}
.zf-pickup-photo{height:auto;min-height:0;aspect-ratio:4/3}
.zf-pickup-map{height:230px}
.zf-pickup-map-links{grid-template-columns:1fr}
}


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

#nav-top li {
    width: 100%;
	font-size:15px;
}
.center-top {
    display: inline-block;
    margin-left: 0;
}

#nav-top {

	height: auto;
}
}

@media screen and (max-width: 500px) {
.sertif img {
    width: 90%;
    margin-bottom: 15px;
    height: auto !important;
}
.akcia-promo-row{flex-direction:column}
.akcia-main-text{text-align:center}
.tab-content.active img{float:none}
.oborudovanie-obmen-block{width:100%;float:left}
.oborudovanie-obmen-block h3{font-size:14px!important}
.home-tabs-links li{display:inline-block;padding-bottom:5px}
.obmen-posad{width:50%}
section#posad-konsult p{font-size:20px;line-height:28px}
.posad-konsult-tel{font-size:25px}
.posad-konsult-tel img{height:25px!important}
.video-content iframe{width:96%;float:none}
#tabs li{display:block;width:auto;float:none;text-align:left}
#pack-pack{overflow:visible}
#pack-price{top:-20px}
.resiver{width:auto;margin:10px 0}
.block-uslugi{width:60%}
#akcia-main{width:90%}
.highslide-container table{width:200px!important;display:none}
div#highslide-wrapper-0{width:200px!important;height:auto!important;left:0!important}
.highslide-html{width:200px!important;height:auto!important}
.highslide-html div{width:200px!important;height:auto!important}
.highslide-header ul li{padding-right:1em}
div#highslide-html div{padding:5px}
}


@media screen and (max-width: 400px) {
.reg-content-image img {
    width: 96% !important;
    margin: 10px 2%;
}
#home-tabs .tab-content{width:70%;float:left}
#home-tabs .tabs-buttons{width:30%}
.tab-content-mini img{display:none}
#content p{word-break:break-all;-moz-hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}
.sale-card{padding:0;float:left;margin:-10px;margin-right:0;margin-bottom:5px;height:25px}
.sale-card a{background:#fe623a;color:#fff;padding:5px 7px;margin-right:15px;font-size:12px;border-radius:0 15px}
section#posad-vopros-zakaz{padding:15px}
section.posad-content h2{font-size:20px}
#content h1,h2,h3,h4{font-size:20px}
.card-price-complect{height:auto}

.card-image img{width:100%;object-fit:cover}

.news-row{flex-direction:column;text-align:center}
.news-description{width:100%}
}
@media screen and (max-width: 370px) {
.card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.why-we-block{width:98%}
#card-image img{width:100%;height:100%}
.posad-konsult-tel img{display:none}
.posad-banner-form{padding:25px 15px}
.posad-banner-form input{width:100%;padding:10px;margin:7px 0}
}

/* На телефоне пять широких логотипов сжимаются в один ряд. Контейнер 4:3
   тратил большую часть высоты на пустой фон. На мобильном плитка повторяет
   широкую форму картинки, а логотип занимает почти всю её ширину. */
@media screen and (max-width:600px){
  #pacs{display:block;padding:8px 4px}
  #pacs .center{gap:3px;padding:0}
  #pacs .center>a{flex:1 1 0}
  #pacs .center>a:nth-child(n+4){display:none}
  #pacs .pac{aspect-ratio:auto;padding:2px;border-radius:4px}
  #pacs .pac img{width:100%;height:auto;max-width:none;max-height:none}
}

.an-but{
       padding: 12px 20px;
    color: white;
    line-height: 40px;
    text-align: center;
    background: #77cdff;
}
.an-but:hover{
     background: #2db2ff;
     transition: .3s;
     color: white;
}
/* override: qty buttons inside .card-buttons must NOT be full-width */
.in-cart-wrap button{display:flex!important;width:40px!important;height:44px!important;flex-shrink:0!important;align-items:center;justify-content:center}
.ki-qty-ctrl button{display:flex!important;width:34px!important;height:34px!important;flex-shrink:0!important;align-items:center;justify-content:center}

/* ── Category filter bar (tovaryi.html) ── */
.cat-filter{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin:1.5rem 0 1.2rem}
.cat-filter-label{width:auto;float:none;font-size:.88rem;color:#353535;font-weight:600}
.cat-filter-select{background:#fff;border:1px solid #d5d5d5;border-radius:6px;padding:.5rem .8rem;
  font-size:.85rem;color:#353535;cursor:pointer;max-width:320px}
.cat-filter-select:hover,.cat-filter-select:focus{border-color:#0372B6;outline:none}

/* ── Product card grid: flex instead of float to fix row-break staircase ── */
.products-grid{display:flex;flex-wrap:wrap;align-items:stretch}
.products-grid .card{float:none;width:31.666%;margin:.833%}
#cards{display:flex;flex-wrap:wrap;align-items:stretch}
#cards .card{float:none;width:31.666%;margin:.833%}
@media(max-width:750px){
  .products-grid .card,#cards .card{width:48%;margin:8px 1%}
}
@media(max-width:480px){
  /* одна колонка: зазор больше, чтобы hover-сдвиг карточки вверх не задевал соседнюю */
  .products-grid .card,#cards .card{width:100%;margin:11px 0}
}

/* ── Equal-height cards: same-row cards keep aligned edges regardless of
   title line count or missing images, without changing titles/data ── */
.products-grid .card,#cards .card{display:flex;flex-direction:column}
/* .card-media — это только ссылка-обёртка картинки. Растягивать её нельзя:
   свободное место уходило внутрь неё и бокс с фото «плавал» между карточками.
   (правило flex:1 писалось под старую разметку, где <a> оборачивал и цену) */
.products-grid .card-media,#cards .card-media{display:block;flex:none}
/* flex-centered instead of table-cell: a table-cell display gets blockified
   (and loses vertical-align) once .card-title becomes a flex item */
/* только обмен: у его карточки нет картинки, заголовок остаётся шапкой-плашкой
   (и может быть с градиентом из админки) */
.obmen-card .card-title{min-height:80px;width:100%;box-sizing:border-box;display:flex;
  align-items:center;justify-content:center;background:#E2F3FE;color:#0071B6;text-align:center;padding:0 20px}
.obmen-card .card-title h2,.obmen-card .card-title h3{font-size:16px;text-align:center;padding:0}
/* ровно ОДИН auto-отступ: два (на цене и на кнопке) делили свободное место
   между собой, из-за чего промежутки скакали от длины заголовка */
.products-grid .card-price,#cards .card-price{margin-top:auto}

/* ── No-photo placeholder safety net: some <img> on the site (icons, logos)
   have no explicit width/height and relied on their source file being small.
   The placeholder is a large image — without this it renders full native
   size and blows out the layout. Caps it everywhere it might land. ── */
img[src*="no-photo"]{max-width:100%;height:auto}

/* ── Contacts page (kontaktyi.html): photo gallery + info card ── */
.shop-gallery{margin:20px 0 30px}
.shop-gallery .swiper{border-radius:10px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.18)}
.shop-gallery .swiper-slide{aspect-ratio:16/9;background:#eef4f9}
.shop-gallery .swiper-slide img{width:100%;height:100%;object-fit:cover;display:block}
.shop-gallery .swiper-pagination-bullet{background:#fff;opacity:.65}
.shop-gallery .swiper-pagination-bullet-active{opacity:1;background:#0071B6}
.shop-gallery .swiper-button-prev,.shop-gallery .swiper-button-next{color:#fff}
.shop-gallery .swiper-button-prev:after,.shop-gallery .swiper-button-next:after{font-size:20px}

.contact-wrap{display:flex;gap:24px;align-items:stretch;margin:20px 0 40px}
.contact-card{flex:0 0 380px;background:#fff;border-radius:10px;box-shadow:0 3px 12px rgba(0,0,0,.12);padding:28px;box-sizing:border-box}
.contact-card h2{color:#0071B6;font-size:20px;margin:0 0 20px}
.contact-list{list-style:none;margin:0 0 22px;padding:0}
.contact-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.contact-item:last-child{margin-bottom:0}
.contact-item svg{flex-shrink:0;margin-top:2px}
.contact-item strong{display:block;color:#333;font-size:13px;font-weight:600;margin-bottom:2px}
.contact-item span,.contact-item a{color:#4B4B4B;font-size:15px;line-height:1.4;text-decoration:none}
.contact-item a:hover{color:#0071B6}
.contact-call-btn{display:block;text-align:center;background:#0071B6;color:#fff;border-radius:6px;padding:13px;font-size:15px;font-weight:600;text-decoration:none;transition:background .2s;box-sizing:border-box}
.contact-call-btn:hover{background:#005a91;color:#fff}
.contact-route-btn{display:block;text-align:center;background:#fff;color:#0071B6;border:2px solid #0071B6;border-radius:6px;padding:11px;font-size:15px;font-weight:600;text-decoration:none;transition:background .2s,color .2s;box-sizing:border-box;margin-top:10px}
.contact-route-btn:hover{background:#0071B6;color:#fff}
.contact-map{flex:1;min-width:0;border-radius:10px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.12)}
.store-reviews{margin:0 0 44px}
.store-reviews h2{margin:0 0 22px;text-align:center;color:#333;font-size:26px}
.store-reviews-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.store-review-widget{position:relative;width:100%;height:800px;overflow:hidden;background:#fff;border:1px solid #e6e6e6;border-radius:10px;box-shadow:0 3px 12px rgba(0,0,0,.12);box-sizing:border-box}
.store-review-widget iframe{display:block;width:100%;height:100%;border:0;box-sizing:border-box}
.store-review-widget-yandex>a{position:absolute;left:0;bottom:8px;display:block;width:100%;max-height:14px;overflow:hidden;padding:0 16px;box-sizing:border-box;color:#b3b3b3;font-family:'Montserrat',sans-serif;font-size:10px;line-height:14px;text-align:center;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
@media screen and (max-width:800px){
  .contact-wrap{flex-direction:column}
  .contact-card{flex:none;width:auto}
  .store-reviews-grid{grid-template-columns:1fr}
  .store-review-widget{height:720px}
}
@media screen and (max-width:600px){
  .shop-gallery .swiper-slide{aspect-ratio:4/3}
  .contact-card{padding:20px}
  .store-reviews{margin-bottom:32px}
  .store-reviews h2{font-size:22px}
  .store-review-widget{height:620px}
}

/* ── Cookie consent banner (js/cookie-consent.js) ── */
#cookie-consent-bar{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#0d1b2a;color:#e8eef4;
  padding:16px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  box-shadow:0 -2px 14px rgba(0,0,0,.25);font-size:14px;line-height:1.5}
#cookie-consent-bar .cc-text{flex:1 1 460px;min-width:0}
#cookie-consent-bar a{color:#7ec4ff;text-decoration:underline}
#cookie-consent-bar a:hover{color:#fff}
#cc-accept-btn{flex:0 0 auto;width:auto;background:#0071B6;color:#fff;border:none;border-radius:6px;
  padding:11px 26px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s;
  font-family:'Montserrat',sans-serif}
#cc-accept-btn:hover{background:#005a91}
@media screen and (max-width:600px){
  #cookie-consent-bar{padding:14px 16px;gap:12px}
  #cc-accept-btn{width:100%}
}

/* ── Site-wide footer (edited in admin: ⚙ Футер) ── */
#site-footer{background:#0a1e33;color:#aec2d6;margin-top:40px}
#site-footer a{color:#aec2d6;text-decoration:none;transition:color .2s}
#site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px;padding:46px 20px 36px;box-sizing:border-box}
.footer-logo{height:64px;width:auto;display:block;margin-bottom:16px;filter:brightness(0) invert(1)}
.footer-desc{font-size:13.5px;line-height:1.6;margin:0 0 18px}
.footer-copyright{font-size:12.5px;color:#6f88a1;margin:0}
.footer-attribution{font-size:11px;color:#8a9bb0;line-height:1.5;margin:8px 0 0}
.footer-attribution a{color:#8a9bb0;text-decoration:underline}
.footer-attribution a:hover{color:#0071B6}
.footer-title{color:#fff;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 16px;font-weight:600}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col ul li{margin-bottom:10px;font-size:13.5px;line-height:1.4}
.footer-contacts p{font-size:13.5px;margin:0 0 10px;line-height:1.5}
.footer-bottom{background:#071628;border-top:1px solid rgba(255,255,255,.08)}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  gap:8px 24px;padding:16px 20px;font-size:12.5px;color:#7488a0;box-sizing:border-box}
.footer-legal-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-disclaimer{margin:0}
@media screen and (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;padding:36px 20px 28px}
  .footer-about{grid-column:1/-1}
}
@media screen and (max-width:560px){
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .footer-bottom-inner{flex-direction:column;align-items:flex-start;text-align:left}
}

/* ── FAQ page (voprosy-i-otvety.html) ── */
.faq-wrap{max-width:900px;margin:0 auto 20px}
.faq-intro{color:#4a5560;line-height:1.6;margin:0 0 28px;font-size:15px}
.faq-category{margin-bottom:30px}
.faq-category h2{font-size:21px;color:#0071B6;border-bottom:2px solid #daeeff;padding-bottom:9px;margin:0 0 14px}
.faq-item{border:1px solid #e2e8ec;border-radius:10px;margin-bottom:10px;overflow:hidden;background:#fff}
.faq-question{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 20px;
  cursor:pointer;font-weight:600;font-size:15.5px;color:#222;line-height:1.4}
.faq-question:hover{background:#f7fbff}
.faq-question .faq-plus{flex-shrink:0;width:22px;height:22px;position:relative;transition:transform .25s}
.faq-question .faq-plus::before,.faq-question .faq-plus::after{content:'';position:absolute;background:#0071B6;
  border-radius:2px}
.faq-question .faq-plus::before{left:0;top:9px;width:22px;height:3px}
.faq-question .faq-plus::after{left:9px;top:0;width:3px;height:22px;transition:opacity .2s}
.faq-item.open .faq-question .faq-plus{transform:rotate(180deg)}
.faq-item.open .faq-question .faq-plus::after{opacity:0}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-answer-inner{padding:0 20px 18px;color:#444;line-height:1.65;font-size:14.5px}
.faq-answer-inner p{margin:0 0 10px}
.faq-answer-inner p:last-child{margin-bottom:0}
.faq-item.open .faq-answer{max-height:600px}
@media screen and (max-width:600px){
  .faq-question{padding:13px 16px;font-size:14.5px}
  .faq-answer-inner{padding:0 16px 16px;font-size:14px}
}

/* ── Reusable page hero (Товары, Установка, …) — background set inline
   per page via style="background-image:url(...)". Same look as instr-hero. */
.page-hero{position:relative;min-height:300px;display:flex;align-items:flex-end;
  background-color:#0a1e33;background-position:center;background-size:cover;background-repeat:no-repeat;
  border-radius:16px;overflow:hidden;margin:0 0 30px;color:#fff}
.page-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,20,36,.25) 0%,rgba(6,20,36,.72) 100%)}
.page-hero-inner{position:relative;padding:44px 40px;max-width:720px}
.page-hero h1{color:#fff;font-size:32px;line-height:1.25;margin:0 0 12px;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.page-hero-desc{color:#e4edf6;font-size:15.5px;line-height:1.6;margin:0;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.page-intro{margin:0 0 26px;line-height:1.65;color:#4a4a4a;font-size:15px}
.page-intro p{margin:0 0 10px}
.page-intro p:last-child{margin-bottom:0}
/* ── Info cards (описательные блоки внизу разделов) ── */
.info-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:42px 0}
.info-cards-single{grid-template-columns:1fr}
.info-cards-single+.info-cards{margin-top:22px}
.info-card{background:#fff;border:1px solid #e8edf1;border-radius:16px;padding:30px 32px;
  box-shadow:0 4px 20px rgba(20,40,60,.06)}
.info-card-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.info-card-ic{flex-shrink:0;width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg,#0071B6,#0a8ed6);display:flex;align-items:center;justify-content:center}
.info-card-ic svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2}
.info-card-head h2{font-size:19px;margin:0;color:#1a2733;line-height:1.25}
.info-card p{margin:0 0 12px;line-height:1.7;color:#4a5560;font-size:15px}
.info-card p:last-child{margin-bottom:0}
.info-card-note{margin:-8px 0 16px;font-size:13px;color:#8a94a0}
.info-card-list{list-style:none;margin:0;padding:0}
/* «#content ul li{list-style:inside}» targets the li directly and out-specifies a bare
   «.info-card-list li», so the marker has to be killed with an #content-scoped rule */
#content .info-card-list li,.info-card-list li{list-style:none}
.info-card-list li{position:relative;padding:7px 0 7px 30px;line-height:1.5;color:#4a5560;font-size:15px;border-bottom:1px solid #f0f3f6}
.info-card-list li:last-child{border-bottom:none}
.info-card-list li::before{content:"";position:absolute;left:0;top:11px;width:18px;height:18px;border-radius:50%;
  background:#eaf4fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071B6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat}
.install-steps{background:#fff;border:1px solid #e8edf1;border-radius:16px;padding:32px 34px;margin:42px 0;
  box-shadow:0 4px 20px rgba(20,40,60,.06)}
.install-steps-head{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.install-steps-head .info-card-ic{flex-shrink:0}
.install-steps-head h2{font-size:21px;margin:0;color:#1a2733;line-height:1.25}
.install-step{position:relative;display:flex;gap:18px;padding-bottom:26px}
.install-step:last-child{padding-bottom:0}
.install-step::before{content:"";position:absolute;left:16px;top:36px;bottom:0;width:2px;background:#e3ebf1}
.install-step:last-child::before{display:none}
.install-step-num{flex-shrink:0;position:relative;z-index:1;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#0071B6,#0a8ed6);color:#fff;font-size:15px;font-weight:600;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,113,182,.28)}
.install-step-txt{padding-top:6px;line-height:1.6;color:#4a5560;font-size:15px}
@media screen and (max-width:820px){.install-steps{padding:24px 22px;margin:32px 0}
  .install-step{gap:14px}}

/* ── Обслуживание: карточки услуг ── */
.usl-heading{text-align:center;font-size:24px;color:#1a2733;margin:38px 0 6px}
.usl-subheading{text-align:center;color:#8a94a0;font-size:14px;margin:0 0 26px}
.usl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:8px}
.usl-card{min-width:0;background:#fff;border:1px solid #e8edf1;border-radius:16px;overflow:hidden;text-align:center;
  display:flex;flex-direction:column;cursor:pointer;
  box-shadow:0 4px 16px rgba(20,40,60,.07);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.usl-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(20,40,60,.15);border-color:#d7e3ee}
/* hero-баннер вверху карточки (вместо иконки) */
.usl-card-img{width:100%;aspect-ratio:3/2;overflow:hidden;background:#eaf1f7}
.usl-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.usl-card:hover .usl-card-img img{transform:scale(1.05)}
.usl-card-img-empty{background:linear-gradient(135deg,#eef4fa,#dde8f2)}
.usl-card-body{padding:18px 18px 20px;display:flex;flex-direction:column;align-items:center;flex:1}
.usl-title{font-size:15px;font-weight:600;color:#1a2733;line-height:1.4;margin:0 0 10px}
.usl-price{font-size:15px;font-weight:700;color:#ff4f3d;margin-bottom:16px}
/* width:auto обязателен: глобальное «button{width:300px}» (строка ~422) задавало
   кнопке 300px, из-за чего min-content карточки становился 342px, 1fr не мог
   сжаться и сетка распирала страницу горизонтально */
.usl-more{margin-top:auto;width:auto;background:none;border:1px solid #cfe0ee;color:#0071B6;border-radius:9px;
  padding:8px 18px;font-size:13.5px;font-weight:600;font-family:'Montserrat',sans-serif;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.usl-card:hover .usl-more{background:#0071B6;border-color:#0071B6;color:#fff}
@media screen and (max-width:900px){.usl-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media screen and (max-width:520px){.usl-grid{grid-template-columns:1fr}}

/* Блок «Обслуживание» на главной — витрина из карточек услуг (карточка = ссылка).
   Отступы под стать блоку «Наши основные товары» (#tovar). Низ 10px, чтобы под
   кнопкой «Все услуги» был такой же отступ (30px), как над ней — кнопка по центру. */
#home-uslugi{padding:20px 20px 10px}
/* убираем верхний отступ ряда новостей/акций — он подтягивается прямо к кнопке.
   #akcia-main — т.к. на мобиле «Акции» идут первыми и имеют margin:25px auto */
.home-news-promo-row{margin-top:0}
.home-news-promo-row #news-main,
.home-news-promo-row .main-news-right-block,
.home-news-promo-row #akcia-main{margin-top:0}
#home-uslugi h2{font-size:30px;text-align:center;text-transform:uppercase;padding:20px;line-height:1.2}
@media screen and (max-width:600px){#home-uslugi h2{font-size:24px;padding:14px 10px}}
/* margin:10px как у карточек #tovar (.833%≈10px) — heading↔карточки и карточки↔кнопка одинаковые */
.home-usl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:10px 0}
.home-usl-card{text-decoration:none;cursor:pointer}
.home-usl-card .usl-more{pointer-events:none}
@media screen and (max-width:900px){.home-usl-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media screen and (max-width:520px){.home-usl-grid{grid-template-columns:1fr}}

/* ── Обслуживание: модальное окно ── */
.usl-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px}
.usl-modal[hidden]{display:none}
.usl-modal-back{position:absolute;inset:0;background:rgba(10,25,48,.62);backdrop-filter:blur(2px)}
.usl-modal-box{position:relative;background:#fff;border-radius:18px;width:100%;max-width:560px;
  max-height:88vh;overflow-y:auto;padding:34px;box-shadow:0 24px 60px rgba(10,25,48,.35);
  animation:uslIn .22s ease}
@keyframes uslIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
/* width:auto — иначе глобальное «button{width:300px}» растянет крестик на пол-модалки */
.usl-modal-x{position:absolute;top:14px;right:14px;z-index:3;width:32px;height:32px;padding:0;
  background:rgba(255,255,255,.9);border:none;border-radius:50%;font-size:17px;line-height:32px;
  color:#5a6672;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.25);transition:background .2s,color .2s}
.usl-modal-x:hover{background:#e63c2f;color:#fff}
/* Hero-баннер модалки: фото услуги во всю ширину (bleed за padding бокса через
   отрицательные margin), заголовок+цена поверх, снизу белый градиент «наступает»
   на фото и бесшовно сливается с белым телом модалки. Фон задаёт JS (open()). */
/* position 50% 22% (а не center): кроп смещён к верху кадра — не срезает головы
   людей на портретных фото услуг */
.usl-hero{margin:-34px -34px 0;min-height:280px;background:#dfe8f0 50% 22%/cover no-repeat;
  position:relative;display:flex;flex-direction:column;justify-content:center}
.usl-hero-noimg{background:linear-gradient(135deg,#0071B6,#3a95d4)}
/* Равномерное затемнение с самого верха (без прозрачного участка — иначе на
   светлых фото верх выцветал), лёгкий пик по центру под текст, и только у самого
   низа мягкий уход в белый — границы градиента не видно. */
.usl-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(8,18,36,.34) 0%, rgba(8,18,36,.50) 50%,
    rgba(8,18,36,.30) 82%, #fff 100%)}
.usl-hero-inner{position:relative;z-index:1;padding:0 34px}
/* id-селектор — иначе позднее правило .usl-modal-box h2 перебивало цвет заголовка */
#usl-m-hero h2{color:#fff;font-size:24px;line-height:1.22;margin:0 0 10px;
  text-shadow:0 2px 16px rgba(0,0,0,.75)}
#usl-m-hero .usl-modal-price{font-size:21px;font-weight:700;color:#ff6a4d;
  text-shadow:0 2px 14px rgba(0,0,0,.7)}
.usl-info-body{padding-top:22px}
.usl-modal-box h2{font-size:21px;color:#1a2733;margin:0 0 4px;line-height:1.3}
.usl-modal-price{font-size:16px;font-weight:700;color:#ff4f3d}
.usl-modal-desc{color:#4a5560;font-size:15px;line-height:1.7;margin-bottom:24px}
.usl-modal-desc p{margin:0 0 10px}
.usl-modal-desc ul{margin:8px 0;padding-left:20px}
.usl-modal-desc li{margin:5px 0}
.usl-order-btn{display:block;width:100%;box-sizing:border-box;background:#ff4f3d;color:#fff;border:none;border-radius:11px;
  padding:15px;font-size:16px;font-weight:600;font-family:'Montserrat',sans-serif;cursor:pointer;
  box-shadow:0 6px 18px rgba(255,79,61,.3);transition:background .25s,transform .15s ease}
.usl-order-btn:hover{background:#e13d2c;transform:translateY(-2px)}
.usl-order-btn:disabled{opacity:.6;cursor:default;transform:none}
.usl-form-svc{background:#f2f8fd;border:1px solid #dbeaf7;border-radius:10px;padding:12px 14px;
  font-size:14px;font-weight:600;color:#0071B6;margin-bottom:18px}
.usl-field{margin-bottom:14px}
.usl-field label{display:block;width:auto;float:none;font-size:13px;color:#5a6672;font-weight:600;margin-bottom:6px}
.usl-field input,.usl-field textarea{width:100%;box-sizing:border-box;float:none;padding:12px 14px;
  border:1px solid #e3ebf1;border-radius:10px;font-size:15px;font-family:'Montserrat',sans-serif;
  color:#1a2733;background:#fff;transition:border-color .2s,box-shadow .2s}
.usl-field textarea{height:80px;resize:vertical}
.usl-field input:focus,.usl-field textarea:focus{outline:none;border-color:#47a3da;box-shadow:0 0 0 3px rgba(71,163,218,.16)}
.usl-req{color:#e63c2f}
.usl-err{background:#fdecea;border:1px solid #f5c6c2;color:#c0392b;border-radius:9px;padding:10px 12px;
  font-size:13.5px;margin-bottom:12px}
/* width:auto/float:none обязательны: легаси «label{width:155px;float:left}» (строка ~126)
   зажимало текст согласия в колонку 155px. В корзине .zf-checkbox лечится так же. */
.usl-check{display:flex;align-items:flex-start;gap:10px;margin:4px 0 16px;cursor:pointer;
  width:auto;float:none;box-sizing:border-box;
  background:#f6faff;border:1px solid #dcecf9;border-radius:10px;padding:13px 15px}
.usl-check input{width:auto;flex-shrink:0;margin:2px 0 0;padding:0;float:none;
  width:17px;height:17px;accent-color:#0071B6;cursor:pointer}
.usl-check span{font-size:12.5px;color:#8a94a0;line-height:1.5}
.usl-check a{color:#0071B6}
.usl-pane-ok{text-align:center;padding:14px 0}
.usl-ok-ic{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:#e8f7ee;color:#28a765;
  font-size:32px;display:flex;align-items:center;justify-content:center}
.usl-ok-sub{color:#8a94a0;font-size:14px;margin:6px 0 22px}
#usl-ok-num{font-size:15px;font-weight:600;color:#1a2733;margin:0}
@media screen and (max-width:520px){.usl-modal{padding:12px}.usl-modal-box{padding:24px 20px}
  .usl-hero{margin:-24px -20px 0;min-height:190px}
  .usl-hero-inner{padding:0 20px 34px}
  .usl-hero-inner h2,.usl-hero h2{font-size:20px}}

/* ── Похожие товары (страница товара) ── */
.similar-products{margin:44px 0 10px;clear:both}
.similar-products h2{font-size:22px;color:#1a2733;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid #e8edf1}
.similar-products .products-grid{margin:0}
@media screen and (max-width:640px){.similar-products{margin:32px 0 6px}
  .similar-products h2{font-size:19px}}
/* Карусель похожих товаров: горизонтальный скролл + стрелки (появляются, только
   если товаров больше, чем влезает). Порядок карточек перемешивает cart.js. */
.similar-carousel{position:relative}
.similar-track{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  overflow-anchor:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:8px 16px 22px;gap:18px}
.similar-track::-webkit-scrollbar{display:none}
/* ровно 3 карточки заполняют ряд впритык (2 зазора по 18px), 4-я — за краем;
   боковые отступы 16px симметричны — блок по центру, тени не режутся */
.similar-track .card{flex:0 0 calc((100% - 36px) / 3);margin:0 0 4px;scroll-snap-align:start}
.article-offers .article-offers-static{justify-content:center}
.article-offers .article-offers-static .card{margin:8px}
.article-offers-carousel{position:relative}
.article-offers .article-offers-track{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
  scroll-behavior:smooth;overflow-anchor:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:8px 16px 22px;gap:18px;margin:0}
.article-offers-track::-webkit-scrollbar{display:none}
.article-offers .article-offers-track .card{flex:0 0 calc((100% - 36px) / 3);width:auto;margin:0 0 4px;
  scroll-snap-align:start}
.sim-arrow{position:absolute;top:45%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:none;background:#fff;color:#0071B6;
  box-shadow:0 4px 16px rgba(20,40,60,.22);cursor:pointer;font-size:24px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,opacity .2s}
.sim-arrow:hover{background:#0071B6;color:#fff}
.sim-prev{left:6px}
.sim-next{right:6px}
.sim-arrow[hidden]{display:none}
.sim-arrow.disabled{opacity:.3;pointer-events:none}
@media screen and (max-width:750px){.similar-track .card,.article-offers .article-offers-track .card{flex-basis:60%}}
@media screen and (max-width:480px){.similar-track .card,.article-offers .article-offers-track .card{flex-basis:84%}
  .sim-arrow{width:38px;height:38px;font-size:20px}}

/* ── Обмен: каталог карточек (буллиты вместо картинки, как в референсе) ── */
.card-detail-btn{display:block;width:100%;box-sizing:border-box;background:#47a3da;color:#fff;text-align:center;
  height:44px;line-height:44px;font-size:15px;font-family:'Montserrat',sans-serif;letter-spacing:.3px;
  text-decoration:none;transition:background .3s ease}
.card-detail-btn:hover{background:#ff4f3d;color:#fff}
/* the tile is a column so the price+button stay pinned to the bottom on uneven bullet counts */
.obmen-card{display:flex;flex-direction:column;background:#fff}
.obmen-card .card-title{flex-shrink:0}
/* per-offer gradient header: the background comes from an inline style set by the
   admin; here we only flip the text to white so it stays readable on dark colours */
.obmen-card-grad .card-title a.title-card,.obmen-card-grad .card-title h2,.obmen-card-grad .card-title h3{color:#fff}
.obmen-card-list{list-style:none;margin:0;padding:16px 18px;flex:1}
/* list-style must sit on the li — «#content ul li{list-style:inside}» beats inheritance */
#content .obmen-card-list li,.obmen-card-list li{list-style:none}
.obmen-card-list li{position:relative;margin:0;padding:7px 0 7px 22px;font-size:13.5px;line-height:1.45;color:#4a5560}
.obmen-card-list li::before{content:"";position:absolute;left:2px;top:14px;width:6px;height:6px;border-radius:50%;background:#0071B6}
.obmen-card-l{font-weight:600;color:#1a2733}
.obmen-card-l+.obmen-card-v::before{content:" — "}
.obmen-card .card-price{flex-shrink:0}

/* ── Обмен: сноски в блоке «Причины обмена» (внутри .info-card) ── */
.obmen-reasons-notes{margin-top:20px;padding-top:16px;border-top:1px solid #f0f3f6}
/* out-specify «.info-card p» (0,1,1), which would otherwise force 15px/#4a5560 */
.info-card p.obmen-reasons-note{font-size:12.5px;line-height:1.55;color:#9aa4b0;margin:0 0 8px}
.info-card p.obmen-reasons-note:last-child{margin-bottom:0}

/* ── Обмен: hero детальной страницы (баннер + оверлей) ── */
.obmen-hero{position:relative;border-radius:18px;overflow:hidden;margin:8px 0 34px;
  background-size:cover;background-position:center;min-height:340px;background-color:#0a1930}
.obmen-hero-overlay{background:linear-gradient(90deg,rgba(6,16,32,.92) 0%,rgba(6,16,32,.75) 42%,rgba(6,16,32,.15) 70%,rgba(6,16,32,0) 100%);
  min-height:340px;display:flex;align-items:center;padding:36px 40px}
.obmen-hero-inner{max-width:560px;color:#fff}
.obmen-hero-inner h1{color:#fff;font-size:30px;line-height:1.2;margin:0 0 12px}
.obmen-hero-desc{font-size:16px;line-height:1.6;color:#d5e3f2;margin-bottom:20px}
.obmen-hero-fields{display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.obmen-chip{display:flex;align-items:baseline;gap:8px;font-size:14.5px;line-height:1.4}
.obmen-chip-l{font-weight:600;color:#fff}
.obmen-chip-l::before{content:"✓";color:#4fc3f7;font-weight:700;margin-right:6px}
.obmen-chip-v{color:#c3d4e6}
.obmen-hero-buy{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.obmen-hero-price{color:#fff;font-weight:700;white-space:nowrap}
.obmen-price-digit{font-size:34px}
.obmen-price-cur{font-size:16px;margin-left:6px;font-weight:500;color:#c3d4e6}
/* cart.js re-renders the inside of .pdp-cart-slot (dropping any class we put on the
   button), so the hero styling has to target what cart.js emits: .btn-add-cart, and
   the .in-cart-wrap stepper once the offer is in the cart. */
.obmen-hero-cart{width:auto;margin-top:0;clear:none}
.obmen-hero-cart .btn-add-cart{display:inline-block;width:auto;background:#ff4f3d;color:#fff;border:none;border-radius:10px;
  padding:0 30px;height:52px;line-height:52px;font-size:16px;font-weight:600;font-family:'Montserrat',sans-serif;
  cursor:pointer;transition:transform .15s ease,background .25s ease}
.obmen-hero-cart .btn-add-cart:hover{background:#e13d2c;transform:translateY(-2px)}
.obmen-hero-cart .in-cart-wrap{height:52px;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.25)}
/* out-specify the global «.in-cart-wrap button{…!important}» that pins 40×44 */
.obmen-hero-cart .in-cart-wrap button{width:48px!important;height:52px!important}
.obmen-hero-cart .btn-qty-dec,.obmen-hero-cart .btn-qty-inc{background:#ff4f3d;font-size:22px}
.obmen-hero-cart .btn-qty-dec:hover,.obmen-hero-cart .btn-qty-inc:hover{background:#e13d2c}
.obmen-hero-cart .in-cart-mid{background:#fff;padding:0 24px}
.obmen-hero-cart .in-cart-label{font-size:11px;color:#0071B6;font-weight:600}
.obmen-hero-cart .in-cart-qty{font-size:14px;color:#1a2733;font-weight:600}
@media screen and (max-width:720px){
  .obmen-hero,.obmen-hero-overlay{min-height:0}
  .obmen-hero-overlay{background:linear-gradient(0deg,rgba(6,16,32,.94) 0%,rgba(6,16,32,.7) 100%);padding:26px 22px}
  .obmen-hero-inner{max-width:100%}
  .obmen-hero-inner h1{font-size:23px}
}

/* ── Обмен: спойлеры ── */
.obmen-spoilers{margin:30px 0;display:flex;flex-direction:column;gap:12px}
.obmen-spoiler{border:1px solid #e3ebf1;border-radius:12px;background:#fff;overflow:hidden}
.obmen-spoiler summary{list-style:none;cursor:pointer;padding:18px 22px;font-size:16px;font-weight:600;color:#1a2733;
  display:flex;align-items:center;justify-content:space-between;transition:background .2s ease}
.obmen-spoiler summary::-webkit-details-marker{display:none}
.obmen-spoiler summary:hover{background:#f6f9fc}
.obmen-spoiler-ic{width:20px;height:20px;flex-shrink:0;position:relative}
.obmen-spoiler-ic::before,.obmen-spoiler-ic::after{content:"";position:absolute;background:#0071B6;transition:transform .25s ease;border-radius:2px}
.obmen-spoiler-ic::before{top:9px;left:2px;width:16px;height:2px}
.obmen-spoiler-ic::after{top:2px;left:9px;width:2px;height:16px}
.obmen-spoiler[open] .obmen-spoiler-ic::after{transform:rotate(90deg);opacity:0}
.obmen-spoiler-body{padding:2px 22px 20px;color:#4a5560;line-height:1.7;font-size:15px}
.obmen-spoiler-body ul{margin:8px 0;padding-left:20px}
.obmen-spoiler-body li{margin:5px 0}
.obmen-spoiler-body p{margin:0 0 10px}
.obmen-spoiler-body p:last-child{margin-bottom:0}
@media screen and (max-width:820px){.info-cards{grid-template-columns:1fr;gap:18px;margin:32px 0}
  .info-card{padding:24px 22px}}
@media screen and (max-width:640px){
  .page-hero{min-height:220px;border-radius:12px}
  .page-hero-inner{padding:28px 22px}
  .page-hero h1{font-size:24px}
  .page-hero-desc{font-size:14px}
}

/* ── Instructions page (instrukcii.php) ── */
.instr-hero{position:relative;min-height:320px;display:flex;align-items:flex-end;
  background:linear-gradient(180deg,rgba(6,20,36,.25) 0%,rgba(6,20,36,.72) 100%),
  url(../images/instrukcii/instr-background.webp) center/cover no-repeat;background-color:#0a1e33;
  border-radius:16px;overflow:hidden;margin:0 0 34px;color:#fff}
.instr-hero-inner{padding:44px 40px;max-width:720px}
.instr-hero h1{color:#fff;font-size:32px;line-height:1.25;margin:0 0 12px;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.instr-hero-desc{color:#e4edf6;font-size:15.5px;line-height:1.6;margin:0;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.instr-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 8px}
.instr-card{background:#fff;border-radius:8px;padding:26px 26px 22px;cursor:pointer;
  transition:transform .2s,box-shadow .2s;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.instr-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.instr-card .instr-num{margin-bottom:14px}
.instr-card h2{font-size:18.5px;margin:0 0 8px;color:#1a2733}
.instr-card p{margin:0 0 16px;color:#5c6b78;font-size:14px;line-height:1.55}
.instr-card-open{display:inline-flex;align-items:center;gap:7px;color:#0071B6;font-weight:600;font-size:14px}
.instr-card-open .instr-chevron-r{width:7px;height:7px;border-right:2px solid #0071B6;border-bottom:2px solid #0071B6;
  transform:rotate(-45deg);transition:transform .2s}
.instr-card:hover .instr-card-open .instr-chevron-r{transform:rotate(-45deg) translate(2px,2px)}
.instr-num{width:36px;height:36px;border-radius:50%;background:#0071B6;color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0}
.instr-detail{display:none;border-radius:8px;margin:26px 0;background:#fff;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.instr-detail.open{display:block}
.instr-detail-inner{padding:28px}
.instr-detail-back{display:inline-flex;align-items:center;gap:6px;color:#556575;font-size:14px;font-weight:600;
  cursor:pointer;flex-shrink:0;padding:8px 14px;margin-bottom:22px;border-radius:20px;background:#fff;
  border:1px solid #dde5ea;transition:background .2s}
.instr-detail-back:hover{background:#eef3f7}
.instr-detail-title-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:30px}
.instr-detail-icon{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:#0071B6;color:#fff;
  display:flex;align-items:center;justify-content:center}
.instr-detail-title-row h2{font-size:22px;margin:0 0 5px;color:#1a2733}
.instr-detail-subtitle{margin:0;color:#8494a2;font-size:14px}
.instr-tabs-buttons{display:flex;gap:8px;margin:0 0 22px;padding:0;flex-wrap:wrap}
.instr-tabs-buttons li{list-style:none;padding:10px 20px;border-radius:22px;background:#eef3f7;cursor:pointer;
  font-size:14px;font-weight:600;color:#556575;transition:background .2s,color .2s}
.instr-tabs-buttons li:hover{background:#dcebf7}
.instr-tabs-buttons li.active{background:#0071B6;color:#fff}
.instr-device-select{margin:0 0 22px;max-width:420px}
.instr-device-row{display:flex;gap:8px;margin-bottom:8px}
.instr-device-row:last-child{margin-bottom:0}
.instr-device-btn{width:auto!important;flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 14px;border-radius:10px;background:#eef3f7;border:none;cursor:pointer;font-size:13.5px;
  font-weight:600;line-height:1.3;text-align:center;color:#556575;transition:background .2s,color .2s;
  font-family:inherit}
.instr-device-btn svg{flex-shrink:0}
.instr-device-btn:hover:not(:disabled){background:#dcebf7}
.instr-device-btn.active{background:#0071B6;color:#fff}
.instr-device-btn:disabled,.instr-device-btn.hidden{display:none}
.instr-tab-content{display:none}
.instr-tab-content.active{display:block}
.instr-steps{list-style:none;margin:0;padding:0}
.instr-step{margin-bottom:36px;padding-bottom:36px;border-bottom:1px solid #f0f2f4}
.instr-step:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.instr-step-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.instr-step-num{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:#daeeff;color:#0071B6;
  font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
.instr-step-head h3{margin:0;font-size:16.5px;color:#1a2733}
.instr-step-text{line-height:1.65;color:#4a5560;font-size:15px;margin:0 0 14px}
.instr-step-text strong{color:#0071B6}
.instr-callout{display:flex;align-items:flex-start;gap:10px;background:#eef6ff;border-radius:10px;
  padding:14px 16px;margin:0 0 16px;color:#2e4256;font-size:14px;line-height:1.55}
.instr-callout-icon{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:#0071B6;color:#fff;
  font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.instr-callout.warning{background:#fff6e0;color:#6b5219}
.instr-callout.warning .instr-callout-icon{background:#f2a900}
.instr-callout.danger{background:#fdecec;color:#7a2020}
.instr-callout.danger .instr-callout-icon{background:#e0413f}
.instr-callout ul{margin:8px 0 0;padding:0 0 0 18px}
.instr-callout ul li{margin-bottom:4px}
.instr-callout ul li:last-child{margin-bottom:0}
.instr-step-list{margin:0 0 14px;padding:0 0 0 18px;color:#4a5560;font-size:15px;line-height:1.6}
.instr-step-list li{margin-bottom:6px}
.instr-step-list li:last-child{margin-bottom:0}
.instr-step-list li strong{color:#1a2733}
.instr-car-single{max-width:750px;margin:0 auto}
.instr-car-single + .instr-car-single{margin-top:18px}
.instr-car-single.portrait{max-width:300px}
.instr-car-single a,.instr-carousel .swiper-slide a{display:block;border-radius:10px;overflow:hidden}
.instr-car-single img,.instr-carousel .swiper-slide img{width:100%;display:block;cursor:pointer;-webkit-user-select:none;user-select:none}
.instr-car-caption{margin:10px 0 0;font-size:13px;color:#8494a2;text-align:center}
.instr-image-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.instr-image-row a{flex:1 1 0;min-width:0;display:block;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.instr-image-row img{width:100%;display:block;cursor:pointer;-webkit-user-select:none;user-select:none}
@media screen and (max-width:560px){
  .instr-image-row{flex-direction:column;align-items:center}
  .instr-image-row a{width:100%;max-width:320px;flex:none}
}
.instr-carousel.swiper{position:relative;max-width:750px;margin:0 auto;padding-bottom:30px}
.instr-carousel .swiper-slide.portrait{max-width:300px;margin:0 auto}
.instr-carousel .swiper-pagination-bullet{background:#dde5ea;opacity:1}
.instr-carousel .swiper-pagination-bullet-active{background:#0071B6}
.instr-carousel .swiper-button-prev,.instr-carousel .swiper-button-next{color:#0071B6}
.instr-carousel .swiper-button-prev:after,.instr-carousel .swiper-button-next:after{font-size:20px}
.instr-carousel .swiper-button-disabled{opacity:.35}
.instr-toggle{margin-top:24px;border-top:1px solid #eef1f3;padding-top:20px}
.instr-toggle-link{display:inline-flex;align-items:center;gap:9px;color:#0071B6;font-weight:600;font-size:14.5px;cursor:pointer}
.instr-toggle-link .instr-chevron{border-color:#0071B6;margin-right:0;transition:transform .25s}
.instr-toggle.open .instr-toggle-link .instr-chevron{transform:rotate(-135deg)}
.instr-toggle-body{max-height:0;overflow:hidden;opacity:0;padding:0 22px;background:#f7fbff;border-radius:12px;
  transition:max-height .35s ease,opacity .25s ease,padding .35s ease,margin .35s ease}
.instr-toggle.open .instr-toggle-body{max-height:4000px;opacity:1;margin-top:18px;padding:22px}
.instr-toggle.featured{margin:0 0 28px;border:1px solid #d8e8f7;border-radius:14px;overflow:hidden;padding-top:0;background:#f7fbff}
.instr-toggle.featured .instr-toggle-link{display:flex;align-items:center;gap:14px;padding:18px 20px;font-size:15.5px;
  color:#1a2733;transition:background .2s}
.instr-toggle.featured .instr-toggle-link:hover{background:#eef6ff}
.instr-toggle.featured .instr-toggle-icon{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:#0071B6;
  display:flex;align-items:center;justify-content:center}
.instr-toggle.featured .instr-toggle-link span:not(.instr-toggle-icon):not(.instr-chevron){flex:1}
.instr-toggle.featured .instr-toggle-link .instr-chevron{border-color:#8494a2}
.instr-toggle.featured .instr-toggle-body{margin-top:0!important;padding:0 22px;border-radius:0;background:#fff;border-top:0 solid #d8e8f7}
.instr-toggle.featured.open .instr-toggle-body{padding:22px;border-top-width:1px}
.instr-toggle.featured.open .instr-toggle-link .instr-chevron{border-color:#0071B6}
.instr-spoiler-tabs{display:flex;gap:6px;margin:0 0 18px;padding:0;flex-wrap:wrap}
.instr-spoiler-tabs li{list-style:none;padding:8px 16px;border-radius:18px;background:#fff;cursor:pointer;
  font-size:13px;font-weight:600;color:#556575;border:1px solid #dde5ea}
.instr-spoiler-tabs li.active{background:#0071B6;color:#fff;border-color:#0071B6}
@media screen and (max-width:640px){
  .instr-hero{min-height:260px;border-radius:12px}
  .instr-hero-inner{padding:28px 22px}
  .instr-hero h1{font-size:24px}
  .instr-hero-desc{font-size:14px}
  .instr-cards-grid{grid-template-columns:1fr}
  .instr-detail-inner{padding:20px 18px}
  .instr-num{width:30px;height:30px;font-size:14px}
  .instr-detail-title-row h2{font-size:18px}
  .instr-detail-icon{width:40px;height:40px}
  .instr-car-single.portrait,.instr-carousel .swiper-slide.portrait{max-width:100%}
  .instr-tabs-buttons li{padding:8px 14px;font-size:13px}
}
/* ── Блок «почему мы» на главной: иконка и текст в одну строку ──────────
   Кружок и текст стоят на float:left, а float прижимает элемент к верхнему
   краю — у пунктов в две-три строки текст оказывался выше кружка. Вдобавок
   <p> внутри .why-we-text тоже floated, из-за чего у контейнера схлопывалась
   высота и центрировать было нечего.
   Правим только десктопную раскладку: с 1024px и ниже блок перестраивается
   в столбик (см. медиазапросы выше), там выравнивать по вертикали нечего. */
@media screen and (min-width:1025px){
  .why-we-block{display:flex;align-items:center}
  .why-we-block-image{flex:0 0 60px}
  .why-we-text{width:auto;flex:1;min-width:0}
  .why-we-block p{float:none;margin-left:22px!important}
}