/* =======================================================
   style-override.css — LOAD AFTER your main style.css
   Purpose: one-scrollbar + stacking fixes + shelves/CTA visibility
   ======================================================= */

/* --- Document scrolling must be owned by the page --- */
html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  
  /* --- DO NOT hide the browser scrollbar --- */
  html { scrollbar-width: auto !important; }
  html::-webkit-scrollbar { width: 12px !important; height: 12px !important; }
  
  /* --- Decorative blocks sit behind content, and their glows are clipped --- */
  .hero,
  .social-hud,
  .platform-strip,
  .platform-marquee,
  .shelf {
    position: relative !important;
    z-index: 0 !important;
    overflow: clip !important;
  }
  
  /* --- Normal sections & footer always above --- */
  section,
  .section,
  footer {
    position: relative !important;
    isolation: isolate !important;      /* own stacking context */
    z-index: 100 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
  }
  
  /* Confine hero pseudo-layers behind everything */
  .hero.hero-img::before,
  .hero.hero-img::after {
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }
  
  /* =========================
     BOOKS • COVER ROWS (shelves)
     ========================= */
  /* Ensure the shelf area always has height, even if images haven’t painted yet */
  .shelf { min-height: 260px !important; }
  .shelf-track {
    position: relative !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 140px !important;       /* consistent thumb width */
    gap: 12px !important;
    overflow-x: hidden !important;              /* arrows/JS handle scrolling */
    overflow-y: hidden !important;
    min-height: 220px !important;               /* guarantees visible track */
    z-index: 0 !important;
  }
  .shelf .cover { display: block !important; }
  .shelf .cover img {
    display: block !important;
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }
  
  /* Hover popover must float and never affect layout */
  #coverPopover {
    position: fixed !important;
    pointer-events: none !important;
    z-index: 999 !important;
  }
  
  /* =========================
     FINAL CTA / BOTTOM SECTIONS
     ========================= */
  /* Raise the very last content sections (including a CTA block) */
  .section:last-of-type,
  section:last-of-type,
  footer {
    z-index: 1000 !important;                     /* above any residual overlays */
  }
  
  /* If you named your CTA something like .final-cta / .cta-section, lift it */
  .final-cta, .cta-final, .cta-section, .section-cta {
    position: relative !important;
    isolation: isolate !important;
    z-index: 1200 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* =========================
     SAFETY / NEUTRALIZERS
     ========================= */
  /* Neutralize inline styles that may create full-page overlays/scrollers */
  *[style*="height:100vh"], *[style*="height: 100vh"] { max-height: 100% !important; }
  *[style*="overflow-y:auto"], *[style*="overflow-y: scroll"] { overflow-y: visible !important; }
  
  /* Don’t let heavy shadows create 1–2px phantom scrollbars */
  .card-glass, .card, .card-lift { overflow: clip !important; }
  
  /* Mobile niceties (no visual change on desktop) */
  @media (max-width: 992px){
    .hero-right, .hero-orbit-wrap, .hero-social-caption { display: none !important; }
    .row.g-3, .row.g-4 { row-gap: 1rem !important; }
  }
  @media (max-width: 576px){
    .btn, .form-control, .input-group > * { width: 100% !important; }
    .btn{ padding: .7rem 1rem !important; }
    .shelf .cover img{ height: 160px !important; }
  }