/* =========================================================================
   ZOEFULL — LOOP "BUILD YOUR OWN BUNDLE" — CUSTOM STYLES
   Paste this whole file into: Loop → Design → Styles → Custom CSS
   Pairs with: zoefull-loop-bundle.js (Loop → Custom JS)
   Brand blue #00178f · Edit tiers in the JS (OFF_LABELS / DOT_POSITIONS)
   ------------------------------------------------------------------------
   STRUCTURE
     1. GLOBAL / FORM INPUTS / SELLING PLAN / GRID
     2. PRODUCT CARD
     3. CARD FOOTER + QTY SELECTOR
     4. ADD-TO-CART BUTTON
     5. YOTPO STARS / DRAWER / BADGES / DRAWER REVIEW
     6. HERO BANNER (full-bleed)
     7. RIGHT PANEL (desktop bundle summary)
     8. INJECTED BITS (OFF labels, subscribe perks)
     9. MOBILE (<=767px)  ← mobile bar is NATIVE; only labels/hero/summary-row styled
   ------------------------------------------------------------------------
   CHANGELOG v1.9 (this file):
     [TITLE SOURCE + DRAWER PARITY] Drawer now mirrors the card: pills(name +
       below) on top, .ysm-drawer-title (product_feature_2) below; native
       .loop-drawer-product-title hidden via .ysm-name-hidden. New .ysm-drawer-title
       style + drawer order updated. [STEPPER HEIGHT] drawer qty stepper forced
       to 61px + 44px radius to match the ADD TO CART / GO BACK buttons.
   CHANGELOG v1.8 (this file):
     [DRAWER FOOTER FIX] ADD TO CART label is now CSS-only (::after) and gated
       with :not(:has(input)) so it applies only in the add state. The qty
       stepper (added state) is left fully native -> renders "- 1 +" cleanly.
       Replaces the v1.7 JS relabel that left a stale "ADD TO CART" in the stepper.
   CHANGELOG v1.7:
     [DRAWER FOOTER] (superseded by v1.8) — JS-based relabel.
   CHANGELOG v1.6:
     [ALL PILLS ON TOP] Card body re-ordered to: pills-row (name + count)
       -> title(metafield) -> stars -> price. Name pill now lives inside the
       top .ysm-badges row (built in JS); native .loop-product-title is hidden
       via .ysm-name-hidden but kept in the DOM for the text lookups.
   CHANGELOG v1.5:
     [CARD TITLE SWAP] name as pill, above_product_title as title.
   ========================================================================= */

/* ===== GLOBAL ===== */
.loop-btn { font-weight: 600; }

.loop-selected-bundle {
  border-color: transparent !important;
  background: #f0f0f0 !important;
  border-radius: 1rem !important;
  flex: 0 0 auto !important;
}

/* ===== FORM INPUTS ===== */
.loop-form-input,
.loop-form-input-small {
  border-top: 1px solid #00178f;
  border-bottom: 1px solid #00178f;
  border-left: var(--loop-bundle-input-left-border-size) solid #00178f;
  border-right: var(--loop-bundle-input-right-border-size) solid #00178f;
}

/* ===== SELLING PLAN / FREQUENCY ===== */
.loop-bundle-widget-frequency-interval-button {
  font-size: 0.85rem !important;
  min-width: unset;
  border-style: unset;
  border-width: unset;
  border-color: unset;
  text-align: left;
  border-radius: unset;
  padding-block: unset;
  padding-inline: unset;
  background: transparent;
}
.loop-bundle-widget-frequency-interval-button.selected {
  background-color: transparent !important;
  font-size: 0.85rem !important;
  color: #000830 !important;
}
.loop-text-p6.m-0.loop-bundle-widget-frequency-button-label-fixed { display: none; }
.loop-bundle-widget-selling-plan > .flex.w-full.flex-col { gap: 0 !important; }
.loop-bundle-widget-frequency-button-layout { display: none !important; }

/* ===== GRID ===== */
.loop-products-align-new { grid-template-columns: repeat(2, 1fr); }

/* =========================================================
   PRODUCT CARD
========================================================= */
.loop-card-header {
  display: flex !important;
  flex-direction: row !important;
  padding-left: 1rem;
  padding-bottom: 1rem;
}
.loop-card-body {
  text-align: left !important;
  padding-left: 1rem;
}
.loop-card-body.padding-10 { padding: 0px 10px 0 16px !important; }
.loop-card.loop-bundle-product-card {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.loop-product-description { display: none !important; }

/* card bg (Figma): light blue + radius */
.loop-card {
  background: #D6E3FD !important;
  border-radius: 16px !important;
}

/* body column: left-aligned.
   v1.6 ORDER: pills-row (name + count) -> title(metafield) -> stars -> price */
.loop-product-card-description-body {
  align-items: flex-start !important;
  gap: 6px !important;
}
.loop-product-card-description-body .ysm-badges                 { order: 1; margin: 0; } /* ALL PILLS on top: name + count */
.loop-product-card-description-body .loop-product-title         { order: 2; }  /* fallback title (hidden when metafield swap applies) */
.loop-product-card-description-body .ysm-card-title             { order: 2; }  /* metafield -> title */
.loop-product-card-description-body .ysm-yotpo-stars            { order: 3; margin: 0; justify-content: flex-start; }
.loop-product-card-description-body .loop-product-description   { order: 4; }
.loop-product-card-description-body .loop-display-product-price { order: 5; align-items: center; }

/* v1.6: product NAME now rendered as a pill INSIDE the top .ysm-badges row
   (see JS). Native .loop-product-title is hidden but kept in the DOM so
   handleFromTitle()/idFromTitle() text-matching still resolves. */
.loop-product-card-description-body .loop-product-title.ysm-name-hidden {
  display: none !important;
}

/* v1.5: above_product_title metafield rendered as the big TITLE */
.loop-product-card-description-body .ysm-card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.4px;
  color: #00178F;
  margin: 0;
  text-align: left;
}

/* title (Figma): Inter 600 18/28 ls-0.4 #00178F
   NOTE: now the fallback for any card with NO `above` metafield (native title
   stays a normal title). When the name IS pilled, .ysm-name-pill overrides this. */
.loop-bundle-product-card-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 28px !important;
  letter-spacing: -0.4px !important;
  color: #00178F !important;
}
/* reviews + price */
.loop-product-card-description-body .ysm-stars__count {
  font-weight: 500;
  letter-spacing: -0.4px;
  color: #616161;
}
.loop-product-card-description-body .ysm-stars__fill { color: #FFC000; }
.loop-display-product-price .loop-discounted-price {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 28px !important;
  letter-spacing: -0.4px !important;
  color: #000830 !important;
}

/* card image */
.loop-bundle-image-container img { object-fit: cover !important; }
.loop-img-fit { object-fit: cover; }
.loop-bundle-product-image-container {
  flex: 0 0 110px !important;
  height: 110px !important;
  overflow: hidden !important;
}
.loop-image-product-lg { height: 110px !important; }
.loop-image-product-lg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ===== CARD FOOTER: [Product details] [Add] ===== */
.loop-card-footer {
  display: flex !important;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.loop-card-footer .loop-add-product-btn {
  flex: 1 1 0;
  display: flex;
}
.loop-card-footer .loop-add-product-btn .loop-btn-add-product {
  width: 100%;
  height: 100%;
  border-radius: 100px !important;
}
.ysm-product-details-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0 16px;
  min-height: var(--minimum-touch-target, 44px);
  border: 1.5px solid var(--loop-bundle-outline-button-text-color, #00178f);
  border-radius: var(--loop-bundle-add-to-cart-button-border-radius, 3em);
  color: var(--loop-bundle-outline-button-text-color, #00178f);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  box-sizing: border-box;
}

/* ===== QTY SELECTOR (in card) — colors/fonts only, native sizing ===== */
.loop-bundle-product-quantity-controls {
  border: 1px solid #00178f;
  border-radius: var(--style-border-radius-buttons-primary, 100px);
  background: transparent;
  overflow: hidden;
}
.loop-bundle-product-quantity-controls .loop-btn-input-decrease,
.loop-bundle-product-quantity-controls .loop-btn-input-increase {
  background: transparent !important;
  color: #00178f !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
.loop-bundle-product-quantity-controls .loop-form-input {
  background: transparent !important;
  color: #00178f !important;
  border: none !important;
  box-shadow: none !important;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.4px;
  -moz-appearance: textfield;
}
.loop-bundle-product-quantity-controls .loop-form-input::-webkit-outer-spin-button,
.loop-bundle-product-quantity-controls .loop-form-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ===== ADD-TO-CART BUTTON ===== */
.loop-bundle-cart-btn-text-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.loop-bundle-add-to-cart-text {
  order: 1;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.loop-display-saved-total {
  order: 2;
  display: flex !important;
  align-items: center;
  gap: 6px;
}
.loop-btn-add-to-cart {
  padding: 28px 24px;
  font-size: 1em;
  box-shadow: none;
  border-radius: 100px !important;
}

/* ===== CAROUSEL ===== */
.loop-carousel-image { max-height: 100%; }
.carousel-inner { height: 100% !important; }

/* arrows: recolor the Bootstrap SVG to brand blue (color is baked into the
   background-image, so we swap the SVG with fill=#00178F — color: has no effect) */
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300178F'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300178F'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* ===== YOTPO STARS (card + drawer) ===== */
.ysm-yotpo-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 2px;
}
.ysm-stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  width: calc(var(--ysm-star-size, 14px) * 5);
  height: var(--ysm-star-size, 14px);
}
.ysm-stars span { display: block; }
.ysm-stars svg {
  width: calc(var(--ysm-star-size, 14px) * 5);
  height: var(--ysm-star-size, 14px);
}
.ysm-stars__base { color: rgba(0, 23, 143, 0.15); }
.ysm-stars__fill {
  position: absolute; top: 0; left: 0;
  overflow: hidden; white-space: nowrap;
  color: #ffd700;
}
.ysm-stars__count {
  font-size: 13px;
  color: var(--loop-bundle-saved-label-color, #616161);
}

/* ===== DRAWER ===== */
div.flex.flex-col.items-start.loop-drawer-product-title-price-variant-container { padding-top: 1rem; }
.loop-drawer-product-title-price-variant-container {
  gap: 1px !important;
  align-items: flex-start !important;
}
/* Figma order: pills(name+below) -> title(product_feature_2) -> stars -> price */
.loop-drawer-product-title-price-variant-container .ysm-badges        { order: 1; margin: 0 0 8px !important; }
.loop-drawer-product-title-price-variant-container .ysm-drawer-title  { order: 2; }
.loop-drawer-product-title-price-variant-container .loop-drawer-product-title { order: 2; } /* fallback (hidden when swap applies) */
.loop-drawer-product-title-price-variant-container .ysm-yotpo-stars   { order: 3; justify-content: flex-start; }
.loop-drawer-product-title-price-variant-container .loop-drawer-display-product-price { order: 4; }

/* hide native drawer title when product_feature_2 swap applies (kept in DOM for lookups) */
.loop-drawer-product-title.ysm-name-hidden { display: none !important; }

.loop-drawer-product-title-price-variant-container .ysm-yotpo-stars {
  --ysm-star-size: 16px;
  margin: 4px 0 6px !important;
}
.loop-drawer-product-title-price-variant-container .ysm-stars__count {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.4px;
  color: #616161;
}
/* title (Figma): Inter 600, large. Change font-size here if you want it bigger/smaller. */
.loop-drawer-product-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.4px !important;
  color: #00178f !important;
  margin: 0 !important;
}
/* injected product_feature_2 title (mirrors .loop-drawer-product-title) */
.ysm-drawer-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.4px;
  color: #00178f;
  margin: 0;
}
/* price (Figma): discounted #00178f first, struck after.
   DOM is already discount-first; the theme injects &nbsp; between the two <p>,
   so we collapse it with font-size:0 (restored on the prices) and gap with margin. */
.loop-drawer-display-product-price {
  display: flex !important;
  align-items: baseline;
  gap: 0 !important;
  margin-top: 8px !important;
  font-size: 0 !important;
}
.loop-drawer-discounted-price {
  font-size: 18px !important;
  letter-spacing: -0.4px !important;
  color: #00178f !important;
}
.loop-drawer-product-price {
  font-size: 18px !important;
  margin-left: 6px !important;
  color: #828282 !important;
}
.loop-selected-variant-info-container img { display: none !important; }

/* ===== BADGES (card + drawer) ===== */
.ysm-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.ysm-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid #00178f;
  border-radius: 50px;
  padding: 3.5px 10px 4.5px;
  color: #00178f;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: -0.4px;
  white-space: nowrap;
}

/* ===== DRAWER FEATURED REVIEW ===== */
.ysm-drawer-review {
  --ysm-review-star: #ffc700;
  background: #fdfdfd;
  border-radius: 21px;
  padding: 20px;
  margin: 16px 0 8px;
  color: var(--loop-drawer-product-title-color, #000);
}
.ysm-review__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ysm-review__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ysm-review__author { font-size: 16px; font-weight: 600; color: #000830;}
.ysm-review__badge { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #034de4; }
.ysm-review__badge-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #034de4;
}
.ysm-review__stars { display: inline-flex; gap: 2px; flex-shrink: 0; }
.ysm-review__content { font-size: 14px; line-height: 1.5; color: #000830; }

/* =========================================================
   DRAWER FOOTER — ADD TO CART + GO BACK  (Figma 407x170:
   16px padding + 61px btn + 16px gap + 61px btn = 170)
========================================================= */
.loop-drawer-footer {
  gap: 16px !important;        /* Figma gap (overrides Tailwind gap-2) */
  padding: 16px !important;    /* Figma white "Background" padding */
}
.loop-drawer-footer .loop-add-product-btn { width: 100%; }
/* keep BOTH states 61px so the footer doesn't jump when a product is added
   (this slot holds either ADD TO CART or the qty stepper) */
.loop-drawer-footer .loop-add-product-btn > * {
  width: 100% !important;
  min-height: 61px;
}
/* v1.9: qty stepper (added state) — force the SAME 61px height + pill radius as the CTA */
.loop-drawer-footer .loop-add-product-btn:has(input) > *,
.loop-drawer-footer .loop-bundle-product-quantity-controls {
  height: 61px !important;
  border-radius: 44px !important;
  display: flex !important;
  align-items: center !important;
}

/* ADD TO CART — filled pill. Gated with :not(:has(input)) so it ONLY applies in
   the "add" state, never the qty-stepper state (the stepper has a number input).
   Label is a CSS ::after (font-size:0 hides the native "ADD") — NO DOM mutation,
   so React never leaves a stale "ADD TO CART" when it swaps in the stepper. */
.loop-drawer-footer .loop-add-product-btn:not(:has(input)) > .loop-btn-add-product {
  width: 100% !important;
  min-height: 61px;
  padding: 18px 24px !important;
  background: #00178F !important;
  border: 1px solid #00178F !important;
  border-radius: 44px !important;
  box-shadow: none !important;
  font-size: 0 !important;            /* hide native "ADD" text node */
  text-transform: uppercase !important;
}
.loop-drawer-footer .loop-add-product-btn:not(:has(input)) > .loop-btn-add-product::after {
  content: "ADD TO CART";
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: 0.75px;
  color: #FDFDFD;
}

/* GO BACK — outline pill (kills mt-1, matches ADD dimensions) */
.loop-drawer-footer .flex.flex-row.justify-center { width: 100%; }
.loop-drawer-footer .loop-drawer-go-back-btn {
  width: 100% !important;
  min-height: 61px;
  margin-top: 0 !important;
  padding: 18px 24px !important;
  background: transparent !important;
  border: 1px solid #00178F !important;
  border-radius: 44px !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 22px !important;
  letter-spacing: 0.75px !important;
  text-transform: uppercase !important;
  color: #00178F !important;
}

/* =========================================================
   HERO BANNER (full-bleed, Figma)
========================================================= */
.loop-bundle-header-wrapper-new {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
.loop-bundle-image-container-wrapper {
  position: relative !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 18px !important;
  min-height: 258px;
  padding: 40px 24px !important;
}
.loop-bundle-image-container-wrapper > .loop-bundle-image-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
}
.loop-bundle-image-container-wrapper > .loop-bundle-image-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.loop-bundle-title-wrapper-new,
.loop-bundle-new-description {
  position: relative !important;
  z-index: 1;
  margin: 0 auto !important;
  text-align: center !important;
  max-width: 865px;
}
.loop-bundle-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 42px !important;
  line-height: 120% !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin: 0 !important;
}
.loop-bundle-new-description,
.loop-bundle-new-description > undefined {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 28px !important;
  letter-spacing: -0.02em !important;
  color: #fdfdfd !important;
}

/* hero reviews pill */
.ysm-hero-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e6ebff;
  border-radius: 130px;
  padding: 6px 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.02em;
  color: #00178f;
  white-space: nowrap;
}
.ysm-hero-pill__stars { display: inline-flex; gap: 2px; }
.ysm-hero-pill__stars svg { width: 15px; height: 15px; }
.ysm-hero-pill__stars svg path { fill: #ffc000 !important; }

/* hero perks link + popover */
.ysm-hero-perks {
  position: relative;
  z-index: 2;
  display: inline-block;
}
.loop-bundle-header-wrapper-new .ysm-hero-perks { margin-bottom: 14px !important; }
.ysm-hero-perks__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 140%;
  letter-spacing: -0.02em;
  color: #fdfdfd;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: none;
}
.ysm-hero-perks__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 10px;
  font-style: italic;
  font-weight: 600;
}
.ysm-perks-pop {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #fdfdfd;
  border-radius: 14px;
  padding: 14px 18px;
  min-width: 240px;
  box-shadow: 0 8px 30px rgba(0, 15, 88, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 3;
}
.ysm-perks-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fdfdfd;
}
.ysm-hero-perks:hover .ysm-perks-pop,
.ysm-hero-perks.is-open .ysm-perks-pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.ysm-perks-pop ul { list-style: none; margin: 0; padding: 0; text-align: left; }
.ysm-perks-pop li {
  position: relative;
  padding-left: 20px;
  margin: 7px 0;
  font-size: 14px;
  color: #00178f;
  white-space: nowrap;
}
.ysm-perks-pop li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #034de4;
  font-weight: 700;
}

/* anchor-scroll fix: keep hero top below the sticky header */
#MainContent { scroll-margin-top: 200px; }

/* =========================================================
   RIGHT PANEL — bundle summary (Figma, DESKTOP)
========================================================= */
.loop-selected-bundle-header,
.loop-selected-bundle-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.loop-selected-bundle-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 23px !important;
  line-height: 40px !important;
  letter-spacing: -0.02em !important;
  color: #00178f !important;
}
.loop-selected-bundle-info > p {
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 28px !important;
  letter-spacing: -0.4px !important;
  color: #000830 !important;
}
.loop-selected-bundle-items-count > p {
  font-weight: 400 !important;
  font-size: 16px !important;
  letter-spacing: -0.4px !important;
  color: #000830 !important;
}

/* progress bar track + gradient fill */
.loop-new-progress-range-line {
  background: #bababa !important;
  border-radius: 10px !important;
}
.loop-new-progress-range-line.left {
  background: linear-gradient(90deg, #034de4 0%, #00178f 100%) !important;
  border-radius: 10px !important;
}
/* milestone dots + numbers */
.loop-progress-range-dot.colored { background: #7d89b0 !important; }
.loop-progress-range-dot.colored.active-dots { background: #00178f !important; }
.label.colored { color: #fdfdfd !important; }
/* push bar below the (sometimes 2-line) subtitle + clear OFF labels */
.mg-2.loop-bundle-progress-bar-new-container { margin-top: 30px !important; }

/* selected-variant row: title + price (discount first) */
.loop-selected-variant-title {
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 28px !important;
  letter-spacing: -0.4px !important;
  color: #00178f !important;
}
.loop-selected-variant-price-container { display: flex !important; gap: 6px !important; }
.loop-selected-variant-price-container .loop-selected-variant-price-discount {
  order: 1; color: #00178f !important; font-size: 18px !important; letter-spacing: -0.4px !important;
}
.loop-selected-variant-price-container .loop-selected-variant-price-actual {
  order: 2; color: #828282 !important;
}

/* variant mini qty stepper -> outline pill */
.loop-selected-variant-actions {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 2px 6px !important;
  min-height: 32px;
  width: auto !important;
  border: 1px solid #00178f !important;
  border-radius: 100px !important;
  background: transparent !important;
  overflow: visible !important;
}
.loop-selected-variant-actions .loop-btn-input-decrease-small,
.loop-selected-variant-actions .loop-btn-input-increase-small {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 18px;
  padding: 0 2px !important;
  background: transparent !important;
  color: #00178f !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 16px;
  line-height: 1;
}
.loop-selected-variant-actions-input {
  flex: 0 0 auto;
  width: 24px !important;
  min-width: 0 !important;
  font-size: 14px;
  background: transparent !important;
  color: #00178f !important;
  border: none !important;
  box-shadow: none !important;
  text-align: center;
  font-weight: 500;
}
.loop-selected-variant-actions-container {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* selling-plan rows */
.loop-bundle-widget-selling-plan-text {
  font-weight: 500 !important;
  font-size: 18px !important;
  letter-spacing: -0.4px !important;
  color: #000830 !important;
}
.loop-bundle-widget-selling-plan-discount-price { color: #00178f !important; }
.loop-bundle-widget-selling-plan-actual-price { color: #828282 !important; }

/* selling-plan price: discounted first, compare-at struck after (desktop + mobile) */
.loop-bundle-widget-selling-plan-price,
.loop-bundle-widget-selling-plan-price-subscription {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline;
  gap: 6px;
}
.loop-bundle-widget-selling-plan-discount-price { order: 1; }
.loop-bundle-widget-selling-plan-actual-price {
  order: 2;
  text-decoration: line-through;
  color: #828282 !important;
}

/* discount badge "Save X%" */
.loop-bundle-widget-discount-badge-container {
  background: #00ff66 !important;
  color: #000830 !important;
  border-radius: 76px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ===== RADIO BUTTONS ===== */
.loop-bundle-widget-radio-btn-inner { display: none !important; }
.loop-bundle-widget-radio-btn {
  width: 15px;
  height: 15px;
  margin: 3px 0 0 0 !important;
  border-color: #00178F;
  border-width: 1px;
}
.loop-bundle-widget-radio-btn.selected {
  border-color: #00178F;
  background-color: #00178F;
}
.loop-bundle-widget-radio-btn-container { width: 15px; }

/* ===== INJECTED: milestone OFF labels ===== */
.ysm-off-label {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 15px;
  letter-spacing: 0.02em;
  color: #00178f;
  white-space: nowrap;
  pointer-events: none;
}

/* ===== INJECTED: subscribe perks row ===== */
.ysm-sub-perks {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 2px;
  padding-left: 2px;
}
.ysm-sub-perk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  color: #000830;
}
.ysm-sub-perk__ic { display: inline-flex; flex: 0 0 auto; }
.ysm-sub-perk__ic svg { width: 16px; height: 16px; display: block; }

/* =========================================================
   MOBILE (<=767px)
   Bottom-sheet progress bar = NATIVE Loop (do NOT force dot positions here;
   forcing dots desynced the native fill — see handover doc).
   Only: OFF labels sizing, milestone inset, hero spacing, summary row.
========================================================= */
@media (max-width: 767px) {

 

  /* mobile: inset the whole milestone track so end labels don't clip */
  .loop-bottom-sheet-body-container .loop-progress-range-milestone-container {
    width: calc(100% - 48px) !important;
    margin: 0 auto !important;
  }

  /* grid -> single column */
  .loop-products-align-new { grid-template-columns: 1fr !important; }

  /* hero: inner spacing + scaled type */
  .loop-bundle-image-container-wrapper {
    gap: 14px !important;
    min-height: 271px;
    padding: 28px 17px 44px !important;   /* more bottom room so "Bundle perks" never sits tight/cut */
    height: auto !important;
    overflow: visible !important;          /* belt-and-suspenders: never clip the last row */
  }
  /* hero: breathing room below the full-bleed banner */
  .loop-bundle-header-wrapper-new {
    margin-bottom: 32px !important;
    overflow: visible !important;
  }
  /* perks: explicit gap below so it can't kiss the banner edge */
  .loop-bundle-image-container-wrapper .ysm-hero-perks {
    margin-bottom: 4px !important;
  }

  .loop-bundle-image-container-wrapper .loop-bundle-title {
    font-size: 28px !important;
    line-height: 120% !important;
  }
  .loop-bundle-image-container-wrapper .loop-bundle-new-description,
  .loop-bundle-image-container-wrapper .loop-bundle-new-description > undefined {
    font-size: 16px !important;
    line-height: 140% !important;
  }
  .loop-bundle-image-container-wrapper .ysm-hero-perks__link {
    font-size: 15px !important;
    line-height: 140% !important;
  }

  /* right panel: fit narrow width */
  .loop-selected-bundle-title {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  .loop-selected-bundle-info > p,
  .loop-selected-bundle-items-count > p {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  /* OFF labels: smaller on mobile */
  .ysm-off-label {
    font-size: 11px !important;
    bottom: calc(100% + 6px);
  }

  /* INJECTED mobile summary row (top of bottom-sheet body, both states):
     "Bundle summary" (left) + green pill (right) */
  .ysm-mobile-bar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
  }
  .ysm-mobile-bar-title .ysm-summary-title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: #00026E;
    white-space: nowrap;
  }
  .ysm-mobile-bar-title .ysm-summary-pill {
    display: inline-flex;
    align-items: center;
    background: #00FF66;
    border-radius: 30px;
    padding: 2px 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #00178F;
    white-space: nowrap;
  }

  /* ---- EXPANDED INVERSION: hide native header "Buy More & Save"
          so the header strip is clean; "Bundle summary" (body top) sits on top
          and "Buy More & Save" lives centered in the grey band below.
          .loop-bottom-sheet-header-container is mobile-sheet only -> safe. ---- */
  .loop-bottom-sheet-header-container h2 {
    display: none !important;
  }

  /* ---- EXPANDED header cleanup: remove grey borders, de-box chevron, recolor blue ---- */
  .loop-bottom-sheet-header-container {
        padding: 16px !important;
  }

  .react-modal-sheet-header-container,
  .loop-bottom-sheet-header-container {
    border: none !important;
    box-shadow: none !important;
    margin: 0px !important;
  }
  .loop-bottom-sheet-header-icon {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #00178f !important;
  }
  .loop-bottom-sheet-header-icon svg {
    color: #00178f !important;
    fill: currentColor !important;
  }

  /* ---- #1 GREY BAND: body wraps big title + bar in grey; summary row stays white ---- */
  .loop-bottom-sheet-body-container {
    background: #F0F0F0 !important;
    padding-bottom: 16px !important;
  }
  /* summary row = full-width white strip, flush to top + side edges, no radius;
     16px gap below before the grey band (COLLAPSED) */
  .loop-bottom-sheet-body-container .ysm-mobile-bar-title {
    background: #FFFFFF;
    width: auto !important;                /* override base width:100% so negative margins bleed both sides */
    margin: -16px -16px 16px !important;   /* bleed top + left + right past body's 16px padding; 16px gap below */
    padding: 16px !important;              /* restore inner spacing on the bled edges */
    border-radius: 0;
  }
  /* summary row when it lives in the header beside the chevron (EXPANDED) */
  .loop-bottom-sheet-header-container .ysm-mobile-bar-title {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* ---- #2 big centered "Buy More & Save" (injected) ---- */
  .ysm-band-title {
    width: 100%;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 23px;
    line-height: 40px;
    letter-spacing: -0.02em;
    color: #00178f;
    margin: 4px 0 0;
  }

  /* ---- #10 hide native info text (kept in DOM for the pill parser) ---- */
  .loop-bottom-sheet-body-container .loop-bottom-sheet-body-info-text {
    display: none !important;
  }

  /* ---- #6 row backgrounds (mobile sheet only): OTP grey, Subscribe blue ---- */
  .loop-bottom-sheet-purchase-options-container [aria-label="Select one-time purchase"] {
    background: #F0F0F0 !important;
    border-radius: 16px !important;
  }
  .loop-bottom-sheet-purchase-options-container [aria-label="Select subscription"] {
    background: #D6E3FD !important;
    border-radius: 16px !important;
  }

  /* ---- #7 ADD TO CART footer: uppercase "YOU SAVED", spacing ---- */
  .loop-bottom-sheet-footer-container .loop-display-saved-total {
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
 .loop-bundle-image-container{
      max-height: 18em;
  }
.loop-bundle-image-container img {
max-height: 17em;
}
}


.loop .carousel-control-next, .loop .carousel-control-prev {
    background-color: white;
}