/* Collection filters */

.collection-filters {

	.collection-filters__form {
		
		margin-bottom: 30px;

		@media (max-width: 989px) {
			margin-bottom: 16px;
		}

		.collection-filters__bar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;

			@media (max-width: 989px) {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 12px;
			}

			.collection-filters__count {
				flex-shrink: 0;
				font-weight: 400;

				@media (max-width: 989px) {
					grid-column: 1;
					grid-row: 1;
				}
			}

			.collection-filters__mobile-trigger {
				display: none;

				@media (max-width: 989px) {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					grid-column: 1;
					grid-row: 2;
					border: 1px solid var(--border-white);
					border-radius: 3px;
					height: 40px;
					color: #fff;
					font-family: var(--font-body-family);
					font-weight: unset;
					padding: 0 10px;
					font-size: 16px;
					position: relative;
				}

				.collection-filters__mobile-trigger-icon {
					display: flex;
					flex-direction: column;
					gap: 3px;

					span {
						display: block;
						width: 14px;
						height: 1px;
						background: #fff;
					}
				}

				&[aria-expanded="true"] {
					.collection-filters__mobile-trigger-icon {
						span {
							&:first-child,
							&:nth-child(2){
								display: none;
							}
						}
					}
				}
			}


			.collection-filters__drawer-trigger {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 12px;
				height: 40px;
				padding: 0 10px;
				border: 1px solid var(--border-white);
				border-radius: 3px;
				color: #fff;
				font-family: var(--font-body-family);
				font-weight: unset;
				font-size: 16px;
				margin-right: auto;

				@media (max-width: 989px) {
					width: 100%;
					grid-column: 1;
					grid-row: 2;
					margin-right: 0;
				}

				.collection-filters__drawer-trigger-icon {
					display: flex;
					flex-direction: column;
					gap: 3px;

					span {
						display: block;
						width: 14px;
						height: 1px;
						background: #fff;
					}
				}
			}

			.collection-filters__filters {
				display: flex;
				align-items: center;
				gap: 8px;
				flex: 1;

				/*@media (max-width: 989px) {
					display: none;
					grid-column: 1 / -1;
					flex-direction: column;
					align-items: stretch;
					gap: 6px;
				}*/

				.collection-filters__dropdown {
					position: relative;
					border: 1px solid var(--border-white);
					border-radius: 3px;
					height: 40px;
					padding: 0 10px;
					display: flex;
					align-items: center;
					min-width: 160px;


					/*@media (max-width: 989px) {
						width: 100%;
						height: auto;
						min-height: 40px;
						display: block;
					}*/

					.collection-filters__dropdown-trigger {
						display: flex;
						align-items: center;
						justify-content: space-between;
						cursor: pointer;
						list-style: none;
						width: 100%;
						height: 100%;

						/*@media (max-width: 989px) {
							min-height: 38px;
						}*/

						&::-webkit-details-marker {
							display: none;
						}

						.collection-filters__dropdown-chevron {
							display: flex;
							align-items: center;
							justify-content: center;
							transition: transform 0.2s ease;

							svg {
								display: block;
							}
						}
					}

					.collection-filters__dropdown-content {
						position: absolute;
						top: calc(100% + 5px);
						left: 0;
						z-index: 10;
						min-width: 220px;
						background: var(--color-black);
						border: 1px solid var(--border-white);
						border-radius: 3px;
						padding: 16px;
						display: flex;
						flex-direction: column;
						gap: 7px;
						max-height: 300px;
						overflow: auto;

						/*@media (max-width: 989px) {
							position: static;
							min-width: 0;
							width: 100%;
							border: 0;
							border-top: 1px solid var(--border-white);
							border-radius: 0;
							padding: 12px 0;
						}*/

						.collection-filters__option {
							position: relative;
							display: flex;
							align-items: center;
							gap: 10px;
							cursor: pointer;

							.collection-filters__checkbox-input {
								position: absolute;
								width: 1px;
								height: 1px;
								margin: 0;
								opacity: 0;
								pointer-events: none;

								&:checked + .collection-filters__checkbox {

									&::after {
										opacity: 1;
									}
								}

								&:focus-visible + .collection-filters__checkbox {
									outline: 2px solid var(--color-primary);
									outline-offset: 2px;
								}

								&:disabled + .collection-filters__checkbox {
									cursor: not-allowed;
								}
							}

							.collection-filters__checkbox {
								position: relative;
								display: block;
								width: 18px;
								height: 18px;
								min-width: 18px;
								border: 1px solid var(--border-white);
								border-radius: 2px;

								&::after {
									content: '';
									position: absolute;
									top: 50%;
									left: 50%;
									width: 5px;
									height: 9px;
									border-right: 2px solid var(--color-primary);
									border-bottom: 2px solid var(--color-primary);
									transform: translate(-50%, -60%) rotate(45deg);
									opacity: 0;
								}
							}

							.collection-filters__option-label {
								flex: 1;
							}

							.collection-filters__option-count {
								flex-shrink: 0;
							}

							&.is-disabled {
								opacity: 0.4;
								pointer-events: none;
							}

							&.is-loading {
								opacity: 0.65;
							}
						}
					}

					&[open] {

						.collection-filters__dropdown-trigger {

							.collection-filters__dropdown-chevron {
								transform: rotate(180deg);
							}
						}
					}

					&.collection-filters__dropdown--price {

					}
				}

				.collection-filters__clear-all {
					flex-shrink: 0;
					margin-left: 4px;
					text-decoration: underline;
					text-underline-offset: 2px;

					@media (max-width: 989px) {
						margin: 12px 0 0;
						align-self: flex-start;
					}
				}
			}

			.collection-filters__sort {
				display: flex;
				align-items: center;
				gap: 10px;
				flex-shrink: 0;

				.collection-filters__sort-label {
					flex-shrink: 0;
					font-weight: 400;
				}

				.collection-filters__sort-select-wrap {
					position: relative;

					.collection-filters__sort-select {
						width: 100%;
						appearance: none;
						-webkit-appearance: none;
						border: 1px solid var(--border-white);
						border-radius: 3px;
						height: 40px;
						padding: 0 10px;
						line-height: 1;
						min-width: 220px;
					}

					.collection-filters__sort-chevron {
						position: absolute;
						top: 50%;
						right: 15px;
						transform: translateY(-50%);
						pointer-events: none;

						svg {
							display: block;
						}
					}
				}

				&.collection-filters__sort--desktop {

					@media (max-width: 989px) {
						display: none;
					}
				}

				&.collection-filters__sort--mobile {
					display: none;

					@media (max-width: 989px) {
						display: block;
						width: 100%;
						grid-column: 2;
						grid-row: 2;
					}

					.collection-filters__sort-select-wrap {

						@media (max-width: 989px) {
							width: 100%;
						}

						.collection-filters__sort-select {

							@media (max-width: 989px) {
								min-width: 0;
							}
						}
					}
				}
			}

			.collection-filters__grid-view {
				display: flex;
				align-items: center;
				flex-shrink: 0;

				.collection-filters__grid-view-button {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40px;
					height: 40px;
					border: 1px solid var(--border-white);
					margin-left: -1px;
					transition: .3s all;

					&:first-child {
						margin-left: 0;
						border-radius: 3px 0 0 3px;
					}

					&:last-child {
						border-radius: 0 3px 3px 0;
					}

					&:hover,
					&.is-active {
						position: relative;
						z-index: 1;
						border-color: var(--color-primary);
						background: var(--color-primary);
						color: var(--color-black);

						.collection-filters__grid-view-icon {
							span {
								background: var(--color-black);
							}
						}
					}

					&:focus-visible {
						position: relative;
						z-index: 2;
						outline: 2px solid var(--color-primary);
						outline-offset: 2px;
					}

					.collection-filters__grid-view-icon {
						display: grid;
						grid-template-columns: repeat(var(--grid-columns), 3px);
						gap: 2px;
						align-items: center;
						justify-content: center;

						span {
							display: block;
							width: 2px;
							height: 15px;
							background: #fff;
							border-radius: 100px;
							transition: .3s all;
						}
					}
				}

				&.collection-filters__grid-view--desktop {

					@media (max-width: 989px) {
						display: none;
					}
				}

				&.collection-filters__grid-view--tablet {
					display: none;

					@media (min-width: 768px) and (max-width: 989px) {
						display: flex;
						grid-column: 2;
						grid-row: 1;
						justify-self: end;
					}
				}

				&.collection-filters__grid-view--mobile {
					display: none;

					@media (max-width: 767px) {
						display: flex;
						grid-column: 2;
						grid-row: 1;
						justify-self: end;
					}
				}
			}
		}

		.collection-filters__drawer {
			position: fixed;
			inset: 0;
			z-index: 100;
			visibility: hidden;
			pointer-events: none;
			transition: visibility 0s linear .3s;

			.collection-filters__drawer-overlay {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				background: rgb(0 0 0 / 60%);
				opacity: 0;
				transition: opacity .3s ease;
			}

			.collection-filters__drawer-panel {
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				flex-direction: column;
				width: min(420px, 90vw);
				height: 100%;
				background: var(--color-black);
				transform: translateX(-100%);
				transition: transform .3s ease;
				overflow: hidden;
			}

			.collection-filters__drawer-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 20px;
				padding: 20px;
				flex-shrink: 0;

				.collection-filters__drawer-title {
					margin: 0;
				}

				.collection-filters__drawer-close {
					svg {

					}
				}
			}

			.collection-filters__filters--drawer {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				gap: 0;
				width: 100%;
				overflow-y: auto;
				padding: 0 0 20px;

				.collection-filters__dropdown {
					display: block;
					width: 100%;
					min-width: 0;
					height: auto;
					padding: 0;
					border: 0;
					border-bottom: 1px solid var(--border-white);
					border-radius: 0;

					/* Important: don't turn details into a flex container */
					&[open] {
						display: block;
					}

					.collection-filters__dropdown-trigger {
						width: auto;
						padding: 0 20px;
						height: 52px;
					}

					.collection-filters__dropdown-content {
						position: static;
						width: auto;
						min-width: 0;
						max-height: none;
						padding: 14px 20px 18px;
						border: 0;
						border-radius: 0;
						overflow: visible;
						box-sizing: border-box;
						gap: 10px;
					}
				}

				.collection-filters__clear-all {
					margin: 20px;
					align-self: flex-start;
				}
			}
		}


	}

	&.is-filter-drawer-open {

		.collection-filters__drawer {
			visibility: visible;
			pointer-events: auto;
			transition-delay: 0s;

			.collection-filters__drawer-overlay {
				opacity: 1;
			}

			.collection-filters__drawer-panel {
				transform: translateX(0);
			}
		}
	}

	&.is-filter-open {

		.collection-filters__form {

			.collection-filters__bar {

				.collection-filters__filters {

					@media (max-width: 989px) {
						display: flex;
					}
				}
			}
		}
	}
}


html.collection-filter-drawer-open,
html.collection-filter-drawer-open body {
	overflow: hidden;
}


.main-collection {

	&.is-restore-pending,
	&.is-restoring {
		.main-collection__items {
			visibility: hidden;
		}
	}

	.main-collection__items {
		display: grid;
		grid-template-columns: repeat(var(--products-desktop), minmax(0, 1fr));
		gap: 10px;
		row-gap: 30px;

		@media (max-width: 989px) {
			grid-template-columns: repeat(var(--products-tablet), minmax(0, 1fr));
		}

		@media (max-width: 767px) {
			grid-template-columns: repeat(var(--products-mobile), minmax(0, 1fr));
			row-gap: 16px;
		}

		.main-collection__item {
			min-width: 0;

			.product-card {
				height: 100%;
			}
		}

		.main-collection__empty {
			grid-column: 1 / -1;
		}
	}

	.main-collection__pagination {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin-top: 40px;

		.main-collection__pagination-page,
		.main-collection__pagination-arrow,
		.main-collection__pagination-ellipsis {
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 40px;
			height: 40px;
			border: 1px solid var(--border-white);
			border-radius: 3px;
			transition: .3s all;
		}

		.main-collection__pagination-arrow {

			svg {
				display: block;
			}

			&.main-collection__pagination-arrow--prev {

				svg {
					transform: rotate(90deg);
				}
			}

			&.main-collection__pagination-arrow--next {

				svg {
					transform: rotate(-90deg);
				}
			}
		}

		.is-current,
		.main-collection__pagination-page:hover,
		.main-collection__pagination-arrow:hover,
		.main-collection__pagination-page:hover {
			border-color: var(--color-primary);
			background: var(--color-primary-reduced);
			color: var(--color-primary);
		}
	}

	.main-collection__infinite {
		position: relative;

		.main-collection__infinite-sentinel {
			width: 100%;
			height: 1px;
		}
	}

	.collection--description {

		width: 860px;
		max-width: 100%;
		margin: 100px auto 0;


	}

}