:root {
	--boutique-container-width: 1272px;
}

.boutique .shopify-section--rich-text {
	.container {
		max-width: var(--boutique-container-width);
		margin: 0 auto;
		padding: 0;
	}

	@media screen and (max-width: 700px) {
		padding-left: var(--spacing-3);
	}
}

/* TODO: Remove and refer to custom-shared breadcrumbs */
.boutique-breadcrumbs {
	padding: var(--spacing-4) var(--spacing-4) var(--spacing-2);

		.breadcrumb-item {
			color: var(--main-unselected);
			text-transform: uppercase;
			font-size: var(--font-size-caption);

		&.last {
			color: var(--main-primary);
			font-weight: var(--font-weight-medium);
		}
	}

	@media screen and (max-width: 700px) {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		gap: 2px;
	}
}

.boutique-nav-section {
	margin: var(--spacing-4) 0;

	.boutique-nav__list {
		display: flex;
		align-items: center;
		justify-content: center;
		list-style-type: none;
		margin: 0;

		.boutique-nav__item {
			padding: var(--spacing-2) var(--spacing-3);
			border: 1px solid var(--main-primary);
			border-left: none;
			cursor: pointer;
			transition: all .3s ease-in-out;
			font-size: var(--font-size-text);
			text-transform: uppercase;
			font-weight: var(--font-weight-medium);
		}

		.boutique-nav__link {
			padding: 0;
		}

		.boutique-nav__item:first-child {
			border-left: 1px solid var(--main-primary);
		}

		.boutique-nav__item.active, .boutique-nav__item:hover {
			background-color: var(--main-primary);
			color: var(--main-inverted-primary);
		}
		
		@media screen and (max-width: 700px) {
			display: grid;
			grid-template-columns: 1fr 1fr;
			margin: 0 auto;
			max-width: 300px;
			/* background-color: teal; */

			.boutique-nav__item {
				display: flex;
				align-items: center;
				justify-content: center;
				border: unset;
				border-top: 1px solid var(--main-primary);
				border-right: 1px solid var(--main-primary);
			}

			.boutique-nav__item:nth-of-type(3) {
				border-left: 1px solid var(--main-primary);
				border-bottom: 1px solid var(--main-primary);
			}

			.boutique-nav__item:nth-of-type(4) {
				border-bottom: 1px solid var(--main-primary);
			}
			
		}
	}

}

.shopify-section--boutique-text-with-media {
	max-width: var(--boutique-container-width);
	margin: var(--spacing-4) auto;
	overflow: hidden;

	.section-split {
		max-width: 100%;
	}

	.section-split__column {
		align-self: self-start;
		padding: 0 var(--spacing-7);
	}

	.section-split--reverse .section-split__column {
		padding: 0 var(--spacing-7) 0 0;
			@media screen and (max-width: 1272px) {
				padding: 0 var(--spacing-3);
			}
	}

	.content-box__background-media {
		max-height: 374px;
	}

	.h1 {
		color: var(--main-primary);
		font-size: var(--font-size-h3);
		font-weight: var(--font-weight-semiBold);
		padding-top: var(--spacing-5);
		padding-bottom: var(--spacing-1);
	}

	.metafield-multi_line_text_field {
		font-size: var(--font-size-text);
		color: var(--main-primary);
		font-weight: var(--font-weight-regular);
	}

	@media screen and (max-width: 700px) {
		.section-split--reverse .section-split__column, .section-split__column {
			padding: 0 var(--spacing-3);
		}
	}

}

.shopify-section--boutique-data-section {
	--gutter: calc((100vw - var(--boutique-container-width)) / 2);
	--inner-gutter: calc(55vw - var(--gutter));

	--image-max-height: 555px;

	.content-box__background-media {
		max-height: var(--image-max-height);
	}

 .section-split {
	display: flex;
	justify-content: flex-end;
 }

 .section-split__column.text-content {
	flex-grow: 1;
 }

 .section-split__column--image {
		width: 55vw;
 }

	.boutique-info-content {
		width: 100%;

		.info-container {
			display: flex;
			width: 100%;
			justify-content: flex-end;

			.static-info {
				width: 100%;
				max-width: calc(var(--boutique-container-width) - var(--inner-gutter));

				.boutique-name {
					font-size: var(--font-size-h3);
					text-transform: uppercase;
					font-weight: var(--font-weight-semiBold);
				}

				.boutique-address, .boutique-hours {
					display: flex;
					gap: var(--spacing-2);
					align-items: center;
					font-size: var(--font-size-text);
					font-weight: var(--font-weight-regular);
					margin-top: var(--spacing-1);

					span svg{
						height: 16px;
					}
				}

				.boutique-hours p{
					font-size: var(--font-size-text);
					font-weight: var(--font-weight-regular);
				}

				.boutique-hours-title {
					font-size: var(--font-size-h4);
					font-weight: var(--font-weight-semiBold);
					margin-top: var(--spacing-4);
					text-transform: uppercase;
				}
			}
		}
	}

	.boutique-contact {
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		align-items: end;
		margin-top: var(--spacing-3);

		.data:first-of-type {
			border-top: 1px solid var(--main-stroke);
		}

		.data {
			border-bottom: 1px solid var(--main-stroke);
			width: 100%;
			display: flex;
			justify-content: flex-end;

			.data-inner {
				max-width: calc(var(--boutique-container-width) - var(--inner-gutter));
				width: 100%;
				height: var(--spacing-8);
				gap: var(--spacing-2);
				display: flex;
				align-items: center;
				text-transform: uppercase;
				font-size: var(--font-size-text);
				font-weight: var(--font-weight-regular);

				span svg {
					height: 24px;
				}
			}
		}
	}

	.cta-container {
		width: 100%;
		display: flex;
		margin-top: var(--spacing-3);
		max-width: calc(var(--boutique-container-width) - var(--inner-gutter));
	}

	.boutique-contact__link {
		background-color: var(--main-primary);
		height: var(--spacing-5);
		display: flex;
		align-items: center;
		justify-self: center;
		padding: 0 var(--spacing-3);
		color: var(--main-inverted-primary);
		text-transform: uppercase;
		font-weight: var(--font-weight-medium);
	}


	@media screen and (max-width: 1000px) {
		.section-split {
			flex-direction: column;
		}

		.section-split__column--image {
			width: 100%;
		}
		.boutique-info-content {

			.info-container, .data {
				justify-content: flex-start;
			}
		}

		.static-info, .data-inner, .cta-container {
			max-width: 100%;
			padding: 0 var(--spacing-3);
		}
	}
}

.shopify-section--media-carousel {

	.container {
		--container-max-width: unset;
	}

	.product-list--carousel {
		column-gap: 1px;
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.circle-button {
		&::before {
			content: '';
			background-color: rgba(var(--main-primary-rgb), 0.6);
		}

		.icon path {
			stroke: var(--main-inverted-primary);
		}
	}

	.section-spacing {
		padding-top: var(--spacing-4);
		margin-bottom: var(--spacing-4);
		padding-bottom: 0;
	}

	img {
		height: 300px;
		width: auto;
		flex: 0 0 auto;
		max-width: unset;
	}
}