/* Add custom CSS styles below */ 
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
* {
  font-family: 'Cairo', sans-serif !important;
}
/* 2. Define Theme Variables */
:root {
  
  /* Brand Colors */
  --color-primary: #8F6439;
  --color-primary-dark: #6e4d2c;
  --color-primary-light: #b38d66;
  --color-primary-reverse: #ffffff;
  --main-text-color: #8F6439;
}
.top-navbar {
    background-image: linear-gradient(to right, #BA8F63, #8F6439) !important;
    background-color: transparent !important;
}
html {
    background-image: url("https://i.ibb.co/kggwYQWb/home-1.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
}

body {
    background-color: transparent !important;
}
/* Targeting the specific title */
@media (min-width: 1024px) {
  .category-card:nth-child(3) .category-title {
    margin-top: -31px !important;
  }
}
.banner--fixed img {
    background-color: transparent !important;
    background-image: none !important;
}

/* Select the specific section by its order (7th child of main) */
#main-content > section.s-block.s-block--fixed-banner:nth-child(7) {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
}

/* Ensure the inner container also expands to full width */
#main-content > section.s-block.s-block--fixed-banner:nth-child(7) .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}
.index custom-salla-product-card {
    background-color: #e0d2b7 !important;
    overflow: hidden; /* Ensures background doesn't bleed out of rounded corners */
}

/* Target the 8th child to make it full width and remove spacing */
#main-content > section.s-block.s-block--fixed-banner:nth-child(8) {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin-top: 0 !important; /* Removes top margin */
    margin-bottom: 0 !important; /* Removes bottom margin */
}

/* Ensure the inner container also expands to full width */
#main-content > section.s-block.s-block--fixed-banner:nth-child(8) .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}
@media (min-width: 1024px) {
    /* 1. MAKE THE FIRST BANNER FULL SCREEN & OVERLAP NAV */
    body.index #main-content > section.s-block.s-block--fixed-banner:nth-of-type(1) {
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        max-width: 100vw !important;
        
        /* Pulls the banner up to sit behind the main nav */
        /* Adjusted to -84px to perfectly overlap the main nav height */
        margin-top: -84px !important; 
        z-index: 1 !important;
    }

    /* Ensure the inner container of the banner is also full width */
    body.index #main-content > section.s-block.s-block--fixed-banner:nth-of-type(1) .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* 2. TRANSPARENT MAIN NAVIGATION */
    body.index #mainnav, 
    body.index #mainnav .inner {
        background-color: #00000010 !important;
        background-image: none !important;
        border: none !important;
        box-shadow: none !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* 3. WHITE TEXT & ICONS (EXCLUDING SUBMENUS) */
    /* This targets links and spans in the main nav that are NOT inside a submenu */
    body.index #mainnav a:not([class*="sub-menu"] *):not(.submenu *),
    body.index #mainnav span:not([class*="sub-menu"] *):not(.submenu *),
    body.index #mainnav i,
    body.index #mainnav svg {
        color: #ffffff !important;
        fill: #ffffff !important;
    }

    /* 4. WHITE LOGO */
    /* Uses a filter to turn the logo image white */
    body.index #mainnav img {
        filter: brightness(0) invert(1) !important;
    }

    /* 5. WHITE TEXT INSIDE THE BANNER CONTENT */
    body.index #main-content > section.s-block.s-block--fixed-banner:nth-of-type(1) h1,
    body.index #main-content > section.s-block.s-block--fixed-banner:nth-of-type(1) h2,
    body.index #main-content > section.s-block.s-block--fixed-banner:nth-of-type(1) p,
    body.index #main-content > section.s-block.s-block--fixed-banner:nth-of-type(1) span,
    body.index #main-content > section.s-block.s-block--fixed-banner:nth-of-type(1) i {
        color: #ffffff !important;
    }
}
/* 1. Change main footer background */
footer.store-footer {
    background-color: #91663b !important;
    color: #ffffff !important;
}

/* 2. Make the inner container transparent */
footer.store-footer .store-footer__inner {
    background-color: transparent !important;
}

/* 3. Change all text, headings, and links inside to white */
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 h5, 
footer.store-footer h6,
footer.store-footer li {
    color: #ffffff !important;
}

/* 4. Change all icons (i and svg) inside to white */
footer.store-footer i, 
footer.store-footer svg,
footer.store-footer svg path {
    fill: #ffffff !important;
    color: #ffffff !important;
}
/* Target the h3 logo area specifically within the footer */
footer.store-footer .store-footer__inner a.flex.items-center h3 {
    display: block !important;
    width: 167px !important;
    height: 200px !important;
    background-image: url('https://cdn.files.salla.network/theme/52752249/c42584e3-c852-4be3-b136-ed5c347e8c0e_420x500.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    
    /* Hide the original text */
    text-indent: -9999px !important;
    overflow: hidden !important;
    
    /* Optional: Turn the logo white to match the footer text */
    filter: brightness(0) invert(1) !important;
}

/* Adjust the parent link to ensure proper sizing */
footer.store-footer .store-footer__inner a.flex.items-center {
    width: 167px !important;
    height: 200px !important;
}
/* Permanent fix to append the image to the apps icons section */
salla-apps-icons.lg\:col-span-2 {
    display: flex !important;
    flex-direction: column !important;
}

salla-apps-icons.lg\:col-span-2::after {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    min-height: 150px !important; /* Adjust based on image ratio */
    background-image: url('https://i.ibb.co/Jj6KSPW6/Section-pngegg1-1-png-1.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-top: 20px !important;
}
.s-product-card-content {
    background-color: #e0d2b7;
}
.index .s-cart-summary-total {
  color: white;
}