/*Moblie & tablet*/
@media (max-width:  1023px){
	:root{
		--header-height: 68px;
		--header__navbar-height: 0px;
	}
	.hide-on-tablet-mobile{
		display: none;
	}

	.header{
		position: fixed;
		z-index: 10;
		top: 0;
		right: 0;
		left: 0;
	}
	.header__cart-list{
		position: fixed;
		top: var(--header-height);
		right: 0;
		left: 0;
		width: unset;
		padding: 0 calc((100% - 644px) / 2);
	}
	.header__cart-list::after{
		display: none;
	}
	.app__container {
		margin-top: calc(var(--header-height) + var(--header__sort-bar-height));
	}
	.header__sort-bar{
		display: flex;
	}
	.footer__container{
		text-align: center;
	}
	.footer__container-img{
		justify-content: center;
	}
}

/*Table*/
@media (min-width:  740px) and (max-width: 1023px){
	.hide-on-tablet{
		display: none;
	}
	.header__cart{
		text-align: right;
		width: 77px;
	}
	.footer__container{
		text-align: left;
	}
	.footer__container-img{
		justify-content: unset;
	}
}

/*Mobile*/
@media (max-width: 739px) {
	.hide-on-mobile{
		display: none;
	}
	.header__logo{
		width: unset;
		height: unset;
	}
	.header__cart{
		width: unset;
	}
	.header-with-search-icon{
		display: unset;
	}

	.header__search{
		position: fixed;
		top: var(--header-height);
		z-index: 1;
		left: 0;
		right: 0;
		height: var(--header__sort-bar-height);
		padding: 0 16px;
		display: none;
		animation: appearSearch linear 0.3s;
	}

	@keyframes appearSearch {
		from{
			opacity: 0;
			top: calc(var(--header-height) / 2);
		}
		to{
			opacity: 1;
			top: var(--header-height);
		}
	}

	.header__mobile-check:checked ~ .header__search{
		display: flex;
	}

	.header__search-history{
		position: fixed;
		top: calc(var(--header-height) + var(--header__sort-bar-height));
		left: 0;
		width: 100%;
		box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
	}

	.no-margin{
		margin-left: 4px;
		margin-right: 4px;
	}
	.app__content{
		padding-top: 8px;
	}
	.home-category-mobile{
		display: block;
	}
	.header__logo-img{
		width: 120px;
	}


}
