/* ============================================================================
   GLOBAL STICKY FIX FOR PRODUCT PAGES
   This file ensures the image carousel and shipping sections remain sticky
   as users scroll through the product page on desktop screens (1024px+)
   ============================================================================ */

/* CRITICAL FIXES: Remove overflow that breaks sticky positioning */
#ccf-isolated-container {
  overflow: visible !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

#ccf-isolated-container .ccf-body-wrapper {
  overflow: visible !important;
}

#ccf-isolated-container .ccf-main-layout-container {
  overflow: visible !important;
}

#ccf-isolated-container .ccf-form-options-container {
  overflow: visible !important;
}

/* Remove max-height constraints that could clip sticky elements */
#ccf-isolated-container .ccf-product-image-container,
#ccf-isolated-container .ccf-price-shipping-container {
  max-height: none !important;
  overflow: visible !important;
}

/* 
   DESKTOP STICKY POSITIONING (1024px and up)
   Make both the image carousel and the price/shipping section stick to the viewport
*/
@media (min-width: 1024px) {
  /* Ensure grid layout for proper sticky context */
  #ccf-isolated-container .ccf-main-layout-container {
    display: grid !important;
    grid-template-columns: auto 380px 380px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 1rem !important;
  }

  /* Image carousel - STICKY */
  #ccf-isolated-container .ccf-product-image-container {
    position: sticky !important;
    top: 112px !important;
    z-index: 5 !important;
    align-self: flex-start !important;
  }

  /* Price/shipping - STICKY */
  #ccf-isolated-container .ccf-price-shipping-container {
    position: sticky !important;
    top: 112px !important;
    z-index: 5 !important;
    align-self: flex-start !important;
  }
}

/* MOBILE AND TABLET: Disable sticky, use normal flow */
@media (max-width: 1023px) {
  #ccf-isolated-container .ccf-product-image-container,
  #ccf-isolated-container .ccf-price-shipping-container {
    position: relative !important;
  }
}