/* ================================
   LOOP – CENTERED HEADERS & TEXT
   ================================ */

/* --- TITLE (H1) --- */
.loop-bundle-title-wrapper-new {
  width: 100%;
  margin-left: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
}

.loop-bundle-title-wrapper-new h1 {
  margin: 0 auto;
  text-align: center;
}


/* --- DESCRIPTION --- */
.loop-bundle-new-description {
  width: 100%;
  text-align: center;
}

.loop-bundle-new-description p {
  max-width: 900px;
  margin: 0 auto;
}


/* --- SIZE SELECTOR TITLE (Select bundle) --- */
.loop-bundle-size-selector-new-wrapper {
  width: 100%;
  margin-left: 0;
  align-items: center;
  text-align: center;
}

.loop-bundle-size-selector-label {
  text-align: center;
}


/* --- SELECT YOUR ITEMS (H2) --- */
.loop-bundle-select-product-title-new,
.loop-h2 {
  width: 100%;
  text-align: center;
  margin: 0;
}


/* --- FILTER BUTTON (ONLY FLEX CENTER, NO VW) --- */
#loop-bundle-filters-btn-container-new {
  width: 100%;
  margin-left: 0;
  display: flex;
  justify-content: center;
}


/* Адаптивність для мобільних */
@media screen and (max-width: 768px) {
  .loop-subscription-form h1,
  .loop-container h1 {
    font-size: 24px;
  }

  .loop-subscription-form h2,
  .loop-container h2,
  .loop-h2,
  .loop-bundle-size-selector-label {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  p.loop-text-p1.m-0.loop-bundle-product-card-title.loop-pointer {
    font-size: 17px !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
  }
}


/* Контейнер картки */
.loop-card-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 350px;
  padding: 0px;
  box-sizing: border-box;
  border-radius: 54px;
  background: #fff;
}

/* Тіло картки */
.loop-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 0px !important;
  text-align: left;
}

/* Кнопка */
.loop-card-body .btn {
  border-radius: 54px !important;
  padding: 12px 24px !important;
  font-size: 16px;
  width: 100%;
}

/* === Мобільна версія === */
@media screen and (max-width: 768px) {
  .loop-card-header {
    max-height: 340;
    padding: 2px;
  }

  .loop-image-product-lg img {
    width: 100% !important;
    height: 218px !important;
    max-width: 100%;
    object-fit: cover !important;
    aspect-ratio: auto !important;
    border-radius: 10px;
  }

  .loop-card-body {
    gap: 2px;
  }

  .loop-card-body .btn {
    font-size: 12px;
    padding: 6px 8px;
  }

}
@media (max-width: 768px) {
    .loop-products-align {
        margin: 0 15px !important;
    }
}
@media (max-width: 768px) {
  .loop-btn-size-md {
    padding: 10px;
  }
}
.loop-card-header{
 min-height: 150px !important;
}
.loop-drawer-product-title {
  text-align: left !important;
}

.loop-bundle-image-container img{
  display: none !important;
}
.loop-card .d-flex {
    // display: inline-block !important;
}

.loop-product-title .loop-text-p1 {
  text-align: left !important;
}
.diet-badge {
  display: inline-flex;         /* Use flex to align items inside the badge */
  align-items: center;          /* Center items vertically */
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 8px;
  margin-top: 8px;
  margin-bottom: 5px;   
  margin-right: 5px;
}
.diet-badge-wrapper {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  margin-bottom: 5px;
}

.diet-badge {
  display: inline-flex;
  align-items: left;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 8px;
  margin: 0;
}


.diet-badge[data-diet=" Plant-based" i] {
  color: #2e7d32 !important;
  background:#e8f5e9  !important;
}


/* Keto badge styling */
.diet-badge[data-diet="Keto" i] {
  color: #d84315 !important;
  background: #fbe9e7 !important;
}

/* Pescatarian badge styling */
.diet-badge[data-diet="Pescatarian" i] {
  color: #1565c0 !important;
  background: #e3f2fd !important;
}
.diet-badge[data-diet="Plant-based" i] {
  color: #2e7d32 !important;
  background: #e8f5e9 !important;
}

/* Low calories badge styling */
.diet-badge[data-diet="Low calories" i] {
  color: rgb(255, 159, 57) !important;
  background: rgb(255, 249, 196) !important;
}

/* Rich in Protein badge styling */
.diet-badge[data-diet="Rich in Protein" i] {
  color: rgb(131, 52, 201) !important;
  background: rgb(247, 234, 255) !important;
}
.loop-bundle-product-card-title {
    font-family: 'Coolvetica', sans-serif !important;
    font-size: 21px !important;
    
}

.loop-container .loop-bundle-header-wrapper .loop-bundle-size-selector-wrapper .loop-bundle-discount-text-box {
    margin: 2px 0 0 !important;
}
.loop-container .loop-bundle-size-selector  {
  margin: 2px 0 0 !important;
}
.loop-container .loop-bundle-select-product-title-container {
    margin-top: 5px;
}
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card {
    padding: 0;
    border-radius: 42px !important;
}
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-card-header {
    padding: 0;
}
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-card-header .loop-image-product-lg img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 40px 40px 0 0 !important;
}
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-card-header .loop-bundle-product-image-container {
    display: flex;
}
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-card-header .loop-card-body {
    padding: 2px !important;
}
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-card-header .loop-card-body .loop-product-card-description-body {
    align-items: flex-start;
    gap: 4px;
}
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-body-footer-wrapper {
    padding: 0 0px 0px 16px;
}
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-card-header .loop-card-body .loop-product-card-description-body .diet-badge {
    margin: 2px 0 !important;
}
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-card-header .loop-card-body .loop-product-card-description-body .diet-badge-wrapper {
    margin: 0 !important;
}
.loop-drawer .loop-drawer-content .loop-drawer-body .loop-drawer-product-description-container .loop-drawer-product-image-carousel .carousel-inner .carousel-item img {
    border-radius: 40px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    object-fit: cover;
    object-position: left;
    width: 100%;
    height: 100%;
    display: inline-block;
    max-height: fit-content;
}
.loop-drawer .loop-drawer-content .loop-drawer-body .loop-drawer-product-description-container .loop-drawer-product-image-carousel .carousel-inner {
    height: auto !important;
}
.loop-drawer .loop-drawer-content .loop-drawer-body .loop-drawer-product-description-container .loop-drawer-product-title-price-variant-container h2 {
    margin: 10px 0;
    font-size: 40px;
    line-height: 1.2;
}
@media screen and (max-width: 768px) {
    .loop-container .loop-products-available .loop-products-align {
        margin: 0 !important;
        gap: 30px 8px;
    }
    .loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-card-header .loop-card-body {
        padding: 2px 2px !important;
    }
    .loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-body-footer-wrapper {
        padding: 0 8px 10px 8px;
    }
}
.loop-drawer .loop-drawer-content .loop-drawer-body .loop-drawer-product-description-container .loop-drawer-product-image-carousel .carousel-inner .carousel-item {
    display: block;
    max-width: 100%;
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: relative;
    vertical-align: middle;
}
.loop-drawer .loop-drawer-content .loop-drawer-body .loop-drawer-product-description-container .loop-drawer-product-image-carousel .carousel-inner .carousel-item::after {
    content: "";
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 100%;
}
.loop-drawer .loop-drawer-content .loop-drawer-body .loop-drawer-product-description-container .loop-drawer-product-image-carousel .carousel-control-prev, .loop-drawer .loop-drawer-content .loop-drawer-body .loop-drawer-product-description-container .loop-drawer-product-image-carousel .carousel-control-next {
    top: 50%;
}
@media screen and (max-width: 1023px) {
    .loop-drawer .loop-drawer-content .loop-drawer-body .loop-drawer-product-description-container .loop-drawer-product-title-price-variant-container h2 {
        font-size: 28px;
    }
}
@media screen and (max-width: 767px) {
    .loop-container .footer-description-wrapper .loop-bundle-footer-description {
        width: 100%;
    }
}
@media screen and (max-width: 500px) {
    .loop-container .loop-products-available .loop-products-align {
        margin: 0 !important;
        gap: 15px 4px;
    }
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-card-header .loop-card-body .loop-product-card-description-body .nutrition-container {
    gap: 10px;
}
    .loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-card-header .loop-card-body {
        padding: 8px 6px !important;
    }
    .loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-body-footer-wrapper {
        padding: 0 6px 6px 6px;
    }
}
    .loop-container .loop-products-available .loop-products-align .loop-bundle-product-wrapper {
        max-width: 100%;
        width: 100%;
        min-width: 100%;
    }
    .loop-container .loop-products-available .loop-products-align .loop-bundle-product-wrapper .loop-bundle-product-container {
        max-width: 100%;
        width: 100%;
        min-width: 100%;
    }
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-card-header .loop-card-body .diet-badge-wrapper{
  display: none !important;
}

.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card {
    padding: 0;
    border-radius: 54px !important;
    border: 0;
}
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-card-header {
    padding: 0;
}
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-card-header .loop-card-body .loop-product-card-description-body .loop-display-product-price .loop-product-price {
    color: #959393;
}

p.loop-text-p2.m-0.loop-bundle-p-2.loop-discounted-price {
  font-weight: 700 !important;
}
 .loop-bundle-footer .loop-card-header{
   padding: 0px;
   min-height: auto !important;

    }
    .loop-bundle-footer .loop-image-product-sm img{
        width: 100%;
        height: auto;
      aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    .loop-bundle-footer .loop-bundle-foolter-product-container .width-120 {
        width: 150px;
    }
    .loop-bundle-footer .loop-image-product-sm{
        width: 100%;
        height: auto;
        
    }
    .loop-bundle-footer .loop-selected-products .loop-selected-product-card{
        border-radius: 12px;
        padding: 10px 12px 14px 12px;
    }
    .loop-bundle-footer .loop-selected-products .loop-selected-product-card .loop-card-body .loop-selected-products-title {
       font-size: 12px;
        color: #000;
        display: -webkit-box;
        max-width: 100%;
        height: 24px;
        margin: 0 auto;
        line-height: 1;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
    }
     .loop-bundle-footer .loop-display-selected-products{
         z-index: 1;
        position: relative;
     }
     .loop-bundle-footer .loop-display-selected-products .loop-selected-products .loop-bundle-foolter-producct-container .loop-card-icon{
        width: 25px;
        height: 25px;   
    }
    .loop-bundle-footer .loop-display-selected-products .loop-selected-products{
         gap: 17px;
    }
    .loop-bundle-footer{
        background: #f3f3f394;
    }
    .loop-bundle-footer::after{
        content: "";
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        position: absolute;
        z-index: 0;
        border-radius: 16px;
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(16px);
    }
.loop-bundle-footer .loop-display-selected-products .loop-selected-products .loop-bundle-foolter-producct-container .loop-card-icon div {
    width: 100%;
    height: 100%;
}
.loop-bundle-footer .loop-display-selected-products .loop-selected-products .loop-bundle-foolter-producct-container .loop-card-icon div svg {
    width: 8px;
    height: 8px;
}
.loop-bundle-footer .loop-display-selected-products .loop-selected-products .loop-bundle-foolter-producct-container .loop-card-icon div svg path {
    fill: #000;
}

/* Force 1 row for Loop size buttons */
.loop-bundle-size-selector {
  display: flex !important;
  flex-wrap: nowrap !important;  /* <- головне */
  justify-content: center !important;
  gap: 8px !important;
}

/* If not enough space — allow horizontal scroll */
.loop-bundle-size-selector {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar (iOS/Chrome) */
.loop-bundle-size-selector::-webkit-scrollbar {
  display: none !important;
}

/* Target buttons by class (Loop uses this class) */
.loop-bundle-size-selector .loop-bundle-size-selector-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

@media (max-width: 768px) {

  /* саме той блок, де твої кнопки */
  .loop-bundle-size-selector-wrapper .loop-bundle-size-selector {
    display: flex !important;
    flex-wrap: nowrap !important;     /* 1 рядок */
    overflow-x: auto !important;      /* якщо не влазить — скрол */
    -webkit-overflow-scrolling: touch;
    gap: 4px !important;              /* менша відстань */
  }

  /* прибираємо margin який робить mx-[8px] */
  .loop-bundle-size-selector-wrapper .loop-bundle-size-selector .loop-bundle-size-selector-btn {
    flex: 0 0 auto !important;
    margin: 0 !important;             /* 🔥 головне */
    white-space: nowrap !important;
  }

  /* ховаємо скролбар */
  .loop-bundle-size-selector-wrapper .loop-bundle-size-selector::-webkit-scrollbar {
    display: none !important;
  }
}

/* ================================
   LOOP – FULL-WIDTH PRODUCT IMAGE
   ================================ */

/* Контейнер картинки */
.loop-bundle-product-image-container,
.loop-image-product-lg {
  width: 100%;
  aspect-ratio: 1 / 1;   /* квадрат */
  overflow: hidden;
}

/* Сама картинка */
.loop-bundle-product-image-container img,
.loop-image-product-lg img {
  width: 100% !important;
  height: 100% !important;

  max-width: none !important;   /* 🔥 КЛЮЧ */
  max-height: none !important;  /* 🔥 КЛЮЧ */

  object-fit: cover !important;
  display: block;
  margin: 0 !important;

  border-radius: 20px 20px 0 0 !important;
}

/* ================================
   LOOP – FORCE FULL WIDTH IMAGE
   ================================ */

/* image outer container */
.loop-bundle-product-image-container {
  width: 100%;
}

/* 🔥 прибираємо flex-центрування */
.loop-image-product-lg {
  display: block !important;
  width: 100%;
  height: 100%;
}

/* image itself */
.loop-bundle-product-image-container img,
.loop-image-product-lg img {
  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;

  border-radius: 20px 20px 0 0 !important;
}

/* ================================
   LOOP – FORCE IMAGE FULL-WIDTH (FINAL OVERRIDE)
   Put this at the VERY END of your CSS
   ================================ */

/* 1) прибираємо padding у header (у тебе раніше є padding:16px) */
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card .loop-card-header {
  padding: 0 !important;
}

/* 2) контейнер картинки має займати 100% ширини і не мати внутрішніх відступів */
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card
.loop-bundle-product-image-container {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;  /* прибирає “невидимі” gaps */
}

/* 3) ВБИВАЄМО flex-центрування, яке тримає картинку “по центру” */
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card
.loop-bundle-product-image-container .loop-image-product-lg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* якщо класів багато і flex все одно лізе — перебиваємо саме flex-властивості */
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card
.loop-bundle-product-image-container .loop-image-product-lg.flex {
  justify-content: flex-start !important;
  align-items: stretch !important;
}

/* 4) сама картинка */
.loop-container .loop-products-available .loop-bundle-product-wrapper .loop-card
.loop-bundle-product-image-container img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
  margin: 0 !important;

  border-radius: 20px 20px 0 0 !important;
}

/* ================================
   LOOP – FULL WIDTH IMAGE (WORKING)
   Put at the VERY END of your CSS
   ================================ */

/* 1) прибираємо той самий padding:16px на header */
.loop-container .loop-products-available .loop-card-header.loop-pointer {
  padding: 0 !important;
}

/* 2) робимо контейнер зображення на всю ширину */
.loop-container .loop-products-available .loop-card-header.loop-pointer
.loop-bundle-product-image-container,
.loop-container .loop-products-available .loop-card-header.loop-pointer
.loop-image-product-lg {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

/* 3) прибираємо flex-centering всередині image wrapper */
.loop-container .loop-products-available .loop-card-header.loop-pointer
.loop-image-product-lg {
  display: block !important;
}

/* 4) картинка реально “липне” до країв */
.loop-container .loop-products-available .loop-card-header.loop-pointer
.loop-bundle-product-image-container img,
.loop-container .loop-products-available .loop-card-header.loop-pointer
.loop-image-product-lg img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  border-radius: 20px 20px 0 0 !important;
}

/* 5) повертаємо “внутрішні” відступи для тексту/кнопки (бо header padding забрали) */
.loop-container .loop-products-available .loop-card-header.loop-pointer .loop-card-body,
.loop-container .loop-products-available .loop-card-header.loop-pointer .loop-body-footer-wrapper {
  padding: 16px !important;
}

/* 🔥 REAL FIX — THIS IS THE ONE */
.loop-container .loop-products-available 
.loop-bundle-product-wrapper 
.loop-card {
  padding: 0 !important;
}

.loop-bundle-widget-frequency-dropdown-layout .loop-bundle-widget-frequency-selling-plans-button-container {
  display: none !important;
}

/* ================================
   LOOP – KILL CARD PADDING (GUARANTEED)
   Put this at the VERY END
   ================================ */

/* прибираємо padding саме на продукт-картках Loop */
.loop-container .loop-products-available-new
.loop-bundle-product-container
.loop-card.loop-bundle-product-card {
  padding: 0 !important;
}

/* дубль на випадок іншої обгортки */
.loop-container
.loop-card.loop-bundle-product-card {
  padding: 0 !important;
}

/* якщо padding заданий не padding, а через padding-left/right */
.loop-container
.loop-card.loop-bundle-product-card {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.loop-container
.loop-card.loop-bundle-product-card
.loop-bundle-product-image-container,
.loop-container
.loop-card.loop-bundle-product-card
.loop-bundle-product-image-container img {
  width: 100% !important;
  display: block !important;
}

/* ================================
   LOOP – BUTTON SPACING (SAFE)
   ================================ */

/* контейнер кнопки */
.loop-container
.loop-card.loop-bundle-product-card
.loop-body-footer-wrapper {
  padding: 0 6px 6px 6px !important;
}

/* сама кнопка на всю ширину */
.loop-container
.loop-card.loop-bundle-product-card
.loop-body-footer-wrapper .loop-add-product-btn,
.loop-container
.loop-card.loop-bundle-product-card
.loop-body-footer-wrapper .btn {
  width: 100%;
}


.loop-bundle-widget-frequency-selling-plans-button-container{
  display: none !important;
}

/* CARD RADIUS – MASTER */
.loop-container
.loop-card.loop-bundle-product-card {
  border-radius: 24px !important; /* міняй тут */
  overflow: hidden;               /* 🔥 ОБОВʼЯЗКОВО */
}

/* ================================
   LOOP – LEFT ALIGN BADGES & PRICE
   SAFE (does NOT touch quantity input)
   ================================ */

/* 1) BADGES – зліва */
.loop-container .loop-card.loop-bundle-product-card
.loop-product-card-description-body .diet-badge-wrapper {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  gap: 6px !important;
  margin: 8px 0 6px 0 !important;
}

/* 2) PRICE – зліва */
.loop-container .loop-card.loop-bundle-product-card
.loop-display-product-price,
.loop-container .loop-card.loop-bundle-product-card
.loop-product-price {
  text-align: left !important;
}

/* якщо price — flex */
.loop-container .loop-card.loop-bundle-product-card
.loop-display-product-price {
  display: flex !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

/* ================================
   LOOP – KEEP QUANTITY NUMBER CENTERED
   ================================ */

/* input з цифрою */
.loop-container .loop-card.loop-bundle-product-card
.loop-form-input,
.loop-container .loop-card.loop-bundle-product-card
.loop-form-input-small {
  text-align: center !important;
}

/* на випадок якщо Loop додає text-center */
.loop-container .loop-card.loop-bundle-product-card
.loop-form-input.text-center {
  text-align: center !important;
}

/* ================================
   LOOP – BUNDLE DESCRIPTION WIDTH (MOBILE)
   ================================ */
@media (max-width: 768px) {
  p.loop-bundle-new-description,
    loop-bundle-title-wrapper-new {
    max-width: 350px !important;  /* ⬅️ змінюй */
    margin: 0 auto !important;
    padding: 0 16px !important;
    text-align: center !important;
  }
}

@media (max-width: 768px) {

  .loop-bundle-title-wrapper-new h1.loop-bundle-title {
    max-width: 350px !important;
    margin: 0 auto !important;
  }

}

/* ================================
   LOOP – SIZE SELECTOR WIDTH (MOBILE)
   ================================ */
@media (max-width: 768px) {

  .loop-bundle-size-selector {
    width: 360px !important;       /* ⬅️ твоя потрібна ширина */
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

}

/* ================================
   LOOP – SIZE BUTTON SPACING FIX
   ================================ */
@media (max-width: 768px) {

  .loop-bundle-size-selector button {
    margin-left: 1px !important;
    margin-right: 1px !important;
  }

}


/* ================================
   LOOP – BOTTOM SHEET (SAFE GLASS)
   ================================ */

/* 1) Загальний контейнер sheet: прозорий + blur */
.react-modal-sheet-container.loop-bottom-sheet {
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;

  border-radius: 24px 24px 0 0 !important;
  overflow: hidden !important;
}

/* 2) Header і Body: НЕ білі, а прозорі (щоб blur було видно) */
.loop-bottom-sheet-header-container,
.loop-bottom-sheet-body-container {
  background: transparent !important;
}

/* 3) Purchase options (твій білий блок): робимо glass */
.loop-bottom-sheet-purchase-options-container {
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
}

/* 4) Widget container всередині purchase options: прибираємо "чисто білий", але НЕ чіпаємо кнопки */
.loop-bottom-sheet-purchase-options-container .loop-bundle-widget-container {
  background: transparent !important;
}

/* 5) Selling plan cards (2 кнопки): задаємо фон саме їм */
.loop-bundle-widget-selling-plan-container {
  background: rgba(255, 255, 255, 0.22) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

/* active/selected */
.loop-bundle-widget-selling-plan-container.selected {
  background: rgba(255, 255, 255, 0.35) !important;
  border-color: rgba(0,0,0,0.12) !important;
}

/* 6) Текст всередині кнопок — просто фіксуємо колір (не фон!) */
.loop-bundle-widget-selling-plan-container,
.loop-bundle-widget-selling-plan-container * {
  color: #111 !important;
}

/* 7) Footer (нижня зона) — легкий glass */
.loop-bottom-sheet-footer-container {
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
}

/* 🔥 REMOVE HEADER BORDER COMPLETELY */
.loop-bottom-sheet-header-container {
  alignment: center;
  border: none !important;
}

/* ================================
   LOOP – SELLING PLAN SELECTED (DARK GRAY)
   ================================ */
/* default (не вибрано) */
.loop-bundle-widget-selling-plan-container {
  background: rgba(255, 255, 255, 0.3) !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: background 0.25s ease, border 0.25s ease;
}

/* SELECTED */
.loop-bundle-widget-selling-plan-container.selected {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: #FFA054 !important;
}

/* FIX product title alignment */
.loop-product-card-description-body {
  align-items: flex-start !important;
}

.loop-product-title,
.loop-product-title .loop-text-p1 {
  text-align: left !important;
}

.loop-selected-variant-actions {
  display: flex;
  align-items: center;
}

.loop-selected-variant-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;

  width: 28px;
  height: 28px;
  padding: 0 !important;

  line-height: 1 !important;
}

.loop-selected-variant-actions input {
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #000;
}

.loop-selected-variant-actions button {
  line-height: 30px !important;
}

/* ================================
   LOOP – QUANTITY BUTTON (FINAL, FIXED)
   ================================ */

/* Загальний контейнер */
.loop-selected-variant-actions {
  display: flex;
  align-items: center;
  height: 28px;
}

/* ВСІ елементи всередині */
.loop-selected-variant-actions > * {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* ================================
   КНОПКИ + / −
   ================================ */
.loop-selected-variant-actions button {
  width: 28px;
  min-width: 28px;
  height: 28px;

  padding: 0;
  margin: 0;

  background: #FFA054;
  border: none;

  font-size: 18px;
  font-weight: 500;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 1;
}

/* 🔥 ФІКС вертикального центрування символів */
.loop-selected-variant-actions button span,
.loop-selected-variant-actions button svg {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  transform: translateY(-2px); /* ⬅️ ТОНКИЙ ФІКС */
}

/* ================================
   INPUT З КІЛЬКІСТЮ
   ================================ */
.loop-selected-variant-actions input {
  width: 28px;
  min-width: 28px;
  height: 28px;

  background: #fff;

  border: 1px solid #FFA054;   /* 🔥 ПОМАРАНЧЕВА ОБВОДКА */
  border-left: none;
  border-right: none;

  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;

  padding: 0;
  margin: 0;

  color: #000;
  z-index: 1;
}

/* ================================
   FOCUS / OUTLINE CLEAN
   ================================ */
.loop-selected-variant-actions button:focus,
.loop-selected-variant-actions input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.loop-form-input {
  border: 1px solid #FFA054 !important;  /* 🔥 ПОМАРАНЧЕВА ОБВОДКА */
  border-left: none;
  border-right: none;
}

.loop-bundle-widget-discount-badge-container {
  background-color: #FFA054 !important; /* помаранчевий */
  color: #ffffff !important;            /* білий текст */
  font-weight: 700;                      /* болд */
  border-radius: 12px;                    /* як бейдж */
}

.loop-bundle-widget-selling-plan-discount-price {
  color: rgba(17, 17, 17, 0.45) !important;
  text-decoration: line-through !important;
}

.loop-filters-selector-new-wrapper {
  justify-content: center;
}