/* ═══════════════════════════════════════════
   Bundle Builder – Storefront Styles
   ═══════════════════════════════════════════ */

:root {
  --bb-primary: #5C6AC4;
  --bb-primary-dark: #3F4EAE;
  --bb-primary-04: rgba(92,106,196,0.04);
  --bb-primary-10: rgba(92,106,196,0.1);
  --bb-primary-20: rgba(92,106,196,0.2);
  --bb-primary-30: rgba(92,106,196,0.3);
  --bb-primary-85: rgba(92,106,196,0.85);
  --bb-success: #00A47C;
  --bb-danger: #DE3618;
  --bb-warning: #EEC200;
  --bb-text: #1A1A2E;
  --bb-text-muted: #6B7280;
  --bb-bg: #FFFFFF;
  --bb-bg-secondary: #F9FAFB;
  --bb-border: #E5E7EB;
  --bb-radius: 16px;
  --bb-radius-sm: 8px;
  --bb-tab-radius: 8px;
  --bb-variant-radius: 8px;
  --bb-badge-radius: 8px;
  --bb-product-radius: 16px;
  --bb-cart-product-radius: 16px;
  --bb-shadow: none;
  --bb-shadow-lg: none;
  --bb-sticky-height: 100px;
  /* Page */
  --bb-page-bg: #ffffff;
  --bb-page-title-color: #1A1A2E;
  --bb-title-font-size: 28px;
  --bb-page-desc-color: #6B7280;
  --bb-page-desc-fs: 14px;
  /* Buttons – Add to Bundle */
  --bb-add-btn-bg: var(--bb-primary);
  --bb-add-btn-bg-hover: var(--bb-primary-dark);
  --bb-add-btn-text: #ffffff;
  --bb-add-btn-text-hover: #ffffff;
  --bb-add-btn-border-color: transparent;
  --bb-add-btn-border-width: 0px;
  --bb-add-btn-radius: 8px;
  --bb-add-btn-py: 10px;
  --bb-add-btn-px: 18px;
  --bb-add-btn-fs: 14px;
  /* Buttons – Checkout */
  --bb-checkout-btn-bg: var(--bb-primary);
  --bb-checkout-btn-bg-hover: #333333;
  --bb-checkout-btn-text: #ffffff;
  --bb-checkout-btn-text-hover: #ffffff;
  --bb-checkout-btn-border-color: transparent;
  --bb-checkout-btn-border-width: 0px;
  --bb-checkout-btn-radius: 8px;
  --bb-checkout-btn-py: 10px;
  --bb-checkout-btn-px: 18px;
  --bb-checkout-btn-fs: 14px;
  /* legacy */
  --bb-btn-py: 10px;
  --bb-btn-px: 18px;
  --bb-btn-fs: 14px;
  --bb-btn-text-color: #ffffff;
  --bb-btn-border-color: transparent;
  --bb-btn-border-width: 0px;
  /* Tabs */
  --bb-tab-bg: #ffffff;
  --bb-tab-active-bg: #5C6AC4;
  --bb-tab-text: #6B7280;
  --bb-tab-active-text: #ffffff;
  --bb-tab-border: #E5E7EB;
  --bb-tab-active-border: #5C6AC4;
  --bb-tab-fs: 13px;
  --bb-tab-border-width: 1px;
  --bb-tab-py: 8px;
  --bb-tab-px: 16px;
  /* Product cards */
  --bb-product-border-width: 2px;
  /* Cart panel */
  --bb-cart-border-width: 1px;
  /* Product cards */
  --bb-product-name-color: #1A1A2E;
  --bb-text-font-size: 14px;
  --bb-price-color: #5C6AC4;
  --bb-price-fs: 15px;
  --bb-compare-price-color: #6B7280;
  --bb-icon-color: #4A4A4A;
  /* Cart panel */
  --bb-cart-bg: #ffffff;
  --bb-cart-border: #E5E7EB;
  --bb-cart-title-color: #1A1A2E;
  --bb-cart-title-fs: 16px;
  --bb-total-color: #1A1A2E;
  --bb-total-fs: 13px;
  /* Progress / discount */
  --bb-progress-text-color: #1A1A2E;
  --bb-progress-fs: 13px;
  --bb-progress-fill: #5C6AC4;
  --bb-discount-label-color: #ffffff;
  /* Variants */
  --bb-variant-bg: #ffffff;
  --bb-variant-border: #E5E7EB;
  --bb-variant-text: #1A1A2E;
  --bb-variant-fs: 13px;
  /* Badges */
  --bb-badge-bg: #5C6AC4;
  --bb-badge-text-color: #ffffff;
  --bb-badge-fs: 13px;
  /* Font weights */
  --bb-add-btn-fw: 600;
  --bb-checkout-btn-fw: 700;
  --bb-tab-fw: 600;
  --bb-product-name-fw: 600;
  --bb-product-price-fw: 700;
  --bb-cart-title-fw: 700;
  --bb-cart-item-name-fw: 600;
  --bb-cart-item-price-fw: 700;
  --bb-total-fw: 700;
}

/* ── Reset ── */
.bb-root *, .bb-root *::before, .bb-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bb-merge-warn {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border-radius: var(--bb-radius-sm);
  border: 1px solid rgba(238, 194, 0, 0.55);
  background: rgba(238, 194, 0, 0.12);
}

.bb-merge-warn__text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--bb-text);
}

.bb-root {
  font-family: inherit;
  font-size: inherit;
  color: var(--bb-text);
}

.bb-root--bottombar {
  padding-bottom: 0px;
}

.bb-root--topbar {
  padding-top: var(--bb-sticky-height);
}

/* ── Header ── */
/* ── Banner ── */
.bb-banner-outer {
  max-width: var(--bb-page-max-width, 1200px);
  margin: 0 auto 16px;
  padding: 0 16px;
  box-sizing: border-box;
}
.bb-banner-outer--full {
  max-width: 100%;
  padding: 0;
}
.bb-banner {
  width: 100%;
  line-height: 0;
  border-radius: var(--bb-product-radius, 12px);
  overflow: hidden;
}
.bb-banner--full {
  border-radius: 0;
}
.bb-banner--content {
  border-radius: var(--bb-product-radius, 12px);
}
.bb-banner-img {
  width: 100%;
  height: auto;
  display: block;
}

.bb-header {
  padding: 0 20px;
  max-width: var(--bb-page-max-width, 1200px);
  margin: 0 auto;
  box-sizing: border-box;
}

.bb-title {
  font-size: var(--bb-title-font-size, clamp(1.4em, 4vw, 2.2em));
  /* mobile font-size override defined below in media query */
  font-weight: 700;
  color: var(--bb-page-title-color, var(--bb-text));
  margin-bottom: var(--bb-title-mb, 8px);
}

.bb-type-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  background: var(--bb-primary-10);
  color: var(--bb-primary);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.bb-subtitle {
  color: var(--bb-page-desc-color, var(--bb-text-muted));
  font-size: var(--bb-page-desc-fs, 1em);
  max-width: 500px;
  margin-bottom: var(--bb-desc-mb, 16px);
}

/* ── Progress Bar (tab style) ── */
.bb-progress {
  padding: 12px 0 var(--bb-tab-mb, 24px);
}

.bb-progress-bar-wrap {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}
.bb-progress-bar-wrap::-webkit-scrollbar { display: none; }
.bb-progress-bar {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: visible;
  padding: 10px 4px;
}

/* ── Step node ── */
.bb-step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-width: 64px;
  flex-shrink: 0;
  user-select: none;
}

.bb-step-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid #D1D5DB;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #9CA3AF;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 1;
}

.bb-step-node.active .bb-step-circle {
  border-color: var(--bb-badge-bg, var(--bb-primary));
  background: var(--bb-badge-bg, var(--bb-primary));
  color: var(--bb-badge-text-color, #fff);
  box-shadow: 0 0 0 5px var(--bb-badge-bg-20, rgba(92,106,196,0.2));
  animation: bb-step-pulse 2.2s ease-in-out infinite;
}

.bb-step-node.completed .bb-step-circle {
  border-color: var(--bb-badge-bg, var(--bb-primary));
  background: var(--bb-badge-bg, var(--bb-primary));
  color: var(--bb-badge-text-color, #fff);
  box-shadow: none;
}

.bb-step-node:hover:not(.active):not(.disabled) .bb-step-circle {
  border-color: var(--bb-badge-bg, var(--bb-primary));
  background: var(--bb-badge-bg, var(--bb-primary));
  color: var(--bb-badge-text-color, #fff);
}

.bb-step-node.disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.bb-step-node.disabled .bb-step-circle {
  border-color: #D1D5DB;
  background: #fff;
  color: #9CA3AF;
}

.bb-step-label {
  font-size: 12px;
  font-weight: 600;
  color: #9CA3AF;
  text-align: center;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.bb-step-node.active .bb-step-label,
.bb-step-node.completed .bb-step-label {
  color: var(--bb-badge-bg, var(--bb-primary));
}

/* ── Connector line ── */
.bb-step-connector {
  width: 60px;
  flex-shrink: 0;
  height: 3px;
  background: #E5E7EB;
  position: relative;
  overflow: hidden;
  border-radius: 99px;
  margin-bottom: 28px;
}

.bb-step-connector-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--bb-badge-bg, var(--bb-primary));
  border-radius: 99px;
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.bb-step-connector.filled .bb-step-connector-fill {
  width: 100%;
}

@keyframes bb-step-pulse {
  0%, 100% { box-shadow: 0 0 0 5px var(--bb-badge-bg-20, rgba(92,106,196,0.2)); }
  50%       { box-shadow: 0 0 0 10px var(--bb-badge-bg-10, rgba(92,106,196,0.1)); }
}

/* ── Step ── */
.bb-step-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 0 4px;
  flex-wrap: wrap;
  gap: 12px;
}

.bb-step-badge {
  display: inline-block;
  background: var(--bb-primary-10);
  color: var(--bb-primary);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 6px;
}

.bb-step-title {
  font-size: clamp(1.1em, 3vw, 1.6em);
  font-weight: 700;
  color: var(--bb-text);
}

.bb-step-desc {
  color: var(--bb-text-muted);
  font-size: 0.9em;
  margin-top: 15px;
}

.bb-step-rule {
  text-align: right;
  flex-shrink: 0;
}

.bb-rule-text {
  display: inline;
  font-size: calc(var(--bb-badge-fs, 13px) + 2px);
  color: var(--bb-text-muted);
  margin-right: 8px;
}

.bb-sel-count {
  display: inline-block;
  background: var(--bb-badge-bg, var(--bb-primary));
  color: var(--bb-badge-text-color, #ffffff);
  font-size: var(--bb-badge-fs, 13px);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--bb-badge-radius, 20px);
}

/* ── Validation ── */
.bb-validation {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: var(--bb-danger);
  padding: 10px 16px;
  border-radius: var(--bb-radius-sm);
  font-size: 0.9em;
  margin-bottom: 16px;
}

.bb-validation.hidden {
  display: none;
}

/* ── Product Grid ── */
.bb-product-grid {
  display: grid;
  grid-template-columns: repeat(var(--bb-cols-desktop, 3), 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

@media (max-width: 480px) {
  .bb-product-grid {
    grid-template-columns: repeat(var(--bb-cols-mobile, 2), 1fr);
    gap: 12px;
  }
}

/* ── Product Card ── */
.bb-product-card {
  background: var(--bb-bg);
  border: var(--bb-product-border-width, 2px) solid var(--bb-border) !important;
  border-radius: var(--bb-product-radius, var(--bb-radius)) !important;
  overflow: hidden;
  transition: border-color 0.2s ease;
  position: relative;
  user-select: none;
  cursor: pointer;
  box-shadow: var(--bb-shadow);
}

.bb-product-card:hover {
  box-shadow: var(--bb-shadow-lg);
}

.bb-product-card.selected {
  border-color: var(--bb-border);
}

.bb-product-img-wrap {
  position: relative;
  aspect-ratio: var(--bb-img-ratio, 1/1);
  overflow: hidden;
  background: var(--bb-bg-secondary);
}

.bb-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-check-overlay {
  display: none;
}

.bb-product-info {
  padding: 12px;
}

.bb-product-name {
  font-size: var(--bb-text-font-size, 14px) !important;
  font-weight: var(--bb-product-name-fw, 600) !important;
  color: var(--bb-product-name-color, var(--bb-text));
  line-height: 1.3;
  margin-bottom: 6px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-product-price {
  font-size: var(--bb-price-fs, 15px) !important;
  font-weight: var(--bb-product-price-fw, 700) !important;
  color: var(--bb-price-color, var(--bb-primary));
}

/* ── Variant Dropdown ── */
.bb-variant-select {
  width: 100%;
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid var(--bb-variant-border, var(--bb-border)) !important;
  border-radius: var(--bb-variant-radius, 6px) !important;
  font-size: var(--bb-variant-fs, 0.85em) !important;
  font-family: inherit;
  background: var(--bb-variant-bg, white);
  color: var(--bb-variant-text, var(--bb-text));
  cursor: pointer;
  outline: none;
  appearance: auto;
}

.bb-variant-select:focus {
  border-color: var(--bb-primary);
  box-shadow: none;
}

/* ── Per-card Add to Cart button ── */
.bb-card-add-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: var(--bb-add-btn-py, 8px) var(--bb-add-btn-px, 10px);
  background: var(--bb-add-btn-bg, var(--bb-primary));
  color: var(--bb-add-btn-text, #fff);
  border: var(--bb-add-btn-border-width, 0px) solid var(--bb-add-btn-border-color, transparent) !important;
  border-radius: var(--bb-add-btn-radius, 6px) !important;
  font-size: var(--bb-add-btn-fs, 1em) !important;
  font-family: inherit;
  font-weight: var(--bb-add-btn-fw, 600) !important;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  line-height: 1;
}

.bb-card-add-btn:hover:not(:disabled):not(.added) {
  background: var(--bb-add-btn-bg-hover, var(--bb-primary-dark, var(--bb-primary)));
  color: var(--bb-add-btn-text-hover, var(--bb-add-btn-text, #fff));
  transform: translateY(-1px);
}

.bb-card-add-btn.added {
  background: #fff4f4;
  color: #d82c0d;
  border: var(--bb-add-btn-border-width, 2px) solid #d82c0d;
  border-radius: var(--bb-add-btn-radius, 8px);
}

.bb-card-add-btn.added:hover {
  background: #fff4f4;
  color: #d82c0d;
  transform: none;
}

.bb-card-add-btn.disabled,
.bb-card-add-btn:disabled {
  background: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
  transform: none;
  opacity: 0.7;
}

/* Out of stock */
.bb-product-card.bb-oos {
  opacity: 0.6;
  pointer-events: none;
}
.bb-oos-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.45);
  border-radius: inherit;
}
.bb-card-add-btn.bb-oos-btn {
  background: #d1d5db;
  color: #6b7280;
  cursor: not-allowed;
  font-style: italic;
}

/* ── Navigation ── */
.bb-nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 8px 0 32px;
}

/* Sticky back/next nav for step-by-step layout */
.bb-sticky-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
}
.bb-sticky-nav-back,
.bb-sticky-nav-next,
.bb-sticky-nav-checkout {
  padding: var(--bb-checkout-btn-py, 12px) var(--bb-checkout-btn-px, 24px) !important;
  border-radius: var(--bb-checkout-btn-radius, var(--bb-radius-sm)) !important;
  font-size: var(--bb-checkout-btn-fs, 15px) !important;
  font-weight: var(--bb-checkout-btn-fw, 700) !important;
  line-height: 1 !important;
  min-height: 44px;
}
.bb-sticky-nav-back {
  flex: 0 0 auto;
}
.bb-sticky-nav-next,
.bb-sticky-nav-checkout {
  flex: 0 0 auto;
}

.bb-sticky-nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.bb-sticky-nav-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.2;
  min-width: 0;
}
.bb-sticky-nav-price .bb-sheet-total-amt {
  font-size: var(--bb-cart-item-price-fs, 14px);
  font-weight: var(--bb-cart-item-price-fw, 700);
  color: var(--bb-text, #111);
}
.bb-sticky-nav-price .bb-sheet-orig-price {
  font-size: var(--bb-cart-item-price-fs, 14px);
}

/* Mobile icon-only nav */
.bb-nav-text-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  border: none;
}
.bb-nav-text-btn--secondary {
  background: var(--bb-bg-secondary, #f3f4f6);
  border: 1px solid var(--bb-border);
  color: var(--bb-text, #111);
}
.bb-nav-text-btn--primary {
  background: var(--bb-primary, #008060);
  color: #fff;
}
.bb-nav-text-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.bb-nav-text-btn svg { flex-shrink: 0; }
.bb-nav-icon-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bb-bg-secondary, #f3f4f6);
  border: 1px solid var(--bb-border);
  color: var(--bb-text, #111);
  cursor: pointer;
  padding: 0;
}
.bb-nav-icon-btn svg { display: block; }
.bb-nav-icon-btn--primary {
  background: var(--bb-primary, #008060);
  border-color: var(--bb-primary, #008060);
  color: #fff;
}
.bb-nav-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.bb-sticky-nav-total {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.2;
  min-width: 0;
}
.bb-sticky-nav-total .bb-sheet-total-amt {
  font-size: var(--bb-cart-item-price-fs, 14px);
  font-weight: var(--bb-cart-item-price-fw, 700);
  color: var(--bb-text, #111);
}
.bb-sticky-nav-total .bb-sheet-orig-price {
  font-size: var(--bb-cart-item-price-fs, 14px);
  text-decoration: line-through;
  color: var(--bb-text-muted);
}

/* ── Buttons ── */
.bb-btn {
  padding: var(--bb-add-btn-py, 10px) var(--bb-add-btn-px, 18px);
  border-radius: var(--bb-add-btn-radius, 8px);
  font-size: var(--bb-add-btn-fs, 14px);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  line-height: 1;
}

.bb-btn--primary {
  padding: var(--bb-add-btn-py, 10px) var(--bb-add-btn-px, 18px);
  font-size: var(--bb-add-btn-fs, 14px);
  background: var(--bb-add-btn-bg, var(--bb-primary));
  color: var(--bb-add-btn-text, #ffffff);
  border: var(--bb-add-btn-border-width, 0px) solid var(--bb-add-btn-border-color, transparent);
}

.bb-btn--primary:hover:not(:disabled) {
  background: var(--bb-add-btn-bg-hover, var(--bb-primary-dark, var(--bb-primary)));
  color: var(--bb-add-btn-text-hover, var(--bb-add-btn-text, #ffffff));
  transform: translateY(-1px);
  box-shadow: var(--bb-shadow);
}

.bb-btn--primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.bb-btn--secondary {
  padding: var(--bb-add-btn-py, 10px) var(--bb-add-btn-px, 18px);
  font-size: var(--bb-add-btn-fs, 14px);
  border-radius: var(--bb-add-btn-radius, 8px);
  background: var(--bb-bg);
  color: var(--bb-add-btn-bg, var(--bb-primary));
  border: max(var(--bb-add-btn-border-width, 1px), 1px) solid var(--bb-add-btn-bg, var(--bb-primary));
}

.bb-btn--secondary:hover {
  background: var(--bb-add-btn-bg, var(--bb-primary));
  color: var(--bb-add-btn-text, #ffffff);
}

.bb-btn--cta {
  padding: var(--bb-add-btn-py, 14px) var(--bb-add-btn-px, 36px);
  font-size: var(--bb-add-btn-fs, 14px);
  background: linear-gradient(135deg, var(--bb-add-btn-bg, var(--bb-primary)), var(--bb-primary-dark, var(--bb-primary)));
  color: var(--bb-add-btn-text, #ffffff);
  border: var(--bb-add-btn-border-width, 0px) solid var(--bb-add-btn-border-color, transparent);
  font-size: 1.05em;
  padding: 14px 36px;
  box-shadow: none;
}

.bb-btn--cta:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--bb-add-btn-bg-hover, var(--bb-primary-dark, var(--bb-primary))), var(--bb-primary-dark, var(--bb-primary)));
  color: var(--bb-add-btn-text-hover, var(--bb-add-btn-text, #ffffff));
  transform: translateY(-2px);
  box-shadow: none;
}

/* ── Sticky bar — shared ── */
.bb-sticky {
  position: fixed;
  z-index: 200;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  bottom: 16px;
  transition: opacity 0.25s ease;
  /* left/width set dynamically by JS to match bb-root width */
}

.bb-sticky--top {
  top: 16px;
  bottom: auto;
}
.bb-sticky--panel-open {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Mobile-only sticky: hidden on desktop, shown on mobile */
.bb-sticky--mobile-only {
  display: none;
}

/* ── Desktop sticky bar (≥ 768px): 3-column layout ── */
@media (min-width: 768px) {
  .bb-sticky {
    border: 1px solid var(--bb-border);
  }
  .bb-sticky:not(.bb-sticky--top) {
    top: auto;
  }

  /* 3-column grid: progress | items thumbnails | total+checkout */
  .bb-sheet {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    max-height: none;
    min-height: 68px;
  }
  .bb-sheet-hdr { display: none; }

  /* Col 1: progress bar */
  .bb-sheet-progress {
    grid-column: 1;
    grid-row: 1;
    padding: 12px 20px;
    border-right: 1px solid var(--bb-border);
    overflow: visible;
  }
  .bb-sticky-nudge { margin-bottom: 6px; }
  .bb-sticky-progress-total {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 8px;
  }
  .bb-sticky-progress-total .bb-sheet-total-amt {
    font-size: var(--bb-cart-item-price-fs, 14px);
    font-weight: var(--bb-cart-item-price-fw, 700);
    color: var(--bb-text, #111);
  }
  .bb-sticky-progress-total .bb-sheet-orig-price {
    font-size: var(--bb-cart-item-price-fs, 14px);
  }

  /* Col 2: slot strip — min-width:0 lets the grid cell shrink below content size */
  .bb-slot-strip {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    border-right: 1px solid var(--bb-border);
    border-bottom: none;
    padding: 4px 6px;
  }
  /* Arrows shown on desktop */
  .bb-slot-arrow { display: flex; }
  .bb-sheet-mobile-total { display: none !important; }

  /* Col 3: total on left, checkout button on right */
  .bb-sheet-footer {
    grid-column: 3;
    grid-row: 1;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
    border-top: none;
  }
  .bb-sheet-desktop-total {
    display: flex !important;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    flex-shrink: 0;
    line-height: 1;
  }
  .bb-sheet-footer .bb-cart-checkout-btn {
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.bb-sheet-desktop-total { display: none; }
.bb-sticky-progress-total { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }

.bb-sheet-mobile-total {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bb-sheet-mobile-total-amt {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bb-sheet-orig-price {
  font-size: var(--bb-total-fs, 13px);
  color: var(--bb-text-muted);
  text-decoration: line-through;
  display: inline;
}

.bb-sheet-save-badge {
  font-size: 0.72em;
  font-weight: 700;
  background: #dcfce7;
  color: #15803d;
  padding: 2px 7px;
  border-radius: 20px;
}

/* ── Mobile sticky bar (< 768px): bottom/top sheet with collapsible drawer ── */
@media (max-width: 767px) {
  /* Sidebar layout: show mobile sticky, hide sidebar cart col, add bottom padding */
  .bb-root--sidebar .bb-cart-col { display: none; }
  .bb-sticky--mobile-only { display: flex; }
  .bb-root--sidebar { padding-bottom: var(--bb-sticky-height); }

  .bb-sticky {
    border: 1px solid var(--bb-border);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    bottom: 12px;
    top: auto;
  }
  .bb-sticky--top {
    top: 12px;
    bottom: auto;
  }
  .bb-sheet {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
  }
  .bb-sheet-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 6px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    gap: 12px;
    flex-shrink: 0;
  }
  /* Slot strip not rendered on mobile — toggle lives in header instead */
  .bb-slot-strip { display: none; }
  .bb-slot-arrow { display: none; }
  /* Badge same size as title */
  .bb-sheet-count {
    font-size: calc(var(--bb-cart-title-fs, 16px) - 3px) !important;
    font-weight: 700 !important;
  }
  /* Toggle in header: perfect circle, icon only, vertically centered */
  .bb-sheet-hdr {
    align-items: center;
  }
  .bb-sheet-hdr .bb-slot-toggle-btn {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    padding: 0;
    border-radius: 50%;
    align-self: center;
    justify-content: center;
  }
  .bb-sheet-hdr .bb-slot-toggle-count { display: none; }
  /* Match back icon button height to checkout text button */
  .bb-sticky-nav-actions .bb-nav-icon-btn {
    width: auto;
    height: auto;
    padding: 8px;
    min-width: 34px;
    min-height: 34px;
  }
  .bb-sheet-footer {
    padding: 10px 20px 14px;
    border-top: 1px solid var(--bb-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    overflow: hidden;
  }
  .bb-sheet-mobile-total {
    flex: 0 0 40%;
    min-width: 0;
    display: flex;
    align-items: center;
  }
  .bb-sheet-footer .bb-cart-checkout-btn {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 8px !important;
    font-size: 14px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bb-sheet-progress {
    padding: 0 20px 12px;
    flex-shrink: 0;
    overflow: visible;
  }

  /* Remove padding from mobile nav */
  .bb-sticky-nav { padding: 0; }
  /* Mobile nav: total left, action buttons always right */
  .bb-sticky-nav--mobile-icon .bb-sticky-nav-total {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
  }
  .bb-sticky-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
  }
  /* Fix back icon stroke color */
  .bb-nav-icon-btn svg {
    stroke: currentColor;
    color: var(--bb-text, #111);
  }
  .bb-nav-icon-btn--primary svg {
    color: #fff;
  }

  /* Force medium size on mobile for all buttons and tabs */
  .bb-card-add-btn,
  .bb-card-add-btn.added,
  .bb-btn {
    padding: 10px 18px !important;
    font-size: 14px !important;
  }
  .bb-step-tab {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
}

/* ── Sheet sub-elements (shared across breakpoints) ── */
.bb-sheet-hdr-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bb-sheet-title {
  font-size: calc(var(--bb-cart-title-fs, 16px) - 3px);
  font-weight: 700;
  color: var(--bb-cart-title-color, var(--bb-text));
  white-space: nowrap;
}

/* Sticky bar checkout button: always medium size, ignore config */
.bb-sticky .bb-cart-checkout-btn {
  padding: 10px 18px !important;
  font-size: 14px !important;
}

.bb-sheet-count {
  font-size: 0.75em;
  font-weight: 600;
  color: var(--bb-text-muted);
  background: var(--bb-bg-secondary);
  border: 1px solid var(--bb-border);
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.bb-sheet-arrow {
  flex-shrink: 0;
  color: var(--bb-text-muted);
  transition: transform 0.25s ease;
}

.bb-sheet-arrow.open {
  transform: rotate(180deg);
}

.bb-sheet-items {
  padding: 4px 20px 0;
}

.bb-sheet-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--bb-border);
}

.bb-sheet-total-label {
  font-size: var(--bb-total-fs, 13px);
  color: var(--bb-text-muted);
  font-weight: 500;
}

.bb-sheet-total-amt {
  font-size: var(--bb-total-fs, 13px) !important;
  font-weight: var(--bb-total-fw, 700) !important;
  color: var(--bb-text);
}

.bb-sheet-empty {
  padding: 16px 20px;
  color: var(--bb-text-muted);
  font-size: var(--bb-cart-progress-fs, 0.9em);
  text-align: center;
}

.bb-sheet-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bb-bg-secondary);
  border: 1px solid var(--bb-border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--bb-text-muted);
  padding: 0;
  transition: background 0.15s, color 0.15s;
  align-self: center;
}

.bb-sheet-remove:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

/* ── Slot expand panel (slides up above the sticky bar) ── */
.bb-slot-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
  border: 1px solid var(--bb-border);
  border-bottom: none;
  padding: 12px 16px 10px;
  max-height: 45vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  z-index: 1;
}
.bb-panel-items { display: flex; flex-direction: column; gap: 8px; }
.bb-panel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--bb-border);
}
.bb-panel-item:last-child { border-bottom: none; }
.bb-panel-item-img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; border: 1px solid var(--bb-border); }
.bb-panel-item-info { flex: 1; min-width: 0; }
.bb-panel-item-name { font-size: var(--bb-cart-item-name-fs, 13px); font-weight: 600; color: var(--bb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.bb-panel-item-remove {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex-shrink: 0;
  width: 22px !important;
  height: 22px !important;
}
.bb-panel-empty { font-size: 0.82em; color: var(--bb-text-muted); text-align: center; padding: 8px 0; }
.bb-panel-items { gap: 0 !important; }
.bb-panel-estimated-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 4px;
  margin-top: 8px;
  border-top: 1px solid var(--bb-border);
  font-size: 14px;
  font-weight: 500;
  color: var(--bb-text);
}
.bb-panel-estimated-total .bb-sheet-total-amt {
  font-size: var(--bb-cart-item-price-fs, 14px);
  font-weight: var(--bb-cart-item-price-fw, 700);
}

/* Toggle button */
.bb-slot-toggle-btn {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding: 0 7px;
  border-radius: 13px;
  border: 1.5px solid var(--bb-border, #d1d5db);
  background: #fff;
  color: var(--bb-text-muted, #666);
  cursor: pointer;
  font-size: 0.75em;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.bb-slot-toggle-btn:hover { background: var(--bb-bg-secondary, #f3f4f6); }
.bb-slot-toggle-btn.open { border-color: var(--bb-primary, #008060); color: var(--bb-primary, #008060); }
.bb-slot-toggle-count { font-size: 0.85em; }

/* ── Slot strip ── */
.bb-slot-strip {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
  min-width: 0;
}

/* padding-top: 10px so the X button at top:-7px clears the overflow clip boundary */
.bb-slot-scroll {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
  min-width: 0;
  padding: 10px 10px 10px 2px;
}
/* When slots overflow, expand to fill between arrows and scroll from start */
.bb-slot-scroll--overflow { flex: 1; }
.bb-slot-scroll::-webkit-scrollbar { display: none; }

.bb-slot-arrow {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--bb-border, #d1d5db);
  background: #fff;
  color: var(--bb-text, #444);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  transition: opacity 0.15s, background 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.bb-slot-arrow:hover { background: var(--bb-bg-secondary, #f3f4f6); box-shadow: 0 2px 6px rgba(0,0,0,0.14); }
.bb-slot-arrow--hidden { display: none !important; }
.bb-slot-arrow--disabled { opacity: 0.3; pointer-events: none; }

/* Slot groups (one per step) */
.bb-slot-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.bb-slot-group + .bb-slot-group {
  margin-left: 0;
}

.bb-slot {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.bb-slot--empty {
  border: 2px dashed var(--bb-border, #dde0e4);
  color: var(--bb-text-muted, #aaa);
  background: var(--bb-bg-secondary, #f6f6f7);
}

.bb-slot--filled {
  border: 2px solid var(--bb-primary, #008060);
}

.bb-slot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.bb-slot-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #333;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  line-height: 1;
}
.bb-slot-remove:hover { background: #dc2626; }

/* Nudge text in progress */
.bb-sticky-nudge {
  font-size: var(--bb-cart-progress-fs, 0.82em);
  color: var(--bb-text-muted);
  margin-bottom: 8px;
  line-height: 1.4;
}

/* ── Discount progress (used in both sticky bar & sidebar) ── */
.bb-dp-track {
  position: relative;
  width: 100%;
  height: 8px;
  background: #E5E7EB;
  border-radius: 99px;
  overflow: visible;
}

.bb-dp-fill {
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  height: 8px;
  background: var(--bb-progress-fill, var(--bb-primary));
  border-radius: 99px;
  overflow: hidden;
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.bb-dp-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: bb-dp-shimmer 1.8s ease-in-out infinite;
  border-radius: 99px;
}

@keyframes bb-dp-shimmer {
  0%   { left: -75%; }
  100% { left: 130%; }
}

.bb-next-discount {
  font-size: 13px;
  color: var(--bb-text-muted);
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  padding: 6px 14px;
  border-radius: 20px;
}

.bb-next-discount strong {
  color: #B45309;
}

/* ── Error / Empty ── */
.bb-error {
  text-align: center;
  padding: 60px 20px;
  color: var(--bb-text-muted);
}

/* ── Skeleton ── */
.bb-skeleton {
  padding: 40px 16px;
  max-width: 1100px;
  margin: 0 auto;
}

.bb-skeleton-header {
  text-align: center;
  margin-bottom: 40px;
}

.bb-skel-line {
  height: 16px;
  background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  margin: 8px auto;
}

.bb-skel-line.w-60 { width: 60%; height: 28px; }
.bb-skel-line.w-40 { width: 40%; }
.bb-skel-line.w-80 { width: 80%; }

.bb-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.bb-skel-card {
  border-radius: var(--bb-radius);
  overflow: hidden;
  border: 1px solid var(--bb-border);
  padding: 0 0 12px;
}

.bb-skel-img {
  aspect-ratio: 1;
  background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  margin-bottom: 10px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Two-column Layout ── */
.bb-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  max-width: var(--bb-page-max-width, 1200px);
  margin: 0 auto;
  padding: 0 16px;
  align-items: start;
}

.bb-builder-col {
  min-width: 0;
}

.bb-cart-col {
  position: sticky;
  top: 24px;
}

/* Bottom-bar / top-bar mode: full width, no sidebar */
.bb-root--bottombar .bb-layout,
.bb-root--topbar .bb-layout {
  grid-template-columns: 1fr;
  max-width: 100%;
}

/* ── Cart Panel ── */
.bb-cart-panel {
  background: var(--bb-cart-bg, #fff);
  border: var(--bb-cart-border-width, 1px) solid var(--bb-cart-border, var(--bb-border));
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-lg);
  overflow: hidden;
}

.bb-cart-header {
  padding: 16px 20px 12px;
}

.bb-cart-title {
  font-size: var(--bb-cart-title-fs, 1em) !important;
  font-weight: var(--bb-cart-title-fw, 700) !important;
  color: var(--bb-cart-title-color, var(--bb-text));
}


/* ── Discount progress bar ── */
.bb-discount-progress {
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--bb-border);
  background: #fafafa;
}

.bb-dp-text {
  font-size: var(--bb-cart-progress-fs, var(--bb-progress-fs, 0.8em));
  color: var(--bb-progress-text-color, var(--bb-text-muted));
  margin-bottom: 10px;
  line-height: 1.5;
}

.bb-dp-text strong {
  color: var(--bb-text);
  font-weight: 700;
}

.bb-dp-current {
  display: inline-block;
  background: var(--bb-badge-bg, var(--bb-primary));
  color: var(--bb-badge-text-color, #fff);
  font-size: var(--bb-badge-fs, 11px);
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--bb-badge-radius, 20px);
  vertical-align: middle;
}

.bb-dp-milestone {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 2.5px solid #fff;
  box-shadow: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
}

.bb-dp-milestone.reached {
  background: var(--bb-progress-fill, var(--bb-primary));
  box-shadow: 0 0 0 4px var(--bb-primary-20, rgba(92,106,196,0.25));
  animation: bb-milestone-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes bb-milestone-pop {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.5; }
  60%  { transform: translate(-50%, -50%) scale(1.25); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.bb-cart-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--bb-text-muted);
  font-size: var(--bb-cart-progress-fs, 13px);
}

.bb-cart-empty-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.bb-cart-hint {
  font-size: 12px;
  margin-top: 4px;
}

.bb-bundle-group {
  margin: 0 4px 12px;
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-sm);
  background: var(--bb-bg);
  overflow: hidden;
}

.bb-bundle-group-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--bb-primary-04), transparent);
  border-bottom: 1px solid var(--bb-border);
}

.bb-bundle-group-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}

.bb-bundle-group-prefix {
  font-size: 13px;
  font-weight: 600;
  color: var(--bb-text-muted);
}

.bb-bundle-group-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bb-bundle-group-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--bb-text);
  line-height: 1.25;
}

.bb-bundle-group-meta {
  font-size: 12px;
  color: var(--bb-text-muted);
}

.bb-cart-items {
  overflow-y: auto;
  max-height: 420px;
  padding: 4px 20px;
}

/* Sidebar panel item row */
.bb-panel-ci-row {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  align-items: flex-start;
}

.bb-panel-ci-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--bb-radius-sm);
  flex-shrink: 0;
  border: 1px solid var(--bb-border);
}

.bb-panel-ci-info {
  flex: 1;
  min-width: 0;
}

.bb-panel-ci-remove {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--bb-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--bb-text-muted);
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  align-self: center;
}

.bb-panel-ci-remove:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

.bb-ci-row {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  align-items: flex-start;
}

.bb-ci-sep {
  border: none;
  border-top: 1.5px dashed var(--bb-border);
  margin: 0;
}

/* (legacy sticky bundle block styles removed — replaced by bb-sheet) */

.bb-ci-img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: var(--bb-cart-product-radius, var(--bb-radius-sm));
  flex-shrink: 0;
  border: 1px solid var(--bb-border);
}

.bb-ci-info {
  flex: 1;
  min-width: 0;
}

.bb-ci-name {
  font-size: var(--bb-cart-item-name-fs, var(--bb-text-font-size, 13px)) !important;
  font-weight: var(--bb-cart-item-name-fw, 600) !important;
  color: var(--bb-product-name-color, var(--bb-text));
  margin-bottom: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-ci-prices {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bb-ci-price {
  font-size: var(--bb-cart-item-price-fs, var(--bb-total-fs, 13px)) !important;
  font-weight: var(--bb-cart-item-price-fw, 700) !important;
  color: var(--bb-price-color, var(--bb-text));
}

.bb-ci-orig {
  font-size: var(--bb-cart-item-price-fs, var(--bb-total-fs, 13px));
  color: var(--bb-compare-price-color, var(--bb-text-muted));
  text-decoration: line-through;
}

.bb-ci-save {
  display: inline-block;
  background: var(--bb-badge-bg, var(--bb-primary));
  color: var(--bb-badge-text-color, #fff);
  font-size: var(--bb-badge-fs, 11px);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--bb-badge-radius, 4px);
  margin-top: 4px;
}

.bb-ci-save-badge {
  display: inline-block;
  background: var(--bb-badge-bg, var(--bb-primary));
  color: var(--bb-badge-text-color, #fff);
  font-size: var(--bb-badge-fs, 11px);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--bb-badge-radius, 20px);
  margin-top: 5px;
  letter-spacing: 0.2px;
}

.bb-cart-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--bb-border);
  background: #fff;
}

.bb-cart-footer--nav-only {
  border-top: 1px solid var(--bb-border);
  padding: 16px 20px;
  background: #fff;
  margin-top: auto;
}

.bb-panel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.bb-panel-nav .bb-panel-nav-checkout,
.bb-panel-nav .bb-cart-checkout-btn {
  flex: 1;
}

.bb-panel-nav .bb-btn {
  flex: 1;
  padding: var(--bb-checkout-btn-py, 10px) var(--bb-checkout-btn-px, 18px) !important;
  font-size: var(--bb-checkout-btn-fs, 14px) !important;
  border-radius: var(--bb-checkout-btn-radius, var(--bb-radius-sm)) !important;
  font-weight: var(--bb-checkout-btn-fw, 700) !important;
  line-height: 1.4;
}

.bb-cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.bb-cart-total-label {
  font-size: var(--bb-total-fs, 13px);
  color: var(--bb-text-muted);
  font-weight: 500;
}

.bb-cart-total-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.bb-cart-total-amt {
  font-size: var(--bb-total-fs, 13px);
  font-weight: 700;
  color: var(--bb-total-color, var(--bb-text));
  line-height: 1;
}

.bb-cart-total-row .bb-sheet-orig-price {
  font-size: var(--bb-total-fs, 13px);
}

.bb-cart-total-orig {
  font-size: var(--bb-total-fs, 13px);
  color: var(--bb-text-muted);
  text-decoration: line-through;
}

.bb-cart-checkout-btn {
  width: 100%;
  padding: var(--bb-checkout-btn-py, 10px) var(--bb-checkout-btn-px, 18px);
  background: var(--bb-checkout-btn-bg, var(--bb-primary));
  color: var(--bb-checkout-btn-text, #ffffff);
  border: var(--bb-checkout-btn-border-width, 0px) solid var(--bb-checkout-btn-border-color, transparent) !important;
  border-radius: var(--bb-checkout-btn-radius, var(--bb-radius-sm)) !important;
  font-size: var(--bb-checkout-btn-fs, 14px) !important;
  font-family: inherit;
  font-weight: var(--bb-checkout-btn-fw, 700) !important;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, opacity 0.2s;
  letter-spacing: 0.3px;
}

.bb-cart-checkout-btn:hover:not(:disabled) {
  background: var(--bb-checkout-btn-bg-hover, #333);
  color: var(--bb-checkout-btn-text-hover, var(--bb-checkout-btn-text, #ffffff));
  transform: translateY(-1px);
}

.bb-cart-checkout-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.bb-cart-add-btn {
  width: 100%;
  margin-top: 8px;
  padding: var(--bb-btn-py, 10px) var(--bb-btn-px, 18px);
  background: white;
  color: var(--bb-primary);
  border: 2px solid var(--bb-primary);
  border-radius: var(--bb-radius-sm);
  font-size: var(--bb-btn-fs, 14px);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.bb-cart-add-btn:hover:not(:disabled) {
  background: var(--bb-primary-10);
}

.bb-cart-add-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.bb-ci-variant {
  font-size: var(--bb-variant-fs, 0.85em);
  color: var(--bb-text-muted);
  margin-bottom: 2px;
}

.bb-ci-qty {
  font-size: var(--bb-badge-fs, 11px);
  color: var(--bb-text-muted);
  margin-bottom: 2px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .bb-layout {
    grid-template-columns: 1fr;
  }
  .bb-cart-col {
    position: static;
    order: -1;
  }
  .bb-cart-items {
    max-height: 280px;
  }
}

@media (max-width: 640px) {
  .bb-sticky-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .bb-sticky-info {
    justify-content: space-between;
  }

  .bb-next-discount {
    text-align: center;
  }

  .bb-step-header {
    flex-direction: column;
  }

  .bb-step-rule {
    text-align: left;
  }
}

/* ── Quantity selection row ── */
.bb-qty-row {
  display: flex;
  gap: 6px;
  margin-top: 10px; /* match .bb-card-add-btn margin-top */
}

.bb-card-remove-btn {
  flex: 0 0 30%;
  padding: var(--bb-add-btn-py, 8px) 4px;
  border: 2px solid #d32f2f !important;
  background: #fff;
  color: #d32f2f;
  border-radius: var(--bb-add-btn-radius, 6px);
  font-size: var(--bb-add-btn-fs, 1em);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-card-remove-btn:hover {
  background: #fff5f5;
}

.bb-qty-ctrl {
  flex: 0 0 calc(70% - 6px);
  display: flex;
  align-items: stretch;
  border: 1px solid #e1e3e5;
  border-radius: var(--bb-add-btn-radius, 6px);
  overflow: hidden;
}

.bb-qty-dec,
.bb-qty-inc {
  width: 28px;
  flex-shrink: 0;
  background: #e8e9eb;
  color: #202223;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.bb-qty-dec:hover:not(:disabled),
.bb-qty-inc:hover:not(:disabled) {
  background: #d1d3d5;
}

.bb-qty-dec:disabled,
.bb-qty-inc:disabled {
  background: #f1f2f3;
  color: #c4c4c4;
  cursor: not-allowed;
}

.bb-qty-num {
  flex: 1;
  text-align: center;
  font-size: var(--bb-add-btn-fs, 1em);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
}

/* ── Quick View Popup ─────────────────────── */
.bb-qv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: bb-fade-in 0.18s ease;
}
.bb-qv-modal {
  background: var(--bb-page-bg, #fff);
  border-radius: 14px;
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: row;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  position: relative;
  animation: bb-slide-up 0.2s ease;
}
@keyframes bb-fade-in { from { opacity:0 } to { opacity:1 } }
@keyframes bb-slide-up { from { transform:translateY(20px);opacity:0 } to { transform:translateY(0);opacity:1 } }

.bb-qv-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s;
}
.bb-qv-close:hover { background: #333; }

/* Gallery side */
.bb-qv-gallery {
  width: 50%;
  flex-shrink: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bb-qv-main-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
}
.bb-qv-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bb-qv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1px solid #e5e5e5;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: background 0.15s;
}
.bb-qv-nav:hover { background: #fff; }
.bb-qv-nav-prev { left: 8px; }
.bb-qv-nav-next { right: 8px; }
.bb-qv-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bb-qv-thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s;
  background: #f5f5f5;
}
.bb-qv-thumb.active { border-color: var(--bb-primary, #5C6AC4); }

/* Info side */
.bb-qv-info {
  flex: 1;
  padding: 32px 28px 40px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bb-qv-title {
  font-size: calc(var(--bb-text-font-size, 14px) + 2px);
  font-weight: var(--bb-product-name-fw, 700);
  color: var(--bb-product-name-color, #1a1a1a);
  line-height: 1.3;
  margin: 0;
}
.bb-qv-price {
  font-size: calc(var(--bb-price-fs, 15px) + 2px);
  font-weight: var(--bb-product-price-fw, 700);
  color: var(--bb-price-color, var(--bb-primary, #5C6AC4));
  margin: 0;
}
.bb-qv-desc {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}
.bb-qv-variant-label {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.bb-qv-variant-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--bb-variant-border-color, #d1d5db);
  border-radius: var(--bb-variant-radius, 8px);
  font-size: var(--bb-text-font-size, 14px);
  background: var(--bb-variant-bg-color, #fff);
  color: var(--bb-variant-text-color, #1a1a1a);
  cursor: pointer;
}
.bb-qv-qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bb-qv-qty-label { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.bb-qv-qty-ctrl {
  display: flex;
  align-items: center;
  border: 1px solid var(--bb-variant-border-color, #d1d5db);
  border-radius: var(--bb-variant-radius, 8px);
  overflow: hidden;
}
.bb-qv-qty-btn {
  width: 36px;
  height: 36px;
  background: #f9fafb;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #1a1a1a;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bb-qv-qty-btn:hover { background: #f3f4f6; }
.bb-qv-qty-btn:disabled { opacity: 0.4; cursor: default; }
.bb-qv-qty-num {
  width: 40px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  border-left: 1px solid #d1d5db;
  border-right: 1px solid #d1d5db;
  line-height: 36px;
}
.bb-qv-add-btn {
  width: 100%;
  padding: var(--bb-add-btn-py, 10px) var(--bb-add-btn-px, 18px);
  background: var(--bb-add-btn-bg, var(--bb-primary, #5C6AC4));
  color: var(--bb-add-btn-text, #fff);
  border: var(--bb-add-btn-border-width, 0px) solid var(--bb-add-btn-border-color, transparent);
  border-radius: var(--bb-add-btn-radius, 8px);
  font-size: var(--bb-add-btn-fs, 14px);
  font-weight: var(--bb-add-btn-fw, 600);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin-top: auto;
  text-align: center;
}
.bb-qv-add-btn:hover:not(:disabled):not(.added) {
  background: var(--bb-add-btn-bg-hover, var(--bb-primary-dark, var(--bb-primary)));
  color: var(--bb-add-btn-text-hover, var(--bb-add-btn-text, #fff));
}
.bb-qv-add-btn.added {
  background: #fff4f4;
  color: #d82c0d;
  border: var(--bb-add-btn-border-width, 2px) solid #d82c0d;
  border-radius: var(--bb-add-btn-radius, 8px);
}
.bb-qv-add-btn.added:hover { background: #fff4f4; color: #d82c0d; }
.bb-qv-add-btn:disabled { opacity: 0.5; cursor: default; }

/* Clickable card hint */
.bb-product-card.bb-qv-clickable { cursor: pointer; }
.bb-product-card.bb-qv-clickable:hover .bb-product-img { transform: scale(1.03); transition: transform 0.2s; }

@media (max-width: 640px) {
  .bb-qv-modal { flex-direction: column; }
  .bb-qv-gallery { width: 100%; padding: 16px 16px 0; }
  .bb-qv-info { padding: 16px; }
}

/* ── Cart Progress Animation Overlay ──────────────────────────── */
.bb-cart-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  animation: bb-overlay-in 0.2s ease forwards;
}
@keyframes bb-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bb-cart-success-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-width: 260px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  animation: bb-card-pop 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes bb-card-pop {
  from { transform: scale(0.78); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Icon wrapper — shared between loading & done states */
.bb-cart-anim-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bb-add-btn-bg, #5C6AC4);
}

/* Loading: spinner ring */
.bb-cart-anim-icon--loading .bb-cart-spinner {
  width: 36px;
  height: 36px;
  animation: bb-spin 0.9s linear infinite;
}
.bb-cart-anim-icon--loading .bb-cart-spinner circle {
  stroke: var(--bb-add-btn-color, #fff);
  stroke-linecap: round;
  stroke-dasharray: 88;
  stroke-dashoffset: 66;
  fill: none;
}
@keyframes bb-spin {
  to { transform: rotate(360deg); }
}

/* Done: checkmark draws in */
.bb-cart-anim-icon--done svg {
  width: 32px;
  height: 32px;
  stroke: var(--bb-add-btn-color, #fff);
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: bb-check-draw 0.4s ease forwards;
}
@keyframes bb-check-draw {
  to { stroke-dashoffset: 0; }
}

.bb-cart-success-text {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  transition: opacity 0.2s;
}
.bb-cart-success-bar-track {
  width: 190px;
  height: 7px;
  border-radius: 99px;
  background: #e8e8e8;
  overflow: hidden;
}
.bb-cart-success-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--bb-add-btn-bg, #5C6AC4);
  width: 0%;
  transition: width 1.5s ease;
}

/* Search & Sort toolbar */
.bb-search-rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--bb-search-mb, 16px);
}
.bb-search-wrap {
  max-width: var(--bb-search-width, 300px);
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.bb-search-rule-row .bb-step-rule {
  flex-shrink: 0;
  text-align: right;
  margin: 0;
}
@media (max-width: 480px) {
  .bb-search-rule-row {
    flex-wrap: wrap;
  }
  .bb-search-rule-row .bb-step-rule {
    order: -1;
    width: 100%;
    text-align: left;
  }
  .bb-search-wrap {
    max-width: 100%;
    width: 100%;
  }
}
.bb-search-icon {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 15px;
  color: #9CA3AF;
  pointer-events: none;
  flex-shrink: 0;
}
.bb-search-input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 32px;
  border-style: solid;
  border-width: var(--bb-search-border-width, 1px);
  border-color: var(--bb-search-border-color, #555555);
  border-radius: var(--bb-search-radius, 8px);
  font-size: 14px;
  color: var(--bb-search-text-color, #555555);
  font-size: var(--bb-search-fs, 14px);
  background: #fff;
  outline: none;
  box-shadow: none;
  box-sizing: border-box;
}
.bb-search-input:focus {
  outline: none;
  box-shadow: none;
}
.bb-slot-panel::-webkit-scrollbar { display: none; }

/* ── iOS Safari / Shopify mobile-app auto-zoom prevention ──
   Mobile Safari (and the Shopify mobile WebView) zooms in whenever a focused
   input has computed font-size < 16px. Force every text input, number input,
   search box, textarea, and select inside the bundle root to 16px on
   touch/small viewports so focusing them never triggers the unwanted zoom.
   Desktop sizing is unchanged (this only kicks in <= 767px). */
@media (max-width: 767px) {
  .bb-root input[type="text"],
  .bb-root input[type="search"],
  .bb-root input[type="number"],
  .bb-root input[type="email"],
  .bb-root input[type="tel"],
  .bb-root input[type="url"],
  .bb-root input:not([type]),
  .bb-root textarea,
  .bb-root select,
  .bb-search-input,
  .bb-variant-select,
  .bb-qty-input {
    font-size: 16px !important;
  }
}

@media (max-width: 767px) {
  .bb-title {
    /* On mobile, drop 6px from the merchant's configured title size to keep
       the title comfortably proportionate on small screens. */
    font-size: var(--bb-title-font-size-mobile, 1.4em) !important;
  }
}

/* ── Quick-view popup: fit-properly tweaks ──
   On phones the modal was set to max-height:90vh with only 16px overlay padding
   which left it touching the URL bar at the top and the browser nav at the
   bottom. Add real breathing room above and below, and respect the iOS safe
   area so the popup never collides with the home indicator. */
@media (max-width: 767px) {
  .bb-qv-overlay {
    align-items: flex-start;             /* pin near the top so the X is reachable */
    padding: 24px 12px;                  /* visible top/bottom space around the modal */
    padding-top: max(24px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .bb-qv-modal {
    max-height: calc(100vh - 48px);      /* leave the 24px+24px overlay padding visible */
    max-height: calc(100dvh - 48px);     /* dynamic viewport on mobile browsers that support it */
    margin: 0 auto;
  }
  .bb-qv-info {
    /* On mobile the layout stacks image-on-top, info-below, so this padding
       is what creates the gap below the Add to Bundle button. */
    padding-bottom: 28px;
  }
}