/* Start:/bitrix/templates/aspro-premier/css/lite.bootstrap.min.css?17512533134995*/
@-ms-viewport{width:device-width}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{width:100%;height:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}p{margin:0 0 10px}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;line-height:inherit}.form-control{display:block;width:100%;font-size:14px;line-height:1.428571429}.clearfix:after,.clearfix:before{content:" ";display:table}ol,ul{margin-top:0;margin-bottom:10px}.center-block{display:block;margin-left:auto;margin-right:auto}.pull-right{float:right!important}.pull-left{float:left!important}.hide{display:none!important}.show{display:block!important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none!important;visibility:hidden!important}.affix{position:fixed}.fade{opacity:0;-webkit-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{display:none}.collapse.in{display:block}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;transition:height .35s ease}.row{margin-left:-16px;margin-right:-16px}.row:after,.row:before{content:" ";display:table}.row:after{clear:both}.row:after,.row:before{content:" ";display:table}.row:after{clear:both}.col-lg-12,.col-lg-3,.col-lg-4,.col-lg-6,.col-lg-8,.col-md-12,.col-md-3,.col-md-4,.col-md-6,.col-md-8,.col-sm-12,.col-sm-3,.col-sm-4,.col-sm-6,.col-sm-8,.col-xs-12,.col-xs-3,.col-xs-4,.col-xs-6,.col-xs-8{position:relative;min-height:1px;padding-left:16px;padding-right:16px}.col-xs-3,.col-xs-4,.col-xs-6,.col-xs-8{float:left}.col-xs-12{width:100%}.col-xs-8{width:66.66666666666666%}.col-xs-6{width:50%}.col-xs-4{width:33.33333333333333%}.col-xs-3{width:25%}@media (min-width:768px){.container{width:750px}.col-sm-3,.col-sm-4,.col-sm-6,.col-sm-8{float:left}.col-sm-12{width:100%}.col-sm-8{width:66.66666666666666%}.col-sm-6{width:50%}.col-sm-4{width:33.33333333333333%}.col-sm-3{width:25%}}@media (min-width:992px){.container{width:970px}.col-md-3,.col-md-4,.col-md-6,.col-md-8{float:left}.col-md-12{width:100%}.col-md-8{width:66.66666666666666%}.col-md-6{width:50%}.col-md-4{width:33.33333333333333%}.col-md-3{width:25%}}@media (min-width:1200px){.container{width:1170px}.col-lg-3,.col-lg-4,.col-lg-6{float:left}.col-lg-12{width:100%}.col-lg-8{width:66.66666666666666%}.col-lg-6{width:50%}.col-lg-4{width:33.33333333333333%}.col-lg-3{width:25%}}.tooltip{position:absolute;z-index:1030;display:block;font-size:12px;line-height:1.4;opacity:0;visibility:visible}.tooltip.in{opacity:.9}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;text-decoration:none;background-color:#000;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-top-color:#000;border-width:5px 5px 0}.tooltip.top-left .tooltip-arrow{bottom:0;left:5px;border-top-color:#000;border-width:5px 5px 0}.tooltip.top-right .tooltip-arrow{right:5px;bottom:0;border-top-color:#000;border-width:5px 5px 0}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-right-color:#000;border-width:5px 5px 5px 0}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-left-color:#000;border-width:5px 0 5px 5px}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-bottom-color:#000;border-width:0 5px 5px}.tooltip.bottom-left .tooltip-arrow{top:0;left:5px;border-bottom-color:#000;border-width:0 5px 5px}.tooltip.bottom-right .tooltip-arrow{top:0;right:5px;border-bottom-color:#000;border-width:0 5px 5px}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:700}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable{padding-right:35px}.alert-dismissable .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{color:#468847;background-color:#dff0d8;border-color:#d6e9c6}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#356635}.alert-info{color:#3a87ad;background-color:#d9edf7;border-color:#bce8f1}.alert-info hr{border-top-color:#a6e1ec}.alert-info .alert-link{color:#2d6987}.alert-warning{color:#c09853;background-color:#fcf8e3;border-color:#fbeed5}.alert-warning hr{border-top-color:#f8e5be}.alert-warning .alert-link{color:#a47e3c}.alert-danger{color:#b94a48;background-color:#f2dede;border-color:#eed3d7}.alert-danger hr{border-top-color:#e6c1c7}.alert-danger .alert-link{color:#953b39}.img-responsive{max-width:100%;max-height:100%}
/* End */


/* Start:/palitra/stylepal.css?17751572498758*/
/* ========================================= */
/* 1. БАЗОВЫЕ НАСТРОЙКИ И ПЕРЕМЕННЫЕ АСПРО   */
/* ========================================= */
.coatings-widget {
  --primary: var(--theme-base-color, #c8102e);
  --border: var(--theme-border-color, #ececec);
  --bg-light: #f8f8f8;
  color: #333; font-size: 15px; line-height: 1.6; width: 100%;
}
.coating-title { font-size: 24px; font-weight: normal; color: #222; margin-top: 0; margin-bottom: 20px; }
.color-highlight { font-weight: bold; color: var(--primary); }

/* ========================================= */
/* 2. НАВИГАЦИЯ (СЦЕНАРИИ И ТАБЫ)            */
/* ========================================= */
.scenario-tabs { display: flex; gap: 10px; margin-bottom: 20px; background: var(--bg-light); padding: 6px; border-radius: 8px; overflow-x: auto; scrollbar-width: none; }
.scenario-tabs::-webkit-scrollbar { display: none; }
.scenario-btn { flex: 1; text-align: center; padding: 14px 20px; background: transparent; border: none; border-radius: 6px; font-size: 16px; font-weight: bold; color: #555; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; }
.scenario-btn.active { background: #fff; color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.coatings-tabs { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 10px; margin-bottom: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.coatings-tabs::-webkit-scrollbar { display: none; }
.tab-btn { white-space: nowrap; padding: 8px 16px; background: transparent; color: #555; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.3s ease; }
.tab-btn:hover { color: var(--primary); border-color: var(--primary); }
.tab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ========================================= */
/* 3. СЕТКА: ИНФО И ВИЗУАЛ                   */
/* ========================================= */
.coatings-container { display: flex; flex-direction: column; gap: 30px; }
.coatings-visual { order: 1; } 
.coatings-info { order: 2; }   

@media (min-width: 768px) { 
  .coatings-container { display: grid; grid-template-columns: 1fr 1fr; } 
  .coatings-info { order: 1; }   
  .coatings-visual { order: 2; } 
}

.visual-main { position: relative; width: 100%; }

/* Стили для защищенного изображения */
.main-coating-image { width: 100%; height: 400px; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: opacity 0.3s ease; }
a.fancy { display: block; width: 100%; cursor: zoom-in; }
a.fancy:hover .main-coating-image { opacity: 0.9; }

.visual-main .main-hex-block { height: 400px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 20px; color: #fff; font-weight: bold; font-size: 24px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
.badge-warning { position: absolute; top: 10px; right: 10px; background: #ffc107; color: #000; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; z-index: 10;}
.btn-toggle-layers { width: 100%; margin-top: 10px; padding: 10px; background: transparent; border: 1px dashed var(--primary); color: var(--primary); cursor: pointer; border-radius: 4px; }

/* ========================================= */
/* 4. ТРИГГЕРЫ И ОПИСАНИЕ                    */
/* ========================================= */
.trust-triggers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 25px 0; }
.trigger-item { background: #fff; padding: 20px 10px; text-align: center; border-radius: 4px; border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,0.02); position: relative; transition: box-shadow 0.3s; }
.trigger-item:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.trigger-value { display: block; font-size: 18px; font-weight: 600; color: #222; }
.trigger-label { display: block; font-size: 13px; color: #777; margin-top: 6px; }

.honest-thickness { border-color: #38b000; cursor: help; }
.honest-thickness .trigger-value, .honest-thickness .trigger-label { color: #38b000; }
.tooltip { display: none; position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 8px; border-radius: 4px; font-size: 11px; width: 200px; z-index: 10; }
.honest-thickness:hover .tooltip { display: block; }
.expert-advice { background: #fff3cd; border-left: 4px solid #ffc107; padding: 12px; font-size: 13px; margin-bottom: 20px; border-radius: 0 4px 4px 0; }

/* Стили для текстового блока описания */
.coating-description { font-size: 14px; color: #444; margin-bottom: 25px; line-height: 1.6; }
.coating-description p { margin-bottom: 10px; }
.coating-description b { color: #222; font-size: 15px; display: inline-block; margin-bottom: 5px; }

/* ========================================= */
/* 5. ПОЛНОЭКРАННАЯ ПАЛИТРА И ЧИПЫ           */
/* ========================================= */
.palette-section-fullwidth { margin-top: 30px; width: 100%; }
.selected-color-info { font-size: 16px; color: #555; margin-bottom: 20px; }

.side-type-toggle { display: inline-flex; background: var(--bg-light); border-radius: 6px; padding: 4px; margin-bottom: 30px; border: 1px solid var(--border); }
.side-toggle-btn { border: none; background: transparent; padding: 8px 20px; border-radius: 4px; font-size: 14px; cursor: pointer; color: #666; transition: all 0.2s ease; }
.side-toggle-btn.active { background: #fff; color: var(--primary); box-shadow: 0 2px 6px rgba(0,0,0,0.08); font-weight: 600; }

.chips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 15px; }
.color-chip { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 1px solid var(--border); border-radius: 30px; cursor: pointer; background: #fff; transition: all 0.2s ease; width: 100%; box-sizing: border-box; overflow: hidden; }
.color-chip:hover { border-color: #bbb; background: #fdfdfd; transform: translateY(-2px); }
.color-chip.active { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 1px var(--primary); }

.chip-circle { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.chip-circle img { width: 100%; height: 100%; object-fit: cover; }
.chip-circle.is-hex { border: 1px solid rgba(0,0,0,0.15); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }

.chip-label { font-size: 13px; color: #333; line-height: 1.2; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.color-chip.active .chip-label { color: var(--primary); }

/* ========================================= */
/* 6. УТИЛИТЫ И ТАБЛИЦА СРАВНЕНИЯ            */
/* ========================================= */
.d-none { display: none !important; }
.toggle-switch { display: inline-flex; align-items: center; cursor: pointer; gap: 10px; font-size: 14px; font-weight: 500; }
.toggle-switch input { display: none; }
.toggle-slider { width: 40px; height: 22px; background-color: #ccc; border-radius: 22px; position: relative; transition: .4s; }
.toggle-slider:before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: .4s; }
.toggle-switch input:checked + .toggle-slider { background-color: var(--primary); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }

.coatings-faq .faq-accordion__wrapper { background: #fff; border-radius: 4px; margin-bottom: 12px; border: 1px solid var(--theme-border-color, #ececec); }
.coatings-faq .accordion-head { position: relative; display: block !important; padding: 18px 50px 18px 24px; cursor: pointer; text-decoration: none !important; }
.coatings-faq .accordion-head i.svg { position: absolute !important; right: 24px; top: 50%; transform: translateY(-50%); width: 16px !important; height: 16px !important; transition: transform 0.2s ease; margin: 0 !important; padding: 0 !important; max-width: 16px !important; min-width: 16px !important; }
.coatings-faq .accordion-head:not(.collapsed) i.svg { transform: translateY(-50%) rotate(90deg); }
.coatings-faq .accordion-body { padding: 0 24px 24px 24px; }
@media (max-width: 767px) {
  .coatings-faq .accordion-head { padding: 15px 45px 15px 15px; }
  .coatings-faq .accordion-head i.svg { right: 15px; }
  .coatings-faq .accordion-body { padding: 0 15px 15px 15px; }
}
/* End */
/* /bitrix/templates/aspro-premier/css/lite.bootstrap.min.css?17512533134995 */
/* /palitra/stylepal.css?17751572498758 */