.zsv-spec-table {
	--zsv-left-width: 250px;
	--zsv-image-width: 180px;
	--zsv-option-color: #333;
	--zsv-option-bg: transparent;
	--zsv-hover-color: #8a6035;
	--zsv-hover-bg: transparent;
	--zsv-active-color: #8a6035;
	--zsv-hover-line: #ba8c58;
	--zsv-active-line: #ba8c58;
	--zsv-line-height: 2px;
	--zsv-option-duration: 300ms;
	display: grid;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	gap: 0;
	overflow: visible;
	background-color: #fff;
	border: 1px solid #e9e5df;
}

.zsv-spec-table,
.zsv-spec-table * {
	box-sizing: border-box;
}

.zsv-spec-table .zsv-spec-row {
	display: grid;
	grid-template-columns: minmax(0, var(--zsv-left-width)) minmax(0, 1fr) minmax(0, var(--zsv-image-width));
	align-items: center;
	gap: 28px;
	min-width: 0;
	min-height: 158px;
	padding: 24px;
	margin: 0;
	background: transparent;
	border: 0;
	border-block-end: 1px solid #e9e5df;
	transition: background-color 200ms ease;
}

.zsv-spec-table .zsv-spec-row:last-child { border-block-end-width: 0; }
.zsv-spec-table .zsv-spec-heading { display: flex; align-items: center; gap: 16px; min-width: 0; }
.zsv-spec-table .zsv-spec-heading-text { min-width: 0; overflow-wrap: anywhere; }

.zsv-spec-table .zsv-spec-badge {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 42px;
	max-width: 100%;
	height: 42px;
	padding: 3px;
	border-radius: 50%;
	background: #ba8c58;
	color: #fff;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	overflow-wrap: anywhere;
}

.zsv-spec-table .zsv-spec-title { margin: 0 0 6px; color: #000; font-size: 16px; font-weight: 600; line-height: 1.4; }
.zsv-spec-table .zsv-spec-subtitle { margin: 0; color: #000; font-size: 12px; line-height: 1.5; }
.zsv-spec-table .zsv-spec-options { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; min-width: 0; }

.zsv-spec-table .zsv-spec-option {
	position: relative;
	display: inline-block;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 0;
	border: 0;
	border-radius: 0;
	background: var(--zsv-option-bg);
	color: var(--zsv-option-color);
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	text-align: inherit;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	white-space: pre-line;
	overflow-wrap: anywhere;
	appearance: none;
	cursor: pointer;
	touch-action: manipulation;
	transition: color var(--zsv-option-duration) ease, background-color var(--zsv-option-duration) ease;
}

.zsv-spec-table .zsv-spec-option::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: var(--zsv-line-height);
	background: var(--zsv-hover-line);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--zsv-option-duration) ease;
	pointer-events: none;
}

[dir="rtl"] .zsv-spec-table .zsv-spec-option::after { transform-origin: right center; }
.zsv-spec-table .zsv-spec-option:hover { color: var(--zsv-hover-color); background: var(--zsv-hover-bg); }
.zsv-spec-table .zsv-spec-option:hover::after { transform: scaleX(1); }
.zsv-spec-table .zsv-spec-option.zsv-is-active { color: var(--zsv-active-color); font-weight: 500; }
.zsv-spec-table .zsv-spec-option.zsv-is-active::after { background: var(--zsv-active-line); transform: scaleX(1); }
.zsv-spec-table .zsv-spec-option:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

.zsv-spec-table .zsv-spec-preview {
	justify-self: end;
	width: var(--zsv-image-width);
	max-width: 100%;
	min-width: 0;
	height: 110px;
	margin: 0;
	overflow: hidden;
	border-radius: 4px;
	background: #f3f1ee;
}

.zsv-spec-table .zsv-spec-preview img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
}

.zsv-spec-table .zsv-spec-preview[hidden] {
	display: none !important;
}

@media (max-width: 1024px) {
	.zsv-spec-table .zsv-spec-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.zsv-spec-table .zsv-spec-preview { justify-self: start; }
}

@media (max-width: 767px) {
	.zsv-spec-table .zsv-spec-row { padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.zsv-spec-table .zsv-spec-row,
	.zsv-spec-table .zsv-spec-option,
	.zsv-spec-table .zsv-spec-option::after { transition: none; }
}