/* ============================================================================
   Public buying-group pages (/buying-groups, /buying-groups/<group>,
   /buying-groups/how-it-works, /buying-groups/mine).
   Same palette and type as the storefront (wize_web_shop wize_theme.css), kept
   self-contained so the pages do not depend on the shop's CSS. Mobile first.
   ========================================================================== */

:root {
	--bg-brand: #0B5C57;
	--bg-brand-2: #0F766E;
	--bg-teal: #14B8A6;
	--bg-mint: #5EEAD4;
	--bg-gold: #C9A24A;
	--bg-gold-soft: #F6EBCF;
	--bg-onyx: #13201F;
	--bg-ink: #2F403E;
	--bg-muted: #6B7E7A;
	--bg-page: #F2F7F6;
	--bg-line: #E2ECEA;
	--bg-card: #ffffff;
	--bg-sale: #B42318;
	--bg-warn: #B45309;
	--bg-shadow-sm: 0 1px 2px rgba(19, 32, 31, .06), 0 1px 3px rgba(19, 32, 31, .05);
	--bg-shadow-md: 0 6px 18px rgba(19, 32, 31, .08), 0 2px 6px rgba(19, 32, 31, .05);
	--bg-shadow-lg: 0 18px 40px rgba(11, 92, 87, .16), 0 6px 14px rgba(19, 32, 31, .08);
	--bg-radius: 16px;
	--bg-radius-sm: 10px;
	--bg-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	/* headings use the platform face too (Inter, from the website theme) */
	--bg-display: var(--bg-font);
}

.bgp { font-family: var(--bg-font); color: var(--bg-ink); -webkit-font-smoothing: antialiased; padding-bottom: 72px; }
.bgp *, .bgp *::before, .bgp *::after { box-sizing: border-box; }
.bgp a { color: var(--bg-brand-2); }
.bgp a:hover { color: var(--bg-brand); }
.bgp h1, .bgp h2, .bgp h3 { color: var(--bg-onyx); }
.bgp .display { font-family: var(--bg-display); font-weight: 800; letter-spacing: -.02em; }
.bgp-wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.bgp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* top row: breadcrumb + account/cart buttons from the shop */
.bgp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 10px; font-size: .86rem; }
.bgp-crumbs { color: var(--bg-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bgp-crumbs a { color: var(--bg-muted); text-decoration: none; }
.bgp-crumbs a:hover { color: var(--bg-brand); }
.bgp-topbar-actions { display: flex; gap: 8px; align-items: center; }

/* ---------- buttons ---------- */
.bgp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font: 600 .95rem/1 var(--bg-font); padding: 13px 22px; border-radius: 999px;
	border: 1.5px solid transparent; cursor: pointer; text-decoration: none !important;
	transition: background-color .18s, color .18s, box-shadow .18s, transform .12s, border-color .18s;
	white-space: nowrap;
}
.bgp-btn:active { transform: translateY(1px); }
.bgp-btn:focus-visible { outline: 3px solid rgba(20, 184, 166, .45); outline-offset: 2px; }
.bgp-btn-primary { background: linear-gradient(135deg, var(--bg-brand), var(--bg-brand-2)); color: #fff !important; box-shadow: 0 10px 22px -10px rgba(11, 92, 87, .6); }
.bgp-btn-primary:hover { background: var(--bg-brand-2); color: #fff !important; }
.bgp-btn-gold { background: linear-gradient(135deg, #D8B45C, var(--bg-gold)); color: #1d1606 !important; box-shadow: 0 10px 24px -10px rgba(201, 162, 74, .8); }
.bgp-btn-gold:hover { background: #D8B45C; }
.bgp-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff !important; }
.bgp-btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.bgp-btn-outline { background: #fff; border-color: var(--bg-line); color: var(--bg-onyx) !important; }
.bgp-btn-outline:hover { border-color: var(--bg-brand-2); color: var(--bg-brand) !important; }
.bgp-btn[disabled], .bgp-btn.is-disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.bgp-btn-block { width: 100%; }

/* ---------- hero ---------- */
.bgp-hero {
	position: relative; overflow: hidden; color: #E6F4F1; border-radius: 0 0 28px 28px;
	background:
		radial-gradient(900px 400px at 85% -10%, rgba(94, 234, 212, .22), transparent 60%),
		radial-gradient(700px 380px at -10% 110%, rgba(201, 162, 74, .20), transparent 60%),
		linear-gradient(160deg, #0A1F1E 0%, #0B3B38 45%, #0B5C57 100%);
	padding: 40px 0 44px; margin: 0 -15px 0;
}
.bgp-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.bgp-hero > * { position: relative; z-index: 1; }
.bgp-hero h1 { color: #fff; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.05; margin: 10px 0 14px; }
.bgp-hero h1 em { font-style: normal; color: var(--bg-mint); }
.bgp-hero p.lead { font-size: 1.05rem; color: rgba(230, 244, 241, .85); max-width: 620px; margin: 0 0 22px; }
.bgp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bg-mint); }
.bgp-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-mint); box-shadow: 0 0 0 0 rgba(94, 234, 212, .7); animation: bgp-pulse 2s infinite; }
@keyframes bgp-pulse { 0% { box-shadow: 0 0 0 0 rgba(94, 234, 212, .6); } 70% { box-shadow: 0 0 0 10px rgba(94, 234, 212, 0); } 100% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0); } }
.bgp-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bgp-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 28px; max-width: 640px; }
.bgp-stat { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 12px 14px; backdrop-filter: blur(6px); }
.bgp-stat b { display: block; font-family: var(--bg-display); font-size: 1.5rem; color: #fff; line-height: 1.1; }
.bgp-stat span { font-size: .78rem; color: rgba(230, 244, 241, .75); }
.bgp-steps-strip { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 26px; }
.bgp-steps-strip div { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: rgba(230, 244, 241, .88); }
.bgp-steps-strip i { font-style: normal; flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; color: #0A1F1E; background: var(--bg-mint); }

/* ---------- sections ---------- */
.bgp-section { margin-top: 40px; }
.bgp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.bgp-section-head h2 { font-size: 1.6rem; margin: 0; display: flex; align-items: center; gap: 10px; }
.bgp-section-head .count { font: 600 .8rem var(--bg-font); color: var(--bg-muted); background: var(--bg-card); border: 1px solid var(--bg-line); border-radius: 999px; padding: 3px 10px; }
.bgp-section-head p { margin: 0; color: var(--bg-muted); font-size: .9rem; }
.bgp-empty { background: var(--bg-card); border: 1px dashed var(--bg-line); border-radius: var(--bg-radius); padding: 28px 20px; text-align: center; color: var(--bg-muted); }
.bgp-empty h3 { font-size: 1.15rem; margin: 0 0 6px; }

/* ---------- cards ---------- */
.bgp-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.bgp-card {
	position: relative; display: flex; flex-direction: column; background: var(--bg-card);
	border: 1px solid var(--bg-line); border-radius: var(--bg-radius); overflow: hidden;
	box-shadow: var(--bg-shadow-sm); transition: box-shadow .2s, transform .2s, border-color .2s;
	text-decoration: none !important; color: inherit !important;
}
.bgp-card:hover, .bgp-card:focus-within { box-shadow: var(--bg-shadow-lg); transform: translateY(-3px); border-color: #cfe3df; }
.bgp-card-media { position: relative; aspect-ratio: 16 / 10; background: radial-gradient(120% 120% at 50% 30%, #fff 0%, #fff 55%, #EEF5F3 100%); display: grid; place-items: center; overflow: hidden; }
.bgp-card-media img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.bgp-card-media .ph { font-family: var(--bg-display); font-size: 3rem; color: #cfe3df; }
.bgp-chip { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font: 700 .72rem var(--bg-font); letter-spacing: .04em; text-transform: uppercase; background: #fff; color: var(--bg-onyx); box-shadow: var(--bg-shadow-sm); }
.bgp-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tone-live { color: #0F766E; }
.tone-soon { color: #6D28D9; }
.tone-locked { color: var(--bg-warn); }
.tone-closed { color: var(--bg-muted); }
.tone-paused { color: var(--bg-muted); }
.bgp-save {
	position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, #D8B45C, var(--bg-gold)); color: #1d1606;
	border-radius: 12px; padding: 7px 11px; text-align: center; line-height: 1.05; box-shadow: 0 8px 18px -8px rgba(201, 162, 74, .9);
}
.bgp-save b { display: block; font: 700 1.25rem var(--bg-font); }
.bgp-save small { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.bgp-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.bgp-card-title { font: 700 1.08rem/1.3 var(--bg-font); color: var(--bg-onyx); margin: 0; }
.bgp-card-sub { font-size: .85rem; color: var(--bg-muted); margin: -6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bgp-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bgp-price { font: 700 1.35rem var(--bg-font); color: var(--bg-onyx); }
.bgp-price-from { font-size: .78rem; color: var(--bg-muted); font-weight: 600; }
.bgp-strike { color: var(--bg-muted); text-decoration: line-through; font-size: .9rem; }
.bgp-signin-note { font-size: .82rem; color: var(--bg-muted); }
.bgp-signin-note a { font-weight: 600; }
.bgp-meta { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; color: var(--bg-muted); }
.bgp-meta b { color: var(--bg-onyx); font-weight: 600; }
.bgp-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.bgp-card-cta { font-weight: 700; font-size: .9rem; color: var(--bg-brand-2); display: inline-flex; gap: 6px; align-items: center; }
.bgp-card-cta svg { transition: transform .2s; }
.bgp-card:hover .bgp-card-cta svg { transform: translateX(3px); }
.bgp-card.is-closed .bgp-card-media img { filter: grayscale(.6); opacity: .85; }

/* mini ladder revealed on hover / focus (always visible on touch) */
.bgp-mini { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.bgp-mini span { display: block; border-radius: 8px; background: var(--bg-page); padding: 6px 4px; text-align: center; font-size: .7rem; color: var(--bg-muted); line-height: 1.2; }
.bgp-mini span b { display: block; color: var(--bg-onyx); font-size: .78rem; }
.bgp-mini span.on { background: var(--bg-brand); color: #cfeee9; }
.bgp-mini span.on b { color: #fff; }
@media (hover: hover) {
	.bgp-mini-wrap { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .25s ease, opacity .2s ease; }
	.bgp-card:hover .bgp-mini-wrap, .bgp-card:focus-within .bgp-mini-wrap { max-height: 80px; opacity: 1; }
}

/* ---------- progress ---------- */
.bgp-progress { position: relative; height: 10px; border-radius: 999px; background: #E3EEEC; overflow: visible; }
.bgp-progress > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--bg-teal), var(--bg-brand)); min-width: 6px; transition: width .6s ease; }
.bgp-progress.is-done > i { background: linear-gradient(90deg, #D8B45C, var(--bg-gold)); }
.bgp-progress .mk { position: absolute; top: -3px; width: 2px; height: 16px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(19, 32, 31, .12); transform: translateX(-1px); }
.bgp-progress .mk em { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .66rem; color: var(--bg-muted); white-space: nowrap; }
.bgp-progress-labels { display: flex; justify-content: space-between; font-size: .8rem; color: var(--bg-muted); margin-top: 6px; }
.bgp-progress-labels b { color: var(--bg-onyx); }
.bgp-progress.has-marks { margin-bottom: 18px; }

/* ---------- group page ---------- */
.bgp-ghero { padding: 28px 0 32px; }
.bgp-ghero-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.bgp-ghero-media { background: radial-gradient(120% 120% at 50% 30%, #fff 0%, #fff 55%, #E7F1EF 100%); border-radius: 22px; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }
.bgp-ghero-media img { width: 100%; height: 100%; object-fit: contain; padding: 22px; }
.bgp-ghero h1 { font-size: clamp(1.8rem, 6vw, 2.8rem); margin: 8px 0 10px; }
.bgp-ghero .lead { margin-bottom: 16px; }
.bgp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.bgp-badges li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #E6F4F1; }
.bgp-badges li svg { color: var(--bg-mint); flex: 0 0 auto; }
.bgp-countdown { display: flex; gap: 8px; margin: 6px 0 4px; }
.bgp-countdown div { min-width: 62px; text-align: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 8px 6px; }
.bgp-countdown b { display: block; font: 700 1.5rem var(--bg-font); color: #fff; font-variant-numeric: tabular-nums; }
.bgp-countdown span { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(230, 244, 241, .7); }
.bgp-hero-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; margin: 14px 0 6px; }
.bgp-hero-price .now { font: 700 2.2rem var(--bg-font); color: #fff; }
.bgp-hero-price .was { color: rgba(230, 244, 241, .6); text-decoration: line-through; }
.bgp-hero-price .save { background: var(--bg-gold); color: #1d1606; font-weight: 700; border-radius: 999px; padding: 5px 12px; font-size: .9rem; }
.bgp-hero-note { font-size: .85rem; color: rgba(230, 244, 241, .72); }
.bgp-hero-note a { color: var(--bg-mint); }
.bgp-hero .bgp-progress { background: rgba(255, 255, 255, .14); }
.bgp-hero .bgp-progress .mk { background: rgba(255, 255, 255, .7); box-shadow: none; }
.bgp-hero .bgp-progress .mk em, .bgp-hero .bgp-progress-labels { color: rgba(230, 244, 241, .7); }
.bgp-hero .bgp-progress-labels b { color: #fff; }
.bgp-gap { margin-top: 10px; font-size: .95rem; color: #fff; }
.bgp-gap b { color: var(--bg-mint); }

.bgp-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; font-size: .92rem; margin: 16px 0 0; background: var(--bg-gold-soft); color: #4a3a12; border: 1px solid #ecd9a6; }
.bgp-banner.tone-info { background: #EAF4F1; border-color: #cfe3df; color: var(--bg-brand); }
.bgp-banner.tone-alert { background: #FDECEA; border-color: #f6c9c4; color: var(--bg-sale); }
.bgp-banner.tone-warn, .bgp-banner.tone-locked { background: #FFF4E5; border-color: #f7d9ae; color: var(--bg-warn); }
.bgp-banner.tone-ok, .bgp-banner.tone-free { background: #EAF4F1; border-color: #cfe3df; color: var(--bg-brand); }
.bgp-banner.tone-muted { background: var(--bg-page); border-color: var(--bg-line); color: var(--bg-muted); }

.bgp-layout { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 26px; }
.bgp-panel { background: var(--bg-card); border: 1px solid var(--bg-line); border-radius: var(--bg-radius); padding: 20px; box-shadow: var(--bg-shadow-sm); }
.bgp-panel + .bgp-panel { margin-top: 0; }
.bgp-panel h2 { font-size: 1.3rem; margin: 0 0 4px; }
.bgp-panel .sub { color: var(--bg-muted); font-size: .88rem; margin: 0 0 16px; }
.bgp-stack { display: grid; gap: 22px; }

/* ladder table */
.bgp-ladder-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.bgp-ladder { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: .92rem; min-width: 280px; }
.bgp-ladder th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bg-muted); font-weight: 700; text-align: right; padding: 0 12px 2px; white-space: nowrap; }
.bgp-ladder th:first-child { text-align: left; }
.bgp-ladder td { background: var(--bg-page); padding: 12px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bgp-ladder td:first-child { text-align: left; border-radius: 10px 0 0 10px; font-weight: 600; color: var(--bg-onyx); }
.bgp-ladder td:last-child { border-radius: 0 10px 10px 0; }
.bgp-ladder td .pct { display: block; font-size: .72rem; color: var(--bg-brand-2); font-weight: 600; }
.bgp-ladder td .price { font-weight: 700; color: var(--bg-onyx); }
.bgp-ladder tr.is-reached td { background: #E6F2EF; }
.bgp-ladder tr.is-current td { background: linear-gradient(135deg, var(--bg-brand), var(--bg-brand-2)); color: #fff; }
.bgp-ladder tr.is-current td .price, .bgp-ladder tr.is-current td:first-child { color: #fff; }
.bgp-ladder tr.is-current td .pct { color: var(--bg-mint); }
.bgp-ladder .here { display: inline-block; margin-left: 8px; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: var(--bg-gold); color: #1d1606; vertical-align: middle; }
.bgp-ladder tr.bgp-ladder-group th { text-align: center; padding-bottom: 0; color: var(--bg-onyx); }
.bgp-ladder-title { font-weight: 700; margin: 14px 0 0; color: var(--bg-onyx); }
.bgp-gap-note { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #FBF6E9; border: 1px solid #ecd9a6; font-size: .92rem; color: #4a3a12; }
.bgp-gap-note b { color: #1d1606; }

/* key facts */
.bgp-facts { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.bgp-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--bg-line); font-size: .9rem; }
.bgp-facts > div:last-child { border-bottom: 0; }
.bgp-facts dt { color: var(--bg-muted); font-weight: 500; }
.bgp-facts dd { margin: 0; text-align: right; color: var(--bg-onyx); font-weight: 600; }

/* steps */
.bgp-steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 14px; }
.bgp-steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 12px; font-size: .92rem; }
.bgp-steps li::before { content: counter(s); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--bg-brand), var(--bg-teal)); }
.bgp-steps b { color: var(--bg-onyx); display: block; }

/* join panel */
.bgp-join { position: relative; }
.bgp-join h2 { margin-bottom: 2px; }
.bgp-qty { display: flex; align-items: center; border: 1.5px solid var(--bg-line); border-radius: 999px; overflow: hidden; background: #fff; }
.bgp-qty button { width: 46px; height: 46px; border: 0; background: transparent; font-size: 1.3rem; color: var(--bg-brand); cursor: pointer; }
.bgp-qty button:hover { background: var(--bg-page); }
.bgp-qty input { flex: 1; min-width: 0; height: 46px; border: 0; text-align: center; font: 700 1.1rem var(--bg-font); color: var(--bg-onyx); -moz-appearance: textfield; }
.bgp-qty input::-webkit-outer-spin-button, .bgp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bgp-field { display: grid; gap: 6px; margin-bottom: 12px; }
.bgp-field label { font-size: .8rem; font-weight: 600; color: var(--bg-onyx); }
.bgp-field select, .bgp-field input[type=email], .bgp-field input[type=text] { height: 46px; border: 1.5px solid var(--bg-line); border-radius: 12px; padding: 0 14px; font: 500 1rem var(--bg-font); color: var(--bg-onyx); background: #fff; width: 100%; }
.bgp-field select:focus, .bgp-field input:focus { outline: none; border-color: var(--bg-brand-2); box-shadow: 0 0 0 3px rgba(11, 92, 87, .12); }
.bgp-variant-qty { display: grid; gap: 8px; margin-bottom: 12px; }
.bgp-variant-qty .row { display: grid; grid-template-columns: 1fr 140px; gap: 10px; align-items: center; font-size: .9rem; }
.bgp-variant-qty .row .bgp-qty button { width: 38px; height: 40px; }
.bgp-variant-qty .row .bgp-qty input { height: 40px; font-size: 1rem; }
.bgp-join-total { display: flex; justify-content: space-between; font-size: .92rem; margin: 6px 0 14px; color: var(--bg-muted); }
.bgp-join-total b { color: var(--bg-onyx); }
/* Order box estimate: subtotal, delivery, tax, total, deposit */
.bgp-join-sum { margin: 6px 0 4px; font-size: .88rem; }
.bgp-join-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--bg-muted); }
.bgp-join-sum dt { font-weight: 500; }
.bgp-join-sum dd { margin: 0; text-align: right; color: var(--bg-onyx); font-variant-numeric: tabular-nums; }
.bgp-join-sum dd.is-note { color: var(--bg-muted); font-style: italic; }
.bgp-join-sum dd small { color: var(--bg-muted); font-size: .72rem; font-weight: 500; }
.bgp-join-sum .is-total { border-top: 1px solid var(--bg-line); margin-top: 4px; padding-top: 7px; font-size: .94rem; }
.bgp-join-sum .is-total dt, .bgp-join-sum .is-total dd { color: var(--bg-onyx); font-weight: 700; }
.bgp-join-sum .is-deposit dd { font-weight: 700; color: var(--bg-brand); }
.bgp-check { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; margin: 0 0 14px; }
.bgp-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--bg-brand); flex: 0 0 auto; }
.bgp-msg { font-size: .88rem; border-radius: 10px; padding: 10px 12px; margin-top: 12px; display: none; }
.bgp-msg.is-on { display: block; }
.bgp-msg.is-error { background: #FDECEA; color: var(--bg-sale); }
.bgp-msg.is-ok { background: #EAF4F1; color: var(--bg-brand); }
.bgp-step[hidden] { display: none !important; }
.bgp-fine { font-size: .78rem; color: var(--bg-muted); margin: 12px 0 0; }
.bgp-code { letter-spacing: .5em; text-align: center; font-weight: 700 !important; font-size: 1.3rem !important; }

/* video + downloads */
.bgp-video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #0A1F1E, #0B5C57); }
.bgp-video button { all: unset; cursor: pointer; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; text-align: center; }
.bgp-video button:focus-visible { outline: 3px solid var(--bg-mint); outline-offset: -3px; }
.bgp-video .play { width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, .15); border: 1.5px solid rgba(255, 255, 255, .5); display: grid; place-items: center; margin: 0 auto 10px; transition: transform .2s, background .2s; }
.bgp-video button:hover .play { transform: scale(1.06); background: rgba(255, 255, 255, .25); }
.bgp-video small { display: block; font-size: .74rem; opacity: .7; margin-top: 4px; max-width: 280px; }
.bgp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bgp-files { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.bgp-files a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bg-line); text-decoration: none !important; color: var(--bg-onyx) !important; background: var(--bg-page); transition: border-color .15s, background .15s; }
.bgp-files a:hover { border-color: var(--bg-brand-2); background: #fff; }
.bgp-files .ext { flex: 0 0 auto; font: 700 .68rem var(--bg-font); padding: 6px 7px; border-radius: 6px; background: var(--bg-sale); color: #fff; }
.bgp-files .nm { flex: 1; font-weight: 600; font-size: .9rem; text-transform: capitalize; }
.bgp-files .sz { font-size: .78rem; color: var(--bg-muted); }

.bgp-rich { font-size: .94rem; line-height: 1.6; }
.bgp-rich :first-child { margin-top: 0; }
.bgp-faq details { border-bottom: 1px solid var(--bg-line); padding: 12px 0; }
.bgp-faq details:last-child { border-bottom: 0; }
.bgp-faq summary { cursor: pointer; font-weight: 600; color: var(--bg-onyx); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.bgp-faq summary::-webkit-details-marker { display: none; }
.bgp-faq summary::after { content: "+"; font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--bg-brand-2); }
.bgp-faq details[open] summary::after { content: "–"; }
.bgp-faq details > div { padding-top: 8px; font-size: .92rem; line-height: 1.6; }
.bgp-legal-links { font-size: .84rem; color: var(--bg-muted); margin-top: 18px; }

/* sticky mobile join bar (06 §13.4) */
.bgp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--bg-line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 -10px 30px -12px rgba(19, 32, 31, .2); }
.bgp-sticky .t { font-size: .78rem; color: var(--bg-muted); line-height: 1.2; }
.bgp-sticky .t b { display: block; font-size: 1.05rem; color: var(--bg-onyx); }

/* how it works */
.bgp-doc { max-width: 820px; }
.bgp-doc h2 { font-size: 1.5rem; margin: 36px 0 12px; }
.bgp-doc p, .bgp-doc li { font-size: .98rem; line-height: 1.65; }
.bgp-table { width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--bg-line); }
.bgp-table th, .bgp-table td { padding: 11px 12px; border-bottom: 1px solid var(--bg-line); text-align: left; vertical-align: top; }
.bgp-table thead th { background: var(--bg-page); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bg-muted); }
.bgp-table tbody th { font-weight: 600; color: var(--bg-onyx); }
.bgp-table tr:last-child td, .bgp-table tr:last-child th { border-bottom: 0; }

/* my buying groups */
.bgp-mine { display: grid; gap: 16px; }
.bgp-mine-card { background: #fff; border: 1px solid var(--bg-line); border-radius: var(--bg-radius); box-shadow: var(--bg-shadow-sm); overflow: hidden; }
.bgp-mine-head { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 16px; align-items: center; }
.bgp-mine-head img, .bgp-mine-head .ph { width: 64px; height: 64px; border-radius: 12px; object-fit: contain; background: var(--bg-page); display: grid; place-items: center; color: #cfe3df; font-family: var(--bg-display); font-size: 1.6rem; }
.bgp-mine-head h3 { font-size: 1.05rem; margin: 0 0 4px; }
.bgp-mine-head h3 a { color: var(--bg-onyx); text-decoration: none; }
.bgp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.bgp-pill { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--bg-page); color: var(--bg-ink); border: 1px solid var(--bg-line); }
.bgp-mine-body { padding: 0 16px 16px; }
.bgp-mine-body .bgp-banner { margin: 0 0 12px; }
.bgp-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bgp-kv div { background: var(--bg-page); border-radius: 10px; padding: 10px 12px; }
.bgp-kv span { display: block; font-size: .72rem; color: var(--bg-muted); text-transform: uppercase; letter-spacing: .05em; }
.bgp-kv b { font-size: 1rem; color: var(--bg-onyx); }
.bgp-lines { width: 100%; font-size: .88rem; margin-top: 12px; border-collapse: collapse; }
.bgp-lines td { padding: 7px 0; border-top: 1px solid var(--bg-line); }
.bgp-lines td.r { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- breakpoints ---------- */
@media (min-width: 640px) {
	.bgp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bgp-steps-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bgp-kv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bgp-hero { padding: 56px 0 60px; }
}
@media (min-width: 992px) {
	.bgp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bgp-ghero-grid { grid-template-columns: 1.05fr .95fr; gap: 40px; }
	.bgp-layout { grid-template-columns: minmax(0, 1fr) 380px; }
	.bgp-aside { position: sticky; top: 84px; }
	.bgp-sticky { display: none; }
	.bgp-hero { padding: 72px 0 76px; }
	.bgp { padding-bottom: 24px; }
}
@media (max-width: 420px) {
	.bgp-hero-stats { grid-template-columns: 1fr 1fr; }
	.bgp-countdown div { min-width: 54px; }
}
@media (prefers-reduced-motion: reduce) {
	.bgp *, .bgp *::before, .bgp *::after { animation: none !important; transition: none !important; }
}

/* my buying groups: phase chip inline with the pills */
.bgp-pills .bgp-chip { position: static; box-shadow: none; border: 1px solid var(--bg-line); padding: 3px 9px; }

/* deposit step: Stripe Payment Element */
.bgp-pay-element { min-height: 120px; padding: 4px 0; }

/* ---- Small utilities (were inline style= attributes in the templates) ---- */
.bgp .bgp-m-0-0-6 { margin: 0 0 6px !important; }
.bgp .bgp-m-0-0-10 { margin: 0 0 10px !important; }
.bgp .bgp-m-0-0-12 { margin: 0 0 12px !important; }
.bgp .bgp-m-10-0-0 { margin: 10px 0 0 !important; }
.bgp .bgp-m-12-0-0 { margin: 12px 0 0 !important; }
.bgp .bgp-m-16-0-0 { margin: 16px 0 0 !important; }
.bgp .bgp-m-18-0-0 { margin: 18px 0 0 !important; }
.bgp .bgp-mt-8 { margin-top: 8px !important; }
.bgp .bgp-mt-10 { margin-top: 10px !important; }
.bgp .bgp-mt-12 { margin-top: 12px !important; }
.bgp .bgp-mt-14 { margin-top: 14px !important; }
.bgp .bgp-mt-16 { margin-top: 16px !important; }
.bgp .bgp-mt-20 { margin-top: 20px !important; }
.bgp .bgp-mt-22 { margin-top: 22px !important; }
.bgp .bgp-mt-24 { margin-top: 24px !important; }
.bgp .bgp-fs-sm { font-size: .92rem; }
.bgp .bgp-h-sm { font-size: 1.1rem; }
.bgp .bgp-block { display: block; }
.bgp .bgp-narrow { max-width: 560px; }
.bgp .bgp-btn.bgp-btn-sm { padding: 8px 14px; font-size: .82rem; }
.bgp .bgp-chip.bgp-chip-static { position: static; }
.bgp .bgp-hero-from, .bgp .bgp-hero-unit { font-size: .9rem; font-weight: 600; color: rgba(230, 244, 241, .7); }
.bgp .bgp-hero-unit { font-weight: 500; }

/* ============================================================================
   Desk-driven layout (product image only, size chips, tier ladder, light hero)
   ========================================================================== */
/* neutral empty state when the product has no image */
.bgp-noimg { display: grid; place-items: center; width: 100%; height: 100%; min-height: 120px; color: #b9cfca; background: repeating-linear-gradient(45deg, #F6FAF9, #F6FAF9 10px, #F1F6F5 10px, #F1F6F5 20px); }
.bgp-mine-head .bgp-noimg { width: 64px; height: 64px; min-height: 0; border-radius: 12px; }
.bgp-mine-head .bgp-noimg svg { width: 24px; height: 24px; }

/* size chips */
.bgp-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bgp-sizes li { font-size: .74rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg-page); border: 1px solid var(--bg-line); color: var(--bg-ink); }

/* list card extras */
.bgp-card-gap { margin: 0; font-size: .84rem; color: var(--bg-brand-2); font-weight: 600; }
.bgp-card-foot .bgp-card-cta { color: #fff; }
.bgp-card-foot > span:first-child { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--bg-muted); }
.tone-confirmed { color: #15803D; }
.tone-cancelled { color: var(--bg-sale); }

/* light group hero */
.bgp-ghero-light { background: linear-gradient(180deg, #fff 0%, var(--bg-page) 100%); border-bottom: 1px solid var(--bg-line); }
.bgp-ghero-light .bgp-ghero-media { box-shadow: var(--bg-shadow-md); border: 1px solid var(--bg-line); }
.bgp-ghero-left { display: grid; gap: 14px; }
.bgp-ghero-desc { margin: 0; font-size: .95rem; color: var(--bg-ink); }
.bgp-ghero-info { display: grid; gap: 12px; align-content: start; }
.bgp-ghero-info h1 { margin: 0; }
.bgp-brand { margin: -6px 0 0; color: var(--bg-muted); font-size: .92rem; }
.bgp-ghero-light .bgp-badges { margin: 0; }
.bgp-ghero-light .bgp-badges li { background: #fff; border-color: var(--bg-line); color: var(--bg-ink); }
.bgp-ghero-light .bgp-badges li svg { color: var(--bg-brand-2); }
.bgp-ghero-light .bgp-hero-price { margin: 0; }
.bgp-ghero-light .bgp-hero-price .now { color: var(--bg-onyx); }
.bgp-ghero-light .bgp-hero-price .was { color: var(--bg-muted); }
.bgp-ghero-light .bgp-hero-note, .bgp-ghero-light .bgp-hero-from, .bgp-ghero-light .bgp-hero-unit { color: var(--bg-muted); }
.bgp-ghero-light .bgp-hero-note { margin: 0; }
.bgp-ghero-light .bgp-hero-note a { color: var(--bg-brand-2); }
.bgp-ghero-light .bgp-join { margin-top: 4px; }

/* ladder bar: evenly spaced nodes, fill to the units committed */
.bgp-hero-ladder { margin-top: 4px; }
.bgp-lbar { padding: 34px 22px 46px; }
.bgp-lbar-track { position: relative; height: 8px; border-radius: 999px; background: #E3EEEC; }
.bgp-lbar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--bg-teal), var(--bg-brand)); transition: width .6s ease; }
.bgp-lbar-pin { position: absolute; top: -30px; transform: translateX(-50%); white-space: nowrap; }
.bgp-lbar-pin em { font-style: normal; font-size: .7rem; font-weight: 700; color: #1d1606; background: var(--bg-gold); padding: 3px 8px; border-radius: 999px; position: relative; }
.bgp-lbar-pin em::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--bg-gold); }
.bgp-lbar-node { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; }
.bgp-lbar-node .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #cfe3df; color: #fff; }
.bgp-lbar-node .lbl { position: absolute; top: 26px; display: grid; justify-items: center; white-space: nowrap; font-size: .72rem; line-height: 1.25; color: var(--bg-muted); }
.bgp-lbar-node .lbl b { color: var(--bg-onyx); font-weight: 700; }
.bgp-lbar-node.is-reached .dot { background: var(--bg-brand-2); border-color: var(--bg-brand-2); }
.bgp-lbar-node.is-next .dot { border-color: var(--bg-gold); box-shadow: 0 0 0 4px rgba(201, 162, 74, .25); }
.bgp-lbar-node.is-next .lbl b, .bgp-lbar-node.is-next .lbl small { color: #8a6a1f; }
.bgp-lbar-node.is-future { opacity: .55; }
.bgp-lbar-node.is-current .lbl small { color: var(--bg-brand-2); font-weight: 700; }
.bgp-lbar-next { margin: 0 0 8px; font-size: .9rem; color: var(--bg-ink); }
.bgp-lbar-next b { color: #8a6a1f; }

/* compact Units / Price table (the mobile fallback for the bar) */
.bgp-ltable { width: 100%; border-collapse: collapse; font-size: .86rem; }
.bgp-ltable th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bg-muted); padding: 4px 10px; }
.bgp-ltable th:last-child, .bgp-ltable td:last-child { text-align: right; }
.bgp-ltable td { padding: 7px 10px; border-top: 1px solid var(--bg-line); font-variant-numeric: tabular-nums; }
.bgp-ltable tr.is-done td { color: var(--bg-muted); }
.bgp-ltable tr.is-on td { background: #E6F2EF; font-weight: 700; color: var(--bg-onyx); }
.bgp-ltable .here { margin-left: 6px; font-size: .62rem; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--bg-gold); color: #1d1606; }

/* stats strip: units | clinics | time left */
.bgp-statstrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--bg-line); border-radius: var(--bg-radius-sm); background: #fff; margin-top: 10px; }
.bgp-statstrip > div { padding: 10px 12px; display: grid; gap: 2px; }
.bgp-statstrip > div + div { border-left: 1px solid var(--bg-line); }
.bgp-statstrip b { font: 700 1.15rem var(--bg-font); color: var(--bg-onyx); font-variant-numeric: tabular-nums; }
.bgp-statstrip span { font-size: .72rem; color: var(--bg-muted); }

.bgp-leave { display: flex; gap: 6px; align-items: center; margin: 12px 0 0; font-size: .84rem; color: var(--bg-muted); }
.bgp-terms { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: .92rem; }
.bgp-terms b { color: var(--bg-onyx); }

@media (max-width: 639px) {
	.bgp-lbar, .bgp-lbar-pin { display: none; }
}
@media (min-width: 640px) {
	.bgp-ghero-info .bgp-ltable { display: none; }
	.bgp-steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* my buying groups: totals, next step, actions, exit window */
.bgp-totals tr.sum td { border-top: 2px solid var(--bg-line); color: var(--bg-onyx); }
.bgp-next { margin: 12px 0 0; font-size: .9rem; color: var(--bg-ink); }
.bgp-next b { color: var(--bg-onyx); }
.bgp-acts { display: grid; gap: 8px; margin-top: 14px; }
.bgp-act-details { border: 1px solid var(--bg-line); border-radius: var(--bg-radius-sm); background: #fff; margin-top: 12px; }
.bgp-acts .bgp-act-details { margin-top: 0; }
.bgp-act-details > summary { cursor: pointer; padding: 10px 14px; font-size: .9rem; font-weight: 600; color: var(--bg-brand); list-style: revert; }
.bgp-act-details[open] > summary { border-bottom: 1px solid var(--bg-line); }
.bgp-act-details > form, .bgp-act-details > table, .bgp-act-details > p { margin: 0; padding: 12px 14px; }
.bgp-act-details > table { width: calc(100% - 28px); margin: 0 14px; padding: 0; }
.bgp-act-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: .9rem; }
.bgp-act-row input { width: 90px; height: 40px; border: 1.5px solid var(--bg-line); border-radius: 10px; padding: 0 10px; font: 600 1rem var(--bg-font); text-align: center; }
.bgp-field textarea { border: 1.5px solid var(--bg-line); border-radius: 12px; padding: 10px 14px; font: 500 .95rem var(--bg-font); width: 100%; resize: vertical; }
.bgp-act-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bgp-exit { margin-top: 14px; padding: 14px; border: 1px solid #f6c9c4; border-radius: var(--bg-radius-sm); background: #FFF8F7; }
.bgp-exit h4 { margin: 0 0 6px; font-size: 1rem; color: var(--bg-onyx); }
.bgp-exit h5 { margin: 10px 0 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bg-muted); }
.bgp-exit-grid { display: grid; gap: 12px; }
@media (min-width: 640px) {
	.bgp-exit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================================
   Group page (product-page layout): gallery, join button + dialog, tier cards,
   sections, documents with preview, FAQ / terms tabs
   ========================================================================== */
.bgp-pdp { gap: 24px; }
.bgp-pdp .bgp-ghero-info h1 { font-size: clamp(1.6rem, 4.6vw, 2.3rem); line-height: 1.15; }

/* gallery */
.bgp-gallery { display: grid; gap: 10px; }
.bgp-gallery-main { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; max-height: 440px; padding: 0; border: 1px solid var(--bg-line); border-radius: var(--bg-radius); background: radial-gradient(120% 120% at 50% 30%, #fff 0%, #fff 60%, #EEF5F3 100%); overflow: hidden; cursor: zoom-in; box-shadow: var(--bg-shadow-sm); }
.bgp-gallery-main:focus-visible { outline: 3px solid rgba(20, 184, 166, .45); outline-offset: 2px; }
.bgp-gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 18px; transition: transform .25s ease; }
.bgp-gallery-main.is-zoom img { transform: scale(2); }
.bgp-gallery-zoom { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--bg-brand); box-shadow: var(--bg-shadow-sm); pointer-events: none; transition: opacity .2s; }
.bgp-gallery-main.is-zoom .bgp-gallery-zoom { opacity: 0; }
.bgp-gallery-thumbs { display: flex; gap: 8px; margin: 0; padding: 2px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.bgp-gallery-thumbs button { width: 64px; height: 64px; padding: 4px; border: 1.5px solid var(--bg-line); border-radius: var(--bg-radius-sm); background: #fff; cursor: pointer; transition: border-color .15s; }
.bgp-gallery-thumbs button:hover { border-color: #b9d6d1; }
.bgp-gallery-thumbs button[aria-current="true"] { border-color: var(--bg-brand-2); box-shadow: 0 0 0 2px rgba(15, 118, 110, .15); }
.bgp-gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.bgp-gallery.is-empty .bgp-noimg { aspect-ratio: 4 / 3; max-height: 320px; border-radius: var(--bg-radius); border: 1px solid var(--bg-line); }

/* icon button (dialog close, carousel / lightbox arrows) */
.bgp-iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; padding: 0; border-radius: 50%; border: 1px solid var(--bg-line); background: #fff; color: var(--bg-onyx); cursor: pointer; transition: border-color .15s, background .15s, opacity .15s; }
.bgp-iconbtn:hover { border-color: var(--bg-brand-2); color: var(--bg-brand); }
.bgp-iconbtn:focus-visible { outline: 3px solid rgba(20, 184, 166, .45); outline-offset: 2px; }
.bgp-iconbtn[disabled] { opacity: .35; cursor: default; }

/* dialogs: a bottom sheet on phones, a centred card from 640px */
html.bgp-modal-open { overflow: hidden; }
.bgp-modal { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: flex-end; justify-content: center; }
.bgp-modal-backdrop { position: absolute; inset: 0; background: rgba(19, 32, 31, .55); backdrop-filter: blur(2px); animation: bgp-fade .2s ease; }
.bgp-modal-panel { position: relative; width: 100%; max-height: 92vh; overflow: auto; overscroll-behavior: contain; background: #fff; border-radius: 20px 20px 0 0; box-shadow: var(--bg-shadow-lg); animation: bgp-rise .25s ease; font-family: var(--bg-font); color: var(--bg-ink); }
.bgp-modal-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--bg-line); }
.bgp-modal-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: var(--bg-page); border: 1px solid var(--bg-line); flex: 0 0 auto; }
.bgp-modal-title { flex: 1; min-width: 0; }
.bgp-modal-title h2 { margin: 0; font: 700 1.05rem var(--bg-font); color: var(--bg-onyx); }
.bgp-modal-title p { margin: 2px 0 0; font-size: .82rem; color: var(--bg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bgp-modal-body { padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); }
@keyframes bgp-fade { from { opacity: 0; } }
@keyframes bgp-rise { from { transform: translateY(24px); opacity: 0; } }

/* lightbox */
.bgp-lightbox { align-items: center; }
.bgp-lightbox .bgp-modal-backdrop { background: rgba(10, 20, 19, .88); }
.bgp-lightbox-panel { position: relative; margin: 0; width: min(100%, 980px); padding: 56px 12px 16px; display: grid; gap: 12px; animation: bgp-fade .2s ease; }
.bgp-lightbox-close { position: absolute; top: 10px; right: 12px; }
.bgp-lightbox-stage { position: relative; display: grid; place-items: center; background: #fff; border-radius: var(--bg-radius); height: min(76vh, 720px); overflow: hidden; }
.bgp-lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 20px; }
.bgp-lightbox-prev, .bgp-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; box-shadow: var(--bg-shadow-sm); }
.bgp-lightbox-prev { left: 10px; }
.bgp-lightbox-next { right: 10px; }
.bgp-lightbox figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: rgba(255, 255, 255, .8); font: .9rem var(--bg-font); }
.bgp-lightbox figcaption b { color: #fff; }
.bgp-lightbox-count { margin-left: auto; font-variant-numeric: tabular-nums; }

/* join call to action */
.bgp-btn.bgp-btn-lg { padding: 15px 22px; font-size: 1.02rem; }
.bgp-cta { display: grid; gap: 10px; margin-top: 6px; padding: 16px; border: 1px solid var(--bg-line); border-radius: var(--bg-radius); background: #fff; box-shadow: var(--bg-shadow-sm); scroll-margin-top: 90px; }
.bgp-cta > p { margin: 0; }
.bgp-cta-h { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 1.1rem var(--bg-font); color: var(--bg-onyx); }
.bgp-cta-h svg { color: var(--bg-brand-2); }
.bgp-cta-sub { margin: -2px 0 0; text-align: center; font-size: .82rem; color: var(--bg-muted); }
.bgp-cta-sub a { color: var(--bg-brand-2); font-weight: 600; }
.bgp-keyfacts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 10px 0 0; list-style: none; border-top: 1px dashed var(--bg-line); }
.bgp-keyfacts li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--bg-page); font-size: .8rem; color: var(--bg-ink); }
.bgp-keyfacts li svg { color: var(--bg-brand-2); flex: 0 0 auto; }
.bgp-keyfacts b { color: var(--bg-onyx); font-weight: 700; }
.bgp-cta .bgp-keyfacts-tz { margin: -4px 0 0; font-size: .72rem; color: var(--bg-muted); }

/* sections below the hero */
.bgp-body { display: grid; gap: 18px; margin-top: 22px; }
.bgp-sec { background: var(--bg-card); border: 1px solid var(--bg-line); border-radius: var(--bg-radius); padding: 18px; box-shadow: var(--bg-shadow-sm); scroll-margin-top: 90px; min-width: 0; }
.bgp-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; }
.bgp-sec-head .bgp-sec-h { margin: 0; }
.bgp .bgp-sec-h { font: 700 1.15rem var(--bg-font); color: var(--bg-onyx); margin: 0 0 12px; letter-spacing: -.01em; }
.bgp-sec-sub { flex-basis: 100%; margin: 0; font-size: .88rem; color: var(--bg-muted); }
.bgp-sec-link { display: inline-flex; align-items: center; gap: 4px; font-size: .86rem; font-weight: 600; color: var(--bg-brand-2) !important; text-decoration: none !important; }
.bgp-sec-link:hover { text-decoration: underline !important; }

/* tier cards */
.bgp-tiers + .bgp-tiers { margin-top: 18px; }
.bgp-tiers-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; min-height: 36px; }
.bgp-tiers-head .bgp-ladder-title { margin: 0; }
.bgp-tiers-nav { display: flex; gap: 6px; }
.bgp-tiers-track { display: flex; gap: 12px; margin: 0 -4px; padding: 6px 4px 10px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px; scrollbar-width: thin; }
.bgp-tiers-track:focus-visible { outline: 3px solid rgba(20, 184, 166, .35); outline-offset: 2px; border-radius: 12px; }
.bgp-tier { position: relative; flex: 0 0 152px; scroll-snap-align: start; display: grid; gap: 4px; align-content: start; padding: 14px 14px 12px; border-radius: 14px; border: 1.5px solid var(--bg-line); background: var(--bg-page); transition: transform .2s, box-shadow .2s; }
.bgp-tier-n { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bg-muted); }
.bgp-tier-pct { font: 800 1.9rem/1.1 var(--bg-font); color: var(--bg-onyx); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bgp-tier-pct small { font-size: .55em; font-weight: 700; margin-left: 1px; }
.bgp-tier-qty { font-size: .82rem; color: var(--bg-ink); }
.bgp-tier-state { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: .74rem; font-weight: 700; color: var(--bg-muted); }
.bgp-tier.is-reached { background: #E6F2EF; border-color: #cfe3df; }
.bgp-tier.is-reached .bgp-tier-pct { color: var(--bg-brand); }
.bgp-tier.is-reached .bgp-tier-state { color: var(--bg-brand-2); }
.bgp-tier.is-current { background: linear-gradient(150deg, var(--bg-brand), var(--bg-brand-2)); border-color: transparent; box-shadow: 0 14px 28px -16px rgba(11, 92, 87, .8); }
.bgp-tier.is-current .bgp-tier-n, .bgp-tier.is-current .bgp-tier-qty { color: rgba(230, 244, 241, .85); }
.bgp-tier.is-current .bgp-tier-pct { color: #fff; }
.bgp-tier.is-current .bgp-tier-state { color: #1d1606; background: var(--bg-gold); padding: 3px 8px; border-radius: 999px; justify-self: start; }
.bgp-tier.is-next { background: #fff; border-color: var(--bg-gold); border-style: dashed; }
.bgp-tier.is-next .bgp-tier-pct, .bgp-tier.is-next .bgp-tier-state { color: #8a6a1f; }
.bgp-tier.is-future { opacity: .62; }
.bgp-tier.is-future .bgp-tier-pct { color: var(--bg-ink); }

/* every price, behind a disclosure */
.bgp-compare { margin-top: 10px; border-top: 1px solid var(--bg-line); }
.bgp-compare > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 0; cursor: pointer; list-style: none; font-size: .9rem; font-weight: 600; color: var(--bg-brand); }
.bgp-compare > summary::-webkit-details-marker { display: none; }
.bgp-compare > summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; line-height: 1; color: var(--bg-brand-2); }
.bgp-compare[open] > summary::after { content: "–"; }
.bgp-compare-body { padding-top: 10px; }

/* how it works, compact */
.bgp-howstrip { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: h; }
.bgp-howstrip li { counter-increment: h; display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: start; font-size: .86rem; }
.bgp-howstrip li::before { content: counter(h); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff; background: linear-gradient(135deg, var(--bg-brand), var(--bg-teal)); }
.bgp-howstrip b { color: var(--bg-onyx); font-size: .9rem; line-height: 1.3; }
.bgp-howstrip span { color: var(--bg-muted); }

/* about */
.bgp-about { display: grid; gap: 18px; }
.bgp-about-text { display: grid; gap: 12px; align-content: start; min-width: 0; }
.bgp-about-text .bgp-sec-h { margin: 0; }
.bgp-about .bgp-badges { margin: 0; }
.bgp-about .bgp-badges li { background: var(--bg-page); border-color: var(--bg-line); color: var(--bg-ink); }
.bgp-about .bgp-badges li svg { color: var(--bg-brand-2); }
.bgp-about-desc { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--bg-ink); white-space: pre-line; }
.bgp-clamp .bgp-about-desc { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.bgp-clamp.is-open .bgp-about-desc { display: block; -webkit-line-clamp: unset; overflow: visible; }
.bgp-linkbtn { margin-top: 6px; padding: 0; border: 0; background: none; font: 600 .86rem var(--bg-font); color: var(--bg-brand-2); cursor: pointer; }
.bgp-linkbtn:hover { text-decoration: underline; }
.bgp-video.has-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bgp-video.has-thumb button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 31, 30, .1), rgba(10, 31, 30, .55)); }
.bgp-video.has-thumb .play, .bgp-video.has-thumb small { position: relative; }
.bgp-video.has-thumb .play { background: rgba(0, 0, 0, .45); }
.bgp-video.has-thumb small { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0 auto; }
.bgp-video.is-playing button { display: none; }

/* product information files */
.bgp-docs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bgp-docitem { border: 1px solid var(--bg-line); border-radius: 12px; background: var(--bg-page); overflow: hidden; }
.bgp-doc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; }
.bgp-doc-ic { position: relative; flex: 0 0 auto; width: 40px; height: 46px; display: grid; place-items: center; border-radius: 8px; background: #fff; border: 1px solid var(--bg-line); color: var(--bg-brand-2); }
.bgp-doc-ic.is-pdf { color: var(--bg-sale); }
.bgp-doc-ic em { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); font: 700 .58rem var(--bg-font); font-style: normal; text-transform: uppercase; padding: 1px 4px; border-radius: 4px; }
.bgp-doc-ic em { color: #fff; background: var(--bg-brand-2); }
.bgp-doc-ic.is-pdf em { background: var(--bg-sale); }
.bgp-doc-meta { flex: 1 1 160px; min-width: 0; display: grid; gap: 2px; }
.bgp-doc-meta b { font-size: .92rem; color: var(--bg-onyx); overflow-wrap: anywhere; }
.bgp-doc-meta small { font-size: .76rem; color: var(--bg-muted); text-transform: uppercase; letter-spacing: .03em; }
.bgp-doc-act { display: flex; gap: 8px; margin-left: auto; }
.bgp-doc-act .bgp-btn { gap: 6px; }
.bgp-doc-preview { border-top: 1px solid var(--bg-line); background: #fff; }
.bgp-doc-preview iframe { display: block; width: 100%; height: min(70vh, 560px); border: 0; }
.bgp-doc-newtab { display: inline-block; padding: 8px 14px 10px; font-size: .82rem; font-weight: 600; color: var(--bg-brand-2) !important; }

/* FAQ / terms tabs */
.bgp-tabs { display: flex; gap: 4px; margin: -4px 0 14px; padding: 4px; border-radius: 999px; background: var(--bg-page); width: max-content; max-width: 100%; }
.bgp-tabs [role=tab] { padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; font: 600 .9rem var(--bg-font); color: var(--bg-muted); cursor: pointer; transition: background .15s, color .15s; }
.bgp-tabs [role=tab]:hover { color: var(--bg-onyx); }
.bgp-tabs [role=tab][aria-selected="true"] { background: #fff; color: var(--bg-brand); box-shadow: var(--bg-shadow-sm); }
.bgp-tabs [role=tab]:focus-visible { outline: 3px solid rgba(20, 184, 166, .45); outline-offset: 1px; }
.bgp-tabpane:focus-visible { outline: 2px solid rgba(20, 184, 166, .35); outline-offset: 4px; border-radius: 6px; }

@media (min-width: 640px) {
	.bgp-modal { align-items: center; padding: 24px; }
	.bgp-modal-panel { max-width: 520px; max-height: 90vh; border-radius: 20px; }
	.bgp-modal-head { padding: 16px 20px; }
	.bgp-modal-body { padding: 18px 20px 22px; }
	.bgp-sec { padding: 22px 24px; }
	.bgp-howstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
	.bgp-tier { flex-basis: 164px; }
	.bgp-lightbox-panel { padding: 60px 24px 24px; }
}
@media (min-width: 992px) {
	.bgp-ghero-grid.bgp-pdp { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 44px; }
	.bgp-pdp .bgp-ghero-left { position: sticky; top: 84px; }
	.bgp-howstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bgp-about.has-video { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: start; }
}

/* ============================================================================
   List page (/buying-groups): light hero over an illustration, tabs + filters,
   cards with hover details, request + categories panel, request board.
   Type and buttons follow the storefront's product page (Inter, pill CTAs).
   The only gold animation is the ring round an open group's "Join group".
   ========================================================================== */
.bgp-list [hidden] { display: none !important; }
/* the hero runs edge to edge (100vw); stop a scrollbar-width sideways scroll */
body:has(.bgp-list) { overflow-x: clip; }
/* line up with the site's container (and so the navbar), not .bgp-wrap's own width */
.bgp-list .bgp-wrap { max-width: none; padding-inline: 0; }

/* hero: copy on the left, illustration behind it, note card top right */
.bgp-lhero {
	position: relative; overflow: hidden; background: #fff;
	margin: 0 calc(50% - 50vw); padding: 24px calc(50vw - 50%) 22px;
}
.bgp-lhero-art { position: absolute; inset: 0; pointer-events: none; background: url(/assets/wize_customer_portal/images/bg-hero.svg) right bottom / cover no-repeat; }
/* phones and tablets: the copy runs over the products, so fade them back */
.bgp-lhero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .86) 55%, rgba(255, 255, 255, .6) 100%); }
.bgp-lhero-in { position: relative; z-index: 1; --bgp-note-w: 340px; }
.bgp-lhero-copy { max-width: 600px; }
.bgp-lhero-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 700 12px/1.2 var(--bg-font); letter-spacing: .14em; text-transform: uppercase; color: #11302C; }
.bgp-lhero-eyebrow .g { font-weight: 600; color: #2E8B7A; }
.bgp-lhero-mark { flex: 0 0 auto; fill: #167A66; }
.bgp-list .bgp-lhero h1 { margin: 0 0 14px; font: 800 clamp(2rem, 1.2rem + 3.6vw, 3.35rem)/1.05 var(--bg-font); letter-spacing: -.02em; color: #11302C; }
.bgp-lhero h1 span { display: block; }
.bgp-lhero h1 .b { color: #1A5E54; }
.bgp-lhero-lead { max-width: 470px; margin: 0 0 20px; font-size: .94rem; line-height: 1.5; color: #5E726E; }
.bgp-lhero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bgp-lhero-play { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #11302C; color: #fff; }
.bgp-lhero-play svg { margin-left: 1px; }
.bgp-lhero-stats { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.bgp-lhero-stats li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bgp-lhero-stats .ic { display: none; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; place-items: center; background: #E5F5F0; color: #1A5E54; }
.bgp-lhero-stats b { display: block; font: 700 15px/1.25 var(--bg-font); color: #11302C; }
.bgp-lhero-stats small { display: block; font-size: 11.5px; line-height: 1.35; color: #5E726E; }
.bgp-lhero-note {
	display: none; grid-template-columns: 46px minmax(0, 1fr) 40px; align-items: center; gap: 12px;
	position: absolute; top: 0; right: 0; width: var(--bgp-note-w);
	padding: 18px; border-radius: 16px; background: #FBF3DC; box-shadow: 0 12px 30px rgba(18, 63, 57, .10);
}
.bgp-lhero-note-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #F2DFA8; color: #6B4A12; }
.bgp-lhero-note b { display: block; font: 700 15px/1.3 var(--bg-font); color: #11302C; }
.bgp-lhero-note p { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: #5E726E; }
/* the three steps wrap between each other, never mid-step */
.bgp-lhero-note p > span { white-space: nowrap; }
.bgp-lhero-note p svg { vertical-align: middle; margin: 0 1px; }
.bgp-lhero-chart { width: 40px; height: 40px; }
.bgp-lhero-chart rect { fill: #2E9E8B; }

/* buttons: the storefront's product-page CTAs */
.bgp-list .bgp-btn { padding: 11px 18px; font-size: .9rem; font-weight: 600; }
/* phones: the two buttons share the row, or take a full row each once they wrap */
.bgp-list .bgp-lhero-actions .bgp-btn { flex: 1 1 auto; padding: 11px 14px; font-size: .88rem; }
.bgp-list .bgp-btn-primary { background: linear-gradient(135deg, #1A5E54 0%, #21705F 100%); color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 26px -12px rgba(11, 92, 87, .55); }
.bgp-list .bgp-btn-primary:hover { background: linear-gradient(135deg, #21705F 0%, #2E9E8B 150%); color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 16px 30px -12px rgba(11, 92, 87, .62); transform: translateY(-1px); }
.bgp-list .bgp-btn-outline, .bgp-list .bgp-lghost { background: #fff; border-color: #DCEAE7; color: #1A5E54 !important; }
.bgp-list .bgp-btn-outline:hover, .bgp-list .bgp-lghost:hover { background: #fff; border-color: #1A5E54; color: #21705F !important; }

/* toolbar: tabs on the left, search + category on the right */
.bgp-ltool { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-top: 20px; scroll-margin-top: 80px; }
.bgp-ltabs { display: flex; gap: 20px; max-width: 100%; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 #E7ECEA; }
.bgp-ltabs::-webkit-scrollbar { display: none; }
.bgp-ltabs [role=tab] {
	display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer;
	padding: 10px 0 12px; border: 0; border-bottom: 2.5px solid transparent; border-radius: 0; background: none;
	font: 600 .95rem/1.2 var(--bg-font); color: #5E726E; transition: color .15s, border-color .15s;
}
.bgp-ltabs [role=tab]:hover { color: #11302C; }
.bgp-ltabs [role=tab][aria-selected="true"] { color: #11302C; border-bottom-color: #1A5E54; }
.bgp-ltabs [role=tab]:focus-visible { outline: 3px solid rgba(20, 184, 166, .45); outline-offset: -3px; }
.bgp-ltabs .n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; border: 1px solid #C9D6D3; font: 700 11px/1 var(--bg-font); color: #5E726E; }
.bgp-ltabs [aria-selected="true"] .n { background: #1A5E54; border-color: #1A5E54; color: #fff; }
.bgp-filters { display: flex; flex-wrap: wrap; gap: 10px 12px; flex: 1 1 100%; min-width: 0; }
/* phones: search and category take a row each, so the search placeholder isn't cut short */
.bgp-search { position: relative; flex: 1 1 100%; min-width: 0; margin: 0; }
.bgp-select { position: relative; flex: 1 1 100%; min-width: 0; margin: 0; }
.bgp-search svg, .bgp-select svg { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; }
.bgp-search svg { left: 12px; color: #93A8A3; }
.bgp-select svg { right: 12px; color: #5E726E; }
/* 16px on phones: iOS zooms the page into any smaller field it focuses */
.bgp-search input, .bgp-select select {
	display: block; width: 100%; height: 40px; margin: 0; border: 1px solid #DCEAE7; border-radius: 10px; background: #fff;
	font: 500 16px var(--bg-font); color: #11302C; transition: border-color .15s, box-shadow .15s;
}
.bgp-search input { padding: 0 12px 0 36px; }
.bgp-search input::placeholder { color: #93A8A3; opacity: 1; }
.bgp-select select { padding: 0 34px 0 12px; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; cursor: pointer; }
.bgp-search input:focus, .bgp-select select:focus { outline: none; border-color: #1A5E54; box-shadow: 0 0 0 3px rgba(26, 94, 84, .12); }

/* main column + aside */
.bgp-lgrid { display: grid; gap: 24px; }
.bgp-lmain .bgp-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.bgp-list .bgp-lsection { margin-top: 24px; scroll-margin-top: 80px; }
.bgp-list .bgp-section-head h2 { font: 700 1.5rem/1.25 var(--bg-font); letter-spacing: -.01em; color: #11302C; }
.bgp-list .bgp-section-head p { color: #5E726E; }
.bgp-list.is-tabbed .bgp-lsection { margin-top: 20px; }
.bgp-list.is-tabbed .bgp-lsection .bgp-section-head { margin: 0; }
.bgp-list.is-tabbed .bgp-lsection .bgp-section-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bgp-list.is-tabbed .bgp-lsection .bgp-section-head p { display: none; }
.bgp-list:not(.is-tabbed) .bgp-lsection.is-empty:not(#live) { display: none; }
.bgp-laside { display: grid; gap: 16px; align-content: start; }
.bgp-linkbtn { border: 0; background: none; padding: 0; font: 600 .9rem var(--bg-font); color: var(--bg-brand-2); text-decoration: underline; cursor: pointer; }

/* cards: storefront surface, product photo on a soft studio backdrop */
.bgp-list .bgp-card { border-color: #E7ECEA; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -22px rgba(16, 24, 40, .22); }
.bgp-list .bgp-card:hover, .bgp-list .bgp-card:focus-within { border-color: #DCEAE7; box-shadow: 0 2px 6px rgba(16, 24, 40, .06), 0 24px 48px -28px rgba(16, 24, 40, .28); transform: translateY(-2px); }
.bgp-card:focus-visible { outline: 3px solid rgba(20, 184, 166, .45); outline-offset: 3px; }
.bgp-list .bgp-card-media { aspect-ratio: 17 / 10; background: radial-gradient(120% 120% at 50% 30%, #fff 0%, #F7F8F9 55%, #EEF1F2 100%); }
/* white photo boxes take the backdrop's tone (as on the storefront) */
.bgp-list .bgp-card-media img { padding: 16px; mix-blend-mode: multiply; }
.bgp-list .bgp-chip { gap: 5px; padding: 4px 8px; border-radius: 6px; font: 700 11px/1.2 var(--bg-font); letter-spacing: .06em; box-shadow: none; }
.bgp-list .bgp-chip::before { content: none; }
.bgp-list .bgp-chip.tone-live { background: #2B8150; color: #fff; }
.bgp-list .bgp-save { padding: 6px 10px; border-radius: 10px; background: #F3DB9C; color: #3D2E07; box-shadow: none; }
.bgp-list .bgp-save small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; }
.bgp-list .bgp-save b { font: 800 1.15rem/1.15 var(--bg-font); }
.bgp-list .bgp-card-title { font: 700 16px/1.35 var(--bg-font); color: #11302C; }
.bgp-list .bgp-card-sub { font-size: 13.5px; line-height: 1.45; color: #5E726E; }
.bgp-list .bgp-sizes li { min-width: 30px; padding: 3px 10px; border-radius: 999px; border: 1px solid #DCEAE7; background: #fff; font: 600 12px/1.3 var(--bg-font); color: #2C413E; text-align: center; }
.bgp-list .bgp-sizes li:first-child { background: #1A5E54; border-color: #1A5E54; color: #fff; }
.bgp-list .bgp-price-row { gap: 8px; }
.bgp-list .bgp-price-from, .bgp-list .bgp-price-unit { font-size: .85rem; font-weight: 500; color: #5E726E; }
.bgp-list .bgp-price { font: 800 1.35rem/1.1 var(--bg-font); letter-spacing: -.01em; color: #11302C; }
.bgp-list .bgp-strike { font-size: .88rem; color: #93A8A3; }
.bgp-list .bgp-signin-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: #5E726E; }
.bgp-list .bgp-card .bgp-progress, .bgp-list .bgp-card .bgp-progress.has-marks { height: 8px; margin-bottom: 0; background: #E7EFED; }
.bgp-list .bgp-card .bgp-progress > i { min-width: 4px; background: linear-gradient(90deg, #40A18D, #1A5E54); }
.bgp-list .bgp-card .bgp-progress.is-done > i { background: linear-gradient(90deg, #E6C873, var(--bg-gold)); }
.bgp-list .bgp-card .bgp-progress .mk { top: 0; height: 8px; box-shadow: none; }
.bgp-list .bgp-card .bgp-progress .mk em { display: none; }
.bgp-list .bgp-card .bgp-progress-labels { gap: 8px; margin-top: 8px; font-size: 13px; color: #5E726E; }
.bgp-list .bgp-card .bgp-progress-labels b { font-weight: 700; color: #11302C; }
/* price, progress and footer sit at the card's foot, so they line up across a row
   whether or not a card has size chips */
.bgp-list .bgp-card-body > .bgp-price-row, .bgp-list .bgp-card-body > .bgp-signin-note { margin-top: auto; }
.bgp-list .bgp-card-body > .bgp-price-row ~ .bgp-card-foot, .bgp-list .bgp-card-body > .bgp-signin-note ~ .bgp-card-foot { margin-top: 0; }

/* "N more units to reach …" and the early-bird line: over the picture, on hover / focus only */
.bgp-card-peek {
	position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: grid; gap: 6px;
	padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; color: #2C413E;
	background: #F1FAF7; border: 1px solid #DCEAE7; box-shadow: 0 10px 24px -14px rgba(18, 63, 57, .35);
	opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
}
.bgp-card:hover .bgp-card-peek, .bgp-card:focus-visible .bgp-card-peek { opacity: 1; transform: none; }
.bgp-card-peek p { display: flex; align-items: center; gap: 10px; margin: 0; }
.bgp-card-peek b { color: #1A5E54; }
.bgp-card-peek .eb, .bgp-card-peek .eb b { color: #6B5216; }
.bgp-peek-ic { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #DDEEE8; color: #1A5E54; }
.bgp-card-peek .eb .bgp-peek-ic { background: #F8E3A3; color: #6B5216; }
@media (hover: none) { .bgp-card-peek { display: none; } }

/* card foot: countdown + pill CTA */
.bgp-lmain .bgp-card-foot { flex-wrap: wrap; }
/* a narrow card wraps the button under the countdown; keep it on the right */
.bgp-lmain .bgp-card-foot .bgp-card-cta { margin-left: auto; }
.bgp-list .bgp-card-foot .bgp-meta { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; font-size: 13px; color: #5E726E; }
.bgp-list .bgp-card-foot .bgp-card-cta.bgp-btn { padding: 9px 16px; border-radius: 999px; font-size: .86rem; font-weight: 600; }
.bgp-list .bgp-card-foot .bgp-card-cta.bgp-btn-outline { background: #fff; border-color: #DCEAE7; color: #1A5E54 !important; }
.bgp-card-cta svg { flex: 0 0 auto; }

/* the one gold touch: a ring that travels round an open group's "Join group" */
@property --bgp-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes bgp-sweep { to { --bgp-angle: 360deg; } }
.bgp-list .bgp-card-cta.is-joinable { position: relative; isolation: isolate; }
.bgp-list .bgp-card-cta.is-joinable::after {
	content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 2px; pointer-events: none;
	background: conic-gradient(from var(--bgp-angle), rgba(201, 162, 74, .25), #F3E2B0 12%, var(--bg-gold) 22%, #8A6A1F 30%, rgba(201, 162, 74, .25) 42%, rgba(201, 162, 74, .25) 58%, #F3E2B0 70%, var(--bg-gold) 80%, rgba(201, 162, 74, .25) 92%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	animation: bgp-sweep 5s linear infinite;
}

/* request + popular categories panel */
.bgp-lpanel { padding: 22px; border-radius: 16px; background: #E6F4F0; }
.bgp-lpanel-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #D6EEE7; color: #1A5E54; }
.bgp-list .bgp-lpanel h3 { margin: 14px 0 6px; font: 700 1.12rem/1.3 var(--bg-font); letter-spacing: -.01em; color: #11302C; }
.bgp-lpanel p { margin: 0 0 16px; font-size: .9rem; line-height: 1.5; color: #2C413E; }
.bgp-lpanel hr { margin: 20px 0; border: 0; border-top: 1px solid #D4E6E0; }
.bgp-list .bgp-lpanel hr + h3 { margin: 0 0 10px; font-size: 1rem; }
.bgp-lcats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.bgp-lcats button {
	display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 0; border: 0; background: transparent;
	font: 500 .9rem/1.3 var(--bg-font); color: #2C413E; text-align: left; cursor: pointer; transition: color .15s;
}
.bgp-lcats .ic { flex: 0 0 32px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #fff; color: #1A5E54; transition: background .15s, color .15s; }
.bgp-lcats .ic img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.bgp-lcats .t { flex: 1 1 auto; min-width: 0; }
.bgp-lcats button > svg { flex: 0 0 auto; color: #93A8A3; transition: transform .15s, color .15s; }
.bgp-lcats button:hover { color: #1A5E54; }
.bgp-lcats button:hover > svg { color: #1A5E54; transform: translateX(2px); }
.bgp-lcats button:focus-visible { outline: 3px solid rgba(20, 184, 166, .45); outline-offset: 2px; border-radius: 8px; }
.bgp-lcats button.is-on .t { font-weight: 700; color: #1A5E54; }
.bgp-lcats button.is-on .ic { background: #1A5E54; color: #fff; }

/* request board */
.bgp-board { scroll-margin-top: 80px; }
.bgp-board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bgp-req { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--bg-line); border-radius: 14px; box-shadow: var(--bg-shadow-sm); }
.bgp-req.is-reached { border-color: #EAD9A8; background: linear-gradient(165deg, #fff 40%, #FFFBF0); }
.bgp-req-img { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--bg-page); border: 1px solid var(--bg-line); }
.bgp-req-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.bgp-req-img .bgp-noimg { min-height: 0; }
.bgp-req-img .bgp-noimg svg { width: 20px; height: 20px; }
.bgp-req-main { min-width: 0; }
.bgp-req-main h3 { margin: 0; font: 700 .95rem/1.3 var(--bg-font); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.bgp-req-main p { margin: 2px 0 7px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .76rem; color: var(--bg-muted); }
.bgp-req-status { font-weight: 600; color: var(--bg-brand-2); }
.bgp-req.is-reached .bgp-req-status { color: #8A6A1F; }
.bgp-req-bar { height: 6px; border-radius: 999px; background: #E3EEEC; overflow: hidden; }
.bgp-req-bar i { display: block; height: 100%; min-width: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--bg-teal), var(--bg-brand)); transition: width .4s ease; }
.bgp-req.is-reached .bgp-req-bar i { background: linear-gradient(90deg, #E6C873, var(--bg-gold)); }
.bgp-req-main small { display: block; margin-top: 4px; font-size: .76rem; color: var(--bg-muted); }
.bgp-req-main small b { color: var(--bg-onyx); }
/* Rows are narrow in every layout (one column on phones, 2-3 on desktop), so the
   action sits under the progress bar rather than squeezing the title. */
.bgp-req-act { grid-column: 2; }
.bgp-req-act .bgp-btn { white-space: normal; text-align: center; }
.bgp-vote { display: inline-flex; align-items: center; gap: 6px; min-width: 60px; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--bg-line); background: #fff; font: 700 .76rem var(--bg-font); color: var(--bg-ink); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.bgp-vote:hover { border-color: var(--bg-brand-2); color: var(--bg-brand); }
.bgp-vote:focus-visible { outline: 3px solid rgba(20, 184, 166, .45); outline-offset: 2px; }
.bgp-vote[aria-pressed="true"] { background: var(--bg-brand); border-color: var(--bg-brand); color: #fff; }
.bgp-vote[disabled] { opacity: .6; cursor: wait; }

/* request form */
.bgp-field input[type=number] { height: 46px; border: 1.5px solid var(--bg-line); border-radius: 12px; padding: 0 14px; font: 500 1rem var(--bg-font); color: var(--bg-onyx); background: #fff; width: 100%; }
.bgp-field textarea:focus { outline: none; border-color: var(--bg-brand-2); box-shadow: 0 0 0 3px rgba(11, 92, 87, .12); }
.bgp-field label small { font-weight: 500; color: var(--bg-muted); }
.bgp-field-row { display: grid; gap: 0 12px; }
.bgp-fine { font-size: .78rem; color: var(--bg-muted); margin: 0 0 12px; }

@media (min-width: 640px) {
	.bgp-lhero { padding-block: 32px 28px; }
	.bgp-lhero-eyebrow { margin-bottom: 16px; }
	.bgp-list .bgp-lhero h1 { margin-bottom: 16px; }
	.bgp-lhero-lead { margin-bottom: 24px; font-size: 1.05rem; line-height: 1.6; }
	.bgp-lhero-actions { gap: 12px; }
	.bgp-list .bgp-lhero-actions .bgp-btn { flex: 0 0 auto; padding: 14px 26px; font-size: .95rem; }
	.bgp-lhero-stats { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 28px; }
	.bgp-lhero-stats .ic { display: grid; }
	.bgp-lhero-stats b { font-size: 16px; }
	.bgp-lhero-stats small { font-size: 12px; }
	.bgp-ltabs { gap: 28px; }
	.bgp-filters { flex-wrap: nowrap; }
	.bgp-search { flex: 1 1 160px; }
	.bgp-select { flex: 0 1 170px; }
	.bgp-search input, .bgp-select select { font-size: .88rem; }
	.bgp-lmain .bgp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bgp-board-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bgp-field-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px) {
	.bgp-lhero { padding-block: 40px 36px; }
	.bgp-lhero-art::after { content: none; }
	.bgp-lhero-copy { max-width: min(600px, calc(100% - var(--bgp-note-w) - 32px)); }
	.bgp-lhero-note { display: grid; }
	.bgp-ltool { margin-top: 28px; }
	.bgp-filters { flex: 0 1 auto; }
	.bgp-search { flex: 0 1 auto; width: 274px; }
	.bgp-select { flex: 0 1 auto; max-width: 220px; }
	.bgp-lgrid { grid-template-columns: minmax(0, 1fr) 272px; align-items: start; }
	.bgp-laside { position: sticky; top: 84px; margin-top: 20px; }
	.bgp-list:not(.is-tabbed) .bgp-laside { margin-top: 24px; }
	.bgp-board-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) and (max-width: 1199px) {
	.bgp-board-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the copy column is at its narrowest here (beside the note): keep the stats on one row */
@media (min-width: 992px) and (max-width: 1099px) {
	.bgp-lhero-stats { column-gap: 16px; }
	.bgp-lhero-stats li { gap: 10px; }
}
@media (min-width: 1100px) {
	.bgp-lhero-in { --bgp-note-w: 380px; }
}
/* wide screens: stop the art growing with the viewport (cover would crop the tops of the
   boxes). 653px is its cover height at 1400px; its left edge is white, so the hero's
   white ground carries on past it */
@media (min-width: 1400px) {
	.bgp-lhero-art { background-size: auto max(100%, 653px); }
}

/* ============================================================================
   My buying groups (/buying-groups/mine): the list page's hero, tabs and buttons
   (.bgp-list), and one card per commitment: picture | state, facts | the pay CTA,
   with its order details and changes behind pills (buying_groups_mine.js).
   ========================================================================== */
.bgm .bgp-lhero { padding-bottom: 26px; }
.bgm-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; font-size: 13px; color: #5E726E; }
.bgm-crumbs a { color: #5E726E; text-decoration: none; }
.bgm-crumbs a:hover { color: #1A5E54; text-decoration: underline; }
.bgm-crumbs svg { color: #93A8A3; }
.bgm-crumbs [aria-current] { font-weight: 600; color: #11302C; }
.bgm .bgp-lhero h1 span { display: inline; }
.bgm-stats a { display: block; text-decoration: none; }
.bgm-stats .is-todo .ic { background: #FBF3DC; color: #8A6A1F; }
.bgm-stats .is-todo b { color: #8A5A0B; }
.bgm-stats .is-todo a:hover small { text-decoration: underline; }

.bgm-main { padding-top: 4px; }
.bgm-setup { display: grid; gap: 14px; margin-top: 24px; }
.bgm-setup h3 { margin: 0 0 6px !important; }
.bgm-setup p { margin: 0; }
.bgm-setup .bgp-btn { justify-self: start; }
.bgm-tabs { margin-top: 24px; }
.bgm-section { margin-top: 28px; scroll-margin-top: 80px; }
.bgm-section > h2 { margin: 0 0 14px; font: 700 1.5rem/1.25 var(--bg-font); letter-spacing: -.01em; color: #11302C; }
.bgm.is-tabbed .bgm-section { margin-top: 20px; }
.bgm.is-tabbed .bgm-section > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bgm-list { display: grid; gap: 16px; }
.bgm-empty { max-width: 560px; }

/* the card */
.bgm-card {
	position: relative; scroll-margin-top: 90px; background: #fff; border: 1px solid #E7ECEA; border-radius: 16px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -22px rgba(16, 24, 40, .22);
}
.bgm-card.is-action { border-color: #EAD9A8; box-shadow: inset 4px 0 0 #C9A24A, 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -22px rgba(16, 24, 40, .22); }
.bgm-card:target { outline: 3px solid rgba(20, 184, 166, .35); outline-offset: 2px; }
.bgm-card-top { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 16px; }
.bgm-media { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: radial-gradient(120% 120% at 50% 30%, #fff 0%, #F7F8F9 55%, #EEF1F2 100%); border: 1px solid #EEF2F1; }
.bgm-media img { width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.bgm-media .bgp-noimg { min-height: 0; }
.bgm-media .bgp-noimg svg { width: 22px; height: 22px; }
.bgm-card-main { min-width: 0; }
.bgm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; font-size: 13px; color: #5E726E; }
.bgm-meta [data-countdown] { font-weight: 600; color: #11302C; font-variant-numeric: tabular-nums; }
.bgm-chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 6px; font: 700 11px/1.2 var(--bg-font); letter-spacing: .06em; text-transform: uppercase; background: #EEF2F1; color: #2C413E; }
.bgm-chip.tone-live, .bgm-chip.tone-open { background: #2B8150; color: #fff; }
.bgm-chip.tone-action { background: #F3DB9C; color: #3D2E07; }
.bgm-chip.tone-alert { background: #FDECEA; color: #B42318; }
.bgm-chip.tone-warn { background: #FFF4E5; color: #B45309; }
.bgm-chip.tone-info, .bgm-chip.tone-soon, .bgm-chip.tone-scheduled { background: #E6F4F0; color: #1A5E54; }
.bgm-chip.tone-ok { background: #E3F2E8; color: #22673F; }
.bgm-chip.tone-locked { background: #E9EDF2; color: #3B4A5C; }
.bgm-title { margin: 0; font: 700 1.05rem/1.35 var(--bg-font); color: #11302C; overflow-wrap: anywhere; }
.bgm-title a { color: inherit !important; text-decoration: none; }
.bgm-title a:hover { color: #1A5E54 !important; text-decoration: underline; }
.bgm-clinic { margin: 2px 0 0; font-size: 13px; color: #5E726E; }
.bgm-status { margin: 6px 0 0; font-size: .9rem; line-height: 1.45; color: #2C413E; }
.bgm-status.tone-alert { color: #B42318; font-weight: 600; }
.bgm-status.tone-warn, .bgm-status.tone-locked { color: #9A4A08; }
.bgm-status.tone-muted { color: #5E726E; }
.bgm-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 12px 0 0; }
.bgm-facts dt { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #5E726E; }
.bgm-facts dd { margin: 2px 0 0; font: 700 15px/1.3 var(--bg-font); color: #11302C; font-variant-numeric: tabular-nums; }
.bgm-facts dd small { font-size: 12px; font-weight: 500; color: #5E726E; }
.bgm-cta { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.bgm-cta .bgp-btn { justify-content: center; }
.bgm-cta small { font-size: 12px; color: #B42318; }
.bgm-card.is-past .bgm-card-top { opacity: .85; }
.bgm-card.is-past .bgm-media { filter: grayscale(.6); }

/* exit window */
.bgm-exit { margin: 0 16px 16px; padding: 16px; border-radius: 12px; background: #FFF8F7; border: 1px solid #F6C9C4; }
.bgm-exit h4 { margin: 0 0 4px; font: 700 1rem/1.3 var(--bg-font); color: #11302C; }
.bgm-exit > p { margin: 0; font-size: .9rem; color: #2C413E; }
.bgm-exit > p svg { vertical-align: -2px; color: #B42318; }
.bgm-exit-grid { display: grid; gap: 12px; margin-top: 12px; }
.bgm-exit-grid > div { padding: 12px; border-radius: 10px; background: #fff; border: 1px solid #F1E1DE; }
.bgm-exit h5 { margin: 0 0 6px; font: 600 11.5px/1.3 var(--bg-font); letter-spacing: .04em; text-transform: uppercase; color: #5E726E; }
.bgm-exit-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bgm-exit-btns .bgp-btn { flex: 1 1 auto; justify-content: center; }

/* order details and changes: pills over panels (JS); plain <details> without it */
.bgm-foot { padding: 12px 16px 14px; border-top: 1px solid #EEF2F1; }
.bgm-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.bgm-tool {
	display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; border: 1px solid #DCEAE7; background: #fff;
	font: 600 13px/1.2 var(--bg-font); color: #1A5E54; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.bgm-tool:hover { border-color: #1A5E54; }
.bgm-tool:focus-visible { outline: 3px solid rgba(20, 184, 166, .45); outline-offset: 2px; }
.bgm-tool[aria-expanded="true"] { background: #1A5E54; border-color: #1A5E54; color: #fff; }
.bgm-tool.is-quiet { border-color: transparent; color: #5E726E; }
.bgm-tool.is-quiet:hover { color: #B42318; border-color: transparent; }
.bgm-tool.is-quiet[aria-expanded="true"] { background: #FDECEA; color: #B42318; }
.bgm-panel { margin-top: 10px; border: 1px solid #E7ECEA; border-radius: 12px; background: #FBFCFC; }
.bgm-panel > summary { cursor: pointer; padding: 10px 14px; font: 600 .9rem var(--bg-font); color: #1A5E54; }
.bgm-panel > :not(summary) { margin: 0; padding: 0 14px 14px; }
.bgm-panel > summary + * { padding-top: 4px; }
.bgm.is-js .bgm-panel > summary { display: none; }
.bgm.is-js .bgm-panel > summary + * { padding-top: 14px; }
.bgm.is-js .bgm-panel:not([open]) { display: none; }
.bgm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bgm-table, .bgm-totals { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.bgm-table th { padding: 0 8px 8px 0; font: 600 11.5px/1.3 var(--bg-font); letter-spacing: .04em; text-transform: uppercase; color: #5E726E; text-align: left; white-space: nowrap; }
.bgm-table td { padding: 8px 8px 8px 0; border-top: 1px solid #EEF2F1; color: #11302C; }
.bgm-table td small { color: #5E726E; }
.bgm-table .r, .bgm-totals .r { text-align: right; padding-right: 0; white-space: nowrap; }
.bgm-panel .bgm-totals { max-width: 340px; margin: 10px 0 0 auto; }
.bgm-totals td { padding: 3px 0; color: #5E726E; }
.bgm-totals .r { color: #11302C; }
.bgm-totals tr.sum td { padding-top: 7px; border-top: 1px solid #E7ECEA; font-weight: 700; color: #11302C; }
.bgm-note { margin: 10px 0 0 !important; font-size: 12.5px; line-height: 1.5; color: #5E726E; }
.bgm-qtys { display: grid; gap: 10px; }
.bgm-qty, .bgm-field { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: .9rem; color: #11302C; }
.bgm-qty small { font-size: 12px; color: #5E726E; }
.bgm-field { display: grid; margin-top: 10px; }
/* 16px: iOS zooms into a smaller field it focuses */
.bgm-qty input, .bgm-qty select, .bgm-field textarea {
	height: 40px; padding: 0 10px; border: 1px solid #DCEAE7; border-radius: 10px; background: #fff;
	font: 600 16px var(--bg-font); color: #11302C;
}
.bgm-qty input { width: 96px; text-align: center; }
.bgm-qty select { flex: 1 1 180px; max-width: 280px; font-weight: 500; }
.bgm-field textarea { width: 100%; height: auto; padding: 8px 10px; font-weight: 500; }
.bgm-qty input:focus, .bgm-qty select:focus, .bgm-field textarea:focus { outline: none; border-color: #1A5E54; box-shadow: 0 0 0 3px rgba(26, 94, 84, .12); }
.bgm-panel form > .bgp-btn { margin-top: 12px; padding: 9px 18px; font-size: .88rem; }
.bgm .bgm-danger { color: #B42318 !important; border-color: #F6C9C4; }
.bgm .bgm-danger:hover { border-color: #B42318; color: #B42318 !important; }
.bgm-msg { margin: 0 16px 14px; }
.bgm .bgp-legal-links { margin-top: 32px; }

@media (min-width: 640px) {
	.bgm-setup { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 16px; }
	.bgm-setup .bgp-btn { justify-self: end; }
	.bgm-card-top { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 18px; }
	.bgm-media { width: 96px; height: 96px; }
	.bgm-card.bgm-follow .bgm-card-top, .bgm-card.is-past .bgm-card-top { grid-template-columns: 72px minmax(0, 1fr); }
	.bgm-card.bgm-follow .bgm-media, .bgm-card.is-past .bgm-media { width: 72px; height: 72px; }
	.bgm-cta { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; }
	.bgm-cta .bgp-btn { flex: 0 0 auto; }
	.bgm-exit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bgm-exit-btns .bgp-btn { flex: 0 0 auto; }
	.bgm-foot { padding-inline: 18px; }
	.bgm-exit { margin-inline: 18px; }
}
@media (min-width: 992px) {
	.bgm-card-top { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: start; }
	.bgm-card.bgm-follow .bgm-card-top, .bgm-card.is-past .bgm-card-top { grid-template-columns: 72px minmax(0, 1fr) auto; }
	.bgm-cta { grid-column: 3; flex-direction: column; align-items: stretch; min-width: 200px; }
	.bgm-panel .bgm-qtys { grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); column-gap: 32px; }
}