/**
 * Product data tabs — segmented / pill style — plus styling for spec tables
 * authored inside a product's Description.
 *
 * @package TSD_Order_Quote
 */

/* ==========================================================================
   Tabs (segmented / pill)
   ========================================================================== */
.tsd .tsd-tabs__nav {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 24px;
	padding: 4px;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius-sm);
}
.tsd .tsd-tabs__btn {
	appearance: none;
	cursor: pointer;
	padding: 9px 20px;
	background: none !important;
	border: none;
	border-radius: 6px;
	color: var(--tsd-muted-2) !important;
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .5px;
	box-shadow: none !important;
	transition: background .15s, color .15s;
}
.tsd .tsd-tabs__btn:hover { color: #fff !important; background: none !important; }
.tsd .tsd-tabs__btn.is-active,
.tsd .tsd-tabs__btn.is-active:hover,
.tsd .tsd-tabs__btn.is-active:focus {
	background: var(--tsd-green) !important;
	color: #fff !important;
}
.tsd .tsd-tabs__btn:focus { outline: none; }
.tsd .tsd-tabs__btn:focus-visible { outline: 2px solid var(--tsd-green); outline-offset: 2px; }

.tsd .tsd-tabs__panel { display: none; }
.tsd .tsd-tabs__panel.is-active { display: block; }

/* Panel heading + body basics */
.tsd .tsd-tabs__panel .tsd-tabs__title {
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 22px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin: 0 0 14px;
}
.tsd .tsd-tabs__panel p { color: var(--tsd-muted); font-size: 15px; margin: 0 0 12px; }

/* Headings authored inside a product Description (H3), restyled to the theme:
   Rajdhani, bold, normal case. Covers the whole product range's descriptions. */
.tsd .tsd-tabs__panel--description h3 {
	font-family: var(--tsd-font-d) !important;
	font-weight: 700 !important;
	font-size: 20px !important;
	line-height: 1.25 !important;
	color: #fff !important;
	letter-spacing: .3px !important;
	text-transform: none !important;
	margin: 22px 0 10px !important;
}
.tsd .tsd-tabs__panel strong { color: #fff; }
.tsd .tsd-tabs__panel ul { list-style: none; margin: 4px 0 16px; padding: 0; }
.tsd .tsd-tabs__panel li {
	position: relative;
	padding-left: 20px;
	color: var(--tsd-muted);
	font-size: 15px;
	margin-bottom: 8px;
}
.tsd .tsd-tabs__panel li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tsd-green);
}

/* ==========================================================================
   Spec tables authored inside a product Description
   (dark-theme translation of the store's Shoptimizer table CSS)
   ========================================================================== */

/* Main table styling — applies to tables in ANY tab panel: those authored in
   the Description, and WooCommerce's own attribute table in Additional
   information (.shop_attributes). */
.tsd .tsd-tabs__panel table,
.tsd .tsd-tabs__panel table.shop_attributes {
	width: 70%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--tsd-line);
	border-radius: 12px;
	overflow: hidden;
}
/* Base styling for all table header and data cells */
.tsd .tsd-tabs__panel table th,
.tsd .tsd-tabs__panel table td,
.tsd .tsd-tabs__panel table.shop_attributes th,
.tsd .tsd-tabs__panel table.shop_attributes td {
	padding: 8px 16px !important;
	border: none !important;
	border-bottom: 1px solid var(--tsd-line-2) !important;
	text-align: left !important;
	vertical-align: middle !important;
	line-height: 1.5 !important;
	font-style: normal !important;
	color: var(--tsd-ink);
}
/* Last row has no divider */
.tsd .tsd-tabs__panel table tr:last-child th,
.tsd .tsd-tabs__panel table tr:last-child td {
	border-bottom: none !important;
}
/* Filled label column (col 1) + value column (col 2) */
.tsd .tsd-tabs__panel table th:nth-child(1),
.tsd .tsd-tabs__panel table td:nth-child(1) {
	background: var(--tsd-paper-2) !important;
	border-right: 1px solid var(--tsd-line-2) !important;
	color: var(--tsd-muted-2) !important;
}
.tsd .tsd-tabs__panel table th:nth-child(2),
.tsd .tsd-tabs__panel table td:nth-child(2) {
	background: var(--tsd-paper) !important;
	color: var(--tsd-ink) !important;
}
/* First column width */
.tsd .tsd-tabs__panel table th:nth-child(1),
.tsd .tsd-tabs__panel table td:nth-child(1) {
	width: 40% !important;
}
/* Force first column font styling, including nested elements */
.tsd .tsd-tabs__panel table th:nth-child(1),
.tsd .tsd-tabs__panel table td:nth-child(1),
.tsd .tsd-tabs__panel table th:nth-child(1) *,
.tsd .tsd-tabs__panel table td:nth-child(1) * {
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	font-style: normal !important;
}
/* Second column width and word wrapping */
.tsd .tsd-tabs__panel table th:nth-child(2),
.tsd .tsd-tabs__panel table td:nth-child(2) {
	width: 60%;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
@media (max-width: 768px) {
	/* Nav: full width, buttons share the row evenly instead of wrapping onto
	 * separate lines (which read as an awkward vertical stack). */
	.tsd .tsd-tabs__nav {
		display: flex;
		width: 100%;
		flex-wrap: nowrap;
	}
	.tsd .tsd-tabs__btn {
		flex: 1 1 0;
		text-align: center;
		padding: 10px 8px;
		font-size: 13px;
		letter-spacing: .3px;
		white-space: nowrap;
	}

	.tsd .tsd-tabs__panel table,
	.tsd .tsd-tabs__panel table.shop_attributes {
		width: 100% !important;
		display: table !important;
	}
	.tsd .tsd-tabs__panel table thead,
	.tsd .tsd-tabs__panel table tbody,
	.tsd .tsd-tabs__panel table tr,
	.tsd .tsd-tabs__panel table th,
	.tsd .tsd-tabs__panel table td {
		display: revert !important;
	}
	.tsd .tsd-tabs__panel table th:nth-child(1),
	.tsd .tsd-tabs__panel table td:nth-child(1) {
		width: 40% !important;
	}
	.tsd .tsd-tabs__panel table th:nth-child(2),
	.tsd .tsd-tabs__panel table td:nth-child(2) {
		width: 60% !important;
	}
}