/* Add custom CSS styles below */ 
.bg-origin-content {
    background-origin: content-box;
    border-radius: 10px;
    }
    
    img {
    max-width: 100%;
    margin-right: 10px;
}

.s-count-down-item-label {
    color: #fffff;!important
    
    }
    
    .text-2xl {
   
    margin-left: 5px;
    margin-top: 5px;
    }
    
.shadow-sm {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--header-main-color);
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth hide/show */
}

.shadow-sm.hidden {
    transform: translateY(-100%); /* Moves the header out of view */
    opacity: 0; /* Optional: Makes it invisible */
}

    .lg\:py-4 {
        padding-top: 1px;
        padding-bottom: 1px;
    }
}

/* Ensure the grid rows have a consistent height to align product cards */
/* Adjust the selector if necessary based on your HTML structure */
.s-products-list-wrapper.s-products-list-vertical-cards {
  display: grid; /* Keep existing display */
  /* Keep or adjust grid-template-columns as needed for your layout */
  /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
  grid-auto-rows: 600px; /* Set a fixed height for grid rows. ADJUST THIS VALUE! */
  /* Ensure content within grid items is aligned if needed, e.g., align-items: start; */
  /* Add other existing styles for this wrapper */
}

/* Target the image container within each product card */
/* Using a more general selector in case a.ai-style-change-1 is inconsistent */
.s-products-list-wrapper.s-products-list-vertical-cards custom-salla-product-card img {
  display: block !important; /* Ensures block behavior */
  width: 100% !important; /* Make the image fill the width of its container */
  height: 100% !important; /* Make the image fill the height of its container */
  object-fit: cover !important; /* Crop the image to cover the container while maintaining aspect ratio */
  /* Potentially set a min-height or max-height if needed */
}
/* === Remove default spacing and background === */
body, .main-wrapper, .container, .page-content {
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* === Transparent Header Sections === */
header,
.site-header,
.header,
.header-wrapper,
.navbar,
nav {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 9999;
}

/* === Transparent background for navigation row === */
.header-wrapper > div,
.site-header > div,
.navbar > div,
nav > div {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* === Force the banner to the top === */
.banner,
.hero-slider,
.slider,
.main-slider,
.slider-wrapper,
.home-hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 600px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* === Make text and icons readable (white on dark) === */
header a,
nav a,
.navbar a,
.header-wrapper a {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.header-wrapper svg,
.header-wrapper .icon {
  filter: brightness(1000%) !important;
}

/* === Responsive adjustments for mobile === */
@media (max-width: 768px) {
  .banner {
    height: 400px;
  }
}