/* Add custom CSS styles below */ 
/* Apply the background color to the root element */
html {
    background-color: #fff6e8 !important;
}

/* Ensure the body doesn't block the html background */
body {
    background-color: transparent !important;
}
@media (min-width: 992px) {
    .s-block--bundle-categories-cards {
        position: relative;
    }

    .s-block--bundle-categories-cards::before {
        content: "";
        background-image: url('https://i.ibb.co/zLFM0Zj/XMLID-46945.png');
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        width: 150px; /* Adjust the width as needed */
        height: 150px; /* Adjust the height as needed */
        z-index: 10;
        pointer-events: none; /* Allows users to click elements underneath the image */
    }
}
/* Remove background from the banner image */
main#main-content section:nth-child(4) a.banner img {
    background-color: transparent !important;
    background-image: none !important;
}

/* Ensure the container doesn't force items to stretch */
main#main-content section:nth-child(4) .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}
/* Target the question and answer background when the item is open */
.s-block-trust-faq-item.open .s-block-trust-faq-question,
.s-block-trust-faq-item.open .s-block-trust-faq-answer {
    background-color: #7B7C5C !important;
}

/* Target the FIRST section of this class and its container */
section.s-block--fixed-banner:nth-of-type(1),
section.s-block--fixed-banner:nth-of-type(1) .container
,section.s-block--fixed-banner:nth-of-type(4),
section.s-block--fixed-banner:nth-of-type(4) .container
,
section.s-block--fixed-banner:nth-of-type(6),
section.s-block--fixed-banner:nth-of-type(6) .container
,section.s-block--fixed-banner:nth-of-type(8),
section.s-block--fixed-banner:nth-of-type(8) .container
{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure the image inside this specific 1st banner fills the width */
section.s-block--fixed-banner:nth-of-type(1) img
,section.s-block--fixed-banner:nth-of-type(4) img
,section.s-block--fixed-banner:nth-of-type(6) img
,section.s-block--fixed-banner:nth-of-type(8) img
{
    width: 100% !important;
    object-fit: cover !important;
}


@media (min-width: 1024px) {
  .index .s-cart-summary-total{
  color: white;
}
.index .s-user-menu-login-btn svg{
  fill: white;
}
    /* Only on home page (index) and desktop */
    body.index #mainnav {
        position: absolute !important;
        top: 40px; /* Position below top-navbar */
        left: 0;
        right: 0;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.4) !important; /* Transparent black ONLY for mainnav */
    }

    /* Target the first s-block--fixed-banner to move it up */
    body.index .s-block.s-block--fixed-banner:nth-of-type(1) {
        margin-top: -8px !important; /* Move banner up to overlap mainnav */
        position: relative;
        z-index: 5;
    }

    /* Main Header text and icons white, but NOT submenus */
    body.index #mainnav a:not(.sub-menu a),
    body.index #mainnav span:not(.sub-menu span),
    body.index #mainnav i {
        color: #FFFFFF !important;
    }

    /* Ensure specific main menu links and buttons are white */
    body.index #mainnav .main-menu > li > a,
    body.index #mainnav .header-btn,
    body.index #mainnav .s-cart-summary-wrapper i {
        color: #FFFFFF !important;
    }
}
/* Change top navbar background and text color */
.top-navbar {
    background-color: #7B7C5C !important;
}

.top-navbar, 
.top-navbar a, 
.top-navbar span, 
.top-navbar p, 
.top-navbar i {
    color: #FFFFFF !important;
}
/* Footer Background and Text Styles */
footer.store-footer {
    background-image: url("https://i.ibb.co/rfzbS72j/Slide-16-9-6-5.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
}

/* Make inner section transparent */
footer.store-footer .store-footer__inner {
    background-color: transparent !important;
    background-image: none !important;
}

/* Make all text, links, and icons white */
footer.store-footer,
footer.store-footer p,
footer.store-footer span,
footer.store-footer a,
footer.store-footer h1,
footer.store-footer h2,
footer.store-footer h3,
footer.store-footer h4,
footer.store-footer li,
footer.store-footer i {
    color: #FFFFFF !important;
}

/* Optional: Dark overlay to make text more readable */
footer.store-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* Adjust opacity if needed */
    z-index: 1;
}

/* Keep content above the overlay */
footer.store-footer > * {
    position: relative;
    z-index: 2;
}
/* Container for the logo */
footer a.flex.items-center.m-0 {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 110px;
  text-decoration: none;
}

/* The logo element itself */
footer a.flex.items-center.m-0 h3 {
  /* Remove text */
  font-size: 0;
  color: transparent;
  
  /* Apply Logo Image */
  background-image: url("https://i.ibb.co/ksFz6vtq/202606241119-1-1-1.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  /* Dimensions & Spacing */
  width: 180px;
  height: 100px;
  margin-bottom: 12px;
  display: block;
  
  /* Curved Borders */
  border-radius: 20px;
}