/* Bundle Builder Stack — widget styles
   Palette matches the Synthro Lab reference design. */

.bbs-widget, .bbs-tier-grid {
	--bbs-blue: #1D3A94;
	--bbs-blue-dark: #12276B;
	--bbs-blue-light: #3B6FE0;
	--bbs-bg: #F8FAFE;
	--bbs-ink: #0E1729;
	--bbs-ink-soft: #16234A;
	--bbs-muted: #6B7A98;
	--bbs-muted2: #5A6684;
	--bbs-border: #E4E9F4;
	--bbs-border-soft: #E7ECF7;
	--bbs-border-dash: #DDE6F8;
	--bbs-chip-bg: #EEF3FE;
	--bbs-green: #0F7A4C;
	--bbs-teal: #0EA5C6;
	font-family: Poppins, Helvetica, Arial, sans-serif;
	color: var(--bbs-ink);
	box-sizing: border-box;
}
.bbs-widget *, .bbs-tier-grid * { box-sizing: border-box; }

/* ---------- Banner tier grid ---------- */
.bbs-tier-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	max-width: 420px;
	margin-left: auto;
}
.bbs-widget {
    padding: 34px 0 80px;
}
body .bbs-widget .bbs-search input.bbs-search-input {
    all: unset;
    width: 100%;
    border: none !important;
}
.bbs-tier-box {
	border-radius: 14px;
	padding: 16px 0;
	text-align: center;
	border: 1px solid rgba(255,255,255,0.2);
	background: rgba(255,255,255,0.12);
}
.bbs-tier-box-n { font-size: 20px; font-weight: 700; color: #FFFFFF; }
.bbs-tier-box-off { margin-top: 3px; font-size: 14px; font-weight: 600; color: #C7D8F8; }
@media (max-width: 780px) {
	.bbs-tier-box { border-radius: 12px; padding: 12px 0; }
	.bbs-tier-box-n { font-size: 16px; }
	.bbs-tier-box-off { font-size: 12px; }
}

/* ---------- Layout ---------- */
.bbs-widget {
	padding: 34px 0 60px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	gap: 34px;
	align-items: start;
}
.bbs-mobile-bar { display: none; }

/* ---------- Search + category pills ---------- */
.bbs-search {
	background: #FFFFFF;
	border: 1px solid var(--bbs-border);
	border-radius: 16px;
	height: 58px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 18px;
}
.bbs-search-input {
	flex: 1; min-width: 0; border: none; outline: none; background: transparent;
	font-family: inherit; font-size: 17px; color: var(--bbs-ink);
}
.bbs-cats { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.bbs-cat {
	cursor: pointer; height: 44px; padding: 0 20px; border-radius: 999px;
	display: flex; align-items: center; font-size: 14px; font-weight: 700;
	white-space: nowrap; border: 1px solid var(--bbs-border);
	background: #FFFFFF; color: var(--bbs-muted2); user-select: none;
}
.bbs-cat.is-active { border-color: var(--bbs-blue); background: var(--bbs-blue); color: #FFFFFF; }

.bbs-count-label { margin-top: 22px; font-size: 15px; font-weight: 600; color: var(--bbs-muted); }

/* ---------- Product grid ---------- */
.bbs-grid {
	margin-top: 16px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.bbs-card {
	min-width: 0; background: #FFFFFF; border: 1px solid var(--bbs-border-soft);
	border-radius: 20px; overflow: hidden;
	box-shadow: 0 16px 32px -28px rgba(16,36,90,0.45);
}
.bbs-card.is-selected { border-color: var(--bbs-blue); }
.bbs-card-inner { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 18px; height: 100%; }
.bbs-card-img {
	height: 150px; border-radius: 14px; overflow: hidden;
	background: linear-gradient(168deg, #EEF3FE 0%, #DCE5F6 100%);
}
.bbs-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bbs-card-body { min-width: 0; display: flex; flex-direction: column; }
.bbs-card-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bbs-blue); }
.bbs-card-name { margin-top: 2px; font-size: 20px; font-weight: 700; line-height: 1.2; }
.bbs-card-dose-label { margin-top: 10px; font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #8994AE; }
.bbs-card-doses { margin-top: 7px; display: flex; gap: 7px; flex-wrap: wrap; }
.bbs-dose-pill {
	cursor: pointer; border-radius: 9px; padding: 4px 13px; font-size: 13px; font-weight: 700;
	border: 2px solid var(--bbs-border-soft); background: #FFFFFF; color: var(--bbs-muted2);
}
.bbs-dose-pill.is-active { border-color: var(--bbs-blue); background: var(--bbs-chip-bg); color: var(--bbs-ink-soft); }
.bbs-card-footer { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bbs-card-price { font-size: 22px; font-weight: 700; }
.bbs-qty-controls { display: flex; align-items: center; gap: 8px; }
.bbs-qty-btn {
	cursor: pointer; width: 38px; height: 38px; border-radius: 10px; display: flex;
	align-items: center; justify-content: center; font-size: 20px; font-weight: 700; user-select: none;
}
.bbs-qty-minus { border: 1px solid var(--bbs-border-dash); background: #F7F9FE; color: var(--bbs-blue); }
.bbs-qty-plus { background: var(--bbs-blue); color: #FFFFFF; }
.bbs-qty-value { min-width: 26px; text-align: center; font-size: 18px; font-weight: 700; }

.bbs-empty { margin-top: 20px; background: #FFFFFF; border: 1px dashed var(--bbs-border-dash); border-radius: 16px; padding: 40px 24px; text-align: center; font-size: 16px; color: var(--bbs-muted); }

/* ---------- Suggested pairings ---------- */
.bbs-pairings-card { margin-top: 34px; background: #FFFFFF; border: 1px solid var(--bbs-border); border-radius: 20px; padding: 26px 28px; }
.bbs-pairings-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.bbs-pairings-title { font-size: 22px; font-weight: 700; }
.bbs-pairings-hint { font-size: 14px; color: var(--bbs-muted); }
.bbs-pairings-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bbs-pairing-card { min-width: 0; background: var(--bbs-bg); border: 1px solid var(--bbs-border-soft); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; }
.bbs-pairing-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--bbs-teal); }
.bbs-pairing-name { margin-top: 7px; font-size: 18px; font-weight: 700; }
.bbs-pairing-detail { margin-top: 8px; margin-bottom: 16px; font-size: 14px; line-height: 1.45; color: var(--bbs-muted2); }
.bbs-pairing-add {
	cursor: pointer; margin-top: auto; background: #FFFFFF; border: 1px solid var(--bbs-border-dash);
	color: var(--bbs-blue); border-radius: 11px; height: 44px; display: flex; align-items: center;
	justify-content: center; font-size: 14px; font-weight: 700; user-select: none;
}

/* ---------- Stack panel (sticky sidebar) ---------- */
.bbs-stack-panel {
	position: sticky; top: 115px; background: #FFFFFF; border: 1px solid var(--bbs-border);
	border-radius: 22px; overflow: hidden; box-shadow: 0 26px 56px -36px rgba(16,36,90,0.5);
}
.bbs-stack-head { padding: 24px 26px; border-bottom: 1px solid #EDF1FA; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bbs-stack-title { font-size: 21px; font-weight: 700; }
.bbs-vial-pill { background: var(--bbs-chip-bg); color: var(--bbs-blue); border-radius: 999px; padding: 8px 15px; font-size: 14px; font-weight: 700; white-space: nowrap; }

.bbs-stack-progress { padding: 22px 26px 0; }
.bbs-progress-track { height: 10px; border-radius: 6px; background: #EDF1FA; overflow: hidden; }
.bbs-progress-fill { height: 100%; background: linear-gradient(90deg, var(--bbs-blue), var(--bbs-blue-light)); transition: width 240ms ease; }
.bbs-nudge { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--bbs-blue); }
.bbs-nudge.is-maxed { color: var(--bbs-green); }

.bbs-stack-lines { padding: 20px 26px 0; display: flex; flex-direction: column; gap: 12px; }
.bbs-stack-line { background: var(--bbs-bg); border: 1px solid var(--bbs-border-soft); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.bbs-line-img { width: 46px; height: 46px; flex: none; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--bbs-border-soft); overflow: hidden; }
.bbs-line-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bbs-line-body { flex: 1; min-width: 0; }
.bbs-line-name { font-size: 15px; font-weight: 700; line-height: 1.25; }
.bbs-line-meta { margin-top: 2px; font-size: 13px; color: var(--bbs-muted); }
.bbs-line-qty { flex: none; display: flex; align-items: center; gap: 6px; }
.bbs-line-qty-btn { cursor: pointer; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; }
.bbs-line-minus { border: 1px solid var(--bbs-border-dash); background: #FFFFFF; color: var(--bbs-blue); }
.bbs-line-plus { background: var(--bbs-blue); color: #FFFFFF; }
.bbs-line-qty-val { min-width: 20px; text-align: center; font-size: 15px; font-weight: 700; }
.bbs-line-total { flex: none; width: 74px; text-align: right; font-size: 16px; font-weight: 700; }

.bbs-stack-empty { margin: 20px 26px 0; border: 1px dashed var(--bbs-border-dash); border-radius: 14px; padding: 34px 20px; text-align: center; }
.bbs-stack-empty-title { font-size: 16px; font-weight: 700; color: var(--bbs-ink-soft); }
.bbs-stack-empty-sub { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--bbs-muted); }
.bbs-stack-panel.has-items .bbs-stack-empty { display: none; }
.bbs-stack-panel:not(.has-items) .bbs-stack-lines { display: none; }

.bbs-stack-totals { padding: 22px 26px 0; display: flex; flex-direction: column; gap: 11px; }
.bbs-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 16px; color: var(--bbs-muted2); }
.bbs-subtotal { font-weight: 600; color: var(--bbs-ink-soft); }
.bbs-discount-label, .bbs-discount-amt { font-weight: 700; color: var(--bbs-green); }

.bbs-stack-total-bar { margin-top: 20px; padding: 20px 26px; background: var(--bbs-chip-bg); border-top: 1px solid #D7E2F8; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bbs-total-label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bbs-blue); }
.bbs-total-right { text-align: right; }
.bbs-total-amt { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--bbs-blue); line-height: 1; }
.bbs-per-vial { margin-top: 5px; font-size: 13px; font-weight: 600; color: #4A69C0; }

.bbs-stack-footer { padding: 20px 26px 26px; }
.bbs-add-to-cart {
	cursor: pointer; background: var(--bbs-blue); color: #FFFFFF; border-radius: 14px; height: 60px;
	display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700;
	letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 16px 30px -18px rgba(29,58,148,0.6);
	user-select: none; transition: opacity 150ms ease;
}
.bbs-add-to-cart.is-disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.bbs-auto-note { margin-top: 14px; display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--bbs-ink); }
.bbs-dot { width: 8px; height: 8px; border-radius: 50%; background: #16A34A; flex: none; }
.bbs-legal-note { margin-top: 14px; background: #FBFCFE; border: 1px dashed var(--bbs-border-dash); border-radius: 12px; padding: 14px 16px; font-size: 13px; line-height: 1.5; color: var(--bbs-muted); }
.bbs-tier-grid .bbs-tier-box.is-active:not(:has(~ .bbs-tier-box.is-active)) {
	background: #fff;
}

.bbs-tier-grid .bbs-tier-box.is-active:not(:has(~ .bbs-tier-box.is-active)) .bbs-tier-box-n,
.bbs-tier-grid .bbs-tier-box.is-active:not(:has(~ .bbs-tier-box.is-active)) .bbs-tier-box-off {
		color: rgb(29, 58, 148);
}
.bbs-main {
	overflow: hidden;
}
@media (min-width: 1025px) {
	.bbs-card-inner > .bbs-card-footer {
		display: none;
	}
}
/* ---------- Mobile ---------- */
@media (max-width: 1024px) {
	.bbs-card-inner > .bbs-card-body > .bbs-card-footer {
		display: none;
	}
	.bbs-card-footer {
		grid-column: 1 / -1;
		width: 100%;
		margin-top: 0;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.bbs-stack-lines,
	.bbs-stack-progress,
	.bbs-stack-totals{
		padding: 18px 15px 0;
	}
	.bbs-stack-empty {
		margin: 15px 16px 0;
	}
	.bbs-stack-head,
	.bbs-stack-total-bar,
	.bbs-stack-footer{
		padding: 15px;
	}
	.bbs-auto-note {
		margin-top: 0;
	}
	.bbs-widget {
		grid-template-columns: 1fr;
		padding: 18px 0 20px;
		gap: 26px;
	}
	.bbs-stack-line {
		flex-wrap: wrap;
	}
	.bbs-line-img {
		order: 1;
	}
	.bbs-line-body {
		order: 2;
	}
	.bbs-line-total {
		order: 3;
		margin-left: auto;
	}
	.bbs-line-qty {
		order: 4;
		flex: 0 0 100%;
		display: flex;
		justify-content: flex-end;
	}
	.bbs-pairings-card {
		background: none;
		border: none;
		padding: 0;
	}
	.bbs-pairings-head {
		flex-direction: column;
		gap: 8px;
	}
	.bbs-pairings-grid {
		margin-top: 10px;
	}
	.bbs-pairing-card {
		padding: 16px 18px;
		background: rgb(255, 255, 255);
		border: 1px solid rgb(231, 236, 247);
		border-radius: 16px;
	}
	.bbs-pairing-tag {
		font-size: 9px;
	}
	.bbs-pairing-name {
		font-size: 16px;
	}
	.bbs-pairing-detail {
		font-size: 13px;
		margin: 5px 0 12px;
	}
	.bbs-pairing-add {
		background: rgb(247, 249, 254);
		border: 1px solid rgb(221, 230, 248);
		color: rgb(29, 58, 148);
		border-radius: 11px;
	}
	.bbs-pairings-grid {
		grid-template-columns: repeat(3, minmax(280px, 1fr));
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 5px;
	}

	.bbs-pairings-grid::-webkit-scrollbar {
		display: none;
	}

	.bbs-pairing-card {
		min-width: 280px;
	}
	.bbs-grid { grid-template-columns: 1fr; gap: 12px; }
	.bbs-card-inner { grid-template-columns: 104px minmax(0, 1fr); gap: 13px; padding: 14px; }
	.bbs-card-img { height: 104px; border-radius: 13px; }
	.bbs-card-name { font-size: 16px; }
	.bbs-card-footer { padding: 8px 0 0; margin-top: 0; }
	.bbs-qty-btn {
		width: 30px;
		height: 30px;
		font-size: 17px;
	}
	.bbs-qty-value {
		font-size: 16px;
	}
	.bbs-search { height: 50px; border-radius: 13px; padding: 0 15px; }
	.bbs-search-input { font-size: 15px; }
	.bbs-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-top: 14px; }
	.bbs-cats::-webkit-scrollbar { display: none; }
	.bbs-cat { flex: none; height: 40px; padding: 0 17px; font-size: 13px; }

	.bbs-stack-panel { position: static; }
	.bbs-stack-footer .bbs-add-to-cart { display: none; }

	.bbs-mobile-bar {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
		background: rgba(255,255,255,0.97); border-top: 1px solid var(--bbs-border);
		padding: 15px 16px 15px; box-shadow: 0 -12px 30px -22px rgba(16,36,90,0.5);
	}
	.bbs-mobile-progress { height: 6px; }
	.bbs-mobile-bar-row { margin-top: 10px; display: flex; align-items: center; gap: 12px; }
	.bbs-mobile-bar-left { flex: none; }
	.bbs-mobile-bar-label { font-size: 10px; font-weight: 700; letter-spacing: 0.11em; color: #8994AE; }
	.bbs-mobile-bar-total { font-size: 20px; font-weight: 700; }
	.bbs-mobile-add { flex: 1; min-width: 0; height: 52px; border-radius: 12px; font-size: 15px; }
	
	.bbs-total-amt {
		font-size: 22px;
	}
	
	.bbs-pairings-title{
		font-size: 20px;
	}
	.bbs-legal-note {
		padding: 10px 12px;
		font-size: 12px;
	}
	.bbs-vial-pill {
		font-size: 12px;
		padding: 5px 12px;
	}
	
	.bbs-card-price,
	.bbs-stack-title {
		font-size: 18px;
	}
	.bbs-line-total,
	.bbs-stack-empty-title{
		font-size: 15px;
	}
	.bbs-line-name,
	.bbs-row,
	.bbs-nudge{
		font-size: 14px;
	}
	.bbs-auto-note,
	.bbs-stack-empty-sub,
	.bbs-pairings-hint,
	.bbs-count-label{
		font-size: 13px;
	}
	.bbs-line-meta,
	.bbs-per-vial{
		font-size: 12px;
	}
	.bbs-card-cat {
		font-size: 9px;
	}
	.bbs-dose-pill {
		font-size: 12px;
		padding: 4px 8px;
	}
	.bbs-card-dose-label {
		display: none;
	}
	.bbs-card-name {
		margin-bottom: 5px;
		margin-top: 0;
	}
	.bbs-card-doses {
		margin-bottom: 5px;
	}
}