/* =========================================================
   FINAL AUTHORITATIVE STICKY SYSTEM
   (Overrides ALL sticky-related rules in styles.css)
   Desktop + Mobile unified: header height = 60px
   ========================================================= */

/* =========================================================
   GALLERY PAGE — TABS (Primary Sticky)
   ========================================================= */

body.gallery-page .gallery-tabs-wrapper {
  position: sticky !important;
  top: 60px !important; /* fixed header height */
  z-index: 9900 !important;
  background: rgba(10, 13, 16, 0.94) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  margin: 0 !important;
  padding: 0.25rem 0 !important;
}

/* Tabs row (visual only, no sticky) */
body.gallery-page .gallery-tabs {
  position: static !important;
  margin: 0.25rem auto 0.65rem !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.7rem !important;
}

/* Tab chips (your glass-milky style) */
body.gallery-page .gallery-tabs .tab {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
  padding: 0.35rem 0.9rem !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

body.gallery-page .gallery-tabs .tab:hover,
body.gallery-page .gallery-tabs .tab.active {
  background: rgba(255, 255, 255, 0.20) !important;
  border-color: rgba(255, 255, 255, 0.60) !important;
}

/* =========================================================
   GALLERY PAGE — ADVANCED SEARCH BAR
   ========================================================= */

body.gallery-page .advanced-bar {
  position: sticky !important;
  top: calc(60px + 44px) !important; /* header + tabs approx */
  z-index: 9890 !important;
  background: rgba(10, 13, 16, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0.35rem 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.18) !important;
}

/* =========================================================
   GALLERY PAGE — FILTERS PANEL
   ========================================================= */

body.gallery-page .gallery-filters {
  position: sticky !important;
  top: calc(60px + 44px + 0px) !important; /* header + tabs + adv */
  z-index: 9880 !important;
  background: linear-gradient(
    to bottom,
    rgba(10, 13, 16, 0.94),
    rgba(10, 13, 16, 0.80)
  ) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-bottom: 0.4rem !important;
}

/* Force filters to behave when JS toggles display:block */
body.gallery-page .gallery-filters[style*="display: block"] {
  display: flex !important;
}

/* =========================================================
   ARTWORK PAGE — NAV BUTTONS (← Back | Next →)
   ========================================================= */

body.artwork-page .nav-buttons,
body.artwork-page .nav-buttons-fixed {
  position: sticky !important;
  top: 60px !important; /* header height */
  z-index: 9900 !important;
  background: rgba(10, 13, 16, 0.94) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  display: flex !important;
  justify-content: center !important;
  gap: 0.7rem !important;
  padding: 0.5rem 0.7rem !important;
  margin: 0 !important;
}

/* Button appearance (matches tabs/chips) */
body.artwork-page .nav-buttons a,
body.artwork-page .nav-buttons button,
body.artwork-page .nav-buttons-fixed a,
body.artwork-page .nav-buttons-fixed button {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
  padding: 0.35rem 0.9rem !important;
  border-radius: 999px !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  transition: all 0.25s ease !important;
}

body.artwork-page .nav-buttons a:hover,
body.artwork-page .nav-buttons button:hover,
body.artwork-page .nav-buttons-fixed a:hover,
body.artwork-page .nav-buttons-fixed button:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.60) !important;
  color: #fff !important;
}

/* =========================================================
   MOBILE — if header also 60px, we keep the same system
   ========================================================= */

@media (max-width: 768px) {
  /* If the mobile header ends up slightly smaller visually,
     these offsets still align perfectly */
  body.gallery-page .gallery-tabs-wrapper,
  body.artwork-page .nav-buttons,
  body.artwork-page .nav-buttons-fixed {
    top: 60px !important;
  }
}

/* Header always above hero */
.site-header,
.header,
.header-inner {
  z-index: 10000 !important;
  position: relative;
}

/* Sticky gallery + artwork UI always above hero */
.gallery-tabs-wrapper,
.advanced-bar,
.gallery-filters,
.nav-buttons,
.nav-buttons-fixed {
  z-index: 9999 !important;
  position: sticky !important;
  pointer-events: auto !important;
}

/* =====================================================
   FIX STICKY (correct version)
   - keep hero fixed behind everything
   - keep header fixed on top
   - allow gallery/artwork sticky bars to work
   ===================================================== */

/* 1. Ensure sticky layers sit above hero (z-index:-2) but below header */
.gallery-tabs-wrapper,
.advanced-bar,
.gallery-filters,
.nav-buttons,
.nav-buttons-fixed {
  z-index: 5000 !important; /* safely above hero, safely below header */
  position: sticky !important;
  top: 60px !important;
}

/* 2. NO CHANGES to hero position, only ensure it's behind sticky */
body.gallery-page .hero,
body.gallery-page .hero-page,
body.artwork-page .hero,
body.artwork-page .hero-page {
  z-index: -2 !important; /* restore original, correct value */
}

/* ===== REMOVE DARK BANDS + keep clickability ===== */
body.gallery-page .gallery-tabs-wrapper,
body.gallery-page .advanced-bar,
body.gallery-page .gallery-filters,
body.artwork-page .nav-buttons,
body.artwork-page .nav-buttons-fixed {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: auto !important; /* <-- THIS SAVES YOUR FILTER BAR */
}