/** Shopify CDN: Minification failed

Line 967:4 Cannot use type selector "--left" directly after nesting selector "&"
Line 971:4 Cannot use type selector "--right" directly after nesting selector "&"

**/
.collection-custom--wrapper{
	transition: opacity .2s;

	display: flex;
	flex-wrap: wrap;
	position: relative;
	padding-bottom: 32px;

	&.not-loaded{ opacity: 0; }

	.collection-heading{
		width: 100%;
		margin-bottom: 40px;
	}
	.filters-aside{ width: 300px; margin-right: 64px;}
	.main-content{ flex: 1; }

	&::after{
		content:'';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-color: #fff;
		opacity: 0;
		transition: opacity .2s;
		pointer-events: none;
	}
}

.collection-custom--wrapper.loading{
	pointer-events: none;

	&::after{
		opacity: .5;
	}
}

.gateway-links-container {
	position: relative;
	--w: 120px;

	.gateway-links__wrapper {

		display: flex;
		align-items: center;
		gap: 16px;
		padding: 0 var(--page-padding);
		margin-bottom: 32px;
		overflow-x: auto;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
		justify-content: safe center;

		&::-webkit-scrollbar {
			display: none;
		}

		.gateway-link {
			flex-shrink: 0;
			text-decoration: none;
			color: inherit;

			.img {
				display: block;
				width: calc(var(--w) * 2);
				height: var(--w);
				border-radius: 16px;
				overflow: hidden;
				background-color: rgb(var(--color-secondary-background));

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.title {
				display: block;
				margin-top: 16px;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			&.gateway-link--previous {
				width: 120px;
				height: 48px;
				border: 1px solid #E7EAEC;
				border-radius: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: calc((var(--w) / 2) - 24px);
				align-self: flex-start;
			}

			&.gateway-link--current {
				width: calc(var(--w) + 24px);
				margin-right: 8px;
				padding-right: 24px;

				&.has-child{ border-right: 1px solid #D9D9D9; }

				.img {
					width: var(--w);
					padding: 2px;
					border: 2px solid;

					img {
						border-radius: 14px;
					}
				}

				.title {
					font-weight: 800;
				}
			}

		}
	}

	.gateway-arrow {
		appearance: none;
		border: none;
		padding: 0;
		margin: 0;
		font: inherit;
		color: inherit;
		position: absolute;
		top: calc(var(--w) / 2);
		transform: translateY(-50%);
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: white;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 1;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0.2s ease;

		&.visible {
			opacity: 1;
			visibility: visible;
		}

		&.gateway-arrow--left { left: 16px; }
		&.gateway-arrow--right { right: 16px; }

		svg {
			width: 16px;
			height: 16px;
			pointer-events: none;
		}

		&:hover {
			box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
		}
	}

	.gateway-gradient {
		display: block !important;
		position: absolute;
		top: 0;
		bottom: 0;
		width: 120px;
		pointer-events: none;
		z-index: 0;
		visibility: hidden;

		&.visible {
			visibility: visible;
		}

		&.gateway-gradient--left {
			left: 0;
			background: linear-gradient(90deg, #fff 20%, #fff0 100%);
		}

		&.gateway-gradient--right {
			right: 0;
			background: linear-gradient(-90deg, #fff 20%, #fff0 100%);
		}
	}
}

.filters{

	.filter{

		.filter-search{
			position: sticky;
			top: 0;
			z-index: 1;
			background-color: rgb(var(--color-background));
			padding-bottom: 4px;

			input{
				width: 100%;
				padding: 8px 12px;
				border: 1px solid rgb(var(--color-border));
				border-radius: 6px;
				background-color: rgb(var(--color-background));
				color: inherit;
				font: inherit;
				font-size: 1.4rem;
				line-height: 1;

				&:focus{
					outline: none;
					border-color: rgb(var(--color-foreground));
				}

				&::placeholder{
					color: rgba(var(--color-foreground), 0.5);
				}
			}
		}

		.title{
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 16px 0;
			cursor: pointer;

			span{
				flex: 1;
				font-weight: 800;
			}
		}

		.values{
			display: none;
			flex-direction: column;
			gap: 12px;
			padding-bottom: 12px;

			.value{
				display: flex;
				align-items: center;
				gap: 12px;

				.checkbox{
					--w: 20px;
					display: flex !important;
					justify-content: center;
					align-items: center;
					width: var(--w);
					height: var(--w);
					border-radius: 4px;
					border: 1px solid rgb(var(--color-border));
				}

				span{
					flex: 1;
					padding-top: .3em;
				}

				&.active{

					.checkbox{
						background-color: var(--red);
						color: #FFF;
						border-color: var(--red);

						&::after{
							content:'';
							display: block;
							width: calc(var(--w) * .6);
							height: calc(var(--w) * .4);
							border-bottom: 3px solid;
							border-left: 3px solid;
							border-radius: 1px;
							rotate: -45deg;
							translate: 0px -1px;
						}
					}

					span{
						font-weight: 800;
					}
				}
			}
		}

		.values.color{
			flex-direction: row;
			flex-wrap: wrap;
			gap: 12px !important;

			.value{
				width: 32px;
				height: 32px;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #d1c6b5;
				background-color: var(--bg);
				border: 3px solid rgb(var(--color-background));
				box-shadow: 0px 0px 0 2px #d1c6b5;

				&.active{ box-shadow: 0px 0px 0 2px rgb(var(--color-foreground)); }
			}
		}

		.values.price-range {
			flex-direction: column;
			gap: 20px;

			.range-slider {
				position: relative;
				width: 100%;
				height: 6px;

				.range-track {
					display: block;
					position: absolute;
					width: 100%;
					height: 100%;
					background-color: rgb(var(--color-secondary-background));
					border-radius: 3px;
				}

				.range-selected {
					display: block;
					position: absolute;
					height: 100%;
					background-color: rgb(var(--color-foreground));
					border-radius: 3px;
				}

				.range-input {
					position: absolute;
					width: 100%;
					height: 100%;
					-webkit-appearance: none;
					appearance: none;
					background: transparent;
					pointer-events: none;
					top: 50%;
					transform: translateY(-50%);

					&::-webkit-slider-thumb {
						-webkit-appearance: none;
						appearance: none;
						width: 16px;
						height: 16px;
						background-color: rgb(var(--color-background));
						border: 3px solid rgb(var(--color-foreground));
						border-radius: 50%;
						cursor: pointer;
						pointer-events: auto;
					}

					&::-moz-range-thumb {
						width: 16px;
						height: 16px;
						background-color: rgb(var(--color-background));
						border: 3px solid rgb(var(--color-foreground));
						border-radius: 50%;
						cursor: pointer;
						pointer-events: auto;
					}
				}
			}

			.price-inputs {
				display: flex;
				justify-content: space-between;
				gap: 16px;

				.price-input {
					min-width: 72px;
					max-width: 80px;
					height: 48px;
					border: 1px solid rgb(var(--color-border));
					border-radius: 8px;
					padding: 0 6px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 4px;

					label {
						font-size: 1.2rem;
						color: rgba(var(--color-foreground), 0.5);
					}

					.input-grp{
						display: flex;
						align-items: center;

						input {
							width: calc(100% - 16px);
							height: 1.6rem;
							padding: 0;
							border: 0;
							font-size: 1.6rem;
							background-color: rgb(var(--color-background));
							-moz-appearance: textfield;
							color: inherit;

							&::-webkit-outer-spin-button,
							&::-webkit-inner-spin-button {
								-webkit-appearance: none;
								margin: 0;
							}

							&:focus-within{ outline: 0; }
						}

						.currency{ line-height: 1; }
					}

					&.active{
						border: 3px solid rgb(var(--color-foreground));
					}
				}
			}
		}

		&.active{
			.title svg{ rotate: 180deg; }
			.values{ display: flex; }
		}
	}
}

.toolbar{
	margin: 0 0 32px;
	
	.row--main{
		display: flex;
		align-items: center;
		gap: 8px;

		.products-count{
			font-size: 1.4rem;
			display: none;
		}

		.filters{
			display: flex;
			gap: 8px;

			.filter{
				display: none;
				position: relative;

				.title{
					font-size: 1.4rem;
					gap: 12px;
					padding: 0px 16px;
					height: 40px;
					border-radius: 8px;
					background-color: rgb(var(--color-secondary-background));
				}

				.values{
					position: absolute;
					z-index: 1;
					top: calc(100% + 8px);
					left: 0;
					min-width: 100%;
					width: max-content;
					background-color: rgb(var(--color-background));
					box-shadow: 0 19px 20px 0 rgba(13, 43, 64, 0.15);
					border: 1px solid rgb(var(--color-border));
					border-radius: 8px;
					padding: 12px;
					display: none;

					&.list{
						flex-direction: column;
						max-height: 400px;
						overflow-y: auto;
						scrollbar-width: none;
						-ms-overflow-style: none;

						&::-webkit-scrollbar{
							display: none;
						}
					}

					&.price-range .price-inputs{
						gap: 32px;
					}
				}

				&.active{
					.title{ outline: 1px solid; }
					.values{ display: flex; }
				}
				&:has(.value.active) .title{
					background-color: #063647;
					color: #fff;
				}
			}
		}

		.filter-drawer--opener{
			all: unset;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
			font-weight: 800;
			width: 52px;
			height: 40px;
			border-radius: 8px;
			background-color: rgb(var(--color-secondary-background));
			line-height: 1;
			cursor: pointer;

			&.active{ outline: 1px solid; }
		}

		.col-selector{
			flex: 1;
			display: none;
			align-items: center;
			justify-content: flex-end;
			gap: 8px;
			margin: 0 4px;

			.nb{
				margin-top: 3px;
				font-size: 1.4rem;
				font-weight: 800;
			}

			input{
				accent-color: #063647;
				background: rgb(var(--color-secondary-background));
			}
		}

		.sort{
			position: relative;
			margin-left: 4px;

			select{
				all: unset;
				padding: 0 36px 0 16px;
				height: 40px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				background-color: rgb(var(--color-secondary-background));
				font-weight: 800;
				font-size: 1.4rem;
				border-radius: 8px;
			}

			svg{
				position: absolute;
				right: 16px;
				top: 50%;
				translate: 0 -50%;
			}
		}
	}

	.row--active{
		margin-top: 32px;
		display: flex;
		align-items: center;
		gap: 8px;

		.active-filter{
			padding: 0 8px;
			height: 32px;
			border-radius: 16px;
			border: 1px solid rgb(var(--color-border));
			display: flex;
			align-items: center;
			gap: 4px;
			font-weight: 800;
			font-size: 1.4rem;

			span{
				margin-top: 1px;
			}
		}

		.active-filter.color{
			padding-right: 4px;

			span{
				display: block;
				width: 24px;
				height: 24px;
				background-color: var(--bg);
				border-radius: 50%;
			}
		}

		.clear-filters{
			all: unset;
			font-size: 1.4rem;
			text-decoration: underline;
			cursor: pointer;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 32px;
		}
	}
}

.filters-drawer{
	
	.bg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 20;
		background-color: #000;
		opacity: .2;
		display: none;
	}

	.inner{
		position: fixed;
		top: 0;
		right: 0;
		width: 90%;
		max-width: 500px;
		height: 100%;
		z-index: 21;
		background-color: rgb(var(--color-background));
		transform: translateX(50px);
		opacity: 0;
		transition: transform .3s, opacity .3s;
		display: flex;
		flex-direction: column;

		.heading{
			padding: 12px 24px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgb(var(--color-border));

			.title{
				text-align: center;
				flex: 1;
			}

			.close{
				width: 48px;
				height: 48px;
				background-color: rgb(var(--color-secondary-background));
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}
		}

		.filters{
			flex: 1;
			padding: 24px 24px;
			overflow-y: scroll;

			.filter{
				border-bottom: 1px solid rgb(var(--color-border));

				.title{

					span{ font-size: 1.8rem; }
				}
			}
		}

		.actions{
			padding: 24px 24px;
			border-top: 1px solid rgb(var(--color-border));
			display: flex;
			gap: 12px;

			button{
				flex: 1;
				padding-inline: 12px;
			}

			.clear-filters{
				background-color: rgb(var(--color-secondary-background));
				border-color: rgb(var(--color-secondary-background));
			}

			.close{
				background-color: var(--red);
				border-color: var(--red);
				color: #fff;
			}
		}
	}

	&.active{

		.bg{
			display: block;
		}

		.inner{
			transform: translateX(0);
			opacity: 1;
		}
	}

	&:not(.active){

		.inner{
			pointer-events: none;
		}
	}
}

.filters-aside{
	display: none;

	.heading{
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 4px;

		.title{
			font-size: 1.8rem;
			font-weight: 800;
		}

		.clear-filters{
            all: unset;
            font-size: 1.4rem;
            text-decoration: underline;
            cursor: pointer;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 32px;
		}
	}

	.filters{
		margin-top: 24px;

		.filter{
			border-bottom: 1px solid rgb(var(--color-border));

			.title{
				min-height: 60px;

				span{
					font-weight: 500;
					font-size: 1.8rem;
				}
			}

			.values.list{
				padding-bottom: 24px;
				gap: 20px;
			}
		}

		.filter.is-offer{
			.title{
				display: none;
			}

			.values{
				display: flex;
			}
		}
	}
}

.products{

	.products-count{ font-size: 1.4rem; }

	.container{
		margin-top: 32px;
		display: grid;
		grid-auto-flow: dense;
		gap: 24px;

		&[data-col="2"]{ grid-template-columns: repeat(2, 1fr); }
		&[data-col="3"]{ grid-template-columns: repeat(3, 1fr); }
		&[data-col="4"]{ grid-template-columns: repeat(4, 1fr); }
		&[data-col="5"]{ grid-template-columns: repeat(5, 1fr); }
		&[data-col="6"]{ grid-template-columns: repeat(6, 1fr); }

		.custom-card{
			position: relative;
			display: flex;
			border-radius: 16px;
			overflow: hidden;
			min-height: 300px;
			background: var(--bg);
			background-size: cover;
			padding: 8px;

			.img{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;

				img{
					object-fit: cover;
					width: 100%;
					height: 100%;
				}
			}

			.container{
				margin: 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
				gap: 24px;
				border-radius: 8px;
				background: rgba(13, 43, 64, 0.05);
				backdrop-filter: blur(25.75px);
				padding: 24px;

				.inner{
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					gap: 24px;

					*{ margin: 0; color: #fff; }

					.tagline, .content{
						font-size: 1.4rem;
					}

					.title{
						line-height: 1.2;
					}

					.button{
						align-self: flex-start;
						margin-top: auto;
						margin-block-start: 0;
					}
				}
			}

			&.small{
				align-items: flex-end;
			}

			&.big{
				grid-column: span 3;

				.container{
					height: 100%;
					max-width: 30%;

					.title{
						font-size: var(--font-h3-size);
					}
				}
			}
		}
	}

	.load-more--wrapper{
		margin-top: 48px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.results{
			font-size: 1.4rem;
			text-align: center;

			.progress{
				margin-top: 16px;
				width: 210px;
				height: 8px;
				border-radius: 4px;
				background-color: rgb(var(--color-border));
				display: block;
				position: relative;
				
				&:before{
					content:'';
					display: block;
					width: var(--w);
					height: 100%;
					background-color: #5E8C66;
					border-radius: inherit;
					position: absolute;
					left: 0;
					top: 0;
				}
			}
		}

		.load-more{
			font-size: 1.4rem;
			margin-top: 32px;
		}
	}
}

/* Mobile */
@media(max-width: 879px){

	.gateway-links-container {
		--w: 60px;

		.gateway-links__wrapper {

			.gateway-link{

				&.gateway-link--previous{
					width: 48px;
					height: 48px;
					border-radius: 16px;
				}

				span.title{
					font-size: 14px;
				}
			}
		}
		
		.gateway-arrow {
			width: 28px;
			height: 28px;

			svg {
				width: 20px;
				height: 20px;
			}

			&--left {
				left: 8px;
			}

			&--right {
				right: 8px;
			}
		}

		.gateway-gradient {
			width: 80px;
		}
	}

	.products .container{
		grid-template-columns: repeat(2, 1fr);

		*:nth-child(3n){
			grid-column: span 2;
		}

		.custom-card{

			.container{
				gap: 16px;
				
				.inner{
					gap: 16px;
				}

				.btn{
					padding: 0 12px;
					height: 32px;
				}
			}

			&.small{

				.container{
					padding: 16px;
				}
			}

			&.big{
				min-height: 450px;
				grid-column: span 2;
				align-items: flex-start;
				
				.container{
					height: unset;
					width: 100%;
					max-width: unset;
				}
			}
		}
	}

}

/* Tablette */
@media(min-width: 880px){

	.toolbar{

		.row--main{

			.filter:nth-of-type(1),
			.filter:nth-of-type(2),
			.filter:nth-of-type(3){
				display: block;
			}

			.col-selector{ display: flex; }
		}
	}
}

/* Petit PC */
@media(min-width: 1000px){

	.gateway-links-container {

		.gateway-links__wrapper {
			margin-bottom: 40px;
			padding-bottom: 40px;
			border-bottom: 1px solid #E7EAEC;
		}
	}
}

/* Grand PC */
@media(min-width: 1600px){

	.toolbar{
		margin: 0 0 24px;

		.row--main{
			.products-count{ display: block; }
			.filters, .filter-drawer--opener{ display: none !important; }
		}

		.row--active{
			margin-top: 4px;
		}
	}

	.filters-aside{
		display: block;
	}

	.products{

		.products-count{ display: none; }

		.container{
			margin-top: 0;
		}
	}

}

/* Ecran HD+4K */
@media(min-width: 1920px){
}

.section--collection-header-custom{
	display: flex;
	flex-direction: column;
	gap: 88px;

	.title-desc{
		display: flex;
		align-items: flex-start;
		gap: 24px;

		> *{
			flex: 1;
		}

		.description{
			font-size: 1.8rem;
		}
	}

	.image{
		width: 100%;
		height: 40vw;
		aspect-ratio: 16 / 9;
		border-radius: 16px;
		overflow: hidden;
		
		img{
			object-fit: cover;
			width: 100%;
			height: 100%;
			aspect-ratio: unset;
		}
	}
}

@media(max-width: 767.98px){

	.section--collection-header-custom{
		gap: 16px;

		.title-desc{
			flex-direction: column;
			gap: 16px;

			> *{
				flex: 1;
			}
		}

		.image{
			width: 100%;
			height: 40vw;
			aspect-ratio: 16 / 9;
			border-radius: 16px;
			overflow: hidden;
			
			img{
				object-fit: cover;
				width: 100%;
				height: 100%;
				aspect-ratio: unset;
			}
		}
	}

}