@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
/* Bundle App — Admin Style Config */
:root {
  --color-green: #365daa;
  --color-green-hover: #365dab;
  --color-cream: #365dab;
  --color-card-bg: #F9F497;
  --color-cta-hover: #e1dcdb;
  --radius-card: 24px;
  --radius-button: 28px;
  --bundle-progress-track: #e2e4e9;
  --bundle-progress-fill: #365dab;
  --bundle-progress-node-bg: #1f2e4c;
  --bundle-progress-node-text: #FFFFFF;
  --bundle-page-bg: #FFFFFF;
  --bundle-builder-bg: #f1f7fd;
  --bundle-card-bg: #FFFFFF;
  --tier-btn-bg: #f1f7fd;
  --tier-btn-text: #365dab;
  --tier-btn-border: #365dab;
  --tier-btn-bg-selected: #365dab;
  --tier-btn-text-selected: #FFFDE9;
  --tier-btn-radius: 28px;
  --qty-selector-bg: #365dab;
  --qty-selector-text: #ffffff;
  /* Global font families — override the hardcoded :root fallbacks in the
     compiled extension CSS (this stylesheet loads after it). */
  --font-base: Bilage, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-extended: Bilage, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Bilage, 'Times New Roman', serif;
}

.bundle-section-wrapper {
  background: #FFFFFF;
}

bundle-builder.card {
  background: #f1f7fd !important;
}

.bundle-sticky,
.bundle-expanded-content {
  background: #f1f7fd !important;
}

.add-to-bundle-btn {
  background: #365dab !important;
  color: #ffffff !important;
}

.add-to-bundle-btn:hover:not(:disabled) {
  background: #365dab !important;
  color: #ffffff !important;
}

/* Main "ADD TO CART" CTA (desktop .cta-button + mobile sticky .bundle-btn).
   The "Button *" style fields drive it — base and hover, background and text.
   !important + this stylesheet's later load order override the compiled
   extension defaults (--color-green base, --color-cta-hover hover, and the
   --color-green-hover disabled-hover flip). Base applies to ALL states,
   including disabled ("SELECT N PRODUCTS"): the compiled .cta-button:disabled
   opacity keeps the disabled cue, so it reads as a faded version of the button
   instead of the unrelated brand green. Price spans are themed too so a light
   hover text/background never renders invisible. */
.cta-button,
.bundle-btn {
  background: #365dab !important;
  color: #ffffff !important;
}

.cta-button .price-original,
.cta-button .price-discounted,
.bundle-btn .price-original,
.bundle-btn .price-discounted {
  color: #ffffff !important;
}

.cta-button:hover:not(:disabled) {
  background: #365dab !important;
  color: #ffffff !important;
}

.cta-button:hover:not(:disabled) .price-original,
.cta-button:hover:not(:disabled) .price-discounted {
  color: #ffffff !important;
}

bundle-size-selector .size-option.active {
  background: #365dab !important;
  color: #ffffff !important;
}

.bundle-product-card {
  background: #FFFFFF !important;
  border-color: #E0E0E0 !important;
  border-radius: 12px !important;
}

/* Typography */
.bundle-page-title {
  font-family: Bilage, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 48px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .bundle-page-title {
    font-size: 32px;
  }
}

.section-header h2 {
  font-family: Bilage, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px !important;
}

.bundle-header-banner span {
  font-family: Bilage, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
}

.cta-button {
  font-family: Bilage,system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px !important;
}