@layer mobile, desktop;

@layer mobile {
html {
	font-family: 'Roboto Condensed', sans-serif;
	/* font-family: 'Roboto', sans-serif; */
	/* scroll-snap-type: x mandatory; */
	/* scroll-behavior: smooth; */
	scroll-padding-top: 4em;
}

body {
	margin: 0 auto;
	/* max-width: fit-content; */
	/* display: flex; */
	/* justify-content: center; */
	z-index: 1;
	/* scroll-behavior: smooth; */
}

fieldset {
	border: none;
	margin: 0;
	padding: 0;
}
.screen-container {
	display: grid;
	grid-template-columns: clamp(100px, 100vw, 400px) clamp(200px, 100vw, 800px);
	gap: 8px;
	/* width: 100vw; */
	height: 100svh;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-snap-stop: always;

	.screen {
		scroll-snap-align: start;
 		overflow-y: auto;
  		scroll-behavior: smooth;
	}
}



.navbar-wrapper {
	padding: 5em 8px;
	
	h1 {
		padding: 0 24px;
		margin: 0;
	}
	
	.logo {
		width: 200px;
		margin: 4em 1.5em;
	}

	box-sizing: border-box;
}

.navbar {
	display: grid;
	gap: 8px;

	ol {
		& li::marker {
			color: silver;
		}
	}


	.navbar-item {
		color: inherit;
		padding: 8px;
		/* padding: 16px; */
		display: block;
		border-radius: 4px;
		text-decoration: none;
		/* background-color: whitesmoke; */

		span {
			display: block;
		}

		.ru {

		}

		.uz {
			color: gray;
			text-transform: lowercase;
			font-size: smaller;
		}
		
	}

	.navbar-item:active {
		background-color: #c9727227;
	}
}

.absent-product-plate {
	color: silver;
	& .photo {
		filter: grayscale();
		opacity: .5;
	}

	& .out-of-stock {
		padding: 0 16px;
		color: black;
		width: max-content;
		font-weight: 700;
		display: flex;
		align-items: center;
		border-radius: 8px;
		background-color: whitesmoke;
	}
}

.catalog-product-plate, .absent-product-plate, .price-product-plate {
	display: grid;
	grid-template-columns: 140px auto;
	/* grid-template-rows: 140px auto; */
	gap: 6px;
	box-sizing: border-box;

	/* padding: 16px 0; */
	/* border-bottom: 2px solid whitesmoke; */

	.info {
		display: grid;
		grid-template-rows: auto auto 30px 44px;
		gap: 2px;
		padding: 4px 8px 0 0;
	}

	.photo-wrapper {
		position: relative;
		background-color: whitesmoke;
		border-radius: 8px;
		position: relative;

		& .photo {
			width: 100%;
			height: 100%;
			aspect-ratio: 1/1;
			object-fit: contain;
			object-position: center;
			box-sizing: border-box;
			mix-blend-mode: darken;
		}
	}

	.first-line {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.code {
		position: absolute;
		right: 0;
		color: silver;
		font-size: small;
		padding: 6px;
	}
	
	.sku {
		/* font-family: 'Open Sans'; */
		font-weight: 500;
	}

	.sticker {
		background-color: #FFEBEE;
		color: #EF5350;
		padding: 2px 6px;
		font-size: small;
		border-radius: 4px;
	}
	
	.name {
		font-size: small;
	}

	.prices {
		align-self: end;
		display: flex;
		align-items: center;
		gap: 6px;

		& .recommended-retail-price {
			display: inline;
			font-size: small;
			color: silver;

		}

		& .separator {
			color: silver;
		}
		
		& .client-price {
			display: inline;
			font-weight: 700;
			font-size: large;
		}
	}
	
	

	.quantity-stepper {
		/* margin: 8px 0 0 0; */
		display: flex;
		background-color: whitesmoke;
		border-radius: 8px;
		width: min-content;
	
		& button {
			background: none;
			border: none;
			padding: 0 1.5em;
		}
	
		& input {
			background: none;
			border: none;
			width: 40px;
			padding: 0;
			text-align: center;
		}
	}
}


.price-product-plate {
	.info {
		/* grid-template-rows: auto auto 30px; */
	}
}





.product-grid {
	display: grid;
	/* grid-template-columns: 1fr 1fr; */
	grid-template-columns: 1fr;
	gap: 8px;
	padding: 0 8px;
	margin: 0 0 2em 0;


	legend {
		h2 {
			span {
				display: block;
			}
	
			.ru {
				color: inherit;
			}
	
			.uz {
				color: gray;
				font-size: .8em;
				text-transform: lowercase;
			}
		}
	}
}

.sticky-buttons {
	/* z-index: 2; */
	/* position: sticky; */
	/* bottom: 0; */
	display: flex;
	justify-content: space-between;
	padding: 1em;
	pointer-events: none;

	& * {
		pointer-events: all;
	}

	& .button-menu {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1em;
		/* box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); */
		border-radius: 80px;
		background-color: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(8px);
		/* background-color: white; */
		width: 51px;
		aspect-ratio: 1/1;
		color: white;
		border: none;
		font: inherit;
		box-sizing: border-box;
		& img {
			filter: invert();
			width: 100%;
			/* padding: 8px; */
			/* height: 20px; */
		}
	}
}

.button-submit {
	padding: 1em 2em;
	border-radius: 80px;
	background-color: black;
	background-color: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(8px);
	color: white;
	border: none;
	font: inherit;
}

.--pseudo-anchor {
	user-select: none;
}


header {
	position: fixed;
	height: 100vh;
	overflow-y: auto;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	background-color: white;
}

main {
	background-color: white;
	.logo {
		width: clamp(200px, 100%, 400px);
		padding: 5em 5em 4em 5em;
		box-sizing: border-box;
	}
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	pointer-events: none;
}

body {
	&:has(#navbar:target) {
		a[href='#navbar'] { display: none; }
	}
	&:has(#navbar:not(:target)) {
		a[href='#navbar-close'] { display: none; }
	}
}

#navbar {
	--state: 100%;
	transform: translateY(var(--state));
	transition: .2s;
	&:target { --state: 0; }
}
}

@layer desktop {
@media only screen and (min-width: 1000px) {
	a[href='#navbar'], a[href='#navbar-close'] { display: none }

	.sticky-buttons {
		justify-content: end;
		padding: 32px 64px;
	}

	html {
		scroll-behavior: smooth;
	}

	body {
		display: grid;
		grid-template-columns: 400px auto;
		gap: 32px;
		max-width: 1200px;
	}

	header {
		position: sticky;
		top: 0;
		transform: unset;
		scrollbar-width: none;
	}

	main {
		padding-top: 128px;
	}

  }
}