/* ==========================================================================
   motor configurator
   ========================================================================== */

/* todo: make all close button fixed position - need to change top + right based on viewport width (header height) */

.motor-configurator,
.motor-configurator body {
	height: 100dvh;
	overflow: hidden;
}

.hidden {
	display: none;
}

.page-motor-configurator {
	background: rgba(237, 237, 237, .8);
	
	header {
		position: relative;
		/* height: 5.125rem; */
	}

	main {
		display: flex;
		justify-content: center;
		background: #ededed;
		height: calc(100dvh - 3.5rem - 5.125rem);
		overflow: hidden;
	}

	main .container {
		padding: 0 3.333vw;
		display: block;
		max-width: unset;
	}

	.intro-text {
		width: 100%;
		max-width: 100%;

		p.subhead-text {
			font-size: .75em;
			margin-bottom: .5em;
		}

		h1.header-text {
			font-size: 1.5em;
			font-weight: 450;
		}
	}

	/* Base Layout Styles (mobile) */
	.left {
		order: 1;
		padding-block: 1em;
	}

	.layout {
		display: flex;
		flex-direction: column;
		gap: .75rem;
		width: 100%;
		height: 100%;
	}

	#filterContainer {
		width: 100%;
	}

	#filterContainer .filters {
		position: fixed;
		top: 0;
		left: 0;
		width: 90%;
		height: 100%;
		transform: translateX(-100%);
		opacity: 0;
		transition: transform 0.3s ease, opacity 0.3s ease;
		z-index: 1000;
	}

	#filterContainer .filters.expanded {
		transform: translateX(0%);
		opacity: 1;
		margin-left: 1em;
		background: rgb(237, 237, 237);
		height: calc(100dvh - 3.5rem);
		overflow: auto;
	}

	.filters-container .reset-specs-btn {
		display: none;
	}

	#filterOverlay {
		display: none;
		position: fixed;
		inset: 0;
		background: #EDEDED;
		z-index: 999;
	}

	#filterContainer .filters.expanded+#filterOverlay {
		display: block;
	}

	/* Filter controls */
	.fc {
		width: 100%;
		padding: 1.5em 0;
		position: relative;
		border-bottom: 1px solid #999;
	}

	.fc-flex {
		display: flex;
		gap: 1em;
		align-items: stretch;
	}

	.fc-icon {
		width: 4.25em;
		display: flex;
		align-items: center;
		justify-content: center;

		.icon-wrapper {
			position: relative;
			display: inline-block;

			img {
				display: block;
			}

			.icon-overlay {
				position: absolute;
				inset: 0;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 60%;
				pointer-events: none;
			}

			&.icon-hp .icon-overlay {
				background-image: url('/wp-content/themes/smi/assets/img/icon-hp.svg');
			}

			&.icon-rpm .icon-overlay {
				background-image: url('/wp-content/themes/smi/assets/img/icon-speed.svg');
			}

			&.icon-ft .icon-overlay {
				background-image: url('/wp-content/themes/smi/assets/img/icon-frame_type.svg');
			}

			&.icon-fms .icon-overlay {
				background-image: url('/wp-content/themes/smi/assets/img/icon-footmount_style.svg');
			}
		}
	}

	.fc-icon img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.fc-fields {
		display: flex;
		flex-direction: column;
		flex: 1;

		label {
			margin-bottom: 0.5em;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: .05em;
			font-size: 1em;
		}

		select {
			width: 100%;
			font-family: inherit;
			border: 1px solid #ccc;
			padding: 0.5em .75em;
			font-size: 1em;
			border-radius: 0;
			appearance: none;
			background-repeat: no-repeat;
			background-position: right .625em center;
			background-color: #3e404f;
			color: #fff;
			border-radius: .625em;
		}
	}

	.fc.disabled select,
	.fc.disabled label,
	.fc.disabled img,
	.fc.disabled div.icon-overlay {
		opacity: 0.4;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}

	.fc.disabled select {
		cursor: not-allowed;
	}

	.fc-fields select::-ms-expand {
		display: none;
	}

	.see-results-btn {
		display: none;
		/* hidden by default */
		margin-top: 2em;
		width: 100%;
		padding: 1em;
		color: white;
		border: none;
		font-size: 1em;
		cursor: pointer;
		text-align: center;
		box-sizing: border-box;
	}

	.see-results-btn.visible {
		display: block;
	}

	/* Choose Specs + Close buttons */
	#chooseSpecsBtn {
		display: block;
		margin: .5em 0;
		font-size: 1.1250em;
		padding: 1em 0 .9375em;
		background-color: #333;
		color: white;
		border: none;
		cursor: pointer;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		order: 2;

		span {
			font-size: 1.125em;

			svg {
				width: 1.125em;
				height: 1.125em;
			}
		}
	}

	.mobile-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1em 0;
		margin-top: 3em;
		background-color: #eee;
		/* or match your style */

		.specs-label svg {
			width: 1em;
			height: 1em;
		}
	}

	.specs-label {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		font-size: 1.25em;
		color: #000;
		white-space: nowrap;
	}

	button.close {

	}

	/* Results */
	.motor-card-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
		justify-content: center;
		gap: 1.25em;
	}

	.motor-card {
		position: relative;
		padding: 1rem 1rem 4.5rem;
		background-color: #f8f8f8;
		border-radius: .5em;
		height: auto;
		overflow: hidden;

		h3 {
			margin-top: .2em;
			letter-spacing: .025em;
			font-weight: 500;
			font-size: 1.1875em;
			color: var(--color-off-black);
		}

		h3::after {
			content: '';
			display: block;
			width: .875em;
			height: 1px;
			background-color: var(--color-off-black);
			margin-top: 0.5em;
		}

		h4 {
			font-size: .5625em;
			font-weight: 400;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: #1C1C1C;
		}

		ul {
			list-style: none;
			margin-top: 1.75em;

			li {
				margin-bottom: 0.25rem;
			}
		}

		.inner {
			padding: .5em .5em 0 .5em;
		}

		.motor-meta {
			display: flex;
			flex-direction: column;
			gap: 0.25em;
			margin-top: 1em;
		}

		.meta-row {
			display: flex;
			justify-content: space-between;
			font-size: 0.875em;
			border-bottom: 1px solid rgba(0, 0, 0, .1);
			padding: .2em 0 .3em;
			color: #838383;
		}

		.meta-row .label {
			font-weight: normal;
		}

		.meta-row .value {
			text-align: right;
		}

		/* Actions */
		.motor-actions {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 4em;
			display: flex;
			justify-content: space-around;
			align-items: center;
			opacity: 1;
			transition: opacity 0.3s ease;
			z-index: 2;
			padding: 1em;

			svg {
				width: 1.25em;
				height: 1.25em;
				transition: transform 0.2s ease;
			}

			.icon-btn {
				background: none;
				border: none;
				cursor: pointer;
				padding: 0.5em;
				display: flex;
				max-width: 2.5em;
				align-items: center;
				justify-content: center;

				.icon {
					color: #4D4D4D;
					width: 1.5em;
					height: auto;
					aspect-ratio: 1;
				}

				&.saved {
					.icon {
						/*color: #A2CD40;*/
					}
				}
			}

			.icon-btn:hover {
				.icon {
					color: #000;
					filter: brightness(95%);
				}
			}
		}

		.motor-overlay {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.25);
			opacity: 0;
			transition: opacity 0.3s ease;
			pointer-events: none;
			z-index: 1;
		}

		.three-dots-container {
			position: absolute;
			bottom: .75em;
			right: .75em;
			border-radius: 50%;
			background-color: #fff;
			display: none;
			align-items: center;
			justify-content: center;
			/* prevents any SVG overflow */
			overflow: hidden;
			width: 1.25em;
			height: 1.25em;

			svg {
				width: 75%;
				height: 75%;
			}
		}
	}

	.motor-card::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: .75em;
		height: 100%;
		background-color: #A2CD40;
		z-index: 0;
		/* sits behind overlay + actions */
	}

	.motor-card:hover .motor-actions {
		opacity: 1;
	}

	.motor-card:hover .motor-overlay {
		opacity: 1;
	}

	.single-motor-inline {
		padding: 1em;
		margin: 2em auto;
		width: 100%;
		transition: all 0.3s ease;

		h2 {
			font-size: 1.5em;
			font-weight: 400;
			letter-spacing: .05em;
			margin-bottom: .75em;
		}
	}

	.single-motor-inline.hidden {
		display: none;
	}

	button.close {
		position: fixed;
		z-index: 20;
	}
	
	.filters button.close {
		right: 0;
	}

	.close-single-view {
		top: 17.5rem;
		right: calc(3.333vw + .25rem);
	}

	.close-sales-form-view {
		top: .75rem;
		right: .75rem;
		
		&:hover {
			opacity: .75;
		}
	}

	.motor-detail {
		position: relative;
		text-align: center;

		p {
			max-width: 550px;
			max-width: 34.375em;
			margin: 0 auto;
			font-size: 1.125em;
			color: #1c1c1c;

			span {
				font-weight: 100;
				padding: .5em 0;
			}
		}

		hr {
			width: 5em;
			height: .1em;
			border: 0;
			background-color: #A0A0A0;
			margin-bottom: 1.5em;
		}
	}

	.motor-detail-buttons {
		display: flex;
		flex-direction: column;
		gap: 1em;
		margin-top: 4em;
		
		a.btn, button.btn {
			padding-inline: 0;
			width: 100%;
			max-width: 18.5rem;
			justify-content: center;
			font-size: 1em;
		}
	}

	.motor-specs {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.motor-specs li {
		padding: 0.5em 0;
		font-size: 0.95em;
		border-bottom: 1px solid #eee;
	}

	.my-configurations-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .8125em;
		border-bottom: 1px solid #000;
		margin: 0 auto;
		gap: .25em;
		white-space: nowrap;

		&:hover {
			text-decoration: none;
		}

		svg {
			width: 2em;
			height: 2em;
			font-size: 1em;
		}
	}

	#splashMessage {
		grid-column: 1 / -1;
		color: #444;
		font-size: 1.1em;
		padding-block: 1em;
		
		h2 {
			
			&::before {
				content: '';
				display: block;
				position: relative;
				left: 50%;
				top: 0;
				transform: translate(-50%, 0);
				width: 4em;
				height: auto;
				aspect-ratio: 5 / 3;
				background: url(/wp-content/uploads/product-type-motors.png) no-repeat 50% 50%;
				background-size: cover;
			}
		}

		p {
			margin-top: 1em;
			font-size: 1.25em;
			font-weight: 600;
		}

		p.text-small {
			font-size: 1em;
			font-weight: normal;

			svg {
				transform: rotate(90deg);
				width: 2em;
				height: 2em;
			}
		}
	}

	/* Default hidden state */
	#splashMessage.hidden {
		display: none;
	}

	.results-container {
		background: var(--color-lighter-gray);
		position: relative;
		padding: 2em;
		overflow-y: auto;
		order: 3;
		background-position: 50% 50%;
		background-size: cover;
		height: 100%;

		&:has(.results-count.visible) {
			background: #DBDBDB;
		}

		&:has(.single-motor-inline) {
			background: #DBDBDB;

			#splashMessage {
				display: none;
			}
		}
	}

	.results-count {
		display: none;
	}

	/* Style for when splash screen is active */
	.results-container.splash-active {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
		padding: 1em;
		background: var(--color-lighter-gray) url('/wp-content/themes/smi/assets/img/tech-drawing.svg');
	}

	.reset-specs-btn {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		background: transparent;
		font-size: .875em;
		font-weight: 600;
		font-family: "Exo", sans-serif;
		cursor: pointer;
		color: #333;
		transition: background 0.3s ease;
		margin-top: 1em;
		padding: 0.5em 1em;

		svg {
			display: inline-block;
			/* ✅ removes baseline alignment quirk */
			vertical-align: middle;
			/* ✅ helpful in case it's inline */
		}

		span {
			padding-left: .5em;
		}
	}

	.icon-refresh {
		transition: transform 0.2s ease;
		transform-origin: center;
	}

	.reset-specs-btn:hover .icon-refresh {
		transform: rotate(360deg);
	}

	.reset-specs-btn:hover {
		color: #333;
	}

	.configurations-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 5;
		padding: 2em 1em;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		background: var(--color-off-white);
	}

	.configurations-overlay.hidden {
		display: none;
	}

	#closeConfigurationsOverlay {
		position: sticky;
		top: 0;
		margin-left: auto;
		z-index: 10;
	}

	.close-container {
		display: flex;
		position: fixed;
		z-index: 2;
		top: 17.5rem;
		right: calc(3.333vw + .25rem);
	}

	.overlay-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1em;
		border-bottom: 1px solid #A0A0A0;

		h2 {
			font-size: 1.3750em;
			color: #1C1C1C;
			padding-bottom: .25em;
		}
	}

	.add-to-config {
		/* background-color: #a2cd40; */

		&.saved {

			#line-v,
			#line-h {
				display: none;
			}

			&:hover {
				.icon.wrench {
					#line-h {
						display: block;
					}
				}
			}
		}

		.single-motor-inline & {
			color: #000;

			/* &.saved {
				background-color: #cd4040;
				color: #fff;
			} */
		}
		
		span {
			font-size: .625em;
		}
	}

	.config-list {
		display: flex;
		flex-direction: column;
		gap: 1em;

		.motor-card {
			position: relative;
			border-bottom: 1px solid #ccc;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			align-items: center;
			flex-wrap: wrap;
			padding: 1rem;
			aspect-ratio: unset;
			background-color: #F8F8F8;
			border-radius: .5em;
			overflow: hidden;
			color: #1C1C1C;
			height: auto;

			.inner {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				gap: .5em;

				.model-info {
					text-align: left;
					text-transform: uppercase;

					h4 {
						font-size: .625em;
						letter-spacing: .5px;
						letter-spacing: .05em;
						font-weight: 500;
					}

					h4::after {
						content: '';
						display: block;
						width: 2em;
						height: 1px;
						background-color: #1C1C1C;
						margin-top: .5em;
					}

					h3 {
						font-size: 1.25em;
						padding-top: .5em;
						letter-spacing: 1px;
						font-weight: 500;
					}

					h3::after {
						content: none;
					}
				}

				.info {
					flex: 1;
					max-width: 500px;
					max-width: 31.25em;
					text-align: left;
					font-size: .875em;
					font-weight: 400;
					position: relative;

					span {
						font-weight: 100;
						padding: .25em;
					}
				}

				.motor-actions {
					position: relative;
					height: auto;
					display: flex;
					justify-content: space-around;
					padding: .5em;

					button {
						text-decoration: underline;
						font-family: "Exo", sans-serif;
					}
				}
			}
		}

		.config-item::before {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 10px;
			width: .625em;
			height: 100%;
			background-color: #A2CD40;
			z-index: 0;
			/* sits behind overlay + actions */
		}
	}

	.email-popup {
		position: fixed;
		top: 0;
		left: 0;
		background: rgb(237, 237, 237);
		z-index: 11111;
		height: 100%;
		width: 100%;
		overflow: auto;
		padding: 5dvh 5vw;

		h3 {
			color: #1C1C1C;
			font-size: 2em;
		}

		h4 {
			font-size: 1.25em;
			padding-bottom: 1.75em;
		}
		
		.motor-card h4 {
			padding-bottom: .25em;
		}

		.count {
			font-size: .75em;
			font-weight: 300;
		}

		.title {
			border-bottom: 1px solid #000;
			padding: 0 0 .5em .5em;
			margin-bottom: 1em;
		}

		.flex {
			display: flex;
			gap: 2em;
			margin-top: 4em;
			padding-left: .75em;
			flex-direction: column;

			>div {
				flex: 1;

				.wpcf7 {
					.wpcf7-form {
						padding: 0;
						border: 0;
						font-size: 1em;

						p {
							label {
								font-size: 1.125em;
							}

							&:nth-of-type(7) {
								width: 100%;
							}
						}
					}
				}

				&.configurations {
					display: none;

					.config-list {
						padding: .75em;

						.motor-card {
							.inner {
								.info {
									&::after {
										content: none;
									}
								}
							}
						}
					}
				}
			}
		}

		&.expanded {
			display: block;
		}

		.logged-in & {
			top: 0;
		}
	}

	footer {
		background: var(--color-off-white);

		.container {
			display: flex;
			gap: 1em;
			padding: 1rem 3.333vw 1.875em;
		}

		.icon-asterisk {
			transition: transform 0.2s ease;
			transform-origin: center;
		}

		a.btn.white.custom-solution-btn:hover {
			background: #f6f6f6 !important;
		}

		.custom-solution-btn:hover .icon-asterisk {
			transform: rotate(360deg);
		}

		.custom-solution-btn {
			color: #4D4D4D;
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			text-decoration: none;
			font-size: .8125em;
			width: 100%;
			justify-content: center;
			height: 3em;

			svg {
				width: 1.5em;
				height: auto;
				aspect-ratio: 1;
			}
		}

		.contact-sales-btn {
			font-size: .8125em;
			width: 100%;
			height: 3em;
			justify-content: center;
		}
	}

	#footer {
		box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.05);
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		color: white;
		transform: translateY(calc(100% - 3.5rem));
		transition: transform 0.3s ease-in-out;
		z-index: 1000;

		&.expanded {
			transform: translateY(0);

			.footer-toggle {
				svg {
					transform: rotate(0deg);
				}
			}
		}

		.footer-toggle {
			display: block;
			width: 100%;
			border: none;
			font-weight: bold;
			cursor: pointer;
			text-align: center;
			font-size: 1rem;
			color: #3b69ae;

			svg {
				width: 1.5em;
				height: auto;
				aspect-ratio: 1;
				transform: rotate(180deg);
				transition: transform .25s ease;
			}
		}

		.footer-content {
			padding: 1rem;
			border-top: 1px solid rgba(255, 255, 255, 0.1);
		}

		.configurations {
			order: 1;
			display: flex;
			flex-direction: column;
			gap: 1em;
		}

		.custom-solution {
			order: 2;
			padding: 0 0 1rem 0;
		}
	}
}

/*******************************/
/* Tablet/Desktop Enhancements */
/*******************************/
@media screen and (min-width: 48em) {
	.page-motor-configurator {
		main {
			height: calc(100dvh - 6.25rem - 5.125rem);
		}

		main .container,
		footer .container {
			padding: 0 3.333vw;
		}

		.email-popup {
			.flex {
				>div {
					&.configurations {
						display: block;
					}
				}
			}
		}

		.add-to-config {
			color: #fff;
		}

		.config-list {
			.motor-card {
				.inner {
					.motor-actions {
						opacity: 1;
						background-color: transparent;
						color: #1C1C1C;
					}
				}
			}
		}
		
		.configurations-overlay .close-container,
		.close-single-view {
			top: 5.5rem;
			right: calc(3.333vw + .25rem);
		}

		.motor-card {
			.motor-actions {
				opacity: 0;
				background-color: #3e404f;
				color: #fff;

				.icon-btn {
					.icon {
						color: var(--color-white);
					}
				}

				.icon-btn:hover {
					.icon {
						color: var(--color-silver);
					}
				}
			}

			.three-dots-container {
				display: flex;
			}
			
			.motor-overlay {
				display: block;
			}
		}

		.motor-detail-buttons {
			flex-direction: row;
			justify-content: center;
			align-items: stretch;
			flex-wrap: wrap;
			
			a.btn, button.btn {
				width: 18.5rem;
			}

			a.btn {
				width: calc(18.5rem - 4px);
			}
		}

		.motor-detail-buttons .wp-block-button {
			flex: 0 0 auto;
		}

		.filters-container {
			margin-top: 2em;
		}

		.wrapper {
			margin: 2em 6.25vw;
		}

		.layout {
			position: relative;
			flex-direction: row;
			align-items: flex-start;
			gap: 0;
		}

		.left {
			width: 22%;
			min-width: calc(18.75em + 2rem);
			position: sticky;
			top: 2rem;
			height: 100%;
			overflow-y: auto;
			padding-right: 2rem;
		}

		#filterContainer .filters {
			position: static;
			width: 100%;
			transform: none !important;
			opacity: 1 !important;
			display: block;
		}

		.results-container {
			width: 100%;
			height: 100%;
		}

		.motor-card-grid {
			padding: 3em 0;
			justify-content: center;
		}

		#splashMessage {
			width: 60%;
		}

		.results-container.splash-active {

			.results-count {
				display: none;
			}
			
			.motor-card-grid {
				padding: 0;
			}
		}

		.intro-text {
			h1.header-text {
				font-size: 1.25em;
				font-weight: 450;
			}
		}

		.results-count {
			display: block;
			font-weight: 400;
			margin-bottom: 1em;
			display: block;
			font-size: .75em;
			color: #4D4D4D;
			text-transform: uppercase;
			letter-spacing: .05em;
		}

		.results-count.hidden {
			display: none;
		}

		#chooseSpecsBtn,
		#filterOverlay,
		.mobile-header,
		#seeResultsBtn {
			display: none !important;
		}

		#splashMessage {
			p.text-small {
				svg {
					transform: rotate(0) !important;
				}
			}
		}

		.slash-list {
			max-width: 600px;
			max-width: 37.5em;
			margin: 0 auto;
			/* Allows wrapping */
			flex-wrap: wrap;
			/* Optional: space between items */
			gap: 0.5rem;
		}

		.email-popup {
			.flex {
				flex-direction: row;
			}

			.logged-in & {
				top: 0;
			}
		}

		.close-sales-form-view {
			top: 1em;
			right: 1em;
		}

		#footer {
			/* sticky footer*/
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 6.25rem;
			z-index: 99;
			transform: translateY(0) !important;

			div.container {
				flex-direction: row;
			}

			.configurations {
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				order: 2;

				.contact-sales-btn {
					width: auto;
				}
			}

			.custom-solution {
				order: 1;
				padding: 0;

				.custom-solution-btn {
					width: auto;
				}
			}

			.footer-toggle {
				display: none;
			}
		}
	}
}

@media screen and (min-width: 60.0625em) {
	.page-motor-configurator {
		main {
			height: calc(100dvh - 6.875rem - 6.25rem);
		}
		
		.configurations-overlay .close-container,
		.close-single-view {
			top: 7.25rem;
			right: calc(3.333vw + .25rem);
		}
	}
}

@media screen and (min-width: 62.5em) {
	.page-motor-configurator {
		.config-list {
			.motor-card {
				.inner {
					flex-direction: row;
					padding: 1em;

					.info {
						display: flex;
						align-items: center;
						margin: 0 2em;
					}

					.info::before {
						content: "";
						display: block;
						position: absolute;
						left: -2em;
						width: 1px;
						background-color: #DBDBDB;
						height: 5rem;
					}

					.info::after {
						content: "";
						display: block;
						position: absolute;
						right: -2em;
						width: 1px;
						background-color: #DBDBDB;
						height: 5rem;
					}

					.motor-actions {
						opacity: 1;
						background-color: transparent;
						width: auto;
						color: #000;
						gap: 2em;
					}
				}
			}
		}
		
		.configurations-overlay .close-container,
		.close-single-view {
			top: 7.25rem;
			right: calc(3.333vw + .25rem);
		}
		
		#footer {
			.custom-solution-btn,
			.contact-sales-btn {
				font-size: 1.125em;
			}
			
			.my-configurations-btn {
				font-size: 1.0625em;
			}
		}
	}
}

/**************************/
/*** END DESKTOP SECTION ***/
/***************************/