/* ================================================
Component: Retail Merch Gallery (Swiper Carousel)
================================================ */
:is(body, .is-preview) {
	.retail-merch-gallery {
		overflow: hidden;
		padding-bottom:30px;
	}
	.outer-retail-merch-gallery {
		position:relative;

		&.bg-navy {
			&:before {
				background-color: rgba(60, 69, 89, .25);
			}
			.retail-merch-gallery__carousel {
				.swiper-button-next, .swiper-button-prev {
					background-color: rgba(60, 69, 89, .25);

					&:hover, &:focus-visible {
						background-color: rgba(60, 69, 89, 1);

						svg {
							path {
								stroke: white;
							}
						}
					}
					svg {
						path {
							stroke: rgba(60, 69, 89, 1);
						}
					}
				}
			}
		}
		&.bg-tan {
			&:before {
				background-color: rgba(215, 207, 182, .5);
			}
			.retail-merch-gallery__carousel {
				.swiper-button-next, .swiper-button-prev {
					background-color: rgba(215, 207, 182, .5);

					&:hover, &:focus-visible {
						background-color: rgba(215, 207, 182, 1);

						svg {
							path {
								stroke: white;
							}
						}
					}
					svg {
						path {
							stroke: rgba(60, 69, 89, 1);
						}
					}
				}
			}
		}
		&.bg-yellow {
			&:before {
				background-color: rgba(244, 179, 53, .25);
			}
			.retail-merch-gallery__carousel {
				.swiper-button-next, .swiper-button-prev {
					background-color: rgba(244, 179, 53, .25);

					&:hover, &:focus-visible {
						background-color: rgba(244, 179, 53, 1);

						svg {
							path {
								stroke: white;
							}
						}
					}
					svg {
						path {
							stroke: rgba(60, 69, 89, 1);
						}
					}
				}
			}
		}
		&.bg-green {
			&:before {
				background-color: rgba(112, 191, 74, .25);
			}
			.retail-merch-gallery__carousel {
				.swiper-button-next, .swiper-button-prev {
					background-color: rgba(112, 191, 74, .25);

					&:hover, &:focus-visible {
						background-color: rgba(112, 191, 74, 1);

						svg {
							path {
								stroke: white;
							}
						}
					}
					svg {
						path {
							stroke: rgba(36, 69, 23, 1);
						}
					}
				}
			}
		}
		&.bg-dark-green {
			&:before {
				background-color: rgba(36, 69, 23, .25);
			}
			.retail-merch-gallery__carousel {
				.swiper-button-next, .swiper-button-prev {
					background-color: rgba(36, 69, 23, .25);

					&:hover, &:focus-visible {
						background-color: rgba(36, 69, 23, 1);

						svg {
							path {
								stroke: white;
							}
						}
					}
					svg {
						path {
							stroke: rgba(36, 69, 23, 1);
						}
					}
				}
			}
		}
		&.bg-red {
			&:before {
				background-color: rgba(195, 60, 50, .25);
			}
			.retail-merch-gallery__carousel {
				.swiper-button-next, .swiper-button-prev {
					background-color: rgba(195, 60, 50, .25);

					&:hover, &:focus-visible {
						background-color: rgba(195, 60, 50, 1);

						svg {
							path {
								stroke: white;
							}
						}
					}
					svg {
						path {
							stroke: rgba(195, 60, 50, 1);
						}
					}
				}
			}
		}
		&.bg-brown {
			&:before {
				background-color: rgba(88, 69, 71, .25);
			}
			.retail-merch-gallery__carousel {
				.swiper-button-next, .swiper-button-prev {
					background-color: rgba(88, 69, 71, .25);

					&:hover, &:focus-visible {
						background-color: rgba(88, 69, 71, 1);

						svg {
							path {
								stroke: white;
							}
						}
					}
					svg {
						path {
							stroke: rgba(88, 69, 71, 1);
						}
					}
				}
			}
		}
		&.bg-gray {
			&:before {
				background-color: rgba(125, 125, 125, .25);
			}
			.retail-merch-gallery__carousel {
				.swiper-button-next, .swiper-button-prev {
					background-color: rgba(125, 125, 125, .25);

					&:hover, &:focus-visible {
						background-color: rgba(125, 125, 125, 1);

						svg {
							path {
								stroke: white;
							}
						}
					}
					svg {
						path {
							stroke: rgba(100, 100, 100, 1);
						}
					}
				}
			}
		}
	}
	.outer-retail-merch-gallery:before {
		content:'';
		mix-blend-mode: multiply;
		height: 205px;
		width:100%;
		position:absolute;
		left:0;
		bottom:-46px;
		display:none;
	}
	.retail-merch-gallery__carousel {
		padding-top: 65px;

		@media screen and (max-width: 576px) {
			padding-top: 0;
			padding-bottom: 65px;
		}
		.swiper-navigation {
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			gap: 15px;

			@media screen and (max-width: 1400px) {
				right: 25px;
			}
			@media screen and (max-width: 768px) {
				right: 16px;
			}
			@media screen and (max-width: 576px) {
				top: auto;
				right: auto;
				bottom: 0;
				left: 0;
			}
		}
		.swiper-button-next,
		.swiper-button-prev {
			position: relative;
			top: auto;
			right: auto;
			bottom: auto;
			left: auto;
			width: 40px;
			height: 40px;
			margin: 0;
			border: none;
			padding: 0;
			mix-blend-mode: multiply;
			border-radius: 50%;
			transition: .2s ease-in-out;

			&:after {
				display: none;
			}
			svg {
				width: 14px;
				height: 16px;
				transform: rotate(90deg);

				path {
					transition: .2s ease-in-out;
				}
			}
		}
		.swiper-button-next {
			svg {
				transform: rotate(-90deg);
			}
		}
	}
	.retail-merch-gallery__slide {
		width: calc(25% - 30px);
		height: 330px;
		border-radius: var(--radius-md);
		overflow: hidden;
		flex-shrink: 0;

		@media screen and (max-width: 1400px) {
			width: calc(25% - 25px);
		}
		@media screen and (max-width: 991px) {
			width: calc(33.333% - 25px);
		}
		@media screen and (max-width: 768px) {
			width: calc(50% - 16px);
		}
		@media screen and (max-width: 576px) {
			width: 280px;
		}
	}
	.retail-merch-gallery__slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	@media (min-width: 768px) {
		.retail-merch-gallery__slide {height: 310px;}
	}
	@media (min-width: 1024px) {
		.retail-merch-gallery {padding-bottom:var(--gap-4xl);}
		.retail-merch-gallery__carousel {padding-left: 0;padding-right: 0;}
		.retail-merch-gallery__slide {height: 330px;}
		.outer-retail-merch-gallery:before {display:block;}
	}
	@media(min-width:1340px) {
		.retail-merch-gallery {padding-bottom:var(--section-padding-bottom);}
	}
} /* end :is(body, .is-preview) */