/* ULTIMATE STICKY PANEL FIX - COMPREHENSIVE SOLUTION */
/* Merged from sticky-panel-fix.css and sticky-ultimate-fix.css for efficiency */

/* Nuclear-level sticky positioning - overrides everything */
@media (min-width: 1024px) {
  .sticky,
  div.sticky,
  .sticky.top-8,
  div.sticky.top-8,
  *[class*="sticky"],
  .sticky.at-css-boundary,
  .sticky.is-stuck-fixed,
  .sticky.smart-positioned,
  .sticky.approaching-boundary {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 2rem !important;
    left: auto !important;
    width: auto !important;
    z-index: 999 !important;
    
    /* Remove all properties that can break sticky */
    transform: none !important;
    contain: none !important;
    will-change: auto !important;
    isolation: auto !important;
    perspective: none !important;
    transform-style: flat !important;
    
    /* Ensure proper dimensions */
    display: block !important;
    min-height: 0 !important;
    max-height: none !important;
    
    /* Remove problematic overflow */
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    
    /* Remove animations/transitions that can interfere */
    transition: none !important;
    animation: none !important;
  }
  
  /* Remove transform-based animations */
  .sticky * {
    will-change: auto !important;
  }
  
  /* Fix ALL parent containers that could break sticky positioning */
  html,
  body,
  main,
  .grid,
  .grid-cols-1,
  .lg\\:grid-cols-3,
  .lg\\:col-span-1,
  .lg\\:col-span-2,
  .gap-8,
  .max-w-5xl.mx-auto.px-4,
  .purchase section,
  .purchase main,
  .purchase .max-w-5xl {
    overflow: visible !important;
    contain: none !important;
    transform-style: flat !important;
    perspective: none !important;
    isolation: auto !important;
    transform: none !important;
  }
  
  /* Specific fix for the purchase page grid layout */
  .grid.grid-cols-1.lg\\:grid-cols-3,
  .grid.grid-cols-1.lg\\:grid-cols-3.gap-8 {
    overflow: visible !important;
    contain: none !important;
    transform: none !important;
    isolation: auto !important;
    position: relative !important;
    display: grid !important;
  }
  
  /* Ensure parent containers and column don't break sticky positioning */
  .lg\\:col-span-1 {
    overflow: visible !important;
    contain: none !important;
    transform: none !important;
    will-change: auto !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Fix any wrapper divs around the sticky panel */
  .lg\\:col-span-1 > div,
  .lg\\:col-span-1 > div > div {
    overflow: visible !important;
    contain: none !important;
    transform: none !important;
  }
  
  /* Ensure FAQ section doesn't interfere */
  .faq-section {
    position: relative !important;
    z-index: 1 !important;
    contain: none !important;
    transform: none !important;
  }
}

/* Mobile - disable sticky positioning */
@media (max-width: 1023px) {
  .sticky,
  div.sticky,
  *[class*="sticky"] {
    position: static !important;
    top: auto !important;
  }
}