/* =========================================================
   PRODUCT CARDS - SLIDER + CATEGORIES
   ========================================================= */

:root {
    --coffee-card-bg: #f4f0e5;
    --coffee-brown: #5b3122;
    --coffee-brown-dark: #3f2218;
    --coffee-text: #24150f;
    --coffee-light: #eee3d2;
}


/* =========================================================
   WRAPPERS
   ========================================================= */

.s-products-slider-card {
    height: auto !important;
    overflow: visible !important;
}

.s-products-list-wrapper.s-products-list-vertical-cards {
    gap: 18px !important;
}


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

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-entry {

    position: relative !important;

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

    height: 100% !important;

    padding: 11px !important;

    background: var(--coffee-card-bg) !important;

    border: 1px solid rgba(74, 43, 29, 0.08) !important;
    border-radius: 20px !important;

    overflow: hidden !important;

    box-shadow:
        0 5px 14px rgba(58, 38, 24, 0.12) !important;

    transform: translateY(0);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease !important;

    animation: coffeeCardIn .55s ease both;
}


/* Card Hover */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-entry:hover {

    transform: translateY(-6px);

    border-color: rgba(91, 49, 34, .18) !important;

    box-shadow:
        0 15px 30px rgba(58, 38, 24, .18) !important;
}


/* =========================================================
   IMAGE
   ========================================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-image {

    position: relative !important;

    width: 100% !important;

    aspect-ratio: 1 / 1 !important;

    overflow: hidden !important;

    background: #e8dfcf !important;

    border-radius: 15px !important;
}


:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-image > a {

    display: block !important;

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


:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-image-cover {

    display: block !important;

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

    object-fit: cover !important;

    border-radius: 15px !important;

    transform: scale(1);

    transition:
        transform .6s cubic-bezier(.2,.8,.2,1) !important;
}


:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-entry:hover
.s-product-card-image-cover {

    transform: scale(1.065);
}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-image::after {

    content: "";

    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            to top,
            rgba(48, 26, 16, .10),
            transparent 45%
        ) !important;

    opacity: 0;

    transition: opacity .35s ease !important;
}


:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-entry:hover
.s-product-card-image::after {

    opacity: 1;
}


/* =========================================================
   WISHLIST
   بدون أي خلفية نهائيا
   ========================================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-image
> salla-button.s-product-card-wishlist-btn {

    position: absolute !important;

    top: 10px !important;
    left: 10px !important;

    z-index: 20 !important;

    display: flex !important;

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

    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: none !important;
    outline: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    overflow: visible !important;
}


/* Wrapper */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn.s-button-wrap {

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: none !important;
    outline: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* Inner Wishlist Button */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn
.s-button-element {

    display: flex !important;

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

    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: none !important;
    outline: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    overflow: visible !important;

    color: var(--coffee-brown) !important;
}


/* Wishlist Text */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn
.s-button-text {

    display: flex !important;

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

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

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}


/* =========================================================
   REMOVE SALLA CIRCLE
   ========================================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn::before,

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn::after,

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn
.s-button-element::before,

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn
.s-button-element::after,

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn
.s-button-text::before,

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn
.s-button-text::after {

    content: none !important;

    display: none !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}


/* =========================================================
   HEART
   ========================================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn
.sicon-heart {

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 23px !important;

    line-height: 1 !important;

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

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    transform: scale(1);

    transform-origin: center;

    transition:
        transform .18s ease,
        color .18s ease !important;
}


/* Heart Hover */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn:hover
.sicon-heart {

    transform: scale(1.14);

    color: var(--coffee-brown-dark) !important;
}


/* Heart Click */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn:active
.sicon-heart {

    transform: scale(.88);
}


/* Favorite State */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn.favorited,

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn.added,

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn.is-added {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}


:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn.favorited
.sicon-heart,

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn.added
.sicon-heart,

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-wishlist-btn.is-added
.sicon-heart {

    color: #8b3e2f !important;

    transform: scale(1.05);
}


/* =========================================================
   CONTENT
   ========================================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content {

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

    flex: 1 1 auto !important;

    width: 100% !important;

    padding: 15px 5px 5px !important;

    background: transparent !important;
}


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

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-main {

    margin-bottom: 5px !important;
}


:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-title {

    margin: 0 !important;

    font-size: 18px !important;
    font-weight: 600 !important;

    line-height: 1.5 !important;

    text-align: center !important;
}


:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-title a {

    display: -webkit-box !important;

    overflow: hidden !important;

    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    color: var(--coffee-text) !important;

    text-align: center !important;
    text-decoration: none !important;

    transition: color .25s ease !important;
}


:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-entry:hover
.s-product-card-content-title a {

    color: #6b3b28 !important;
}






/* =========================================================
   PRICE
   ========================================================= */

/* =========================================================
   PRICE - FINAL CLEAN VERSION
   آخر شكل للسعر بدون أي تغيير عند Hover على الكارت
   ========================================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-sub {
    position: relative !important;
    isolation: isolate !important;

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

    width: fit-content !important;
    min-width: 95px !important;

    margin: 5px auto 14px !important;
    padding: 7px 18px !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            170deg,
            rgb(183 125 103 / 82%),
            rgb(81 54 45 / 92%)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 999px !important;

    backdrop-filter: blur(9px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(9px) saturate(115%) !important;

    box-shadow:
        0 5px 14px rgba(72, 42, 31, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;

    transform: none !important;
}


:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-price {
    position: relative !important;
    z-index: 2 !important;

    margin: 0 !important;

    color: #ffffff !important;

    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    text-align: center !important;
    letter-spacing: 0.15px !important;

    transform: none !important;

    text-shadow:
        0 1px 2px rgba(55, 30, 20, 0.16) !important;
}


:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-price
.sicon-sar {
    margin-inline-start: 3px !important;

    color: inherit !important;
    font-size: 18px !important;
}


@media screen and (max-width: 767px) {

    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-content-sub {
        min-width: 82px !important;
        margin: 4px auto 11px !important;
        padding: 6px 14px !important;
    }


    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-price {
        font-size: 20px !important;
    }


    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-price
    .sicon-sar {
        font-size: 16px !important;
    }
}



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



/* =========================================================
   ADD TO CART
   ========================================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element {

    position: relative !important;

    isolation: isolate !important;

    display: flex !important;

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

    width: 100% !important;

    min-height: 48px !important;

    padding: 9px 16px !important;

    overflow: hidden !important;

    background:
        var(--coffee-light) !important;

    border:
        1px solid rgba(91,49,34,.20) !important;

    border-radius: 13px !important;

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

    font-size: 14px !important;
    font-weight: 700 !important;

    box-shadow:
        0 5px 12px rgba(67,39,26,.10) !important;

    transform: translateY(0);

    transition:
        color .32s ease,
        border-color .32s ease,
        transform .25s ease,
        box-shadow .30s ease !important;
}


/* =========================================================
   LEFT FILL
   ========================================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element::before {

    content: "" !important;

    display: block !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    z-index: 0 !important;

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

    pointer-events: none !important;

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

    transform: scaleX(0);

    transform-origin: left center;

    transition:
        transform .52s
        cubic-bezier(.65,0,.35,1) !important;
}


/* =========================================================
   RIGHT FILL
   ========================================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element::after {

    content: "" !important;

    display: block !important;

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;

    z-index: 0 !important;

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

    pointer-events: none !important;

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

    transform: scaleX(0);

    transform-origin: right center;

    transition:
        transform .52s
        cubic-bezier(.65,0,.35,1) !important;
}


/* =========================================================
   HOVER - يقفلوا على المنتصف
   ========================================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element:hover::before,

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element:hover::after,

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element:focus-visible::before,

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element:focus-visible::after {

    transform: scaleX(1);
}


:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element:hover,

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element:focus-visible {

    color: #fff !important;

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

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 18px rgba(67,39,26,.20) !important;
}


/* =========================================================
   BUTTON TEXT
   ========================================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element
.s-button-text {

    position: relative !important;

    z-index: 3 !important;

    display: flex !important;

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

    gap: 7px !important;

    color: inherit !important;
}


:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element
.s-button-text span {

    position: relative !important;

    z-index: 3 !important;

    color: inherit !important;
}


/* =========================================================
   SHOPPING BAG ICON
   ========================================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.sicon-shopping-bag {

    position: relative !important;

    z-index: 3 !important;

    display: inline-block !important;

    font-size: 17px !important;

    color: inherit !important;

    transform: translateY(0);

    transition:
        transform .3s ease,
        color .3s ease !important;
}


:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element:hover
.sicon-shopping-bag {

    transform:
        translateY(-1px)
        scale(1.08);

    color: #fff !important;
}


/* =========================================================
   CLICK
   ========================================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element:active {

    transform:
        translateY(0)
        scale(.985) !important;
}


:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element:active::before,

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element:active::after {

    transform:
        scaleX(1) !important;
}


/* =========================================================
   CARD ANIMATION
   ========================================================= */

@keyframes coffeeCardIn {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   STAGGER
   ========================================================= */

.s-products-slider-card:nth-child(2),
.s-products-list-wrapper.s-products-list-vertical-cards
> custom-salla-product-card:nth-child(2) {
    animation-delay: .05s;
}

.s-products-slider-card:nth-child(3),
.s-products-list-wrapper.s-products-list-vertical-cards
> custom-salla-product-card:nth-child(3) {
    animation-delay: .10s;
}

.s-products-slider-card:nth-child(4),
.s-products-list-wrapper.s-products-list-vertical-cards
> custom-salla-product-card:nth-child(4) {
    animation-delay: .15s;
}

.s-products-slider-card:nth-child(5),
.s-products-list-wrapper.s-products-list-vertical-cards
> custom-salla-product-card:nth-child(5) {
    animation-delay: .20s;
}


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

@media screen and (max-width: 767px) {

    .s-products-list-wrapper.s-products-list-vertical-cards {
        gap: 12px !important;
    }


    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-entry {

        padding: 9px !important;

        border-radius: 17px !important;
    }


    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-image,

    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-image-cover {

        border-radius: 13px !important;
    }


    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-content {

        padding:
            12px 2px 3px !important;
    }


    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-content-title {

        font-size: 15px !important;
    }




    /* Cart */

    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-content-footer
    .s-button-element {

        min-height: 44px !important;

        padding:
            8px 9px !important;

        font-size: 13px !important;

        border-radius: 11px !important;
    }


    /* Wishlist */

    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-image
    > salla-button.s-product-card-wishlist-btn {

        top: 7px !important;
        left: 7px !important;

        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
        min-height: 34px !important;
    }


    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-wishlist-btn
    .s-button-element {

        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
        min-height: 34px !important;
    }


    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-wishlist-btn
    .sicon-heart {

        font-size: 21px !important;
    }
}


/* =========================================================
   TOUCH
   ========================================================= */

@media (hover: none) {

    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-entry:hover {

        transform: translateY(0);
    }


    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-entry:hover
    .s-product-card-image-cover {

        transform: scale(1);
    }


    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-wishlist-btn:hover
    .sicon-heart {

        transform: scale(1);
    }


}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-entry {

        animation: none !important;
    }


    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-entry *,

    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-entry *::before,

    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    )
    .s-product-card-entry *::after {

        animation: none !important;
        transition: none !important;
    }
}


:is( .s-products-slider-card, .s-products-list-wrapper.s-products-list-vertical-cards ) .s-product-card-content {
    display: contents !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    padding: 15px 5px 5px !important;
    background: transparent !important;
}

/* لون زر إضافة للسلة */
:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element {
    background: #7A5749 !important;
    border-color: #7A5749 !important;
    color: #fff !important;
}


/* لون الأنيميشن من اليمين والشمال */
:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element::before,
:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element::after {
    background: #5B3122 !important;
}


/* Hover */
:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
)
.s-product-card-content-footer
.s-button-element:hover {
    border-color: #5B3122 !important;
    color: #fff !important;
}  



/* =========================================================
   SLIDER HEADER ACTIONS
   عرض الكل + الأسهم
   ========================================================= */

.s-slider-block__title-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 10px !important;

    margin: 0 !important;
}


/* =========================================================
   عرض الكل
   ========================================================= */

.s-slider-block__display-all {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 40px !important;

    padding: 8px 17px !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            170deg,
            rgba(183, 125, 103, 0.18),
            rgba(81, 54, 45, 0.10)
        ) !important;

    border: 1px solid rgba(122, 87, 73, 0.22) !important;
    border-radius: 999px !important;

    color: #5B3122 !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    text-decoration: none !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;

    box-shadow:
        0 4px 12px rgba(72, 42, 31, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.35) !important;

    transition:
        color .3s ease,
        border-color .3s ease,
        transform .25s ease,
        box-shadow .3s ease !important;

    isolation: isolate !important;
}


/* تعبئة الزر من الجانبين */

.s-slider-block__display-all::before,
.s-slider-block__display-all::after {
    content: "";

    position: absolute !important;

    top: 0 !important;

    z-index: -1 !important;

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

    background: #7A5749 !important;

    transform: scaleX(0);

    transition:
        transform .4s cubic-bezier(.65, 0, .35, 1) !important;
}


.s-slider-block__display-all::before {
    left: 0 !important;
    transform-origin: left center !important;
}


.s-slider-block__display-all::after {
    right: 0 !important;
    transform-origin: right center !important;
}


.s-slider-block__display-all:hover::before,
.s-slider-block__display-all:hover::after {
    transform: scaleX(1);
}


.s-slider-block__display-all:hover {
    color: #fff !important;

    border-color: #7A5749 !important;

    transform: translateY(-2px);

    box-shadow:
        0 7px 16px rgba(72, 42, 31, 0.17) !important;
}


/* =========================================================
   NAV CONTAINER
   ========================================================= */

.s-slider-block__title-nav {
    display: flex !important;
    align-items: center !important;

    gap: 7px !important;

    margin: 0 !important;
}


/* =========================================================
   ARROWS
   ========================================================= */

.s-slider-block__title-nav
.s-slider-nav-arrow {
    position: relative !important;

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

    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #f4f0e5 !important;

    border: 1px solid rgba(122, 87, 73, 0.18) !important;
    border-radius: 50% !important;

    color: #5B3122 !important;

    box-shadow:
        0 4px 11px rgba(72, 42, 31, 0.10) !important;

    cursor: pointer !important;

    transform: translateY(0);

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease !important;
}


/* Arrow Hover */

.s-slider-block__title-nav
.s-slider-nav-arrow:hover {
    background: #7A5749 !important;

    border-color: #7A5749 !important;

    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 7px 15px rgba(72, 42, 31, 0.18) !important;
}


/* الضغط */

.s-slider-block__title-nav
.s-slider-nav-arrow:active {
    transform: translateY(0) scale(.94) !important;
}


/* =========================================================
   SVG
   ========================================================= */

.s-slider-block__title-nav
.s-slider-button-icon {
    display: flex !important;

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

    width: 19px !important;
    height: 19px !important;
}


.s-slider-block__title-nav
.s-slider-button-icon svg {
    display: block !important;

    width: 19px !important;
    height: 19px !important;

    fill: currentColor !important;

    transition:
        transform .25s ease !important;
}


.s-slider-block__title-nav
.s-slider-nav-arrow:hover
.s-slider-button-icon svg {
    transform: scale(1.12);
}


/* =========================================================
   DISABLED ARROW
   ========================================================= */

.s-slider-block__title-nav
.s-slider-nav-arrow[aria-disabled="true"] {
    opacity: .38 !important;

    cursor: default !important;

    pointer-events: none !important;

    box-shadow: none !important;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.s-slider-block__title-nav
.s-slider-nav-arrow:focus-visible,
.s-slider-block__display-all:focus-visible {
    outline: 2px solid rgba(91, 49, 34, 0.35) !important;
    outline-offset: 3px !important;
}


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

@media screen and (max-width: 767px) {

    .s-slider-block__title-left {
        gap: 7px !important;
    }


    .s-slider-block__display-all {
        min-height: 36px !important;

        padding: 7px 13px !important;

        font-size: 12px !important;
    }


    .s-slider-block__title-nav
    .s-slider-nav-arrow {
        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;
    }


    .s-slider-block__title-nav
    .s-slider-button-icon,
    .s-slider-block__title-nav
    .s-slider-button-icon svg {
        width: 17px !important;
        height: 17px !important;
    }
}




.s-slider-block__title-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 2px !important;
}  


:is( .s-products-slider-card, .s-products-list-wrapper.s-products-list-vertical-cards ) .s-product-card-content-title a {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    color: var(--coffee-text) !important;
    font-size: 17px !important;
    margin-top: 10px !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: color .25s ease !important;
}



:is( .s-products-slider-card, .s-products-list-wrapper.s-products-list-vertical-cards ) .s-product-card-content-title a {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    color: var(--coffee-text) !important;
    font-size: 16px !important;
    margin-top: 10px !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: color .25s ease !important;
}

:is( .s-products-slider-card, .s-products-list-wrapper.s-products-list-vertical-cards ) .s-product-card-entry {
    position: revert-rule !important;
    display: grid !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 11px !important;
    background: var(--coffee-card-bg) !important;
    border: 1px solid rgba(74, 43, 29, 0.08) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 14px rgba(58, 38, 24, 0.12) !important;
    transform: translateY(0);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease !important;
    animation: coffeeCardIn .55s ease both;
}





/*********************الفوتر **********************/

/* =========================================================
   DESKTOP MAIN MENU + DROPDOWN
   ========================================================= */

@media screen and (min-width: 1024px) {

    /* ===============================
       ROOT MENU
       =============================== */

    .main-menu > li.root-level {
        position: relative !important;
        margin-inline: 3px !important;
    }


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

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

        min-height: 44px !important;

        padding: 8px 13px !important;

        color: #3f3029 !important;

        font-size: 14px !important;
        font-weight: 700 !important;

        border-radius: 10px !important;

        text-decoration: none !important;

        transition:
            color .25s ease,
            background .25s ease,
            transform .25s ease !important;
    }


    /* Hover الرئيسية / القهوة / الأدوات */

    .main-menu > li.root-level > a:hover,
    .main-menu > li.root-level:hover > a {
        color: #5B3122 !important;

        background:
            rgba(122, 87, 73, .07) !important;
    }


    /* الخط الصغير تحت العنصر */

    .main-menu > li.root-level > a::before {
        content: "";

        position: absolute !important;

        bottom: 4px !important;
        left: 50% !important;

        width: 0 !important;
        height: 2px !important;

        background: #7A5749 !important;

        border-radius: 999px !important;

        transform: translateX(-50%) !important;

        transition: width .28s ease !important;
    }


    .main-menu > li.root-level:hover > a::before {
        width: 45% !important;
    }


    /* =====================================================
       DROPDOWN
       ===================================================== */

    .main-menu
    > li.root-level.has-children
    > .sub-menu {

        position: absolute !important;

        top: calc(100% + 7px) !important;

        left: 50% !important;
        right: auto !important;

        z-index: 9999 !important;

        width: 225px !important;
        min-width: 225px !important;

        padding: 8px !important;

        background:
            linear-gradient(
                145deg,
                #f8f5ed,
                #f1eadf
            ) !important;

        border:
            1px solid rgba(91, 49, 34, .10) !important;

        border-radius: 16px !important;

        box-shadow:
            0 15px 35px rgba(63, 34, 24, .15),
            0 3px 10px rgba(63, 34, 24, .06) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform:
            translateX(-50%)
            translateY(8px) !important;

        transition:
            opacity .22s ease,
            visibility .22s ease,
            transform .22s ease !important;
    }


    /* مساحة وهمية تمنع القائمة من القفل
       أثناء تحريك الماوس */

    .main-menu
    > li.root-level.has-children
    > .sub-menu::before {

        content: "";

        position: absolute !important;

        top: -12px !important;
        left: 0 !important;

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

        background: transparent !important;
    }


    /* ظهور القائمة */

    .main-menu
    > li.root-level.has-children:hover
    > .sub-menu {

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform:
            translateX(-50%)
            translateY(0) !important;
    }


    /* =====================================================
       DROPDOWN LIST
       ===================================================== */

    .main-menu
    .sub-menu > ul {

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

        gap: 3px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;

        background: transparent !important;
    }


    .main-menu
    .sub-menu > ul > li {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;
    }


    /* =====================================================
       DROPDOWN LINKS
       ===================================================== */

    .main-menu
    .sub-menu > ul > li > a {

        position: relative !important;

        display: flex !important;
        align-items: center !important;

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

        padding: 9px 13px !important;

        color: #4c3a32 !important;

        background: transparent !important;

        border:
            1px solid transparent !important;

        border-radius: 10px !important;

        font-size: 13px !important;
        font-weight: 650 !important;

        text-decoration: none !important;

        transition:
            background .22s ease,
            color .22s ease,
            padding .22s ease,
            border-color .22s ease !important;
    }


    /* النقطة الصغيرة */

    .main-menu
    .sub-menu > ul > li > a::before {

        content: "";

        flex: 0 0 auto !important;

        width: 6px !important;
        height: 6px !important;

        margin-inline-end: 9px !important;

        background:
            rgba(122, 87, 73, .35) !important;

        border-radius: 50% !important;

        transition:
            background .22s ease,
            transform .22s ease !important;
    }


    /* Hover */

    .main-menu
    .sub-menu > ul > li > a:hover {

        background:
            rgba(122, 87, 73, .10) !important;

        border-color:
            rgba(122, 87, 73, .08) !important;

        color: #5B3122 !important;

        padding-inline-start: 17px !important;
    }


    .main-menu
    .sub-menu > ul > li > a:hover::before {

        background: #7A5749 !important;

        transform: scale(1.3) !important;
    }


    /* =====================================================
       تنظيف ستايل القالب القديم
       ===================================================== */

    .main-menu
    .sub-menu li::after {

        border: 0 !important;
    }


    .main-menu
    .sub-menu a span {

        color: inherit !important;
    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media screen and (min-width: 1024px) and (max-width: 1200px) {

    .main-menu > li.root-level > a {

        padding-inline:
            9px !important;

        font-size:
            13px !important;
    }


    .main-menu
    > li.root-level.has-children
    > .sub-menu {

        width:
            205px !important;

        min-width:
            205px !important;
    }


    .main-menu
    .sub-menu > ul > li > a {

        min-height:
            40px !important;

        font-size:
            12.5px !important;
    }

}



/*******************الصفحه التانييه**************************/



/* ==================================================
   LAB V60 PRODUCT PAGE
   PURE CSS - NO JAVASCRIPT REQUIRED
================================================== */

div[id^="product-"] {
    --coffee: #845b49;
    --coffee-dark: #604034;
    --coffee-soft: #a77e69;

    --cream: #f1e6d6;
    --cream-light: #faf6ef;

    --text: #282321;
    --muted: #746a65;

    --border: rgba(96, 64, 52, 0.12);

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(380px, .92fr);

    gap: clamp(25px, 4vw, 60px);

    align-items: start !important;

    direction: ltr;

    margin-top: 30px;
    margin-bottom: 60px;
}


/* ==================================================
   IMAGE SIDE
================================================== */

div[id^="product-"] > .sidebar {

    direction: rtl;

    width: 100% !important;

    margin: 0 !important;

    position: sticky !important;

    top: 110px !important;

    padding: 14px;

    overflow: hidden !important;

    border-radius: 32px !important;

    border: 1px solid var(--border);

    background:

        radial-gradient(
            circle at 85% 15%,
            rgba(132, 91, 73, .12),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #eadbc6 0%,
            #f5ecdf 52%,
            #fbf8f3 100%
        );

    box-shadow:
        0 25px 65px
        rgba(68, 45, 36, .08);
}


/* Slider */

div[id^="product-"] > .sidebar
.details-slider {

    border-radius: 24px !important;

    overflow: hidden;
}


/* إزالة الارتفاع الإجباري */

div[id^="product-"] > .sidebar
.swiper-wrapper {

    height: auto !important;
}


div[id^="product-"] > .sidebar
.swiper-slide {

    height: auto !important;

    display: flex !important;

    align-items: center;

    justify-content: center;

    background: transparent !important;
}


/* الصورة */



@media (hover:hover) {

    div[id^="product-"] > .sidebar
    .swiper-slide:hover img {

        transform: scale(1.035);

        filter:
            drop-shadow(
                0 18px 25px
                rgba(50, 34, 28, .12)
            );
    }
}


/* Wishlist */

div[id^="product-"] > .sidebar
.btn--wishlist {

    left: 18px !important;

    right: auto !important;

    top: 18px !important;

    z-index: 10;
}


div[id^="product-"] > .sidebar
.btn--wishlist button {

    width: 48px !important;

    height: 48px !important;

    border-radius: 50% !important;

    background:
        rgba(255, 253, 248, .9)
        !important;

    border:
        1px solid
        rgba(96, 64, 52, .12)
        !important;

    color:
        var(--coffee)
        !important;

    box-shadow:
        0 8px 22px
        rgba(50, 35, 28, .08);
}


/* ==================================================
   RIGHT PRODUCT CARD
================================================== */

div[id^="product-"] > .main-content {

    direction: rtl;

    width: 100% !important;

    margin: 0 !important;

    position: relative !important;

    top: auto !important;

    overflow: visible !important;

    display: flex !important;

    flex-direction: column;

    padding:
        clamp(24px, 3vw, 40px)
        !important;

    border-radius: 32px;

    border:
        1px solid
        var(--border);

    background:

        linear-gradient(
            145deg,
            rgba(255,253,249,.98),
            rgba(249,244,237,.96)
        );

    box-shadow:
        0 25px 65px
        rgba(68,45,36,.065);
}


/* ==================================================
   ترتيب المحتوى
================================================== */

div[id^="product-"]
> .main-content
> [data-testid="store-product-title"] {

    order: 1;
}


div[id^="product-"]
> .main-content
> form.product-form {

    order: 2;
}


div[id^="product-"]
> .main-content
> salla-installment {

    order: 3;
}


div[id^="product-"]
> .main-content
> [data-testid="store-product-description"] {

    order: 10;
}


/* نخفي السعر المكرر أعلى الصفحة */

div[id^="product-"]
> .main-content
> [data-testid="store-product-price"] {

    display: none !important;
}


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

div[id^="product-"]
[data-testid="store-product-title"] {

    position: relative;

    margin:
        0 0 24px
        !important;

    padding-right: 18px;

    color:
        var(--text)
        !important;

    font-size:
        clamp(25px, 2.2vw, 36px)
        !important;

    line-height:
        1.55
        !important;

    font-weight:
        800
        !important;

    letter-spacing:
        -.02em;
}


div[id^="product-"]
[data-testid="store-product-title"]
::before {

    content: "";

    position: absolute;

    right: 0;

    top: 8px;

    width: 4px;

    height:
        calc(100% - 16px);

    min-height: 32px;

    border-radius: 50px;

    background:

        linear-gradient(
            180deg,
            var(--coffee),
            var(--coffee-soft)
        );
}


/* ==================================================
   FORM
================================================== */

div[id^="product-"]
form.product-form {

    margin: 0 !important;
}


/* PRICE BOX */

div[id^="product-"]
form.product-form
> section:first-of-type {

    padding:
        18px 20px
        !important;

    border-radius:
        22px
        !important;

    border:
        1px solid
        rgba(96,64,52,.1);

    background:

        linear-gradient(
            135deg,
            #eee0cd,
            #fbf6ef
        )
        !important;
}


/* السعر */

div[id^="product-"]
.total-price {

    font-size:
        clamp(27px, 2.3vw, 36px)
        !important;

    font-weight:
        800
        !important;

    color:
        var(--coffee-dark)
        !important;
}


/* كلمة السعر */

div[id^="product-"]
form.product-form
.form-label b {

    color:
        var(--muted);

    font-size:
        13px;

    font-weight:
        600;
}


/* ==================================================
   QUANTITY + CART AREA
================================================== */

div[id^="product-"]
.sticky-product-bar {

    padding:
        17px 0 0
        !important;

    background:
        transparent
        !important;
}


/* Quantity box */

div[id^="product-"]
.sticky-product-bar__quantity {

    padding:
        13px 15px;

    margin-bottom:
        15px
        !important;

    border:
        1px solid
        var(--border);

    border-radius:
        17px;

    background:
        rgba(255,255,255,.75);
}


/* Quantity input */

div[id^="product-"]
.s-quantity-input-container {

    overflow: hidden;

    min-height: 46px;

    border-radius:
        14px
        !important;

    border:
        1px solid
        rgba(96,64,52,.12)
        !important;

    background:
        #fffdf9;
}


div[id^="product-"]
.s-quantity-input-button {

    width:
        44px
        !important;

    color:
        var(--coffee)
        !important;
}


div[id^="product-"]
.s-quantity-input-input {

    color:
        var(--text);

    font-weight:
        700;
}


/* ==================================================
   ADD TO CART
================================================== */

div[id^="product-"]
[data-testid="store-product-add-to-cart"]
.s-button-primary {

    min-height:
        58px
        !important;

    border-radius:
        18px
        !important;

    border:
        none
        !important;

    background:

        linear-gradient(
            135deg,
            #895e4b,
            #624136
        )
        !important;

    color:
        #fff
        !important;

    font-size:
        15px
        !important;

    font-weight:
        700
        !important;

    box-shadow:
        0 14px 28px
        rgba(96,64,52,.20);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


@media (hover:hover) {

    div[id^="product-"]
    [data-testid="store-product-add-to-cart"]
    .s-button-primary:hover {

        transform:
            translateY(-2px);

        box-shadow:
            0 18px 35px
            rgba(96,64,52,.27);
    }
}


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

div[id^="product-"]
[data-testid="store-product-description"] {

    margin-top:
        32px
        !important;

    padding:
        28px 0 0
        !important;

    border-top:
        1px solid
        var(--border);

    color:
        #504844;

    font-size:
        15px;

    line-height:
        2
        !important;
}


/* العناوين */

div[id^="product-"]
.product__description h1,

div[id^="product-"]
.product__description h2,

div[id^="product-"]
.product__description h3 {

    color:
        var(--text)
        !important;

    font-weight:
        800
        !important;

    line-height:
        1.6
        !important;

    margin-top:
        28px
        !important;

    margin-bottom:
        12px
        !important;
}


div[id^="product-"]
.product__description h1 {

    font-size:
        21px
        !important;
}


div[id^="product-"]
.product__description h2 {

    font-size:
        20px
        !important;
}


div[id^="product-"]
.product__description h3 {

    font-size:
        18px
        !important;
}


/* الروابط الزرقاء الموجودة في الوصف */

div[id^="product-"]
.product__description a {

    color:
        var(--coffee)
        !important;

    text-decoration-color:
        rgba(132,91,73,.35)
        !important;

    text-underline-offset:
        4px;
}


/* المواصفات */

div[id^="product-"]
.product__description ul {

    display: grid;

    gap: 8px;

    margin-top: 14px;
}


div[id^="product-"]
.product__description li {

    padding:
        10px 13px;

    border-radius:
        12px;

    background:
        rgba(238,224,205,.48);
}


/* ==================================================
   TAGS
================================================== */

div[id^="product-"]
a[href*="/tag-"] {

    display:
        inline-flex
        !important;

    margin:
        4px 2px
        !important;

    padding:
        7px 11px;

    border-radius:
        999px;

    border:
        1px solid
        rgba(96,64,52,.1);

    background:
        #f5ede3;

    color:
        var(--coffee)
        !important;

    text-decoration:
        none
        !important;

    font-size:
        12px
        !important;
}


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

@media
(min-width:768px)
and (max-width:1100px) {

    div[id^="product-"] {

        grid-template-columns:
            minmax(0, .95fr)
            minmax(0, 1.05fr);

        gap: 20px;
    }


    div[id^="product-"]
    > .main-content {

        padding:
            24px
            !important;
    }


    div[id^="product-"]
    [data-testid="store-product-title"] {

        font-size:
            25px
            !important;
    }

}


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

@media (max-width:767px) {

    div[id^="product-"] {

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

        gap:
            15px;

        margin-top:
            10px;

        margin-bottom:
            35px;
    }


    /* Image */

    div[id^="product-"]
    > .sidebar {

        position:
            relative
            !important;

        top:
            auto
            !important;

        padding:
            8px;

        border-radius:
            22px
            !important;
    }


    div[id^="product-"]
    > .sidebar
    .details-slider {

        border-radius:
            17px
            !important;
    }


    div[id^="product-"]
    > .sidebar img {

        max-height:
            none;

        padding:
            16px;
    }


    /* Info */

    div[id^="product-"]
    > .main-content {

        padding:
            20px 15px
            24px
            !important;

        border-radius:
            22px;
    }


    /* Title */

    div[id^="product-"]
    [data-testid="store-product-title"] {

        font-size:
            clamp(21px,6vw,27px)
            !important;

        margin-bottom:
            16px
            !important;

        line-height:
            1.5
            !important;
    }


    /* Price */

    div[id^="product-"]
    .total-price {

        font-size:
            27px
            !important;
    }


    /* Quantity */

    div[id^="product-"]
    .sticky-product-bar__quantity {

        padding:
            11px 12px;
    }


    /* Add cart */

    div[id^="product-"]
    [data-testid="store-product-add-to-cart"]
    .s-button-primary {

        min-height:
            55px
            !important;

        border-radius:
            15px
            !important;
    }


    /* Description */

    div[id^="product-"]
    [data-testid="store-product-description"] {

        margin-top:
            25px
            !important;

        font-size:
            14px;

        line-height:
            1.9
            !important;
    }

}


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

@media (max-width:390px) {

    div[id^="product-"]
    > .main-content {

        padding-left:
            12px
            !important;

        padding-right:
            12px
            !important;
    }


    div[id^="product-"]
    .total-price {

        font-size:
            24px
            !important;
    }

}



div[id^="product-"] > .sidebar img {
    width: 100% !important;
    height: auto !important;
    max-height: 640px;
    aspect-ratio: 1 / 1;
    object-fit: contain !important;
    transition: transform .45s ease, filter .45s ease;
}


.s-slider-thumbs .s-slider-thumbs-container .swiper-slide.swiper-slide-thumb-active:after {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) #916d18;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: var(--color-primary);
}




div[id^="product-"] > .main-content {
    direction: rtl;
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    top: auto !important;
    overflow: visible !important;
    display: flow-root !important;
    flex-direction: column;
    padding: clamp(24px, 3vw, 40px) !important;
    border-radius: 32px;
    border: ;
    display: fle !important;
    background: linear-gradient(145deg, rgba(255, 253, 249, .98), rgba(249, 244, 237, .96));
    box-shadow: 0 25px 65px rgba(68, 45, 36, .065);
}

@media (max-width: 767px) {
    div[id^="product-"] > .sidebar img {
        max-height: none;
        padding: 0px;
    }
}


*, :after, :before {
    box-sizing: border-box;
}  


/* ==========================================================
   LAB V60 — FINAL RESPONSIVE FIX
   ضع هذا الكود في نهاية ملف CSS
========================================================== */


/* ==========================================================
   GLOBAL PRODUCT SAFETY
========================================================== */

div[id^="product-"],
div[id^="product-"] *,
div[id^="product-"] *::before,
div[id^="product-"] *::after {
    box-sizing: border-box;
}


div[id^="product-"] {
    width: 100%;
    max-width: 100%;

    min-width: 0;

    overflow: visible;
}


div[id^="product-"] > .sidebar,
div[id^="product-"] > .main-content {
    min-width: 0;

    max-width: 100%;

    width: 100% !important;
}


/* مهم جدًا:
   يرجع main-content إلى flex
   لأن آخر الكود القديم كان بيكسره
*/

div[id^="product-"] > .main-content {
    display: flex !important;

    flex-direction: column !important;

    position: relative !important;

    overflow: visible !important;
}


/* ==========================================================
   MEDIA / SLIDER SAFETY
========================================================== */

div[id^="product-"] salla-slider,
div[id^="product-"] .swiper,
div[id^="product-"] .swiper-wrapper,
div[id^="product-"] .swiper-slide {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;
}


div[id^="product-"] > .sidebar
.swiper-wrapper {
    height: auto !important;
}


div[id^="product-"] > .sidebar
.swiper-slide {
    display: flex !important;

    align-items: center;

    justify-content: center;

    height: auto !important;
}


/* الصورة */

div[id^="product-"] > .sidebar img {
    display: block;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    max-height: 640px;

    margin: auto;

    aspect-ratio: 1 / 1;

    object-fit: contain !important;

    padding:
        clamp(16px, 2.5vw, 38px);

    transition:
        transform .4s ease,
        filter .4s ease;
}


/* ==========================================================
   FORM SAFETY
========================================================== */

div[id^="product-"]
form.product-form,

div[id^="product-"]
salla-add-product-button,

div[id^="product-"]
salla-button,

div[id^="product-"]
salla-quick-buy,

div[id^="product-"]
salla-installment {
    max-width: 100%;

    min-width: 0;
}


div[id^="product-"]
form.product-form {
    width: 100%;
}


/* Prevent price / content overflow */

div[id^="product-"]
.price-wrapper,

div[id^="product-"]
[data-testid="store-product-price"] {
    max-width: 100%;

    flex-wrap: wrap;
}


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

div[id^="product-"]
.product__description {
    max-width: 100%;

    overflow-wrap: anywhere;

    word-break: normal;
}


div[id^="product-"]
.product__description img,

div[id^="product-"]
.product__description video,

div[id^="product-"]
.product__description iframe {
    max-width: 100% !important;

    height: auto;
}


div[id^="product-"]
.product__description table {
    display: block;

    width: 100%;

    max-width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}


/* ==========================================================
   LARGE DESKTOP
   1400px+
========================================================== */

@media (min-width: 1400px) {

    div[id^="product-"] {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(0, .92fr)
            !important;

        gap:
            clamp(48px, 4vw, 72px)
            !important;

        align-items:
            start !important;
    }


    div[id^="product-"]
    > .main-content {
        padding:
            38px 40px
            !important;
    }


    div[id^="product-"]
    [data-testid="store-product-title"] {
        font-size:
            clamp(30px, 2.2vw, 38px)
            !important;
    }

}


/* ==========================================================
   NORMAL DESKTOP / LAPTOP
   1100px — 1399px
========================================================== */

@media
(min-width: 1100px)
and (max-width: 1399px) {

    div[id^="product-"] {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            !important;

        gap:
            clamp(25px, 3vw, 42px)
            !important;
    }


    div[id^="product-"]
    > .main-content {
        padding:
            clamp(25px, 2.5vw, 32px)
            !important;
    }


    div[id^="product-"]
    > .sidebar {
        top:
            100px !important;
    }


    div[id^="product-"]
    > .sidebar img {
        max-height:
            580px;
    }


    div[id^="product-"]
    [data-testid="store-product-title"] {
        font-size:
            clamp(25px, 2.2vw, 32px)
            !important;
    }

}


/* ==========================================================
   SMALL LAPTOP / TABLET LANDSCAPE
   992px — 1099px
========================================================== */

@media
(min-width: 992px)
and (max-width: 1099px) {

    div[id^="product-"] {
        grid-template-columns:
            minmax(0, .95fr)
            minmax(0, 1.05fr)
            !important;

        gap:
            20px
            !important;

        margin-top:
            20px;

        margin-bottom:
            45px;
    }


    div[id^="product-"]
    > .sidebar {
        top:
            90px !important;

        padding:
            10px;

        border-radius:
            26px !important;
    }


    div[id^="product-"]
    > .sidebar img {
        max-height:
            520px;

        padding:
            18px;
    }


    div[id^="product-"]
    > .main-content {
        padding:
            24px
            !important;

        border-radius:
            26px;
    }


    div[id^="product-"]
    [data-testid="store-product-title"] {
        font-size:
            24px
            !important;

        line-height:
            1.5
            !important;
    }


    div[id^="product-"]
    .total-price {
        font-size:
            28px
            !important;
    }

}


/* ==========================================================
   TABLET
   768px — 991px

   هنا نحول الصفحة لعمود واحد.
   أفضل كثيرًا من ضغط الصورة والمعلومات جنب بعض.
========================================================== */

@media
(min-width: 768px)
and (max-width: 991px) {

    div[id^="product-"] {
        display:
            grid !important;

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

        gap:
            22px !important;

        align-items:
            stretch !important;

        direction:
            rtl;

        margin-top:
            16px;

        margin-bottom:
            45px;
    }


    /* Gallery */

    div[id^="product-"]
    > .sidebar {
        position:
            relative !important;

        top:
            auto !important;

        width:
            100% !important;

        max-width:
            720px;

        margin:
            0 auto !important;

        padding:
            12px;

        border-radius:
            28px !important;
    }


    div[id^="product-"]
    > .sidebar img {
        width:
            100% !important;

        max-height:
            570px;

        padding:
            22px;

        aspect-ratio:
            1 / 1;
    }


    /* Information */

    div[id^="product-"]
    > .main-content {
        width:
            100% !important;

        max-width:
            720px;

        margin:
            0 auto !important;

        padding:
            28px
            !important;

        border-radius:
            28px;
    }


    div[id^="product-"]
    [data-testid="store-product-title"] {
        font-size:
            clamp(25px, 4vw, 31px)
            !important;

        line-height:
            1.5
            !important;
    }


    div[id^="product-"]
    .total-price {
        font-size:
            30px
            !important;
    }


    /* Quantity */

    div[id^="product-"]
    .sticky-product-bar__quantity {
        display:
            flex !important;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            15px;
    }


    /* Buy button */

    div[id^="product-"]
    [data-testid="store-product-add-to-cart"]
    .s-button-primary {
        min-height:
            58px !important;
    }


    /* Description specs */

    div[id^="product-"]
    .product__description ul {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            8px;
    }

}


/* ==========================================================
   MOBILE
   <= 767px
========================================================== */

@media (max-width: 767px) {

    div[id^="product-"] {
        display:
            grid !important;

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

        gap:
            14px !important;

        align-items:
            stretch !important;

        direction:
            rtl;

        width:
            100% !important;

        max-width:
            100%;

        margin:
            8px 0 35px;

        padding:
            0 3px;
    }


    /* ======================================================
       PRODUCT IMAGE
    ====================================================== */

    div[id^="product-"]
    > .sidebar {
        position:
            relative !important;

        top:
            auto !important;

        width:
            100% !important;

        max-width:
            100%;

        margin:
            0 !important;

        padding:
            7px;

        border-radius:
            22px !important;

        overflow:
            hidden !important;

        box-shadow:
            0 12px 28px
            rgba(68,45,36,.06);
    }


    div[id^="product-"]
    > .sidebar
    .details-slider {
        border-radius:
            17px !important;
    }


    div[id^="product-"]
    > .sidebar img {
        display:
            block;

        width:
            100% !important;

        height:
            auto !important;

        max-height:
            none !important;

        min-height:
            0;

        aspect-ratio:
            1 / 1;

        object-fit:
            contain !important;

        padding:
            clamp(8px, 3vw, 16px)
            !important;
    }


    /* wishlist */

    div[id^="product-"]
    > .sidebar
    .btn--wishlist {
        top:
            11px !important;

        left:
            11px !important;
    }


    div[id^="product-"]
    > .sidebar
    .btn--wishlist button {
        width:
            42px !important;

        height:
            42px !important;
    }


    /* ======================================================
       PRODUCT INFORMATION
    ====================================================== */

    div[id^="product-"]
    > .main-content {
        display:
            flex !important;

        flex-direction:
            column !important;

        width:
            100% !important;

        max-width:
            100%;

        margin:
            0 !important;

        padding:
            20px 15px 22px
            !important;

        border-radius:
            21px;

        overflow:
            visible !important;
    }


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

    div[id^="product-"]
    [data-testid="store-product-title"] {
        width:
            100%;

        max-width:
            100%;

        margin:
            0 0 17px
            !important;

        padding-right:
            14px;

        font-size:
            clamp(21px, 6vw, 27px)
            !important;

        line-height:
            1.5
            !important;

        letter-spacing:
            -.015em;

        overflow-wrap:
            anywhere;
    }


    div[id^="product-"]
    [data-testid="store-product-title"]
    ::before {
        width:
            3px;

        top:
            5px;

        height:
            calc(100% - 10px);
    }


    /* ======================================================
       PRICE
    ====================================================== */

    div[id^="product-"]
    form.product-form
    > section:first-of-type {
        width:
            100%;

        padding:
            14px 15px
            !important;

        border-radius:
            16px
            !important;
    }


    div[id^="product-"]
    form.product-form
    > section:first-of-type
    .center-between {
        width:
            100%;

        gap:
            12px;

        flex-wrap:
            wrap;
    }


    div[id^="product-"]
    .price-wrapper {
        max-width:
            100%;

        gap:
            8px !important;
    }


    div[id^="product-"]
    .total-price {
        font-size:
            clamp(23px, 7vw, 28px)
            !important;

        white-space:
            nowrap;
    }


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

    div[id^="product-"]
    .sticky-product-bar {
        width:
            100%;

        position:
            static !important;

        padding-top:
            13px !important;
    }


    div[id^="product-"]
    .sticky-product-bar__quantity {
        display:
            flex !important;

        flex-direction:
            row;

        align-items:
            center !important;

        justify-content:
            space-between !important;

        gap:
            12px;

        width:
            100%;

        margin-bottom:
            12px !important;

        padding:
            10px 12px;

        border-radius:
            15px;
    }


    div[id^="product-"]
    .s-quantity-input {
        max-width:
            150px;
    }


    div[id^="product-"]
    .s-quantity-input-container {
        width:
            100%;

        min-height:
            42px;

        border-radius:
            12px !important;
    }


    div[id^="product-"]
    .s-quantity-input-button {
        width:
            40px !important;

        min-width:
            40px;
    }


    div[id^="product-"]
    .s-quantity-input-input {
        min-width:
            35px;

        text-align:
            center;
    }


    /* ======================================================
       ADD TO CART / QUICK BUY
    ====================================================== */

    div[id^="product-"]
    salla-add-product-button,

    div[id^="product-"]
    .s-add-product-button-main,

    div[id^="product-"]
    salla-quick-buy {
        width:
            100% !important;

        max-width:
            100% !important;
    }


    div[id^="product-"]
    .s-add-product-button-main {
        display:
            grid !important;

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

        gap:
            8px;
    }


    div[id^="product-"]
    [data-testid="store-product-add-to-cart"]
    .s-button-primary {
        width:
            100% !important;

        min-height:
            54px !important;

        padding:
            10px 16px !important;

        border-radius:
            15px !important;

        font-size:
            14px !important;
    }


    /* Apple Pay / Fast checkout */

    div[id^="product-"]
    salla-mini-checkout-widget,

    div[id^="product-"]
    salla-quick-buy,

    div[id^="product-"]
    apple-pay-button {
        width:
            100% !important;

        max-width:
            100% !important;
    }


    /* ======================================================
       INSTALLMENT
    ====================================================== */

    div[id^="product-"]
    salla-installment {
        display:
            block;

        width:
            100%;

        max-width:
            100%;

        margin-top:
            12px;
    }


    /* ======================================================
       TAGS
    ====================================================== */

    div[id^="product-"]
    a[href*="/tag-"] {
        max-width:
            100%;

        padding:
            6px 10px;

        margin:
            3px 2px
            !important;

        font-size:
            11px !important;

        white-space:
            normal;

        overflow-wrap:
            anywhere;
    }


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

    div[id^="product-"]
    .s-social-share-wrapper {
        max-width:
            100%;
    }


    div[id^="product-"]
    .s-social-share-list {
        flex-wrap:
            wrap;
    }


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

    div[id^="product-"]
    [data-testid="store-product-description"] {
        width:
            100%;

        max-width:
            100%;

        margin-top:
            26px !important;

        padding:
            25px 0 0
            !important;

        font-size:
            14px;

        line-height:
            1.9
            !important;
    }


    div[id^="product-"]
    .product__description h1 {
        font-size:
            19px !important;

        line-height:
            1.6 !important;
    }


    div[id^="product-"]
    .product__description h2 {
        font-size:
            18px !important;

        line-height:
            1.6 !important;
    }


    div[id^="product-"]
    .product__description h3 {
        font-size:
            16px !important;

        line-height:
            1.6 !important;
    }


    /* المواصفات عمود واحد */

    div[id^="product-"]
    .product__description ul {
        display:
            grid;

        grid-template-columns:
            minmax(0,1fr);

        gap:
            7px;

        width:
            100%;

        padding:
            0 !important;
    }


    div[id^="product-"]
    .product__description li {
        width:
            100%;

        max-width:
            100%;

        margin:
            0;

        padding:
            9px 11px;

        border-radius:
            11px;

        overflow-wrap:
            anywhere;
    }

}


/* ==========================================================
   SMALL MOBILE
   <= 480px
========================================================== */

@media (max-width: 480px) {

    div[id^="product-"] {
        padding-inline:
            0;

        gap:
            10px !important;
    }


    div[id^="product-"]
    > .sidebar {
        border-radius:
            18px !important;

        padding:
            5px;
    }


    div[id^="product-"]
    > .sidebar
    .details-slider {
        border-radius:
            14px !important;
    }


    div[id^="product-"]
    > .sidebar img {
        padding:
            6px !important;
    }


    div[id^="product-"]
    > .main-content {
        padding:
            17px 12px 20px
            !important;

        border-radius:
            18px;
    }


    div[id^="product-"]
    [data-testid="store-product-title"] {
        font-size:
            clamp(20px, 6.5vw, 24px)
            !important;

        padding-right:
            12px;
    }


    div[id^="product-"]
    form.product-form
    > section:first-of-type
    .center-between {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    div[id^="product-"]
    .total-price {
        font-size:
            24px !important;
    }


    div[id^="product-"]
    .sticky-product-bar__quantity {
        min-height:
            62px;
    }

}


/* ==========================================================
   VERY SMALL MOBILE
   <= 360px
========================================================== */

@media (max-width: 360px) {

    div[id^="product-"]
    > .main-content {
        padding-inline:
            10px !important;
    }


    div[id^="product-"]
    [data-testid="store-product-title"] {
        font-size:
            20px !important;
    }


    div[id^="product-"]
    .sticky-product-bar__quantity {
        gap:
            7px;

        padding-inline:
            9px;
    }


    div[id^="product-"]
    .s-quantity-input-button {
        width:
            36px !important;

        min-width:
            36px;
    }


    div[id^="product-"]
    a[href*="/tag-"] {
        font-size:
            10px !important;
    }

}


/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover: none) {

    div[id^="product-"]
    > .sidebar
    .swiper-slide:hover img,

    div[id^="product-"]
    [data-testid="store-product-add-to-cart"]
    .s-button-primary:hover {
        transform:
            none !important;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    div[id^="product-"] *,
    div[id^="product-"] *::before,
    div[id^="product-"] *::after {
        transition:
            none !important;

        animation:
            none !important;
    }

}

div[id^="product-"] > .sidebar .btn--wishlist {
    left: 6px !important;
    right: auto !important;
    top: 7px !important;
    z-index: 10;
}



/* =========================================
   PRODUCT THUMBNAILS - SMALLER SIZE
========================================= */

div[id^="product-"]
.s-slider-thumbs
.s-slider-thumbs-container
.swiper-slide {

    flex: 0 0 52px !important;

    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;

    height: 52px !important;

    margin-left: 7px !important;

    border-radius: 11px !important;

    overflow: hidden !important;

    background: #f6eee4 !important;
}


/* الصورة داخل الـ thumbnail */

div[id^="product-"]
.s-slider-thumbs
.s-slider-thumbs-container
.swiper-slide img {

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

    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    padding: 3px !important;

    margin: 0 !important;

    object-fit: contain !important;

    border-radius: 9px !important;
}


/* الإطار حول الصورة المحددة */

div[id^="product-"]
.s-slider-thumbs
.s-slider-thumbs-container
.swiper-slide::after {

    inset: 0 !important;

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

    border-radius: 11px !important;
}


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

@media (max-width: 767px) {

    div[id^="product-"]
    .s-slider-thumbs
    .s-slider-thumbs-container
    .swiper-slide {

        flex-basis: 46px !important;

        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;

        height: 46px !important;

        margin-left: 6px !important;

        border-radius: 9px !important;
    }


    div[id^="product-"]
    .s-slider-thumbs
    .s-slider-thumbs-container
    .swiper-slide img {

        padding: 2px !important;

        border-radius: 7px !important;
    }

}

/* =========================================================
   LAB V60 - UNIFIED PRODUCT IMAGE BACKGROUND
   Final background color: #F4F0E5
   Keeps all existing sizing and responsive rules unchanged.
========================================================= */

/* Gallery wrapper */
div[id^="product-"] > .sidebar {
    background: #F4F0E5 !important;
    background-color: #F4F0E5 !important;
    background-image: none !important;
}

/* Main slider layers */
div[id^="product-"] > .sidebar .details-slider,
div[id^="product-"] > .sidebar salla-slider,
div[id^="product-"] > .sidebar .swiper,
div[id^="product-"] > .sidebar .swiper-wrapper,
div[id^="product-"] > .sidebar .swiper-slide,
div[id^="product-"] > .sidebar .magnify-wrapper,
div[id^="product-"] > .sidebar .homeslider__slide,
div[id^="product-"] > .sidebar .swiper-slide > a {
    background: #F4F0E5 !important;
    background-color: #F4F0E5 !important;
    background-image: none !important;
}

/* Main product image */
div[id^="product-"] > .sidebar img {
    background: #F4F0E5 !important;
    background-color: #F4F0E5 !important;
    background-image: none !important;
}

/* Thumbnail area */
div[id^="product-"] .s-slider-thumbs,
div[id^="product-"] .s-slider-thumbs-container,
div[id^="product-"] .s-slider-thumbs .swiper,
div[id^="product-"] .s-slider-thumbs .swiper-wrapper,
div[id^="product-"] .s-slider-thumbs .s-slider-thumbs-container .swiper-slide,
div[id^="product-"] .s-slider-thumbs .s-slider-thumbs-container .swiper-slide img,
div[id^="product-"] .s-slider-thumbs .s-slider-thumbs-container .swiper-slide.swiper-slide-thumb-active {
    background: #F4F0E5 !important;
    background-color: #F4F0E5 !important;
    background-image: none !important;
}

/* Keep thumbnail pseudo-elements from creating a white layer */
div[id^="product-"] .s-slider-thumbs .s-slider-thumbs-container .swiper-slide::before,
div[id^="product-"] .s-slider-thumbs .s-slider-thumbs-container .swiper-slide::after {
    background: transparent !important;
}

/* Explicit mobile reinforcement */
@media (max-width: 767px) {
    div[id^="product-"] > .sidebar,
    div[id^="product-"] > .sidebar .details-slider,
    div[id^="product-"] > .sidebar salla-slider,
    div[id^="product-"] > .sidebar .swiper,
    div[id^="product-"] > .sidebar .swiper-wrapper,
    div[id^="product-"] > .sidebar .swiper-slide,
    div[id^="product-"] > .sidebar .swiper-slide > a,
    div[id^="product-"] > .sidebar img,
    div[id^="product-"] .s-slider-thumbs,
    div[id^="product-"] .s-slider-thumbs-container,
    div[id^="product-"] .s-slider-thumbs .swiper-slide,
    div[id^="product-"] .s-slider-thumbs .swiper-slide img {
        background: #F4F0E5 !important;
        background-color: #F4F0E5 !important;
        background-image: none !important;
    }
}



*, :after, :before {
    border: 0 solid transparent;
    box-sizing: border-box;
}  




.s-product-card-vertical .s-product-card-wishlist-btn {
    opacity: .75;
    position: absolute;
    right: .5rem;
    top: 0rem;
}



.s-product-card-vertical .s-product-card-wishlist-btn:where([dir=rtl],[dir=rtl] *)

 {
    left: .0rem;
    right: auto;
}






li, ul {
    list-style: none;
    margin-right: 3px !important;
}






@media (max-width: 767px) {
    div[id^="product-"] .product__description li
 {
        width: 90%;
        max-width: 100%;
        margin: 0;
        padding: 9px 7px;
        border-radius: 11px;
        overflow-wrap: anywhere;
    }
}








/* ==================================================
   REMOVE ALL BULLETS FROM PRODUCT DESCRIPTION
================================================== */

div[id^="product-"] .product__description ul,
div[id^="product-"] .product__description ol,
div[id^="product-"] .product__description .article--main ul,
div[id^="product-"] .product__description .article--main ol {
    list-style: none !important;

    padding-right: 0 !important;
    padding-left: 0 !important;

    margin-right: 0 !important;
    margin-left: 0 !important;
}


/* إزالة الـ bullet الأصلي */

div[id^="product-"] .product__description li,
div[id^="product-"] .product__description .article--main li {
    list-style: none !important;
}


/* إزالة marker */

div[id^="product-"] .product__description li::marker,
div[id^="product-"] .product__description .article--main li::marker {
    content: "" !important;

    font-size: 0 !important;

    color: transparent !important;
}


/* إزالة أي نقطة بيضيفها القالب بـ ::before */

div[id^="product-"] .product__description li::before,
div[id^="product-"] .product__description .article--main li::before,
div[id^="product-"] .product__description ul li::before,
div[id^="product-"] .product__description ol li::before {

    content: none !important;

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: none !important;

    border: 0 !important;
}


/* حماية المسافات بعد إزالة النقاط */

div[id^="product-"] .product__description li {
    padding-inline-start: 13px !important;
    padding-inline-end: 13px !important;
}




@media (min-width: 768px) {
    .s-comments-product {
        padding-bottom: 3.5rem;
        display: none;
        padding-top: 0.5rem;
    }
}




.s-comments-product {
    --tw-bg-opacity: 1;
    background-color: #f3f4f6;
    background-color: rgba(243, 244, 246, var(--tw-bg-opacity, 1));
    padding-bottom: 1rem;
    padding-top: 1rem;
    display: none;
}





/* ==============================
   SIMPLE FEATURE CARD
============================== */

.s-block--features__item {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "icon text";

    column-gap: 12px;
    row-gap: 3px;

    align-items: center;

    padding: 15px 16px !important;

    background: #F4F0E5 !important;

    border: 1px solid rgba(91, 49, 34, 0.08) !important;

    border-radius: 16px !important;

    box-shadow: none !important;

    transition:
        background .25s ease,
        border-color .25s ease !important;
}


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

.s-block--features__item .feature-icon {
    grid-area: icon;

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

    width: 50px !important;
    height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 14px !important;

    background: rgba(122, 87, 73, 0.10) !important;

    color: #7A5749 !important;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease !important;
}


.s-block--features__item .feature-icon i {
    color: inherit !important;

    font-size: 22px !important;

    transition:
        transform .25s ease !important;
}


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

.s-block--features__item h2 {
    grid-area: title;

    margin: 0 !important;

    color: #2B211D !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    line-height: 1.4 !important;

    text-align: right !important;
}


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

.s-block--features__item p {
    grid-area: text;

    margin: 0 !important;

    color: #6F625C !important;

    font-size: 12.5px !important;
    font-weight: 400 !important;

    line-height: 1.6 !important;

    text-align: right !important;
}


/* ==============================
   HOVER
============================== */

@media (hover: hover) {

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

        border-color: rgba(91, 49, 34, 0.14) !important;
    }


    .s-block--features__item:hover .feature-icon {
        background: #7A5749 !important;

        color: #fff !important;

        transform: translateY(-2px);
    }


    .s-block--features__item:hover .feature-icon i {
        transform: scale(1.08);
    }

}


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

@media (max-width: 767px) {

    .s-block--features__item {
        grid-template-columns: 44px minmax(0, 1fr);

        padding: 12px 13px !important;

        border-radius: 14px !important;
    }


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

        border-radius: 12px !important;
    }


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


    .s-block--features__item h2 {
        font-size: 14px !important;
    }


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

}

















/* =========================================================
   LAB V60 - REVIEWS TESTIMONIAL
   Clean / Premium / Minimal
========================================================= */

.s-reviews-testimonial {
    width: 100% !important;
    height: 100%;
}


/* =========================================================
   CARD
========================================================= */

.s-reviews-testimonial__inner {
    position: relative !important;

    display: grid !important;

    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas:
        "avatar content";

    align-items: start !important;

    gap: 15px !important;

    min-height: 175px;

    padding: 22px !important;

    background: #F4F0E5 !important;

    border:
        1px solid rgba(91, 49, 34, .09)
        !important;

    border-radius: 20px !important;

    overflow: hidden;

    box-shadow:
        0 6px 18px rgba(69, 43, 32, .05)
        !important;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease !important;
}


/* خط جانبي بسيط */

.s-reviews-testimonial__inner::after {
    content: "";

    position: absolute;

    right: 0;
    top: 24px;
    bottom: 24px;

    width: 3px;

    border-radius: 10px 0 0 10px;

    background: #7A5749;

    opacity: .65;

    transition:
        top .25s ease,
        bottom .25s ease,
        opacity .25s ease;
}


/* =========================================================
   AVATAR
========================================================= */

.s-reviews-testimonial__avatar {
    grid-area: avatar;

    width: 58px !important;
    height: 58px !important;

    min-width: 58px;

    margin: 0 !important;

    border-radius: 17px !important;

    overflow: hidden;

    background: #E8DFCF !important;

    border:
        1px solid rgba(91, 49, 34, .10);

    padding: 3px;

    box-shadow:
        0 5px 14px rgba(91, 49, 34, .08);
}


.s-reviews-testimonial__avatar img {
    display: block;

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

    margin: 0 !important;

    padding: 0 !important;

    border-radius: 14px !important;

    object-fit: cover !important;

    background: #E8DFCF !important;
}


/* =========================================================
   CONTENT
========================================================= */

.s-reviews-testimonial__text {
    grid-area: content;

    display: flex !important;

    flex-direction: column;

    min-width: 0;

    padding-top: 2px;
}


/* نص التقييم */

.s-reviews-testimonial__text > p {
    margin: 0 0 18px !important;

    padding: 0 0 17px !important;

    color: #30241F !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    line-height: 1.9 !important;

    text-align: right !important;

    border-bottom:
        1px solid rgba(91, 49, 34, .08);
}


/* =========================================================
   NAME + RATING
========================================================= */

.s-reviews-testimonial__name_wrapper {
    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 12px;

    width: 100%;
}


.s-reviews-testimonial__info {
    min-width: 0;
}


.s-reviews-testimonial__info h2 {
    margin: 0 !important;

    padding: 0 !important;

    color: #241A16 !important;

    font-size: 14px !important;

    font-weight: 800 !important;

    line-height: 1.5 !important;

    text-align: right !important;
}


/* =========================================================
   STARS
========================================================= */

.s-reviews-testimonial__rating {
    margin: 0 !important;

    flex-shrink: 0;
}


.s-reviews-testimonial__rating
.s-rating-stars-wrapper {
    display: flex !important;

    align-items: center;

    gap: 2px;
}


.s-reviews-testimonial__rating
.s-rating-stars-btn-star {
    width: 16px !important;
    height: 16px !important;
}


.s-reviews-testimonial__rating
.s-rating-stars-btn-star svg {
    width: 16px !important;
    height: 16px !important;
}


.s-reviews-testimonial__rating
.s-rating-stars-selected svg,
.s-reviews-testimonial__rating
.s-rating-stars-selected svg path {
    fill: #9A7440 !important;

    color: #9A7440 !important;
}


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

.s-reviews-testimonial__icon {
    position: absolute !important;

    left: 17px !important;
    right: auto !important;

    top: 15px !important;

    width: 36px !important;
    height: 36px !important;

    display: flex !important;

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

    margin: 0 !important;

    opacity: .10 !important;

    color: #5B3122 !important;

    pointer-events: none;
}


.s-reviews-testimonial__icon svg {
    width: 30px !important;
    height: 30px !important;

    fill: currentColor !important;
}


.s-reviews-testimonial__icon svg path {
    fill: #5B3122 !important;
}


/* =========================================================
   LIGHT HOVER
========================================================= */

@media (hover: hover) {

    .s-reviews-testimonial__inner:hover {
        background: #F8F4EC !important;

        border-color:
            rgba(91, 49, 34, .15)
            !important;

        box-shadow:
            0 9px 22px rgba(69, 43, 32, .07)
            !important;
    }


    .s-reviews-testimonial__inner:hover::after {
        top: 18px;
        bottom: 18px;

        opacity: .9;
    }


    .s-reviews-testimonial__inner:hover
    .s-reviews-testimonial__avatar {
        border-color:
            rgba(91, 49, 34, .17);
    }
}


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

@media (max-width: 767px) {

    .s-reviews-testimonial__inner {
        grid-template-columns:
            50px minmax(0, 1fr);

        gap: 12px !important;

        min-height: 150px;

        padding:
            17px 15px !important;

        border-radius:
            16px !important;
    }


    .s-reviews-testimonial__inner::after {
        top: 19px;
        bottom: 19px;
    }


    .s-reviews-testimonial__avatar {
        width: 50px !important;
        height: 50px !important;

        min-width: 50px;

        border-radius:
            14px !important;
    }


    .s-reviews-testimonial__avatar img {
        border-radius:
            11px !important;
    }


    .s-reviews-testimonial__text > p {
        margin-bottom:
            13px !important;

        padding-bottom:
            13px !important;

        font-size:
            12.5px !important;

        line-height:
            1.8 !important;
    }


    .s-reviews-testimonial__info h2 {
        font-size:
            13px !important;
    }


    .s-reviews-testimonial__rating
    .s-rating-stars-btn-star,
    .s-reviews-testimonial__rating
    .s-rating-stars-btn-star svg {

        width: 14px !important;
        height: 14px !important;
    }


    .s-reviews-testimonial__icon {
        left: 12px !important;
        top: 11px !important;

        width: 30px !important;
        height: 30px !important;
    }


    .s-reviews-testimonial__icon svg {
        width: 25px !important;
        height: 25px !important;
    }
}


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

@media (max-width: 390px) {

    .s-reviews-testimonial__inner {
        grid-template-columns:
            45px minmax(0, 1fr);

        gap: 10px !important;

        padding:
            15px 12px !important;
    }


    .s-reviews-testimonial__avatar {
        width: 45px !important;
        height: 45px !important;

        min-width: 45px;
    }


    .s-reviews-testimonial__name_wrapper {
        gap: 7px;
    }


    .s-reviews-testimonial__text > p {
        font-size:
            12px !important;
    }


    .s-reviews-testimonial__info h2 {
        font-size:
            12.5px !important;
    }
}




/* =========================================
   REMOVE WHITE BACKGROUND BEHIND REVIEWS
   keep testimonial card beige
========================================= */

/* السكشن الخارجي كله */
.s-reviews,
.s-reviews-section,
section:has(.s-reviews-testimonial),
div:has(> .s-reviews-testimonial),
div:has(.s-reviews-testimonial__inner) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}


/* السلايدر / اللفائف الخارجية */
.s-reviews .swiper,
.s-reviews .swiper-wrapper,
.s-reviews .swiper-slide,
.s-reviews-slider,
.s-reviews-list,
.s-reviews-track,
.s-reviews-testimonial {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}


/* لو في container أبيض حول العنصر */
.s-reviews .container,
.s-reviews .s-block,
.s-reviews .s-block__body,
.s-reviews .s-block__content {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}


/* الكارت نفسه يفضل بيج */
.s-reviews-testimonial__inner {
    background: #F4F0E5 !important;
    background-color: #F4F0E5 !important;
    background-image: none !important;
}



/* =========================================
   REVIEWS - REDUCE SPACE BETWEEN CARDS
========================================= */

.s-block--reviews .swiper-wrapper,
.s-reviews .swiper-wrapper {
    gap: 12px !important;
    justify-content: flex-start !important;
}


/* إلغاء المسافات الكبيرة اللي Swiper بيضيفها */

.s-block--reviews .swiper-slide,
.s-reviews .swiper-slide {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* إزالة أي margin من الكارت نفسه */

.s-reviews-testimonial {
    margin: 0 !important;
}


/* موبايل */

@media (max-width: 767px) {

    .s-block--reviews .swiper-wrapper,
    .s-reviews .swiper-wrapper {
        gap: 8px !important;
    }
}




/* =========================================
   FOOTER - DARK BROWN BACKGROUND
========================================= */

.store-footer__inner {
    background: #5B3122 !important;
    background-color: #5B3122 !important;
    color: #F4F0E5 !important;

    border-top: none !important;
}


/* العناوين */

.store-footer__inner h3,
.store-footer__inner .s-contacts-title,
.store-footer__inner a[href="https://labv60.com/"] h3 {
    color: #FFFFFF !important;
}


/* الخط الصغير جنب العنوان */

.store-footer__inner h3::before,
.store-footer__inner .s-contacts-title::before {
    background: #D8C1AE !important;
}


/* وصف المتجر */

.store-footer__inner .max-w-sm.leading-6 p {
    color: rgba(255, 255, 255, .72) !important;
}

.store-footer__inner .max-w-sm.leading-6 strong {
    color: #FFFFFF !important;
}


/* روابط الفوتر */

.store-footer__inner .s-menu-footer-item {
    color: rgba(255, 255, 255, .78) !important;
}

.store-footer__inner .s-menu-footer-item::before {
    background: rgba(255, 255, 255, .35) !important;
}

@media (hover: hover) {

    .store-footer__inner .s-menu-footer-item:hover {
        color: #FFFFFF !important;
    }

    .store-footer__inner .s-menu-footer-item:hover::before {
        background: #FFFFFF !important;
    }
}


/* التواصل */

.store-footer__inner .s-contacts-item {
    background: rgba(255, 255, 255, .07) !important;

    border-color: rgba(255, 255, 255, .12) !important;

    color: #FFFFFF !important;
}

.store-footer__inner .s-contacts-icon {
    background: rgba(255, 255, 255, .10) !important;
    color: #FFFFFF !important;
}

.store-footer__inner .s-contacts-item .unicode {
    color: #FFFFFF !important;
}


/* وثيقة العمل الحر */

.store-footer__inner .s-trust-badges-wrapper {
    background: rgba(255, 255, 255, .07) !important;

    border-color: rgba(255, 255, 255, .12) !important;
}

.store-footer__inner .s-trust-badges-label {
    color: rgba(255, 255, 255, .65) !important;
}

.store-footer__inner .s-trust-badges-number {
    color: #FFFFFF !important;
}


/* Social */

.store-footer__inner .s-social-list a {
    background: rgba(255, 255, 255, .09) !important;

    border-color: rgba(255, 255, 255, .10) !important;

    color: #FFFFFF !important;
}

@media (hover: hover) {

    .store-footer__inner .s-social-list a:hover {
        background: #F4F0E5 !important;
        color: #5B3122 !important;
    }
}


/* خطوط الفصل في الموبايل */

@media (max-width: 767px) {

    .store-footer__inner > .container > div {
        border-bottom-color:
            rgba(255, 255, 255, .10) !important;
    }
}


.store-footer__inner {
    background-color: #56372b !important;
    border-top: none !important;
} 


/* =========================================
   FOOTER BOTTOM - COPYRIGHT + PAYMENTS
========================================= */

/* الجزء السفلي بالكامل */

.store-footer + .md\:flex,
footer .md\:flex.items-center.justify-between.py-4.container {
    background: #5B3122 !important;

    border-top:
        1px solid rgba(255, 255, 255, .10) !important;

    padding-top: 18px !important;
    padding-bottom: 18px !important;
}


/* =========================================
   COPYRIGHT
========================================= */

.copyright-text,
.copyright-text p {
    margin: 0 !important;

    color:
        rgba(255, 255, 255, .65) !important;

    font-size:
        12px !important;

    font-weight:
        400 !important;

    line-height:
        1.7 !important;
}


/* رابط منصة سلة */

.copyright-text a {
    color:
        #F4F0E5 !important;

    font-weight:
        600 !important;

    text-decoration:
        none !important;

    transition:
        opacity .2s ease !important;
}


@media (hover: hover) {

    .copyright-text a:hover {
        color:
            #FFFFFF !important;

        opacity:
            .85;
    }
}


/* =========================================
   PAYMENT METHODS
========================================= */

.s-payments-list-wrap {
    margin: 0 !important;
}


.s-payments-list {
    display: flex !important;

    align-items: center !important;

    justify-content: center;

    gap: 7px !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* كل وسيلة دفع */

.s-payments-list-item {
    display: flex !important;

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

    width: 48px !important;
    height: 34px !important;

    margin: 0 !important;

    padding: 5px 7px !important;

    background:
        rgba(255, 255, 255, .92) !important;

    border:
        1px solid rgba(255, 255, 255, .12) !important;

    border-radius:
        8px !important;

    overflow: hidden;

    box-shadow:
        none !important;

    transition:
        transform .2s ease,
        background .2s ease !important;
}


/* صورة وسيلة الدفع */

.s-payments-list-item img {
    display: block !important;

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

    max-width: 38px !important;

    object-fit: contain !important;
}


/* Hover بسيط */

@media (hover: hover) {

    .s-payments-list-item:hover {
        transform:
            translateY(-2px);

        background:
            #FFFFFF !important;
    }
}


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

@media (max-width: 767px) {

    footer .md\:flex.items-center.justify-between.py-4.container {

        display: flex !important;

        flex-direction: column !important;

        gap: 14px;

        padding-top:
            16px !important;

        padding-bottom:
            18px !important;

        text-align:
            center !important;
    }


    .copyright-text {
        width:
            100%;
    }


    .copyright-text p {
        font-size:
            11.5px !important;
    }


    .s-payments-list {
        flex-wrap:
            wrap;

        gap:
            6px !important;
    }


    .s-payments-list-item {
        width:
            45px !important;

        height:
            32px !important;

        border-radius:
            7px !important;
    }
}


.store-footer + .md\:flex, footer .md\:flex.items-center.justify-between.py-4.container {
    background: #56372b !important;
    border-top: 1px solid rgba(255, 255, 255, .10) !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}  





/* =========================================================
   HEADER USER + CART
   LAB V60 - CLEAN STYLE
========================================================= */

/* الحاوية */
.flex.items-center.justify-end.my-2\.5 {
    gap: 8px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   USER BUTTON
========================================================= */

.s-user-menu-login-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 12px !important;

    background: #F4F0E5 !important;

    border:
        1px solid rgba(91, 49, 34, .09) !important;

    color: #5B3122 !important;

    box-shadow: none !important;

    transition:
        background .22s ease,
        color .22s ease,
        border-color .22s ease,
        transform .22s ease !important;
}


.s-user-menu-login-btn svg {
    width: 20px !important;
    height: 20px !important;

    fill: currentColor !important;
}


.s-user-menu-login-btn svg path {
    fill: currentColor !important;
}


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

salla-cart-summary {
    margin: 0 !important;
}


.s-cart-summary-wrapper {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    gap: 8px;

    min-height: 42px;

    padding: 0 11px !important;

    border-radius: 12px !important;

    background: #F4F0E5 !important;

    border:
        1px solid rgba(91, 49, 34, .09) !important;

    color: #5B3122 !important;

    text-decoration: none !important;

    box-shadow: none !important;

    transition:
        background .22s ease,
        border-color .22s ease,
        color .22s ease !important;
}


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

#s-cart-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 24px;
    height: 24px;
}


#s-cart-icon .header-btn__icon,
#s-cart-icon i {
    color: #5B3122 !important;

    font-size: 21px !important;

    transition:
        color .22s ease,
        transform .22s ease !important;
}


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

.s-cart-summary-count {
    position: absolute !important;

    top: -6px !important;
    right: -6px !important;

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

    min-width: 19px !important;
    height: 19px !important;

    padding: 0 5px !important;

    border-radius: 999px !important;

    background: #5B3122 !important;

    color: #FFFFFF !important;

    border:
        2px solid #FFFFFF !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    z-index: 5;
}


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

.s-cart-summary-content {
    margin: 0 !important;
}


.s-cart-summary-total {
    display: flex !important;
    align-items: center !important;

    gap: 3px;

    color: #5B3122 !important;

    font-size: 12px !important;

    font-weight: 700 !important;
}



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

@media (max-width: 767px) {

    .s-user-menu-login-btn {
        width: 38px !important;
        height: 38px !important;

        border-radius: 11px !important;
    }


    .s-user-menu-login-btn svg {
        width: 18px !important;
        height: 18px !important;
    }


    .s-cart-summary-wrapper {
        min-height: 38px;

        padding: 0 9px !important;

        border-radius: 11px !important;
    }


    #s-cart-icon .header-btn__icon,
    #s-cart-icon i {
        font-size: 19px !important;
    }


    .s-cart-summary-total {
        font-size: 11px !important;
    }


    .s-cart-summary-count {
        top: -5px !important;
        right: -5px !important;

        min-width: 18px !important;
        height: 18px !important;

        font-size: 9px !important;
    }

}

.navbar-brand img {
    max-height: 5rem 
;
    border-radius: 12px !important;
    max-width: 100px;
    width: auto;
}







/* ==============================
   FULL STORE BACKGROUND
   ============================== */

html,
body,
.app-content,
#content-spinner,
.home,
main,
section {
    background-color: #F7F3EE !important;
}









/* =========================================
   LAB V60 HEADER COLOR SYSTEM
   ========================================= */

:root {
    --lab-header-bg: #F7F3EE;
    --lab-surface: #EFE7DC;
    --lab-brown: #684838;
}


/* Top Navbar */
.top-navbar {
    background: var(--lab-header-bg) !important;
    border-bottom: 1px solid rgba(104, 72, 56, 0.08);
}


/* Search */
.top-navbar .s-search-input {
    background: var(--lab-surface) !important;

    border: 1px solid transparent !important;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


/* Search Focus */
.top-navbar .s-search-input:focus {
    background: #F7F3EE !important;

    border-color: rgba(104, 72, 56, 0.45) !important;

    box-shadow:
        0 4px 14px rgba(104, 72, 56, 0.10) !important;

    outline: none !important;
}


/* Search Icon */
.top-navbar .s-search-icon svg path {
    fill: var(--lab-brown) !important;
}


/* Placeholder */
.top-navbar .s-search-input::placeholder {
    color: rgba(104, 72, 56, 0.60) !important;
}







/* =========================
   COLORS
   ========================= */

:root {
    --box-bg: #F1E8DE;
    --box-hover: #684838;
}


/* =========================
   USER BOX
   ========================= */

.s-user-menu-login-btn {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;

    width: 46px !important;
    height: 46px !important;

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

    background: var(--box-bg) !important;

    /* بدون بوردر */
    border: none !important;

    border-radius: 14px !important;
}


/* الخلفية البني */
.s-user-menu-login-btn::before {
    content: "";
    position: absolute;
    inset: 0;

    background: var(--box-hover);

    transform: scaleX(0);
    transform-origin: right;

    transition: transform .4s ease;

    z-index: 0;
}


.s-user-menu-login-btn svg {
    position: relative;
    z-index: 2;
}


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

[data-testid="store-header-cart"] .s-cart-summary-wrapper {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;

    min-height: 46px !important;

    display: flex !important;
    align-items: center !important;

    background: var(--box-bg) !important;

    /* بدون بوردر */
    border: none !important;

    border-radius: 14px !important;

    padding: 4px 10px !important;
}


/* لون التعبئة */
[data-testid="store-header-cart"]
.s-cart-summary-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;

    background: var(--box-hover);

    transform: scaleX(0);
    transform-origin: right;

    transition: transform .4s ease;

    z-index: 0;
}


/* المحتوى فوق الخلفية */
[data-testid="store-header-cart"]
.s-cart-summary-wrapper > * {
    position: relative;
    z-index: 2;
}


/* =========================
   HOVER
   ========================= */

@media (hover: hover) {

    /* الحساب */
    .s-user-menu-login-btn:hover::before {
        transform: scaleX(1);
    }


    /* السلة */
    [data-testid="store-header-cart"]
    .s-cart-summary-wrapper:hover::before {
        transform: scaleX(1);
    }


    /* أيقونة الحساب أبيض */
    .s-user-menu-login-btn:hover svg,
    .s-user-menu-login-btn:hover svg path {
        fill: #fff !important;
        color: #fff !important;
    }


    /* أيقونة الشنطة أبيض */
    [data-testid="store-header-cart"]
    .s-cart-summary-wrapper:hover #s-cart-icon,
    
    [data-testid="store-header-cart"]
    .s-cart-summary-wrapper:hover #s-cart-icon i,
    
    [data-testid="store-header-cart"]
    .s-cart-summary-wrapper:hover .header-btn__icon {
        color: #fff !important;
    }


    /* لو فيه SVG داخل السلة */
    [data-testid="store-header-cart"]
    .s-cart-summary-wrapper:hover svg path {
        fill: #fff !important;
    }


    /* السعر وباقي النصوص أبيض */
    [data-testid="store-header-cart"]
    .s-cart-summary-wrapper:hover .s-cart-summary-total,
    
    [data-testid="store-header-cart"]
    .s-cart-summary-wrapper:hover .s-cart-summary-total i {
        color: #fff !important;
    }
}




/* =========================================
   HEADER MAIN BACKGROUND
   ========================================= */

header:has([data-testid="store-header-logo"]) {
    background-color: #F7F3EE !important;
}

header:has([data-testid="store-header-logo"]) .inner,
header:has([data-testid="store-header-logo"]) .inner.bg-inherit,
header:has([data-testid="store-header-logo"]) .container {
    background-color: #F7F3EE !important;
}




header::before,
header::after,
.top-navbar::before,
.top-navbar::after {
    display: none !important;
    box-shadow: none !important;
}




.top-navbar {
        background-color: #F7F3EE !important;
    border-bottom: 0px solid rgba(104, 72, 56, 0.08);
} 




/* تنظيف أيقونة السلة */

#s-cart-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    width: auto !important;
    height: auto !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 0 !important;
}


/* أيقونة الشنطة نفسها */
#s-cart-icon .header-btn__icon,
#s-cart-icon .sicon-shopping-bag {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;



    font-size: 22px !important;
}


/* نشيل أي إطار معمول بـ before / after */
#s-cart-icon::before,
#s-cart-icon::after,
#s-cart-icon .header-btn__icon::before,
#s-cart-icon .header-btn__icon::after {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}


/* =====================================
   Hover مباشر - بدون حركة تعبئة
   ===================================== */

/* الحساب */
.s-user-menu-login-btn {
    transition: background-color 0.18s ease !important;
}

.s-user-menu-login-btn::before {
    display: none !important;
}

.s-user-menu-login-btn:hover {
    background-color: #684838 !important;
}


/* السلة */
[data-testid="store-header-cart"] .s-cart-summary-wrapper {
    transition: background-color 0.18s ease !important;
}

[data-testid="store-header-cart"] .s-cart-summary-wrapper::before {
    display: none !important;
}

[data-testid="store-header-cart"] .s-cart-summary-wrapper:hover {
    background-color: #684838 !important;
}


/* الأيقونات أبيض وقت الـ Hover */
.s-user-menu-login-btn:hover svg path {
    fill: #fff !important;
}

[data-testid="store-header-cart"]
.s-cart-summary-wrapper:hover #s-cart-icon,
[data-testid="store-header-cart"]
.s-cart-summary-wrapper:hover #s-cart-icon i,
[data-testid="store-header-cart"]
.s-cart-summary-wrapper:hover .header-btn__icon {
    color: #fff !important;
}

[data-testid="store-header-cart"]
.s-cart-summary-wrapper:hover svg path {
    fill: #fff !important;
}

[data-testid="store-header-cart"]
.s-cart-summary-wrapper:hover .s-cart-summary-total,
[data-testid="store-header-cart"]
.s-cart-summary-wrapper:hover .s-cart-summary-total i {
    color: #fff !important;
} 



#s-cart-icon::before, #s-cart-icon::after, #s-cart-icon .header-btn__icon::before, #s-cart-icon .header-btn__icon::after
Specificity: (1,1,1)
 {
    border: none !important;
    box-shadow: none !important;
    color: rgb(91, 49, 34) !important;
    background: transparent !important;
}





.footer-is-light .store-footer {
    --tw-bg-opacity: 1;
    background-color: #f9fafb;
    background-color: #56372b !important;
    --tw-text-opacity: 1;
    color: #374151;
    color: rgba(55, 65, 81, var(--tw-text-opacity, 1));
}



.s-reviews-testimonial__icon {
    position: absolute !important;
    left: 17px !important;
    right: auto !important;
    top: 15px !important;
    width: 36px !important;
    height: 36px !important;
    display: none !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    opacity: .10 !important;
    color: #5B3122 !important;
    pointer-events: none;
}


@media (min-width: 1024px) {
    .s-block--testimonials .s-slider-block__title-nav {
        display: flex !important;
        padding-bottom: 61px !important;
        align-items: center;
    }
}







/* =====================================
   STRONG PREMIUM HOVER
   إضافة للسلة
   ===================================== */

.s-add-product-button-main
.s-button-element[data-testid="store-product-add-to-cart"] {
    position: relative !important;
    overflow: hidden !important;

    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        box-shadow .3s ease,
        background-color .3s ease !important;
}


/* اللمعة */
.s-add-product-button-main
.s-button-element[data-testid="store-product-add-to-cart"]::after {

    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(
        110deg,
        transparent,
        rgba(255,255,255,.22),
        transparent
    );

    transform: skewX(-20deg);

    transition: left .55s ease;

    pointer-events: none;
}


@media (hover: hover) {

    .s-add-product-button-main
    .s-button-element[data-testid="store-product-add-to-cart"]:hover {

        background: #57392d !important;

        transform:
            translateY(-3px)
            scale(1.015);

        box-shadow:
            0 10px 24px rgba(87,57,45,.28) !important;
    }


    .s-add-product-button-main
    .s-button-element[data-testid="store-product-add-to-cart"]:hover::after {

        left: 140%;
    }
}


/* عند الضغط */
.s-add-product-button-main
.s-button-element[data-testid="store-product-add-to-cart"]:active {

    transform:
        translateY(0)
        scale(.97) !important;

    box-shadow:
        0 4px 10px rgba(87,57,45,.20) !important;
}




/* =====================================
   PRODUCT TAGS - HOVER ONLY
   ===================================== */

.mb-3 > a[href*="/tag-"] {
    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease !important;
}


@media (hover: hover) {

    .mb-3 > a[href*="/tag-"]:hover {

        background-color: #684838 !important;

        color: #ffffff !important;

        border-color: #684838 !important;

        text-decoration: none !important;

        transform: translateY(-2px);

        box-shadow:
            0 6px 14px rgba(104, 72, 56, 0.18) !important;
    }
}


/* =========================================
   SHARE + WISHLIST BUTTONS
   HOVER ONLY
   ========================================= */

/* تجهيز الحركة */
salla-social-share .s-social-share-btn.s-button-element,
[data-testid="store-product-wishlist-btn"].s-button-element {
    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s cubic-bezier(.2,.8,.2,1),
        box-shadow .25s ease !important;
}


/* حركة الأيقونات */
salla-social-share .s-social-share-btn svg,
[data-testid="store-product-wishlist-btn"].s-button-element i {
    transition:
        fill .25s ease,
        color .25s ease,
        transform .25s ease !important;
}


/* =========================================
   HOVER
   ========================================= */

@media (hover: hover) {

    /* Share */
    salla-social-share .s-social-share-btn.s-button-element:hover {
        background: #684838 !important;
        border-color: #684838 !important;
        color: #fff !important;

        transform: translateY(-3px);

        box-shadow:
            0 7px 16px rgba(104, 72, 56, .20) !important;
    }


    /* Share icon */
    salla-social-share .s-social-share-btn.s-button-element:hover svg {
        transform: scale(1.08);
    }

    salla-social-share .s-social-share-btn.s-button-element:hover svg path {
        fill: #fff !important;
    }


    /* Wishlist */
    [data-testid="store-product-wishlist-btn"].s-button-element:hover {
        background: #684838 !important;
        border-color: #684838 !important;
        color: #fff !important;

        transform: translateY(-3px);

        box-shadow:
            0 7px 16px rgba(104, 72, 56, .20) !important;
    }


    /* Heart */
    [data-testid="store-product-wishlist-btn"].s-button-element:hover i {
        color: #fff !important;
        transform: scale(1.12);
    }
}


/* ضغط الزر */
salla-social-share .s-social-share-btn.s-button-element:active,
[data-testid="store-product-wishlist-btn"].s-button-element:active {
    transform: translateY(0) scale(.94) !important;
}



/* ==============================
   FIX WISHLIST HEART CLIPPING
   ============================== */

salla-button[data-testid="store-product-wishlist-btn"],
[data-testid="store-product-wishlist-btn"].s-button-element,
[data-testid="store-product-wishlist-btn"] .s-button-text {
    overflow: visible !important;
}


/* ضبط القلب داخل الزر */
[data-testid="store-product-wishlist-btn"] .sicon-heart {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    line-height: 1 !important;

    transform-origin: center;
}


/* Hover أنعم ومن غير قص */
@media (hover: hover) {

    [data-testid="store-product-wishlist-btn"].s-button-element:hover .sicon-heart {
        color: #fff !important;

        transform: scale(1.06) !important;
    }
}



div[id^="product-"] > .sidebar img {
    background: #F4F0E5 !important;
    background-color: #F4F0E5 !important;
    background-image: none !important;
    border-radius: 70px !important;
}






/* =========================================
   LAB V60 - QUANTITY SELECTOR
   ========================================= */

.sticky-product-bar__quantity {
    padding: 14px 16px !important;

    background: #fbf8f4 !important;

    border: 1px solid rgba(104, 72, 56, 0.10) !important;
    border-radius: 14px !important;

    transition:
        border-color .25s ease,
        box-shadow .25s ease !important;
}


/* Label */
.sticky-product-bar__quantity .form-label {
    color: #4d342a !important;
    font-weight: 700 !important;
}


/* الكونتينر */
.s-quantity-input-container {
    display: flex !important;
    align-items: center !important;

    background: #f4ece3 !important;

    border: none !important;
    border-radius: 12px !important;

    overflow: hidden !important;

    min-height: 42px !important;
}


/* =========================
   + و -
   ========================= */

.s-quantity-input-button {
    width: 42px !important;
    height: 42px !important;

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

    background: transparent !important;

    border: none !important;
    border-radius: 10px !important;

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


/* الأيقونات */
.s-quantity-input-button svg {
    width: 17px !important;
    height: 17px !important;
}

.s-quantity-input-button svg path {
    fill: #684838 !important;

    transition: fill .22s ease !important;
}


/* =========================
   الرقم
   ========================= */

.s-quantity-input-input {
    width: 46px !important;
    height: 42px !important;

    text-align: center !important;

    background: transparent !important;

    border: none !important;
    outline: none !important;

    color: #3f2b23 !important;

    font-weight: 700 !important;
    font-size: 14px !important;
}


/* =========================
   HOVER
   ========================= */

@media (hover: hover) {

    .s-quantity-input-button:hover {
        background: #684838 !important;

        transform: scale(.94);
    }

    .s-quantity-input-button:hover svg path {
        fill: #ffffff !important;
    }


    .sticky-product-bar__quantity:hover {
        border-color: rgba(104, 72, 56, .20) !important;

        box-shadow:
            0 6px 16px rgba(104, 72, 56, .07) !important;
    }
}


/* عند الضغط */
.s-quantity-input-button:active {
    transform: scale(.88) !important;
}


.s-quantity-input-input {
    width: 46px !important;
    height: 42px !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #3f2b23 !important;
    font-weight: 700 !important;
    font-size: 21px !important;
}  




/* =========================================
   PRODUCT CARD WISHLIST - CLEAN VERSION
   ========================================= */

.s-product-card-wishlist-btn {
    width: 38px !important;
    height: 38px !important;

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

    padding: 0 !important;

    background: rgba(247, 243, 238, 0.88) !important;

    border: none !important;
    outline: none !important;

    border-radius: 11px !important;

    box-shadow:
        0 3px 10px rgba(104, 72, 56, 0.08) !important;

    overflow: visible !important;

    transition:
        background-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease !important;
}


/* القلب */
.s-product-card-wishlist-btn .s-button-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100%;
    height: 100%;

    overflow: visible !important;
}


.s-product-card-wishlist-btn .sicon-heart {
    font-size: 19px !important;
    line-height: 1 !important;

    color: #684838 !important;

    transform: none !important;

    transition: color .25s ease !important;
}


/* =========================
   HOVER
   ========================= */

@media (hover: hover) {

    .s-product-card-wishlist-btn:hover {
        background: #684838 !important;

        transform: translateY(-2px);

        box-shadow:
            0 7px 15px rgba(104, 72, 56, .20) !important;
    }

    .s-product-card-wishlist-btn:hover .sicon-heart {
        color: #fff !important;

        transform: none !important;
    }
}


/* =========================
   ACTIVE / FAVORITED
   ========================= */

.s-product-card-wishlist-btn.favorited,
.s-product-card-wishlist-btn.added,
.s-product-card-wishlist-btn:not(.un-favorited):not(.not-added) {
    background: #684838 !important;
}


.s-product-card-wishlist-btn.favorited .sicon-heart,
.s-product-card-wishlist-btn.added .sicon-heart,
.s-product-card-wishlist-btn:not(.un-favorited):not(.not-added) .sicon-heart {
    color: #fff !important;
}



/* =========================================
   PRODUCT CARD WISHLIST
   ========================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
) .s-product-card-wishlist-btn.s-button-element {

    position: relative !important;
    isolation: isolate !important;

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

    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    /* الخلفية العادية */
    background: #F3ECE3 !important;

    border: none !important;
    outline: none !important;

    border-radius: 11px !important;

    box-shadow: 0 3px 10px rgba(104, 72, 56, 0.08) !important;

    /* مهم عشان لون الـ hover يفضل جوه الزر */
    overflow: hidden !important;

    color: #8A6A5B !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease !important;
}


/* =========================================
   التعبئة من فوق ومن تحت
   ========================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
) .s-product-card-wishlist-btn.s-button-element::before,

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
) .s-product-card-wishlist-btn.s-button-element::after {

    content: "";

    position: absolute;

    left: 0;

    width: 100%;
    height: 51%;

    background: #684838;

    z-index: 0;

    pointer-events: none;

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1);
}


/* الجزء اللي جاي من فوق */
:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
) .s-product-card-wishlist-btn.s-button-element::before {

    top: 0;

    transform: scaleY(0);
    transform-origin: top center;
}


/* الجزء اللي جاي من تحت */
:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
) .s-product-card-wishlist-btn.s-button-element::after {

    bottom: 0;

    transform: scaleY(0);
    transform-origin: bottom center;
}


/* =========================================
   نخلي القلب فوق الأنيميشن
   ========================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
) .s-product-card-wishlist-btn .s-button-text {

    position: relative !important;
    z-index: 2 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
) .s-product-card-wishlist-btn .sicon-heart {

    color: #8A6A5B !important;

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

    transition: color .25s ease !important;
}



/* =========================================
   WISHLIST - TOP & BOTTOM FILL
   ========================================= */

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
) .s-product-card-wishlist-btn.s-button-element {

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

    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    /* الخلفية الطبيعية */
    background-color: #F4EDE5 !important;

    /* طبقتين بني: واحدة فوق وواحدة تحت */
    background-image:
        linear-gradient(#684838, #684838),
        linear-gradient(#684838, #684838) !important;

    background-repeat: no-repeat !important;

    /* الأولى فوق - الثانية تحت */
    background-position:
        top center,
        bottom center !important;

    /* في البداية مش ظاهرين */
    background-size:
        100% 0%,
        100% 0% !important;

    border: none !important;
    outline: none !important;

    border-radius: 11px !important;

    overflow: hidden !important;

    box-shadow:
        0 3px 9px rgba(104, 72, 56, .10) !important;

    color: #8A6959 !important;

    transition:
        background-size .42s cubic-bezier(.22, 1, .36, 1),
        box-shadow .3s ease !important;
}


/* مهم: نلغي الأنيميشن القديم */
:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
) .s-product-card-wishlist-btn.s-button-element::before,

:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
) .s-product-card-wishlist-btn.s-button-element::after {

    display: none !important;
}


/* القلب */
:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
) .s-product-card-wishlist-btn .s-button-text {

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


:is(
    .s-products-slider-card,
    .s-products-list-wrapper.s-products-list-vertical-cards
) .s-product-card-wishlist-btn .sicon-heart {

    color: #8A6959 !important;

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

    transition: color .25s ease !important;
}


/* =========================================
   HOVER
   ========================================= */

@media (hover: hover) {

    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    ) .s-product-card-wishlist-btn.s-button-element:hover {

        /*
          فوق ينزل 50%
          وتحت يطلع 50%
          ويقابلوا بعض في النص
        */
        background-size:
            100% 51%,
            100% 51% !important;

        box-shadow:
            0 6px 14px rgba(104, 72, 56, .20) !important;
    }


    /* القلب أبيض */
    :is(
        .s-products-slider-card,
        .s-products-list-wrapper.s-products-list-vertical-cards
    ) .s-product-card-wishlist-btn.s-button-element:hover .sicon-heart {

        color: #FFFFFF !important;
    }
}  




/* =========================================
   PRODUCT CARD - TILT + GLOW BORDER
   ========================================= */

.s-products-slider-card
custom-salla-product-card.s-product-card-entry {

    --tilt-y: 0deg;
    --glow-x: 50%;

    position: relative !important;
    isolation: isolate;

    border: 1px solid rgba(104, 72, 56, 0.12) !important;
    border-radius: 18px !important;

    transform:
        perspective(900px)
        rotateY(var(--tilt-y));

    transform-origin: center;

    transition:
        transform .16s ease-out,
        box-shadow .3s ease,
        border-color .3s ease !important;
}


/* البوردر المضيء */
.s-products-slider-card
custom-salla-product-card.s-product-card-entry::after {

    content: "";

    position: absolute;
    inset: 0;

    padding: 1.5px;

    border-radius: inherit;

    background:
        radial-gradient(
            circle 150px at var(--glow-x) 50%,
            rgba(126, 86, 67, 0.95),
            rgba(104, 72, 56, 0.45) 35%,
            transparent 72%
        );

    /* نخلي التأثير في البوردر فقط */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;

    pointer-events: none;
    z-index: 20;

    transition: opacity .25s ease;
}


/* Hover */
@media (hover: hover) and (pointer: fine) {

    .s-products-slider-card
    custom-salla-product-card.s-product-card-entry:hover {

        border-color: transparent !important;

        box-shadow:
            0 10px 28px rgba(104, 72, 56, 0.13) !important;
    }

    .s-products-slider-card
    custom-salla-product-card.s-product-card-entry:hover::after {
        opacity: 1;
    }
} 











/* =========================================
   CATEGORY PRODUCT CARDS ONLY
   Tilt + Glow Border
   ========================================= */

.s-products-list-wrapper.s-products-list-vertical-cards
custom-salla-product-card.s-product-card-entry {

    --cat-glow-x: 50%;

    position: relative !important;
    isolation: isolate !important;

    transform:
        perspective(900px)
        rotateY(0deg);

    transform-origin: center center !important;
    transform-style: preserve-3d !important;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    will-change: transform;

    transition:
        transform .12s ease-out,
        box-shadow .28s ease !important;
}


/* البوردر المنوّر */
.s-products-list-wrapper.s-products-list-vertical-cards
custom-salla-product-card.s-product-card-entry::after {

    content: "";

    position: absolute;
    inset: 0;

    padding: 1.5px;
    border-radius: inherit;

    background:
        radial-gradient(
            circle 150px at var(--cat-glow-x) 50%,
            rgba(130, 89, 69, 1) 0%,
            rgba(104, 72, 56, .70) 30%,
            rgba(104, 72, 56, .25) 52%,
            transparent 74%
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    pointer-events: none;
    z-index: 20;

    transition: opacity .25s ease !important;
}


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

    .s-products-list-wrapper.s-products-list-vertical-cards
    custom-salla-product-card.s-product-card-entry:hover::after {
        opacity: 1;
    }

    .s-products-list-wrapper.s-products-list-vertical-cards
    custom-salla-product-card.s-product-card-entry:hover {
        box-shadow:
            0 10px 24px rgba(104, 72, 56, .10) !important;
    }
} 





.s-user-menu-trigger {
    display: contents;
    width: fit-content;
    cursor: pointer;
    align-items: center;
    border-top-right-radius: 0.375rem;
    border-top-left-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 2.25rem;
}



@media (max-width: 767px) {
  .header-search {
    position: relative;
    top: 30px;
   
  }
}






.navbar-brand img {
    max-height: 5rem;
    margin-top: 36px;
    margin-bottom: 29px;
    border-radius: 12px !important;
    max-width: 111px;
    width: auto;
}





@media (max-width: 767px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  * {
    box-sizing: border-box !important;
  }

  .container,
  .main-nav-container,
  .header-inner,
  .header-search,
  main,
  section {
    width: 100% !important;
    max-width: 100% !important;
  }

  img,
  video,
  iframe {
    max-width: 100% !important;
    height: auto;
  }
}



@media (max-width: 767px) {
  .main-nav-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .main-nav-container .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}



@media (max-width: 767px) {
    .main-nav-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        background: transparent !important;
    }
}






@media (max-width: 767px) {

  .main-nav-container .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(4px, 2vw, 12px) !important;
    padding-right: clamp(4px, 2vw, 12px) !important;
  }

  .main-nav-container .flex {
    gap: clamp(3px, 1.5vw, 10px) !important;
  }

  .main-nav-container .flex > * {
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  /* الأزرار / الأيقونات */
  .main-nav-container button,
  .main-nav-container a {
    min-width: 0 !important;
  }

  /* حجم الأيقونات يصغر تلقائي */
  .main-nav-container svg,
  .main-nav-container i {
    width: clamp(17px, 5vw, 25px) !important;
    height: clamp(17px, 5vw, 25px) !important;
  }

  /* اللوجو */
  .main-nav-container img {
    max-width: clamp(34px, 11vw, 55px) !important;
    height: auto !important;
  }
}




@media (max-width: 767px) {

  .header-search {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(4px, 2vw, 10px) !important;
    padding-right: clamp(4px, 2vw, 10px) !important;
  }

  .header-search salla-search {
    width: 100% !important;
    max-width: 100% !important;
  }

  .header-search .s-search-container,
  .header-search .s-search-input-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .header-search .s-search-input {
    width: 100% !important;
    min-width: 0 !important;

    height: clamp(26px, 8vw, 36px) !important;

    font-size: clamp(10px, 3.5vw, 14px) !important;

    border-radius: clamp(13px, 4vw, 18px) !important;

    padding-right: clamp(8px, 3vw, 15px) !important;
    padding-left: clamp(8px, 3vw, 15px) !important;
  }

  .header-search .s-search-icon svg {
    width: clamp(14px, 4vw, 20px) !important;
    height: clamp(14px, 4vw, 20px) !important;
  }
}




.header-search {
  width: clamp(120px, 85vw, 100%) !important;
  margin-inline: auto !important;
}









@media (max-width: 767px) {

  .s-slider-block__title {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(4px, 2vw, 12px) !important;
    margin-bottom: clamp(8px, 3vw, 16px) !important;
  }

  .s-slider-block__title-right {
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  .s-slider-block__title-right h2 {
    font-size: clamp(12px, 4vw, 20px) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }

  .s-slider-block__title-left {
    display: flex !important;
    align-items: center !important;
    gap: clamp(3px, 1.5vw, 8px) !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .s-slider-block__display-all {
    font-size: clamp(9px, 3vw, 13px) !important;
    white-space: nowrap !important;
  }

  .s-slider-block__title-nav {
    display: flex !important;
    gap: clamp(2px, 1vw, 6px) !important;
  }

  .s-slider-nav-arrow {
    width: clamp(26px, 8vw, 40px) !important;
    height: clamp(26px, 8vw, 40px) !important;
    min-width: 0 !important;
  }

  .s-slider-button-icon svg {
    width: clamp(14px, 4vw, 22px) !important;
    height: clamp(14px, 4vw, 22px) !important;
  }
}















@media (max-width: 300px) {

  .s-slider-nav-arrow {
    width: 22px !important;
    height: 22px !important;
  }

  .s-slider-button-icon svg {
    width: 11px !important;
    height: 11px !important;
  }

  .s-slider-block__display-all {
    font-size: 10px !important;
  }
}

@media screen and (max-width: 767px) {
    .s-slider-block__display-all {
        min-height: 29px !important;
        padding: 3px 23px !important;
        font-size: 10px !important;
    }
}







@media (max-width: 767px) {
  .s-block--features__item {
   
    border-radius: clamp(8px, 3vw, 14px) !important;
    min-width: 0 !important;
  }

  .s-block--features__item h3,
  .s-block--features__item h4,
  .s-block--features__item strong {
    font-size: clamp(10px, 3.5vw, 15px) !important;
    line-height: 1.25 !important;
  }

  .s-block--features__item p,
  .s-block--features__item span {
    font-size: clamp(8px, 2.8vw, 12px) !important;
    line-height: 1.35 !important;
  }

  .s-block--features__item svg,
  .s-block--features__item i {
    width: clamp(18px, 5vw, 28px) !important;
    height: clamp(18px, 5vw, 28px) !important;
  }

  .s-block--features {
    gap: clamp(4px, 2vw, 10px) !important;
  }
}



@media (max-width: 240px) {
  .s-block--features__item {
    padding: 5px !important;
  }

  .s-block--features__item h3,
  .s-block--features__item h4,
  .s-block--features__item strong {
    font-size: 9px !important;
  }

  .s-block--features__item p,
  .s-block--features__item span {
    font-size: 7px !important;
  }

  .s-block--features__item svg,
  .s-block--features__item i {
    width: 16px !important;
    height: 16px !important;
  }
}






salla-modal.s-login-modal iframe {
  width: 100% !important;
 
  max-height: none !important;
  transform: none !important;
  scale: 1 !important;
}

salla-modal.s-login-modal .s-modal-wrapper {
  overflow: visible !important;
}




@media (max-width: 767px) {

  salla-modal.s-login-modal .s-modal-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 2 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  salla-modal.s-login-modal iframe {
    width: 100% !important;
    height: 390px !important;
    min-height: 390px !important;
    max-height: none !important;
    display: block !important;
    transform: none !important;
  }

  salla-modal.s-login-modal .s-modal-wrapper {
    width: 100% !important;
    padding-inline: 12px !important;
  }
}




@media (max-width: 767px) {
    salla-modal.s-login-modal .s-modal-body

 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 2 !important;
        border-radius: 9px !important;
        overflow: hidden !important;
    }
}



































@media (max-width: 767px) {

  salla-mini-checkout-modal iframe,
  .s-mini-checkout-modal-wrapper iframe {
    width: 100% !important;
    height: 88vh !important;
    min-height: 620px !important;
    max-height: 88vh !important;
    display: block !important;
  }

  .s-mini-checkout-modal-wrapper {
    max-height: 92vh !important;
    overflow: hidden !important;
  }

  .s-mini-checkout-modal-container {
    max-height: 92vh !important;
  }
}










.tayeef-made-by {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
margin-bottom: 10px !important ;
  direction: rtl;
  white-space: nowrap;

  padding: 9px 18px;
  margin: 14px auto 0;

  border-radius: 999px;

  /* خلفية زجاجية شفافة متناسقة مع الفوتر */
  background: rgba(255, 255, 255, .07) !important;

  border: 1px solid rgba(255, 255, 255, 0.14);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: #f7eee8;

  font-size: 17px;
  line-height: 1;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 14px rgba(0, 0, 0, 0.08);
}

.tayeef-made-by .light-text {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 400;
}

.tayeef-made-by .brand-text {
  color: #ffffff;
  font-weight: 700;
}

.tayeef-made-by-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 14px;
  margin-bottom: 4px;
}