/* ===============================
   FITPOT – LOOP BUNDLE (SAFE OVERRIDES)
   (Typography + spacing + frequency button-group styling + drawer fix)
   Paste into Loop > Design > Styles > Custom CSS
================================= */

/* -------------------------------
   TYPOGRAPHY
--------------------------------- */
#loop,
#loop * {
  font-family: "TT Commons Pro", "TT Commons", Arial, sans-serif !important;
}

#loop h1,
#loop h2,
#loop h3,
#loop strong,
#loop [class*="title"],
#loop [class*="heading"] {
  font-family: "Rok Grotesk", Impact, "Arial Black", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* -------------------------------
   GENERAL SAFETY: don’t let things clip weirdly
--------------------------------- */
#loop,
#loop #__next {
  overflow: visible !important;
}

/* -------------------------------
   DESKTOP SPACING FIXES
--------------------------------- */
@media (min-width: 990px) {

  /* Pull meal grid UP under hero */
  #loop .loop-bundle-products-wrapper {
    margin-top: -24px !important;
  }

  /* Tighten right panel rhythm */
  #loop .loop-selected-bundle-header {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  #loop .loop-selected-bundle-items {
    margin-top: 8px !important;
  }

  #loop .loop-bundle-widget-container {
    margin-top: 10px !important;
  }

  #loop .loop-bundle-widget-add-to-cart-container {
    margin-top: 12px !important;
  }

  /* Reduce space under “Select your items” label */
  #loop .loop-bundle-select-product-title-new-container {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
  }
}

/* -------------------------------
   MOBILE SPACING FIXES
--------------------------------- */
@media (max-width: 768px) {

  /* Kill giant gap above hero */
  #loop .loop-bundle-header-wrapper,
  #loop .loop-bundle-header-wrapper-new {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Tighten hero → heading */
  #loop .loop-bundle-image-container-wrapper,
  #loop .loop-bundle-image-container-wrapper-new {
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
  }

  #loop .loop-bundle-title-wrapper-new {
    margin-top: 4px !important;
    padding-top: 0 !important;
  }

  /* Pull products closer to header */
  #loop .loop-bundle-products-wrapper {
    margin-top: -12px !important;
  }

  /* Compact widget spacing */
  #loop .loop-selected-bundle-items,
  #loop .loop-bundle-widget-container {
    margin-top: 8px !important;
  }
}

/* =========================================================
   FREQUENCY OPTIONS (BUTTON GROUP) – STYLE TWEAKS
========================================================= */

/* Make the "Frequency" label sit nicely and not get clipped */
#loop .loop-bundle-widget-frequency-dropdown-label,
#loop .loop-bundle-widget-frequency-dropdown-layout .loop-bundle-widget-frequency-dropdown-label {
  margin: 8px 0 8px 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

/* Container that holds the frequency buttons */
#loop .loop-bundle-widget-frequency-dropdown-options {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;  /* 2x2 grid */
  gap: 10px !important;
  width: 100% !important;
  padding: 12px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}

/* Individual frequency buttons */
#loop .loop-bundle-widget-frequency-interval-items {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 10px !important;
  border-radius: 12px !important;
  border: 2px solid rgba(0,0,0,0.18) !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

/* Button text */
#loop .loop-bundle-widget-frequency-interval-items p {
  margin: 0 !important;
  padding: 0 !important;
  color: #111 !important;
  font-weight: 600 !important;
  text-align: center !important;
}

/* Selected state */
#loop .loop-bundle-widget-frequency-interval-items.selected {
  background: #0b0b0b !important;
  border-color: #0b0b0b !important;
}

#loop .loop-bundle-widget-frequency-interval-items.selected p {
  color: #ffffff !important;
}

/* Hover/focus (desktop friendliness) */
@media (hover: hover) {
  #loop .loop-bundle-widget-frequency-interval-items:hover {
    border-color: rgba(0,0,0,0.35) !important;
  }
}

/* Mobile: give a touch more breathing room */
@media (max-width: 768px) {
  #loop .loop-bundle-widget-frequency-dropdown-options {
    gap: 12px !important;
    padding: 14px !important;
  }

  #loop .loop-bundle-widget-frequency-interval-items {
    min-height: 52px !important;
  }
}

/* =========================================================
   PRODUCT DESCRIPTION DRAWER – FIX WHITE-ON-WHITE TEXT
   IMPORTANT: drawer renders in theme modals (outside #loop),
   so we target #modals-leftDrawer / #modals-rightDrawer directly.
   Scoped to the description area only (won’t affect bundle UI).
========================================================= */

/* Keep drawer surfaces white */
#modals-leftDrawer .loop-drawer-content,
#modals-rightDrawer .loop-drawer-content,
#modals-leftDrawer .loop-drawer-body,
#modals-rightDrawer .loop-drawer-body,
#modals-leftDrawer .loop-drawer-product-description-container,
#modals-rightDrawer .loop-drawer-product-description-container,
#modals-leftDrawer .loop-drawer-product-description-html-container,
#modals-rightDrawer .loop-drawer-product-description-html-container {
  background: #ffffff !important;
}

/* Force readable text inside the product description HTML */
#modals-leftDrawer .loop-drawer-product-description-html-container,
#modals-rightDrawer .loop-drawer-product-description-html-container,
#modals-leftDrawer .loop-drawer-product-description-html-container *,
#modals-rightDrawer .loop-drawer-product-description-html-container *,
#modals-leftDrawer .loop-bundle-product-description-html,
#modals-rightDrawer .loop-bundle-product-description-html,
#modals-leftDrawer .loop-bundle-product-description-html *,
#modals-rightDrawer .loop-bundle-product-description-html * {
  color: #111111 !important;
}

/* Headings / emphasis in drawer */
#modals-leftDrawer .loop-drawer-product-description-html-container h1,
#modals-rightDrawer .loop-drawer-product-description-html-container h1,
#modals-leftDrawer .loop-drawer-product-description-html-container h2,
#modals-rightDrawer .loop-drawer-product-description-html-container h2,
#modals-leftDrawer .loop-drawer-product-description-html-container h3,
#modals-rightDrawer .loop-drawer-product-description-html-container h3,
#modals-leftDrawer .loop-drawer-product-description-html-container strong,
#modals-rightDrawer .loop-drawer-product-description-html-container strong {
  color: #003e17 !important;
}

/* Tables (nutrition panels) */
#modals-leftDrawer .loop-drawer-product-description-html-container table,
#modals-rightDrawer .loop-drawer-product-description-html-container table,
#modals-leftDrawer .loop-drawer-product-description-html-container th,
#modals-rightDrawer .loop-drawer-product-description-html-container th,
#modals-leftDrawer .loop-drawer-product-description-html-container td,
#modals-rightDrawer .loop-drawer-product-description-html-container td {
  color: #111111 !important;
  background: transparent !important;
}

/* Links */
#modals-leftDrawer .loop-drawer-product-description-html-container a,
#modals-rightDrawer .loop-drawer-product-description-html-container a {
  color: #003e17 !important;
  text-decoration: underline !important;
}