$easing: cubic-bezier(.16,.89,.61,.98);

@import "detail";
@import "browse";
@import "basket_popup";
@import "scss/oscar/catalogue/reviews";

// Standard Oscar imports
@import "scss/oscar/mixins";
@import "scss/oscar/basket";
@import "scss/oscar/checkout";
@import "scss/oscar/customer/accountpage";

.basket, #onstepcheckout{
	@import "scss/oscar/catalogue/price";
}

header{
	.scrolled{
		backdrop-filter: unset !important;
	}
}

.product{
	overflow: hidden;
	height: 100%;
	.product-image{
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		min-height: 350px;
		width: 100%;
		overflow: hidden;
		border-radius: $border-radius;
		@include media-breakpoint-down(lg){
			min-height: 250px;
		}
		@if $body-bg == #ffffff{
			background-color: #ededed;
			picture{
				background-color: #ededed;
			}
		}@else if $body-bg == #fff{
			background-color: #ededed;
			picture{
				background-color: #ededed;
			}
		}@else if $body-bg == white{
			background-color: #ededed;
			picture{
				background-color: #ededed;
			}
		}@else{
			background-color: #fff;
			picture{
				background-color: #fff;
			}
		}
		picture{
			img{
				mix-blend-mode: darken;
				height: 350px;
				width: 100%;
				object-fit: contain;
				@include media-breakpoint-down(lg){
					height: 250px;
				}
			}
		}
		.add-icon{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, 50%);
			z-index: 3;
			width: 50px;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: $body-bg;
			color: $body-color;
			opacity: 0;
			transition: transform .75s $easing, opacity .25s ease;
			@if $border-radius >= 0{
				border-radius: 100%;
			}@else{
				border-radius: 0;
			}
		}
		picture{
			transition: 1.5s $easing;
		}
		&.same-height{
			@include media-breakpoint-up(lg){
				height: $image-min-height;
				img{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					object-fit: contain;
					z-index: 1;
				}
			}
		}
		.rating{
			position: absolute;
			top: 1rem;
			right: 1rem;
			display: block;
			background: $body-bg;
			padding: .5rem 1rem;
			border-radius: 30px;
			font-size: .75rem;
			font-weight: 600;
			z-index: 3;
			i{
				font-size: .75rem;
				margin-right: .1rem;
				color: #f59e0a;
			}
		}
	}
	.product-info{
		@include media-breakpoint-down(lg){
			display: flex;
			flex-direction: column-reverse;
		}
		.product-title{
			text-decoration: unset;
			font-size: 1rem;
			font-weight: $headings-font-weight;
			margin-top: .25rem;
			display: block;
			color: color-contrast($body-bg);
			@include media-breakpoint-down(lg){
				font-size: 1rem;
				margin-top: 0;
			}
		}
		.product-addtobasket{
			font-size: 1rem;
			.stock_price{
				@include media-breakpoint-up(lg){
					margin-top: 1rem;
				}
				@include media-breakpoint-down(lg){
					margin-top: .5rem;
					display: flex;
					flex-wrap: wrap;
					flex-direction: column-reverse;
					font-size: 1rem;
				}
				& > span{
					display: inline-block;
				}
				.first-session-price{
					font-weight: 600;
					color: color-contrast($body-bg);
					margin-right: .5rem;
				}
				.second-session-price{
					opacity: .65;
					font-size: 70%;
				}
			}
		}
	}
	&:hover{
		.add-icon{
			transform: translate(-50%, -50%);
			opacity: 1;
		}
	}
	&:not(:hover){
		.product-image{
			picture{
				transform: scale(.9);
			}
		}
	}
}

.products{
	& > div{
		@media screen and (min-width: 991px){
			margin-bottom: 2rem;
		}
		@media screen and (max-width: 991px){
			margin-bottom: 1rem;
		}
	}
}

.login-wrapper{
	border-radius: $border-radius;
}

.accountpage-wrapper{
	@include media-breakpoint-up(lg){
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	.tabcontent{
		margin-top: 0 !important;
	}
}


.block-Products{
	overflow: hidden;
	.products-block{
		.container{
			position: relative;
			padding-bottom: 4rem;
			.tns-controls{
				position: absolute;
				bottom: 0;
				right: 1rem;
				gap: 1rem;
				display: flex;
				z-index: 9999999;
				button{
					border: 0;
					background: $primary;
					color: color-contrast($primary);
					min-width: 2.5rem;
					min-height: 2.5rem;
					border-radius: 100%;
				}
			}
		}
		hr{
			background: lighten($dark, 70%);
			margin: 2rem 0;
		}
	}
	.tns-ovh.tns-ah{
		overflow: visible;
	}
	.product-image{
		picture{
			img{
				animation: LoadingIn .1s ease;
			}
		}
	}
}

@keyframes LoadingIn{
	from{ transform: scale(.5); opacity: 0; }
	to{ transform: scale(1); opacity: 1; }
}

.image_with_text{
	.lead-wrapper{
		.d-lg-flex.mt-5{
			flex-wrap: wrap;
		}
	}
}

.categories-block{
	overflow: hidden;
	.tns-ovh{
		overflow: visible;
	}
	.container{
		position: relative;
		padding-bottom: 4rem;
		.tns-controls{
			position: absolute;
			bottom: 0;
			right: 1rem;
			gap: 1rem;
			display: flex;
			button{
				border: 0;
				background: $primary;
				color: color-contrast($primary);
				width: 2.5rem;
				height: 2.5rem;
				border-radius: 100%;
			}
		}
	}
	.category-slider-wrapper{
		.cat{
			display: block;
			text-decoration: unset;
			color: black;
			position: relative;
			height: 450px;
			width: 100%;
			overflow: hidden;
			border-radius: $border-radius;
			img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				z-index: 1;
				transition: 2.5s cubic-bezier(.19,.89,.25,1.03);
			}
			.cat-name{
				position: absolute;
				bottom: 1rem;
				left: 50%;
				transform: translateX(-50%);
				width: auto;
				display: inline-block;
				z-index: 3;
				padding: .25rem 1rem;
				background: white;
				color: black;
				border-radius: $border-radius;
				transition: .75s cubic-bezier(.19,.89,.25,1.03);
			}
			&:hover{
				img{
					transform: scale(1.25);
				}
				.cat-name{
					transform: translateX(-50%) translateY(-50%) scale(1.2);
				}
			}
		}
	}
}

.stretched-link{
	position: relative;
}