/* ================================
   Loop Bundle Page Custom Styling
   WiDEYE Shower Bar Subscription
================================ */


/* --------------------------------
   1. Hide unwanted Loop elements
-------------------------------- */

.loop-bundle-image-container,
.loop-frequency-size-selector,
.loop-bundle-select-product-title-container,
.loop-category-list-container,
#shopify-chat {
  display: none !important;
}


/* --------------------------------
   2. Bundle intro layout
-------------------------------- */

.loop-bundle-image-container-wrapper {
  align-items: flex-start !important;
  text-align: left !important;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px 48px !important;
}

.loop-bundle-title-wrapper,
.loop-bundle-description {
  width: 100%;
  max-width: 680px;
}

.loop-bundle-title,
.loop-bundle-description,
.loop-bundle-description p {
  text-align: left !important;
}


/* --------------------------------
   3. Category card styling
-------------------------------- */

.loop-category-container-section {
  border: 1px solid #e8e8e8 !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden;
}


/* --------------------------------
   4. Product card alignment
-------------------------------- */

.loop-card-body {
  text-align: left !important;
}

.loop-product-card-description-body {
  align-items: flex-start !important;
}

.loop-product-title,
.loop-product-description,
.loop-display-product-price,
.loop-discounted-price {
  width: 100%;
  text-align: left !important;
}

/* Product title */
.loop-bundle-product-card-title {
  width: 100%;
  text-align: left !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  margin-bottom: 2px !important;
}


/* --------------------------------
   5. Product benefit + scent description
-------------------------------- */

.wideye-product-message {
  width: 100%;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
  color: #666666;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
}

.wideye-product-message strong {
  color: inherit !important;
  font-weight: 600 !important;
}

.wideye-product-message br + br {
  display: block;
  content: "";
  margin-top: 10px;
}


/* --------------------------------
   6. Button styling
-------------------------------- */

.loop-btn-add-product:hover {
  background-color: #2b2b2b !important;
  border-color: #2b2b2b !important;
  color: #ffffff !important;
}


/* --------------------------------
   7. Mobile product image + text alignment
-------------------------------- */

@media (max-width: 768px) {

  /* Shared mobile content width */
  .loop-bundle-product-card {
    --wideye-card-inset: 6px;
  }

  /* Keep image, text and button aligned */
  .loop-card-body,
  .loop-body-footer-wrapper {
    padding-left: var(--wideye-card-inset) !important;
    padding-right: var(--wideye-card-inset) !important;
    box-sizing: border-box !important;
  }

  .loop-bundle-product-image-container {
    width: auto !important;
    margin-left: var(--wideye-card-inset) !important;
    margin-right: var(--wideye-card-inset) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .loop-bundle-product-image-container .loop-image-product-lg {
    width: 100% !important;
    max-width: 100% !important;
    height: 250px !important;
    max-height: 250px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .loop-bundle-product-image-container .loop-image-product-lg img {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }
}