/* ============================================
   LOOP BUNDLE PAGE — PURQ
   Custom CSS overrides
   Most styling is in the Design panel above.
   ============================================ */

/* --- Force white page background — overrides theme bleed --- */
.loop-bundle-page-modern,
.loop-bundle-page-modern__wrapper {
  background: #ffffff !important;
}

/* --- Hide frequency selector — one-time only on this page --- */
.loop-frequency-size-selector,
.loop-frequency-size-selector-label,
.loop-frequency-selector {
  display: none !important;
}

/* --- Selling plan layout fixes --- */
.loop-bundle-widget-selling-plan-info {
  width: auto !important;
}
.loop-bundle-widget-selling-plan-subscription .loop-bundle-widget-selling-plan-price-container {
  justify-content: flex-end;
}

/* --- Quantity input height --- */
.loop .loop-form-increment,
.loop .loop-form-input {
  min-height: auto !important;
  height: 40px !important;
}

/* --- Cart drawer over Loop modals --- */
.drawer__wrapper.drawer__wrapper--animation-position-right {
  z-index: 9999;
}

/* --- Section labels — larger, bolder --- */
.loop-bundle-page-modern label,
.loop-bundle-size-selector-label,
.loop-bundle-products-label {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
}

/* --- Tighten spacing between selector sections --- */
.loop-bundle-size-selector-new-wrapper {
  margin-bottom: 32px !important;
  align-items: center;
}

/* --- Discount message — closer to its pills --- */
.loop-bundle-size-selector-discount,
.loop-bundle-discount-message {
  margin-top: 12px !important;
  font-size: 14px !important;
}

/* --- Keyboard focus rings for accessibility --- */
.loop-bundle-size-selector-new-wrapper button:focus-visible {
  outline: 2px solid #6a1851;
  outline-offset: 2px;
}

/* --- Mobile: stack columns --- */
@media (max-width: 900px) {
  .loop-bundle-page-modern__left,
  .loop-bundle-page-modern__right,
  .loop-bundle-page-modern {
    width: 100% !important;
    flex: 0 0 100% !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
}