.justify-center {
	justify-content: center;
}

.my-product-page-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.my-product-top-section {
	gap: 2rem;
	margin-bottom: 2rem;
	justify-content: space-between;
}

.woocommerce-product-gallery--with-images {
	display: flex;
	margin-top: 66px;
	row-gap: 10px;
	align-items: center;
	flex-direction: row-reverse;
}

.flex-viewport {
	width: 540px;
}

.zoomImg {
	background-color: #fff;
}

.product-gallery-container img {
	height: var(--dynamic-img-height);
	object-fit: contain;
	width: 540px;
}

.woocommerce-product-gallery__trigger {
	display: none;
}

.my-product-info {
	position: sticky;
	top: 32px;
	gap: 8px;
	border-radius: 8px;
	margin: 50px 0 15px 116px;
	height: min-content;
	width: 524px;
	z-index: 100;
	box-shadow: 0px 3px 8px 0px #00000014, 0px 15px 15px 0px #00000012, 0px 34px 20px 0px #0000000c,
		0px 60px 24px 0px #00000008, 0px 95px 28px 0px #00000000;
}

.my-product-info-header {
	background: linear-gradient(315.12deg, #175270 15.96%, #12223d 101.52%);
	border-radius: 8px 8px 0 0;
	color: var(--font-color);
	padding: 32px;
}

.my-product-info-header a {
	color: var(--font-color);
	font-size: 16px;
	font-weight: 500;
	font-family: "Work Sans", serif;
	line-height: 20px;
}

.my-product-info .product_title {
	font-size: 24px;
	margin-top: 0;
}

.product-description {
	font-family: "Work Sans", serif;
	font-size: 16px;
	color: var(--dark-font);
	background-color: #fff;
	padding: 32px;
	border-radius: 0 0 8px 8px;
}

.product-description h3 {
	font-family: "Ubuntu", serif;
	font-size: 18px;
	line-height: 23.4px;
	color: var(--primary-color);
}

.product-description ul {
	list-style: none;
	padding-left: 0;
}

.product-description ul li {
	position: relative;
	padding-left: 20px;
	line-height: 1.5;
}

.product-description ul li::before {
	content: "•";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 30px;
	color: var(--accent-color);
}

.inquire-model-button,
.inquiry-submit-button {
	background: linear-gradient(315.12deg, #175270 15.96%, #12223d 101.52%);
	cursor: pointer;
	color: var(--font-color);
	border-radius: 8px;
	font-family: "Work Sans", serif;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	border: none;
}

.product-description button,
.inquiry-submit-button {
	padding: 16px 0 !important;
	width: 100%;
	font-size: 20px !important;
	line-height: 26px;
	margin-top: 64px;
}

.configuration-wrapper {
	display: flex;
	justify-content: center;
	width: 100%;
}

.configuration-container {
	max-width: 1280px;
	width: 100%;
}

.configuration-options {
	padding: 64px 0;
	max-width: 640px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
}

.form-button-container {
	flex-basis: 100%;
	display: flex;
	justify-content: center;
}

.configuration-options button {
	padding: 9.5px 32px !important;
	font-size: 20px !important;
}

.configuration-option {
	display: flex;
	gap: 5px;
	flex-direction: column;
}

.configuration-option label {
	font-family: "Work Sans", serif;
	font-size: 16px;
	color: var(--primary-color);
}

.inquiry-submit-button {
	border-radius: 8px !important;
	margin-top: 32px !important;
}

.my-product-tabs {
	background-color: #edf0f4;
}

.my-custom-tabs {
	max-width: 1280px;
	margin: 0 auto;
	height: 98px;
	display: flex;
	align-items: center;
	gap: 72px;
	list-style: none;
	padding: 0;
}

.my-custom-tabs li {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	font-size: 16px;
	font-weight: 700;
	color: var(--primary-color);
	cursor: pointer;
}

.my-custom-tabs li::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 5px;
	background-color: var(--accent-color);
	transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
}

.my-custom-tabs li:hover::after,
.my-custom-tabs li.active::after {
	width: 100%;
	left: 0;
}

.panels {
	background-color: #fff;
	padding: 54px 0;
}

#specs,
#models,
#docs {
	width: 1280px;
	margin: 0 auto;
}

.panels h2,
.similar-products h2 {
	color: var(--accent-color);
	padding-bottom: 16px;
}

.product-specs-docs {
	width: 100%;
	max-width: 720px;
	padding: 0;
}

.product-specs-docs li:nth-child(odd) {
	background-color: #edf0f4;
}

.product-specs-docs li {
	font-size: 16px;
	display: flex;
	align-items: center;
	padding: 10px 20px;
	list-style: none;
}

.product-specs-docs li a {
	text-decoration: underline;
}

.product-specs-docs li a i {
	font-size: 24px;
	padding-right: 5px;
}

.product-specs-docs li p,
.product-specs-docs li a {
	display: flex;
	align-items: center;
	font-family: "Work Sans", serif;
	width: 50%;
	margin: 0;
}

.spec-label p,
.spec-link {
	color: var(--primary-color);
}

.search-bar {
	display: flex;
	align-items: center;
}

.input-with-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.icon-search {
	position: absolute;
	right: 20px;
	pointer-events: none;
}

#model_search {
	width: 462px;
	background-color: #edf0f4;
	padding: 10px 20px;
	font-size: 16px;
	line-height: 21px;
	border-radius: 5px;
	border: none;
}

#clearSearch {
	background-color: #fff;
	border: none;
	margin-right: auto;
	cursor: pointer;
}

.models-table-container {
	font-family: "Work Sans", serif;
	width: 720px;
}

#models_per_page {
	border: none;
	border-radius: 5px;
	background-color: #edf0f4;
	padding: 10px;
	border-right: 10px solid transparent;
	font-size: 14px;
}

.models-table {
	width: 100%;
	border-spacing: 0;
	margin: 16px 0;
}

.models-table thead {
	background: linear-gradient(315.12deg, #175270 15.96%, #12223d 101.52%);
	padding: 10px;
	border-radius: 8px;
	color: #fff;
	font-weight: 500;
	font-size: 16px;
}
.models-table thead tr th:first-child {
	text-align: left;
	padding: 10px 0 10px 10px;
	border-radius: 8px 0 0 8px;
}
.models-table thead tr th:last-child {
	border-radius: 0 8px 8px 0;
}

.models-table tbody tr td {
	font-size: 14px;
	padding: 10px;
	text-align: center;
}

.models-table tbody tr td:first-child {
	text-align: left;
	color: var(--accent-color);
	word-break: break-all;
	max-width: 250px;
}

.models-table tbody tr:nth-child(even) {
	background-color: #edf0f4;
}

.models-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.page-link {
	background-color: #fff;
	border: none;
	color: #212529;
	width: 30px;
	height: 30px;
	font-size: 14px;
	font-family: "Work Sans", serif;
	cursor: pointer;
}

.current-page {
	color: #fff;
	border-radius: 20px;
	background-color: var(--accent-color);
}

.doc-file {
	padding: 16px;
}

.pdf-doc-name {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: var(--accent-color);
	font-size: 14px;
}

.pdf-doc-name svg {
	flex-shrink: 0;
	width: 20px;
	height: 24px;
}

.pdf-download {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1;
	padding: 0 10px;
}

.btn-download {
	background: linear-gradient(315.12deg, #175270 15.96%, #12223d 101.52%);
	color: var(--font-color);
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 20px;
	width: min-content !important;
	text-decoration: none !important;
}

.similar-product-container {
	background-color: #edf0f4;
	width: 100%;
}

.similar-products {
	padding: 64px 0;
	max-width: 1280px;
	margin: 0 auto;
}

.products {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	width: 100%;
	max-width: 735px;
	padding: 0;
}

.product-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 234px;
	list-style: none;
	background-color: #fff;
	border-radius: 8px;
	font-family: "Work Sans", serif;
	box-shadow: 0px 3px 8px 0px #00000014, 0px 15px 15px 0px #00000012, 0px 34px 20px 0px #0000000c,
		0px 60px 24px 0px #00000008, 0px 95px 28px 0px #00000000;
}

.product {
	padding: 16px;
}

.product img {
	width: 202px;
	height: 202px;
	object-fit: contain;
}
.product p a {
	font-size: 20px;
	color: var(--primary-color);
}

.inquire-similar-button {
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	background-color: var(--primary-color);
	color: #fff;
	border: none;
	padding: 16px;
	border-radius: 0 0 8px 8px;
	cursor: pointer;
	transition: background-color 0.3s ease-in-out;
}

@media (max-width: 640px) {
	.my-custom-tabs {
		gap: 0;
	}
	.flex-viewport {
		width: 100%;
		height: 100% !important;
	}
	.woocommerce-product-gallery__image img {
		max-width: 100%;
		max-height: 400px;
		object-fit: contain;
	}
	.woocommerce-product-gallery__image {
		max-height: 400px;
	}
}

@media (max-width: 1280px) {
	#specs,
	#models,
	#docs {
		width: 100%;
	}
	.panels h2 {
		padding-left: 25px;
	}
	.my-custom-tabs {
		padding: 0 25px;
	}
	.models-table-container {
		padding: 0 25px;
	}
	.my-custom-tabs li {
		text-align: center;
	}
	.similar-products {
		padding: 64px 25px;
	}
	.my-product-info {
		position: static;
		margin: 0 25px 50px 25px;
	}
	.products {
		justify-content: center;
	}
	.woocommerce-product-gallery--with-images {
		flex-direction: column;
		margin: 116px 0 0 0;
	}
	.flex-control-thumbs {
		display: flex;
		padding: 0;
	}
	.product-gallery-container {
		width: 100%;
		padding: 0;
	}
	#models {
		overflow-x: auto;
	}
	#models h2 {
		left: 0;
		position: sticky;
	}
}

.thumbs-wrapper {
	position: relative;
	overflow: hidden;
}

/* The thumbnail list itself */
.flex-control-nav.flex-control-thumbs {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.flex-control-nav.flex-control-thumbs img {
	max-height: 100px;
	width: 100px;
}

.flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

.thumbs-arrow {
	display: none;
	background-color: transparent;
	padding: 0;
	border: none;
	position: absolute;
	cursor: pointer;
	color: rgb(201, 201, 201);
	font-size: 28px;
	z-index: 10;
}

@media (min-width: 1280px) {
	.thumbs-wrapper {
		width: auto;
		height: 400px;
	}

	.flex-control-nav.flex-control-thumbs {
		flex-direction: column;
		width: 100px;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.flex-control-nav.flex-control-thumbs li {
		max-height: 100px;
		width: 100px;
	}

	.thumbs-arrow.left {
		top: 0;
		left: 50%;
		transform: translateX(-50%) rotate(90deg);
	}
	.thumbs-arrow.right {
		bottom: 0;
		left: 50%;
		transform: translateX(-50%) rotate(90deg);
	}

	.product-gallery-container {
		min-width: 620px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
}

@media (max-width: 1279px) {
	.configuration-container {
		display: flex;
		justify-content: center;
	}

	.thumbs-wrapper {
		max-width: 400px;
		height: auto;
	}

	.flex-control-nav.flex-control-thumbs {
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
	}

	.thumbs-arrow.left {
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	.thumbs-arrow.right {
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
}
