/* Bulltech Kit Selector – uses the Play With Carbon theme's colours where available. */
.bks {
	--bks-ink: var(--pwc-ink, #151515);
	--bks-gold: var(--pwc-gold, #F2E0A0);
	--bks-red: var(--pwc-red-dark, #B30000);
	--bks-line: var(--pwc-line, #e3e3e1);
	--bks-bg: var(--pwc-bg, #f4f4f3);
	--bks-head: var(--pwc-head, 'Barlow Condensed', 'Arial Narrow', sans-serif);
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 8px 0 48px;
	color: #1b1b1b;
	line-height: 1.5;
}
.bks *, .bks *::before, .bks *::after { box-sizing: border-box; }
.bks button { font-family: inherit; cursor: pointer; }
.bks button:disabled { cursor: default; }
.bks-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bks-head { display: flex; flex-direction: column; gap: 6px; }
.bks-eyebrow { color: var(--bks-red); font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }
.bks-title { margin: 0; font-family: var(--bks-head); font-weight: 700; font-size: 48px; line-height: 1; text-transform: uppercase; color: var(--bks-ink); }
.bks-intro { margin: 0; color: #444; max-width: 660px; }

.bks-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.bks-step { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--bks-line); background: var(--bks-bg); color: var(--bks-ink); font-size: 15px; font-weight: 600; opacity: 0.55; }
.bks-step.is-seen { background: #fff; opacity: 1; }
.bks-step.is-current { border-color: var(--bks-ink); }
.bks-step-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bks-line); font-size: 13px; font-weight: 700; }
.bks-step.is-seen .bks-step-num { background: var(--bks-gold); }
.bks-step.is-current .bks-step-num { background: var(--bks-ink); color: #fff; }

.bks-panel { background: #fff; border: 1px solid var(--bks-line); border-top: 3px solid var(--bks-gold); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06); }
.bks-q { margin: 0; font-family: var(--bks-head); font-weight: 700; font-size: 32px; line-height: 1.1; text-transform: uppercase; color: var(--bks-ink); }
.bks-sub { margin: -8px 0 0; color: #555; }
.bks-h3 { margin: 8px 0 0; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bks-red); }

.bks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.bks-opt { text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 10px; border: 2px solid var(--bks-line); background: #fff; color: var(--bks-ink); font-size: 16px; line-height: 1.4; margin: 0; }
.bks-opt:hover, .bks-opt:focus-visible { border-color: var(--bks-ink); background: #fff; color: var(--bks-ink); }
.bks-opt.is-on { border-color: var(--bks-ink); background: #fbf5de; }
.bks-opt-icon { display: inline-flex; width: 48px; height: 48px; border-radius: 10px; background: var(--bks-ink); color: var(--bks-gold); align-items: center; justify-content: center; }
.bks-opt-title { font-size: 19px; font-weight: 700; }
.bks-opt-line { font-size: 15px; color: #555; }
.bks-size { display: flex; align-items: flex-end; height: 46px; }
.bks-size span { display: block; border: 2px solid var(--bks-ink); border-radius: 4px; background: var(--bks-gold); }
.bks-check { flex-direction: row; align-items: center; gap: 12px; }
.bks-tick { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 6px; border: 2px solid var(--bks-ink); font-weight: 700; }
.bks-check.is-on .bks-tick { background: var(--bks-gold); }

.bks-actions { display: flex; justify-content: flex-end; }
.bks-btn { padding: 13px 24px; border-radius: 8px; border: 1px solid #d9c27a; background: var(--bks-gold); color: var(--bks-ink); font-size: 17px; font-weight: 700; line-height: 1.2; }
.bks-btn:hover, .bks-btn:focus-visible { background: #e9d184; color: var(--bks-ink); }
.bks-btn:disabled { opacity: 0.6; }
.bks-btn-ghost { padding: 10px 16px; border-radius: 8px; border: 1px solid #cfcfcd; background: #fff; color: var(--bks-ink); font-weight: 600; }
.bks-btn-ghost:hover, .bks-btn-ghost:focus-visible { border-color: var(--bks-ink); background: #fff; color: var(--bks-ink); }
.bks-btn-dark, .bks-btn-dark:visited { align-self: flex-start; padding: 9px 14px; border-radius: 8px; background: var(--bks-ink); color: #fff; text-decoration: none; font-weight: 600; }
.bks-btn-dark:hover, .bks-btn-dark:focus { color: var(--bks-gold); }
.bks-link { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--bks-red); font-weight: 600; text-decoration: underline; }
.bks-link:hover, .bks-link:focus-visible { background: none; color: var(--bks-red); }
.bks-back { border-top: 1px solid var(--bks-line); padding-top: 16px; }

.bks-result { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.bks-result-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bks-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }

.bks-item { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--bks-line); border-radius: 10px; background: #fff; }
.bks-item.is-off { opacity: 0.55; }
.bks-item-img { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 8px; border: 1px solid var(--bks-line); overflow: hidden; background: #fff; display: block; }
.bks-item-img img { display: block; width: 100%; height: 100%; object-fit: contain; margin: 0; }
.bks-item.is-compact .bks-item-img { width: 60px; height: 60px; }
.bks-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bks-item-name, .bks-item-name:visited { font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--bks-ink); text-decoration: none; }
.bks-item.is-compact .bks-item-name { font-size: 15px; font-weight: 600; }
.bks-item-name:hover, .bks-item-name:focus { color: var(--bks-red); text-decoration: underline; }
.bks-item-why { font-size: 14px; color: #555; line-height: 1.4; }
.bks-item-price { font-weight: 700; font-size: 17px; white-space: nowrap; }
.bks-item.is-compact .bks-item-price { font-size: 15px; }
.bks-item-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.bks-var select { max-width: 100%; margin-top: 4px; padding: 5px 8px; border: 1px solid #cfcfcd; border-radius: 6px; background: #fff; font: inherit; font-size: 14px; }
.bks-swap { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.bks-swap button, .bks-toggle { padding: 5px 10px; border-radius: 6px; border: 1px solid #cfcfcd; background: #fff; color: var(--bks-ink); font-size: 14px; font-weight: 600; line-height: 1.3; }
.bks-swap button:disabled { opacity: 0.4; }
.bks-swap button:hover:not(:disabled), .bks-toggle:hover, .bks-toggle-sm:hover { border-color: var(--bks-ink); background: #fff; color: var(--bks-ink); }
.bks-toggle-sm { width: 34px; height: 34px; padding: 0; border-radius: 6px; border: 1px solid #cfcfcd; background: #fff; color: var(--bks-ink); font-size: 18px; line-height: 1; }
.bks-oos { font-size: 13px; font-weight: 600; color: var(--bks-red); white-space: nowrap; }

.bks-station { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 18px; border-radius: 10px; background: var(--bks-ink); color: #fff; }
.bks-station > span { flex: 1 1 300px; min-width: 0; }
.bks-station strong { color: var(--bks-gold); }

.bks-summary { flex: 1 1 280px; min-width: 0; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 10px; background: #fbf5de; border: 1px solid #ecdca0; }
.bks-summary-title { font-family: var(--bks-head); font-weight: 700; font-size: 24px; text-transform: uppercase; color: var(--bks-ink); }
.bks-row { display: flex; justify-content: space-between; gap: 12px; }
.bks-total { font-size: 20px; }
.bks-note { font-size: 13px; color: #555; }
.bks-add { width: 100%; }
.bks-msg { margin: 0; padding: 10px 12px; border-radius: 8px; background: #fff; border: 1px solid #ecdca0; font-size: 15px; }
.bks-msg.is-bad { border-color: var(--bks-red); }
.bks-help { border-top: 1px solid #ecdca0; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }

@media (max-width: 600px) {
	.bks-title { font-size: 36px; }
	.bks-q { font-size: 26px; }
	.bks-panel { padding: 18px 14px; }
	.bks-item:not(.is-compact) { flex-wrap: wrap; }
	.bks-item:not(.is-compact) .bks-item-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
	.bks-summary { position: static; }
}