/* Add custom CSS styles below */ 
body {
    background-color: #ece8eb !important;
}
/* Make only the FIRST banner section full width */
main#main-content > section.s-block.s-block--fixed-banner.wide-placeholder:first-of-type .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Overlap header on banner for desktop only on index page */
@media (min-width: 992px) {
    body.index header.store-header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background-color: transparent !important;
        border-bottom: none !important;
    }

    /* Ensure the first section starts at the top */
    body.index main#main-content {
        padding-top: 0 !important;
    }
/* Apply transparent background color #6b3950 to main navigation */
div#mainnav
{
    background-color: rgba(107, 57, 80, 0.8) !important;
    background-image: none !important;
    border: none !important;
}
  div#mainnav .inner{
    background-color: transparent;
  }
.top-navbar{
background: #3F182F;
  color: white;
}
    /* Make top-level text and icons white */
    div#mainnav .inner.bg-inherit.w-full .container a, 
    div#mainnav .inner.bg-inherit.w-full .container i,
    div#mainnav .inner.bg-inherit.w-full .container .sicon-menu {
        color: #ffffff !important;
    }

    /* Keep submenu text colors original */
    div#mainnav .inner.bg-inherit.w-full .container ul.sub-menu a,
    div#mainnav .inner.bg-inherit.w-full .container .dropdown-menu a {
        color: initial !important; /* Or your specific original color like #231f1e */
    }
  /* Remove the gap between the header and the first banner */
body.index main#main-content > section.s-block:first-of-type {
    margin-top: 0 !important;
}
  .index .s-cart-summary-total
{
  color: white;
}
  .index .s-user-menu-login-btn svg{
    fill: white;
  }
  .top-navbar input.s-search-input::placeholder {
    color: white !important;
    opacity: 1 !important; /* Ensures the color isn't faded */
}
  
}
section.s-block.s-block--bundle-categories-showcase {
    margin-top: 0 !important;
}

/* Removes the 64px white space above and the horizontal scroll */
main#main-content > section.s-block.s-block--bundle-categories-showcase.ai-style-change-1 {
    margin-top: 0 !important;
    overflow-x: hidden !important;
}
main#main-content > section:nth-of-type(10) {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: none !important;
}

main#main-content > section:nth-of-type(10) .container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
}
.index footer {
    margin-top: 0 !important;
}
/* Target the footer specifically to set the background image */
footer.store-footer {
    background-image: url("https://i.ibb.co/r20zyyfX/Slide-16-9-5.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
}

/* Ensure all inner containers are transparent so the image is visible */
footer.store-footer .store-footer__inner,
footer.store-footer .container {
    background-color: transparent !important;
}
span.text-sm.copyright-text p.text-gray-400.mb-2\.5.md\:mb-0 {
    color: white !important;
}
.fixed-header .inner {
  background: #3f182f !important;
}
/* Target the container and all children inside the components */
.fixed-header .flex.items-center.justify-end.my-2\.5 salla-user-menu,
.fixed-header .flex.items-center.justify-end.my-2\.5 salla-cart-summary,
.fixed-header .flex.items-center.justify-end.my-2\.5 salla-user-menu *,
.fixed-header .flex.items-center.justify-end.my-2\.5 salla-cart-summary * {
    color: white !important;
    fill: white !important; /* For SVG icons */
    --salla-primary-color: white !important;
    --salla-secondary-color: white !important;
    --main-text-color: white !important;
}

/* Force icons and SVG paths specifically */
.fixed-header .flex.items-center.justify-end.my-2\.5 i, 
.fixed-header .flex.items-center.justify-end.my-2\.5 svg,
.fixed-header .flex.items-center.justify-end.my-2\.5 svg path {
    color: white !important;
    fill: white !important;
    stroke: white !important;
}