/* =========================================================================
   Bundle Builder for Elementor — Storefront styles (v1.2)
   Mobile-first. Modal picker for Choice 1 / Choice 2.
   Every color / radius / dimension is a CSS custom property so the Elementor
   Style tab can drive it directly via `selectors`.
   ========================================================================= */

.bbx-wrap {
	/* Colors */
	--bbx-accent:              #1f5130;
	--bbx-accent-ink:          #ffffff;
	--bbx-accent-soft:         #eef5ef;
	--bbx-ink:                 #141414;
	--bbx-ink-2:               #2b2b2b;
	--bbx-muted:               #6b6b6b;
	--bbx-line:                #e8e3db;
	--bbx-line-strong:         #cfc7b8;
	--bbx-surface:             #ffffff;
	--bbx-surface-2:           #faf8f3;
	--bbx-danger:              #9b2c2c;
	--bbx-danger-soft:         #fbf0f0;
	--bbx-danger-line:         #e8c7c7;
	--bbx-success:             #1f5130;
	--bbx-success-soft:        #f3f8f4;
	--bbx-success-line:        #c9e2d1;

	/* Badges / pills / misc accents */
	--bbx-badge-bg:            var(--bbx-accent);
	--bbx-badge-text:          var(--bbx-accent-ink);
	--bbx-pill-bg:             var(--bbx-accent-soft);
	--bbx-pill-text:           var(--bbx-accent);
	--bbx-pill-sub-bg:         var(--bbx-surface-2);
	--bbx-pill-sub-text:       var(--bbx-muted);

	/* CTA */
	--bbx-cta-bg:              var(--bbx-accent);
	--bbx-cta-text:            var(--bbx-accent-ink);
	--bbx-cta-bg-hover:        var(--bbx-accent);
	--bbx-cta-h:               52px;
	--bbx-cta-radius:          12px;
	--bbx-cta-padx:            18px;

	/* Buttons (modal) */
	--bbx-btn-radius:          12px;
	--bbx-btn-h:               46px;

	/* Modal */
	--bbx-modal-backdrop:      rgba(20,20,20,.55);
	--bbx-modal-surface:       #ffffff;
	--bbx-modal-radius:        18px;
	--bbx-modal-pad:           14px;

	/* Hint */
	--bbx-hint-color-default:  var(--bbx-muted);
	--bbx-hint-color-error:    var(--bbx-danger);
	--bbx-hint-color-ready:    var(--bbx-success);

	/* Radius */
	--bbx-radius:              20px;
	--bbx-radius-sm:           14px;
	--bbx-radius-xs:           10px;

	/* Shadow */
	--bbx-shadow-1:            0 1px 2px rgba(20,20,20,.04), 0 8px 24px -14px rgba(20,20,20,.10);
	--bbx-shadow-2:            0 2px 4px rgba(20,20,20,.05), 0 18px 40px -20px rgba(20,20,20,.22);
	--bbx-shadow-focus:        0 0 0 3px rgba(31,81,48,.22);
	--bbx-shadow-cta:          0 8px 18px -10px rgba(31,81,48,.5);

	/* Layout */
	--bbx-wrap-max:            720px;
	--bbx-pad:                 clamp(16px, 2vw, 24px);
	--bbx-gap:                 clamp(14px, 2vw, 20px);
	--bbx-card-pad:            var(--bbx-pad);
	--bbx-card-gap:            var(--bbx-gap);
	--bbx-hero-pad:            12px;
	--bbx-slot-pad:            12px;
	--bbx-slot-gap:            10px;
	--bbx-totals-padding-top:  14px;

	/* Motion */
	--bbx-ease:                cubic-bezier(.2,.7,.2,1);
	--bbx-dur:                 180ms;

	/* Typography fallbacks (Elementor Group_Control_Typography overrides) */
	--bbx-fs-eyebrow:          .72rem;
	--bbx-fs-base:             .95rem;
	--bbx-fs-lg:               1.05rem;
	--bbx-fs-xl:               clamp(1.4rem, 1.1rem + 1vw, 1.9rem);

	color: var(--bbx-ink);
	font-size: var(--bbx-fs-base);
	line-height: 1.5;
	box-sizing: border-box;
	max-width: var(--bbx-wrap-max);
	margin-inline: auto;
}

.bbx-wrap *,
.bbx-wrap *::before,
.bbx-wrap *::after { box-sizing: inherit; }

.bbx-wrap img {
	max-width: 100%;
	height: auto;
	display: block;
}

.bbx-wrap button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* ----- Editor placeholder ------------------------------------------------ */
.bbx-placeholder {
	padding: 24px;
	border: 1px dashed var(--bbx-line-strong);
	border-radius: var(--bbx-radius-sm);
	background: var(--bbx-surface-2);
	color: var(--bbx-ink-2);
	font-size: .95rem;
}

/* ----- Header ------------------------------------------------------------ */
.bbx-head {
	margin-bottom: var(--bbx-gap);
	text-align: left;
}
.bbx-eyebrow {
	margin: 0 0 6px;
	font-size: var(--bbx-fs-eyebrow);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bbx-muted);
}
.bbx-title {
	margin: 0 0 6px;
	font-size: var(--bbx-fs-xl);
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--bbx-ink);
}
.bbx-sub {
	margin: 0;
	max-width: 54ch;
	color: var(--bbx-muted);
	font-size: var(--bbx-fs-lg);
}

/* ----- Main card --------------------------------------------------------- */
.bbx-card {
	background: var(--bbx-surface);
	border: 1px solid var(--bbx-line);
	border-radius: var(--bbx-radius);
	box-shadow: var(--bbx-shadow-1);
	padding: var(--bbx-card-pad);
	display: grid;
	gap: var(--bbx-card-gap);
}

/* ----- Hero (fixed / included product) ----------------------------------- */
.bbx-hero {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 14px;
	align-items: center;
	padding: var(--bbx-hero-pad);
	background: var(--bbx-surface-2);
	border: 1px solid var(--bbx-line);
	border-radius: var(--bbx-radius-sm);
}
.bbx-hero__media {
	position: relative;
	margin: 0;
	width: 92px;
	height: 92px;
	border-radius: var(--bbx-radius-xs);
	overflow: hidden;
	background: var(--bbx-surface);
	border: 1px solid var(--bbx-line);
	display: flex;
	align-items: center;
	justify-content: center;
}
.bbx-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bbx-hero__badge {
	position: absolute;
	top: 6px;
	left: 6px;
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--bbx-badge-bg);
	color: var(--bbx-badge-text);
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.bbx-hero__body { min-width: 0; }
.bbx-hero__title {
	margin: 0 0 4px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--bbx-ink);
	line-height: 1.25;
	letter-spacing: -.005em;
}
.bbx-hero__price {
	font-size: .95rem;
	font-weight: 600;
	color: var(--bbx-ink);
}
.bbx-hero__price .woocommerce-Price-amount { color: inherit; }
.bbx-hero__price del { color: var(--bbx-muted); font-weight: 400; margin-right: 6px; }
.bbx-hero__desc {
	display: none;
	margin: 8px 0 0;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--bbx-muted);
}

/* ----- Slots (Choice 1 / Choice 2) --------------------------------------- */
.bbx-slots {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--bbx-slot-gap);
}
.bbx-slot {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	grid-template-areas:
		"thumb body btn"
		"thumb price btn";
	gap: 4px 12px;
	align-items: center;
	padding: var(--bbx-slot-pad);
	background: var(--bbx-surface);
	border: 1px solid var(--bbx-line);
	border-radius: var(--bbx-radius-sm);
	transition: border-color var(--bbx-dur) var(--bbx-ease),
	            background var(--bbx-dur) var(--bbx-ease);
}
.bbx-slot.is-filled {
	background: var(--bbx-surface);
	border-color: var(--bbx-accent);
	box-shadow: inset 0 0 0 1px var(--bbx-accent);
}
.bbx-slot__thumb {
	grid-area: thumb;
	width: 48px;
	height: 48px;
	border-radius: var(--bbx-radius-xs);
	overflow: hidden;
	background: var(--bbx-surface-2);
	border: 1px dashed var(--bbx-line-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bbx-muted);
	font-weight: 700;
	font-size: .9rem;
}
.bbx-slot.is-filled .bbx-slot__thumb {
	border-style: solid;
	border-color: var(--bbx-line);
	background: var(--bbx-surface);
}
.bbx-slot__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bbx-slot__num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.bbx-slot.is-filled .bbx-slot__num { display: none; }

.bbx-slot__body {
	grid-area: body;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.bbx-slot__eyebrow {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bbx-muted);
}
.bbx-slot__name {
	color: var(--bbx-ink);
	font-weight: 500;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bbx-slot.is-empty .bbx-slot__name { color: var(--bbx-muted); font-weight: 400; }
.bbx-slot__price {
	grid-area: price;
	color: var(--bbx-muted);
	font-size: .85rem;
	font-weight: 500;
}
.bbx-slot.is-filled .bbx-slot__price {
	color: var(--bbx-ink);
	font-weight: 600;
}
.bbx-slot__price .woocommerce-Price-amount { color: inherit; }
.bbx-slot__price del { color: var(--bbx-muted); font-weight: 400; margin-right: 4px; }

.bbx-slot__btn {
	grid-area: btn;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--bbx-accent-soft);
	color: var(--bbx-accent);
	font-weight: 600;
	font-size: .88rem;
	white-space: nowrap;
	transition: background var(--bbx-dur) var(--bbx-ease),
	            transform var(--bbx-dur) var(--bbx-ease),
	            color var(--bbx-dur) var(--bbx-ease);
}
.bbx-slot__btn:hover {
	background: var(--bbx-accent);
	color: var(--bbx-accent-ink);
}
.bbx-slot__btn:focus-visible {
	outline: none;
	box-shadow: var(--bbx-shadow-focus);
}

/* ----- Totals ------------------------------------------------------------ */
.bbx-totals {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-top: var(--bbx-totals-padding-top);
	border-top: 1px solid var(--bbx-line);
	gap: 12px;
	flex-wrap: wrap;
}
.bbx-totals__label {
	font-size: .78rem;
	color: var(--bbx-muted);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 600;
}
.bbx-totals__line {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.bbx-totals__original {
	color: var(--bbx-muted);
	font-weight: 500;
	font-size: 1rem;
	text-decoration: line-through;
}
.bbx-totals__original:empty { display: none; }
.bbx-totals__value {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--bbx-ink);
	letter-spacing: -.01em;
}
.bbx-totals__value .woocommerce-Price-amount { color: inherit; }
.bbx-totals__value del { color: var(--bbx-muted); font-weight: 400; margin-right: 6px; }

.bbx-totals__save {
	display: none;
	width: 100%;
	text-align: right;
	font-size: .82rem;
	font-weight: 600;
	color: var(--bbx-success);
	letter-spacing: .01em;
}
.bbx-totals.has-offer .bbx-totals__save { display: block; }
.bbx-totals.has-offer .bbx-totals__original:not(:empty) { display: inline; }

.bbx-totals__note {
	display: none;
	width: 100%;
	margin: 0;
	font-size: .78rem;
	color: var(--bbx-muted);
	text-align: right;
}
.bbx-totals.has-offer .bbx-totals__note:not(:empty) { display: block; }

/* ----- CTA --------------------------------------------------------------- */
.bbx-cta {
	position: relative;
	width: 100%;
	height: var(--bbx-cta-h);
	padding: 0 var(--bbx-cta-padx);
	background: var(--bbx-cta-bg);
	color: var(--bbx-cta-text);
	border-radius: var(--bbx-cta-radius);
	font-weight: 600;
	letter-spacing: .01em;
	font-size: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: transform var(--bbx-dur) var(--bbx-ease),
	            box-shadow var(--bbx-dur) var(--bbx-ease),
	            background var(--bbx-dur) var(--bbx-ease);
	box-shadow: var(--bbx-shadow-cta);
}
.bbx-cta:hover:not(:disabled) {
	background: var(--bbx-cta-bg-hover);
	transform: translateY(-1px);
	box-shadow: 0 12px 24px -10px rgba(31,81,48,.55);
}
.bbx-cta:focus-visible {
	outline: none;
	box-shadow: var(--bbx-shadow-focus), var(--bbx-shadow-cta);
}
.bbx-cta:disabled {
	background: var(--bbx-surface-2);
	color: var(--bbx-muted);
	box-shadow: inset 0 0 0 1px var(--bbx-line);
	cursor: not-allowed;
}
.bbx-cta.is-loading .bbx-cta__label { opacity: .5; }
.bbx-cta__spinner {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	display: none;
	animation: bbx-spin .8s linear infinite;
}
.bbx-cta.is-loading .bbx-cta__spinner { display: inline-block; }
@keyframes bbx-spin { to { transform: rotate(360deg); } }

.bbx-hint {
	margin: 0;
	font-size: .82rem;
	color: var(--bbx-hint-color-default);
	text-align: center;
	min-height: 1.2em;
}
.bbx-hint[data-hint="error"] { color: var(--bbx-hint-color-error); }
.bbx-hint[data-hint="ready"] { color: var(--bbx-hint-color-ready); }

/* ----- Status banner ----------------------------------------------------- */
.bbx-status:empty { display: none; }
.bbx-status__banner {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 10px;
	padding: 14px 16px;
	border-radius: var(--bbx-radius-sm);
	background: var(--bbx-success-soft);
	border: 1px solid var(--bbx-success-line);
	color: var(--bbx-success);
	animation: bbx-pop var(--bbx-dur) var(--bbx-ease);
}
.bbx-status__banner.is-error {
	background: var(--bbx-danger-soft);
	border-color: var(--bbx-danger-line);
	color: var(--bbx-danger);
}
.bbx-status__icon { font-weight: 700; align-self: start; }
.bbx-status__msg { font-size: .92rem; line-height: 1.45; margin: 0; }
.bbx-status__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	grid-column: 1 / -1;
}
.bbx-status__link {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 14px;
	border-radius: 8px;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	background: var(--bbx-accent);
	color: var(--bbx-accent-ink);
	transition: transform var(--bbx-dur) var(--bbx-ease);
}
.bbx-status__link--ghost {
	background: transparent;
	color: var(--bbx-ink);
	box-shadow: inset 0 0 0 1px var(--bbx-line-strong);
}
.bbx-status__link:hover { transform: translateY(-1px); }
@keyframes bbx-pop {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ----- Cart pill --------------------------------------------------------- */
.bbx-pill {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 8px;
	margin-right: 6px;
	border-radius: 999px;
	background: var(--bbx-pill-bg);
	color: var(--bbx-pill-text);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	vertical-align: middle;
}
.bbx-pill--sub {
	background: var(--bbx-pill-sub-bg);
	color: var(--bbx-pill-sub-text);
}

/* ----- Cart / Checkout bundle context ------------------------------------ */
.bbx-cart-context {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--bbx-accent-soft);
	color: var(--bbx-accent);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.bbx-cart-pair {
	font-weight: 600;
	color: var(--bbx-ink);
}
.bbx-cart-save {
	font-weight: 600;
	color: var(--bbx-success);
}
.bbx-cart-subtle {
	color: var(--bbx-muted);
	font-style: italic;
}

/* Make cart choice rows visually "belong" to the included row.
   WooCommerce cart templates vary; these selectors degrade gracefully. */
.woocommerce-cart-form tr.bbx-cart-item--choice1,
.woocommerce-cart-form tr.bbx-cart-item--choice2,
.woocommerce-checkout-review-order-table tr.bbx-cart-item--choice1,
.woocommerce-checkout-review-order-table tr.bbx-cart-item--choice2 {
	background: var(--bbx-surface-2);
}
.woocommerce-cart-form tr.bbx-cart-item--choice1 td.product-name,
.woocommerce-cart-form tr.bbx-cart-item--choice2 td.product-name,
.woocommerce-checkout-review-order-table tr.bbx-cart-item--choice1 td.product-name,
.woocommerce-checkout-review-order-table tr.bbx-cart-item--choice2 td.product-name {
	padding-left: 28px;
	border-left: 3px solid var(--bbx-accent-soft);
}

/* Cart line-item price strike when discounted */
.bbx-line-original {
	color: var(--bbx-muted);
	font-weight: 400;
	margin-right: 6px;
	text-decoration: line-through;
}
.bbx-line-discounted {
	color: var(--bbx-ink);
	font-weight: 600;
}

/* ===== MODAL ============================================================= */
.bbx-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.bbx-modal.is-open {
	display: flex;
	animation: bbx-fade .18s var(--bbx-ease);
}
.bbx-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--bbx-modal-backdrop);
	backdrop-filter: blur(2px);
}
.bbx-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 560px);
	max-height: 100dvh;
	background: var(--bbx-modal-surface);
	border-radius: var(--bbx-modal-radius) var(--bbx-modal-radius) 0 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 20px 60px -20px rgba(0,0,0,.45);
	animation: bbx-slide-up .22s var(--bbx-ease);
	margin-top: auto;
}
.bbx-modal__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--bbx-line);
	background: var(--bbx-modal-surface);
	position: sticky;
	top: 0;
	z-index: 2;
}
.bbx-modal__title {
	flex: 1 1 auto;
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--bbx-accent);
	letter-spacing: -.005em;
}
.bbx-modal__close {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--bbx-surface-2);
	color: var(--bbx-ink);
	transition: background var(--bbx-dur) var(--bbx-ease);
}
.bbx-modal__close:hover { background: var(--bbx-line); }
.bbx-modal__close:focus-visible { outline: none; box-shadow: var(--bbx-shadow-focus); }
.bbx-modal__close svg { width: 16px; height: 16px; }

.bbx-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: var(--bbx-modal-pad) var(--bbx-modal-pad) calc(var(--bbx-modal-pad) - 4px);
	-webkit-overflow-scrolling: touch;
}

.bbx-modal__foot {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: var(--bbx-modal-pad) var(--bbx-modal-pad) calc(var(--bbx-modal-pad) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--bbx-line);
	background: var(--bbx-modal-surface);
}

.bbx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--bbx-btn-h);
	padding: 0 18px;
	border-radius: var(--bbx-btn-radius);
	font-weight: 600;
	font-size: .95rem;
	transition: transform var(--bbx-dur) var(--bbx-ease),
	            background var(--bbx-dur) var(--bbx-ease),
	            color var(--bbx-dur) var(--bbx-ease),
	            box-shadow var(--bbx-dur) var(--bbx-ease);
}
.bbx-btn--ghost {
	background: var(--bbx-surface-2);
	color: var(--bbx-ink);
}
.bbx-btn--ghost:hover { background: var(--bbx-line); }
.bbx-btn--primary {
	background: var(--bbx-accent);
	color: var(--bbx-accent-ink);
	box-shadow: 0 8px 18px -10px rgba(31,81,48,.45);
}
.bbx-btn--primary:hover:not(:disabled) { transform: translateY(-1px); }
.bbx-btn--primary:disabled {
	background: var(--bbx-surface-2);
	color: var(--bbx-muted);
	box-shadow: inset 0 0 0 1px var(--bbx-line);
	cursor: not-allowed;
}
.bbx-btn:focus-visible { outline: none; box-shadow: var(--bbx-shadow-focus); }

/* ----- Picker list ------------------------------------------------------- */
.bbx-picker {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.bbx-picker__item { margin: 0; }
.bbx-picker__row {
	display: grid;
	grid-template-columns: 56px 1fr 24px;
	gap: 12px;
	align-items: center;
	padding: 10px;
	background: var(--bbx-surface);
	border: 1px solid var(--bbx-line);
	border-radius: var(--bbx-radius-sm);
	cursor: pointer;
	transition: border-color var(--bbx-dur) var(--bbx-ease),
	            background var(--bbx-dur) var(--bbx-ease),
	            box-shadow var(--bbx-dur) var(--bbx-ease);
}
.bbx-picker__row:hover {
	border-color: var(--bbx-line-strong);
	background: var(--bbx-surface-2);
}
.bbx-picker__thumb {
	width: 56px;
	height: 56px;
	border-radius: var(--bbx-radius-xs);
	overflow: hidden;
	background: var(--bbx-surface-2);
	border: 1px solid var(--bbx-line);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.bbx-picker__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bbx-picker__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.bbx-picker__name {
	font-size: .95rem;
	font-weight: 600;
	color: var(--bbx-accent);
	line-height: 1.3;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.bbx-picker__price {
	font-size: .85rem;
	font-weight: 500;
	color: var(--bbx-ink-2);
}
.bbx-picker__price .woocommerce-Price-amount { color: inherit; }
.bbx-picker__price del { color: var(--bbx-muted); font-weight: 400; margin-right: 4px; }

.bbx-picker__radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
}
.bbx-picker__bullet {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	border: 2px solid var(--bbx-line-strong);
	background: var(--bbx-surface);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--bbx-dur) var(--bbx-ease),
	            background var(--bbx-dur) var(--bbx-ease);
	flex-shrink: 0;
}
.bbx-picker__bullet::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--bbx-accent);
	transform: scale(0);
	transition: transform var(--bbx-dur) var(--bbx-ease);
}
.bbx-picker__radio:checked ~ .bbx-picker__bullet {
	border-color: var(--bbx-accent);
}
.bbx-picker__radio:checked ~ .bbx-picker__bullet::after {
	transform: scale(1);
}
.bbx-picker__radio:checked + .bbx-picker__bullet,
.bbx-picker__row:has(.bbx-picker__radio:checked) {
	border-color: var(--bbx-accent);
	background: var(--bbx-accent-soft);
	box-shadow: inset 0 0 0 1px var(--bbx-accent);
}
.bbx-picker__radio:focus-visible ~ .bbx-picker__bullet {
	box-shadow: var(--bbx-shadow-focus);
}

.bbx-empty {
	margin: 0;
	padding: 28px 20px;
	text-align: center;
	color: var(--bbx-muted);
	background: var(--bbx-surface-2);
	border: 1px dashed var(--bbx-line-strong);
	border-radius: var(--bbx-radius-sm);
}

/* ----- Lock body scroll when modal open ---------------------------------- */
body.bbx-scroll-lock { overflow: hidden; }

/* ----- Animations -------------------------------------------------------- */
@keyframes bbx-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes bbx-slide-up {
	from { transform: translateY(16px); opacity: .6; }
	to   { transform: translateY(0);    opacity: 1; }
}

/* ===== RESPONSIVE ======================================================== */
@media (min-width: 560px) {
	.bbx-hero { grid-template-columns: 120px 1fr; gap: 18px; padding: calc(var(--bbx-hero-pad) + 2px); }
	.bbx-hero__media { width: 120px; height: 120px; }
	.bbx-hero__title { font-size: 1.15rem; }
	.bbx-hero__desc { display: block; }
	.bbx-slot { grid-template-columns: 56px 1fr auto auto; grid-template-areas: "thumb body price btn"; gap: 14px; padding: calc(var(--bbx-slot-pad) + 2px); }
	.bbx-slot__thumb { width: 56px; height: 56px; }
}

@media (min-width: 768px) {
	.bbx-card { padding: calc(var(--bbx-card-pad) + 4px); }

	/* Modal becomes centered card on tablets+ */
	.bbx-modal { padding: 20px; }
	.bbx-modal__dialog {
		margin: auto;
		max-height: calc(100dvh - 40px);
		border-radius: var(--bbx-modal-radius);
	}
	.bbx-modal__foot { grid-template-columns: auto 1fr; justify-content: end; }
	.bbx-modal__foot .bbx-btn--ghost { min-width: 120px; }
	.bbx-modal__foot .bbx-btn--primary { min-width: 180px; }
}

/* ----- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.bbx-wrap *,
	.bbx-modal * {
		transition: none !important;
		animation: none !important;
	}
}