/**
 * Cool Bear — PDP tabbed content region.
 *
 * Tabs (Description / Tech Specs / Fitment / Q&A) sit BELOW the
 * configurator (Q12 — configurator-first). Mobile collapses to accordion
 * via :target — graceful no-JS fallback. JS layer (plan 08-06) can hijack
 * for ARIA-correct tablist behaviour.
 */

.cb-tabs {
	margin-top: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--border);
}

.cb-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.cb-tabs__list::-webkit-scrollbar { display: none; }

.cb-tabs__tab {
	flex: 0 0 auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	border: none;
	background: none;
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	position: relative;
	transition: color 150ms ease;
	white-space: nowrap;
}

.cb-tabs__tab:hover,
.cb-tabs__tab:focus-visible { color: var(--wp--preset--color--text); }

.cb-tabs__tab[aria-selected="true"] {
	color: var(--wp--preset--color--text);
}

.cb-tabs__tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	bottom: -1px;
	height: 2px;
	background-color: var(--wp--preset--color--accent);
}

.cb-tabs__panels {
	padding: var(--wp--preset--spacing--50) 0;
}

.cb-tabs__panel {
	display: none;
	/* Full-box panels (operator: PDP read "squished" vs xyz-racing.com's
	   boxed layout). Prose readability comes from the two-column flow +
	   inline figure, not a narrow measure. */
	max-width: none;
}

/* Overview prose is a single column that wraps around the floated inline
   figure — the previous two-column layout squashed the text against the
   image into cramped narrow columns (operator feedback 2026-06). Cap the
   measure so a figure-less panel still doesn't run to 200-char lines. */
@media (min-width: 1024px) {
	#cb-tab-overview > p,
	#cb-tab-overview .cb-hero-copy,
	#cb-tab-overview .cb-vendor-description {
		max-width: 68ch;
	}
}

.cb-tabs__panel[aria-hidden="false"] { display: block; }

/* Wider panels for spec/fitment tables */
.cb-tabs__panel--wide {
	max-width: none;
}

/* -------------------------------------------------------------------------
 *  Spec table (used in "Tech Specs" panel)
 * ------------------------------------------------------------------------- */
.cb-spec-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.cb-spec-table tr {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.cb-spec-table tr:last-child { border-bottom: none; }

.cb-spec-table th,
.cb-spec-table td {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	text-align: left;
	vertical-align: top;
}

.cb-spec-table th {
	color: var(--wp--preset--color--text-muted);
	font-weight: 400;
	width: 40%;
	font-family: var(--wp--preset--font-family--sans);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--wp--preset--font-size--x-small);
}

.cb-spec-table td {
	color: var(--wp--preset--color--text);
}

@media (min-width: 1024px) {
	.cb-spec-table {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--wp--preset--spacing--60);
	}
	.cb-spec-table tbody { display: contents; }
	.cb-spec-table tr { display: grid; grid-template-columns: 40% 1fr; padding: 0; }
}

/* -------------------------------------------------------------------------
 *  Fitment table
 * ------------------------------------------------------------------------- */
.cb-fitment-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.cb-fitment-table th,
.cb-fitment-table td {
	padding: var(--wp--preset--spacing--30);
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.cb-fitment-table th {
	color: var(--wp--preset--color--text-muted);
	font-weight: 600;
	background-color: var(--wp--preset--color--surface-sunken);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--wp--preset--font-size--x-small);
}

.cb-fitment-table td {
	font-family: var(--wp--preset--font-family--mono);
}

/* Q&A list */
.cb-qa { list-style: none; padding: 0; margin: 0; }
.cb-qa__item {
	padding: var(--wp--preset--spacing--40) 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.cb-qa__item:last-child { border-bottom: none; }
.cb-qa__question {
	font-weight: 600;
	color: var(--wp--preset--color--text);
	margin: 0 0 var(--wp--preset--spacing--20);
}
.cb-qa__answer {
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}