body {
	margin: 0;
}

.eproduct-hero {
	position: relative;
	background: var(--c-primary-950);
	padding: 56px 0 118px;
	overflow: hidden;
}

.eproduct-hero::before {
	content: "";
	position: absolute;
	top: -220px;
	right: -150px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

.eproduct-hero::after {
	content: "";
	position: absolute;
	bottom: -180px;
	left: -120px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	pointer-events: none;
}

.eproduct-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
}

.eproduct-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 20px;
	color: var(--c-bg);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.eproduct-hero-inner h1 {
	margin: 0 0 12px;
	color: var(--c-bg);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	letter-spacing: -0.3px;
	line-height: 1.2;
}

.eproduct-hero-inner p {
	margin: 0;
	max-width: 720px;
	color: rgba(255, 255, 255, 0.92);
	font-size: 16px;
	line-height: 1.65;
}

.eproduct-content {
	padding: 0 0 72px;
}

.eproduct-card {
	position: relative;
	background: var(--bg-card);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 18px;
	box-shadow:
		0 16px 45px rgba(0, 0, 0, 0.07),
		0 2px 8px rgba(0, 0, 0, 0.03);
	margin-top: -76px;
	overflow: visible;
}

.eproduct-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 24px 26px;
	border-bottom: 1px solid var(--c-band-via);
	border-radius: 17px 17px 0 0;
}

.eproduct-card-header h2 {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 19px;
	font-weight: 800;
	color: var(--c-text-strong);
	letter-spacing: -0.2px;
}

.eproduct-card-header h2 i {
	color: var(--primary-orange);
}

.eproduct-card-header p {
	margin: 4px 0 0;
	font-size: 13.5px;
	color: var(--c-text-muted);
}

.eproduct-count-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	background: var(--primary-orange-soft);
	border: 1px solid rgba(238, 147, 16, 0.25);
	border-radius: 999px;
	color: var(--primary-orange-dark);
	font-size: 12.5px;
	font-weight: 700;
}

.eproduct-card-body {
	padding: 22px 26px 26px;
}

/* Flash messages */
.eproduct-flash {
	margin: 0 0 18px;
	padding: 13px 42px 13px 16px;
	border-radius: 10px;
	font-size: 14px;
	position: relative;
	display: none;
}

.eproduct-flash.alert-danger {
	display: block;
	background: var(--c-danger-bg);
	border: 1px solid var(--c-red-5);
	color: var(--c-danger-deep);
}

.eproduct-flash.alert-success {
	display: block;
	background: var(--c-success-bg);
	border: 1px solid var(--c-green-2);
	color: var(--c-success-deep);
}

.eproduct-flash .close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.6;
}
/* The page scrolls vertically and the header row sticks to the top of the
   viewport. No overflow on this panel on purpose: an overflow other than
   visible turns the panel into a scrollport, and a sticky header would then
   stick inside the panel instead of the page, i.e. not at all. The table is
   sized to fit the card so the page never scrolls sideways either. */
.eproduct-table-wrap {
	width: 100%;
	border-radius: 10px;
	background: var(--c-bg);
}

#dataTables-example {
	width: 100%;
	min-width: 1000px;
	border-collapse: collapse;
}

#dataTables-example thead th {
	position: sticky;
	top: var(--sticky-content-top, 0px);
	z-index: 5;
	background: var(--c-bg);
	color: var(--c-blue-1);
	font-size: 12.5px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0.2px;
	border: 1px solid var(--c-border-strong) !important;
	padding: 8px 12px;
	vertical-align: middle;
	white-space: nowrap;
	/* Travels with the cell, so the rule under the header survives the
	   collapsed-border repaint that happens while it is stuck. */
	box-shadow: inset 0 -1px 0 var(--c-border-strong), 0 2px 6px rgba(0, 0, 0, 0.05);
}

#dataTables-example td {
	max-width: 420px;
	padding: 7px 12px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--c-blue-1);
	border: 1px solid var(--c-border-strong) !important;
	vertical-align: top;
}

#dataTables-example tbody tr:nth-of-type(odd) {
	background-color: var(--c-surface-raised);
}

#dataTables-example tbody tr:hover {
	background-color: var(--c-blue-16);
}

.eproduct-row-num {
	color: var(--c-blue-1);
	font-weight: 500;
	font-size: 13px;
}

.eproduct-plain {
	display: inline;
	color: var(--c-blue-1);
	font-size: 13px;
	line-height: 1.45;
}

.eproduct-empty {
	text-align: center;
	padding: 52px 20px;
	color: var(--text-muted);
}

.eproduct-empty i {
	font-size: 34px;
	color: var(--c-text-subtle);
	margin-bottom: 12px;
}

.eproduct-empty p {
	margin: 0;
	font-size: 15px;
}

.eproduct-card-body .dataTables_wrapper {
	padding-top: 6px;
}

.eproduct-card-body .dataTables_length,
.eproduct-card-body .dataTables_filter {
	margin-bottom: 14px;
	font-size: 13.5px;
	color: var(--text-muted);
}

.eproduct-card-body .dataTables_filter input {
	height: 38px;
	min-width: 230px;
	padding: 6px 24px 6px 36px;
	border-radius: 9px;
	border: 1.5px solid var(--border-color);
	font-size: 14px;
	color: var(--text-heading);
	background-color: var(--c-bg);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='M21 21l-4.35-4.35'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: 12px center;
	background-size: 16px;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.eproduct-card-body .dataTables_filter input:focus {
	border-color: var(--primary-orange);
	box-shadow: 0 0 0 3.5px var(--primary-orange-ring);
	outline: none;
}

.eproduct-card-body .dataTables_length {
	overflow: visible;
}

.eproduct-card-body .dataTables_length select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 80px;
	height: 38px;
	padding: 0 30px 0 12px;
	border-radius: 9px;
	border: 1.5px solid var(--border-color);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--text-heading);
	background-color: var(--c-bg);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px 10px;
	cursor: pointer;
}

.eproduct-card-body .dataTables_info {
	padding-top: 16px;
	padding-left: 2px;
	font-size: 13px;
	color: var(--text-muted);
}

.eproduct-card-body .dataTables_paginate {
	padding-top: 10px;
}

.eproduct-card-body .dataTables_paginate .paginate_button {
	display: inline-block;
	padding: 6px 2px;
	margin: 0 2px;
	background: var(--c-bg);
	color: var(--text-body) !important;
	font-size: 13px;
	line-height: 1.4;
	cursor: pointer;
	transition: all 0.15s ease;
}

.eproduct-card-body .dataTables_paginate .paginate_button:hover {
	border-color: var(--primary-orange);
	background: var(--primary-orange-soft);
	color: var(--primary-orange) !important;
}

.eproduct-card-body .dataTables_paginate .paginate_button.current {
	background: var(--primary-orange) !important;
	border-color: var(--primary-orange) !important;
	color: var(--c-bg) !important;
	font-weight: 700;
}

.eproduct-card-body .dataTables_paginate .paginate_button.disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.eproduct-card-body .dataTables_paginate .paginate_button.previous,
.eproduct-card-body .dataTables_paginate .paginate_button.next {
	text-transform: capitalize;
}

@media (max-width: 767.98px) {
	.eproduct-hero {
		padding: 42px 0 96px;
	}

	.eproduct-hero-inner h1 {
		font-size: 27px;
	}

	.eproduct-hero-inner p {
		font-size: 15px;
	}

	.eproduct-content {
		padding: 0 0 52px;
	}

	.eproduct-card {
		margin-top: -62px;
		border-radius: 14px;
	}

	.eproduct-card-header {
		padding: 20px 18px;
	}

	.eproduct-card-body {
		padding: 16px 14px 18px;
	}

	.eproduct-flash {
		margin: 0 14px 14px;
	}

	.eproduct-card-body .dataTables_filter input {
		min-width: 0;
		width: 100%;
	}

	.eproduct-card-body .dataTables_filter {
		width: 100%;
		float: none;
		margin-left: 0;
	}

	.eproduct-card-body .dataTables_length {
		float: none;
	}

	.eproduct-card-body .dataTables_wrapper .row {
		margin: 0;
	}
}