html {
	scroll-padding-top: 158px;
}

/*******************************************
***** START OF NESTED STYLES FOR #main *****
*******************************************/
#main {
	--content-width: min(100%, 1485px);
	width: 100%;
	max-width: 100%;
	margin: 0;

	h1,
	h2,
	h3,
	p {
		margin: 0;
	}

	.woocommerce-breadcrumb {
		display: none;
	}

	.series-h1 {
		text-align: center;
		font-family: 'Teko';
		font-weight: 600;
		font-size: 55px;
		line-height: 65px;
		color: var(--e-global-color-primary);
	}

	.series-h2 {
		text-align: center;
		font-family: 'Teko';
		font-weight: 600;
		font-size: 50px;
		line-height: 72px;
		color: var(--e-global-color-primary);
	}

	.series-button {
		padding: 10px 24px;
		background-color: var(--e-global-color-accent);
		display: flex;
		gap: .5rem;
		align-self: center;
		width: fit-content;
		border-radius: 3px;
		margin: 2rem auto 0;

		.series-button-icon {
			height: 23px;
			fill: #ffffff;
		}

		.series-button-text {
			font-family: 'Teko';
			font-weight: 600;
			font-size: 24px;
			line-height: 34px;
			color: var(--e-global-color-primary);
		}
	}

	.color-sec {
		color: var(--e-global-color-secondary);
	}

	.uppercase {
		text-transform: uppercase;
	}

	#subnav {
		background: var(--e-global-color-primary);
		display: flex;
		justify-content: center;
		align-items: center;
		position: sticky;
		top: 92px;
		left: 0;
		z-index: 3;

		.subnav-links {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;

			.subnav-link {
				border-right: 1px solid #ffffff;

				a {
					display: block;
					padding: 1.25rem;
					color: #ffffff;
					transition: all 250ms ease-in-out;
				}

				a:hover {
					background-color: #0381C6;
				}
			}

			.subnav-link:last-of-type {
				border-right: none;
			}
		}

		.subnav-links-mobile {
			display: none;
		}
	}

	.series-header {
		padding: 2.5rem 4.5rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1rem;

		.series-header-image-left {
			display: grid;
			grid-template-columns: 60% 40%;
			gap: 1.5rem;
			max-width: var(--content-width);

			.series-image-container {
				max-width: 900px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.series-description-links {
				display: flex;
				flex-direction: column;
				justify-content: center;
				max-width: 500px;
				gap: 1.5rem;

				.series-description {
					p {
						margin-block-end: .9rem;
					}
				}

				a {
					color: var(--e-global-color-secondary);
					width: fit-content;
				}

				.series-links {
					display: flex;
					flex-direction: column;
					padding-left: .5rem;

					hr {
						border: 0;
						display: block;
						width: 100%;
						border-top: 1px solid #D1D1D1;
					}

					.series-link {
						display: flex;
						gap: .75rem;
						align-items: center;
						margin-left: .5rem;

						.series-link-icon {
							height: 30px;
							fill: var(--e-global-color-accent);
						}

						.series-link-text {
							font-family: 'Teko';
							font-weight: 600;
							font-size: 27px;
							line-height: 39px;
							color: #4D4E55;
						}
					}
				}
			}
		}
	}

	#series-specs {
		background-color: #F3F3F5;
		display: flex;
		padding: 2.25rem 2rem;
		justify-content: center;
		flex-wrap: wrap;

		.spec {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 2.25rem;
			border-right: 1px solid #c2c2c2;

			.spec-label {
				font-family: 'Roboto';
				font-weight: 600;
				font-size: 20px;
				line-height: 26px;
				color: #4D4E55;
			}

			.spec-text {
				font-family: 'Teko';
				font-weight: 600;
				font-size: 50px;
				line-height: 65px;
				color: var(--e-global-color-primary);
			}
		}

		.spec:last-of-type {
			border-right: none;
		}
	}

	#key-benefits {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 2rem;
		padding: 3rem 2rem 5rem;
		background: left -200px / contain no-repeat url('/wp-content/uploads/2024/12/tire_track-upside_down-ltr.png') var(--e-global-color-primary);

		.series-h2 {
			text-transform: uppercase;
			color: #ffffff;
		}

		.the-benefits {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rem 3rem;
			max-width: 1600px;

			.benefit {
				display: flex;
				flex-direction: column;
				gap: 1.5rem;

				.benefit-hr {
					width: 59px;
					border: 3px solid var(--e-global-color-accent);
					margin: 0;
				}

				.benefit-header,
				h3 {
					font-family: 'Roboto';
					font-weight: 700;
					font-size: 24px;
					line-height: 26px;
					color: #ffffff;
				}

				p {
					font-family: 'Roboto';
					font-weight: 400;
					font-size: 18px;
					line-height: 26px;
					color: #ffffff;
				}
			}
		}

		.key-benefits-carousel-wrapper {
			overflow-y: hidden;
			scrollbar-width: none;
			width: calc(100% + 4rem);
			padding: 0 2rem;
			max-height: 300px;

			.key-benefits-carousel {
				overflow-y: hidden;
				display: flex;
				gap: 1rem;
				width: fit-content;
				margin: 0 auto;

				.key-benefits-image {
					width: 500px;
					background-color: #ffffff;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
		}
	}

	#why-choose {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		padding: 3.3125rem 2rem;
		align-items: center;

		.why-choose-items {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 4.75rem 3.25rem;

			.why-choose-item {
				display: flex;
				flex-direction: column;
				gap: 1rem;
				max-width: 600px;

				.why-choose-item-heading {
					font-family: 'Roboto';
					font-weight: 800;
					font-size: 24px;
					line-height: 28px;
				}
			}
		}
	}

	#color-options {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2.5rem;
		padding: 0 2rem 6.875rem;

		.color-carousel-wrapper {
			width: calc(100% + 4rem);
			padding: 0 2rem;
		}

		.color-carousel {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			gap: 2rem;
			width: fit-content;
			margin: 0 auto;

			.color-card {
				width: 170px;
				border: 5px solid #ececec;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;
				padding: 2rem 1.5rem;

				p {
					color: #ffffff;
					text-transform: uppercase;
					font-family: 'Teko';
					font-size: 24px;
					line-height: 30px;
				}

				.the-color {
					font-weight: 600;
					font-size: 34px;
				}
			}

			.red {
				background-color: #D1372F;
			}
		}
	}

	#models-sizes {
		background: right bottom / contain no-repeat url('/wp-content/uploads/2024/12/tire-track_right-to-left.png') var(--e-global-color-primary);
		display: block;
		text-align: center;
		gap: 3rem;
		padding: 4.25rem 0 5rem 2rem;
		margin-bottom: 7rem;

		.series-h2 {
			color: #ffffff;
			width: fit-content;
			margin: 0 auto 4rem;
		}

		.models-sizes-carousel-wrapper {
			display: block;
			overflow-y: hidden;
			width: 100%;
			padding: 0 0 3rem 0;
			max-height: 500px;
			margin-right: 0;

			.models-sizes-carousel {
				.swiper-slide {
					width: 410px !important;
					flex-shrink: 0 !important;
				}
				.models-sizes-card {
					padding: 10px;
					width: 410px !important;
					background-color: #ffffff;
					display: grid;
					grid-template-rows: 1fr auto;

					.models-sizes-card-upper {
						background-color: #0381C6;
						padding: .5rem 1rem;
						display: flex;
						flex-direction: column;
						align-items: center;
						color: #ffffff;
						line-height: 1.6;
						text-align: center;
						font-size: .85em;
						width: 390px;

						.model-name {
							line-height: 1.1;
							min-height: 2.2em;
						}

						h2 {
							font-size: 2.75rem;
						}
					}

					.models-sizes-card-lower {
						width: 390px;
						padding: 1rem 1.5rem;
						background-color: #F3F3F5;
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 1.5rem;

						.card-lower-grid {
							width: 100%;
							font-size: 16px;
							line-height: 26px;

							.card-lower-label {
								font-weight: 700;
							}

							.card-lower-row {
								display: grid;
								grid-template-columns: 50% 50%;
								grid-template-rows: auto;
								border-bottom: 1px solid #C6C6C6;
								padding: 5px;
							}

							.card-lower-row p:nth-child(odd) {
								text-align: right;
								padding-right: .25rem;
							}

							.card-lower-row p:nth-child(even) {
								text-align: left;
								padding-left: .25rem;
							}

							.card-lower-row:last-of-type {
								border-bottom: none;
							}

							.card-border {
								line-height: 1.3;
								padding: 0 5px 9px;
								border-bottom: 1px solid #C6C6C6;
							}

						}

						.card-view-details {
							background-color: var(--e-global-color-secondary);
							padding: 10px 24px;
							color: #ffffff;
							font-weight: 600;
							border: none;
							border-radius: 0;
						}
					}
				}
			}
		}

		>p {
			color: #ffffff;
		}
	}

	.underline {
		border-bottom: 6px solid var(--e-global-color-accent);
	}

	.detail-hero-container {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: var(--e-global-color-primary);
		padding: 6.625rem 2rem;
	}

	.detail-hero {
		max-width: 1465px;
		display: flex;
		gap: 5.25rem;
		color: #ffffff;

		.detail-text-container {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 1rem;

			.detail-text {
				display: flex;
				flex-direction: column;
				gap: 1rem;

				.detail-hr {
					width: 59px;
					border: 3px solid var(--e-global-color-accent);
					margin: 0;
				}

				.detail-h2 {
					font-family: 'Teko';
					font-weight: 600;
					font-size: 60px;
					line-height: 86px;
					margin: 0;
				}

				.detail-description {
					margin: 0;

					font {
						color: #ffffff;
					}
				}
			}
		}

	}

	.models-list-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 4.5rem 2rem 6.5rem;
	}

	.models-list {
		max-width: var(--content-width);
		display: flex;
		flex-direction: column;
		gap: 4rem;
	}

	.models-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;

		.models-item {
			padding: 1.75rem 2.625rem;
			background-color: #F3F3F5;
			transition: all 250ms ease-in-out;
		}

		.models-item:hover {
			background-color: #E0E1EC;
		}

		p {
			text-align: center;
			text-transform: uppercase;
			font-family: 'Teko';
			font-weight: 600;
			font-size: 24px;
			line-height: 26px;
			color: #4D4E55;
		}
	}

	section#configurator {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0 2rem 7rem;
		gap: 4rem;
	}

	.configurator-title {
		max-width: 900px;

		p {
			text-align: center;
		}
	}

	.configurator-wrapper {
		max-width: var(--content-width);
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 2rem;
		background-color: #E7E7ED;
		padding: 2.3rem 1rem;

		h3 {
			text-align: center;
		}
	}

	.gform_heading {
		display: none;
	}

	#field_6_1 .gfield_label,
	#field_6_3 .gfield_label,
	#field_6_4 .gfield_label {
		display: block;
		text-align: center;
		width: 100%;
	}

	.gfield_radio {
		display: flex;
		gap: .75rem;
		justify-content: center;
		flex-wrap: wrap;
	}

	.gchoice {
		padding: .75rem 1rem;
		border: 1px solid #4D4E55;
		border-radius: 3px;
		display: flex;
		gap: .25rem;
		align-items: center;
		background-color: #ffffff;
	}

	.gchoice .gfield-choice-input[type="radio"]+label {
		max-width: 100%;
		font-size: 20px;
		line-height: 26px;
		text-wrap: nowrap;
	}

	#gform_wrapper_6 {
		max-width: 800px;
		width: 100%;
	}

	.gform-footer {
		display: flex;
		justify-content: center;
	}

	#gform_submit_button_6 {
		padding: 10px 24px;
		background-color: var(--e-global-color-accent);
		font-family: 'Teko';
		font-weight: 600;
		font-size: 24px;
		line-height: 34px;
		color: var(--e-global-color-primary);
	}

	.swiper-pagination-bullet {
		background-color: #ffffff;
	}

	.gform-body fieldset.loaded-gvwr {
		display: none;
	}

	.scroll-for-more {
		display: none;
		justify-content: center;
		padding: .5rem 1rem;
		background-color: var(--e-global-color-secondary);
		border-radius: 50rem;
		border: 1px solid #ffffff;
		gap: .25rem;
		margin-top: -2rem;

		span {
			color: #ffffff;
		}

		span.scroll-arrow-left,
		span.scroll-arrow-right {
			color: var(--e-global-color-accent);
			font-size: 2.25rem;
			cursor: pointer;
			user-select: none;
		}
	}
}

/*****************************************
***** END OF NESTED STYLES FOR #main *****
*****************************************/

body:not([class*=elementor-page-]) .site-main {
	margin: 0;
	max-width: 100%;
}

.woocommerce-products-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 1.5rem;
	gap: 1.5rem;
}

.woocommerce-products-header__title.page-title {
	color: var(--e-global-color-primary);
	font-size: 55px;
	line-height: 65px;
	font-weight: 600;
	margin: 0;
}

.header-image-container {
	width: 100%;
	line-height: 0;
}

.woocommerce img.header-image,
.woocommerce-page img.header-image {
	width: 100%;
	max-height: 51.85dvh;
	object-fit: cover;
}

#variant-modal-wrapper {
	position: fixed;
	z-index: 5;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 250ms ease-in-out;
	opacity: 1;
	pointer-events: all;
	padding: 156px 1rem 1rem;
}

#variant-modal {
	width: 920px;
	height: 676px;
	background-color: #ffffff;
	overflow-x: hidden;
	overflow-y: scroll;

	.variant-modal-header {
		padding: 1.5rem;
		background-color: #0381C6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: sticky;
		top: 0;
		left: 0;
		gap: 1rem;

		h3,
		a,
		.variant-modal-close {
			color: #ffffff;
		}

		.variant-modal-close {
			font-size: 3rem;
			padding-right: .5rem;
			cursor: pointer;
		}
	}
}

.variant-modal-table {
	display: grid;
	grid-template-columns: 50% 50%;
}

.variant-spec {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid #CCCCCC;
}

.variant-spec-label {
	padding: .75rem 1.5rem;
	text-align: right;
	background-color: #E2E3EA;
	font-weight: 700;
	color: #4D4E55;
}

.variant-spec-value {
	padding: .75rem 1.5rem;
	color: #4D4E55;
}

#variant-modal-wrapper.modal-hide {
	opacity: 0;
	pointer-events: none;
}

.variant-modal-loading {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 600;
	font-size: 1.5rem;
}

/**********************
***** BREAKPOINTS *****
**********************/

@media screen and (min-width: 1200px) {
	#main {
		.header-image {
			object-position: center;
		}
	}
}

@media screen and (max-width: 1200px) {
	#main {
		.detail-hero {
			flex-direction: column-reverse;
			gap: 2rem;

			.media-container {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.series-header {

			.series-header-image-left {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 1rem;

				.series-image-container {
					max-height: 400px;
					height: auto;
				}

				.series-description-links {
					max-width: 100%;
				}
			}
		}

		#subnav {
			top: 125px;
		}
	}

	.variant-modal-table {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 820px) {
	#main {
		#subnav {
			.subnav-links {
				display: none;
			}

			.subnav-links-mobile {
				display: grid;
				list-style: none;
				padding: .5rem;
				width: 100%;
				position: relative;
				grid-template-rows: 42px;
				grid-auto-rows: 0px;

				.subnav-link-mobile {
					overflow: hidden;
					display: flex;
					justify-content: center;
					align-items: center;

					p {
						color: #ffffff;
						font-weight: 600;
					}

					a {
						color: #ffffff;
					}
				}

				.subnav-mobile-toggle {
					position: absolute;
					top: .5rem;
					right: 1rem;
					height: 42px;
					display: flex;
					align-items: center;
					justify-content: center;

					.subnav-mobile-open {
						width: 1.5rem;
						height: 1.5rem;
						fill: #ffffff;
						transition: all 250ms ease-in-out;
						display: flex;
						cursor: pointer;
					}

					.subnav-mobile-close {
						color: #ffffff;
						font-size: 2.5rem;
						transition: all 250ms ease-in-out;
						cursor: pointer;
					}

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

			.subnav-mobile-show {
				grid-auto-rows: 42px;
			}
		}
	}
}

@media screen and (max-width: 880px) {
	#main {
		.gfield_radio {
			display: grid;
			grid-template-columns: repeat(2, auto);
		}
	}
}

@media screen and (max-width: 580px) {
	#main {
		.gfield_radio {
			display: flex;
		}
	}
}

@media screen and (min-width: 768px) and (max-width: 960px) {
	#main {
		.models-list-container {
			padding: 4.5rem 1rem 6.5rem;
		}

		.models-grid {
			grid-template-columns: repeat(3, 1fr);
			gap: 1rem;
		}

		#key-benefits {
			.the-benefits {
				grid-template-columns: repeat(2, 1fr);
				gap: 3rem 2rem;
			}
		}

		#why-choose {
			.why-choose-items {
				gap: 3rem 2rem;
			}
		}
	}
}

@media screen and (max-width: 767px) {
	#main {
		padding-inline-start: 0;
		padding-inline-end: 0;

		.detail-hero-container {
			padding: 6.625rem 1rem;
		}

		.models-list-container {
			padding: 4.5rem 1rem 6.5rem;
		}

		.models-grid {
			grid-template-columns: 1fr;
			gap: 1rem;
		}

		#subnav {
			.subnav-links {
				flex-wrap: wrap;
				justify-content: center;
			}
		}

		.series-header {
			padding: 2.5rem 1rem;
		}

		#series-specs {
			padding: 2.25rem 1rem;
			flex-direction: column;
			align-items: center;

			.spec {
				border-right: none;
				padding: 0;
			}
		}

		#key-benefits {
			padding: 3rem 1rem 3rem;

			.the-benefits {
				display: grid;
				grid-template-columns: 1fr;
				gap: 2rem;
				padding-right: 1rem;
			}

			.key-benefits-carousel-wrapper {
				width: calc(100% + 2rem);
				padding: 0 1rem
			}
		}

		#why-choose {
			padding: 3.3125rem 1rem;

			.why-choose-items {
				grid-template-columns: 1fr;
				gap: 2rem 1rem;
			}
		}

		#color-options {
			padding: 0 1rem 6.875rem;

			.color-carousel-wrapper {
				width: calc(100% + 2rem);
				padding: 0 1rem;
			}
		}

		#models-sizes {
			padding: 4.25rem 1rem 1rem;

			.models-sizes-carousel-wrapper {
				width: calc(100% + 8rem);
				padding: 0 1rem;
			}
		}

		section#configurator {
			padding: 0 1rem 7rem;
		}
	}

	#variant-modal-wrapper {
		#variant-modal {
			width: 100%;
			height: 100%;

			.variant-modal-header {
				padding: .5rem;

				h3 {
					font-size: 1.25rem;
					line-height: 1.25;
				}
			}

			.variant-modal-table {

				.variant-spec-label,
				.variant-spec-value {
					padding: .25rem 1rem;
					font-size: 1rem;
				}
			}
		}
	}
}

.configure-quote-button {
    display: block;
    background-color: #141839;
    color: white !important;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 5px;
    text-decoration: none;
	margin-bottom: 15px;
}