#pageBundleDesignMode {
  padding: 15px 0;
  margin: 15px 0;

  .child-product-card {
    flex: 1 1 auto;
  }

  .page-bundle-item-btn-width {
    min-width: calc(10rem + var(--buttons-border-width) * 2);
  }

  #pageBundleProducts {
    padding: 10px;
  }
}

#pageBundle {
  padding: 15px 0;
  display: none;
}

#pageBundleProducts {
  border-radius: 8px;
}

#pageBundleCard {
  .child-product-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }

  .child-product-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0 1px 5px 0 #dcc4c4;
    transition: all 0.1s ease;
    width: 100%;

    img {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
    }
  }

  .selected {
    outline: #877e7e solid 1px;
    background-color: #f8f8f89c;
    transform: scale(1.025);
  }

  .child-product-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    padding-bottom: 0;
    margin-bottom: 5px;

    .child-pro-card-image img {
      width: 100%;
      min-height: 0;
      border-radius: 4px;
      object-fit: cover;
    }

    .child-pro-card-image {
      align-self: flex-start;
      margin-bottom: 5px;
    }

    .small-image img {
      width: 75px;
      height: 77px;
    }

    .big-image img {
      min-height: 320px;
      max-height: 320px;
      width: 100%;
      object-fit: cover;
    }

    .child-pro-card-link {
      width: 100%;
      min-width: 0;
    }

    .child-pro-card-link a {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      width: 100%;
      min-width: 0;
      font-size: 13px;
      font-weight: bold;
      text-decoration: none;
      color: black;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      line-height: 1.4;
      min-height: calc(1.4em * 2);
    }

    .product-info {
      min-width: 0;
    }

    .child-pro-card-link a:hover {
      text-decoration: underline;
    }

    .child-pro-card-price {
      font-size: 14px;
      color: #000000;
    }

    .child-prod-orig-price {
      text-decoration: line-through;
      color: #2c2d2b;
      padding-right: 10px;
    }

    .remove-line-through {
      text-decoration: none;
    }
  }

  .child-prod-card-checkbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    gap: 10px;

    .child-card-values {
      /*cursor: pointer;*/
    }

    input[type="checkbox"] {
      cursor: pointer;
      width: 19px;
      height: 19px;
    }
  }

  .product-qty-container {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
    justify-content: space-between;
    min-height: 45px;
    width: 100%;
  }

  .product-qty-button {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
  }

  .product-qty-input {
    width: 45px;
    text-align: center;
    border: none;
    outline: none;
    font-size: 16px;
    background: none;
  }

  /* PREVIEW VIEW: DESIGN_MODE */

  .row-preview-content {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    justify-content: flex-start;

    .img-gallery {
      height: 75px;
      object-fit: cover;
    }

    .small-image img {
      width: 75px;
      height: 77px;
    }

    .page-bundle-total-section {
      width: 100%;
      background-color: #e0dfdf;
      border-radius: 8px;
      margin: 0;
    }

    .product-qty-input {
      background: none;
    }
  }

  .page-bundle-disabled-product-card,
  .bundle-out-of-stock-product {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }

  & img:hover {
    opacity: 1;
    transition: transform 0.5s ease;
    transform: scale(1.02);
    cursor: pointer;
  }
}

/* SELECTED-IMAGE: styling for display product images */
.selected-prod-img {
  flex-wrap: nowrap; /* Keep everything in one row */
  gap: 20px;
  overflow-x: auto; /* Allow horizontal scrolling if too many items */
  padding: 13px;
}

.selected-item {
  position: relative;
  max-width: 73px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background-color: #f9f9f9;
  font-size: 35px;
  border-radius: 5px;
  box-shadow: 0 1px 5px 0 #c0bebe;
}

.selected-image {
  width: 75px;
  height: 77px;
  object-fit: cover; /* Ensure image fills the box */
  border-radius: 5px; /* Rounded corners */
  max-width: 75px;
}

/* SELECTED IMAGES CROSS ICON STYLE */
.remove-selected-bundle-item,
.display-fixed-quantity-count {
  position: absolute;
  width: 20px;
  height: 20px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
}

.remove-selected-bundle-item {
  bottom: 64px;
  left: 61px;
  background: black;
  color: white;
  border-radius: 50%;
  font-weight: bold;
}

.display-fixed-quantity-count {
  display: none;
  top: 4px;
  right: 49px;
  background-color: #ffffffbf;
  color: black;
  border-radius: 4px;
  font-weight: normal;
}

.disabled-qty-btn {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.empty-box {
  width: 75px;
  height: 77px;
  border: 1px dashed #ccc;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #999;
  font-weight: bold;
  background-color: #f9f9f9;
  flex-shrink: 0;
}

/*** END ***/

.page-bundle-total-price-section {
  display: flex;
  justify-content: center;
  z-index: 9;
  position: sticky;
  bottom: 10px;
}

.page-bundle-total-section {
  width: 100%;
  margin-top: 10px;
  background-color: #e0dfdf;
  border-radius: 8px;

  .page-total-discount {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .total-price-section {
    font-size: 16px;
    padding: 13px 13px 0;
  }

  .total-dis-price {
    font-size: 16px;
    margin-right: 4px;
    font-weight: bold;
  }

  .total-ori-price {
    font-size: 14px;
    text-decoration: line-through;
    color: #00000085;
  }

  .checkout-section {
    padding: 13px;
  }

  .page-bundle-error-message {
    padding: 0 13px 13px 13px;
  }
}

.page-checkout-button {
  width: 100% !important;
}

.hidden_price {
  display: none;
}

.byb-variant-select-wrapper {
  position: absolute;
  /*top: 59%;*/
  left: 6%;
  right: 6%;
  z-index: 5;
  bottom: 32%;
}

.byb-variant-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #ffffff;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23000' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-color: rgb(245, 245, 245);
  opacity: 0.9;
}

.byb-variant-select:focus {
  border-color: #aaa;
}

.child-card-content-wrapper {
  margin-top: 5px;
}

.bundle-auto-disabled {
  opacity: 0.6;
  /*cursor: not-allowed !important;*/
}

.bundle-remove-locked {
  display: none !important;
}

@media only screen and (max-width: 451px) {
  #pageBundle {
    .child-product-card {
      flex: 1 1 auto;
    }

    .display-fixed-quantity-count {
      display: flex !important;
    }

    .small-image img {
      object-fit: fill !important;
    }
  }

  #pageBundle:not(.byb-ly2) {
    .page-total-discount {
      display: block;
      text-align: center;
    }
  }
}

@media only screen and (max-width: 999px) {
  #pageBundle {
    .child-product-card {
      width: 48%;
    }

    .byb-variant-select-wrapper {
      margin-top: 10px;
    }
  }
}

/* ------ Template-2 ------Start----- */
.byb-ly2 #pageBundleProducts {
  display: flex;
  gap: 10px;
}

.byb-ly2-prd-info {
  display: none;
}

.byb-ly2 #pageBundleProducts .page-bundle-total-price-section {
  display: block;
}

.byb-ly2 #pageBundleProducts .page-total-discount {
  display: block;
}

.byb-ly2 #pageBundleProducts .selected-prod-img {
  /*display: flex;*/
  flex-direction: column;
  /*align-items: center;*/
}

.byb-ly2 #pageBundleProducts .product-info {
  justify-content: space-between;
  gap: 15px;
}

.byb-ly2 #pageBundleProducts .product-qty-container {
  min-height: 45px;
  padding: 12px;
  border-radius: 40px;
}

.byb-ly2 #pageBundleCard {
  width: 75%;
}

.byb-ly2 .page-bundle-total-price-section{
  width: 25%;
}

.byb-ly2 .page-bundle-total-section {
  margin-top: 0;
}

.byb-ly2 .display-fixed-price {
  text-align: center;
}

.byb-ly2 .ess-page-bundle-summary {
  border-top: 1px solid #8d82828a;
}

.byb-ly2 .build-box-placeholder {
  display: flex;
  gap: 5px;
}

.p-info {
  width: 100%;
  display: none;
}

.byb-ly2 .p-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.byb-ly2 .p-title{
  height: 15px;
  background: #ededed66;
  border-radius: 4px;
  border: 1px dashed #aaaaaab5;
}

.byb-ly2 .p-price{
  height: 56px;
  background: #ededed66;
  border-radius: 5px;
  border: 1px dashed #aaaaaab5;
}

.byb-ly2 .build-box-product-wrapper {
  display: flex;
  background: white;
  border-radius: 10px;
  padding: 8px;
  align-items: center;
  gap: 15px;
  position: relative;
}

.byb-ly2 .byb-ly2-prd-info {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.byb-ly2 .page-bundle-total-price-section {
  position: sticky;
  top: 20px;
  height: fit-content;
}

.byb-ly2 .remove-selected-bundle-item {
  top: -4px;
  right: -4px;
  bottom: 0;
  left: auto;
  z-index: 99;
}

@media only screen and (max-width: 451px) {
  .byb-ly2 #pageBundleCard {
    width: 100%;
  }

  .byb-ly2 #pageBundleProducts {
    flex-direction: column;
    gap: 20px;
  }

  .byb-ly2 .byb-ly2-prd-info {
    display: none;
  }

  .byb-ly2 .page-bundle-total-price-section {
    width: 100%;
  }

  .byb-ly2 .p-info {
    display: none;
  }

  .byb-ly2 #pageBundleProducts .selected-prod-img {
    flex-direction: row;
  }

  .byb-ly2 .child-product-card {
    width: 100% !important;
  }

  .byb-ly2 .build-box-product-wrapper {
    padding: 0;
  }

  .byb-ly2 .child-product-header,
  #pageBundleCard[data-page-bundle-type="unlimited_product_bundle"] .child-product-header {
    grid-template-columns: auto 1fr !important;
  }

  .byb-ly2 .byb-variant-select-wrapper {
    margin-top: 10px;
  }
}

@media only screen and (max-width: 999px) {
  .byb-ly2 .child-product-card {
    width: 100% !important;
  }

  .byb-ly2 .bundle-total-price-section {
    width: 120%;
  }

  .byb-ly2 .product-info {
    display: flex;
  }

  .byb-ly2 #pageBundleCard[data-page-bundle-type="unlimited_product_bundle"]
  .product-info {
    display: block;
  }
}

@media only screen and (min-width: 452px) and (max-width: 999px) {
  .byb-ly2 .page-bundle-total-price-section {
    width: 50%;
  }
}
/* ------ Template-2 ------End----- */

.skeleton-loader-dot {
  animation: btDotBounce 1s infinite ease-in-out both;
}

.skeleton-loader-dot:nth-child(1) { animation-delay: -0.32s; }
.skeleton-loader-dot:nth-child(2) { animation-delay: -0.16s; }
.skeleton-loader-dot:nth-child(3) { animation-delay: 0s; }

.skeleton-pulse-bar {
  background: linear-gradient(90deg, #e9e9e9 25%, #e0e0e0 50%, #e9e9e9 75%);
  background-size: 200% 100%;
  animation: btSkeletonPulse 1.5s ease-in-out infinite;
}

@keyframes btDotBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40%           { transform: translateY(-5px); }
}

@keyframes btSkeletonPulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.byb-ly2 .child-content {
  min-width: 0;
}

#pageBundleCard[data-page-bundle-type="fixed_product_bundle"] {

  .product-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
  }
}

.fixed-bundle-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 0px !important;
  flex-wrap: nowrap !important;

  > .byb-variant-select-wrapper,
  > .child-card-content-wrapper {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
  }

  .child-card-values {
    width: 100% !important;
  }

  .byb-variant-select {
    height: 45px !important;
    box-sizing: border-box;
    margin-bottom: 0;
    text-overflow: ellipsis;
  }

  .page-bundle-add-item-btn {
    width: 100% !important;
    height: 45px !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px !important;
    min-height: unset;
    white-space: nowrap;
  }

  .product-qty-container {
    height: 45px !important;
    min-height: unset !important;
    box-sizing: border-box;
    width: 100%;
    padding: 0 5px;
  }

  @media only screen and (max-width: 451px) {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

/* Unlimited picks - Layout 2: variant select on top, Add + Qty in one row below */
.byb-ly2 #pageBundleCard[data-page-bundle-type="unlimited_product_bundle"] .unlimited-variant-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;

  .child-prod-card-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 0;
  }

  .child-card-values {
    flex: 1;

    .page-bundle-add-item-btn {
      width: 100%;
      height: 45px;
      min-height: unset;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
  }

  .product-qty-container {
    flex: 1;
    min-height: unset;
    height: 45px;
    padding: 0 5px;
    border-radius: 40px;
    box-sizing: border-box;
  }
}

/* Fix bundle layout issue on Horizon theme */
[id*="ai_product_bundle_builder_page_bundle"],
[id*="essenify_product_bundles_page_bundle"],
[id*="bundle_staging_page_bundle"] {
  --horizontal-alignment: unset;
  width: 100%;
}

/* This CSS is specifically for shops where the CSS overflow-x: hidden is applied directly to the body in mobile screens. */
@media only screen and (max-width: 767px) {
  body.essenify-byb-page {
    overflow-x: visible !important;
  }
}