/* ==========================================================================
General
========================================================================== */

.content a,
.content a:hover,
.content a:active,
.content a:focus { 
	text-decoration: none; 
}

/* ==========================================================================
Anchor selection
========================================================================== */

html { scroll-behavior: smooth; }

/* align anchor point below sticky header */
.block { 
	padding-top: 110px;
	margin-top: -110px;
}
@media (min-width: 768px){
	.block { 
		padding-top: 130px;
		margin-top: -130px;
	}
}

#block--intro { z-index: 6; }

#block--bum-coverage { z-index: 5; }

#block--top-length { z-index: 4; }

#block--chest-support { z-index: 3; }

#block--top-silhouette { z-index: 2; }

#block--swim-solution { z-index: 1; }

/* ==========================================================================
Shop by size
========================================================================== */

.wrapper--shop-by-size { 
	max-width: 432px; 
	margin: 0 auto;
	padding: 0 var(--space_2);
}
@media (min-width: 768px){
	.wrapper--shop-by-size { 
		max-width: 648px; 
		position: absolute;
		left: 0;
		right: 0;
		top: 40%; /* fallback */
		top: calc(50% - 8px);
		padding-top: var(--space_2);
	}

	.wrapper--shop-by-size:hover { display: block !important; }
}
@media (min-width: 1401px){
	.wrapper--shop-by-size { 
		width: 100%;
		max-width: 1296px; 
		top: 70%; /* fallback */
		top: calc(100% - 16px);
		right: auto;
		padding-top: var(--space_3);
	}
}

@media (min-width: 768px){
	#block--shop-by-size:before {
		content: '';
		display: block;
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 12px solid var(--fog);
		position: absolute;
		top: 5px;
		left: 106px;
	}
}
@media (min-width: 1401px){
	#block--shop-by-size:before { 
		top: 13px;
		left: 116px; 
	}
}

/* ==========================================================================
Splide
========================================================================== */

/*
* Arrows
*/
button.splide__arrow--prev, 
button.splide__arrow--next {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	transition: opacity .15s ease-in;
	top: 0;
	bottom: 0;
	margin: auto;
	padding: 0 1.5%;
	font-size: var(--space_4) !important;
	cursor: pointer;
	border: 0;
	user-select: none;
	outline: 0;
	position: absolute;
	background: 0 0;
	z-index: 2;
	text-decoration: none;
	opacity: 1;
	line-height: 1;
	color: var(--charcoal);
}
button.splide__arrow--prev { 
	left: auto;
	right: 100%; 
}
button.splide__arrow--next { 
	left: 100%;
	right: auto; 
}
button.splide__arrow--prev:focus, 
button.splide__arrow--next:focus {
	outline: none;
}
button.splide__arrow--prev[disabled],
button.splide__arrow--next[disabled] {
	opacity: 0;
}

/*
* Pagination
*/
.splide__pagination { 
	margin: var(--space_2) 0;
	padding: 0; 
}
@media (min-width: 992px){
	.splide__pagination { margin: var(--space_3) 0 0; }
}

.splide__pagination li { padding: 0 4px; }

.splide__pagination li button {
	border: 1px solid var(--charcoal);
	width: 12px;
	height: 12px;
	padding: 0;
	border-radius: 16px;
	background-color: var(--stone);
}

.splide__pagination li button.is-active { background-color: var(--sand); }

/* ==========================================================================
Fit range
========================================================================== */

.fit-range {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-top: 1px solid var(--charcoal);
	margin: var(--space_3) var(--space_1) var(--space_1);
}

.fit-range__item { font-size: 12px; }

.fit-range__item:before {
	content: ' ';
	display: block;
	width: var(--space_2);
	height: var(--space_2);
	border-radius: var(--space_2);
	border: 1px solid var(--charcoal);
	background-color: var(--sand);
	margin-top: -9px; 
	margin-bottom: 4px;
	z-index: 2;
}

.fit-range__item.selected:before { background-color: var(--charcoal); }

/*
* Left
*/
.fit-range__item:first-child { 
	justify-items: start; 
	margin-left: -8px;
}

.fit-range__item:first-child:before { 
	margin-left: 0; 
	margin-right: auto;
}

/* 
* Center
*/
.fit-range__item:nth-child(2) { justify-items: center; }

.fit-range__item:nth-child(2):before { 
	margin-left: auto; 
	margin-right: auto;
}

/*
* Right
*/
.fit-range__item:last-child { 
	justify-items: end; 
	margin-right: -8px;
}

.fit-range__item:last-child:before { 
	margin-left: auto; 
	margin-right: 0;
}

/* ==========================================================================
Overflow button wrapper
========================================================================== */

#block--top-silhouette .btn-wrapper--overflow {
	display: inline-flex;
	overflow-x: auto;
	white-space: nowrap;
	flex-wrap: nowrap;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
}

/* ==========================================================================
Back to top
========================================================================== */

#block--back-to-top {
	position: fixed;
	right: 0;
	bottom: 100px;
	z-index: 5;
	opacity: 0;
	transition: opacity 0.25s ease;
}

#block--back-to-top.visible {
	opacity: 1;
}

#btn--back-to-top {
	display: inline-block;
	padding: var(--space_1) !important;
	border-radius: var(--space_1) 0 0 var(--space_1);
	height: auto;
	font-size: 12px;
	pointer-events: none;
}

#block--back-to-top.visible #btn--back-to-top { 
	pointer-events: auto; 
}

#btn--back-to-top i {
	font-size: var(--space_3);
	position: relative;
	top: -4px;
}

/* override audioeye placement in prvw, test and lower environments */
#ae_app #ae_launcher.ae-cta-position-preset-right-mid-lower { bottom: 24px; }
@media (max-height: 500px) {
	#ae_app #ae_launcher.ae-cta-position-preset-right-mid-lower { bottom: 18px; }
}