@charset "UTF-8"; 
@font-face {font-family: OpenSansReg; src: url(/fonts/woff/OpenSans/OpenSans-Regular.woff2) format('woff2');; font-display: swap;}
@font-face {font-family: OpenSansBold; src: url(/fonts/woff/OpenSans/OpenSans-Bold.woff2) format('woff2');; font-display: swap;}
@font-face {font-family: OpenSansSemiBold; src: url(/fonts/woff/OpenSans/OpenSans-Semibold.woff2) format('woff2');; font-display: swap;}
@import url('../css/var.css');
*{margin: 0; box-sizing: border-box;}
h2{font-family:OpenSansSemiBold; font-size:1.2rem;}	
:root{
	--y-move:0;
	--x-move:0;/* горизонт */
	--scale:2;
	--fbold:'system-ui';
	--fitalic:'system-ui';
	--fwbold:unset;	
	--fstyle:unset;	
	interpolate-size: allow-keywords;
}
body{font-family: OpenSansReg, -apple-system, system-ui, sans-serif; min-height: 100vh;}
header{background-color: rgba(0, 0, 0, 0.82);color: white;padding:0.3em; user-select: none;	padding: 4px 0.5em;	
	.header_top{display: flex; flex-direction:row ;justify-content: space-between; align-items: center;}		
}
main{width:min(768px, 100%);margin: 0 auto;}
h1{
	font-family: OpenSansSemiBold, system-ui, sans-serif;	font-weight:unset;
	font-size: 1.2rem;text-align:center;	padding: 0 1em;margin: 0.5em 0;
}
.wrap_logo{min-height: 84px;text-align: center;}
.logo{margin: 0 auto;height:auto;object-fit: contain;}

.liker{				
	position: absolute; display:inline-block;z-index:5;		
	background-image:url(../img_system/heart_black.svg);background-repeat: no-repeat;background-position:center;background-size: cover;		
	right: 2em; top: 2em; width: 2.5em;height: 2.5em;
	opacity:0.7;		
	input{display:none;}
}
.liker:has(input:checked){background-image:url(../img_system/heart_red.svg);}
.link-category{position: absolute; color: grey; font-size: small;text-transform: lowercase;width: -webkit-fill-available;    padding:0 1em;}

.box_pictures{
	display: flex; flex-direction: column;	gap: 3px; 	align-items: center;margin: 2px;
	.main_image{
		min-width: 200px;width: 100%;
		img{margin-top: 5px; width: 100%; height: auto; max-height: 50vh;	object-fit: cover;	border-radius: 4px;}
	}  
	.other_image{
		display: flex; 
		flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 3px;
		.wrap_img{
			position:relative;
			button{position:absolute;top: 0;left: 0;width: -webkit-fill-available;height: 100%;opacity: 0;}
		}
		img{object-fit: cover;transition: all 0.4s;border-radius: 4px;width: 100%;height: auto;aspect-ratio: 1 / 1;}		
		summary{font-size: larger;color: blue;list-style-type: none;margin: 1em;text-align:center;}
	}
	.w12{width:calc(100% / 2 - 4px);}
	.w13{width:calc(100% / 3 - 6px);}		
}
/* DISCOUN */
.wrap_label_discount{
	position:absolute; top: 72px;left: 10px;animation: anime-discount 1s ease-in 1;animation-fill-mode: forwards; 	
	p{text-align: center; color: #333; font-weight: normal; font-size: small;}
}
.wrap_label_discount::after{content:'\1F446';position:absolute; top: 16px;right: -3px;transform: rotate(328deg);font-size: 2.1em;}	
.label_discount{	
	height: 70px; width: 120px; overflow:hidden;
	font-size: 25px;font-weight: bold;
	background-color: #fff400;    
    border-radius: 10px; color: #ff0000;user-select: none;
	border: 3px dotted #ff0000;
    outline: 2px solid #ffffff;
	box-shadow: 1px 1px 14px 0px #b1b1b1;	
}	
@keyframes anime-discount {0%{transform: rotate(0deg) scale(0.1);}	90%{transform: rotate(720deg) scale(1.1);} 100%{transform: rotate(720deg) scale(1);}
}
b{font-family:OpenSansBold; font-weight: unset;}	
iframe{border-radius: 10px;}
.article_price{text-align:center;color:#db4f0f;font-size:larger; font-family:OpenSansSemiBold;}
.article_description{
	font-size: large;margin: 0 1em 1em;width: fit-content;text-align: justify;	    
	[red]{color:red}	
	[ident]{text-indent: 2em;}
	[justify]{	text-align:justify;	}
	[left]{text-align:left;}
	[center]{text-align:center;}
	[right]{text-align:right;}
	[nobr]{white-space:nowrap;}
	[small]{font-size:small;}
	[col2]{column-width : 48% ; column-count : 2 ; column-gap : 4%; }
	table{margin:0 auto;width:100%}
	ul{	padding-left: 1.5em; text-align:left;}
	ul[p0]{	padding-left: 0;}/*без отступа*/
	ul[p1]{	padding-left: 1em;}
	ul li{padding-left: 5px;}
	ul[m-n] li{list-style-type: none;}
	ul[m-o] li{list-style-type: circle;}
	ul[m-v] li{list-style-type: '\2705';}/* галочка в зел квадрате */
	ul[m-r] li{list-style-type: square;}
	ul[m-dec] li{list-style-type: decimal;}
	ul[m-vb] li{list-style-type: '\2714';}
	ul[m-vr] li{list-style-type: '\2714';}	ul[m-vr] li::marker{color:red;}
	ul[m-xr] li{list-style-type: '\2717';}	ul[m-xr] li::marker{color:red;}/* крестик красный */
	ul[m-vg] li{list-style-type: '\2714';}	ul[m-vg] li::marker{color:#00ad00;}
	ul[m-vblue] li{list-style-type: '\2714';} ul[m-vblue] li::marker{color:#002eff;}
	a{color:blue;}
}
dl dt{font-size: medium;text-align: center;border-top: 1px dotted #777;padding: 5px;font-family:OpenSansSemiBold;}
dl dt h3{font-size:medium;font-family:OpenSansSemiBold, sans-serif;}
dl dt a{color:#000;}
dl dd{overflow-x: auto;font-style:var(--fstyle); font-family:var(--fitalic);font-size: 0.9em;margin-bottom: 0.5em;}
dl img{float: left; margin: 2px 0.5em 0 0.5em;border-radius:5px;max-width: 128px;}
dl[rang] dd:nth-child(odd){img{float:right;}}
.accord{
	width: -webkit-fill-available;
	h3{position:relative;background: linear-gradient(0deg, transparent, #e3e3e3);text-align:center;border-radius: 5px 5px 0 0;padding: 0.5em 1.5em 0.5em 0.5em;font-size:medium;}
	h3::after{content:'\276E';position:absolute; right:1em;transition: transform .8s;font-size: large;transform: rotate(-90deg);}
	dl,p{overflow-y: hidden;height: 1px;background-color: whitesmoke; padding: 0 5px;transition: all .8s;opacity:0.2;}
	dt:first-child{border-color:transparent;}
}
.accord_open{
	dl,p{opacity:1;height:auto;} 
	h3{background: linear-gradient(0deg, transparent, #e3e3e3);} 
	h3::after{transform: rotate(90deg)};
}
.video-box{	height: 640px;margin: 0 auto;width: -webkit-fill-available;	iframe { width: 100%; height: 100%;	}}

.wrap_location{display: flex; flex-direction: row;align-items: center; margin-top: 1em;}	
.list_location{margin:1em 0.5em;position:relative;line-height: 1.5em;       
	a{color:blue;}
	[data-contact]{color: #005777;font-weight:bold;cursor:pointer;}
}
.box_location{
	padding: 0.5em; text-align: center; margin: 0.5em 0;
	[data-contact]{color: #005777;font-weight:bold;cursor:pointer;}
}
.popover{margin: auto;border: none;outline: none;transition: all .3s;transition-behavior: allow-discrete; border-radius: 10px;	opacity:0; transform: scale(0);padding:0;}	
.popover::backdrop {  background-color: #00000026;}
.popover:popover-open{opacity:1;transform: scale(1);@starting-style {opacity: 0; transform: scale(0.5) translateY(10px);}
}
#modal_image_article{	
	figure{padding: 0;margin: 0;}
	img{width: 100%; max-height: 95vh;	object-fit:contain;}	
}
#pop_coupon{
	max-width:360px;margin: auto 1rem;padding:1rem 1.5rem;user-select: none;
	color: #ff0000; border: 2px dashed #ff0000;  background-color: #ffffe8;
	h3{font-size:1.5em;text-align:center;}
	p{font-size: small;margin-top: 1em;font-weight: normal;color: #333;text-align: justify;}
}
/*footer*/
.contacts{
	position: sticky;position: --webkit-sticky;background-color: #2f2f2f; 
	a{background-color: white;}
}
footer{
	[data-contact="share"]{
		background: linear-gradient(180deg, #434343, transparent);
		width: -webkit-fill-available; padding: 0.5em;
        border: none;color: white;font-size: 16px;text-transform: uppercase;
	}
	[data-contact="share"]::before{
		content:'';
		position:absolute;left:0.5em; width:1em; height:1em;
		display:block;
		background-image:url(../img_system/share_white.svg);background-size: contain;background-repeat: no-repeat;
	}
}
.up{bottom: 0;}	
.capt_footer{
	display:flex;margin: 0.5em 0.5em 0 0.5em;font-weight: bold;letter-spacing: 4px;font-size: 16px;color: whitesmoke;text-transform: uppercase;cursor:default;
}
/*Animation strelka*/
.arrow{    	
	display: flex;align-items: center;
	span {display: block;	width: 10px;height: 10px;}	
}
.a-right{	
	margin-right: 2em;
	span{transform: rotate(-45deg); animation: arrow-right 2s infinite;border-bottom: 1px solid #c3c3c3;border-right: 1px solid #c3c3c3;		}
}	
.a-left{	
	margin-left: 2em;
	span{transform: rotate(45deg);animation: arrow-left 2s infinite;border-bottom: 1px solid #c3c3c3;border-left: 1px solid #c3c3c3;}
}		
.a-right span:nth-child(2){animation-delay: -0.2s;}
.a-right span:nth-child(3){animation-delay: -0.4s;}
.a-left span:nth-child(2){animation-delay: -0.2s;}
.a-left span:nth-child(1){animation-delay: -0.4s;}

@keyframes arrow-right{
    0%{opacity: 0;transform: rotate(-45deg) translate(-20px,-20px);}
    50%{opacity: 1;}
    100%{opacity: 0;transform: rotate(-45deg) translate(20px, 20px);}
}
@keyframes arrow-left{
    0%{opacity: 0;transform: rotate(45deg) translate(20px,-20px);}
    50%{opacity: 1;}
    100%{opacity: 0;transform: rotate(45deg) translate(-20px,20px);}
}
.but_online_market{position: sticky;margin-top:2em;bottom: 40px;left: 0;background-color: #0088cc;color: white;padding: 0.5em 1em;}
.but_online_market:visited{color:white;}

/*если вход с мобильного*/
@media screen and (max-width : 768px) {	
	.box_pictures{		
		gap: 0;
		.other_image{	
			justify-content: center; gap: 2px;
			.w1{width:min(100%, 320px);}
			.w12{width:calc(100% / 2 - 4px);}
			.w13{width:calc(100% / 3 - 6px);}			
		}		
	}
	.box_map{margin: 0 1em;}
	.article_description{		
		letter-spacing: normal;font-size:inherit;font-weight: normal;
		b{font-weight: bold; }
	}	
}
.fs_large{font-size:large;}