/* Add custom CSS styles below */ 
/* Ensure the banner content/image inside also fills the space */
/* Make the fixed banner section container full width */
section.s-block--fixed-banner.wide-placeholder .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure the banner image/content fills the width */
section.s-block--fixed-banner.wide-placeholder .container img,
section.s-block--fixed-banner.wide-placeholder .container a {
    width: 100% !important;
    display: block !important;
    border-radius: 0 !important;
}
/* Only target the specific 5th section in the main content */
main#main-content > section:nth-child(5).s-block--fixed-banner.wide-placeholder {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Ensure the image inside this specific section is styled */
main#main-content > section:nth-child(5).s-block--fixed-banner.wide-placeholder img {
    border-radius: 15px !important;
    width: 100% !important;
}

/* Ensure the internal container for this section doesn't expand it back */
main#main-content > section:nth-child(5).s-block--fixed-banner.wide-placeholder .container {
    max-width: 100% !important;
    width: 100% !important;
}

.s-block--bundle-hero-slider{
  margin-top: 0px !important; 
}

/* Apply to ALL product cards across the entire store */
.s-product-card-entry, 
.s-product-card-vertical {
    background-color: transparent !important;
    background: transparent !important;
    border: 2px solid #c75637 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
}

/* Ensure all internal parts of the cards are also transparent */
.s-product-card-entry *, 
.s-product-card-vertical * {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Add a hover effect for all cards */
.s-product-card-entry:hover, 
.s-product-card-vertical:hover {
    transform: translateY(-5px) !important;
    border-color: #a8472d !important;
}
.s-product-card-content-footer .s-button-primary-outline:hover{
  background-color: #c75637 !important; 
}
/* Apply background to the footer and clear internal backgrounds */
footer.store-footer,
footer.store-footer .store-footer__inner,
footer.store-footer .container {
    background-color: #a3a891 !important;
    background-image: none !important;
    border: none !important;
}
footer.store-footer .max-w-sm.leading-6.mb-6 {
    color: #ffffff !important;
}
/* Force all text elements and icons to be white */
footer.store-footer a, 
footer.store-footer p, 
footer.store-footer span, 
footer.store-footer h1, 
footer.store-footer h2, 
footer.store-footer h3, 
footer.store-footer h4, 
footer.store-footer li,
footer.store-footer i,
footer.store-footer .sicon,
footer.store-footer svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Ensure sub-footer (copyright bar) also matches if needed */
footer.store-footer > div {
    background-color: transparent !important;
}
[data-testid="store-home-fixed-products"] .s-block__title{
  display: none !important;
}
/*make header at the middle start*/
/* Only apply centering on Desktop screens (wider than 1024px) */
@media (min-width: 1024px) {
    
    /* 1. Ensure the nav container spreads across the bar */
    #mainnav .container > div.flex {
        justify-content: space-between !important;
    }

    /* 2. Allow the menu area to fill the middle space */
    #mainnav .container > div.flex > div:first-child {
        display: flex !important;
        flex: 1 !important;
        align-items: center !important;
    }

    /* 3. Center the menu links inside that space */
    #mainnav custom-main-menu {
        flex-grow: 1 !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* 4. Keep the logo stable on the side */
    #mainnav .navbar-brand {
        flex-shrink: 0 !important;
    }
}
/*make header at the middle end*/