@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

html {
	background-image: url("../img/paper.png");
	min-height: 100vh;
	font-family: 'Roboto', sans-serif; 
}

body, html {
	padding: 0;
	margin: 0;
}

/* 212 * 1 + 12 */
main {
	position: relative; 
	margin-top: 50px; 
	left: 50%; 
	margin-left: -150px;
	width: 300px;
	margin-bottom: 6px;
}

a {
	background-color: transparent;
	color: black;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.item {
	width: 300px;
	height: 300px;
	margin: 6px 0;
	display: inline-flex; 
	position: relative; 
  	overflow: hidden;
  	border-radius: 10px;
  	opacity: 1;
  	transition: opacity 200ms;
  	cursor: pointer;

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}

/* 212 * 2 + 12 */
@media screen and (min-width: 450px) {
    main {
        margin-left: calc(212px * -2 / 2);
		width: calc(212px * 2);
    }
    .item {
		width: 200px;
		height: 200px;
		margin: 6px;
	}
}

/* 212 * 3 + 12 */
@media screen and (min-width: 662px) {
    main {
        margin-left: calc(212px * -3 / 2);
		width: calc(212px * 3);
    }
}

/* 212 * 4 + 12 */
@media screen and (min-width: 874px) {
    main {
        margin-left: calc(212px * -4 / 2);
		width: calc(212px * 4);
    }
}

/* 212 * 5 + 12 */
@media screen and (min-width: 1086px) {
    main {
        margin-left: calc(212px * -5 / 2);
		width: calc(212px * 5);
    }
}

footer {
	padding: 50px 0 60px 0;
	text-align: center;
	font-weight: 200;
	font-size: .8rem;
}

.item .product {
	opacity: 1;
	z-index: 3; 
	position: relative;
	background-size: cover;
	height: 100%; 
	width: 100%;
	margin: 0; 
	vertical-align: middle;
	filter: blur(0);
	transform: scale(1);
	transition: filter 200ms, transform 200ms, opacity 200ms;
}

.item:before {
	content: '';
	animation-duration: 1800ms;
  	animation-name: rotate;
  	animation-iteration-count: infinite;
  	animation-timing-function: linear;
  	animation-fill-mode: both;
  	opacity: 0;
  	pointer-events: none;
  	user-select: none;
  	-webkit-user-select: none;
  	position: absolute; 
  	top: 50%; 
  	left: 50%;
  	margin: -20px 0 0 -20px;
  	width: 40px;
  	height: 40px;
  	background-size: 40px 40px;
  	background-image: url('../img/load.png');
  	transition: opacity 200ms;
}

.item.loading:before {
	opacity: .6;
}

.item:after {
	opacity: 1;
	content: '';
	border-radius: 10px; 
	box-shadow: inset 3px 3px 15px rgba(0, 0, 0, .3), 1px 1px 0 rgb(255, 255, 255), inset 1px 1px 1px rgba(0, 0, 0, .06); 
	position: absolute; 
	height: 100%; 
	width: 100%; 
	top: 0; 
	left: 0; 
	z-index: 4; 
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0);
	transition: box-shadow 200ms, background-color 200ms, opacity 200ms;
}

.item:hover:after {
	box-shadow: inset 3px 3px 40px rgba(0, 0, 0, 1), 1px 1px 0 rgb(255, 255, 255), inset 1px 1px 1px rgba(0, 0, 0, .06); 
	background-color: rgba(0, 0, 0, .6);
}

.item.unavailable:hover:after {
	box-shadow: inset 3px 3px 40px rgba(0, 0, 0, .6), 1px 1px 0 rgb(255, 255, 255), inset 1px 1px 1px rgba(0, 0, 0, .06); 
}

.item.loading {
	cursor: default;
}

.item.loading:after, .item.loading .product {
	opacity: 0;
}

.item.unavailable .product {
	filter: grayscale(1) contrast(.5) brightness(1.3);
}

.item:hover .product {
	filter: blur(4px);
	transform: scale(1.1);
}

.item:hover.unavailable .product {
	filter: grayscale(1) contrast(.5) brightness(1.3) blur(1px);
}

.item.loading .overlay {
	display: none;
}

.item .overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	transform: scale(.95);
	transition: opacity 200ms, transform 200ms;
}

.item:hover .overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 5;
	pointer-events: none;
	opacity: 1;
	transform: scale(1);
}

.item .overlay .title {
	height: calc(100% - 40px);
	font-size: 1.3rem;
	font-weight: 500;
	align-items: center;
	justify-content: center;
	display: flex;
}

.item .price {
	height: 60px;
	bottom: 0;
	z-index: 6;
	background: linear-gradient(0deg,rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 100%);
}

.item.unavailable .price {
	background: linear-gradient(0deg,rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 100%);
}

.item .price .txt {
	position: relative;
}

.item .price:before {
	content: '';
	position: absolute;
	top: 10px;
	left: 50%;
	margin-left: -40px;
	width: 80px;
	height: 35px;
	background-size: 80px 35px;
	opacity: 0.8;
	transition: opacity 200ms;
	filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.7)) saturate(0.9);
}

.item .price.p1:before {
	background-image: url('../img/price/1.png?s=1');
}
.item .price.p2:before {
	background-image: url('../img/price/2.png?s=1');
}
.item .price.p3:before {
	background-image: url('../img/price/3.png?s=1');
}
.item .price.p4:before {
	background-image: url('../img/price/4.png?s=1');
}

.item .price.t1:before {
	transform: scaleX(1) scaleY(1);
}
.item .price.t2:before {
	transform: scaleX(-1) scaleY(1);
}
.item .price.t3:before {
	transform: scaleX(1) scaleY(-1);
}
.item .price.t4:before {
	transform: scaleX(-1) scaleY(-1);
}

.item:hover .price:before {
	opacity: 0;
}

.item.unavailable .price:before, .item.soon .price:before {
	filter: grayscale(1) contrast(.5) brightness(0.4);
}

.item.loading .price {
	opacity: 0;
}

.item .overlay .title, .item .price {
	position: absolute;
	width: 100%;
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
	color: white;
}

@keyframes rotate {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}