@import url('https://fonts.googleapis.com/css?family=Assistant:300,400,500,700,900&display=block');

:root {
	--main-bg-color: #fff;
	--text-color: #272727;
	--subtext-color: #808080;
	--border-color: #e3e3e3; 
	--shadow-color: rgba(0,0,0,.05); 
	--brand-color: #5c6269;
	--border-radius: .25rem;
	--border-radius-capsule: 3em;
}

@media (prefers-color-scheme: dark) {
	:root {
		--main-bg-color: #272727;
		--text-color: #fff;
		--subtext-color: #ccc;
		--border-color: #444; 
		--shadow-color: rgba(0,0,0,.25); 
		--border-radius: .25rem;
	}
	.baim_header .baim_logo img{
		filter: invert();
	}
}

*:not(input):not(button):not(textarea):not(select){
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; 
}

.price_currency:before{
	content: '₪';
}

html,body{
	background: var(--main-bg-color);
}

html,body,input,textarea,select,button{
	direction: rtl;
	font-size: 14px;
	color: var(--text-color);
	font-family: 'Assistant', sans-serif;
	font-weight: 300;
}

body.admin .login{
	border: 1px solid var(--border-color);
	margin: 2rem auto;
	padding: 2rem;
	max-width: 300px;
	text-align: center;
}
body.admin .login > *{
	display: block;
	margin: 2rem auto;
}
body.admin .login img{
	height: 3rem;
}
body.admin .login input{
	padding: .5rem;
	background: var(--main-bg-color);
}
body.admin .login button{
	-webkit-appearance: none;
	border: none;
	background: var(--brand-color);
	border-radius: var(--border-radius);
	font-weight: 500;
	color: var(--main-bg-color);
	padding: .5rem 2rem;
}
body.admin .error{
	color: red;
}

body.is_splash_screen{
	overflow: hidden;
}
body.is_splash_screen .splash_screen{
	top: 0;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.splash_screen{
	transition: transform .2s, opacity .2s, visibility .2s;
	opacity: 0;
	transform: translateY(-50%);
	visibility: hidden;

	position: fixed;
	z-index: 9999999999;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 2rem;
	background: var(--brand-color);
	text-align: center;
	color: #fff;
}
.splash_screen:after{
	content: '';
	position: absolute;
	z-index: 5;
	top: -20rem;
	left: -5rem;
	right: -5rem;
	bottom: 10rem;
	background: rgba(255,255,255,.1);
	transform: rotate(-10deg);
}
.splash_screen_baim{
	position: absolute;
	top: 1rem;
	left: 1rem;
	height: 1.5rem;
	filter: invert();
}

.splash_screen_container{
	z-index: 50;
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translateX(50%) translateY(-50%);
	width: 100vw;
	height: 100%;
	max-height: 50rem;
	max-width: 25rem;
}
.splash_screen_container > *{
	position: relative;
	z-index: 10;
}

.splash_screen .profile{
	display: block;
	background-repeat: none;
	background-position: center center;
	background-size: cover;
	width: 10rem;
	height: 10rem;
	margin: -.5rem 0;
	border-radius: 50%;
	overflow: hidden;
	margin: 3rem auto 2rem auto;
}
.splash_screen .title{
	margin: 1rem auto;
	display: block;
	font-size: 1.8rem;
	font-weight: 400;
}
.splash_screen .sub_title{
	margin: -1.2rem auto 1rem auto;
	display: block;
	font-size: 1.5rem;
	font-weight: 400;
}
.splash_screen .desc{
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	padding: 9rem 2rem 0rem 2rem;
	max-height: calc( 100vh - 16rem );
	overflow: hidden;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
}

.splash_screen .bottom{
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 1rem;
}

.splash_screen .lets_start,.splash_screen .lets_start_closed{
	display: inline-block;
	font-size: 1.5rem;
	color: #272727;
	background: #fff;
	padding: .75rem 4rem;
	border-radius: 5rem;
	font-weight: 600;
	cursor: pointer;
}
.splash_screen .open_store{
	display: none;
	display: block;
	font-size: 1.1rem;
	padding: 1.5rem  1rem  .5rem;
	font-weight: 500;
}

.baim_header_wrap{
	height: 3.5rem;
}
.baim_header{
	position: fixed;
	z-index: 10000;
	background: var(--main-bg-color);
	top: 0;
	right: 0;
	left: 0;

	direction: ltr;
	padding: .5rem;
	border-bottom: 1px solid var(--border-color);
}
.baim_header > div{
	direction: rtl;
	padding: .5rem;
	display: inline-block;
	vertical-align: middle;
}
.baim_header .baim_logo img{
	height: 1.5rem;
	width: auto;
}
.baim_header .baim_logo{
	width: 5rem;
	text-align: left;
}
.baim_header .brand{
	width: 5rem;
	text-align: right;
}
.baim_header .bar{
	padding: 0;
	width: calc( 100% - 10rem );
	text-align: center;
}
.baim_header_wrap .profile{
	display: inline-block;
	vertical-align: middle;
	background-repeat: none;
	background-position: center center;
	background-size: cover;
	width: 2.5rem;
	height: 2.5rem;
	margin: -.5rem 0;
	border-radius: 50%;
	overflow: hidden;
}
.baim_header_wrap .title{
	display: inline-block;
	vertical-align: middle;
	font-size: 1.1rem;
	font-weight: 400;
	padding: 0 .5rem;
}

header{
	text-align: center;
	padding: 7rem 1rem 1rem;
}

header .profile,
.order_sent .profile{
	display: inline-block;
	background-repeat: none;
	background-position: center center;
	background-size: cover;
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	overflow: hidden;
}

header .title{
	padding: 1rem 1rem 0;
	margin-bottom: 1rem;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--text-color);
}
header .sub_title{
	padding: 0 1rem 1rem;
	margin-top: -1rem;
	font-size: 1.2rem;
	font-weight: 300;
	color: var(--subtext-color);
}


.order_sent .title{
	padding: 1rem;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--brand-color);
}

header .desc,
.popup .desc{
	font-size: 1.1rem;
	padding: 0;
	font-weight: 400;
}
.popup .desc{
	padding: 1rem 2rem;
	text-align: center;
}
.order_sent{
	text-align: center;
	padding: 2rem;
}

header .sticky{
	transition: top .5s;
	position: fixed;
	z-index: 100;
	top: -10rem;
	right: 0;
	left: 0;
	width: 100%;
	background: var(--main-bg-color);
	padding: 1rem;
	text-align: right;
	box-shadow: 0 0 1rem var(--shadow-color);
}
body.is_sticky header .sticky{
	top: 0;
}
header .sticky .container > div{
	display: inline-block;
	vertical-align: middle;
}
header .sticky .profile{
	width: 3rem;
	height: 3rem;
}

main{
	padding-bottom: calc( 4.5rem + ( env(safe-area-inset-bottom) * 2 ) );
}

footer{
	background: var(--brand-color);
	transition: bottom .2s, padding .2s;
	position: fixed;
	bottom: -5rem;
	right: 0;
	left: 0;
	font-weight: 500;
	font-size: 1.2rem;
}

footer .container{
	max-width: initial;
	cursor: pointer;
	color: var(--main-bg-color);
	padding: 1rem;
}

footer .container > div{
	display: inline-block;
	vertical-align: middle;
	width: 33.329%;
	text-align: center;
}
footer .container > div:first-child{
	text-align: right;	
}
footer .container > div:last-child{
	text-align: left;
}

.has_items footer{
	bottom: 0;
	padding-bottom: calc( env(safe-area-inset-bottom) * 2 );
}


.nav_search{
	text-align: center;
	/*padding: 1rem;*/
}
.nav_search input{
	display: inline-block;
	padding: .5rem 2.5rem .5rem .5rem;
	margin-right: -2rem;
	border: none;
	background: var(--main-bg-color);	
	/*border-bottom: 1px solid var(--border-color);*/
}

.nav_filters{
	overflow: hidden;
	position: relative;
}

.nav_filters{
	position: fixed;
	z-index: 200;
	top: 3.8rem;
	right: 0;
	left: 0;
	padding: .5rem 0;
	background: var(--main-bg-color);
	border-bottom: 1px solid var(--border-color);
}

.nav_filters .scroll{
	display: block;
	width: 100%;
	box-sizing: border-box;
	white-space: nowrap;
	padding: 0 1rem 0 5rem;
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
	transform: translate3d(0,0,0);
}
.nav_filters .scroll::-webkit-scrollbar{
	display: none !important;
}
/*.nav_filters .scroll:last-child{
	padding-top: .5rem;
	border-top: 1px solid var(--border-color);
	margin-top: 1rem;
	margin-bottom: -.5rem;
}*/
.nav_filters:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0;
	box-shadow: 0 0 .5rem .5rem var(--main-bg-color);
}
.nav_filters:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0;
	box-shadow: 0 0 .5rem .5rem var(--main-bg-color);
}
.nav_filters_group{
	display: block;
    white-space: nowrap;
}
body:not(.has_items) .nav_filter.type_cart{
	display: none;
}
.nav_filter{
	display: inline-block;
	padding: .5rem .25rem;
}
.nav_filter input{
	border: 0;
	clip: rect(0,0,0,0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.nav_filter label{
	display: block;
	padding: .5rem 1rem;
	font-size: 1.2rem;
	font-weight: 400;
	border-radius: var(--border-radius-capsule);
	background: var(--shadow-color);
	color: var(--text-color);
}
.nav_filter input:checked + label{
	background: var(--brand-color);
	color: #fff;
}

.nav_filter.type_cart label{
	font-weight: 400;
}

.catalog_empty{
	display: none;
	padding: calc( 100vh/2 - 6rem ) 1rem;
	text-align: center;
	margin: auto;
	color: var(--subtext-color);
}
.catalog_empty i{
	padding-bottom: 1rem;
	font-size: 2rem;
}


.container{
	margin: auto;
	max-width: 720px;
}
.category{
	padding: 1rem 0;
}
.category_name{
	padding: 1.5rem 1rem;
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--brand-color);
}
.category_desc{
	margin-top: -1.5rem;
	padding: 0 1rem 1.5rem;
	font-size: 1.2rem;
	font-weight: 400;
}

.item{
	position: relative;
	margin: 0 1rem;
	border-top: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: 1.5rem 0;
}
.item_list .item:last-child{
	border-bottom: 1px solid var(--border-color);
}

.item.is_incart:after{
	content: '';
	position: absolute;
	top: 0;
	right: -1rem;
	bottom: 0;
	width: .3rem;
	background: var(--brand-color);
}

.item.is_incart .qty{
	display: inline-block;
	color: var(--brand-color);
}
.item.is_incart .qty:before{
	content: 'x';
	margin: 0 .5rem;
}

.item > div{
	display: inline-block;
	vertical-align: top;
}
.item .item_stamp{
	direction: ltr;
	display: inline-block;
	padding: .2rem .5rem;
	font-weight: 400;
	font-size: .8rem;
	background: var(--brand-color);
	color: var(--main-bg-color);
	border-radius: var(--border-radius);
}
.item .item_stamp i{
	display: inline-block;
	line-height: 1em;
	vertical-align: middle;
	font-size: .6em;
	margin-right: .4em;
}
.item .item_name{
	font-size: 1.2rem;
	font-weight: 400;
	margin-bottom: .5rem;
}
.item .item_name > *{
	display: inline-block;
	vertical-align: middle;
}
.item .item_desc{
	color: var(--subtext-color);
	margin-bottom: .5rem;
}
.item .item_tags{
	color: var(--subtext-color);
	margin-bottom: .5rem;
	font-size: .8rem;
}
.item .item_info{
	width: calc( 100% - 9rem );
}
.item .item_img{
	width: 8rem;
	margin-right: 1rem;
	overflow: hidden;
	border-radius: var(--border-radius);
}
.item .item_img img{
	display: block;
	width: 100%;
}

.item .item_img.zoom{
	position: fixed;
	z-index: 50;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: var(--main-bg-color);
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;
	margin: 0;
	border-radius: 0;
	display: flex;
}
.item .item_img.zoom img{
	width: initial;
	margin: auto;
}
.item .item_img.zoom:after{
	position: fixed;
	top: 0;
	right: 0;
	padding: 2rem 1rem;
	content: '‹ חזור';
	color: var(--text-color);
	font-size: 1rem;
	cursor: pointer;
}


.item .item_img.zoom,
.item .item_img.zoom:after{
	top: 8rem;
}

.item .item_price{
	font-weight: 400;
	color: var(--brand-color);
}
.item .item_price > *{
	vertical-align: middle;
	margin-left: .5rem;
}
.item .item_price .old_price{
	text-decoration: line-through;
	color: var(--subtext-color);
}
.item .item_price:not(.has_old_price) .old_price{
	display: none;
}
.item .item_qty{
	display: inline-block;
	margin-top: 1rem;
	border-radius: var(--border-radius-capsule);
	overflow: hidden;
}
.item .item_qty > *{
	display: inline-block;
	vertical-align: middle;
}
.item .item_qty input{
	display: none;
}
.item .item_qty i{
	cursor: pointer;
	padding: 2em 3em;
	font-size: .5rem;
	background: var(--shadow-color);
}
.item .item_qty i:first-child{
	border-left: 1px solid var(--border-color);
}

.is_outofstock .item_qty{
	border: 1px solid var(--brand-color);
}
.is_outofstock .item_qty:after{
	content: 'אזל מהמלאי';
	display: block;
	background: var(--main-bg-color);
	color: var(--brand-color);
	padding: .6rem 1rem;
	font-weight: 700;
}
.is_outofstock .item_qty > *{
	display: none !important;
}

.item:not(.is_incart) .item_qty i:first-child{
	display: none;
}
.item:not(.is_incart) .item_qty i:last-child{
	padding-right: 3.25rem;
	padding-left: 3.25rem;
}
.item .item_qty i:last-child{
	color: #fff;
	background: var(--brand-color);
}


.btns{
	display: block;
	padding: 1rem;
}
.item .btns{
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: -.5rem;
	margin-right: -.2rem;
}
.btn{
	cursor: pointer;
	background: var(--brand-color);
	color: #fff;
	border-radius: var(--border-radius);
	padding: .5rem 1rem;
	margin: .2rem;
	display: inline-block;
	text-decoration: none;
}

.read_more{
	transition: max-height .5s;
	position: relative;
	max-height: 10.5rem;
	padding-bottom: 2rem !important;
	overflow: hidden;
}
.read_more:after{
	transition: opacity .5s;
	content: '';
	position: absolute;
	z-index: 10;
	bottom: 0;
	right: 0;
	left: 0;
	height: 0;
	box-shadow: 0 0 2rem 3.5rem var(--main-bg-color)
}
.read_more .read_more_btn{
	transition: top .5s, opacity .5s;
	position: absolute;
	z-index: 20;
	bottom: 0;
	right: 0;
	left: 0;
	text-decoration: underline;
	color: var(--brand-color);
	cursor: pointer;
}

.read_more.is_open{
	max-height: 100rem;
}
.read_more.is_open:after{
	opacity: 0;
}
.read_more.is_open .read_more_btn{
	/*opacity: 0;*/
	/*top: 100%;*/
}


.popup{
	z-index: 999999999;
	position: fixed;
	bottom: 0;
	left: calc( (100% - 720px) / 2 );
	background: var(--main-bg-color);
	border-radius: .5rem .5rem 0 0;
	width: 100%;
	max-width: 720px;
	margin: auto;
	top: 100%;
	transition: top .2s, box-shadow .2s;
}

body.popup_open .popup{
	top: 1rem;
	box-shadow: 0 0 0 200rem rgba(0,0,0,.8);
}

.popup .header{
	display: block;
	padding: 1rem;
	border-bottom: 1px solid var(--border-color);
	text-align: center;
}
.popup .header > div{
	display: inline-block;
	padding: 1rem;
	vertical-align: middle;
	width: 60%;
}
.popup .header > div:first-child{
	text-align: right;
	width: 20%;
}
.popup .header > div:last-child{
	text-align: left;
	width: 20%;
}
.popup .header .close{
	cursor: pointer;
}
.popup .header .title{
	font-size: 1.5rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.popup .body{
	height: calc( 100% - 6rem + 2px );
	-webkit-overflow-scrolling: touch;
	overflow: auto;
	padding: 1rem;
}
.popup .body .desc{
	text-align: center;
}

.popup .body input,
.popup .body select,
.popup .body textarea,
.popup .body button{
	display: inline-block;
	width: calc( 100% - 2rem );
	padding: 1rem;
	margin: 1rem;
	border: none;
	background: var(--main-bg-color);	
	border-bottom: 1px solid var(--border-color);
}
.popup .body input:first-child{
	font-weight: 400;
}
.popup .body .w_50{
	width: calc( 50% - 2rem );
}
.popup .body .img_preview{
	display: block;
	margin: auto;
	max-height: 10rem;
}
.popup .body button{
	-webkit-appearance: none;
	border: none;
	background: var(--brand-color);
	border-radius: var(--border-radius);
	font-weight: 500;
	color: var(--main-bg-color);
}

.cart_recommendations_items_title{
	margin-top: 2rem;
	padding: 1rem;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--brand-color);
}

.cart_items_title{
	padding: 1rem;
	text-align: center;
	font-size: 1.2rem;
}
.cart_items_outofstock_msg{
	display: block;
	padding: 0 1rem 1rem;
	text-align: center;
	font-size: 1.2rem;
	color: var(--brand-color);
	font-weight: 700;
}
.cart_items_totals{
	border-top: 1px solid var(--border-color);
	padding: 1rem;
	text-align: center;
	font-size: 1.2rem;
}

label.error{
	margin: 2rem;
	color: var(--brand-color);
}

.hide{
	display: none;
}


@media only screen and (max-width: 720px){
	.popup{ left: 0; }
}