/* =========================================
   MOROUD | THEME: DARK OUD
   ثيم عود داكن
   ========================================= */


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

/* MOROUD - Page Background */
body {
    background-color: #130B0D !important;
}


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

/* MOROUD - Main Header */
#mainnav,
#mainnav .inner {
    background-color: #130B0D !important;
}

/* MOROUD - Header Contact Email */
.s-contacts-topnav-link {
    color: #E3DDD2 !important;
}

/* MOROUD - Main Navigation Links */
#mainnav .main-menu > li > a {
    color: #E3DDD2 !important;
}

/* MOROUD - Cart Icon & Circle */
#mainnav salla-cart-summary .header-btn__icon {
    color: #E3DDD2 !important;
    border-color: #674735 !important;
}

/* MOROUD - Cart Total */
.s-cart-summary-total {
    color: #E3DDD2 !important;
}

/* MOROUD - User Account Icon */
#mainnav .s-user-menu-login-btn {
    color: #E3DDD2 !important;
    border-color: #674735 !important;
}

#mainnav .s-user-menu-login-btn svg path {
    fill: #E3DDD2 !important;
    stroke: none !important;
    opacity: 1 !important;
}


/* =========================================
   HOME PAGE
   ========================================= */

/* MOROUD - Home Sections Background */
.home .s-block,
#main-content .s-block {
    background-color: #130B0D !important;
}


/* =========================================
   PRODUCT CARDS
   MOROUD PRODUCT CARD V1
   ========================================= */


/* MOROUD - Product Image Height */
.s-product-card-image {
    height: 260px !important;
}

/* MOROUD - Product Information Area */
.s-product-card-content {
    background-color: #130B0D !important;
    padding: 1rem !important;
}

/* MOROUD - Product Name */
.s-product-card-content-title,
.s-product-card-content-title a {
    color: #E3DDD2 !important;
}

/* MOROUD - Product Description Area */
.s-product-card-content-sub,
.s-product-card-content-sub * {
    color: #E3DDD2 !important;
}

/* MOROUD - Product Card Subtitle */
p.s-product-card-content-subtitle,
.s-product-card-content-main p.s-product-card-content-subtitle {
    color: #E3DDD2 !important;
    -webkit-text-fill-color: #E3DDD2 !important;
    --tw-text-opacity: 1 !important;
    opacity: 0.80 !important;
}

/* MOROUD - Product Price */
.s-product-card-price,
.s-product-card-price *,
.s-product-card-content-footer .s-product-card-price,
.s-product-card-content-footer .s-product-card-price * {
    color: #E3DDD2 !important;
    fill: #E3DDD2 !important;
}

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

/* MOROUD - Mobile Menu Background & Main Links */
ul.main-menu.mm-spn--open {
    background: #130B0D !important;
    color: #E3DDD2 !important;
}

/* MOROUD - Mobile Menu Header */
#mobile-menu.mm-spn--navbar::after {
    background: #130B0D !important;
    color: #E3DDD2 !important;
}

/* MOROUD - Mobile Menu Subcategories */
#mobile-menu a.text-gray-500 {
    color: #E3DDD2 !important;
}


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

/* MOROUD - Product Options / Size Card */
.s-product-options-wrapper {
    background-color: #E3DDD2 !important;
}

/* MOROUD - Product Model Card */
div.flex.justify-between.sm\:grid.sm\:grid-cols-3.bg-white {
    background-color: #E3DDD2 !important;
}

/* MOROUD - Product Price Card */
.product-form section.flex.bg-white:not(.sticky-product-bar) {
    background-color: #E3DDD2 !important;
}

/* MOROUD - Product Main Title */
.main-content h1.text-gray-800 {
    color: #E3DDD2 !important;
}

/* MOROUD - Product Subtitle */
.main-content h2.product-entry__sub-title {
    color: #E3DDD2 !important;
}


/* =========================================
   PRODUCT MAIN PRICE
   ========================================= */

/* MOROUD - Product Main Price */
[data-testid="store-product-price"] p,
[data-testid="store-product-price"] p * {
    color: #E3DDD2 !important;
    fill: #E3DDD2 !important;
}


/* =========================================
   WISHLIST & SHARE BUTTONS
   ========================================= */

button.btn--wishlist,
button.s-social-share-btn {
    background-color: #E3DDD2 !important;
    border-color: #674735 !important;
    color: #674735 !important;
}


/* =========================================
   BREADCRUMB
   ========================================= */

/* MOROUD - Breadcrumb Text */
.s-breadcrumb-item {
    color: rgba(227, 221, 210, 0.68) !important;
    font-size: 14px !important;
}

.s-breadcrumb-item:last-child {
    color: #E3DDD2 !important;
}

/* MOROUD - Breadcrumb Arrows */
.s-breadcrumb-arrow svg path {
    fill: #674735 !important;
    stroke: #674735 !important;
}


/* =========================================
   SEARCH BAR
   ========================================= */

/* MOROUD - Search Input */
.s-search-input {
    background-color: #E3DDD2 !important;
    color: #674735 !important;
}

/* MOROUD - Search Placeholder */
.s-search-input::placeholder {
    color: #674735 !important;
}

/* MOROUD - Search Icon */
.s-search-icon svg {
    fill: #674735 !important;
}


/* =========================================
   PRODUCTS PAGE
   ========================================= */

/* MOROUD - Products Count / Page Title */
#page-main-title {
    color: #E3DDD2 !important;
    font-size: 0 !important;
    line-height: 1.4 !important;
}

#page-main-title > * {
    display: none !important;
}

#page-main-title::after {
    content: "مُختاراتنا" !important;
    display: inline-block !important;
    color: #E3DDD2 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}


/* =========================================
   PRODUCT SORTING
   ========================================= */

/* MOROUD - "ترتيب حسب" Label */
label[for="product-filter"] {
    color: #E3DDD2 !important;
}

/* MOROUD - Sorting Dropdown */
#product-filter {
    min-height: 46px !important;
    padding-inline: 16px 42px !important;

    color: #E3DDD2 !important;
    background-color: #130B0D !important;

    border: 1px solid rgba(103, 71, 53, 0.85) !important;
    border-radius: 10px !important;

    box-shadow: none !important;
}

#product-filter:focus {
    border-color: #A97C50 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(169, 124, 80, 0.18) !important;
}

/* MOROUD - Sorting Options */
#product-filter option {
    color: #E3DDD2 !important;
    background-color: #130B0D !important;
}

@media (max-width: 767px) {
    #page-main-title::after {
        font-size: 18px !important;
    }

    #product-filter {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important;
        font-size: 14px !important;
    }
}


/* =========================================
   PRODUCTS LIST END MESSAGE
   ========================================= */

/* MOROUD - "لا يوجد المزيد لعرضه" */
.s-infinite-scroll-last {
    color: #E3DDD2 !important;
}


/* =========================================
   EMPTY PRODUCTS STATE
   ========================================= */

/* MOROUD - Empty Products Icon Circle */
.s-products-list-placeholder span {
    background-color: #E3DDD2 !important;
    color: #674735 !important;
}

/* MOROUD - Empty Products Bag Icon */
.s-products-list-placeholder span svg,
.s-products-list-placeholder span svg path {
    fill: #674735 !important;
    color: #674735 !important;
}

/* MOROUD - Empty Products Text */
.s-products-list-placeholder p {
    color: #E3DDD2 !important;
}


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

/* MOROUD - Empty Cart Text */
[data-testid="store-cart-empty"] > p {
    color: #E3DDD2 !important;
}

/* MOROUD - Empty Cart Circle */
[data-testid="store-cart-empty"] > i.sicon-shopping-bag {
    background-color: #E3DDD2 !important;
    color: #674735 !important;
}

/* MOROUD - Empty Cart Icon */
[data-testid="store-cart-empty"] > i.sicon-shopping-bag::before {
    color: #674735 !important;
}


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

/* MOROUD - Footer Background */
.store-footer,
.store-footer__inner {
    background-color: #130B0D !important;
}

/* MOROUD - Footer Text */
.store-footer,
.store-footer a,
.store-footer p,
.store-footer h3,
.store-footer h4 {
    color: #E3DDD2 !important;
}


/* MOROUD - Footer Link Transition */
.store-footer a {
    transition: color 0.25s ease, opacity 0.25s ease;
}

/* MOROUD - Footer Link Hover */
.store-footer a:hover {
    color: #E3DDD2 !important;
    opacity: 0.72 !important;
}

/* MOROUD - Phone & Email Icon Circles */
.store-footer .s-contacts-icon {
    border-color: #674735 !important;
}

/* MOROUD - Social Media Icon Circles */
.store-footer .s-social-link a {
    border-color: #674735 !important;
}
/* =========================================
   MOROUD - Footer Soft Divider
   ========================================= */

.store-footer {
    position: relative;
}

.store-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 88%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(103, 71, 53, 0.22) 15%,
        rgba(103, 71, 53, 0.70) 50%,
        rgba(103, 71, 53, 0.22) 85%,
        transparent 100%
    );
}
/* =========================================
   MOROUD | HOME HERO
   Hero Position + Luxury Bottom Frame
   ========================================= */

section[data-testid="store-home-fixed-banner"] {
    margin-top: 24px !important;
    margin-bottom: 34px !important;
    padding-top: 0 !important;
}


/* Hero Container */
section[data-testid="store-home-fixed-banner"] > .container {
    position: relative !important;

    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* =========================================
   MOROUD | HERO DIVIDER - REFINED
   Pure CSS geometric star (no text encoding)
   ========================================= */

/* Two quiet Oudwood lines */
section[data-testid="store-home-fixed-banner"] > .container::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    width: min(38%, 480px);
    height: 22px;
    background:
        linear-gradient(to right, transparent, rgba(103, 71, 53, .85)) left center / 46% 1px no-repeat,
        linear-gradient(to left, transparent, rgba(103, 71, 53, .85)) right center / 46% 1px no-repeat;
    pointer-events: none;
}

/* Four-point Majlis Copper star drawn as a shape */
section[data-testid="store-home-fixed-banner"] > .container::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    background-color: #A97C50;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    pointer-events: none;
    z-index: 2;
}

@media (max-width: 767px) {
    section[data-testid="store-home-fixed-banner"] > .container::after {
        width: 54%;
        max-width: 250px;
    }
}

/* =========================================
   MOROUD - Product Slider Arrows
   ========================================= */

/* Product Slider Arrow Circle */
salla-slider .s-slider-nav-arrow {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;

    background-color: #130B0D !important;
    border: 1px solid #674735 !important;
    border-radius: 50% !important;

    box-shadow: none !important;
    color: #E3DDD2 !important;
}

/* Product Slider Arrow Icon */
salla-slider .s-slider-nav-arrow svg,
salla-slider .s-slider-nav-arrow svg path {
    fill: #E3DDD2 !important;
    color: #E3DDD2 !important;
}

/* Disabled Product Slider Arrow */
salla-slider .s-slider-nav-arrow.swiper-button-disabled {
    opacity: 0.35 !important;
}


/* =========================================
   MOROUD - Product Image Clean Edges
   ========================================= */

/* Remove Default Image Border */
.s-product-card-image,
.s-product-card-image a,
.s-product-card-image img,
.s-product-card-image-cover {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}/* =========================================
   MOROUD - Product Image Seam Fix
   ========================================= */

/* Hide Any Edge / Rendering Seam */
.s-product-card-image {
    overflow: hidden !important;
    background-color: #130B0D !important;
}

/* Slight Image Bleed To Remove Light Edge */
.s-product-card-image img.s-product-card-image-cover {
    transform: scale(1.006) !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}/* MOROUD - Cart Count Badge */
#mainnav .s-cart-summary-count {
    background-color: #674735 !important;
    color: #E3DDD2 !important;
}
/* =========================================
   MOROUD | Oud Properties Box
   ========================================= */

.s-metadata-box {
    background-color: #130B0D !important;
    border: 1px solid rgba(103, 71, 53, 0.55) !important;
    border-radius: 10px !important;
    padding: 18px 20px !important;
    box-shadow: none !important;
}

/* Header divider */
.s-metadata-box-header {
    border-bottom-color: rgba(103, 71, 53, 0.42) !important;
}

/* Properties title */
.s-metadata-box-header,
.s-metadata-box-header * {
    color: #E3DDD2 !important;
}

/* Property rows */
.s-metadata-row,
.s-metadata-row * {
    color: #E3DDD2 !important;
}
/* =========================================
   MOROUD | WhatsApp Floating Button
   ========================================= */

a.wa-s-n {
    background-color: #674735 !important;
    color: #E3DDD2 !important;
    box-shadow: none !important;
}

/* WhatsApp Icon */
a.wa-s-n svg,
a.wa-s-n svg path {
    color: #E3DDD2 !important;
    fill: #E3DDD2 !important;
}

/* Hover */
a.wa-s-n:hover {
    background-color: #E3DDD2 !important;
    color: #674735 !important;
}

a.wa-s-n:hover svg,
a.wa-s-n:hover svg path {
    color: #674735 !important;
    fill: #674735 !important;
}
/* =========================================
   MOROUD | Product Wishlist Button
   ========================================= */

/* Default */
button.s-product-card-wishlist-btn,
button.s-product-card-wishlist-btn.s-button-element,
.s-product-card-wishlist-btn {
    background: rgba(19, 11, 13, 0.82) !important;
    background-color: rgba(19, 11, 13, 0.82) !important;

    color: #E3DDD2 !important;
    border: 1px solid rgba(103, 71, 53, 0.75) !important;
    box-shadow: none !important;
}

/* Heart */
button.s-product-card-wishlist-btn svg,
button.s-product-card-wishlist-btn svg path {
    color: #E3DDD2 !important;
    stroke: #E3DDD2 !important;
}

/* Hover */
button.s-product-card-wishlist-btn:hover {
    background: #674735 !important;
    background-color: #674735 !important;

    color: #E3DDD2 !important;
    border-color: #674735 !important;
}

button.s-product-card-wishlist-btn:hover svg,
button.s-product-card-wishlist-btn:hover svg path {
    color: #E3DDD2 !important;
    stroke: #E3DDD2 !important;
}
/* =========================================
   MOROUD | HEADER FINAL
   Single Row Luxury Header
   ========================================= */


/* =========================================
   1. HEADER ARCHITECTURE
   ========================================= */

.store-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;

    width: 100% !important;

    background: #130B0D !important;

    border: none !important;
    box-shadow: none !important;

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

    overflow: visible !important;
}


/* Remove inner backgrounds */
.store-header .inner,
.store-header .container {
    background: transparent !important;
}


/* Subtle lower MOROUD divider */
.store-header::after {
    content: "";

    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 0;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(103, 71, 53, 0.08) 18%,
        rgba(103, 71, 53, 0.30) 50%,
        rgba(103, 71, 53, 0.08) 82%,
        transparent 100%
    );

    pointer-events: none;
}


/* =========================================
   2. DESKTOP HEADER
   ========================================= */

@media (min-width: 1024px) {

    .store-header,
    .store-header #mainnav,
    .store-header #mainnav > .inner,
    .store-header #mainnav .container {
        height: 88px !important;
        min-height: 88px !important;
        max-height: 88px !important;
    }

    .store-header #mainnav {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        background: #130B0D !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .store-header #mainnav .container {
        position: relative !important;
        padding-inline: 0 !important;
    }

    .store-header #mainnav .container >
    .flex.items-stretch.justify-between.relative {
        position: relative !important;
        height: 88px !important;
        align-items: center !important;
    }

    .store-header custom-main-menu {
        display: none !important;
    }

    /* زر الثلاث شرطات */
    .store-header [data-testid="store-header-mobile-toggle"] {
        position: absolute !important;
        right: 7% !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 1px solid rgba(103, 71, 53, 0.55) !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        color: #674735 !important;
        z-index: 30 !important;
    }

    .store-header [data-testid="store-header-mobile-toggle"] i,
    .store-header [data-testid="store-header-mobile-toggle"] i::before {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        color: #674735 !important;
        -webkit-text-fill-color: #674735 !important;
    }

    .store-header [data-testid="store-header-mobile-toggle"] svg,
    .store-header [data-testid="store-header-mobile-toggle"] svg path {
        color: #674735 !important;
        fill: #674735 !important;
        stroke: #674735 !important;
    }

    .store-header [data-testid="store-header-mobile-toggle"]:hover {
        background: rgba(103, 71, 53, 0.08) !important;
        border-color: rgba(103, 71, 53, 0.85) !important;
    }

    /* شعار مُورود */
    .store-header [data-testid="store-header-logo"] {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 20 !important;
    }

    .store-header [data-testid="store-header-logo"] img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 138px !important;
        max-height: 66px !important;
        object-fit: contain !important;
    }

    /* الحساب + السلة: نحجز مكان البحث قبلهما */
    .store-header #mainnav
    .flex.items-stretch.justify-between.relative
    > .flex.items-center.justify-end {
        position: absolute !important;
        left: 7% !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 30 !important;
    }

    /* Host الحساب بدون دائرة إضافية */
    .store-header salla-user-menu[data-testid="store-header-user-menu"] {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .store-header .s-user-menu-login-btn {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(103, 71, 53, 0.85) !important;
        border-radius: 50% !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .store-header .s-user-menu-login-btn svg {
        width: 26px !important;
        height: 26px !important;
        margin: 0 !important;
    }

    /* Host السلة بدون دائرة؛ الدائرة على الرابط فقط */
    .store-header salla-cart-summary[data-testid="store-header-cart"] {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .store-header salla-cart-summary[data-testid="store-header-cart"]
    .s-cart-summary-wrapper {
        position: relative !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(103, 71, 53, 0.85) !important;
        border-radius: 50% !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .store-header salla-cart-summary[data-testid="store-header-cart"]
    .s-cart-summary-content,
    .store-header salla-cart-summary[data-testid="store-header-cart"]
    .s-cart-summary-total {
        display: none !important;
    }

    .store-header salla-cart-summary[data-testid="store-header-cart"]
    #s-cart-icon {
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .store-header salla-cart-summary[data-testid="store-header-cart"]
    .header-btn__icon {
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #E3DDD2 !important;
        line-height: 1 !important;
    }

    /* البحث: دائرة مستقلة قبل السلة والحساب */
    .store-header .top-navbar {
        position: absolute !important;
        top: 21px !important;
        left: calc(7% + 112px) !important;
        width: 46px !important;
        height: 46px !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        z-index: 50 !important;
    }

    .store-header .top-navbar > .container,
    .store-header .top-navbar salla-search,
    .store-header .top-navbar .s-search-input-wrapper {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .store-header .top-navbar > .container {
        position: relative !important;
        display: block !important;
    }

    .store-header .s-contacts-topnav-link,
    .store-header .top-navbar .header-buttons,
    .store-header .top-navbar .hidden.lg\:block {
        display: none !important;
    }

    .store-header .top-navbar .s-search-input-wrapper {
        position: relative !important;
        display: block !important;
        overflow: hidden !important;
        background: transparent !important;
        border: 1px solid rgba(103, 71, 53, 0.85) !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    .store-header .top-navbar .s-search-input {
        position: absolute !important;
        inset: 0 !important;
        width: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        border: 0 !important;
        cursor: pointer !important;
        z-index: 3 !important;
    }

    .store-header .top-navbar .s-search-icon-wrap {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 21px !important;
        height: 21px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none !important;
        z-index: 4 !important;
    }

    .store-header .top-navbar .s-search-icon-wrap svg {
        width: 21px !important;
        height: 21px !important;
        color: #E3DDD2 !important;
        stroke: #E3DDD2 !important;
        fill: none !important;
    }

    .store-header .top-navbar .s-search-icon-wrap svg path {
        stroke: #E3DDD2 !important;
    }
}

/* =========================================
   MOROUD | HEADER STACKING FIX
   Keep header content above Hero
   ========================================= */


.store-header #mainnav {
    position: relative !important;
    z-index: 40 !important;
}

.store-header .top-navbar {
    z-index: 50 !important;
}
/* =========================================
   MOROUD | SALLA FIXED-PINNED FIX
   Disable Salla inner scroll movement
   Header itself handles sticky behavior
   ========================================= */

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

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;

    transform: none !important;
    translate: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    background: #130B0D !important;

    box-shadow: none !important;
}
/* =========================================
   MOROUD | CATEGORY GATEWAY
   انتقاء مُورود
   ========================================= */


/* -----------------------------------------
   1. SECTION COLORS
   ----------------------------------------- */

.square-photos-grid {
    --moroud-bg: #130B0D;
    --moroud-oud: #674735;
    --moroud-copper: #A97C50;
    --moroud-ivory: #E3DDD2;
}


/* -----------------------------------------
   2. SECTION TITLE
   انتقاء مُورود
   ----------------------------------------- */

.right-side h2 {
    color: #674735 !important;
    font-weight: 700 !important;
}


/* -----------------------------------------
   3. CARDS GRID
   Two centered vertical cards
   ----------------------------------------- */

.square-photos-grid.square-photos-grid--equal-2 {
    max-width: 760px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    gap: 55px !important;
}


/* -----------------------------------------
   4. CATEGORY CARD
   Vertical + Cut Corners
   ----------------------------------------- */

.square-photos-grid .banner-entry.square-photos {
    position: relative !important;

    aspect-ratio: 5 / 6 !important;

    height: auto !important;
    min-height: 0 !important;

    background: #130B0D !important;

    border: 1px solid rgba(103, 71, 53, 0.65) !important;
    border-radius: 0 !important;

    overflow: hidden !important;

    clip-path: polygon(
        16px 0,
        calc(100% - 16px) 0,
        100% 16px,
        100% calc(100% - 16px),
        calc(100% - 16px) 100%,
        16px 100%,
        0 calc(100% - 16px),
        0 16px
    ) !important;

    transition:
        border-color 0.45s ease,
        transform 0.45s ease !important;
}


/* -----------------------------------------
   5. CATEGORY IMAGE
   Quiet by default
   ----------------------------------------- */

.square-photos-grid
.banner-entry.square-photos
.lazy__bg,

.square-photos-grid
.banner-entry.square-photos > div {

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

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    filter:
        brightness(0.58)
        saturate(0.72) !important;

    transition:
        filter 0.55s ease,
        transform 0.65s ease !important;
}


/* -----------------------------------------
   6. MOROUD DARK VEIL
   Soft dark layer over image
   ----------------------------------------- */

.square-photos-grid
.banner-entry.square-photos.has-overlay::after {

    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(19, 11, 13, 0.10) 0%,
            rgba(19, 11, 13, 0.22) 58%,
            rgba(19, 11, 13, 0.58) 100%
        ) !important;

    transition:
        background 0.55s ease !important;

    pointer-events: none !important;
}


/* -----------------------------------------
   7. CATEGORY NAME
   ----------------------------------------- */

.square-photos-grid
.banner-entry.square-photos
h3.text-with-border {

    position: relative !important;
    z-index: 5 !important;

    color: #E3DDD2 !important;

    border: 0 !important;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.55) !important;
}


.square-photos-grid
.banner-entry.square-photos
h3.text-with-border span {

    color: #E3DDD2 !important;

    font-weight: 700 !important;

    transition:
        color 0.40s ease !important;
}


/* =========================================
   HOVER EXPERIENCE
   الصورة تستيقظ بهدوء
   ========================================= */


/* Copper frame */

.square-photos-grid
.banner-entry.square-photos:hover {

    border-color: rgba(169, 124, 80, 0.90) !important;
}


/* Reveal image */

.square-photos-grid
.banner-entry.square-photos:hover
.lazy__bg,

.square-photos-grid
.banner-entry.square-photos:hover > div {

    filter:
        brightness(0.90)
        saturate(0.92) !important;

    transform: scale(1.015) !important;
}


/* Reduce dark veil */

.square-photos-grid
.banner-entry.square-photos.has-overlay.with-hover:hover::after {

    background:
        linear-gradient(
            180deg,
            rgba(19, 11, 13, 0.03) 0%,
            rgba(19, 11, 13, 0.08) 58%,
            rgba(19, 11, 13, 0.34) 100%
        ) !important;
}


/* Category name becomes subtly warmer */

.square-photos-grid
.banner-entry.square-photos:hover
h3.text-with-border span {

    color: #E3DDD2 !important;
}
/* =========================================
   MOROUD | Compact Product Cards
   ========================================= */

.s-product-card-entry {
    width: 260px !important;
    max-width: 260px !important;
    margin-inline: auto !important;

    border: 1px solid rgba(169, 124, 80, 0.38) !important;
    border-radius: 12px !important;

    padding: 10px !important;
    overflow: hidden !important;

    background-color: #130B0D !important;
}
/* =========================================
   MOROUD | CATEGORY CARDS
   Oud / Oils
   ========================================= */

/* إخفاء عنوان انتقاء مُورود */
section.s-block--banners .s-block__title {
    display: none !important;
}


/* البطاقة هي مرجع تموضع الاسم */
.square-photos-grid .banner-entry.square-photos {
    position: relative !important;
}


/* اسم التصنيف - أعلى يمين */
.square-photos-grid .banner-entry.square-photos h3.text-with-border {
    position: absolute !important;

    inset: auto !important;
    top: 30px !important;
    right: 30px !important;
    left: auto !important;
    bottom: auto !important;

    width: auto !important;
    height: auto !important;

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

    z-index: 20 !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}


/* العود / الأدهان */
.square-photos-grid .banner-entry.square-photos h3.text-with-border span {
    color: #E3DDD2 !important;

    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
}


/* خط كوبر صغير تحت الاسم */
.square-photos-grid .banner-entry.square-photos h3.text-with-border::after {
    content: "" !important;

    position: static !important;

    display: block !important;

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

    margin-top: 7px !important;

    background: #A97C50 !important;
    opacity: 0.9 !important;

    transform: none !important;
}
/* =========================================
   MOROUD | CATEGORY GATEWAY INTERACTION
   ========================================= */

/* الاسم + سهم الدخول */
.square-photos-grid .banner-entry.square-photos
h3.text-with-border span {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

/* السهم */
.square-photos-grid .banner-entry.square-photos
h3.text-with-border span::after {
    content: "←";
    color: #A97C50;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;

    transition: transform 0.35s ease;
}

/* حركة السهم عند المرور */
.square-photos-grid .banner-entry.square-photos:hover
h3.text-with-border span::after {
    transform: translateX(-5px);
}

/* حركة الصورة الهادئة */
.square-photos-grid .banner-entry.square-photos .lazy__bg {
    transition: transform 0.6s ease !important;
}

.square-photos-grid .banner-entry.square-photos:hover .lazy__bg {
    transform: scale(1.02);
}
/* MOROUD | Keep category arrow visible */
.square-photos-grid .banner-entry.square-photos
h3.text-with-border span {
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
}
/* =========================================
   MOROUD | HOME HEADER
   Hide Header Logo On Homepage Only
   ========================================= */

body:has(section[data-testid="store-home-fixed-banner"])
.store-header [data-testid="store-header-logo"] {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* =========================================
   MOROUD | BRAND INTRO
   Homepage Text Section
   ========================================= */

/* المكوّن */
salla-quotes-tcf2k3[component-name="quotes"] {
    position: relative !important;
    display: block !important;

    min-height: 300px !important;

    /* نخفي تنسيق سلة الداخلي مع بقاء مساحة القسم */
    visibility: hidden !important;
}

/* العنوان: في مُورود */
salla-quotes-tcf2k3[component-name="quotes"]::before {
    content: "في مُورود";

    visibility: visible !important;

    position: absolute !important;
    top: 72px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 90% !important;

    color: #E3DDD2 !important;

    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    text-align: center !important;
    direction: rtl !important;

    z-index: 2 !important;
}
/* =========================================
   MOROUD | BRAND INTRO
   Prevent Flash + Layout Shift
   ========================================= */

/* احجز مكان النبذة من أول لحظة */
[component-name="quotes"] {
    display: block !important;

    min-height: 300px !important;

    visibility: hidden !important;
    opacity: 0 !important;

    margin-top: -35px !important;
    margin-bottom: -35px !important;
}

/* بعد تجهيز تصميم مُورود */
[component-name="quotes"].moroud-ready {
    visibility: visible !important;
    opacity: 1 !important;

    transition: opacity 0.25s ease !important;
}

/* الجوال */
@media (max-width: 640px) {
    [component-name="quotes"] {
        min-height: 380px !important;
    }
}
/* =========================================
   MOROUD | MOBILE HEADER + MOBILE CATALOG
   ========================================= */

@media (max-width: 767px) {

    .store-header {
        position: sticky !important;
        top: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 8px 14px 12px !important;
        background: #130B0D !important;
        border-radius: 0 0 24px 24px !important;
        box-shadow: none !important;
    }

    /* البحث */
    .store-header .top-navbar {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .store-header .top-navbar > .container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .store-header .s-search-input-wrapper {
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        border: 1px solid rgba(103, 71, 53, 0.45) !important;
        border-radius: 21px !important;
        background: rgba(227, 221, 210, 0.96) !important;
        box-shadow: none !important;
    }

    .store-header .s-search-input-wrapper input {
        width: 100% !important;
        height: 42px !important;
        margin: 0 !important;
        padding-right: 18px !important;
        padding-left: 44px !important;
        color: #674735 !important;
        background: transparent !important;
        font-size: 15px !important;
    }

    .store-header .s-search-input-wrapper input::placeholder {
        color: #674735 !important;
        opacity: .8 !important;
    }

    /* الصف الرئيسي */
    .store-header #mainnav,
    .store-header #mainnav > .inner,
    .store-header #mainnav > .inner > .container {
        height: 64px !important;
        min-height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #130B0D !important;
        box-shadow: none !important;
    }

    .store-header #mainnav
    .flex.items-stretch.justify-between.relative {
        position: relative !important;
        width: 100% !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .store-header #mainnav
    .flex.items-stretch.justify-between.relative
    > .flex.items-center:first-child {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    .store-header #mainnav custom-main-menu {
        display: none !important;
    }

    /* زر الثلاث شرطات */
    .store-header [data-testid="store-header-mobile-toggle"] {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(103, 71, 53, 0.75) !important;
        border-radius: 50% !important;
        background: transparent !important;
        color: #E3DDD2 !important;
        pointer-events: auto !important;
    }

    .store-header [data-testid="store-header-mobile-toggle"] i,
    .store-header [data-testid="store-header-mobile-toggle"] i::before {
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 24px !important;
        line-height: 1 !important;
        color: #E3DDD2 !important;
        -webkit-text-fill-color: #E3DDD2 !important;
    }

    .store-header [data-testid="store-header-mobile-toggle"] svg,
    .store-header [data-testid="store-header-mobile-toggle"] svg path {
        color: #E3DDD2 !important;
        fill: #E3DDD2 !important;
        stroke: #E3DDD2 !important;
    }

    /* الشعار في الصفحات الداخلية */
    .store-header [data-testid="store-header-logo"] {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        max-width: 74px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
    }

    .store-header [data-testid="store-header-logo"] img {
        display: block !important;
        width: auto !important;
        max-width: 74px !important;
        max-height: 52px !important;
        object-fit: contain !important;
    }

    /* الحساب + السلة */
    .store-header #mainnav
    .flex.items-stretch.justify-between.relative
    > .flex.items-center.justify-end {
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10 !important;
    }

    /* لا دائرة على الـ host */
    .store-header salla-user-menu[data-testid="store-header-user-menu"],
    .store-header salla-cart-summary[data-testid="store-header-cart"] {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .store-header salla-user-menu[data-testid="store-header-user-menu"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* دائرة الحساب الوحيدة */
    .store-header .s-user-menu-login-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(103, 71, 53, 0.80) !important;
        border-radius: 50% !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .store-header .s-user-menu-login-btn svg {
        width: 25px !important;
        height: 25px !important;
        margin: 0 !important;
    }

    /* دائرة السلة الوحيدة */
    .store-header salla-cart-summary[data-testid="store-header-cart"] {
        display: block !important;
    }

    .store-header salla-cart-summary[data-testid="store-header-cart"]
    .s-cart-summary-wrapper {
        position: relative !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(103, 71, 53, 0.80) !important;
        border-radius: 50% !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .store-header salla-cart-summary[data-testid="store-header-cart"]
    .s-cart-summary-content,
    .store-header salla-cart-summary[data-testid="store-header-cart"]
    .s-cart-summary-total {
        display: none !important;
    }

    .store-header salla-cart-summary[data-testid="store-header-cart"]
    #s-cart-icon,
    .store-header salla-cart-summary[data-testid="store-header-cart"]
    .header-btn__icon {
        width: 23px !important;
        height: 23px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #E3DDD2 !important;
        line-height: 1 !important;
    }

    .store-header salla-cart-summary[data-testid="store-header-cart"].ml-4,
    .store-header salla-cart-summary[data-testid="store-header-cart"].rtl\:mr-4 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* التصنيفات: العود والأدهان بجانب بعض على الجوال */
    .square-photos-grid.square-photos-grid--equal-2 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        margin-inline: auto !important;
    }

    .square-photos-grid.square-photos-grid--equal-2
    .banner-entry.square-photos {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .square-photos-grid.square-photos-grid--equal-2
    .banner-entry.square-photos h3.text-with-border {
        top: 18px !important;
        right: 16px !important;
    }

    .square-photos-grid.square-photos-grid--equal-2
    .banner-entry.square-photos h3.text-with-border span {
        font-size: 17px !important;
    }

    /* بطاقات المنتجات: تلغي عرض 260px الذي كان يسبب التداخل */
    .s-product-card-entry {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-inline: 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    .s-product-card-image {
        width: 100% !important;
        max-width: 100% !important;
        height: 210px !important;
    }

    .s-product-card-content {
        min-width: 0 !important;
        padding: .75rem !important;
    }
}


/* =========================================
   MOROUD | V3 FINISHING TOUCHES
   ========================================= */

/* Desktop: keep the magnifier optically centered inside its circle */
@media (min-width: 1024px) {
    .store-header .top-navbar salla-search,
    .store-header .top-navbar .s-search-input-wrapper {
        position: relative !important;
    }

    .store-header .top-navbar .s-search-icon-wrap,
    .store-header .top-navbar .s-search-icon {
        position: absolute !important;
        inset: 50% auto auto 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 21px !important;
        height: 21px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 767px) {
    /* Smaller MOROUD intro title on mobile */
    salla-quotes-tcf2k3[component-name="quotes"]::before {
        top: 62px !important;
        font-size: 22px !important;
        line-height: 1.35 !important;
    }

    /* Replace Salla's bright footer divider with MOROUD Oudwood */
    .store-footer__inner,
    .store-footer .border-t,
    .store-footer .border-b {
        border-color: rgba(103, 71, 53, 0.55) !important;
    }
}
/* =========================================
   MOROUD | FINAL HEADER + FOOTER FIX
   ========================================= */


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

@media (min-width: 1024px) {

    /* -----------------------------------------
       Menu Button
       Match Cart + Account
       ----------------------------------------- */

    .store-header [data-testid="store-header-mobile-toggle"],
    .store-header [data-testid="store-header-mobile-toggle"] i,
    .store-header [data-testid="store-header-mobile-toggle"] i::before,
    .store-header [data-testid="store-header-mobile-toggle"] svg,
    .store-header [data-testid="store-header-mobile-toggle"] svg path {
        color: #E3DDD2 !important;
        -webkit-text-fill-color: #E3DDD2 !important;
        fill: #E3DDD2 !important;
        stroke: #E3DDD2 !important;
    }


    /* -----------------------------------------
       Search
       Keep Salla Native Trigger Clickable
       ----------------------------------------- */

    .store-header .top-navbar .s-search-input-wrapper {
        cursor: pointer !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    .store-header .top-navbar .s-search-input {
        opacity: 1 !important;

        background: transparent !important;

        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        caret-color: transparent !important;

        border: 0 !important;
        outline: 0 !important;

        cursor: pointer !important;

        user-select: none !important;
        -webkit-user-select: none !important;

        pointer-events: auto !important;
    }

    .store-header .top-navbar .s-search-input::placeholder {
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        opacity: 0 !important;
    }

}


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

@media (max-width: 767px) {

    /* إزالة أي فاصل أبيض افتراضي من سلة */
    .store-footer hr {
        border: 0 !important;
        height: 1px !important;

        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(103, 71, 53, 0.25) 12%,
            rgba(103, 71, 53, 0.65) 50%,
            rgba(103, 71, 53, 0.25) 88%,
            transparent 100%
        ) !important;
    }

    /* أي فاصل مبني كـ border داخل الفوتر */
    .store-footer *,
    .store-footer *::before,
    .store-footer *::after {
        border-top-color: rgba(103, 71, 53, 0.55) !important;
        border-bottom-color: rgba(103, 71, 53, 0.55) !important;
    }

}

        max-width: 46px !important;

        border-radius: 50% !important;
    }

    /* الحقل الحقيقي يبقى قابلًا للنقر */
    .store-header .top-navbar .s-search-input {
        width: 46px !important;
        height: 46px !important;

        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* لا نقيّد نافذة البحث العامة الخاصة بسلة */
    body > salla-search[data-testid="store-search-modal"] {
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        overflow: visible !important;

        position: relative;
        z-index: 999999 !important;
    }
}
/* =========================================
   MOROUD | SEARCH DISABLED
   Mobile + Desktop
   ========================================= */

.store-header salla-search,
.store-header .s-search-input-wrapper,
.store-header .s-search-container {
    display: none !important;
}

/* إلغاء أي مساحة محجوزة للبحث */
.store-header .top-navbar {
    min-height: 0 !important;
}

/* منع ظهور البحث حتى لو أعاد سلة تحميل المكوّن */
.store-header [data-testid*="search"] {
    display: none !important;
}
/* =========================================
   MOROUD | NAVIGATION DRAWER
   ========================================= */

/* محتوى القائمة */
.mm-ocd__content {
    width: min(390px, 88vw) !important;
    max-width: 390px !important;

    background: #130B0D !important;
    color: #E3DDD2 !important;

    box-shadow: -18px 0 50px rgba(0, 0, 0, 0.28) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* الطبقة خلف القائمة */
.mm-ocd__backdrop {
    background: rgba(19, 11, 13, 0.72) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}


/* الحاوية الداخلية */
.moroud-drawer {
    min-height: 100%;
    padding: 38px 32px 34px;

    display: flex;
    flex-direction: column;

    direction: rtl;
}


/* أعلى القائمة */
.moroud-drawer__header {
    position: relative;

    padding: 6px 0 30px;

    text-align: center;
}


/* اسم مُورود */
.moroud-drawer__brand {
    margin: 0;

    color: #E3DDD2;

    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
}


/* MOROUD */
.moroud-drawer__brand-en {
    margin-top: 4px;

    color: #674735;

    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
}


/* زر الإغلاق */
.moroud-drawer__close {
    position: absolute;

    top: 0;
    left: 0;

    width: 38px;
    height: 38px;

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

    padding: 0;

    border: 1px solid rgba(103, 71, 53, 0.7);
    border-radius: 50%;

    background: transparent;

    color: #E3DDD2;

    font-size: 23px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

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

.moroud-drawer__close:hover {
    background: rgba(103, 71, 53, 0.16);
    border-color: #674735;
}


/* الفواصل */
.moroud-drawer__divider {
    width: 100%;
    height: 1px;

    margin: 8px 0 18px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(103, 71, 53, 0.65),
        transparent
    );
}


/* مجموعة الروابط */
.moroud-drawer__nav {
    display: flex;
    flex-direction: column;
}


/* الرابط */
.moroud-drawer__link {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 15px 4px;

    color: #E3DDD2 !important;

    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;

    text-decoration: none !important;

    border-bottom: 1px solid rgba(103, 71, 53, 0.18);

    transition:
        color .25s ease,
        padding .25s ease,
        background .25s ease;
}


/* السهم */
.moroud-drawer__link::after {
    content: "←";

    color: #674735;

    font-size: 15px;

    transition: transform .25s ease;
}


/* Hover */
.moroud-drawer__link:hover {
    color: #E3DDD2 !important;

    padding-right: 10px;

    background: rgba(103, 71, 53, 0.08);
}

.moroud-drawer__link:hover::after {
    transform: translateX(-4px);
}


/* الروابط الثانوية */
.moroud-drawer__link--secondary {
    padding-top: 12px;
    padding-bottom: 12px;

    font-size: 15px;
    font-weight: 400;
}


/* التواصل */
.moroud-drawer__contact-title {
    margin: 8px 0 12px;

    color: #674735;

    font-size: 13px;
    font-weight: 700;

    text-align: right;
}


/* حسابات التواصل */
.moroud-drawer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


.moroud-drawer__social a {
    padding: 8px 13px;

    border: 1px solid rgba(103, 71, 53, 0.65);
    border-radius: 999px;

    color: #E3DDD2 !important;

    font-size: 12px;
    font-weight: 500;

    text-decoration: none !important;

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


.moroud-drawer__social a:hover {
    background: rgba(103, 71, 53, 0.16);
    border-color: #674735;
}


/* نهاية القائمة */
.moroud-drawer__footer {
    margin-top: auto;
    padding-top: 34px;

    color: rgba(227, 221, 210, 0.45);

    font-size: 11px;
    text-align: center;
    letter-spacing: 1px;
}


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

@media (max-width: 767px) {

    .mm-ocd__content {
        width: 86vw !important;
        max-width: 360px !important;
    }

    .moroud-drawer {
        padding: 30px 24px 28px;
    }

    .moroud-drawer__brand {
        font-size: 21px;
    }

    .moroud-drawer__link {
        font-size: 16px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .moroud-drawer__link--secondary {
        font-size: 14px;
        padding-top: 11px;
        padding-bottom: 11px;
    }
}
/* =========================================
   MOROUD | NAVIGATION DRAWER - FINAL UI
   ضع هذا الكود في نهاية ملف CSS
   ========================================= */


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

.moroud-drawer__header {
    position: relative !important;

    min-height: 82px !important;

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

    padding: 6px 0 22px !important;
}


/* Favicon مُورود */
.moroud-drawer__favicon {
    display: block !important;

    width: 52px !important;
    height: 52px !important;

    object-fit: contain !important;

    margin: 0 auto !important;
}


/* زر الإغلاق */
.moroud-drawer__close {
    position: absolute !important;

    top: 4px !important;
    left: 0 !important;

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

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

    padding: 0 !important;

    border: 1px solid rgba(103, 71, 53, 0.55) !important;
    border-radius: 50% !important;

    background: transparent !important;

    color: #E3DDD2 !important;

    font-size: 22px !important;
    font-weight: 300 !important;
    line-height: 1 !important;

    cursor: pointer !important;

    z-index: 5 !important;
}


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

.moroud-drawer__divider {
    width: 100% !important;
    height: 1px !important;

    margin: 0 0 12px !important;

    background: rgba(103, 71, 53, 0.28) !important;

    border: 0 !important;
}


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

.moroud-drawer__nav {
    width: 100% !important;

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


/* جميع الروابط */
.moroud-drawer__link {
    position: relative !important;

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

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

    padding: 0 4px 0 28px !important;

    border-bottom: 1px solid rgba(103, 71, 53, 0.20) !important;

    color: #E3DDD2 !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;

    text-decoration: none !important;

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


/* السهم */
.moroud-drawer__link::after {
    content: "←" !important;

    position: absolute !important;

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

    transform: translateY(-50%) !important;

    color: #674735 !important;

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

    opacity: .9 !important;

    transition: transform .25s ease !important;
}


/* الروابط الثانوية */
.moroud-drawer__link--secondary {
    min-height: 48px !important;

    font-size: 15px !important;
    font-weight: 500 !important;
}


/* Hover */
.moroud-drawer__link:hover {
    color: #A97C50 !important;
}


.moroud-drawer__link:hover::after {
    transform:
        translateY(-50%)
        translateX(-4px) !important;
}


/* =========================================
   FOLLOW MOROUD
   ========================================= */

.moroud-drawer__contact-title {
    margin: 10px 0 16px !important;

    color: #674735 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;

    text-align: right !important;
}


/* مجموعة الأيقونات */
.moroud-drawer__social {
    width: 100% !important;

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

    gap: 12px !important;

    direction: rtl !important;
}


/* دائرة كل منصة */
.moroud-drawer__social > a {
    width: 42px !important;
    height: 42px !important;

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

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

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

    border: 1px solid #674735 !important;
    border-radius: 9999px !important;

    background: transparent !important;

    color: #E3DDD2 !important;

    text-decoration: none !important;

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


/* العنصر الأصلي القادم من فوتر سلة */
.moroud-drawer__social .s-social-icon {
    width: 18px !important;
    height: 18px !important;

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

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

    color: #E3DDD2 !important;
}


/* SVG الأصلي */
.moroud-drawer__social svg {
    width: 18px !important;
    height: 18px !important;

    display: block !important;

    margin: 0 !important;

    color: #E3DDD2 !important;

    fill: currentColor !important;
}


/* أجزاء SVG */
.moroud-drawer__social svg path {
    fill: currentColor !important;
}


/* Hover */
.moroud-drawer__social > a:hover {
    background: rgba(103, 71, 53, 0.18) !important;

    border-color: #A97C50 !important;

    transform: translateY(-2px) !important;
}


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

@media (max-width: 767px) {

    .moroud-drawer__header {
        min-height: 72px !important;

        padding:
            4px 0
            18px !important;
    }


    .moroud-drawer__favicon {
        width: 46px !important;
        height: 46px !important;
    }


    .moroud-drawer__close {
        width: 32px !important;
        height: 32px !important;

        font-size: 20px !important;
    }


    .moroud-drawer__link {
        min-height: 50px !important;

        font-size: 15px !important;
    }


    .moroud-drawer__link--secondary {
        min-height: 46px !important;

        font-size: 14px !important;
    }


    .moroud-drawer__social > a {
        width: 40px !important;
        height: 40px !important;

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


    .moroud-drawer__social .s-social-icon,
    .moroud-drawer__social svg {
        width: 17px !important;
        height: 17px !important;
    }

}
/* =========================================
   MOROUD | DRAWER FAVICON FIX
   ========================================= */

.moroud-drawer__header {
    position: relative !important;

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

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

    padding: 18px 0 12px !important;
    margin: 0 !important;

    overflow: visible !important;
}


/* رمز مُورود */
.moroud-drawer__favicon {
    display: block !important;

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

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

    max-width: 48px !important;
    max-height: 48px !important;

    object-fit: contain !important;

    position: relative !important;
    top: 18px !important;

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

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    overflow: visible !important;
}
/* =========================================
   MOROUD | DRAWER FINAL FIX
   Typography + Mobile Position
   ========================================= */


/* -----------------------------------------
   جميع روابط القائمة بنفس الوزن
   ----------------------------------------- */

.moroud-drawer__link,
.moroud-drawer__link--secondary {
    font-weight: 400 !important;
}


/* =========================================
   MOBILE DRAWER FIX
   ========================================= */

@media (max-width: 767px) {

    /* حاوية سلة الخارجية */
    .mm-ocd--right .mm-ocd__content,
    .mm-ocd__content {

        top: 0 !important;
        bottom: auto !important;

        height: 100dvh !important;
        max-height: 100dvh !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch !important;
    }


    /* قائمة مُورود نفسها */
    .moroud-drawer {

        position: relative !important;

        top: 0 !important;
        bottom: auto !important;

        width: 100% !important;

        min-height: 100dvh !important;
        height: auto !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        overflow: visible !important;

        transform: none !important;
    }


    /* رأس القائمة والرمز */
    .moroud-drawer__header {

        position: relative !important;

        width: 100% !important;

        height: 92px !important;
        min-height: 92px !important;

        margin: 0 !important;
        padding: 18px 0 12px !important;

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

        overflow: visible !important;

        flex-shrink: 0 !important;
    }


    .moroud-drawer__favicon {

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

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

        max-width: 48px !important;
        max-height: 48px !important;

        position: relative !important;
        top: 18px !important;

        margin: 0 auto !important;

        object-fit: contain !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }


    /* منع أي عنصر من الانسحاب لأعلى */
    .moroud-drawer__nav {
        position: relative !important;

        top: 0 !important;

        margin-top: 0 !important;

        transform: none !important;

        flex-shrink: 0 !important;
    }


    /* نفس وزن الخط للجوال أيضًا */
    .moroud-drawer__link,
    .moroud-drawer__link--secondary {

        font-weight: 400 !important;
    }

}
/* =========================================
   MOROUD | MOBILE DRAWER ONLY
   لا يؤثر على الديسكتوب
   ========================================= */

@media (max-width: 767px) {

    /* -----------------------------------------
       حاوية القائمة الجانبية
       ----------------------------------------- */

    .mm-ocd--right .mm-ocd__content,
    .mm-ocd__content {
        top: 0 !important;
        bottom: 0 !important;

        height: 100dvh !important;
        max-height: 100dvh !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch !important;
    }


    /* -----------------------------------------
       إخفاء محتوى قائمة سلة الأصلي
       وإبقاء قائمة مُورود فقط
       ----------------------------------------- */

    .mm-ocd__content > *:not(.moroud-drawer) {
        display: none !important;
    }


    /* -----------------------------------------
       قائمة مُورود
       ----------------------------------------- */

    .mm-ocd__content > .moroud-drawer {
        display: block !important;

        position: relative !important;

        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;

        margin: 0 !important;
        padding: 28px 24px 60px !important;

        box-sizing: border-box !important;

        transform: none !important;

        overflow: visible !important;
    }


    /* -----------------------------------------
       رأس القائمة + رمز مُورود
       ----------------------------------------- */

    .moroud-drawer__header {
        position: relative !important;

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

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

        margin: 0 !important;
        padding: 8px 0 16px !important;

        overflow: visible !important;
    }


    .moroud-drawer__favicon {
        display: block !important;

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

        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;

        position: relative !important;
        top: 40px !important;

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

        object-fit: contain !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }


    /* -----------------------------------------
       الروابط
       ----------------------------------------- */

    .moroud-drawer__nav {
        position: relative !important;

        top: 0 !important;

        width: 100% !important;

        margin: 0 !important;

        transform: none !important;
    }


    .moroud-drawer__link,
    .moroud-drawer__link--secondary {
        font-weight: 400 !important;
    }


    /* -----------------------------------------
       تابع مُورود
       ----------------------------------------- */

    .moroud-drawer__social {
        display: flex !important;
        visibility: visible !important;
    }

}
/* =========================================
   MOROUD | OUD CATEGORY GATEWAY
   ========================================= */

.moroud-oud-gateway {
    width: 100%;
    max-width: 1180px;
    margin: 38px auto 70px;
    padding-inline: 20px;
}


/* =========================================
   GRID
   يتكيف تلقائياً مع 2 / 3 / 4 أقسام
   ========================================= */

.moroud-oud-gateway__grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(260px, 310px));

    justify-content: center;
    gap: 26px;
}


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

.moroud-oud-gateway__card {
    position: relative;

    width: 100%;
    min-height: 270px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;

    padding: 32px 30px;

    background:
        linear-gradient(
            145deg,
            rgba(103, 71, 53, 0.10),
            rgba(19, 11, 13, 0.38)
        );

    border: 1px solid rgba(103, 71, 53, 0.70);
    border-radius: 14px;

    text-decoration: none !important;
    overflow: hidden;

    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s ease,
        background .35s ease;
}


/* وهج داخلي خفيف */

.moroud-oud-gateway__card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(169, 124, 80, 0.11),
            transparent 58%
        );

    opacity: 0;

    transition: opacity .35s ease;

    pointer-events: none;
}


/* =========================================
   CATEGORY NAME
   ========================================= */

.moroud-oud-gateway__name {
    position: relative;
    z-index: 1;

    color: #E3DDD2;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;

    transition: color .35s ease;
}


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

.moroud-oud-gateway__arrow {
    position: relative;
    z-index: 1;

    width: 34px;
    height: 34px;

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

    align-self: flex-end;

    border:
        1px solid rgba(169, 124, 80, 0.45);

    border-radius: 50%;

    color: #A97C50;

    font-size: 17px;
    line-height: 1;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}


/* =========================================
   HOVER
   نحافظ على الحركة والوهج الحالي
   ========================================= */

@media (hover: hover) {

    .moroud-oud-gateway__card:hover {
        transform: translateY(-3px);

        border-color:
            rgba(169, 124, 80, 0.90);

        background:
            linear-gradient(
                145deg,
                rgba(103, 71, 53, 0.18),
                rgba(19, 11, 13, 0.45)
            );

        box-shadow:
            0 12px 35px rgba(0, 0, 0, 0.22),
            0 0 24px rgba(169, 124, 80, 0.09);
    }


    .moroud-oud-gateway__card:hover::before {
        opacity: 1;
    }


    .moroud-oud-gateway__card:hover
    .moroud-oud-gateway__arrow {

        transform: translateX(-5px);

        border-color: #A97C50;

        background:
            rgba(169, 124, 80, 0.08);

        box-shadow:
            0 0 16px rgba(169, 124, 80, 0.12);
    }
}


/* =========================================
   MOBILE
   نبقيها تحت بعض
   ========================================= */

@media (max-width: 767px) {

    .moroud-oud-gateway {
        margin: 22px auto 42px;
        padding-inline: 16px;
    }


    .moroud-oud-gateway__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }


    .moroud-oud-gateway__card {
        min-height: 105px;

        flex-direction: row;
        align-items: center;

        padding: 22px 20px;

        border-radius: 12px;
    }


    .moroud-oud-gateway__name {
        font-size: 17px;
        line-height: 1.5;
    }


    .moroud-oud-gateway__arrow {
        width: 34px;
        height: 34px;

        align-self: auto;

        font-size: 17px;
    }
}

/* Mobile */
@media (max-width: 767px) {

    .moroud-oud-gateway {
        margin: 22px auto 38px;
        padding-inline: 16px;
    }

    .moroud-oud-gateway__title {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .moroud-oud-gateway__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .moroud-oud-gateway__card {
        min-height: 105px;
        padding: 22px 20px;
        border-radius: 12px;
    }

    .moroud-oud-gateway__name {
        font-size: 18px;
    }

    .moroud-oud-gateway__arrow {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }
}
/* =========================================
   MOROUD | OUD PARENT PAGE
   Hide Products - Gateway Only
   ========================================= */

body:has(.moroud-oud-gateway)
  .s-products-list-wrapper {
    display: none !important;
}

body:has(.moroud-oud-gateway)
.s-infinite-scroll-last {
    display: none !important;
}

/* =========================================
   MOROUD | VISITOR ACCOUNT ICON
   ========================================= */

#mainnav .s-user-menu-trigger {
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #674735 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
}

#mainnav .s-user-menu-avatar-wrap {
    position: relative !important;
    width: 26px !important;
    height: 26px !important;
}

#mainnav .s-user-menu-trigger-avatar {
    opacity: 0 !important;
}

#mainnav .s-user-menu-avatar-wrap::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: #E3DDD2 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-2a8 8 0 0 1 16 0v2'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-2a8 8 0 0 1 16 0v2'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

@media (max-width: 767px) {
    #mainnav .s-user-menu-trigger {
        width: 44px !important;
        height: 44px !important;
    }
}

}

/* MOROUD | WhatsApp Icon Fix */

.store-footer .moroud-whatsapp .s-social-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.store-footer .moroud-whatsapp svg {
    display: none !important;
}

.store-footer .moroud-whatsapp .s-social-icon::after {
    content: "" !important;
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    background-color: currentColor !important;

    -webkit-mask: url("https://cdn.jsdelivr.net/npm/simple-icons@v15/icons/whatsapp.svg") center / contain no-repeat !important;
    mask: url("https://cdn.jsdelivr.net/npm/simple-icons@v15/icons/whatsapp.svg") center / contain no-repeat !important;
}

/* MOROUD | Hide Floating WhatsApp */
a.wa-s-n {
    display: none !important;
}