/* vipstudio.kz — shared site styles.
   Section 1 is the <style> block moved verbatim from edits/public/index.html
   (@import rules lifted to the top: inside the block they came after other rules and were ignored).
   Section 2 adapts the same look to inner pages (products, groups, info pages). */

@import url(https://fonts.googleapis.com/icon?family=Material+Icons&display=swap);
@import url('https://fonts.googleapis.com/css2?family=Gabriela&family=Noto+Sans&display=swap');

/* ==================== 1. Styles from edits/public/index.html ==================== */

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; font-size: 14px; color: #333; background: #fff; line-height: 1.5; }
a { color: #1c7cd0; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
address { font-style: normal; }

/* === LAYOUT === */
.b-layout { min-height: 100vh; }
.b-page { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.b-page__wrapper { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.b-page__main-content { display: flex; gap: 24px; margin-top: 16px; }
.b-page__content { flex: 1; min-width: 0; }
.b-page__content-wrap { padding: 0; }
.b-page__row { margin-bottom: 24px; }
.h-layout-clear { clear: both; }

/* === TOP CONTROL PANEL (Satu.kz bar) === */
.b-head-control-panel { background: #1c7cd0; color: #fff; padding: 6px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.b-head-control-panel__container { max-width: 1200px; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.b-head-control-panel__logo-img { height: 28px; width: auto; }
.b-head-control-panel__link { color: #fff; font-size: 12px; white-space: nowrap; }
.b-head-control-panel__link:hover { text-decoration: underline; color: #fff; }
.b-head-control-panel__opinions-bar { color: #fff; font-size: 12px; margin-left: auto; }
.b-review-info__link { color: #fff; }
.b-head-control-panel__cart { margin-left: 8px; }
.b-shopping-button__wrapper { display: flex; align-items: center; gap: 4px; color: #fff; font-size: 12px; cursor: pointer; }

/* === PROMO BANNER === */
.b-promo-banner { padding: 10px 16px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.b-promo-banner__text { font-size: 14px; }
.b-promo-banner__button { border: 1px solid currentColor; padding: 6px 14px; border-radius: 3px; font-size: 13px; white-space: nowrap; }
.b-promo-banner__button:hover { text-decoration: none; opacity: .85; }

/* === HEADER === */
.b-header { padding: 12px 0; border-bottom: 1px solid #e0e0e0; }
.b-header__table { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.b-header__cell { flex: 1; }
.b-header__cell_side_right { flex: 0; white-space: nowrap; }
.b-header__cell_type_cart { flex: 0; }
.b-header-address { font-size: 13px; color: #666; }
.b-header-phones { font-size: 14px; }
.b-header-company-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.b-header-company-name__logo img { max-height: 60px; width: auto; }
.b-header-company-name__title { font-size: 15px; font-weight: bold; color: #333; }
.b-header__popup-item { margin-bottom: 4px; }

/* === SEARCH === */
.b-search { max-width: 360px; }
.b-search__wrap { display: flex; border: 1px solid #ccc; border-radius: 3px; overflow: hidden; }
.b-search__field { flex: 1; padding: 8px 10px; border: none; outline: none; font-size: 14px; }
.b-search__button { width: 38px; background: #1c7cd0; border: none; cursor: pointer; color: #fff; font-size: 16px; }
.b-search__button::after { content: '🔍'; }

/* === CART BUTTON === */
.b-cart-button__wrapper { display: flex; align-items: center; gap: 6px; padding: 7px 14px; background: #1c7cd0; color: #fff; border-radius: 3px; cursor: pointer; font-size: 14px; }
.b-cart-button__wrapper:hover { background: #1566b0; }

/* === MAIN NAVIGATION MENU === */
.b-menu { background: #1c7cd0; }
.b-menu__holder { display: flex; gap: 0; flex-wrap: wrap; }
.b-menu__item { position: relative; }
.b-menu__link { display: block; padding: 10px 16px; color: #fff; font-size: 14px; white-space: nowrap; }
.b-menu__link:hover { background: rgba(0,0,0,.15); text-decoration: none; color: #fff; }
.b-menu__item_state_active .b-menu__link { background: rgba(0,0,0,.2); font-weight: bold; }
.b-menu__arrow { display: none; }
/* Dropdown */
.b-menu__sub-nav { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #ddd; min-width: 200px; z-index: 100; box-shadow: 0 4px 8px rgba(0,0,0,.1); }
.b-menu__item:hover .b-menu__sub-nav { display: block; }
.b-sub-menu__item { border-bottom: 1px solid #f0f0f0; }
.b-sub-menu__link { display: block; padding: 8px 14px; color: #333; font-size: 13px; }
.b-sub-menu__link:hover { background: #f5f5f5; text-decoration: none; }

/* === SIDEBAR === */
.b-sidebar { width: 220px; flex-shrink: 0; }
.b-title { display: block; font-weight: bold; font-size: 14px; border-bottom: 2px solid #1c7cd0; padding-bottom: 6px; margin-bottom: 10px; color: #333; }
/* Sidebar nav */
.b-nav { margin-bottom: 20px; }
.b-nav__item { border-bottom: 1px solid #eee; }
.b-nav__link { display: block; padding: 7px 8px; color: #333; font-size: 13px; font-weight: bold; }
.b-nav__link:hover { color: #1c7cd0; text-decoration: none; }
.b-nav__toggle { display: none; }
.b-sub-nav-list { padding-left: 10px; }
.b-sub-nav-list__item { border-top: 1px solid #f0f0f0; }
.b-sub-nav-list__link { display: block; padding: 5px 6px; font-size: 13px; color: #555; }
.b-sub-nav-list__link:hover { color: #1c7cd0; text-decoration: none; }
.b-sub-nav-list-sublist { display: none; }
.b-sub-nav-list__item_state_opened .b-sub-nav-list-sublist,
.b-nav__item-inner_state_opened .b-nav__list .b-sub-nav-list-sublist { display: block; padding-left: 10px; }
.b-sub-nav-list-sublist__link { display: block; padding: 4px 6px; font-size: 12px; color: #777; }
.b-sub-nav-list-sublist__link:hover { color: #1c7cd0; text-decoration: none; }
/* Sidebar contacts */
.b-sidebar-contacts { font-size: 13px; line-height: 1.7; }
.b-sidebar-contacts__item { margin-bottom: 6px; }
.b-sidebar-contacts__company-name { font-weight: bold; font-size: 13px; }
.b-sidebar-contacts__phone { margin-bottom: 4px; }
.b-sidebar-contacts__description { font-size: 12px; color: #888; }
.b-sidebar-contacts__address { font-size: 13px; color: #555; }
/* Schedule */
.b-sked { margin-top: 16px; }
.b-sked__table { font-size: 12px; }
.b-sked__row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #f0f0f0; }
.b-sked__day { color: #555; }
.b-sked__time { color: #333; }
.b-sked__time + .b-sked__time::before { content: ' – '; }

/* === PRODUCT GROUPS LIST === */
.b-caption { font-size: 17px; font-weight: bold; color: #333; margin-bottom: 14px; padding-bottom: 6px; border-bottom: 2px solid #1c7cd0; }
.b-product-groups-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.b-product-groups-list__item { border: 1px solid #e0e0e0; border-radius: 4px; padding: 10px; transition: box-shadow .2s; }
.b-product-groups-list__item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.b-product-groups-list__image { width: 100%; height: 140px; object-fit: cover; border-radius: 2px; }
.b-product-groups-list__title { display: block; font-size: 13px; font-weight: bold; color: #333; margin: 8px 0 6px; }
.b-product-groups-list__title:hover { color: #1c7cd0; text-decoration: none; }
.b-product-subgroups { margin-top: 4px; }
.b-product-subgroups__item { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0; border-bottom: 1px dotted #eee; }
.b-product-subgroups__title { font-size: 12px; color: #555; }
.b-product-subgroups__title:hover { color: #1c7cd0; text-decoration: none; }
.b-product-subgroups__counter { font-size: 11px; color: #aaa; flex-shrink: 0; margin-left: 4px; }
.b-product-subgroups__hidden-list { display: none; }
.b-product-groups-list__item_state_opened .b-product-subgroups__hidden-list { display: block; }
.b-show-all { margin-top: 8px; text-align: center; }
.b-show-all__link { font-size: 12px; color: #1c7cd0; cursor: pointer; }
.b-show-all__link:hover { text-decoration: underline; }
.b-product-groups-list__less { display: none; }
.b-product-groups-list__item_state_opened .b-product-groups-list__more { display: none; }
.b-product-groups-list__item_state_opened .b-product-groups-list__less { display: inline; }

/* === PRODUCT GALLERY (витрина) === */
.b-product-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.b-product-gallery__item { border: 1px solid #e0e0e0; border-radius: 4px; padding: 10px; display: flex; flex-direction: column; }
.b-product-gallery__image { width: 100%; height: 160px; object-fit: contain; }
.b-goods-title { display: block; font-size: 13px; color: #333; margin: 8px 0 4px; }
.b-goods-title:hover { color: #1c7cd0; text-decoration: none; }
.b-goods-sku { font-size: 11px; color: #aaa; }
.b-goods-price { margin-top: auto; }
.b-goods-price__value_type_current { font-size: 16px; font-weight: bold; color: #1c7cd0; }
.b-goods-data__state_val_avail { font-size: 12px; color: #27ae60; }
.b-product-gallery__main-btn { margin-top: 8px; }
.b-custom-button { display: block; text-align: center; padding: 7px; background: #1c7cd0; color: #fff; border-radius: 3px; font-size: 13px; }
.b-custom-button:hover { background: #1566b0; text-decoration: none; color: #fff; }

/* === FOOTER LINKS === */
.b-page__footer { background: #f5f5f5; border-top: 1px solid #ddd; margin-top: 32px; padding: 24px 0; }
.b-sitewide-links { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; gap: 32px; flex-wrap: wrap; }
.b-sitewide-links__item { flex: 1; min-width: 140px; }
.b-sitewide-links__title { display: block; font-weight: bold; font-size: 13px; margin-bottom: 10px; color: #555; }
.b-sitewide-links__list-item { margin-bottom: 6px; }
.b-sitewide-links__list-link { font-size: 13px; color: #555; }
.b-sitewide-links__list-link:hover { color: #1c7cd0; }
/* Bottom footer */
.b-footer { background: #222; color: #aaa; font-size: 12px; padding: 12px 16px; }
.b-footer__row { max-width: 1200px; margin: 0 auto; padding: 4px 0; }

/* === SOCIAL LINKS === */
.b-social-links { display: flex; gap: 8px; margin-top: 12px; }
.b-social-links__item img { width: 28px; height: 28px; }

/* === SCHEDULE POPUP (скрытый попап) === */
.b-schedule-btn { font-size: 13px; background: none; border: 1px solid #ccc; padding: 4px 10px; cursor: pointer; border-radius: 3px; color: #333; }

/* === MISC UTILITIES === */
.b-hidden { display: none; }
.h-relative { position: relative; }
.b-review { font-size: 13px; color: #1c7cd0; }
.b-documents { font-size: 12px; color: #27ae60; font-weight: bold; }
.b-online-edit__link, .b-online-edit__horizontal-borders, .b-online-edit__vertical-borders { display: none !important; }
.b-pro { font-size: 11px; background: #f0932b; color: #fff; padding: 2px 6px; border-radius: 3px; vertical-align: middle; }

/* === SCHEDULE POPUP TABLE === */
.b-schedule { padding: 10px; }
.b-schedule__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.b-schedule__header { font-weight: bold; padding: 4px 8px; border-bottom: 1px solid #ddd; text-align: left; }
.b-schedule__cell { padding: 4px 8px; border-bottom: 1px solid #f0f0f0; }
.b-schedule__remark { font-size: 11px; color: #888; margin-top: 8px; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .b-page__main-content { flex-direction: column; }
  .b-sidebar { width: 100%; }
  .b-header__table { gap: 8px; }
  .b-search { max-width: 100%; }
  .b-product-groups-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .b-sitewide-links { gap: 16px; }
  .b-menu__holder { flex-direction: column; }
  .b-menu__sub-nav { position: static; display: none; }
}

.company {font: clamp(12px, calc(12px + 5*((100vw - 320px)/(1920 - 320))), 16px)/1.4 Noto Sans, sans-serif;
box-sizing: border-box!important; color: #111; background: #fff;
--temp-back: url(/storage/cloud-cgi/static/kazprom-uc/production/design_template/549/images/bg3.jpg);}

.company * {box-sizing: border-box!important; transition: .5s;}

.company *:after,.company *:before {box-sizing: border-box!important;}

.company > h2 {font: clamp(16px, calc(16px + 11*((100vw - 320px)/(1920 - 320))), 27px)/1.4 Gabriela, serif;
color: #1c7cd0; letter-spacing: 1px; text-align: center; margin: 3em 0 2em;}

.company h2 {font: clamp(16px, calc(16px + 11*((100vw - 320px)/(1920 - 320))), 27px)/1.4 Gabriela, serif; letter-spacing: 1px; text-align: center;}

.company a:any-link,.company a {/*background: #333;*/ color: #1c7cd0; display: block; width: max-content; 
margin: 1em auto; text-decoration: none; padding: 8px 24px; font: bold 1.25em Gabriela, serif; letter-spacing: 1.5px; background: #fff; position: relative;}

.company a:after,.company a:before {content: ''; position: absolute; width: 12px; height: 12px; display: block; transition: 1s;}
.company a:before {left: 0; top: 0; border-top: 3px solid #1c7cd0; border-left: 3px solid #1c7cd0;}
.company a:after {right: 0; bottom: 0; border-right: 3px solid #1c7cd0; border-bottom: 3px solid #1c7cd0;}
.company a:hover:after,.company a:hover:before {width: 100%; height: 100%; transition: 1s;}
.company a:hover {}
.company a:active {transform: scale(0.97) translateY(3px);}



.video-back {position: relative; padding: 3vw; background: #333; margin: 4em 0 2em; text-align: center; display: grid; overflow: hidden;}
.video-back:after {opacity: 0; z-index: 2; inset: 0; width: 100%; height: 100%; content: ''; position: absolute; transition: .5s;
background: #333;}
.video-back video, .video-back img:not(#loggo) {position: absolute; width: 100%; inset: 0;
min-height: 100%; max-height: 100%; object-fit: cover; /*filter: brightness(.2);*/}
.video-back video {z-index: 1;}
.video-back img {z-index: 0;}

.video-back img#loggo {position: absolute; place-self: center; max-width: 100%;
filter: drop-shadow(1px 1px 2px #fff) drop-shadow(-1px -1px 2px #fff); z-index: 3;}
.video-back div {position: inherit; z-index: 3;}
.video-back p {color: white; text-align: justify; bottom: -100%; opacity: 0;}
.video-back p:nth-of-type(2n) {font-size: 1.25em;}
.video-back p:nth-of-type(2) {text-align: center; font-weight: bold; background: #1c7cd0; padding: 6px 12px; width: max-content; margin: 1em auto;}
.video-back strong {color: var(--gold); z-index: 3;}
.video-back span {color: var(--gold); font-weight: bold; z-index: 3;}
.video-back:hover.video-back video {filter: none;}
.video-back:hover.video-back img {filter: none;}
.video-back:hover.video-back p {opacity: 1; bottom: 0;}
.video-back:hover.video-back img#loggo {transform: translateX(-150%); opacity: 0;}
.video-back:hover.video-back:after {opacity: .8; transition: .5s;}
.video-back a:any-link {margin: .5em 2em; display: inline-block;}




.hero {display: grid; grid: 1fr 1fr/1fr 1fr;}
.hero div {position: relative; width: 100%; height: 100%;}
.hero div:first-child {background: #ddd center/cover fixed; /*top: 25%;*/ /*left: 25%;*/ z-index: 1; grid-row: -1/1; grid-column: 1/3; border: #aaa 1px solid;}
.hero div:last-child {grid-row: 2/3; grid-column: 1/3; bottom: 50%; /*right: 25%;*/
background: rgba(255,255,255,.9); width: 97%; margin: auto; z-index: 2; box-shadow: 3px 3px 7px #333; padding: 3vw;}
.hero div:last-child p {}





.customers {display: grid; grid: 1fr/5fr 8fr; /*place-content: center;*/ margin: 5em 0 0;}
.customers h2 {grid-column: 1/3; margin: 0 0 1em;}
.customers figure {position: relative; overflow: hidden; padding: 0; margin: 0; height: 100%;}
.customers figure img {position: absolute; width: 100%; min-height: 100%; max-height: 100%; object-fit: cover; filter: grayscale(1);}
.customers div {background: #ddd; padding: 1em; position: relative;}
.customers > p {margin: 1em 0; font-size: 1.125em; grid-column: -1/1;}
.customers div p {}
.customers:hover.customers figure img {transform: scale(1.4); filter: none;}

@media screen and (max-width: 800px){
.customers {grid: auto 1fr 1fr/1fr;}
.customers div {width: 90%; bottom: -20%;
margin: auto; box-shadow: 2px 2px 5px #333;}
.customers figure {grid-row: 3/4;}
.customers h2 {margin: 0 0 -2em;}  }



/* &mdash; COMMENTS &mdash; */

.comments {margin: 2.5em 0; position: relative; background: rgba(0,0,0,.05); display: grid; border-bottom: 1px solid #333;}


.comments * {
-webkit-touch-callout: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;}

.comments input {display: none;}
.comments label {cursor: pointer;}


.comm {padding: ; position: absolute; inset: 0; display: grid;/*transform: scale(0);*/ min-height: 16em; pointer-events: none;}


.comm div {/*background: #fff; padding: 1em;*/display: grid; gap: 1.25em; width: 75%; opacity: 0; place-self: center; margin: 1.5em auto;}
.comm p {font-size: 1.125em; transition: all 1s ease-in-out; margin: 0;}

.comm div p:first-of-type {font: bold 1.25em/1 Gabriela, serif; color: #1c7cd0; text-align: center;}
.comm div p:first-of-type:before {font: 1.5em/1.375 Material Icons; content:"\e24e"; display: block; margin: 0 0 -1em -6em; color: currentColor;}

.stars {/*font: 1.25em FontAwesome;*/}
.stars:after {padding: 0 .25em; font: 1.25em Material Icons; color: #f0932b;
margin-bottom: 20px; content:"\e885  \e885  \e885  \e885  \e885";}

.comments input:checked + .comm {position: relative; pointer-events: auto;}
.comments input:checked + .comm div {opacity: 1;}


.comm label {width: 1em; height: 1em; position: absolute;
display: grid; place-items: center; place-content: center; opacity: 0;
z-index: 90; top: 50%; transform: translateY(-50%); color: #1c7cd0;}

.comm label:after {position: absolute; place-self: center; font: 3em/1 Material Icons; width: 1em; height: 1em; z-index: 90;}

.comm label:first-of-type {left: 1em;}
.comm label:last-of-type {right: 1em;}

.comm label:first-of-type:after {content: '\eaa7';}
.comm label:last-of-type:after {content: '\eaaa';}

.comments input:checked + .comm label {opacity: .3;}
.comments input:checked + .comm:hover.comm label {opacity: .6;}
.comments input:checked + .comm:hover.comm label:hover {opacity: 1;}



.comm-number {display: flex; padding: 8px 0; gap: 0 10px; margin: 0; bottom: 0;
position: absolute; place-self: center; place-content: center;}

.comm-number label {background: #1c7cd0;
height: 12px; width: 12px;}

.comm-number label:hover {background: #555;}

.comments input#comm-1:checked ~ .comm-number label[for="comm-1"],
.comments input#comm-2:checked ~ .comm-number label[for="comm-2"],
.comments input#comm-3:checked ~ .comm-number label[for="comm-3"],
.comments input#comm-4:checked ~ .comm-number label[for="comm-4"],
.comments input#comm-5:checked ~ .comm-number label[for="comm-5"],
.comments input#comm-6:checked ~ .comm-number label[for="comm-6"]{
transform: rotate(45deg);}

@media screen and (max-width: 780px){
.comm {min-height: 21em;}  }





.pays {display: grid; grid: 1fr/repeat(8, 1fr); background: ; gap: 2em; margin: 5em .5em;}
.pays > p {grid-column: -1/1; font: bold 1.5em Gabriela, serif; text-align: center;}
.pays p {margin: 0;}
.pay {grid-column: span 2; padding: 1em; box-shadow: 2px 2px 5px #666; text-align: center; border-left: 6px solid transparent; border-right: 6px solid transparent;}
.pay img {width: 100%; max-width: 8em; aspect-ratio: 3/2; object-fit: contain;}

.pay:hover {transform: translateY(-4px); border-color: #f0932b; box-shadow: 4px 4px 9px 6px rgba(127,127,127,.6);}



@media screen and (min-width: 980px){
.pay:nth-of-type(5) {grid-column: 2/span 2;}  }

@media screen and (min-width: 700px) and (max-width: 980px){
.pay {grid-column: span 4;} 
.pay:nth-of-type(7) {grid-column: 3/span 4;}  }

@media screen and (max-width: 700px){
.pay {grid-column: span 8;}
.pay:hover {transform: none;}  }





.points {display: grid; grid: 1fr/1fr 1fr 1fr; gap: 2em;}
.point {padding: 1em; background: #eee; position: relative; border: /*2px solid #1c7cd0;*/}

.point:after {border: 2px solid transparent; background: #1c7cd0; font: 4em/1 Material Icons;
color: #fff; display: grid; place-content: center; width: 100%; height: 100%;
inset: 0; position: absolute; content: '\e87e'; transition: 1s;}

.point:hover.point:after {background: none; color: transparent; border-color: #1c7cd0; transition: 1s;}
.point:hover {}

@media screen and (max-width: 1080px){
.points {grid: 1fr/1fr 1fr;}  }
@media screen and (max-width: 780px){
.points {grid: 1fr/1fr;}  }




.rules {display: grid; grid: 1fr/repeat(12, 1fr); gap: 1em; position: relative; padding: 3em; margin: 3em 0;}
.rules h2,.rules > p {position: relative; grid-column: -1/1; color: #fff;}
.rules h2 {color: #fff; margin: 1em 0 2em;}
.rules > p {position: relative; font-size: 1.25em;}
.rule {padding: 1em; background: rgba(28,124,208,.9); margin: 0; position: relative; color: #fff;}
.rule p {margin: 0;}
.rules img {position: absolute; width: 100%; min-height: 100%; max-height: 100%; object-fit: cover; inset: 0; filter: brightness(.5);}

@media screen and (min-width: 980px){
.rule {grid-column: span 4;}
.rule:nth-of-type(4) {grid-column: 3/span 4;}  }

@media screen and (max-width: 980px){
.rules {grid: 1fr/1fr;}  }




.scheme {display: grid; gap: 4em; padding-left: 2em;}
.scheme-item {display: grid; grid: 1fr/auto 1fr;
gap: 3em; place-items: center start; padding: 1em;}
.scheme-item>span {display: grid; place-items: center; place-self: center;
width: 1em; height: 1em; position: relative;
color: #333; font: 700 2em/1 Gabriela, serif; z-index: 1;}

.scheme-item>span:after {content: '\e3af'; font: 3.5em/1 Material Icons; 
color: var(--blue, #1c7cd0); position: absolute; z-index: -2; width: 1em; height: 1em; transition: .7s;}
.scheme-item>span:before {content: ''; background: #fff; position: absolute;
 z-index: -1; border-radius: 50%; width: 1.25em; height: 1.25em;}

.scheme-item:nth-child(odd)>span:after {animation: spin 5s infinite .35s linear;}
.scheme-item:nth-child(even)>span:after {animation: spin 5s infinite reverse linear;}

/*@keyframes spin {to {transform: rotate(1turn); transform-origin: center;}  }*/
  .scheme-item p {margin: 0; padding: 1em; background: #ddd;
border-radius: 8px; color: #000; width: 100%;}

.scheme-item:hover.scheme-item p {background: #333; color: #fff;}
.scheme-item:hover.scheme-item span {transform: translateX(4px);}
.scheme-item:hover.scheme-item span:after {transform: rotate(30deg); transition: .7s;}
/*@media screen and (max-width: 980px) {.scheme {gap: 2em;}  }*/


@media screen and (max-width: 600px){
.scheme {padding: 0;}
.scheme-item {grid: 1fr/1fr;}
.scheme-item:hover.scheme-item span {transform: translateY(4px);}  }




.prof {position: relative; display: grid; padding: 1.5vw; margin: 4em 0;
overflow: hidden; border: 1px solid #bbb;}

.prof:after {-webkit-clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%); 
clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%); background: #fff; /*background: #1c7cd0;*/
width: 55%; height: 105%; transform-origin: bottom right;
place-self: center start; position: absolute; content: ''; transition: 1.2s;}

.prof h2,.prof p {position: relative; z-index: 1; color: #111; transition: 1.2s;}
.prof h2 {text-align: center; color: #111;}
.prof h2 span:first-of-type {color: #1c7cd0;}
.prof p {width: 42%; text-align: justify; margin: 0;}
.prof img {position: absolute; width: 100%; min-height: 100%; max-height: 100%; inset: 0; object-fit: cover;}

.prof:hover.prof:after {transform: rotate(-90deg) scale(5) translateX(-25%);
transform-origin: bottom right; transition: 1.2s;}

.prof:hover.prof p,
.prof:hover.prof h2 span:first-of-type {
color: #fff; transition: 1.2s;}
.prof h2 span:last-of-type {background: #fff; padding: 2px 6px 5px;}

.prof:hover.prof img {filter: brightness(.3);}


@media screen and (max-width: 780px){
.prof p {width: 85%;}
.prof:after {width: 100%;}
.prof:hover.prof:after {transform: rotate(-90deg) scale(10) translateX(-25%);}  }




/*--- yandex map ---*/
.ya-map {display: grid; grid: 1fr/2fr 1fr; ; place-items: center; position: relative; box-shadow: 0 0 9px; overflow: hidden;}


.delivers {display: grid; grid: 1fr 1fr/1fr 1fr; height: 100%; width: 100%; gap: 2px;}
p.deliver {padding: .5em; background: #ddd; margin: 0; height: 100%; font-size: 0.8em; width: 100%;}


.ya-map iframe {display: block; width: 100%; height: 21em!important; position: relative;
border: none; z-index: 0; background: #555 no-repeat center/cover;
background-image: url(/storage/services/constructor/1.0/static/?um=constructor:6db907bbd10389261e90d0dbe6857ce95facb21dbb9490f78949dfd21d2ca3b6&width=600&height=450);}




.ya-map iframe:before {content: 'Шымкент'; position: absolute;
top: 0; left: 0; padding: 1em; font: bold 1.25em/1 Gabriela, serif;
z-index: 1; background: var(--main-c, #1c7cd0); color: #000; width: 100%; height: 100%;
-webkit-clip-path: polygon(0 0, 0 6em, 18em 0); clip-path: polygon(0 0, 0 6em, 18em 0);}



@media screen and (max-width: 1080px){
.scheme {grid: 1fr/1fr; margin: 3em .5em;}
.scheme div:first-child p {font-size: 1em;}
.ya-map {grid: 1fr/1fr;}
.ya-map:after {display: none;}
.ya-map iframe {height: 18em!important;}  }
/*--- yandex map ---*/

.insta {display: grid; grid: 1fr/2fr 1fr; gap: 1em; place-items: center;}

iframe.inst-emb {/*grid-row: 1/3;*/ grid-column: ; height: 438px!important; background: linear-gradient(90deg, #fcb045, #fd1d1d, #833ab4); max-width: 500px; width: calc(100% - 15px); border: none; box-shadow: 1px 1px 7px #444; margin: 1em auto; display: block;}
.insta a:any-link {background: linear-gradient(90deg, #fcb045, #fd1d1d, #833ab4); border: none; color: #fff; padding: 12px 24px; box-shadow: 4px 4px 9px #555;}
@media screen and (max-width: 700px){
.insta {grid: 1fr/1fr;}  }

/* ==================== 2. Inner pages: same look as the home page ==================== */
/* Part of the pages also load the old satu design (lightblue1-*.css) whose icon font "icons"
   is not in the archive, so its glyphs render as empty boxes. The home page has none of them. */
.b-header__popup-item:before,
.b-online-edit__link:after,
.b-search__button:before,
.b-cart-button__icon:before,
.b-menu__arrow:after,
.b-menu__item_type_more:before,
.b-sub-menu__arrow:after,
.b-tab-control__icon:before,
.b-drop-phones__number:before,
.b-drop-phones__number:after,
.b-return-policy:after,
.b-return-policy__button:after,
.b-sundry__item:before { content: none !important; display: none !important; }

/* Satu.kz service bar: on the home page it is empty (only the toolbar container is left) */
.b-head-control-panel__logo,
.b-head-control-panel__pro-state,
.b-head-control-panel__link_type_register,
.b-head-control-panel__cart,
.b-head-control-panel__opinions-bar { display: none !important; }

/* lightblue1-*.css fixes body at min-width:980px -> horizontal scroll on tablets/phones */
body.b-layout { min-width: 0; }

/* lightblue1-*.css gives the menu a fixed 40px height: in the column (mobile) layout the white
   links then fall out of the blue bar onto the white page */
.b-menu { height: auto; }
.b-menu__holder { margin: 0; list-style: none; }

/* Product page: on narrow screens show name, price and "Купить" right under the header */
@media (max-width: 768px) {
  .b-page__main-content_page_product .b-sidebar_page_product { order: -1; }
}

/* ---------- Neutralise the old satu design (lightblue1-*.css) ----------
   ~650 pages still load it; the home page does not. Values below bring those pages
   back to the home page look defined in section 1. */
.b-layout :where(a, span, div, li, p, h1, h2, h3, input, button, select, textarea, td, th) { font-family: inherit; }

/* header: lightblue colours it for a dark background */
.b-layout .b-header,
.b-layout .b-header__table,
.b-layout .b-header__cell,
.b-layout .b-header__popup-item,
.b-layout .b-header-phones,
.b-layout .b-header-phones__info,
.b-layout .b-header-phones__item,
.b-layout .b-header-phones__part,
.b-layout .b-header-company-name__item { color: #333; font-size: 14px; }
.b-layout .b-header__cell { padding: 0; }
.b-layout .b-header__popup-item { padding: 0; position: static; }
.b-layout .b-header__popup-item_type_schedule,
.b-layout .b-schedule-btn { display: none; }
.b-layout .b-review,
.b-layout .b-documents { border-bottom: 0; }
.b-layout .b-header-company-name__logo { line-height: normal; max-width: none; }
.b-layout .b-header-company-name__title { max-width: none; }
.b-layout .b-header__cell_type_cart,
.b-layout .b-cart-button { text-align: left; color: inherit; }
.b-layout .b-cart-button__icon { display: none; }
.b-layout .b-cart-button__text { border-bottom: 0; }
.b-layout .b-search__wrap { position: relative; }
.b-layout .b-search__field { color: #333; line-height: normal; }

/* main menu */
.b-layout .b-menu { padding: 0; line-height: normal; }
.b-layout .b-menu .b-online-edit { line-height: normal; }
.b-layout .b-menu__holder,
.b-layout .b-menu__item { font-size: 14px; line-height: normal; }
.b-layout .b-menu__link,
.b-layout .b-menu__link_with_arrow { background: none; color: #fff; font-weight: normal; line-height: normal; }
.b-layout .b-menu__arrow { display: none; }
.b-layout .b-menu__item_type_more { display: none; }
.b-layout .b-sub-menu__item { display: block; margin: 0; font-size: 14px; }
.b-layout .b-sub-menu__arrow,
.b-layout .b-sub-menu__inner-menu { display: none; }

/* page body */
.b-layout .b-page__main-content,
.b-layout .b-page__content,
.b-layout .b-breadcrumb { background: none; }
.b-layout .b-breadcrumb { padding: 0 0 10px; }

/* sidebar */
.b-layout .b-title,
.b-layout .b-title_type_content-nav,
.b-layout .b-title_type_contacts,
.b-layout .b-title_type_schedule { background: none; padding: 0 0 6px; }
.b-layout .b-title__text { display: inline; color: #333; font-weight: bold; }
.b-layout .b-nav { background: none; padding: 0; list-style: none; }
.b-layout .b-nav__item,
.b-layout .b-sub-nav-list__item { padding: 0; background-image: none; list-style: none; }
.b-layout .b-sub-nav-list-sublist__item { padding: 0; border: 0; background-image: none; list-style: none; }
.b-layout .b-nav__link { color: #333; }
.b-layout .b-sub-nav-list__link { color: #555; }
.b-layout .b-nav__link:hover,
.b-layout .b-sub-nav-list__link:hover { color: #1c7cd0; }
.b-layout .b-nav-toggle { display: none; }
.b-layout .b-sidebar-contacts,
.b-layout .b-sked__table { padding: 0; border: 0; background: none; }
.b-layout .b-sked__table { display: block; }
.b-layout .b-sked__cell { min-width: 0; padding: 0; }
.b-layout .b-sidebar-contacts__company-name,
.b-layout .b-sidebar-contacts__person,
.b-layout .b-sidebar-contacts__phone,
.b-layout .b-sidebar-contacts__address { display: block; }
.b-layout .b-contact-info-extra__value { max-width: 100%; overflow-wrap: anywhere; }

/* catalogue: gallery cards (lightblue sets a percentage width on the cards) */
.b-layout .b-product-gallery { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: normal; }
.b-layout .b-product-gallery__item { width: auto; margin: 0; background: #fff; font-size: 14px; line-height: normal; }
.b-layout .b-product-gallery__image-link { margin: 0; line-height: normal; font-size: 0; text-align: center; background: none; }
.b-layout .b-product-gallery__image { display: block; max-width: 100%; margin: 0 auto; }
.b-layout .b-product-gallery__price-block,
.b-layout .b-product-gallery__data { margin: 0; line-height: normal; }
.b-layout .b-goods-data__state { display: inline; margin: 0; }
.b-layout .b-goods-price__value_type_current { display: inline; padding: 0; background: none; line-height: normal; }
.b-layout .b-product-gallery__btn { min-width: 0; line-height: normal; }

/* footer links: lightblue builds them with inline-block + font-size:0 */
.b-layout .b-sitewide-links { margin: 0 auto; font-size: 14px; line-height: normal; }
.b-layout .b-sitewide-links__item { margin: 0; font-size: 14px; line-height: normal; }
.b-layout .b-sitewide-links__list { font-size: 14px; line-height: normal; list-style: none; padding: 0; }
.b-layout .b-sitewide-links__list-item { margin: 0 0 6px; font-size: 13px; line-height: normal; background-image: none; }
.b-layout .b-promo-banner__text,
.b-layout .b-promo-banner__button { min-width: auto; }
.b-layout .b-header-phones__item { padding: 0; border: 0; }
.b-layout .b-menu__link_with_arrow { border-left: 0; }
.b-layout .b-sitewide-links { margin: 0 auto; }
.b-layout .b-contact-info-extra__name { color: #333; }

/* ---------- Catalogue toolbar and pager (unstyled on the home template) ---------- */
.b-catalog-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; margin: 12px 0; }
.b-layout .b-catalog-panel__select,
.b-layout .b-catalog-panel__btn-wrap,
.b-layout .b-catalog-panel__pagination { float: none; text-align: left; }
.b-catalog-panel__pagination { margin-left: auto; }
.b-layout .b-catalog-panel__field { padding: 5px 8px; border: 1px solid #ccc; border-radius: 3px; background: #fff; color: #333; font-size: 13px; max-width: 100%; }
.b-layout .b-catalog-panel__btn { display: inline-block; padding: 4px 8px; margin: 0 0 0 6px; border: 1px solid #ddd; border-radius: 3px; background: #fff; color: #555; font-size: 13px; }
.b-layout .b-catalog-panel__btn_type_gallery { border-color: #1c7cd0; color: #1c7cd0; }
.b-layout .b-pager { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 0; border: 0; font-size: 13px; line-height: normal; }
.b-pager__link, .b-pager__current, .b-pager__dotted-link, .b-pager__item { display: inline-block; min-width: 30px; padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px; text-align: center; font-size: 13px; color: #1c7cd0; background: #fff; }
.b-pager__link:hover { border-color: #1c7cd0; text-decoration: none; }
.b-pager__current, .b-pager__link_state_selected, .b-pager__link_type_current { background: #1c7cd0; border-color: #1c7cd0; color: #fff; }
.b-breadcrumb { font-size: 13px; color: #888; margin-bottom: 10px; }

/* lightblue decorations: shadow "wedges" under sidebar blocks, list bullets, hover plates */
.b-layout .b-nav:before, .b-layout .b-nav:after,
.b-layout .b-block-wrap:before, .b-layout .b-block-wrap:after,
.b-layout .b-nav__item:before, .b-layout .b-nav__item:after,
.b-layout .b-sub-nav-list__item:before,
.b-layout .b-sub-nav-list-sublist__item:before,
.b-layout .b-nav__link:before,
.b-layout .b-sub-nav-list__link:before,
.b-layout .b-sub-nav-list-sublist__link:before,
.b-layout .b-sidebar-contacts__data-item:before,
.b-layout .b-custom-link_type_recall:before { content: none; display: none; }

/* ---------- Subgroup tiles on group pages (same cards as .b-product-groups-list on the home page) ---------- */
.b-layout .b-product-groups-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin: 0 0 16px; padding: 0; list-style: none; }
.b-layout .b-product-groups-gallery__item { display: block; width: auto; margin: 0; padding: 10px; border: 1px solid #e0e0e0; border-radius: 4px; transition: box-shadow .2s; }
.b-layout .b-product-groups-gallery__item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.b-layout .b-product-groups-gallery__image-wrap { position: relative; height: 140px; display: flex; align-items: center; justify-content: center; line-height: normal; }
.b-layout .b-product-groups-gallery__image-link { display: block; width: 100%; height: 100%; }
.b-layout .b-product-groups-gallery__image { display: block; width: 100%; height: 100%; object-fit: contain; }
.b-product-groups-gallery__counter { position: absolute; right: 0; bottom: 0; padding: 1px 6px; border-radius: 3px; background: #1c7cd0; color: #fff; font-size: 11px; }
.b-layout .b-product-groups-gallery__title { display: block; margin: 8px 0 0; font-size: 13px; font-weight: bold; color: #333; }
.b-layout .b-product-groups-gallery__title:hover { color: #1c7cd0; text-decoration: none; }
@media (max-width: 768px) {
  .b-layout .b-product-groups-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ---------- Sidebar filters (price range, "в наличии") ---------- */
.b-filter__wrapper { margin-bottom: 20px; font-size: 13px; }
.b-filter__title { display: block; margin: 8px 0 6px; font-weight: bold; color: #555; }
.b-range-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.b-range-filter__input { flex: 1 1 80px; min-width: 0; padding: 5px 6px; border: 1px solid #ccc; border-radius: 3px; font-size: 13px; }
.b-range-filter__button { padding: 5px 10px; border: 0; border-radius: 3px; background: #1c7cd0; color: #fff; cursor: pointer; }
.b-filter-list { list-style: none; padding: 0; margin: 0; }
.b-filter-list__item { padding: 3px 0; }
.b-filter-list__label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.b-filter-list__count { color: #aaa; font-size: 11px; }

/* ---------- Contacts page ---------- */
.b-contact-info { margin-bottom: 20px; font-size: 13px; line-height: 1.7; }
.b-contact-info__title { display: block; font-weight: bold; margin-bottom: 6px; }
.b-contact-info__row { display: block; margin-bottom: 4px; }

/* ==================== 3. Oldest satu template (b-layout__container, ~230 pages) ====================
   Its design CSS is not in the archive, so sidebar and content stacked one under another.
   Same grid as the home page: 1200px container, 220px sidebar + content. */
.b-layout__container { width: auto; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.b-layout__container_type_main { display: flex; gap: 24px; align-items: flex-start; }
.b-layout__sidebar { width: 220px; flex-shrink: 0; float: none; }
.b-layout__content { flex: 1; min-width: 0; width: auto; float: none; }
.b-header__container { width: 100%; border-collapse: collapse; }
.b-header__container-cell { padding: 12px 0; vertical-align: middle; }
.b-header__company-phone-align_pos_right { text-align: right; }
.b-header__company-name { display: inline-flex; align-items: center; gap: 12px; }
.b-header__company-name img { max-width: 100%; height: auto; }
body > .b-menu { width: calc(100% - 32px); max-width: 1168px; margin: 0 auto 16px; }
.b-menu__container { position: relative; }
.b-layout__mid { padding: 10px 0; }
.b-layout .b-breadcrumb__bar { float: none; }
.b-breadcrumb__link-home-icon { display: none; }
.b-breadcrumb__arrow { padding: 0 4px; color: #aaa; font-style: normal; }
.b-content { margin-bottom: 20px; }
.b-title_type_hidden { display: none; }
.b-form-input-button { display: flex; }
.b-form-input-button__field { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #ccc; border-right: 0; border-radius: 3px 0 0 3px; font-size: 13px; }
.b-form-input-button__submit { order: 2; padding: 6px 12px; border: 0; border-radius: 0 3px 3px 0; background: #1c7cd0; color: #fff; cursor: pointer; }
.b-filters { padding: 6px 0; border-bottom: 1px solid #eee; font-size: 13px; }
.b-filters__header { display: flex; justify-content: space-between; font-weight: bold; color: #555; margin-bottom: 6px; }
.b-filters__toggle { display: none; }
.b-filters__range { display: flex; gap: 6px; }
.b-filters__range-input { flex: 1 1 0; min-width: 0; padding: 5px 6px; border: 1px solid #ccc; border-radius: 3px; font-size: 13px; }
.b-filter-list ul { list-style: none; }
.b-layout__sidebar .b-nav { display: block; }
.b-layout__sidebar .b-nav__item { display: block; }
.b-nav__marker { display: none; }
.b-nav__item-content { display: block; }
.b-groups-list { list-style: none; padding-left: 10px; }
.b-groups-list__item { border-top: 1px solid #f0f0f0; padding: 5px 6px; font-size: 13px; }
.b-groups-list__item_state_active > a { color: #333; font-weight: bold; }
.b-nav__counter, .b-groups-list__counter { color: #aaa; font-size: 11px; margin-left: 4px; }
.b-contact-info_view_short .b-contact-info__phone { display: block; }
@media (max-width: 768px) {
  .b-layout__container_type_main { flex-direction: column; }
  .b-layout__sidebar { width: 100%; }
  .b-layout__content { width: 100%; }
  .b-header__container-cell { display: block; }
  .b-header__company-phone-align_pos_right { text-align: left; }
}
.b-header__company-phone-align:not(:has(.b-company-header-phone *)) { display: none; }
.b-layout__content .b-product-gallery__image-link { width: auto; height: 160px; display: flex; align-items: center; justify-content: center; border: 0; background: #f7f7f7; overflow: hidden; }
.b-layout__content .b-product-gallery__image-link img { max-width: 100%; max-height: 100%; object-fit: contain; }
.b-product-gallery__title { display: block; font-size: 13px; color: #333; margin: 8px 0 4px; }
.b-product-gallery__title:hover { color: #1c7cd0; text-decoration: none; }
.b-product-gallery__current-price { font-size: 16px; font-weight: bold; color: #1c7cd0; }
.b-product-gallery__state { font-size: 12px; color: #27ae60; }
.b-product-gallery__prices { margin-top: auto; }
.b-product-gallery__btn-buy { margin-top: 8px; }
.b-layout .b-product-gallery__btn-call { display: block; width: 100%; margin-top: 6px; padding: 5px; border: 1px solid #1c7cd0; border-radius: 3px; background: #fff; color: #1c7cd0; font-size: 12px; cursor: pointer; text-indent: 0; }
.b-product-gallery__btn-call .h-hidden { display: none; }
/* subgroup tiles of this template */
.b-product-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin: 0 0 16px; padding: 0; list-style: none; }
.b-product-groups__item { padding: 10px; border: 1px solid #e0e0e0; border-radius: 4px; }
.b-product-groups__visual { position: relative; height: 120px; background: #f7f7f7; }
.b-product-groups__image-link { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.b-product-groups__image-link img { max-width: 100%; max-height: 100%; object-fit: contain; }
.b-product-groups__fake-layer { display: none; }
.b-product-groups__title { display: block; margin-top: 8px; font-size: 13px; }
.b-product-groups__title-link { color: #333; }
.b-product-groups__counter { margin-left: 4px; color: #aaa; font-size: 11px; font-weight: normal; }
.b-layout__mid .b-breadcrumb,
.b-layout__mid .b-breadcrumb__bar { width: auto; max-width: 100%; white-space: normal; }
/* the template's breadcrumb script squeezes items to width:0, letters then stack vertically */
.b-layout__mid .b-breadcrumb__item, .b-layout__mid .b-breadcrumb__current { display: inline !important; width: auto !important; max-width: none !important; }
/* product page of this template */
.b-extra-photos { max-width: 100%; overflow: hidden; }
.b-layout iframe, .b-layout video { max-width: 100%; }
:where(.b-layout__content, .b-page__content) img { max-width: 100%; }
@media (max-width: 768px) {
  .b-product__container, .b-product__container > * { display: block; width: auto !important; }
  .b-layout .b-product-groups__item { min-width: 0; overflow-wrap: anywhere; }
}
.b-product-groups__item, .b-product-groups__holder { min-width: 0; }
.b-layout .b-product-groups__item { width: auto; margin: 0; float: none; }
/* certificates gallery */
.b-layout .b-photos { width: auto; display: flex; flex-wrap: wrap; gap: 16px; padding: 0; list-style: none; }
.b-layout .b-photos__item { width: auto; max-width: 100%; margin: 0; float: none; }
.b-photos__item img { max-width: 100%; height: auto; }

/* satu helper class (defined in the missing member_common css): popup texts hidden until hover */
.h-hidden { display: none !important; }
.b-custom-link_type_recall { display: inline-block; margin: 6px 0 0; padding: 0; border: 0; background: none; color: #1c7cd0; font-size: 12px; cursor: pointer; text-align: left; }
.b-custom-link_type_recall:hover { text-decoration: underline; }

/* ==================== 4. Product page (main template) ==================== */
.b-product__name { font-size: 20px; line-height: 1.3; font-weight: bold; color: #333; margin: 0 0 12px; }
.b-product-data { list-style: none; padding: 0; margin: 0 0 8px; font-size: 12px; color: #888; }
.b-product-data__item_type_available { color: #27ae60; }
.b-product-cost { margin: 6px 0 10px; }
.b-product-cost__price { font-size: 22px; font-weight: bold; color: #1c7cd0; }
.b-product__btn-wrap { margin-bottom: 10px; }
.b-custom-button_page_product { width: 100%; max-width: 100%; box-sizing: border-box; }
.b-return-policy { font-size: 12px; color: #666; margin: 8px 0; }
/* pictures: big photo + thumbnails instead of one long column */
.b-pictures__table { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 8px; align-items: center; margin-bottom: 10px; }
.b-pictures__cell { display: grid; gap: 8px; }
.b-pictures__img-wrap { display: flex; align-items: center; justify-content: center; }
.b-pictures__img { max-width: 100%; max-height: 430px; height: auto; object-fit: contain; }
.b-pictures-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; }
.b-pictures-list__item { width: 80px; height: 80px; border: 1px solid #e0e0e0; border-radius: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.b-pictures-list__img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* tabs */
.b-tab-control { display: flex; flex-wrap: wrap; border-bottom: 2px solid #1c7cd0; margin: 16px 0 12px; }
.b-tab-control__item { padding: 8px 14px; cursor: pointer; color: #555; font-size: 13px; border-radius: 3px 3px 0 0; }
.b-tab-control__item:hover { color: #1c7cd0; }
.b-layout .b-tab-control__item_state_active { background: #1c7cd0; color: #fff; }
.b-tab-control__icon { display: none; }
.b-tab-control + .b-tab-list > .b-tab-list__item { display: none; }
.b-tab-control + .b-tab-list > .b-tab-list__item_state_active { display: block; }
.b-product-info { border-collapse: collapse; font-size: 13px; }
.b-product-info td, .b-product-info th { padding: 5px 10px; border-bottom: 1px solid #eee; text-align: left; }
.b-order-info { list-style: none; padding: 0; font-size: 13px; }
.b-user-content { overflow-wrap: break-word; }
.b-user-content img { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .b-pictures__table { grid-template-columns: 1fr; }
  .b-pictures__cell:not(.b-pictures__cell_width_half) { grid-template-columns: repeat(2, 1fr); }
  .b-pictures__cell_width_half { order: -1; }
}
/* the sticky buy panel is driven by the missing satu script; static it only duplicates name/price/"Купить" */
.b-layout .b-sticky-panel { display: none; }
.b-user-content h2 { font-size: 15px; line-height: 1.5; margin: 0 0 6px; }

/* "scroll to top" button (created by site.js / inline page script); its satu styles load only on part of the pages */
.b-up-arrow { position: fixed; bottom: 70px; width: 40px; height: 40px; z-index: 100; background-color: rgba(0,0,0,.5); color: #fff; border-radius: 50%; transition: all .5s linear; cursor: pointer; }
.b-up-arrow:hover { background-color: rgba(0,0,0,.7); }
.b-up-arrow:after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin-top: -4px; margin-left: -6px; border-top: 2px solid; border-right: 2px solid; transform: rotate(-45deg); }
.b-up-arrow_pos_left { left: 75px; }
.b-up-arrow_pos_right { right: 75px; }
@media (max-width: 768px) { .b-up-arrow_pos_right { right: 16px; } .b-up-arrow_pos_left { left: 16px; } }
.b-layout .b-product-groups__visual,
.b-layout .b-product-groups__holder { float: none; width: auto; margin: 0; padding: 0; overflow: visible; }
.b-layout .b-product-groups__visual { border: 0; border-radius: 3px; }