body {
    background: #FDF3EC;
    color: var(--foreground);
}

/* ================================================= */
/* =============== MOBILE PRODUCT GRID ============= */
/* ================================================= */
@media (max-width: 768px) {
    .products-embla__slide {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 5px;
    }

    .products-embla__slide .group {
        gap: 8px !important;
    }

    .products-embla__slide img {
        max-height: 140px;
        object-fit: cover;
    }

    .products-embla__slide h3,
    .products-embla__slide p {
        font-size: 12px !important;
    }

    .products-embla__slide .btn {
        font-size: 12px !important;
        padding: 6px !important;
    }
}


/* ================================================= */
/* =============== PRODUCT CARD DESIGN ============= */
/* ================================================= */
.products-embla__slide .group {
    border: 1px solid #e5e5e500;
    border-radius: 10px;
    padding: 10px;
    background: #FDF3EC;
    transition: 0.3s;
}

/* ================================================= */
/* ================= BUTTON COLOR ================== */
/* ================================================= */

.products-embla__slide .btn {
    background-color: #9186a900 !important; /* Button background */
    color: #ffffff !important;            /* Text color */
    border: 1px solid #D38583; !important;
    border-radius: 6px !important;
}

/* Hover effect */
.products-embla__slide .btn:hover {
    background-color: #D38583 !important;
    color: #ffffff00 !important;
}

/* ================================================= */
/* =============== CATEGORIES SECTION ============== */
/* ================================================= */
.section-categories h3 {
    display: none !important;
}

.section-categories img {
    aspect-ratio: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.section-categories .embla__slide a.group div {
    aspect-ratio: auto !important;
    height: auto !important;
}

/* Mobile: 2 per row */
@media (max-width: 768px) {
    .section-categories .embla__slide {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 6px;
    }
}

/* Desktop: 5 per row */
@media (min-width: 1024px) {
    .section-categories .embla__slide {
        flex: 0 0 20% !important;
        max-width: 20% !important;
        padding: 10px;
    }

    .section-categories img {
        aspect-ratio: auto !important;
        height: 320px !important;
        object-fit: contain !important;
    }

    .section-categories .embla__slide div {
        aspect-ratio: auto !important;
    }

    .section-categories a.group div {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
    }

    .section-categories .embla__container {
        display: flex !important;
        justify-content: center !important;
    }
}


/* ================================================= */
/* ================= HEADER STYLING ================ */
/* ================================================= */
header.bg-secondary {
    background-color: #990015 !important;
}

header .text-foreground {
    color: #ffffff !important;
}

header svg {
    color: #ffffff !important;
    fill: #ffffff00 !important;
}

header [data-cart-badge] {
    color: #fff !important;
}

header {
    border-bottom: none !important;
}


/* ================================================= */
/* ================= FOOTER STYLING ================ */
/* ================================================= */
#footer {
    background-color: #990015 !important;
}

#footer .text-foreground {
    color: #ffffff !important;
}

#footer a {
    color: #ffffff !important;
}

#footer svg {
    fill: #ffffff00 !important;
    color: #ffffff !important;
}

/* Change footer logo */
#footer > div > div.grid.grid-cols-1.gap-8.md\:grid-cols-\[repeat\(auto-fit\,minmax\(250px\,1fr\)\)\] > div.space-y-4 > img {
    content: url("https://i.postimg.cc/nrKFK4Jb/Hlogo.png") !important;
    width: 250px !important;
    height: auto !important;
}

/* Payment icons */
#footer .flex.flex-wrap.items-center.gap-x-2 img {
    background: #ffffff;
    padding: 6px;
    border-radius: 6px;
    height: 32px !important;
    width: auto;
}

/* Social icons */
#footer a[href*="instagram"] svg,
#footer a[href*="twitter"] svg,
#footer a[href*="snapchat"] svg,
#footer a[href*="tiktok"] svg {
    fill: #ffffff !important;
}

/* Force white text */
#footer * {
    color: #ffffff !important;
}


/* ================================================= */
/* ================= MOBILE MENU =================== */
/* ================================================= */
#mobile-drawer .text-foreground {
    color: #000000 !important;
}

#mobile-drawer svg {
    color: #000000 !important;
    stroke: #000000 !important;
}


/* ================================================= */
/* =============== HERO BANNER MOBILE ============== */
/* ================================================= */
@media (max-width: 768px) {
    [section-id="fa3c437e-59dc-453b-8f7b-41e2bab0f6a3"] {
        padding: 0 !important;
        min-height: 180px !important;
    }

    .section-hero img {
        object-fit: cover !important;
        height: 140px !important;
    }
}

[section-id="770572a2-a2f4-4ddc-bf01-213a600bcb84"] {
    min-height: 200px !important;
}


/* ================================================= */
/* =============== MOBILE SLIDERS HEIGHT =========== */
/* ================================================= */
@media (max-width: 768px) {

    [section-id="30baa085-2dad-41cb-8bd8-c4d82fd4769a"] .embla__slide {
        min-height: 230px !important;
    }

    [section-id="50ed9cdf-0568-4844-a723-56d1670ce623"] .embla__slide {
        min-height: 150px !important;
    }

    [section-id="0562edad-f478-4502-9ee8-1cba187e781e"] .embla__slide {
        min-height: 150px !important;
    }

    [section-id="fa60ce47-e71c-4502-a6e9-5ef0f873dfba"] .embla__slide {
        min-height: 150px !important;
    }

    [section-id="7f38ef25-680f-400b-a3f1-23a58e5250a4"] .embla__slide {
        min-height: 150px !important;
    }
}


/* Force popover styles (very strong override) */
el-popover.bg-background,
el-popover[open],
el-popover {
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
}

/* Force all text inside popover to be black */
el-popover *,
el-popover .text-foreground,
el-popover a,
el-popover span,
el-popover div,
el-popover p {
    color: #000000 !important;
}

/* Hover */
el-popover a:hover,
el-popover button:hover {
    background-color: #f2f2f2 !important;
}




/* ===== Richline block ===== */
.richline-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    color: #75727B !important;
    font-size: 0.875rem;
}

/* ===== Richline logo ===== */
.richline-footer img {
    height: 18px;
}

/* ===== Text styling (Zid + Richline) ===== */
.richline-footer p,
.border-border-light a p {
    letter-spacing: 0.17px !important;
    font-family: "Almarai", sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    line-height: 1.43 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

    .richline-footer img {
        height: 16px;
    }
}

/* ===== Add space under footer ===== */
.border-border-light.mt-6.border-t.pt-6 {
    margin-bottom: 50px !important;
}

/* ================================================= */
/* ============ GLOBAL PRODUCT BUTTON COLOR ========= */
/* ================================================= */

/* All buttons */
.product-details-column .btn,
.products-embla__slide .btn,
button.btn {
    background-color: #9186a900 !important;
    color: #D38583 !important;
    border: 1px solid #D38583; !important;
}

/* Hover */
.product-details-column .btn:hover,
.products-embla__slide .btn:hover,
button.btn:hover {
    background-color: #D38583 !important;
    color: #ffffff !important;
}

/* Disabled buttons */
.product-details-column .btn:disabled,
button.btn:disabled {
    background-color: #D38583 !important;
    color: #ffffff !important;
}



/* ============================= */
/* Hide banner buttons */
/* ============================= */

#main > section.section-hero .btn,
#main > section:nth-child(4) .btn,
#main > section:nth-child(6) .btn,
#main > section:nth-child(8) .btn,
#main > section:nth-child(9) .btn,
#main > section:nth-child(10) .btn {
    display: none !important;
}

/* ============================= */
/* Make banners clickable */
/* ============================= */

#main > section.section-hero,
#main > section:nth-child(4),
#main > section:nth-child(6),
#main > section:nth-child(8),
#main > section:nth-child(9),
#main > section:nth-child(10) {
    cursor: pointer;
    transition: 0.3s;
}

#main > section.section-hero:hover,
#main > section:nth-child(4):hover,
#main > section:nth-child(6):hover,
#main > section:nth-child(8):hover,
#main > section:nth-child(9):hover,
#main > section:nth-child(10):hover {
    opacity: 0.95;
}

/* ============================= */
/* Desktop spacing (top + bottom) */
/* ============================= */

@media (min-width: 1024px) {
    #main > section:nth-of-type(11) > div > div > div {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}




.section-hero[section-id] {
  min-height: unset !important;
  aspect-ratio: 16 / 9;
  padding: 0 !important;
}

.section-hero[section-id] img {
  object-position: top;
}

.section-hero[section-id] .theme-container {
  display: none;
}

[section-id="fc893f3a-2f2a-4e21-913b-261339a7a994"] {
  min-height: unset !important;
  padding: 0 !important;
  background: #ffffff00; /* optional: avoids ugly empty space */
}

[section-id="fc893f3a-2f2a-4e21-913b-261339a7a994"] img {
  object-fit: contain !important;
  object-position: center;
}

[section-id="fc893f3a-2f2a-4e21-913b-261339a7a994"] .theme-container {
  display: none;
}



/* Desktop only */
@media (min-width: 768px) {

  [section-id="e6a0040c-4116-41bf-817b-0f43e49163d2"],
  [section-id="3100e484-d072-47e8-ad72-7dcbb0506630"] {
    min-height: unset !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  [section-id="e6a0040c-4116-41bf-817b-0f43e49163d2"] img,
  [section-id="3100e484-d072-47e8-ad72-7dcbb0506630"] img {
    object-fit: contain !important;
    width: 100%;
    height: 100%;
  }

  [section-id="e6a0040c-4116-41bf-817b-0f43e49163d2"] .theme-container,
  [section-id="3100e484-d072-47e8-ad72-7dcbb0506630"] .theme-container {
    display: none;
  }

}

img[alt="MONALIZ"]{
    content: url("https://i.postimg.cc/J7krcBbN/Logo.png");
    width: 180px !important;
    height: 180px !important;
    object-fit: contain;
}