/* Add custom CSS styles below */ 

:root {
    /* Main Colors */
    --primary-background-dark: #212121;
    --primary-text-light: white;
    --primary-button-accent: #d0bc97;
    --header-text-color: #B69B6B;
    --heading-accent-alpha: #21353326; /* A semi-transparent dark color for heading accent */

    /* Gradients */
    --heading-text-gradient: linear-gradient(-225deg, #213533 0%, #d09f9f 29%, #263e3a 67%, #f0f0f0 100%);
    --social-instagram-gradient: linear-gradient(45deg, #f09433 0, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

    /* Social Media Specific Colors */
    --social-tiktok-bg: #000;
    --social-tiktok-text: white;
    --social-snapchat-bg: yellow;
    --social-snapchat-text: #000;
    --social-x-bg: #000;
}

body.index h2.total-price.font-bold.inline-block.text-store-text-secondary {
    display: none;
}

.product-single.thumbnails .product-single__slider img.lazy.loaded {
    object-fit: unset;
}

.s-block--banners .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.s-block--banners .banner-entry {
    flex: 0 0 calc(20% - 10px);
    max-width: calc(20% - 10px);
    aspect-ratio: 1/1;
    background-color: transparent !important;
}

.lazy__bg {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: cover;
    background-color: transparent !important;
}

@media (max-width: 992px) {
    .s-block--banners .grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .s-block--banners .banner-entry {
        flex: 0 0 calc(33.333% - 10px);
        max-width: calc(33.333% - 10px);
        aspect-ratio: 1/1;
        background-color: transparent !important;
    }

    .s-block--banners .banner-entry:nth-child(4),
    .s-block--banners .banner-entry:nth-child(5) {
        flex: 0 0 calc(33.333% - 10px);
        max-width: calc(33.333% - 10px);
        margin: 0 auto;
    }

    /* إنشاء مسافة فارغة على الجانبين للصورتين في الصف الثاني */
    .s-block--banners .banner-entry:nth-child(4)::before,
    .s-block--banners .banner-entry:nth-child(5)::after {
        content: "";
        flex: 0 0 calc(16.666% - 10px);
        max-width: calc(16.666% - 10px);
        visibility: hidden;
    }

    .lazy__bg {
        width: 100%;
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        object-fit: cover;
        background-color: transparent !important;
    }
}

@media (min-width: 767px) {
    i.header-btn__icon.sicon-user,
    i.header-btn__icon.icon.sicon-cart {
        background: transparent;
        border-radius: 50%;
    }
}

@media (min-width: 640px) {
    .two-row .banner-entry:first-child {
        grid-column: span 1;
        grid-row: span 1 !important;
        height: auto !important;
    }

    body.index .s-product-card-content {
        padding: 0;
    }

    .banner-entry {
        height: 325px;
    }
}

@media (max-width: 767px) {
    /* This media query is empty, consider removing if no styles are needed */
}

/****** banners blocks *******/

section.s-block.s-block--fixed-banner.wide-placeholder > .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: unset !important;
}

.banner--fixed img {
    border-radius: 0 !important;
}

/****** End banners *******/


/*************/
header.store-header.centered_logo {
    background-color: var(--primary-background-dark) !important;
    color: var(--header-text-color) !important;
}

/****** footer ********/
footer.store-footer.s-block--animate.basic-footer {
    background-color: var(--primary-background-dark);
    padding-top: 2rem;
    position: relative;
}

footer.store-footer.s-block--animate.basic-footer:before {
    position: absolute;
    content: "";
    background-image: url("https://i.postimg.cc/02RTYSY2/788.png");
    width: 100px;
    height: 150px;
    align-self: right !important; /* This property is usually for flex/grid items, but used here for visual intent */
    background-size: contain;
    background-repeat: no-repeat;
    right: 0;
    top: -50px;
}

footer.store-footer.s-block--animate.basic-footer:after {
    position: absolute;
    content: "";
    background-image: url("https://i.postimg.cc/hPs2XQMY/Vector-Smart-Object-copy-6-1.png");
    width: 100px;
    height: 150px;
    align-self: left !important; /* This property is usually for flex/grid items, but used here for visual intent */
    background-size: contain;
    background-repeat: no-repeat;
    left: 0;
    top: -50px;
}

@media (max-width: 767px) {
    footer.store-footer.s-block--animate.basic-footer:before {
        position: absolute;
        content: "";
        background-image: url("https://i.postimg.cc/02RTYSY2/788.png");
        width: 70px;
        height: 100px;
        align-self: right !important;
        background-size: contain;
        background-repeat: no-repeat;
        right: 0;
        top: -30px;
    }

    footer.store-footer.s-block--animate.basic-footer:after {
        position: absolute;
        content: "";
        background-image: url("https://i.postimg.cc/hPs2XQMY/Vector-Smart-Object-copy-6-1.png");
        width: 70px;
        height: 100px;
        align-self: left !important;
        background-size: contain;
        background-repeat: no-repeat;
        left: 0;
        top: -30px;
    }

    .store-footer h3 {
        margin-bottom: 0.75rem;
        font-size: 15px;
        line-height: 1.75rem;
        font-weight: 800; /* Fixed the encoding issue here */
    }
}