/* -------------------------------------
   Sticky Header for Storefront
------------------------------------- */
header#masthead.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    background: #faf3ee !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

/* Fix parent container issues for sticky */
/*
body, html, #page, .site {
    overflow: visible !important;
    transform: none !important;
    perspective: none !important;
    filter: none !important;
} */

/* Make sure parent containers allow sticky header */
#page, .site {
    overflow: visible;
    position: relative;
}

/* Optional smooth header transition */
header#masthead.site-header {
    transition: all 0.3s ease;
}

/* -------------------------------------
   Remove extra space below sticky header
------------------------------------- */

/* Remove margin/padding from header and following navigation area */
header#masthead.site-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove top spacing on the section that follows the header */
.storefront-primary-navigation,
#content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* (Optional) If a visual gap still shows, align navigation snugly under header */
.storefront-primary-navigation {
    position: relative;
    top: 0;
}

/* -------------------------------------
   Parallax Banner
------------------------------------- */
/* Target common hero/banner sections */
.custom-banner,
.storefront-hero,
.hero-banner,
.wp-block-cover,
.page-hero,
.banner {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 550px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Inner content layering */
.custom-banner .hero-inner,
.storefront-hero .hero-inner {
    position: relative;
    z-index: 2;
}

/* Ensure banner is prepared for JS parallax */
.custom-banner {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  min-height: 800px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* If banner contains an <img>, make sure it fills the container (JS also applies these styles) */
.custom-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}