:root {--active:#444; --hover:#444}

html, body {background-color: #f3f3f3; color: #444; font-size: .95rem; font-family: 'Montserrat', Verdana, sans-serif; font-display: swap;}

/*NYNYNYNYNYNYNYNYNNYNYN*/
body.ny{
    background-image: url("/assets/img/ny-pattern.png");
    background-repeat: repeat;
    background-size: 300px auto;
}
body.ny .footer{
    background-color: rgba(51, 51, 51, 0.95);
    background-image: url("/assets/img/ny-pattern.png");
    background-repeat: repeat;
    background-size: 350px auto;
}
.container{
    padding-left: 0;
    padding-right: 0;
}
body.ny .top-line{
    background-color: rgba(255, 255, 255, 0.6);
}
body.ny .header-mobile{
    background-image: url("/assets/img/ny-pattern.png");
    background-repeat: repeat;
    background-size: 200px auto;
}

/*@media (max-width: 960px) {
    body.ny .catalog{
        background-image: url("/assets/img/ny-pattern.png");
        background-repeat: repeat;
        background-size: 200px auto;
        background-attachment: fixed;
    }
}*/
/*NYNYNYNYNYNYNYNYNNYNYN*/


h1, h2, h3, h4 {font-family: 'Montserrat', Helvetica, sans-serif; font-display: swap;}
h2, .h2 {font-size: 2rem; }
h4, .h4 {font-size: 1.25rem; font-weight: 400; text-transform: uppercase; }

a {color: var(--primary) }
a:hover {color: var(--secondary);}


.img-top-webp {width:100%; height:auto; background-color:#f0f0f0;}
.img-top-caption-webp {color:white; overflow:hidden; position:relative}
.img-top-caption-webp h1 {font-size:3rem; font-weight:600; color:white}

	@media (max-width: 480px) {
		.img-top-webp {aspect-ratio: 2}
		.img-top-caption-webp {height: 100px; top:100px; margin-top:-100px}
		.img-top-caption-webp h1 {font-size:2rem;}
	}
	
	@media (min-width: 481px) and (max-width: 960px) {
		.img-top-webp {aspect-ratio: 2.4}
		.img-top-caption-webp {height:250px; top:250px; margin-top:-250px}
	}
	
	@media (min-width: 961px) {
		.img-top-webp {aspect-ratio: 3}
		.img-top-caption-webp {height:300px; top:300px; margin-top:-300px}
	}
	


.ar1-1, .ar2-1, .ar1-2, .ar3-2, .ar2-3, .ar4-3, .ar3-4, .ar16-9 {width:100%; max-width:960px; height:auto;}
.ar1-1 {aspect-ratio: 1} .ar2-1 {aspect-ratio: 2} .ar1-2 {aspect-ratio: .5} .ar3-2 {aspect-ratio: 1.5} .ar2-3 {aspect-ratio: .666} .ar4-3 {aspect-ratio: 1.333} .ar3-4 {aspect-ratio: .75} .ar16-9 {aspect-ratio: 1.777}
	@media (min-width: 640px) {.no-w {width:auto; max-height:300px;} }


.btn.focus, .btn:focus {-webkit-box-shadow: none); box-shadow: none)}
.btn img {margin-right:.75rem; height:18px;}
 
.btn { background-color: var(--primary); border-color: var(--primary); color:white}
.btn:hover { background-color: var(--secondary); border-color: var(--secondary); color:white}

.btn.style1, .btn.style2, .btn.style3 {display:inline-flex; align-items:center; justify-content:center; margin:1rem auto 0 auto;
		padding: 1rem 1.5rem; line-height: 1rem; color: #444; border-radius:2rem; margin-top:1rem; font-size:1.1rem;
		border-radius:2rem;}

.btn.compact {padding: .7rem 1rem;}

.btn.style1 {background-color:#ffce00;  font-weight:bold; border: 2px solid transparent;}
.btn.style1:hover { background-color: transparent; border: 2px solid #ffce00; color:black;}	

.btn.style2 {background-color:transparent; border:2px solid #ccc}
.btn.style2:hover {background-color: transparent; border: 2px solid #777; color:black;}	

.btn.style3 {background-color: var(--primary); border-color: var(--primary); color:white}
.btn.style3:hover {background-color: var(--secondary); border-color: var(--secondary); color:white}	

.btn-clear, .btn-clear:focus {background-color:transparent; color: #444; border-color: #aaa; padding: .25rem .5rem;}
.btn-clear:hover {background-color:transparent; border-color:var(--primary); color:#444}

.btn-empty {background-color:transparent; color: #444; border:0; display:inline-flex; align-items:center; justify-content:center;}
.btn-empty:hover {background-color:transparent; color:#444}
.btn-empty img {margin:0; height:22px;}


.small { font-size: 0.9rem; }
.ssmall { font-size: 0.75rem; }

.top-line { line-height:1.25rem}
.top-line .nav-link { padding: 0 1rem 0 0}
.top-line a { color: #333 }
.top-line a:hover { color: #000000 }
.top-line .active a { color: var(--primary); }

.bluepoint { background-color: #2196f3; width: 24px; height: 24px; border-radius: 12px; color: white;}

.sale { background: url(/assets/img/sale.svg); background-repeat: no-repeat; background-position: 3px 3px; padding-left: 20px }
.sale a, .top-line .sale.active a { color: #d64343 }
.sale .nav-link { padding-right: 0;}

.sale2 { background: url(/assets/img/sale2.svg); background-repeat: no-repeat; background-position: 3px 3px; 
		background-size:14px 14px; padding-left: 20px; margin-right:.75rem }
.sale2 a, .top-line .sale2.active a { color: #d64343 }
.sale2 .nav-link { padding-right: 0;}

.sale, .sale2 {cursor:pointer}


/* Zen Menu */

:root { --nav-height:3rem;	--nav-font-size: 1.1rem; --nav-item-text:white}

#zenMenu {background-color: var(--primary); height:var(--nav-height); line-height:var(--nav-height);
  display: -webkit-flex; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start;}
	#zenMenu li {list-style: none; margin:0; padding:0; display:flex}
	#zenMenu a {text-decoration:none; white-space:nowrap}	

#zenMenu .menu-items {margin:0; padding:0; display:-webkit-flex; display:flex; flex-wrap:wrap; justify-content: space-between; width:100%;}
#zenMenu .menu-items {overflow:hidden; height:var(--nav-height);}

#zenMenu .menu-items a {color:var(--nav-item-text); padding:0 .75rem; height:var(--nav-height);font-size:var(--nav-font-size)}
	#zenMenu .menu-items a:hover {background-color:var(--hover)}
	#zenMenu .menu-items a.active {background-color:var(--active); padding:0 1rem;}
	#zenMenu .menu-items .first {padding-left:1rem}

#zenMenu .more, #zenMenu .side-menu {display: none; width:36px; height:var(--nav-height); position:relative}

#zenMenu .more-toggle {height:var(--nav-height); width:36px;}
	#zenMenu .more-toggle:hover, #zenMenu .more-toggle.show {background-color:var(--active)}
	#zenMenu .more-toggle i,
	#zenMenu .more-toggle i::before,
	#zenMenu .more-toggle i::after {position:absolute; width:5px; height:5px; background: white; border-radius: 50%; content: ""}
	#zenMenu .more-toggle i {top:19px; left:16px}
	#zenMenu .more-toggle i::before {top:-8px; left:0}
	#zenMenu .more-toggle i::after {top:8px; left:0}

#zenMenu .more-items {background-color: var(--active); border-radius:0; border:0; top: -2px !important; padding:0 !important; madding:0 !important}
	#zenMenu .more-items li {display:block}
	#zenMenu .more-items a {color:white; padding:0 1rem; height:var(--nav-height); font-size:1.1rem; display:block}
	#zenMenu .more-items a:hover, .more-items a.active {background-color:var(--primary)}

#sideMenuFooter {font-size:1.2rem}
#sideMenuFooter a {text-decoration:none}

.side-menu-toggler {box-shadow:none; border:none; width:40px; height:24px; position:relative; background:transparent}
	.side-menu-toggler i,
	.side-menu-toggler i::before,
	.side-menu-toggler i::after {position:absolute; width:24px; height:3px; background: #777; border-radius: 2px; content: ""}
	.side-menu-toggler i {left:0; top:10px}
	.side-menu-toggler i::before {top:-8px; left:0}
	.side-menu-toggler i::after {top:8px; left:0}

.nav-side {margin:0; padding:0}
.side-menu {position:fixed; left:-100%; right:0; top:0; width:70%; height:100%; overflow: auto;
	z-index:2000; box-shadow: 0 0 2rem rgba(0,0,0,0.3) !important; transition: left ease 0.3s; background-color:white}
	.side-menu.show {display:block; left:0; transition: left ease 0.3s;}
	.side-menu .nav-item { color: var(--secondary); padding:.125rem 0; list-style:none}
	.side-menu .nav-item a { color: var(--secondary); text-decoration:none; font-size:1.1rem}
	.side-menu .nav-item .active { color: var(--primary); font-weight:bold; background:transparent}
	.side-menu .nav-item a.active { color: var(--primary) }


.overlay {position:fixed; left:-100%; right:0px; top:0px; width:100%; height:100%; z-index:1100; background-color:black; 
	opacity:0; transition:opacity ease .5s;}
.overlay.show {left:0; opacity:.3; transition:opacity ease 1s;}

.close-btn {width:24px; height:24px; position:absolute; top:12px; right:12px;  z-index:1101; cursor:pointer}
	.close-btn i, .close-btn i::after {position:absolute; width:19px; height:2px; background: #aaa; content: ""}
	.close-btn i {transform: rotate(45deg); top:10px; left:3px}
	.close-btn i::after {transform: rotate(-90deg);}
	
body.lock {overflow: hidden;}


	
/* Custom form controls */

.custom-control.custom-checkbox {display:flex; flex-shrink: 0; align-items: center; padding:4px}
.custom-checkbox label {margin-left: .5rem;}
.custom-checkbox input[type="checkbox"] { width: 18px; height: 17px; border:1px solid #ccc; position:relative;
/* выкл. штатн. поведения */ -moz-appearance: none; -webkit-appearance: none; -o-appearance: none;}

.custom-checkbox input[type="checkbox"]:hover {border:1px solid var(--primary); cursor:pointer}
.custom-checkbox input[type="checkbox"]:checked { background-color:var(--primary); border:1px solid var(--primary);}
/* Галочка */
.custom-checkbox input[type="checkbox"]:checked::after {position:absolute; width:11px; height:2px; top:7px; left:4px;
	transform: rotate(-45deg); background: white; border-radius: 0px; content: "";}
.custom-checkbox input[type="checkbox"]:checked::before {position:absolute; width:5px; height:2px; top:8px; left:2px;
	transform: rotate(45deg); background: white; border-radius: 0px; content: "";}
	
.form-select, .form-select:focus, .form-select:active {box-shadow:none; cursor:pointer; font-size:.9rem}
.form-select:hover {border-color:var(--primary)}	


/* Common elements */

.header { background-color: white; z-index:100}
.header .phones { min-width: 125px;}
.header .phones a { color: #444; font-weight: 600; font-size: 1rem; line-height: 0.9em; text-decoration:none}

.header-mobile { background-color: white; width: 100%; border-bottom:1px solid #eee; }

.footer {font-size: .9rem; background-color: #333; color: #aaa;}
.footer a {text-decoration: none}
.footer .menu a { padding-bottom: 3px; color: #aaa; display: block;}
.footer a:hover { color: #eee;}
.footer .phones a { font-size: 1.5em; line-height: 1.2em; color: #eee;}
.footer h3, .footer h5 { color: #eee;}
.footer .bottom { border-top: 1px solid #555; color: #777;}
.footer .logo {max-height:60px}


/* Поиск */
@media (max-width: 960px) { .search { width:100% } }
@media (min-width: 961px) { .search { width:30% } }

.search input { background-image: url(/assets/img/search.svg); background-repeat: no-repeat; 
			background-position: 10px center; padding: .35rem .5rem .35rem 32px;}
.search .form-control:focus { border: 1px solid var(--primary); -webkit-box-shadow: none; box-shadow: none}

/* выпадающее при поиске с результатами */
#ui-id-1, #ui-id-2, #ui-id-3 {z-index:1150} 
.mse2-ac-wrapper.ui-menu-divider.ui-widget-content {display:none}
.mse2-ac-link ui-menu-item-wrapper {padding:0}
.mse2-ac-item { padding:.3rem .5rem .5rem .5rem; line-height:1.25rem; font-family: 'Montserrat', Verdana, sans-serif;}
.mse2-ac-item .price {white-space:nowrap; color: var(--primary); margin-top:.5rem}
.ui-menu-item-wrapper {border-bottom: 0px solid #c5c5c5;}
.ui-widget-content .ui-state-active {background-color:#f0f0f0 !important; border: 1px solid #c5c5c5 !important; 
	border-top: 1px solid #f0f0f0 !important; border-bottom: 1px solid #f0f0f0 !important; 
	color:#444 !important; }


@media (max-width: 767px) {.container { padding-left: 0; padding-right: 0; } }
@media (min-width: 768px) and (max-width: 1199px) {.container, .container-md, .container-sm { max-width: 100%; } }
@media (min-width: 1200px) {.container { max-width: 1200px; } }

.crumbs-home { font-size: 1.1rem; color:#444}
.crumbs-home i {font-size: .9rem;}
.crumbs-home:hover { color: var(--primary)}


.content { background-color: white; line-height: 1.5rem }
.content .shadow { -webkit-box-shadow: 0 .25rem 1.25rem rgba(0, 0, 0, .07) !important; box-shadow: 0 .25rem 1.25rem rgba(0, 0, 0, .07) !important}
.content .small { line-height: 1.2rem; font-size: .8rem; font-weight: 300;}
.content h1 { font-size: 2.3rem; font-weight: bold;}
.content h2 { font-size: 1.4rem; font-weight: bold; margin-top: 1.3rem;}
.content.benefits{ position: relative; overflow: hidden;}

.content h2 .price { font-size: 1.5rem;}
.content h3 { font-size: 1rem; font-weight: bold; margin-top: 1.3rem;}
.content h4 { margin: 1.2rem 0 .75rem 0;}

.content a {text-decoration: none;}
.content p { font-size: 0.95rem; margin-bottom: .75em;}
.content p iframe{ margin-top: 2rem;}
.content ul,.content ol { padding: 0; margin: 0 0 .75em 1.25rem;}

.-content ul { list-style-image: url('/assets/img/bullet.png')}
.content ul:last-child { margin-bottom: 0}
.content li { margin-bottom: .25rem}


@media (max-width: 768px) {
 .content h1 { font-size: 1.7rem; font-weight: bold; }
 .content h2 { font-size: 1.25rem; }
}

.toast { position: fixed !important; top: 1em; right: 1em; z-index: 1100; }

/* Модальная форма заказа */
button.cta {padding:.75rem 2rem; border-radius:2rem;}
.modal-title, .modal-body {color:#444;}
.modal-header {border-bottom:0;}
.check {font-size: .9rem; color:#777;
	background-image:url(/assets/img/check.svg); background-size:16px 16px; background-repeat:no-repeat; 
	background-position:0 0; padding-left:24px;}
	
	
	
/* Мини-корзина в шапке на всех шаблонах кроме 05-Order */

.minicart { display: block; font-size: 16px; color: #333; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s;
 position: relative; text-decoration: none;}

.minicart:hover { color: var(--primary); -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; text-decoration: none;}
.minicart img { margin-right: 12px;}
.minicart-count { position: absolute; font-size: 11px; line-height: 14px; color: white; width: 16px; height: 16px; border-radius: 50%;
 background: var(--primary); text-align: center; left: 16px; top: -4px; z-index: 1; padding-top: 1px;}
.minicart-wr { position: relative;}
.minicart-wr:hover .minicart-popup { opacity: 1; z-index: 1100; -webkit-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s;}

.minicart-popup { position: absolute; width: 330px; background: white; opacity: 0; right: 0; z-index: -1; top: 24px; padding: 0;
 -webkit-box-shadow: 0 20px 63px 0 rgba(146, 161, 179, 0.55); box-shadow: 0 20px 63px 0 rgba(146, 161, 179, 0.55);
 -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; border-radius: 3px;}
.minicart-popup .total-cost { font-weight: bold; font-size: 14px; letter-spacing: -0.4px;}
.minicart-popup .checkout { display: block; width: 100%; background: var(--primary); text-align: center; padding: 10px 0; color: white;
 -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; color: white; text-decoration: none; font-size: 1rem; }
.minicart-popup .checkout:hover { background: var(--secondary); -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.minicart-popup ul { padding: 0; margin: 0;}
.minicart-popup .total { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify;
 justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 15px;}

.minicart-popup .total-text { font-size: 14px; letter-spacing: -0.4px; font-weight: bold;}
.minicart-popup .total-price { font-weight: bold; font-size: 14px; letter-spacing: -0.4px;}
.minicart-popup .item-list { padding: 0px}
.minicart-d { border-bottom: 1px solid #ccc; padding: 1em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify;
 -ms-flex-pack: justify; justify-content: space-between;}
.minicart-d .photo { width: 75px; padding-right: 1em;}
.minicart-d .photo img { height: 45px;}
.minicart-d .prod { width: 200px; min-width: 200px; max-width: 200px;}
.minicart-d .title a { color: var(--secondary); font-size: 14px; text-decoration:none}
.minicart-d .price { color: var(--primary); font-size: 14px; font-weight: normal; padding: 3px;}
.minicart-d .price .count { color: var(--secondary)}
.minicart-d .action { padding-top: 15px; padding-left: 1em;}

/* Закрепленное внизу сообщение */
.alert {background-color: var(--primary); color:white; text-align:center; margin-bottom:0; opacity:.9; font-size:1.1rem;}
.alert button {margin-left:2rem}


span.tip, span.ct_tip{
    position:relative!important;
    cursor:pointer;
}

/* Отзывы */
.feedback .actions {text-align:center;}
.feedback .actions .btn {border-radius:1.5rem; margin: .35rem .5rem; padding: .4rem 1rem;}
.feedback .btn-clear:hover {background-color:var(--primary); color:white;}
.feedback .btn-clear .fas:before {color:#444; font-size:17px;}
.feedback .btn-clear:hover .fas:before {color:white}


.feedback h2 {font-size:2.5rem; font-weight:600; text-align:center;}
.feedback .fb-item {padding:1rem; overflow:hidden;}
.feedback .fb-item p.who {margin-bottom:.5rem; font-size:.8rem; color:#333;}
.feedback .fb-item p.intro {color:#444; line-height:1.5rem; background-color:#f5f6f7; border-radius:0 1.5rem 1.5rem 1.5rem; padding:1rem;
	max-height:200px;  overflow:hidden
}
.feedback .fb-item .cover { height:75px; position:relative; bottom:75px; margin-bottom:-75px;
	background-image:url(/assets/img/feedback-bottom.png); background-repeat:repeat-x; background-position:bottom;
}
.feedback .fb-item img {margin-left:0.5rem; float:right;}

.feedback p.text-secondary {color: #444!important;}
.feedback .who {font-weight: bold;}

.feedback-answer { background-color:#f0f0f0; border-radius:1rem; padding:1rem; font-style: italic;}
.feedback-answer b { font-style: normal;}

#opt_color, .opt_color { display: none }





/* Вставка видео с Ютуба */
iframe {margin-bottom:1rem}
.youtube { width: 560px; height: 314px; background-size: 100%; background-position: center; background-repeat: no-repeat; margin-bottom:1rem;
	position: relative; display: inline-block; overflow: hidden; transition: all 200ms ease-out; cursor: pointer; }

	@media (max-width: 768px) {
	 .youtube { width:100%; height: 190px }
	}	
	@media (min-width: 768px) and (max-width: 960px) {
	 .youtube { width:100%; height: 225px }
	}
.youtube .play { background: url('/assets/img/youtube-play-btn.png') no-repeat;
    background-position: 0 -50px; -webkit-background-size: 100% auto; background-size: 100% auto;
    position: absolute; height: 50px; width: 69px; transition: none; top:0; left:0; right:0; bottom:0; margin:auto; }
.youtube:hover .play { background-position: 0 0;}