.collection_header_transparent {
	& .section-header {
		position: sticky;
		background: transparent;
		&.scrolled-past-header {
			background-color: var(--Blue-3);
		}
	}
}

.collection__container {
	display: flex;
	align-items: flex-start;
	gap: var(--gap-l);
	& h1 {
		font-size: 32px;
		margin-bottom: var(--gap-xs);
		text-transform: uppercase;
	}
	& .h6 {
		font-weight: 700;
		letter-spacing: 0.5px;
		margin-bottom: 0;
		color: var(--Navy);
	}
}

.collection__filter_container {
	flex-basis: 380px;
	display: flex;
	flex-flow: column;
	gap: var(--gap-s);
	padding: var(--gap-s);
	background: var(--Blue-2);
	border-radius: 20px;
	& .category_list_wrapper {
		padding: var(--gap-s);
		background: #FFFFFF;
		border-radius: 10px;
		& .filter_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: var(--Red);
			text-transform: uppercase;
			letter-spacing: 0.5px;
			font-weight: 700;
			margin-bottom: var(--gap-xs);
			&:after {
				content: '';
				aspect-ratio: 7/12;
				width: 7px;
				height: 12px;
				background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' fill='none' viewBox='0 0 7 12'%3E%3Cpath fill='%23e1251b' fill-rule='evenodd' d='m1.289.239 4.805 5.185a.86.86 0 0 1 0 1.152L1.29 11.761a.717.717 0 0 1-1.068 0 .86.86 0 0 1 0-1.152L4.42 6 .22 1.39A.86.86 0 0 1 .22.24a.717.717 0 0 1 1.068 0' clip-rule='evenodd'/%3E%3C/svg%3E");
				transition: all 0.3s ease;
			}
		}
	}
	& .category_list {
		display: flex;
		flex-flow: column;
		gap: 2px;
		& > div {
			& a {
				display: block;
				color: var(--Navy);
				font-size: 16px;
				font-style: normal;
				font-weight: 700;
				line-height: 25px;
				padding: 10px;
				box-sizing: border-box;
				border-radius: 5px;
				transition: all 0.3s ease;
				&:hover {
					background: var(--Blue-3);
					color: var(--Blue-1);
				}
			}
			&.active {
				a {
					background: var(--Blue-3);
					color: var(--Blue-1);
				}
			}
		}
	}
}

.product-grid__container {
	flex: 1;
	& .collection_description {
		& p {
			color: var(--Navy);
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	& .product-grid {
		grid-gap: var(--gap-m) var(--gap-s);
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		margin: 0;
		& .grid__item {
			width: 100%;
			max-width: 100%;
		}
	}
}

.style_product-catalogue {
	& .collection__container {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		gap: 0;
		padding: 0 var(--gap-m);
		& h1 {
			margin-bottom: 0;
		}
	}
	& .product-grid__header {
		margin: var(--gap-m) 0;
		text-align: center;
		max-width: 1240px;
		& .collection_description {
			text-align: center;
			margin-top: var(--gap-s);
		}
	}
	& .collection__filter_container {
		background: none;
		padding: 0;
		flex-basis: 0;
		& .category_list_wrapper {
			padding: 0;
			& .filter_title {
				color: var(--Navy);
				justify-content: center;
				&:after {
					content: none;
				}
			}
		}
		& .category_list {
			flex-flow: row wrap;
			justify-content: center;
			gap: var(--gap-xs);
			& > div {
				& a {
					padding: 12px 20px;
					border-radius: 50px;
					border: 2px solid var(--Navy);
					&:hover {
						background: var(--Red);
						border-color: var(--Red);
						color: #FFFFFF;
					}
				}
				&.active {
					& a {
						background: var(--Red);
						border-color: var(--Red);
						color: #FFFFFF;
					}
				}
			}
		}
	}
	& .product-grid__container {
		width: 100%;
		margin: var(--gap-m) 0 0;
		padding: var(--padding-s) var(--width-l);
		border-radius: 30px;
		& .quick-add {
			display: none
		}
		& .product_pack_size {
			display: none;
		}
		& .product_tags {
			display: none;
		}
		& .product_rating {
			display: none;
		}
		& a.pagination__item.pagination__item--next,
		& a.pagination__item.pagination__item--prev {
			color: #FFFFFF;
		}
		& .pagination__item {
			color: #FFFFFF;
			&.light {
				opacity: 1;
			}
			&:hover {
				color: var(--Blue-1);
			}
		}
		& .pagination__item--current {
			color: var(--Blue-1);
			border-color: var(--Blue-1);
		}
	}
}

.collection {
	& .loading-overlay {
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: none;
		width: 100%;
		padding: 0 1.5rem;
		opacity: 0.7;
	}
	&.loading {
		.loading-overlay {
			display: block;
		}
	}
}

@media (width < 1600px) {
	.product-grid__container {
		& .product-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	.style_product-catalogue {
		& .product-grid__container {
			& .product-grid {
				grid-template-columns: repeat(3, 1fr);
			}
		}
	}
}

@media (width < 1280px) {
	.collection__container {
		flex-wrap: wrap;
	}
	.collection__filter_container {
		flex-basis: 100%;
	}
	.product-grid__container {
		& .product-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}
	.collection__filter_container {
		& .h6 {
			display: none;
		}
		& .category_list_wrapper {
			& .filter_title {
				gap: var(--gap-s);
				margin: 0;
				&:hover {
					cursor: pointer;
				}
			}
			&.active_category_list {
				& .filter_title {
					&:after {
						transform: rotate(90deg);
					}
				}
				& .category_list {
					display: flex;
					margin-top: var(--gap-xs);
					height: max-content;
					opacity: 1;
				}
			}
		}
		& .category_list {
			display: none;
			flex-flow: row wrap;
			justify-content: center;
			gap: var(--gap-xs);
			height: 0;
			opacity: 0;
			margin-top: 0;
			transition: 0.1s;
			& > div {
				& a {
					border-radius: 50px;
					padding: 10px 15px;
				}
			}
		}
	}
	.style_product-catalogue {
		& .collection__container {
			& h1 {
				text-align: center;
			}
		}
		& .product-grid__container {
			& .product-grid {
				grid-template-columns: repeat(2, 1fr);
			}
		}
		& .collection__filter_container {
			& .category_list_wrapper {
				width: 100%;
				max-width: 100vw; /* Safety lock */
				overflow: hidden;
				position: relative;
				-webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
				mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
				& .filter_title {
					margin-bottom: var(--gap-xs);
				}
			}
			& .category_list {
				display: flex;
				flex-direction: unset;
				justify-content: flex-start;
				flex-wrap: nowrap;
				overflow-x: auto;
				-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
				scroll-snap-type: x proximity;
				gap: 10px;
				padding: 10px 30px;
				list-style: none;
				scrollbar-width: none;
				height: auto;
				opacity: 1;
				width: 100%;
				& div {
					& a {
						white-space: nowrap;
					}
				}
				.scroll-menu::-webkit-scrollbar {
					display: none;
				}
				.scroll-menu {
					-ms-overflow-style: none;
					scrollbar-width: none;
				}
			}
		}
	}
}

@media (width < 1024px) {
	.product-grid__container {
		& .product-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}

@media (width < 768px) {
	.collection__filter_container {
		& .category_list_wrapper {
			& .filter_title {
				font-size: 21px;
			}
		}
	}
	.style_product-catalogue {
		& .product-grid__container {
			& .product-grid {
				grid-template-columns: repeat(1, 1fr);
			}
		}
	}
}

@media (width < 640px) {
	.product-grid__container {
		& .product-grid {
			grid-template-columns: 1fr !important;
		}
	}
}

@media (width < 640px) {
	.quick-add {
		flex-direction: column;
		text-align: center;
	}
	.quick-add .button {
		justify-content: center;
		font-size: 12px;
		padding: 10px;
	}
}

@media screen and (max-width: 749px) {
	.collection {
		& .loading-overlay {
			top: 0;
			right: 0;
		}
	}
}

@media screen and (min-width: 750px) {
	.collection {
		& .loading-overlay {
			left: 0;
			padding-left: 5rem;
			padding-right: 5rem;
		}
	}
}