/* =========================================================
   SALLA STORE - MASTER CLEAN CSS
   RESTORED VERSION - BEFORE FEATURES CHANGES
   ========================================================= */


/* =========================
   IMPORTS
   ========================= */

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Cairo:wght@200;300;400;500&display=swap');

@import url('https://site-assets.fontawesome.com/releases/v6.4.2/css/all.css');


/* =========================
   VARIABLES
   ========================= */

:root {
    --main-color: #000000;
    --second-color: #000000;

    --page-background: #F7F1E3;
    --card-background: #F7F1E3;

    --brown-color: #45311B;

    --black-color: #000000;
    --white-color: #FFFFFF;

    --normal-box-shadow:
        -8px 10px 15px -3px rgba(0, 0, 0, 0.10);

    /* Salla primary color */
    --color-primary: #45311B !important;
    --color-primary-dark: #45311B !important;
    --color-primary-light: #45311B !important;
}


/* =========================
   FONT
   ========================= */

body *:not(i) {
    font-family: 'Almarai', sans-serif !important;
}


/* =========================
   GLOBAL BACKGROUND
   ========================= */

html,
body,
#app,
.app-inner,
main {
    background-color: var(--page-background) !important;
}


/* Home Sections */

.index .s-block {
    background-color: var(--page-background) !important;
}


/* =========================
   GLOBAL TEXT
   ========================= */

body,
main,
section {
    color: #000000 !important;
}


/* =========================
   HEADER
   ========================= */

header.store-header {
    margin-bottom: 0;

    background: var(--page-background) !important;

    box-shadow: var(--normal-box-shadow);

    z-index: 20;
}


.main-nav-container.fixed-header .inner {
    padding-top: 15px;
    padding-bottom: 15px;

    background: var(--page-background) !important;

    border-radius: 0;
}


div#mainnav,
.inner.bg-inherit {
    background-color: transparent;
}


.inner.bg-inherit {
    justify-content: center;
    align-items: center;
}


/* =========================
   TOP NAVBAR
   ========================= */

.top-navbar {
    padding-top: 15px;

    background-color: #000000 !important;

    color: #FFFFFF !important;

    border-radius: 0 0 15px 15px !important;

    box-shadow: var(--normal-box-shadow);
}


.top-navbar,
.top-navbar a,
.top-navbar span,
.top-navbar p {
    color: #FFFFFF !important;
}


.top-navbar .s-search-input {
    background-color: #EFF2FD !important;

    border: 1px solid #3A57A826;

    color: #000000 !important;
}


.top-navbar .s-search-input::placeholder {
    color: #555555 !important;
}


/* =========================
   HEADER ICONS
   ========================= */

i.header-btn__icon.sicon-user-circle,
i.header-btn__icon.icon.sicon-shopping-bag {
    color: #000000;

    border-color: #000000;

    border-radius: 50% !important;

    background-image:
        linear-gradient(
            to left,
            transparent,
            transparent 50%,
            #000000 50%,
            #000000
        );

    background-position: 100% 0;

    background-size: 200% 100%;

    transition: all 0.5s ease-in;
}


i.header-btn__icon.sicon-user-circle:hover,
i.header-btn__icon.icon.sicon-shopping-bag:hover {
    background-position: 0 0;

    color: #FFFFFF;
}


/* =========================
   CART
   ========================= */

.s-cart-summary-count {
    background-color: #7D2D11 !important;

    color: #FFFFFF !important;
}


.s-cart-summary-total {
    color: #000000 !important;
}


/* =========================
   NAVIGATION
   ========================= */

.main-menu li.root-level > a {
    color: #000000 !important;

    font-weight: 700;
}


/* =========================
   DESKTOP NAVIGATION
   ========================= */

@media (min-width: 1024px) {

    .main-menu li.root-level > a {
        position: relative;

        z-index: 1;

        transition: all 0.5s;
    }


    .main-menu li.root-level > a:hover {
        color: #FFFFFF !important;
    }


    .main-menu li.root-level > a::after {
        content: '';

        display: block;

        position: absolute;

        top: -20px;
        right: 0;
        bottom: 0;
        left: 0;

        margin: auto;

        width: 100%;
        height: 1px;

        background: #000000 !important;

        visibility: hidden;

        opacity: 0;

        z-index: -1;

        transition: all 0.5s;
    }


    .main-menu li.root-level > a:hover::after {
        height: 90%;

        visibility: visible;

        opacity: 1;
    }


    .navbar-brand {
        margin-right: 2rem;
    }
}


/* =========================================================
   PRODUCT CARDS
   ========================================================= */

.s-product-card-entry {
    background: var(--card-background) !important;

    background-color: var(--card-background) !important;

    border-radius: 15px !important;

    overflow: hidden;

    box-shadow: var(--normal-box-shadow);
}


.s-product-card-content,
.s-product-card-content-main,
.s-product-card-content-sub,
.s-product-card-content-footer {
    background: var(--card-background) !important;

    background-color: var(--card-background) !important;
}


.s-product-card-content-sub {
    justify-content: center;
}


.s-product-card-image {
    background-color: var(--page-background) !important;
}


/* =========================
   PRODUCT CARD TITLE
   ========================= */

.s-product-card-content-title,
.s-product-card-content-title a {
    color: #000000 !important;

    -webkit-text-fill-color: #000000 !important;

    text-align: center;

    font-size: 16px;

    font-weight: 700 !important;

    padding-bottom: 20px;
}


/* =========================
   PRODUCT CARD PRICE
   ========================= */

.s-product-card-price,
.s-product-card-sale-price,
.s-product-card-regular-price {
    color: #000000 !important;

    -webkit-text-fill-color: #000000 !important;

    font-size: 16px !important;

    font-weight: 800 !important;
}


/* =========================
   PRODUCT CARD BUTTON
   ========================= */

.s-product-card-entry
salla-add-product-button
.s-button-btn,

.s-product-card-entry
salla-add-product-button
button {
    background: var(--brown-color) !important;

    background-color: var(--brown-color) !important;

    border-color: var(--brown-color) !important;

    color: #FFFFFF !important;

    border-radius: 15px !important;
}


.s-product-card-entry
salla-add-product-button
.s-button-btn *,

.s-product-card-entry
salla-add-product-button
button * {
    color: #FFFFFF !important;

    -webkit-text-fill-color: #FFFFFF !important;
}


/* =========================
   GENERAL BUTTONS
   ========================= */

.s-button-btn {
    font-weight: 700 !important;

    border-radius: 15px !important;

    color: #FFFFFF !important;
}


.s-button-btn,
.s-button-btn * {
    color: #FFFFFF !important;

    -webkit-text-fill-color: #FFFFFF !important;
}


.s-button-text {
    display: flex;

    justify-content: center;

    align-items: center;
}


/* =========================
   CART BUTTON GIF
   ========================= */

.s-button-btn
.s-button-text
.sicon-shopping-bag::before {
    content: '';

    display: inline-block;

    width: 30px;
    height: 30px;

    margin-left: 9px;

    background-image:
        url('https://i.ibb.co/ZfLY67T/system-regular-6-shopping.gif') !important;

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;
}


/* =========================================================
   PRODUCT PAGE
   ========================================================= */

.product-entry,
.product-form,
.product-single,
.product-details,
.product__info,
.product-info {
    color: #000000 !important;
}


.product-entry *,
.product-details *,
.product__info *,
.product-info *,
.product__description * {
    color: #000000 !important;
}


/* =========================
   PRODUCT PAGE TITLE
   ========================= */

.product-entry h1,
.product-info h1,
.product-details h1 {
    color: #000000 !important;

    -webkit-text-fill-color: #000000 !important;

    font-weight: 800 !important;
}


/* =========================
   PRODUCT PAGE PRICE
   ========================= */

.product-entry .price,
.product-entry .total-price,
.product-info .price,
.product-details .price {
    color: #000000 !important;

    -webkit-text-fill-color: #000000 !important;

    font-weight: 800 !important;
}


/* =========================================================
   PRODUCT DESCRIPTION
   ========================================================= */

.product__description {
    color: #000000 !important;

    padding: 25px 20px !important;

    line-height: 2 !important;
}


.product__description p,
.product__description li {
    color: #000000 !important;

    font-size: 16px !important;

    line-height: 2 !important;
}


.product__description h1,
.product__description h2,
.product__description h3,
.product__description h4 {
    color: #000000 !important;

    -webkit-text-fill-color: #000000 !important;

    font-weight: 800 !important;
}


/* Product details accent */

.product__description h2::after,
.product__description h3::after,
.product__description h4::after,
.product-details h2::after,
.product-details h3::after {
    background: #45311B !important;

    background-color: #45311B !important;
}


/* =========================================================
   FAVORITE
   ========================================================= */

.product-entry .sicon-heart,
.product-info .sicon-heart {
    color: #000000 !important;
}


/* =========================================================
   SOCIAL SHARE
   ========================================================= */

.product-entry .s-social-share,
.product-entry .s-social-share *,
.product-info .s-social-share,
.product-info .s-social-share *,
.s-social-share,
.s-social-share * {
    color: #000000 !important;

    -webkit-text-fill-color: #000000 !important;
}


.sicon-whatsapp,
.sicon-facebook,
.sicon-twitter,
.sicon-link,
.sicon-share-alt,
.sicon-x-twitter {
    color: #000000 !important;
}


/* =========================================================
   FIXED BANNER
   ========================================================= */

section.s-block.s-block--fixed-banner.wide-placeholder {
    margin-top: 0 !important;
}


section.s-block.s-block--fixed-banner.wide-placeholder > .container {
    width: 100% !important;

    max-width: none !important;

    padding: 0 !important;
}


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


/* =========================================================
   CATEGORY BANNERS
   ========================================================= */

a.banner-entry.square-photos {
    transition: transform 0.3s ease-in-out;
}


a.banner-entry.square-photos:hover {
    transform: scale(1.05);
}


/* =========================================================
   SECTION TITLES
   ========================================================= */

[dir='rtl'] .s-slider-block__title h2,
.s-block__title h2 {
    color: #000000 !important;

    -webkit-text-fill-color: #000000 !important;

    background: none !important;

    background-image: none !important;

    font-size: 21px;

    font-weight: 800 !important;
}


/* =========================================================
   VIEW ALL
   ========================================================= */

.s-slider-block__display-all {
    padding: 5px;

    margin: 10px auto;

    color: #000000 !important;

    border-radius: 0 15px 0 15px;

    animation: signal 1200ms linear infinite;
}


.s-slider-block__display-all,
.s-slider-block__display-all * {
    color: #000000 !important;
}


@keyframes signal {

    0% {
        box-shadow: 0 0 0 0 #8D6B43;
    }

    100% {
        box-shadow: 0 0 0 5px #FFFFFF;
    }
}


/* =========================================================
   PRODUCT SLIDER
   ========================================================= */

.s-products-slider-card.swiper-slide {
    padding-bottom: 15px;
}


/* =========================================================
   DESKTOP PRODUCT EFFECT
   ========================================================= */

@media (min-width: 1024px) {

    #app >
    div.app-inner.flex.flex-col.min-h-full >
    section.s-block.s-block--banners.container >
    div >
    a.banner-entry.square-photos {
        height: 219px;
    }


    .s-product-card-entry {
        --c: #45311B;
        --b: 3px;
        --g: 5px;

        padding: calc(var(--g) + var(--b));

        --_g: #0000 25%, var(--c) 0;

        background:
            conic-gradient(
                from 180deg at top var(--b) right var(--b),
                var(--_g)
            )
            var(--_i, 200%) 0 /
            200% var(--_i, var(--b))
            no-repeat,

            conic-gradient(
                at bottom var(--b) left var(--b),
                var(--_g)
            )
            0 var(--_i, 200%) /
            var(--_i, var(--b)) 200%
            no-repeat,

            var(--card-background) !important;

        transition:
            0.3s,
            background-position 0.3s 0.3s;

        cursor: pointer;
    }


    .s-product-card-entry:hover {
        --_i: 100%;
    }
}


/* =========================================================
   FORMS
   ========================================================= */

input,
textarea,
select {
    color: #000000 !important;
}


input::placeholder,
textarea::placeholder {
    color: #666666 !important;

    opacity: 1;
}


label {
    color: #000000 !important;
}


/* =========================================================
   PAYMENT WIDGETS
   ========================================================= */

.product-entry iframe,
.product-info iframe {
    max-width: 100% !important;
}


/* =========================================================
   PRODUCT BUTTONS
   ========================================================= */

.product-entry .s-button-btn,
.product-info .s-button-btn,
.product-form .s-button-btn {
    min-height: 48px;

    border-radius: 12px !important;

    font-weight: 800 !important;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.product-entry .s-button-btn:active,
.product-info .s-button-btn:active,
.product-form .s-button-btn:active {
    transform: scale(0.98);
}


/* =========================================================
   PRODUCT PAGE ADD TO CART
   ========================================================= */

.product-entry
salla-add-product-button
.s-button-btn,

.product-info
salla-add-product-button
.s-button-btn,

.product-form
salla-add-product-button
.s-button-btn {
    background: #45311B !important;

    background-color: #45311B !important;

    border: 1px solid #45311B !important;

    color: #FFFFFF !important;

    border-radius: 12px !important;
}


.product-entry
salla-add-product-button
.s-button-btn *,

.product-info
salla-add-product-button
.s-button-btn *,

.product-form
salla-add-product-button
.s-button-btn * {
    color: #FFFFFF !important;

    -webkit-text-fill-color: #FFFFFF !important;
}


/* =========================================================
   BUY NOW
   ========================================================= */

.product-entry .buy-now,
.product-info .buy-now,
.product-form .buy-now {
    background: #000000 !important;

    border-color: #000000 !important;

    color: #FFFFFF !important;

    border-radius: 12px !important;
}


.product-entry .buy-now *,
.product-info .buy-now *,
.product-form .buy-now * {
    color: #FFFFFF !important;

    -webkit-text-fill-color: #FFFFFF !important;
}


/* =========================================================
   QUANTITY
   ========================================================= */

salla-quantity-input {
    color: #000000 !important;

    background: var(--page-background) !important;

    background-color: var(--page-background) !important;
}


salla-quantity-input button {
    color: #000000 !important;
}


/* =========================================================
   FOOTER
   ORIGINAL VERSION
   ========================================================= */

.store-footer,
.store-footer__inner,
.footer-is-light .store-footer,
.footer-is-light .store-footer .store-footer__inner {
    background-color: var(--page-background) !important;

    background-image: none !important;
}


.footer-is-light
.store-footer
.store-footer__inner {
    position: relative;

    padding: 7rem 0 3rem;

    color: #000000 !important;
}


.store-footer,
.store-footer p,
.store-footer span,
.store-footer h3,
.store-footer h4,
.store-footer a,
.store-footer li {
    color: #000000 !important;

    -webkit-text-fill-color: #000000 !important;
}


/* =========================================================
   HIDE ADVERTISEMENTS
   ========================================================= */

.salla-advertisement,
.top-banner,
.header-banner,
.s-block--advertisement {
    display: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 992px) {

    .footer-is-light
    .store-footer
    .store-footer__inner {
        padding: 7rem 0 3rem;

        background-color:
            var(--page-background) !important;

        background-image: none !important;

        border-radius:
            125px 125px 0 0;

        text-align: center;
    }
}


/* =========================================================
   MOBILE HEADER
   ========================================================= */

@media (max-width: 768px) {

    header.store-header {
        background: #F7F1E3 !important;
    }


    .main-nav-container,
    .main-nav-container .inner,
    .main-nav-container.fixed-header .inner {
        position: relative !important;

        min-height: 82px !important;

        height: 82px !important;

        padding-top: 6px !important;

        padding-bottom: 6px !important;

        background: #F7F1E3 !important;

        border-radius: 0 !important;
    }


    .navbar-brand {
        position: absolute !important;

        left: 50% !important;

        right: auto !important;

        top: 50% !important;

        transform:
            translate(-50%, -50%) !important;

        margin: 0 !important;

        padding: 0 !important;

        z-index: 5;
    }


    .navbar-brand img {
        display: block !important;

        width: auto !important;

        height: auto !important;

        max-width: 125px !important;

        max-height: 68px !important;

        object-fit: contain !important;
    }


    header.store-header
    .header-btn__icon {
        color: #000000 !important;
    }


    i.sicon-menu.text-primary.text-2xl {
        color: #000000 !important;

        border: 0 !important;

        padding: 6px !important;
    }
}


/* =========================================================
   MOBILE PRODUCT CARDS
   ========================================================= */

@media (max-width: 768px) {

    .s-product-card-entry,
    .s-product-card-content,
    .s-product-card-content-main,
    .s-product-card-content-sub,
    .s-product-card-content-footer {
        background: #F7F1E3 !important;

        background-color: #F7F1E3 !important;
    }


    .s-product-card-entry {
        border: 3px solid transparent;

        border-image:
            linear-gradient(
                to top,
                #000000,
                #000000,
                transparent
            );

        border-image-slice: 1;

        overflow: hidden;
    }
}


/* =========================================================
   MOBILE CATEGORY BANNERS
   ========================================================= */

@media (max-width: 768px) {

    #app >
    div.app-inner.flex.flex-col.min-h-full >
    section.s-block.s-block--banners.container >
    div >
    a.banner-entry.square-photos {
        height: 100px;
    }


    .index >
    div.app-inner.flex.flex-col.min-h-full >
    section.s-block.s-block--banners.container >
    div {
        display: flex;

        justify-content: center;

        align-items: center;

        flex-wrap: wrap;

        width: 100%;

        gap: 8px;
    }


    #app >
    div.app-inner.flex.flex-col.min-h-full >
    section.s-block.s-block--banners.container >
    div >
    a {
        width: 48%;
    }
}


/* =========================================================
   MOBILE PRODUCT SLIDER
   ========================================================= */

@media (max-width: 768px) {

    .carousel-slider .swiper {
        padding-left: 0 !important;
    }


    .s-products-slider-card.swiper-slide {
        width: 190px !important;
    }
}


/* =========================================================
   MOBILE PRODUCT PAGE
   ========================================================= */

@media (max-width: 768px) {

    .product-entry,
    .product-info,
    .product-details {
        color: #000000 !important;
    }


    .product-entry,
    .product-info {
        padding-left: 14px;

        padding-right: 14px;
    }


    .product-entry h1,
    .product-info h1 {
        font-size: 21px !important;

        line-height: 1.7 !important;
    }


    .product__description {
        padding:
            20px 18px !important;

        margin-top: 20px !important;
    }


    .product__description p,
    .product__description li {
        color: #000000 !important;

        font-size: 15px !important;

        line-height: 1.9 !important;
    }


    .s-social-share {
        margin-top: 8px !important;

        margin-bottom: 14px !important;
    }


    .product-entry iframe,
    .product-info iframe {
        width: 100% !important;
    }
}


/* =========================================================
   MOBILE QUANTITY
   KEEP BEIGE
   ========================================================= */

@media (max-width: 768px) {

    salla-quantity-input {
        height: 46px !important;

        max-height: 46px !important;

        background: #F7F1E3 !important;

        background-color: #F7F1E3 !important;

        border:
            1px solid rgba(0, 0, 0, 0.10) !important;

        border-radius: 12px !important;

        overflow: hidden !important;
    }


    salla-quantity-input input {
        color: #000000 !important;

        font-weight: 700 !important;

        background: transparent !important;
    }


    salla-quantity-input button {
        color: #000000 !important;

        background: transparent !important;
    }
}


/* =========================================================
   MOBILE PURCHASE BAR
   ========================================================= */

@media (max-width: 768px) {

    .sticky-product-bar,
    .product-sticky-bar,
    .sticky-product-actions {
        border-top:
            1px solid rgba(0, 0, 0, 0.08) !important;
    }


    .product-form .s-button-btn,
    .sticky-product-bar .s-button-btn,
    .product-sticky-bar .s-button-btn,
    .sticky-product-actions .s-button-btn {
        min-height: 52px !important;

        border-radius: 12px !important;

        font-weight: 800 !important;
    }


    .product-form
    salla-add-product-button
    .s-button-btn,

    .sticky-product-bar
    salla-add-product-button
    .s-button-btn,

    .product-sticky-bar
    salla-add-product-button
    .s-button-btn,

    .sticky-product-actions
    salla-add-product-button
    .s-button-btn {
        background: #45311B !important;

        border-color: #45311B !important;

        color: #FFFFFF !important;
    }
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

@media (max-width: 768px) {

    .mm-ocd__content:has(nav#mobile-menu)::before {
        content: '';

        display: block;

        width: 60%;

        height: 220px;

        margin:
            40px auto 40px auto;

        background: #000000;

        border-radius:
            30px 30px 150px 150px;

        box-shadow:
            0 14px 28px rgba(0, 0, 0, 0.25),
            0 10px 10px rgba(0, 0, 0, 0.22);
    }


    .mm-ocd__content:has(nav#mobile-menu)::after {
        content: '';

        display: block;

        position: absolute;

        top: 0;

        left: 0;

        transform:
            translate(50%, 50%);

        width: 50%;

        height: 160px;

        background-image:
            url('https://up6.cc/2024/09/172574738002361.png');

        background-position: center;

        background-size: contain;

        background-repeat: no-repeat;

        z-index: 9999;
    }


    .mm-spn.mm-spn--navbar.mm-spn--main {
        height: 100%;

        margin: auto;

        background: transparent;

        color: #FFFFFF;

        border-radius: 15px;
    }


    .mm-spn.mm-spn--navbar::after {
        text-align: center !important;

        background: #000000 !important;

        color: #FFFFFF !important;

        border-radius:
            0 0 30px 30px;
    }


    .mm-spn.mm-spn--navbar ul::before {
        border: 0 !important;
    }


    .mm-spn ul {
        margin-top: 20px;

        background: #000000;

        border-radius: 30px 0;
    }


    .mm-spn ul li,
    .mm-spn ul li a,
    .mm-spn ul span {
        color: #FFFFFF !important;

        -webkit-text-fill-color:
            #FFFFFF !important;
    }
}


/* =========================================================
   FOOTER MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .footer-is-light
    .store-footer
    .store-footer__inner {
        text-align: center;
    }


    .store-footer
    .contact-social
    ul {
        justify-content: center;
    }


    .store-footer a {
        justify-content: center;
    }
}


/* =========================================================
   FINAL BLACK TEXT CONTROL
   ========================================================= */

.s-product-card-content-title,
.s-product-card-content-title a,
.s-product-card-price,
.s-product-card-sale-price,
.s-product-card-regular-price,

.s-block__title h2,
.s-slider-block__title h2,
.s-slider-block__display-all,

.product-entry,
.product-details,
.product-info,
.product__info,
.product__description,

.s-cart-summary-total,

label {
    color: #000000 !important;

    -webkit-text-fill-color:
        #000000 !important;
}


/* =========================================================
   WHITE TEXT EXCEPTIONS
   FIXED VERSION
   ========================================================= */

.s-button-btn,
.s-button-btn *,

salla-add-product-button
.s-button-btn,

salla-add-product-button
.s-button-btn *,

.s-cart-summary-count,

.top-navbar,
.top-navbar a,

.mm-spn ul li,
.mm-spn ul li a {
    color: #FFFFFF !important;

    -webkit-text-fill-color: #FFFFFF !important;
}


/* =========================================================
   SALLA CART / CHECKOUT COLOR FIX
   CONFIRMED WORKING
   ========================================================= */

.s-button-primary,
.s-button-outline,
salla-button[fill="outline"] .s-button-btn,
salla-button[fill="solid"] .s-button-btn {
    border-color: #45311B !important;
}


/* Solid checkout buttons */

.s-button-primary,
salla-button[fill="solid"] .s-button-btn {
    background: #45311B !important;

    background-color: #45311B !important;

    color: #FFFFFF !important;

    -webkit-text-fill-color: #FFFFFF !important;
}


/* Outline buttons */

.s-button-outline,
salla-button[fill="outline"] .s-button-btn {
    background: transparent !important;

    color: #45311B !important;

    -webkit-text-fill-color: #45311B !important;
}


.s-button-outline *,
salla-button[fill="outline"] .s-button-btn * {
    color: #45311B !important;

    -webkit-text-fill-color: #45311B !important;
}


/* Cart summary */

salla-cart-summary,
salla-cart-summary *,
.cart-summary,
.cart-summary * {
    --color-primary: #45311B !important;
}


/* Payment selection */

input[type="radio"],
input[type="checkbox"] {
    accent-color: #45311B !important;
}


/* =========================================================
   MOBILE LOGO - BIGGER + MOVE UP
   ========================================================= */

@media (max-width: 768px) {

    header.store-header .navbar-brand {
        width: 180px !important;
        height: 80px !important;

        overflow: visible !important;

        top: 38% !important;
    }

    header.store-header .navbar-brand img {
        width: 180px !important;
        height: 80px !important;

        max-width: none !important;
        max-height: none !important;

        object-fit: contain !important;

        /* تكبير الشعار */
        transform: scale(2.25) !important;
        transform-origin: center center !important;

        /* رفع الشعار بعيداً عن البحث */
        position: relative !important;
        top: -15px !important;

        z-index: 10 !important;
    }
}

    min-height: 230px !important;

    padding: 28px 18px !important;

    margin: 0 !important;

    text-align: center !important;

    background: #F7F1E3 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease !important;
}

/* الفواصل بين المميزات */
.s-block--features__item:not(:last-child)::after {
    content: '' !important;

    position: absolute !important;

    top: 20% !important;
    left: 0 !important;

    width: 1px !important;
    height: 60% !important;

    background: rgba(69, 49, 27, 0.15) !important;
}

//* =========================================================
   STORE FEATURES - FIXED VERSION
   ========================================================= */

/* القسم */
.s-block--features {
    background: transparent !important;
}


/* =========================================================
   FEATURES GRID
   ========================================================= */

.s-block--features > div,
.s-block--features .grid,
section.s-block--features > div {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 0 !important;

    width: 100% !important;

    background: #F7F1E3 !important;

    border:
        1px solid rgba(69, 49, 27, 0.08) !important;

    border-radius: 22px !important;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.07) !important;

    overflow: hidden !important;
}


/* =========================================================
   FEATURE ITEM
   ========================================================= */

.s-block--features__item {
    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-items: center !important;

    width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 28px 15px !important;

    text-align: center !important;

    background: #F7F1E3 !important;

    box-shadow: none !important;

    border: 0 !important;

    border-radius: 0 !important;
}


/* =========================================================
   DIVIDERS
   ========================================================= */

.s-block--features__item:not(:last-child)::after {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;

    top: 20% !important;

    width: 1px !important;

    height: 60% !important;

    background:
        rgba(69, 49, 27, 0.16) !important;
}


/* =========================================================
   ICON
   ========================================================= */

.s-block--features__item .feature-icon {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 70px !important;

    height: 70px !important;

    margin:
        0 auto 12px !important;

    padding: 0 !important;

    background: transparent !important;

    color: #000000 !important;

    border: 0 !important;

    border-radius: 0 !important;

    transition:
        transform 0.35s ease,
        color 0.35s ease !important;
}


.s-block--features__item .feature-icon i {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    height: 100% !important;

    color: #000000 !important;

    font-size: 58px !important;
}


/* =========================================================
   TITLE
   ========================================================= */

.s-block--features__item h4 {
    margin:
        0 0 7px !important;

    color: #000000 !important;

    -webkit-text-fill-color:
        #000000 !important;

    font-size: 18px !important;

    font-weight: 800 !important;

    line-height: 1.5 !important;

    text-align: center !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.s-block--features__item p {
    display: block !important;

    margin: 0 !important;

    color: #555555 !important;

    -webkit-text-fill-color:
        #555555 !important;

    font-size: 14px !important;

    line-height: 1.8 !important;

    text-align: center !important;
}


/* =========================================================
   INTERACTION
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .s-block--features__item {
        transition:
            background-color 0.3s ease !important;
    }


    .s-block--features__item:hover {
        background:
            #F3EAD8 !important;
    }


    .s-block--features__item:hover
    .feature-icon {
        transform:
            translateY(-5px)
            scale(1.08) !important;

        color:
            #45311B !important;
    }


    .s-block--features__item:hover
    .feature-icon i {
        color:
            #45311B !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    section.s-block--features {
        padding-left:
            14px !important;

        padding-right:
            14px !important;
    }


    section.s-block--features > div,
    .s-block--features > div,
    .s-block--features .grid {

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        grid-auto-flow:
            column !important;

        align-items:
            stretch !important;

        gap:
            0 !important;

        width:
            100% !important;

        border-radius:
            18px !important;
    }


    .s-block--features__item {

        width:
            auto !important;

        min-width:
            0 !important;

        min-height:
            155px !important;

        padding:
            18px 6px !important;

        margin:
            0 !important;
    }


    .s-block--features__item
    .feature-icon {

        width:
            52px !important;

        height:
            52px !important;

        margin:
            0 auto 9px !important;

        animation:
            featureFloat
            3s
            ease-in-out
            infinite;
    }


    .s-block--features__item
    .feature-icon i {

        font-size:
            43px !important;
    }


    .s-block--features__item h4 {

        margin:
            0 !important;

        font-size:
            14px !important;

        font-weight:
            800 !important;

        line-height:
            1.5 !important;

        white-space:
            nowrap !important;
    }


    .s-block--features__item p {

        display:
            none !important;
    }


    .s-block--features__item:nth-child(2)
    .feature-icon {

        animation-delay:
            0.25s;
    }


    .s-block--features__item:nth-child(3)
    .feature-icon {

        animation-delay:
            0.5s;
    }


    .s-block--features__item:not(:last-child)::after {

        top:
            20% !important;

        height:
            60% !important;
    }
}


/* =========================================================
   MOBILE ICON ANIMATION
   ========================================================= */

@keyframes featureFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-4px);
    }
}
/* =========================================================
   STORE FEATURES - NEW DESIGN
   ========================================================= */

/* القسم الرئيسي */
.s-block--features {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    background: transparent !important;
}


/* الحاوية */
.s-block--features .grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 0 !important;

    padding: 30px 20px !important;

    background: #F7F1E3 !important;

    border: 1px solid rgba(69, 49, 27, 0.08) !important;

    border-radius: 22px !important;

    box-shadow:
        0 10px 30px rgba(69, 49, 27, 0.10) !important;

    overflow: hidden !important;
}


/* كل ميزة */
.s-block--features__item {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;

    padding: 10px 18px !important;

    margin: 0 !important;

    text-align: center !important;

    background: transparent !important;

    box-shadow: none !important;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease !important;
}


/* فاصل بين المميزات */
.s-block--features__item:not(:last-child)::after {
    content: '' !important;

    position: absolute !important;

    left: 0 !important;
    top: 10% !important;

    width: 1px !important;
    height: 80% !important;

    background:
        rgba(69, 49, 27, 0.16) !important;
}


/* =========================================================
   FEATURE ICON
   ========================================================= */

.s-block--features__item .feature-icon {
    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

    width: 78px !important;
    height: 78px !important;

    margin: 0 auto 15px !important;

    border-radius: 50% !important;

    background:
        rgba(69, 49, 27, 0.06) !important;

    color: #45311B !important;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease !important;
}
/* =========================================================
   FEATURES ICONS - FIX
   ========================================================= */

/* إعداد الأيقونات */
.s-block--features__item .feature-icon i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    color: #45311B !important;
}


/* إخفاء أيقونة سلة الأصلية */
.s-block--features__item .feature-icon i::before {
    display: none !important;
}


/* إنشاء الأيقونات الجديدة */
.s-block--features__item .feature-icon i::after {
    display: block !important;

    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
    font-weight: 900 !important;

    font-size: 46px !important;
    line-height: 1 !important;

    color: #45311B !important;

    -webkit-text-fill-color: #45311B !important;
}


/* =========================
   تسوق آمن - درع
   ========================= */

.s-block--features__item
.feature-icon
i.sicon-store2::after {
    content: "\f3ed" !important;
}


/* =========================
   خدمة العملاء - سماعة
   ========================= */

.s-block--features__item
.feature-icon
i.sicon-shipping-fast::after {
    content: "\f590" !important;
}


/* =========================
   شحن سريع - شاحنة
   ========================= */

.s-block--features__item
.feature-icon
i.sicon-fire::after {
    content: "\f48b" !important;
}


/* الجوال */
@media (max-width: 768px) {

    .s-block--features__item
    .feature-icon
    i::after {
        font-size: 38px !important;
    }
}

/* =========================================================
   FEATURE TITLE
   ========================================================= */

.s-block--features__item h4 {
    margin: 0 0 8px !important;

    color: #000000 !important;

    -webkit-text-fill-color: #000000 !important;

    font-size: 18px !important;

    font-weight: 800 !important;

    line-height: 1.5 !important;

    text-align: center !important;
}


/* =========================================================
   FEATURE DESCRIPTION
   ========================================================= */

.s-block--features__item p {
    display: block !important;

    margin: 0 !important;

    color: #555555 !important;

    -webkit-text-fill-color: #555555 !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    line-height: 1.8 !important;

    text-align: center !important;
}


/* =========================================================
   DESKTOP INTERACTION
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .s-block--features__item:hover {
        transform: translateY(-5px) !important;
    }


    .s-block--features__item:hover .feature-icon {
        transform:
            translateY(-3px)
            scale(1.08) !important;

        background:
            rgba(69, 49, 27, 0.11) !important;
    }
}


/* =========================================================
   MOBILE FEATURES
   ========================================================= */

@media (max-width: 768px) {

    .s-block--features {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }


    .s-block--features .grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        padding:
            22px 6px !important;

        border-radius:
            22px !important;
    }


    .s-block--features__item {
        min-width: 0 !important;

        padding:
            5px 6px !important;
    }


    .s-block--features__item .feature-icon {
        width: 58px !important;
        height: 58px !important;

        margin-bottom:
            10px !important;
    }


    .s-block--features__item
    .feature-icon i::before {
        font-size:
            34px !important;
    }


    .s-block--features__item h4 {
        font-size:
            15px !important;

        line-height:
            1.5 !important;

        margin-bottom:
            5px !important;
    }


    .s-block--features__item p {
        font-size:
            11px !important;

        line-height:
            1.6 !important;
    }


    .s-block--features__item:not(:last-child)::after {
        top: 8% !important;

        height: 84% !important;
    }
}
/* =========================================================
   FEATURES ICONS - RESTORE SALLA ICONS
   ========================================================= */

/* إلغاء الأيقونات المصنوعة */
.s-block--features__item .feature-icon i::after {
    content: none !important;
    display: none !important;
}


/* إعادة أيقونات سلة الأصلية */
.s-block--features__item .feature-icon i::before {
    display: inline-block !important;

    font-family: "sallaicons" !important;

    font-size: 42px !important;
    font-style: normal !important;
    font-weight: normal !important;

    line-height: 1 !important;

    color: #45311B !important;
    -webkit-text-fill-color: #45311B !important;

    background: none !important;
}


/* ضبط دائرة الأيقونة */
.s-block--features__item .feature-icon {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 72px !important;
    height: 72px !important;

    margin: 0 auto 10px !important;

    color: #45311B !important;

    background: rgba(69, 49, 27, 0.05) !important;

    border-radius: 50% !important;
}


/* لون الأيقونة نفسها */
.s-block--features__item .feature-icon i {
    color: #45311B !important;
    -webkit-text-fill-color: #45311B !important;
}


/* الجوال */
@media (max-width: 768px) {

    .s-block--features__item .feature-icon {
        width: 62px !important;
        height: 62px !important;
    }

    .s-block--features__item .feature-icon i::before {
        font-size: 38px !important;
    }
}
/* =========================================================
   FEATURES ICONS - CUSTOM SVG
   أضف هذا الكود فقط في نهاية CSS
   ========================================================= */


/* إخفاء أيقونات سلة الأصلية فقط */
.s-block--features__item .feature-icon i::before {
    display: none !important;
}


/* تجهيز الأيقونة الجديدة */
.s-block--features__item .feature-icon i {
    display: block !important;

    width: 44px !important;
    height: 44px !important;

    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}


/* =========================================================
   1 - تسوق آمن
   درع + علامة صح
   ========================================================= */

.s-block--features__item
.feature-icon
i.sicon-store2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345311B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") !important;
}


/* =========================================================
   2 - خدمة العملاء
   محادثة بشكل قريب من الواتساب
   ========================================================= */

.s-block--features__item
.feature-icon
i.sicon-shipping-fast {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345311B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.5 9 9 0 0 1-3.8-.9L3 21l1.8-5A8.5 8.5 0 1 1 21 11.5z'/%3E%3Cpath d='M8.5 8.5c.5 3 2 4.5 5 5'/%3E%3Cpath d='M8.5 8.5 10 8'/%3E%3Cpath d='M13.5 13.5 14 12'/%3E%3C/svg%3E") !important;
}


/* =========================================================
   3 - شحن سريع
   شاحنة توصيل
   ========================================================= */

.s-block--features__item
.feature-icon
i.sicon-fire {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345311B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3z'/%3E%3Cpath d='M14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3Cpath d='M3 18h2M9 18h7'/%3E%3C/svg%3E") !important;
}


/* =========================================================
   MOBILE SIZE
   ========================================================= */

@media (max-width: 768px) {

    .s-block--features__item .feature-icon i {
        width: 40px !important;
        height: 40px !important;
    }
}
/* =========================================================
   FEATURES TEXT + SPACING BALANCE
   تعديل النصوص والمسافات فقط
   ========================================================= */

@media (max-width: 768px) {

    /* كل ميزة */
    .s-block--features__item {
        padding: 10px 3px 12px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: center !important;
    }


    /* مسافة الأيقونة عن العنوان */
    .s-block--features__item .feature-icon {
        margin: 0 auto 8px !important;
        flex-shrink: 0 !important;
    }


    /* عنوان الميزة */
    .s-block--features__item h4 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 48px !important;

        margin: 0 0 4px !important;
        padding: 0 2px !important;

        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.55 !important;

        text-align: center !important;

        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
    }


    /* شرح الميزة */
    .s-block--features__item p {
        display: block !important;

        width: 100% !important;
        max-width: 125px !important;

        margin: 0 auto !important;
        padding: 0 2px !important;

        font-size: 10.5px !important;
        font-weight: 400 !important;
        line-height: 1.65 !important;

        text-align: center !important;

        color: #666666 !important;
        -webkit-text-fill-color: #666666 !important;
    }


    /* توحيد ارتفاع المميزات الثلاث */
    .s-block--features__item {
        min-height: 175px !important;
    }
}
/* =========================================================
   FEATURES - FINAL TEXT BALANCE
   ========================================================= */

@media (max-width: 768px) {

    /* إعطاء العمود الأوسط مساحة أكبر */
    .s-block--features .grid {
        grid-template-columns:
            0.95fr 1.10fr 0.95fr !important;
    }

    /* العناوين */
    .s-block--features__item h4 {
        min-height: 44px !important;

        font-size: 14px !important;
        line-height: 1.45 !important;

        margin: 2px 0 5px !important;

        white-space: normal !important;
    }

    /* الوصف */
    .s-block--features__item p {
        max-width: none !important;
        width: 100% !important;

        padding: 0 4px !important;

        font-size: 11px !important;
        line-height: 1.55 !important;

        text-align: center !important;
    }

    /* تقليل الارتفاع الزائد */
    .s-block--features__item {
        min-height: 160px !important;
        padding: 9px 3px 10px !important;
    }
}
/* =========================================================
   FEATURES TITLES - ONE LINE
   ========================================================= */

@media (max-width: 768px) {

    /* عناوين المميزات في سطر واحد */
    .s-block--features__item h4 {
        width: 100% !important;
        min-height: auto !important;

        font-size: 13px !important;
        line-height: 1.4 !important;

        white-space: nowrap !important;

        margin: 4px 0 6px !important;
        padding: 0 !important;

        text-align: center !important;

        display: block !important;
    }


    /* توسيع العمود الأوسط قليلًا لخدمة العملاء */
    .s-block--features .grid {
        grid-template-columns:
            0.92fr 1.16fr 0.92fr !important;
    }


    /* ضبط الوصف */
    .s-block--features__item p {
        width: 100% !important;

        margin: 0 auto !important;
        padding: 0 3px !important;

        font-size: 10.5px !important;
        line-height: 1.55 !important;

        text-align: center !important;
    }
}