/* Arrow Builder */

.builder-carousel {
	margin: 0 calc(var(--default-spacing-unit) * -1);
	overflow: hidden;
	overflow: clip;
	padding: 0 var(--default-spacing-unit);
	position: relative;

	@media ( min-width: 60em ) {
		margin: 0;
		padding: 0;
	}
}

.x-arrow-builder-navigation-button:disabled {
	cursor: default;
	opacity: 0.45;
}

.builder-header-steps {
	align-items: center;
	color: #111111;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	margin: 0 auto calc(var(--default-spacing-unit) * 2);

	@media ( min-width: 48em ) {
		width: 50%;
	}

	.builder-header-step {
		border-bottom: 1px solid #EFE8DF;
		flex: 1 1 auto;
		font-size: 13px;
		font-weight: var(--font-semibold);
		letter-spacing: 0.05em;
		padding: calc(var(--default-spacing-unit) / 2) 0;
		position: relative;
		text-align: center;
		text-transform: uppercase;

		&:after {
			background-color: var(--brand-1);
			bottom: 0;
			content: "";
			height: 3px;
			left: 0;
			opacity: 0;
			position: absolute;
			width: 100%;
		}

		&.active {
			font-weight: var(--font-bold);

			&:after {
				opacity: 1;
			}
		}
	}
}

.x-builder-form-inputs {
	gap: calc(var(--default-spacing-unit) - 0.25em) 0;
}

.x-arrow-builder-radio-buttons {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	gap: var(--default-spacing-unit);
}

.x-arrow-builder-radio-button {
	align-items: center;
	background-color: transparent;
	border: 2px solid #F8C364;
	border-radius: 4px;
	box-sizing: border-box;
	color: #111111;
	cursor: pointer;
	display: inline-flex;
	font-style: normal;
	font-weight: 600;
	justify-content: center;
	padding: 10px 12px;
	position: relative;
	transition: all 150ms ease-in-out;

	&:has(input:checked) {
		background-color: #F8C364;
		border-color: #F8C364;
	}

	&:not(:disabled):not(:has(input:checked)) {

		&:hover,
		&:focus-within {
			background-color: #FFF0CF;
			border-color: #F8C364;
		}
	}

	input {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

.x-arrow-builder-navigation-button {
	align-items: center;
	background-color: #F4EFE9;
	border: 2px solid #F4EFE9;
	border-radius: 4px;
	color: var(--brand-2);
	cursor: pointer;
	display: inline-flex;
	font-weight: 600;
	gap: 4px;
	justify-content: center;
	padding: 10px 12px;
	position: relative;
	text-decoration: none;
	transition: all 150ms ease-in-out;

	&:not(:disabled) {

		&:hover,
		&:focus-within {
			border-color: #F8C364;
		}
	}

	span {
		font-size: 0.7em;
		position: relative;
		top: 1px;
	}
}

.builder-content {
	position: relative;

	&:after {
		background: var(--brand-4);
		content: "";
		height: 100%;
		left: 0;
		margin-left: calc(-50vw + 50%);
		margin-right: calc(-50vw + 50%);
		position: absolute;
		top: 0;
		width: 100vw;
		z-index: -2;
	}

	@media ( min-width: 60em ) {
		display: grid;
		grid-template-columns: 3fr 1fr;

		&:after {
			background: linear-gradient(
				to right,
				var(--brand-4) min(75%, calc(50% + var(--default-content-width) / 4)),
				#F7F4EF min(75%, calc(50% + var(--default-content-width) / 4))
			);
		}
	}


	.c-form-select:has([ style*="display: none" ]) {
		display: none;
	}
}

.builder-content-main .arrow-step {
	padding: calc(var(--default-spacing-unit) * 2) 0;

	@media ( min-width: 60em ) {
		padding: calc(var(--default-spacing-unit) * 2) var(--default-spacing-unit);
	}
}

.builder-content-sidebar__inner {
	padding: calc(var(--default-spacing-unit) * 2) var(--default-spacing-unit);
}

.builder-content-sidebar {
	background-color: #F7F4EF;
	position: relative;

	&:after {
		background: #F7F4EF;
		content: "";
		height: 100%;
		left: 0;
		margin-left: calc(-50vw + 50%);
		margin-right: calc(-50vw + 50%);
		position: absolute;
		top: 0;
		width: 100vw;
		z-index: -1;

		@media ( min-width: 60em ) {
			display: none;
		}
	}

	.ar-summary-row--totals {
		font-size: 18px;
		font-weight: var(--font-bold);
	}

	.question-list,
	.arrow-summary-content {
		background-color: #FFF;
		border-radius: 4px;
		padding: var(--default-spacing-unit);
	}

	.question-list {
		background-image: url("/images/talk-ico.png");
		background-position: 0.5rem center;
		background-repeat: no-repeat;
		padding-left: 3.75rem;
	}

	.arrow-summary-content {
		display: flex;
		flex-flow: column;
		gap: calc(var(--default-spacing-unit) / 2);
	}

	.builder-content-sidebar__inner {
		display: flex;
		flex-flow: column;
		gap: calc(var(--default-spacing-unit) * 2);

		@media ( min-width: 60rem ) {
			position: sticky;
			top: var(--sticky-header-height, 0);
		}
	}
}

.builder-rows {
	display: flex;
	flex-flow: column;
	gap: calc(var(--default-spacing-unit) * 2);
}

.builder-row {
	transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.builder-row.is-hidden {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
	visibility: hidden;
}

.builder-header-title {
	align-items: flex-start;
	color: #292929;
	display: flex;
	flex-flow: row nowrap;
	font-size: 17px;
	font-weight: 700;
	gap: calc(var(--default-spacing-unit) / 2);
	line-height: 1.2;

	@media ( min-width: 60em ) {
		align-items: center;
		font-size: 22px;
		gap: var(--default-spacing-unit);
	}
}

.builder-number {
	align-items: center;
	background-color: #EFE8DF;
	border-radius: 100%;
	display: inline-flex;
	flex-shrink: 0;
	font-size: 12px;
	font-weight: var(--font-bold);
	height: 25px;
	justify-content: center;
	position: relative;
	top: -1px;
	width: 25px;

	@media ( min-width: 60em ) {
		top: 0;
	}
}

#js-arrow-images {
	min-height: 8rem;
	overflow: hidden;
	position: relative;

	@media ( min-width: 640px ) {
		min-height: 10rem;
	}
}

#image-wrapper {
	left: 50%;
	position: absolute;
	top: 0;
	transform: translateX(-50%) scale(0.4);
	width: 1000px;

	@media ( min-width: 640px ) {
		transform: translateX(-50%) scale(0.65);
	}

	@media ( min-width: 960px ) {
		transform: translateX(-50%);
	}

	.ArrowPoint {
		height: 100px;
		left: 0px;
		position: absolute;
		top: -1px;
		visibility: visible;
		width: 125px;
		z-index: 5;
	}

	.ArrowShaft {
		height: 100px;
		left: 125px;
		position: absolute;
		top: 0;
		visibility: visible;
		width: 830px;
		z-index: 5;

		@media ( min-width: 960px ) {
			height: 100px;
			left: 125px;
			position: absolute;
			top: 0;
			visibility: visible;
			z-index: 5;
		}
	}

	.ArrowPointCollar {
		height: 100px;
		left: 125px;
		position: absolute;
		top: 0;
		visibility: visible;
		width: 25px;
		z-index: 6;
	}

	.ArrowCap {
		height: 100px;
		left: 602px;
		position: absolute;
		top: -1px;
		visibility: visible;
		width: 350px;
		z-index: 6;
	}

	.ArrowCockFeather {
		height: 100px;
		left: 625px;
		position: absolute;
		top: 0;
		visibility: visible;
		width: 304px;
		z-index: 7;
	}

	.ArrowHenFeather1 {
		height: 100px;
		left: 625px;
		position: absolute;
		top: 0;
		visibility: visible;
		width: 304px;
		z-index: 8;
	}

	.ArrowHenFeather2 {
		height: 100px;
		left: 625px;
		position: absolute;
		top: 0;
		visibility: visible;
		width: 304px;
		z-index: 4;
	}

	.ArrowHenFeather3 {
		height: 100px;
		left: 625px;
		position: absolute;
		top: 0;
		visibility: visible;
		width: 304px;
		z-index: 3;
	}

	.ArrowNockCollar {
		height: 100px;
		left: 934px;
		position: absolute;
		top: 0;
		visibility: visible;
		width: 16px;
		z-index: 6;
	}

	.ArrowNock {
		height: 100px;
		left: 950px;
		position: absolute;
		top: 0;
		visibility: visible;
		width: 50px;
		z-index: 5;
	}
}

.review-builder__inner {
	display: flex;
	flex-flow: column;
	gap: calc(var(--default-spacing-unit) * 1.5);
}

.builder-review-title {
	display: flex;
	flex-flow: row nowrap;
	gap: calc(var(--default-spacing-unit) * 1.5);
	width: 100%;
}

.builder-slider-nav {
	background-color: var(--brand-4);
	padding: calc(var(--default-spacing-unit) * 1.25) 0;

	&:not(#review-nav) {
		bottom: 0;
		position: sticky;
		z-index: 10;

		&:before {
			left: calc(var(--default-spacing-unit) * -1);
		}

		&:after {
			right: calc(var(--default-spacing-unit) * -1);
		}

		&:before,
		&:after {
			background-color: var(--brand-4);
			content: "";
			height: 100%;
			position: absolute;
			top: 0;
			width: var(--default-spacing-unit);

			@media ( min-width: 60em ) {
				display: none;
			}
		}

	}

	@media ( min-width: 60em ) {
		padding: calc(var(--default-spacing-unit) * 2) 0;
	}
}

/* Review Add to Cart */

.x-arrow-review-atc {
	align-items: center;
	background-color: var(--brand-4);
	bottom: 0;
	display: grid;
	gap: calc(var(--default-spacing-unit) / 1.5) calc(var(--default-spacing-unit) / 2);
	grid-template-areas: "total total"
		"qty atc";
	grid-template-columns: 1fr 2fr;
	padding: calc(var(--default-spacing-unit) / 2) 0;
	position: sticky;
	z-index: 10;

	@media ( min-width: 60em ) {
		grid-template-areas: "qty total atc";
		grid-template-columns: 1fr 1.5fr 1.5fr;
	}

	&:before {
		left: calc(var(--default-spacing-unit) * -1);
	}

	&:after {
		right: calc(var(--default-spacing-unit) * -1);
	}

	&:before,
	&:after {
		background-color: var(--brand-4);
		content: "";
		height: 100%;
		position: absolute;
		top: 0;
		width: var(--default-spacing-unit);

		@media ( min-width: 60em ) {
			display: none;
		}
	}

	.x-arrow-review-estimate-total {
		align-items: center;
		font-size: 18px;
		grid-area: total;
		justify-content: center;
		text-align: center;

		.estimated-total {
			font-weight: var(--font-bold);
		}
	}

	.x-arrow-review-qty {
		grid-area: qty;

		.x-quantify {
			background-color: #FFF;
			width: 100%;
		}
	}

	.x-arrow-review-qty,
	.x-arrow-review-estimate-total {
		align-items: center;
		display: flex;
		flex-flow: row nowrap;
		gap: calc(var(--default-spacing-unit) / 2);
	}

	.x-arrow-quantity-select {
		max-width: 100%;
		min-width: 90px;
	}

	.x-arrow-review-button {
		grid-area: atc;

		.x-arrow-review-button-btn {
			width: 100%;
		}
	}
}

#ajax-add {

	.c-dialog__container {
		width: 400px;
	}

	.c-dialog__content {
		margin: 0;
	}
}

.x-arrow-added-row {
	gap: var(--default-spacing-unit) 0;
}