/*=============== PRELOADER ===============*/
		#preloader_malc {
			z-index: 999;
			position: absolute;
			height: 100%;
			width: 100%;
			background: var(--color-gray-100);
			display: flex;
			flex-flow: column wrap;
			align-items: center;
			padding-top: 100px;
			/* justify-content: center; */
		}

		.loader {
			border: 2px solid var(--color-gray-100);
			border-top: 2px solid var(--color-blue-600);
			border-radius: 50%;
			width: 40px;
			height: 40px;
			animation: spin 2s linear infinite;
			margin-bottom: 15px;
		}

		.loader-message {
			font-size: 12px;
			color: var(--color-gray-500);
		}

		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		/*=============== SCROLLBAR ===============*/
		* {
			scrollbar-width: thin;
			scrollbar-color: var(--color-gray-200) var(--color-gray-100);
		}

		/* Chrome/Edge/Safari */
		*::-webkit-scrollbar {
			width: 6px;
			height: 6px;
			background: var(--color-gray-100);
		}

		*::-webkit-scrollbar-track {
			background: var(--color-gray-100);
		}

		*::-webkit-scrollbar-thumb {
			background-color: var(--color-gray-200);
		}

		/* Hide scrollbar for Chrome, Safari, and Opera */
		div.dtsp-searchPane div.dt-container div.dt-scroll-body::-webkit-scrollbar {
			display: none;
		}

		/* Hide scrollbar for IE, Edge, and Firefox */
		div.dtsp-searchPane div.dt-container div.dt-scroll-body {
			-ms-overflow-style: none;
			scrollbar-width: none;
		}


		/* ===== Selection Table Page ===== */
		.selection-table-page {
			background-color: var(--color-gray-100);
			padding-block: 30px;
		}

		h1 {
			margin-bottom: 10px;
		}

		.page-description {
			margin-bottom: 50px;
		}

		/* ===== DataTables Overrides ===== */
		table.dataTable {
			width: 100% !important;
			border-collapse: collapse;
			font-size: 14px;
		}

		div.dt-scroll {
			border-inline: 1px solid var(--color-gray-300);
			overflow: hidden;
		}

		table.dataTable.display>tbody tr>.sorting_1,
		table.dataTable.display>tbody>tr:nth-child(odd)>.sorting_1,
		table.dataTable.order-column.stripe>tbody>tr:nth-child(odd)>.sorting_1,
		table.dataTable.display>tbody>tr:nth-child(odd)>* {
			box-shadow: none;
		}

		table.dataTable thead th {
			position: relative;
			padding: 0;
			font-size: 13px;
			font-weight: 600;
			color: var(--color-slate-700);
			white-space: nowrap;
			/* Ensure each th is a separate stacking context */
			z-index: auto;
		}

		div.dt-container.dt-empty-footer .dt-scroll-body {
			border-bottom: none;
		}

		table.dataTable td:not(:first-child) {
			border-left: 1px solid var(--color-gray-200);
		}

		.dtfh-floatingparent-head {
			top: 58px !important;
		}

		table.dataTable>tbody>tr>td {
			padding-block: 15px;
		}

		table.dataTable thead tr>.dtfc-fixed-start,
		table.dataTable thead tr>.dtfc-fixed-end,
		table.dataTable tfoot tr>.dtfc-fixed-start,
		table.dataTable tfoot tr>.dtfc-fixed-end {
			background-color: var(--color-gray-100);
		}

		table.dataTable>thead>tr>th,
		table.dataTable>thead>tr>td {
			background-color: var(--color-gray-100);
			vertical-align: top;
			border-bottom: 1px solid var(--color-gray-300);
		}

		table.dataTable th.dt-type-numeric,
		table.dataTable th.dt-type-date,
		table.dataTable td.dt-type-numeric,
		table.dataTable td.dt-type-date {
			text-align: left;
		}

		/* Header content wrapper - clicking this triggers sorting */
		.th-content {
			padding: 10px 0px;
			display: block;
			cursor: pointer;
			user-select: none;
		}

		/* Sorting icons fix */
		table.dataTable thead .sorting,
		table.dataTable thead .sorting_asc,
		table.dataTable thead .sorting_desc {
			background-image: none !important;
		}

		table.dataTable thead .sorting:after,
		table.dataTable thead .sorting_asc:after,
		table.dataTable thead .sorting_desc:after {
			display: none !important;
		}

		table.dataTable tbody td {
			background-color: var(--color-white);
			border-bottom: 1px solid #f0f0f0;
			color: #4b5563;
			vertical-align: top;
		}

		table.dataTable tbody td:nth-child(1) {
			font-weight: 600;
			color: var(--color-gray-700);
			padding-left: 20px;
		}

		table.dataTable thead th:nth-child(1) {
			padding-left: 20px;
		}

		div.dt-container .dt-length,
		div.dt-container .dt-search,
		div.dt-container .dt-info,
		div.dt-container .dt-processing,
		div.dt-container .dt-paging {
			font-size: 14px;
		}

		div.dt-container {
			margin-bottom: 50px;
		}

		div.dt-container div.dt-layout-row {
			margin: 0;
		}

		div.dt-container div.dt-layout-row:first-child {
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			background-color: var(--color-gray-200);
			border: 1px solid var(--color-gray-300);
			padding: 25px 15px 10px;
		}

		div.dt-container div.dt-layout-row:last-child {
			border-bottom-left-radius: 8px;
			border-bottom-right-radius: 8px;
			background-color: var(--color-white);
			border: 1px solid var(--color-gray-300);
			padding: 15px;
		}

		table.dataTable tbody tr:hover td {
			background: #f9fafb;
		}

		/* ===== Column Search Container ===== */
		.col-search-container {
			cursor: default;
		}

		/* ===== 1. theadSearch - Simple Text Input with Clear ===== */
		.search-input-wrapper {
			position: relative;
			display: flex;
			align-items: center;
		}

		.thead-search-input {
			width: 100%;
			border: 1px solid #dfdfdf;
			outline: none;
			border-radius: 4px;
			padding: 6px 7px;
			font-size: 13px;
			color: #374151;
			background: #fff;
			transition: background 0.15s;
		}

		.thead-search-input::placeholder {
			color: #9ca3af;
			font-style: italic;
		}

		.thead-search-input:focus {
			border: 1px solid #005bdf;
			box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
		}

		.search-clear-btn {
			position: absolute;
			right: 4px;
			top: 50%;
			transform: translateY(-50%);
			width: 18px;
			height: 18px;
			border: none;
			background: #e5e7eb;
			border-radius: 50%;
			cursor: pointer;
			display: none;
			align-items: center;
			justify-content: center;
			padding: 0;
			transition: background 0.15s;
			z-index: 2;
		}

		.search-clear-btn:hover {
			background: #d1d5db;
		}

		.search-clear-btn svg {
			width: 10px;
			height: 10px;
			fill: #6b7280;
		}

		.search-clear-btn.visible {
			display: flex;
		}

		/* ===== 2. theadRange - Min/Max Inputs with Clear ===== */
		.range-inputs-wrapper {
			display: flex;
			align-items: center;
			gap: 3px;
			position: relative;
		}

		.range-input {
			width: 72px;
			min-width: 64px;
			border: 1px solid #d1d5db;
			border-radius: 4px;
			padding: 6px 7px;
			font-size: 13px;
			color: #374151;
			outline: none;
			transition: border-color 0.15s, box-shadow 0.15s;
			text-align: left;
		}

		.range-input::placeholder {
			color: #9ca3af;
			font-size: 13px;
		}

		.range-input:focus {
			border-color: #005bdf;
			box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
		}

		.range-separator {
			color: #6b7280;
			font-size: 13px;
			font-weight: 500;
			white-space: nowrap;
		}

		.range-unit {
			color: #6b7280;
			font-size: 13px;
			white-space: nowrap;
			margin-left: 1px;
		}

		.range-clear-btn {
			width: 18px;
			height: 18px;
			border: none;
			background: #e5e7eb;
			border-radius: 50%;
			cursor: pointer;
			display: none;
			align-items: center;
			justify-content: center;
			padding: 0;
			margin-left: 2px;
			transition: background 0.15s;
			flex-shrink: 0;
		}

		.range-clear-btn:hover {
			background: #d1d5db;
		}

		.range-clear-btn svg {
			width: 10px;
			height: 10px;
			fill: #6b7280;
		}

		.range-clear-btn.visible {
			display: flex;
		}

		/* ===== 3. theadSelect - Custom Select Dropdown ===== */
		.select-wrapper {
			position: relative;
		}

		.thead-select {
			border: 1px solid #dfdfdf;
			border-radius: 4px;
			outline: none;
			padding: 6px 46px 6px 6px;
			font-size: 12px;
			color: #374151;
			background: transparent;
			cursor: pointer;
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			background-color: #fff;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 8px center;
		}

		.thead-select:focus {
			background-color: #f0f7ff;
		}

		.thead-select option {
			padding: 6px 10px;
			font-size: 13px;
		}

		.thead-select option:first-child {
			color: #9ca3af;
			font-style: italic;
		}

		/* Select clear button */
		.select-clear-btn {
			position: absolute;
			right: 24px;
			top: 50%;
			transform: translateY(-50%);
			width: 18px;
			height: 18px;
			border: none;
			background: #e5e7eb;
			border-radius: 50%;
			cursor: pointer;
			display: none;
			align-items: center;
			justify-content: center;
			padding: 0;
			transition: background 0.15s;
			z-index: 2;
		}

		.select-clear-btn:hover {
			background: #d1d5db;
		}

		.select-clear-btn svg {
			width: 12px;
			height: 12px;
			fill: #6b7280;
			pointer-events: none;
		}

		.select-clear-btn.visible {
			display: flex;
		}

		/* Filter input for select with many options */
		.select-filter-input {
			width: 100%;
			border: none;
			border-bottom: 1px solid #e5e7eb;
			outline: none;
			padding: 8px 12px;
			font-size: 12px;
			color: #374151;
			background: #f9fafb;
		}

		.select-filter-input::placeholder {
			color: #9ca3af;
		}

		.select-filter-input:focus {
			background: #f0f7ff;
		}

		/* ===== Fixed Header Alignment Fix ===== */
		table.dataTable thead th,
		table.dataTable thead td {
			border-bottom: none;
		}

		/* ===== Status Badge Styles ===== */
		.status-badge {
			display: inline-block;
			padding: 3px 10px;
			border-radius: 12px;
			font-size: 11px;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.3px;
		}

		.status-active {
			background: #d1fae5;
			color: #065f46;
		}

		.status-eol {
			background: #fee2e2;
			color: #991b1b;
		}

		.status-nrnd {
			background: #fef3c7;
			color: #92400e;
		}

		.dt-action {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			-moz-column-gap: 0.2rem;
			column-gap: 0.2rem;
			width: -moz-fit-content;
			width: fit-content;
		}

		/* ===== Button Styles ===== */

		.btn-inquiry {
			display: inline-block;
			padding: 6px 14px;
			border: 1px solid #3b82f6;
			border-radius: 4px;
			background: #fff;
			color: #3b82f6;
			font-size: 13px;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.15s;
			white-space: nowrap;
		}

		.btn-inquiry:hover {
			background: #3b82f6;
			color: #fff;
		}

		.btn-inquiry.added {
			background: none;
			border: none;
			padding: 0;
			color: var(--color-gray-600);
			cursor: default;
			pointer-events: none;
		}

		.btn-cart-link {
			font-size: 13px;
			color: var(--color-blue-600);
		}

		.btn-cart-link:hover {
			text-decoration: underline;
			text-underline-offset: 3px;
		}


		/* ===== Scrollbar Styling ===== */
		.dt-scroll-body::-webkit-scrollbar {
			height: 8px;
		}

		.dt-scroll-body::-webkit-scrollbar-track {
			background: #f1f1f1;
			border-radius: 4px;
		}

		.dt-scroll-body::-webkit-scrollbar-thumb {
			background: #c1c1c1;
			border-radius: 4px;
		}

		.dt-scroll-body::-webkit-scrollbar-thumb:hover {
			background: #a1a1a1;
		}

		/* ===== Responsive ===== */
		@media (max-width: 768px) {
			.container {
				padding: 12px;
			}

			.range-input {
				width: 46px;
				padding: 3px 4px;
				font-size: 11px;
			}

			.range-unit {
				display: none;
			}
		}

		div.dt-container .dt-search input,
		div.dt-container .dt-input {
			border: 1px solid var(--color-gray-300);
			border-radius: 4px;
			background-color: var(--color-white);
		}

		.footer {
			font-size: 14px;
			color: var(--color-gray-500);
			padding-block: 20px;
			border-top: 1px solid var(--color-gray-200);
		}

		.submenu {
			background-color: var(--color-white);
			border-bottom: 1px solid var(--color-gray-200);
			font-size: 16px;
		}

		.submenu__list {
			display: flex;
			column-gap: 2rem;
		}

		.submenu__item {
			position: relative;
			display: flex;
			align-items: center;
			column-gap: 5px;
			padding-block: 1rem;
			color: var(--color-gray-500);
		}

		.submenu__item::after {
			position: absolute;
			content: "";
			width: 100%;
			height: 2px;
			top: calc(100% - 2px);
			left: 0;
			background: var(--color-gray-300);
			transition: transform 0.3s;
			transform: scaleY(0);
			transform-origin: center;
		}

		.submenu__item:hover::after {
			transform: scaleY(1);
			transform-origin: center;
		}

		.submenu__item:hover {
			color: var(--color-gray-800);
		}

		.submenu__link.active {
			color: var(--color-gray-800);
			font-weight: 600;
		}

		.submenu__link.active::after {
			position: absolute;
			z-index: 10;
			content: "";
			width: 100%;
			height: 2px;
			top: calc(100% - 2px);
			left: 0;
			background: var(--color-blue-600);
		}

		.submenu__caret-icon svg {
			width: 14px;
			height: 14px;
		}

		.submenu__caret-icon path {
			fill: var(--color-text);
		}

		.submenu-dropdown {
			display: none;
			position: absolute;
			left: 0;
			top: 56px;
			background-color: #f9f9f9;
			width: fit-content;
			box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
			z-index: 999;
		}

		.submenu-dropdown__content {
			display: flex;
			flex-direction: column;
			width: max-content;
		}

		.submenu-dropdown__link {
			position: relative;
			padding: 12px 30px 12px 14px;
			border-bottom: 1px solid var(--color-gray-200);
			width: 100%;
		}

		.submenu-dropdown__link:hover {
			background-color: var(--color-gray-200);
		}

		.submenu-dropdown__link.active {
			background-color: var(--color-gray-200);
		}

		.submenu__item:hover .submenu-dropdown {
			display: block;
		}

		.header {
			display: flex;
			align-items: center;
			margin: 0 auto;
			background-color: var(--color-slate-900);
			height: 300px;
		}

		.header__title {
			padding-top: 7rem;
			color: var(--color-gray-100);
		}

		.main {
			padding-top: 5rem;
			padding-bottom: 20rem;
			flex: 1;
			height: max-content;
			background-color: var(--color-gray-100);

		}

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

		.product-grid__item {
			background-color: var(--color-white);
			border: 1px solid var(--color-gray-200);
			border-radius: 8px;
			height: 200px;
			font-size: 2rem;
			font-weight: 600;
			padding: 1rem 1.6rem;
			transition: .3s ease;
		}

		.product-grid__item:hover {
			box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%)
		}

		.cart-page__title {
			font-size: 2.6rem !important;
		}

		.cart-page__subtitle {
			color: var(--color-slate-400);
		}