/* Fix search & filter bar hidden behind header */
.shop-header {
  position: relative;
  z-index: 1050; /* higher than navbar */
  background: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #eee;
}

/* Search bar styling */
.shop-search-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
}

.shop-search-bar input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.shop-search-bar .search-btn {
  background: #febd69;
  border: none;
  color: #111;
  padding: 8px 15px;
  border-radius: 4px;
  font-weight: 600;
}

.category-select {
  color: black !important;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* Filter button */
.filter-btn {
  white-space: nowrap;
}

/* Remove or adjust this line */
/* This was causing the carousel to be pushed up behind the header */
/* The carousel will now start directly below the fixed header */
body {
background: transparent !important;
    /* padding-top: 70px !important; */ 
    /* The header itself should handle its own height/positioning. */
    /* If your header is fixed, then add padding-top to the *first* content element 
       that is NOT the carousel, or to the body/html but *after* the carousel's offset. */
    /* For this setup, we'll manage the space with `main-content-above-carousel` margin-top */
}

/* left filter compact toggle box */
.filter-toggle-box {
  cursor: pointer;
  background: #a2d9fd;
  border: 1px solid #eee;
}


/* keep main product grid full width when collapsed */
@media (min-width: 992px) {
  .col-lg-2 { max-width: 250px; flex: 0 0 200px; } /* approx 2-col width */
  .col-lg-10 { flex: 1 0 auto; }
}


/* Custom CSS for Background Carousel */
.background-carousel-wrapper {
    position: fixed;; 
    top: 0; 
    left: 0;
    width: 100%;
    height: 400px; /* This height must match the image height */
    z-index: -1; /* Send it behind other content */
    overflow: hidden; /* Hide any overflow if images are slightly larger */
    
    /* This margin-top is CRUCIAL. It moves the carousel *below* your fixed header. */
    /* You NEED to replace '60px' with the ACTUAL height of your fixed header. */
    /* Use developer tools to measure your header's height if uncertain. */
    margin-top: 60px !important; /* Example: If your header is 60px tall */
}

/* Ensure images fill the wrapper */
.background-carousel-wrapper .carousel-item img {
    height: 400px; /* Match wrapper height */
    object-fit: cover;
    width: 100%; /* Ensure it spans full width */
}

/* Optional: Dimming overlay for better text contrast if content overlaps the image */
.carousel-dim-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Adjust dimming as needed (0.3 for 30% black overlay) */
    z-index: 1; /* Above image, below indicators/controls */
}

/* 
This is the CRUCIAL change to pull the main content upwards, 
making it overlay the carousel, starting right below the header.
*/
.main-content-above-carousel {
    /* This margin-top should offset the carousel's height, adjusted by header height. */
    /* Calculation: -(carousel_height + header_height - desired_overlap) */
    /* Example: -(400px + 60px - 20px overlap) = -440px */
    /* If you want the content to start at header_height + 20px down from top of page */
    margin-top: 340px; /* Adjust this value. Starts content 20px into carousel */
                        /* If carousel is 400px, header is 60px. Total 460px.
                           -440px means content starts 20px down from where the carousel *begins* (after the header).
                           This means content starts at (60px header + 20px offset) = 80px from top of page. */

    position: relative; /* Give it a higher z-index than carousel */
    z-index: 1; /* Make sure this is above the carousel */
    /* Remove background-color here if you want content cards to have their own background */
}

/* Apply background and shadow directly to the aside and main elements for clear visibility */
.main-content-above-carousel aside.col-12.col-lg-2,
.main-content-above-carousel main.col-12.col-lg-10 {
    /* background-color: #fff; */
    background-color: transparent;
    border-radius: 8px; /* Optional: adds rounded corners */
    padding-top: 20px; /* Add some top padding inside the content for aesthetics */
    padding-bottom: 20px; /* Ensure space at the bottom */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Optional: subtle shadow */
    margin-bottom: 20px; /* Space below if content is short */
}

/* Adjust margins if needed for the top content within the main content */
.main-content-above-carousel main.col-12.col-lg-10 .results-bar {
    margin-top: 0; /* Reset margin top if it was added for spacing before */
  /* background: transparent !important; */
/* background-color: rgba(46, 93, 248, 0.993) !important; */
/* color: white !important; */
}