@charset "UTF-8"; 
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url(var.css);
:root{	--cnt-img-visible: 3;}
*{margin: 0;padding:0; box-sizing: border-box;}
body{font-family: -apple-system, system-ui, sans-serif; min-height: 100vh;}
header{background: #505e6b; user-select: none;	padding: 4px 0.5em;color:white;
	.header_top{display: flex; flex-direction:row ;justify-content: space-between; align-items: center;}	
	h1,h2{font-size:1.2rem; text-align:center;}	
}
.weather{font-size:1.3em;color:#eacf00;}
#box_data{	
	display:flex;flex-direction:column;align-items:center;min-height: calc(100vh - 2em - 196px);max-width:768px;margin: 0 auto;
	gap:0.5em;}
.size_content{
	max-width:768px; margin: 0 auto;
}
details{
	transition:all .2s;
}
/*block hello message background*/
.hello{		
	background-repeat: no-repeat;background-position:center;background-size: cover;
    width: 100%;min-height:45vh;
	color: #ffffff;user-select:none;
	h2{	font-size: 1.2rem;margin-bottom: 0.5em;}
	div{font-size:min(5vw, 1rem);background-color: #00000091; padding: 1em 0.5em;width: min(100%, 600px);}
}
/* меню категорий главной страницы ------------------------------------------ */
.menu_category{
	position: sticky; position: --webkit-sticky; z-index: 10; top:0; width: 100%;max-width: 100%;overflow-y: auto;scrollbar-width: none;background-color:#505e6b;/* #545454;*/	color:white;
	ol{display: flex; list-style-type: none; padding: 6px 5px 6px 0;}
	li{white-space: nowrap; border-radius: 5px; padding: 2px 10px;}	
	input[type='radio']{display: none;}
	@media screen and (max-width : 768px) {		
		.menu_category{	padding: 0.5em;	}	
	}
}	
.menu_category li:has(input:checked){		
	color: #000000; background-color: #eaebef;
}
.menu_category li:hover{cursor:pointer; background-color:#697c8e;transition:all .2s}
.rmarker::after{
	content:'\276F';/*\276F ❯ 27EB 226B ≫   \203A ›*/
	color:#fff;	position:absolute;	top:7px;right:3px;	font-size:x-large;
}
/* меню со типа радио ------------------------------------------ */
.menu_radio{
	width: fit-content;
	ol{display: flex; gap: 1em; list-style-type: none;padding: 1em;}
	li{color: #0000cd;border-bottom: 2px solid transparent;}
	input{display: none;}	
}	
.menu_radio li:has(input:checked){	border-bottom-color: #0000cd;}
.menu_radio li:hover{cursor:pointer; border-bottom-color: #c7c7c7;}
/* ------------------------------------------------------------ */
.link_grey{font-size: small;  color: grey; text-decoration: none;}
.link_grey:hover{text-decoration: underline;}
.fon_modal_transparent{display: none;position: absolute;top: 0px;left: 0px;flex-direction: column;justify-content: center;align-content: center;height: 97vh;width: 100vw;margin: 0 auto;z-index: 20;}
.fon_modal_dark{display: none; backdrop-filter: blur(1px); background-color: #0000002e;position: fixed;top: 0px;left: 0px;flex-direction: column;justify-content: center;align-content: center;height: 100vh;width: 100vw;margin: 0 auto;z-index: 20;}
#map_modal{
	background-color: #474747d9;color: #fff;margin: auto; max-width: 600px;width: -webkit-fill-available;padding: 0;border: 1px solid #474747;
	.map_modal_capt{font-size: large;	margin: 0.5em;}
	.box_map{width:100%;	padding-left: 1px;}
	.map_modal_title{padding-left: 0.5em; height: 1em; font-family: monospace; color: #bfbfbf;}	
}
#map_modal::backdrop{background:rgba(0,0,0,0.5);}	
/* диалоговый контейнер */
#webcam_window{
	width: -webkit-fill-available;  margin: auto 0.5em;  border: none;   background: #000000; max-width: 768px;padding:0 5px;}	
#modal_image{
	margin: auto; border: none;background: #fff; border-radius: 12px;
	padding: 38px 5px 20px 5px;
	/*border: 2px solid black;*/
	box-shadow: 3px 3px 16px 3px #515151;
	max-width: calc(100% - 1em);
}
#show_more{	text-align: center; margin: 2em 0;cursor:pointer;}
.modal_img_slider{
	display: flex; overflow-y: auto; gap: 3px; align-items: center;width:480px; height: fit-content;max-height: 80vh;
	img{object-fit: contain;min-width: 100%;height: auto;}
}
/* маркер на карту */
.marker_for_map{
	font-family: system-ui;
	background-color: #ffec7b;
	padding: 0 4px;color: #000000;border-radius: 5px;border: 1px solid #cecece;transform: translateY(10px);margin-top: 10px;
}
.marker_for_map::before{content:'\1F4CD';font-size: 24px;position: absolute;left: calc(40% - 10px);top: -25px;}

/* ===============объявления========================= */
.announcement{	
	position: relative; display: flex; flex-direction: column; justify-content: flex-start;  align-items: center;  gap: 0.5em;
    padding: 0.5em;	border-radius: 8px;	background: linear-gradient(to top, #ffffff 75%, #eaebef);	
    color: inherit;	width:-webkit-fill-available;
    max-width: 768px;margin-top:2px;
	.pictogramma{position:absolute;left: 6px; top: 5px;opacity: 0.4;}
	.wrapper_images{display: flex; gap: 1px; align-items: center;margin: 0 1em;}
	img{object-fit: cover; border-radius: 5px;}
	.wrapper_images.baner{img{ max-height: 20vh; width:100%;object-fit: contain;}}	
	.wrapper_images.gallery{
		max-width:  calc(var(--w-boxfoto-article) * 3 + 2px ); overflow-y: hidden;
		scrollbar-width: thin;
		img{ width:  var(--w-boxfoto-article); height: var(--h-boxfoto-article); }
	}
	.wrapper_images.creative{overflow: hidden; img{ width:  var(--w-boxfoto-article); height: var(--h-boxfoto-article);}}	
	.turn_left{transform: rotate(-25deg);}
	.turn_right{transform: rotate(25deg);}
	.box_info{display: flex;flex-direction: column; align-items: center; width: -webkit-fill-available;}
	.article_price{		
		font-family: system-ui, sans-serif;	margin: 0 1em;width: -webkit-fill-available;text-align:right;font-size: larger;font-weight: 500;color:var(--cl-price);
		[data-currency], [data-comment]{font-size: small; text-transform: uppercase;}	
	}	
	.article_name{
		position: relative;padding: 0.5em 30px 3px 30px;
		font-family: var(--font-headername), sans-serif, system-ui;font-weight:var(--font-weight-caption); font-size: 1.2em;width: -webkit-fill-available;text-align:center;letter-spacing: 2px;-webkit-line-clamp: 2;text-overflow: ellipsis;
	}		
	.discounter{
		display:none; position: absolute; z-index:5;		
		background-image:url(../img_system/discount-icon.svg);background-repeat: no-repeat;background-position:center;background-size: cover; right: 5px; top: 35px; width: 2em;height:2em; opacity:0.7;				
	}	
	.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: 11px; top: 11px; width: 1.3em;height: 1.3em;opacity:0.7;		
		input{display:none;}
	}
	.liker:has(input:checked){background-image:url(../img_system/heart_red.svg);}		
	.article_descript{
		font-family: var(--font-descript-short);display: -webkit-box;				
		margin: 0.5em 1em;	-webkit-box-orient: vertical;	-webkit-line-clamp: 4;	color: #333333; max-height: 6em;text-overflow: ellipsis; overflow: hidden;
    }	
	.article_adress{font-size: small;   color: #425997; text-indent: 1em;}
	.for_pc{display:block;}
	.for_mobile{display:none;}	
	.work_time{	color:#333333;}
}
.announcement:hover{}
.announcement::after{		
	content: attr(data-id); position: absolute;  display:inline-block; right: 15px;  bottom: 11px;width: 1em;height: 1em;	font-size: small; opacity:0.2;font-weight: normal;		
}
.announcement.visible{transform: scale(1); margin-top:2px;opacity:1;}

#box_last_view{.gallerey{display:flex;width: 100%; overflow-x: auto; gap:4px;}}
.article_lastv{
	display:block;width:calc(100% / 6 - 4px);min-width:calc(100% / 6 - 4px);background-color:#ececec;
	font-size:small;  border: 1px solid lightgrey;
    border-radius: 4px;  padding:0;  
	figure{text-align:center;}
	figcaption{
		display: -webkit-box;   -webkit-box-orient: vertical;-webkit-line-clamp: 4;text-overflow: ellipsis; overflow: hidden;text-align:center;padding: 2px;   overflow-wrap: break-word;        
	}
	img{width: calc(100% - 4px);object-fit: cover;height: auto;aspect-ratio: 1 / 1;border-radius: 4px 4px 0 0;}
	
}
@media screen and (max-width : 1280px) {		
	
}
@media screen and (max-width : 1024px) {		
	.announcement{.article_name{letter-spacing: normal;}}		
}
/*если вход с мобильного*/
@media screen and (max-width : 768px) {		
	.but_icon_capt{display:none;}
	.modal_img_slider{display: flex; overflow-y: auto; gap: 3px; align-items: center;width:360px; 
		img{object-fit: cover;}
	}
	.fx_end_space{justify-content: space-evenly;}
	#map_modal{	margin: auto 5px; }		
	.announcement{		
		padding:0 0 0.5em 0; border-radius: unset;		
		.wrapper_images.gallery{ max-width:  calc(var(--w-boxfoto-article-768) * 3 + 2px );}		
		.wrapper_images.gallery img, .wrapper_images.creative img{		
			min-width: var(--w-boxfoto-article-768); width:  var(--w-boxfoto-article-768);	height: var(--h-boxfoto-article-768); 
		}		
		.article_name{letter-spacing: normal;}	
		.article_descript{text-align: justify;}
		.for_mobile{display:flex;}		
		.for_pc{display:none;}
	}	
	.announcement:hover{/*border-color:#a9a9a9;transform:none;*/}
	.article_lastv{width:calc(100% / 4 - 4px); min-width:calc(100% / 4 - 4px);	}
	
}
/*-------------------------------------------------*/
@media screen and (max-width: 400px) {	
	.announcement{				
		.wrap_box_foto{	max-width: 100%; }
		.box_foto{	width: 110px; }
	}	
}