:root {
	--font-color: 70, 70, 70;           /* Шрифт  */
	--font-color-inv: 255, 255, 255;    /* Шрифт (инверсия) */
	--links: 0, 175, 240;              /* Цвет ссылок */

	--color1: 0, 175, 240;       /* 1 Цвет (основной) */
	--color1-ui: 0, 150, 200;    /* 1 Цвет (линии, :hover...) */
	--color2: 250, 220, 120;      /* 2 Цвет (акцедентный) */
	--color2-ui: 255, 195, 45;    /* 2 Цвет (элементы UI) */

	--body-bg: 255, 255, 255;           /* Фон всего окна */
	--content-bg: 255, 255, 255;        /* Фон зоны контента */
	
	--header1-bg: 240, 240, 240;     /* Фон 1 блока заголовка */
	--header2-bg: 255, 255, 255;     /* Фон 2 блока заголовка */
	--header3-bg: 240, 240, 240;     /* Фон 3 блока заголовка */
	--footer-bg: var(--header1-bg);
	
	
	--nav-color: 255, 255, 255;          /* var(--color1) */
	--nav-active-color: var(--color1-ui);
	--nav-font-color: var(--font-color);    /* var(--font-color-inv) */
	--nav-font-active-color: 255, 255, 255;

	/* Bootstrap override */
	--bs-body-font-size: 1.15rem;
	--bs-body-line-height: 1.5rem;
	--bs-form-control-bg: rgb(var(--content-bg));	
	--primary: rgb(var(--color1));
	--secondary: rgb(var(--color2));
}

:active, :focus, .btn { outline: 0 !important; box-shadow: 0 0 0 0 !important}

h1, .h1, h2, .h2, h3, .h3 {font-weight:400}
h1, .h1 {font-size:2rem; line-height:2rem; color:rgb(var(--color1)) }
h2, .h2 {font-size:1.5rem; line-height:1.5rem; color:rgb(var(--color1-ui)) }
h3, .h3 {font-size:1.25rem; line-height:1.25rem; }

a { color:rgb(var(--links)); text-underline-offset: 4px }
a:hover { color:rgb(var(--font-color)) }
a.no-link { opacity:.5 }

b {font-weight:500;}
.small {line-height:1rem}

.col-12 p:last-child { margin-bottom:0}


body { background-color:rgb(var(--body-bg)) }
@media (min-width: 1200px) {
	.container {max-width:1200px;}
}

header { padding:0}
	header .one { background-color: rgb(var(--header1-bg)) }
	header .two { background-color: rgb(var(--header2-bg)) }
	header .three { background-color: rgb(var(--header3-bg)) }

header .logo { }
header .title {}
header .social i {}
header .contacts { flex-basis:20%; font-size:1.25rem; text-align: right;} 
header .contacts a {text-decoration:none;}

    @media (max-width: 768px) {
        header {border-radius:0; padding:0; flex-direction: column; justify-content:center;}
		header div {text-align:center}
		header .title {order:-1; font-size:1.1rem; line-height:1.25rem}
		header .logo {flex-basis:60%}
    }

footer { border-radius: 0 0 .5rem .5rem}
    footer.container { background-color:rgb(var(--color1)); color:rgb(var(--font-color-inv)); text-align:center;}
    footer.container a { color:var(--base-main);}
    @media (max-width: 768px) {
        footer {border-radius:0}
    }

	
.img-top {background-color:rgba(var(--color2-ui), .5); overflow:hidden; width:100% }
.img-top img {aspect-ratio:3}
    @media (max-width: 576px) { .img-top img {aspect-ratio:.75} }

.frame {border: 2px dashed rgb(var(--color1-ui)); padding:.75rem 1rem; border-radius: .5rem;}
.focused {padding:.75rem 1rem; border-radius: .5rem; background-color:rgba(var(--color2), .25)}

.invalid {font-size:.9rem; line-height:1rem; color: #c00} /* Ошибки в формах */

.breadcrumbs { -background-color:rgb(var(--content-bg)) }
.breadcrumb { margin:0; margin-bottom:1rem; -background-color:rgba(var(--color1), .1)}
	@media (max-width: 992px) { .breadcrumb {padding:.5rem 1rem;} }
.breadcrumb a {text-decoration:none }
.breadcrumb li {opacity:.75 }
.breadcrumbs .separ {width:16px; height:16px; position:relative; margin:0 .5rem;}
.breadcrumbs i, .breadcrumbs i::after {position:absolute; width:9px; height:2px; background: rgba(var(--color1), .75); content: ""}
.breadcrumbs i {transform: rotate(45deg); top:8px; left:5px}
.breadcrumbs i::after {transform: rotate(-90deg); left:5px; top:4px;}



/* Main */

.prod-links {  } 
.prod-links a { text-decoration: none;}

.prod-links .item { background-color:#f0f0f0; padding:1rem 1.5rem}
.prod-links .item.selected { background-color:rgba(var(--color1), .15) }
.prod-links .item.selected::before { content: url(/assets/img/star1.svg); display:block; position:relative; z-index:99; float:right; margin:0 -8px -36px 0; width:36px; height:36px; }
.prod-links .item:hover { background-color: rgba(var(--color2), .25) }
.prod-links .item img { aspect-ratio:1; }
.prod-links .item .title { font-size:2rem; font-weight:600; margin-bottom:.5rem }
.prod-links .item .price { color:#777; }

.prod-links .item .img-off, .prod-links .item:hover .img-on { display:none}
.prod-links .item .img-on, .prod-links .item:hover .img-off { display:block}

.swiper-prev, .swiper-next { width:36px; height:36px; position:relative; top:-150px; z-index:999; opacity:.5 }
.swiper-prev { float:left; margin-left:-1rem }
.swiper-next { float:right;  margin-right:-1rem  }
.swiper-prev:hover, .swiper-next:hover { opacity:1 } 

.plus { background-image:url(/assets/img/plus.svg); background-repeat:no-repeat; background-size:40px;
        background-position: 4px 4px ; padding-left: 56px; margin-bottom:1rem    }

/* Catalog */

.summary .pr-title { font-size: 3rem; line-height:3rem; font-weight:600 }
.summary .price { font-size:2rem; color:rgb(var(--color1)) }

.switch { display: flex  }
.type { font-size:1.25rem; border: 2px solid rgb(var(--color1)); border-radius: 1rem; padding: .25rem .75rem; background-color: transparent; margin-right:1rem; cursor: pointer; }
.type.active { background-color: rgb(var(--color1)); color:white; }
.product-list a { text-decoration:none }



/* Product */
 .spec-sample { text-align:center; margin: 1.25rem 0; font-size:2rem; line-height: 2rem; font-weight:400 }
#btnBar2 h2, #btnBar3 h2 { margin-top:2rem }
#btnBar2 p, #btnBar3 p { text-align:center }
#btnBar2 img, #btnBar3 img { max-width: 100% }
@media (min-width: 600px) { 
	#btnBar3 img { max-width: 75% }
}

.zakaz-format { text-align:center; margin:1.5rem 0; font-size:2rem; line-height: 2rem; font-weight:500 }






/* 
Bootstrap breakpoints 
---------------------
Extra small	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px
*/