/**
 * Bearbones Vehicle Fitment — public surfaces.
 *
 * Plug into the theme's design tokens (--bb-blue, --paper, etc) so the plugin
 * inherits the storefront's look without redefining colours/typography.
 *
 * Most layout is delegated to the theme's existing .bb-picker / .bb-chip /
 * .bb-section-head classes. This file fills the gaps that the plugin owns:
 *   - PDP fitment strip (confirmed-fit / no-fit panels above ATC)
 *   - PDP fitment chart (the 5-column table from the design)
 *   - Picker overlay (header search pill → expands to the full 4-up picker)
 *   - OEM cross-references list under the SKU
 */

/* ─── Picker — labels + cleared button ─────────────────────────────── */

.bb-picker__field-label {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted, #6B7280);
	margin-bottom: 6px;
}
.bb-picker--inverse .bb-picker__field-label {
	color: rgba(255, 255, 255, 0.6);
}

.bb-picker__clear {
	margin-left: auto;
	width: 22px;
	height: 22px;
	border: 1px solid var(--line, #E5E7EB);
	background: transparent;
	color: inherit;
	border-radius: 11px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}
.bb-picker__clear:hover {
	background: var(--paper-2, #F7F8FA);
}

.bb-picker--header[hidden] {
	display: none;
}
.bb-picker--header[data-bb-picker-overlay]:not([hidden]) {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 50;
	background: var(--paper, #FFFFFF);
	border-top: 1px solid var(--line, #E5E7EB);
	padding: 18px 32px;
}

/* ─── PDP fitment strip ────────────────────────────────────────────── */

.bb-fitment-strip {
	margin-top: 24px;
	padding: 16px;
	border-radius: 4px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.bb-fitment-strip--fit  { background: #E9F6EE; }
.bb-fitment-strip--no   { background: #FBEAE9; color: var(--ink-2, #1A1F26); }
.bb-fitment-strip__icon {
	width: 32px;
	height: 32px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.bb-fitment-strip--fit .bb-fitment-strip__icon { background: var(--success, #1F8A4C); }
.bb-fitment-strip--no  .bb-fitment-strip__icon { background: var(--danger, #C0392B); color: var(--paper, #FFFFFF); }
.bb-fitment-strip__title {
	font-size: 14px;
	font-weight: 600;
}
.bb-fitment-strip--fit .bb-fitment-strip__title { color: var(--success, #1F8A4C); }
.bb-fitment-strip__sub {
	margin-top: 2px;
	font-size: 13px;
	color: var(--ink-3, #2A3038);
}

/* ─── Fitment chart ────────────────────────────────────────────────── */

.bb-fitment-chart {
	background: var(--paper-2, #F7F8FA);
	padding: 56px 32px;
	margin-top: 56px;
}
.bb-fitment-chart__table {
	width: 100%;
	border-collapse: collapse;
	background: var(--paper, #FFFFFF);
	border: 1px solid var(--line, #E5E7EB);
	border-radius: 4px;
	overflow: hidden;
	font-size: 13px;
}
.bb-fitment-chart__table thead tr {
	background: var(--ink, #0E1116);
	color: var(--paper, #FFFFFF);
}
.bb-fitment-chart__table th {
	padding: 14px 20px;
	font-family: var(--display, 'Oswald', sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
}
.bb-fitment-chart__table td {
	padding: 14px 20px;
	border-top: 1px solid var(--line-2, #EEF0F3);
}
.bb-fitment-chart__table tr.is-highlight td {
	background: var(--bb-blue-tint, #EAF6FD);
	font-weight: 600;
}
.bb-fitment-chart__fits {
	text-align: center;
}
.bb-fitment-chart__vin {
	font-family: var(--mono, 'JetBrains Mono', monospace);
	font-size: 12px;
	color: var(--muted, #6B7280);
}
.bb-fitment-chart__hint {
	margin-top: 12px;
	font-size: 12px;
	color: var(--muted, #6B7280);
}

/* ─── OEM cross-references list ────────────────────────────────────── */

.bb-pdp__oem-refs {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--line, #E5E7EB);
}
.bb-pdp__oem-refs-list {
	list-style: none;
	padding: 0;
	margin: 8px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 12px;
	color: var(--muted, #6B7280);
}