/* ============================================================
   MANAL BEAUTY — CELIA MASTER CSS
   Salla / Celia
   Luxury White • Ivory • Champagne • Gold • Charcoal
   ============================================================ */


/* ============================================================
   01 — BRAND SYSTEM
   ============================================================ */

:root {
    --mb-gold: #C99552;
    --mb-gold-light: #E9C382;
    --mb-gold-dark: #8A5728;

    --mb-champagne: #E8D7BC;
    --mb-champagne-light: #F4EBDD;

    --mb-white: #FFFFFF;
    --mb-ivory: #FCFAF6;
    --mb-cream: #F8F3EB;

    --mb-black: #111111;
    --mb-charcoal: #292724;
    --mb-brown: #3D3329;
    --mb-muted: #77716A;

    --mb-border: #EEE8DF;

    --mb-shadow:
        0 6px 22px rgba(28, 22, 16, .06);

    --mb-shadow-hover:
        0 12px 32px rgba(28, 22, 16, .10);

    --mb-radius: 12px;

    --mb-transition: .25s ease;
}


/* ============================================================
   02 — GENERAL
   ============================================================ */

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--mb-white);
    color: var(--mb-charcoal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--mb-gold);
    color: #fff;
}

a {
    transition:
        color var(--mb-transition),
        background-color var(--mb-transition),
        border-color var(--mb-transition),
        transform var(--mb-transition);
}


/* ============================================================
   03 — HEADINGS
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--mb-charcoal);
}

.s-block__title h2,
.s-block__title h3,
.section-title {
    color: var(--mb-charcoal) !important;
    font-weight: 700 !important;
}


/* زخرفة ذهبية هادئة */
.s-block__title h2::after,
.s-block__title h3::after {
    content: "";
    display: block;

    width: 40px;
    height: 2px;

    margin: 9px auto 0;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--mb-gold-dark),
            var(--mb-gold-light)
        );
}


/* ============================================================
   04 — HEADER
   ============================================================ */

header,
.site-header,
.main-header,
.store-header {
    background: rgba(255,255,255,.98) !important;

    border-bottom:
        1px solid var(--mb-border) !important;
}


/* Header Icons */
header svg,
header i {
    transition:
        color var(--mb-transition),
        transform var(--mb-transition);
}

header a:hover svg,
header button:hover svg {
    color: var(--mb-gold-dark) !important;
}


/* ============================================================
   05 — NAVIGATION
   ============================================================ */

.main-menu a,
.navbar a,
header nav a {
    color: var(--mb-charcoal);
}

.main-menu a:hover,
.navbar a:hover,
header nav a:hover {
    color: var(--mb-gold-dark) !important;
}


/* ============================================================
   06 — PRODUCT CARD
   ============================================================ */

.product-card {
    transition:
        transform var(--mb-transition),
        box-shadow var(--mb-transition),
        border-color var(--mb-transition);
}


/* لا نغيّر بنية سيليا */
.product-card:hover {
    transform: translateY(-2px);
}


/* ============================================================
   07 — PRODUCT NAME
   ============================================================ */

.product-card__title {
    color: var(--mb-charcoal) !important;

    font-weight: 500 !important;

    line-height: 1.7 !important;
}


/* ============================================================
   08 — PRODUCT PRICE
   ============================================================ */

.product-card__price {
    color: #1F1D1A !important;
}


/* السعر الحالي */
.product-card__price .total-price {
    color: #1F1D1A !important;

    font-weight: 700 !important;

    opacity: 1 !important;
}


/* رمز الريال */
.product-card__price .total-price .sicon-sar {
    color: var(--mb-gold-dark) !important;

    opacity: 1 !important;
}


/* السعر العادي */
.product-card__price .starting-or-normal-price {
    color: #1F1D1A !important;
}


/* ============================================================
   09 — PROMOTIONAL LABEL
   الشارة أعلى صورة المنتج
   ============================================================ */

.product-card__promotion {
    background: var(--mb-gold) !important;

    background-color:
        var(--mb-gold) !important;

    color: #FFFFFF !important;

    border: 0 !important;

    border-radius: 3px !important;

    font-weight: 600 !important;

    opacity: 1 !important;

    box-shadow:
        0 3px 9px rgba(138,87,40,.15) !important;
}

.product-card__promotion * {
    color: #FFFFFF !important;
}


/* ============================================================
   10 — OUT OF STOCK LABEL
   النص الموجود على المنتج
   ============================================================ */

.product-card__out-label {
    color: var(--mb-brown) !important;

    font-weight: 600 !important;

    opacity: 1 !important;
}

.product-card__out-label * {
    color: var(--mb-brown) !important;
}


/* ============================================================
   11 — OUT OF STOCK BAR
   نفذت الكمية
   القاعدة الحقيقية المكتشفة من Celia
   ============================================================ */

.product-card__addToCart__btn salla-button {
    background:
        var(--mb-champagne) !important;

    background-color:
        var(--mb-champagne) !important;

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

    border:
        0 !important;

    opacity:
        1 !important;

    --color-primary:
        var(--mb-champagne) !important;
}


/* BEFORE */
.product-card__addToCart__btn salla-button::before {
    color:
        var(--mb-brown) !important;

    opacity:
        1 !important;
}


/* AFTER */
.product-card__addToCart__btn salla-button::after {
    background:
        var(--mb-champagne) !important;

    background-color:
        var(--mb-champagne) !important;

    opacity:
        1 !important;
}


/* ============================================================
   12 — INTERNAL DISABLED BUTTON
   ============================================================ */

.product-card__addToCart__btn
button.s-button-disabled {

    background:
        var(--mb-champagne) !important;

    background-color:
        var(--mb-champagne) !important;

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

    border-color:
        var(--mb-champagne) !important;

    opacity:
        1 !important;

    box-shadow:
        none !important;
}


.product-card__addToCart__btn
button.s-button-disabled * {

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

    opacity:
        1 !important;
}


/* ============================================================
   13 — WISHLIST / VIEW ICONS
   ============================================================ */

.product-card__actions button,
.product-card__actions a {

    color:
        var(--mb-gold-dark) !important;

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

    transition:
        var(--mb-transition);
}


.product-card__actions button:hover,
.product-card__actions a:hover {

    color:
        var(--mb-black) !important;

    border-color:
        var(--mb-gold) !important;

    transform:
        translateY(-1px);
}


/* ============================================================
   14 — STANDARD BUTTONS
   محددات سلة فقط بدون تغيير كل button في الموقع
   ============================================================ */

.s-button-primary {

    background:
        var(--mb-gold) !important;

    color:
        #FFFFFF !important;

    border-color:
        var(--mb-gold) !important;

    border-radius:
        7px !important;

    transition:
        var(--mb-transition);
}


.s-button-primary:hover {

    background:
        var(--mb-gold-dark) !important;

    border-color:
        var(--mb-gold-dark) !important;
}


/* ============================================================
   15 — VIEW ALL
   ============================================================ */

.s-block__title a {

    color:
        var(--mb-gold-dark) !important;

    border-color:
        var(--mb-border) !important;
}

.s-block__title a:hover {

    color:
        var(--mb-black) !important;

    border-color:
        var(--mb-gold) !important;
}


/* ============================================================
   16 — SEARCH
   ============================================================ */

input[type="search"],
.s-search-input {

    background:
        var(--mb-ivory) !important;

    border:
        1px solid var(--mb-border) !important;

    color:
        var(--mb-charcoal) !important;

    transition:
        var(--mb-transition);
}


input[type="search"]:focus,
.s-search-input:focus {

    background:
        #FFFFFF !important;

    border-color:
        var(--mb-gold) !important;

    outline:
        none !important;

    box-shadow:
        0 0 0 3px rgba(201,149,82,.10) !important;
}


/* ============================================================
   17 — INPUTS
   ============================================================ */

textarea:focus,
select:focus {

    border-color:
        var(--mb-gold) !important;

    outline:
        none !important;

    box-shadow:
        0 0 0 3px rgba(201,149,82,.10) !important;
}


/* ============================================================
   18 — BRANDS
   ============================================================ */

.s-block--brands a,
.brand-card,
.brand-item {

    transition:
        transform var(--mb-transition),
        opacity var(--mb-transition);
}


.s-block--brands a:hover,
.brand-card:hover,
.brand-item:hover {

    transform:
        translateY(-2px);
}


/* ============================================================
   19 — FAQ
   ============================================================ */

.s-accordion-item,
.accordion-item,
.faq-item {

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

    background:
        #FFFFFF !important;
}


.s-accordion-item:hover,
.accordion-item:hover,
.faq-item:hover {

    border-color:
        rgba(201,149,82,.40) !important;
}


/* ============================================================
   20 — REVIEWS
   ============================================================ */

.sicon-star,
.rating svg,
.star {

    color:
        var(--mb-gold) !important;
}


/* ============================================================
   21 — BREADCRUMBS
   ============================================================ */

.breadcrumb,
.breadcrumbs {

    color:
        var(--mb-muted);
}


.breadcrumb a:hover,
.breadcrumbs a:hover {

    color:
        var(--mb-gold-dark) !important;
}


/* ============================================================
   22 — PAGINATION
   ============================================================ */

.pagination a,
.pagination button {

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

    color:
        var(--mb-charcoal) !important;
}


.pagination a:hover,
.pagination button:hover,
.pagination .active {

    background:
        var(--mb-charcoal) !important;

    color:
        #FFFFFF !important;

    border-color:
        var(--mb-charcoal) !important;
}


/* ============================================================
   23 — DIVIDERS
   ============================================================ */

hr {

    border: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201,149,82,.30),
            transparent
        );
}


/* ============================================================
   24 — FOOTER
   ============================================================ */

footer,
.site-footer {

    background:
        #111111 !important;

    color:
        #E8E2DA !important;
}


footer h3,
footer h4,
footer .footer-title {

    color:
        var(--mb-gold-light) !important;
}


footer p,
footer span {

    color:
        #D5CEC4;
}


footer a {

    color:
        #E8E2DA !important;

    transition:
        var(--mb-transition);
}


footer a:hover {

    color:
        var(--mb-gold-light) !important;
}


footer hr {

    background:
        rgba(201,149,82,.25);
}


/* ============================================================
   25 — MOBILE
   ============================================================ */

@media (max-width: 767px) {

    /* السعر */
    .product-card__price .total-price {

        color:
            #1F1D1A !important;

        font-weight:
            700 !important;
    }


    /* رمز الريال */
    .product-card__price
    .total-price
    .sicon-sar {

        color:
            var(--mb-gold-dark) !important;
    }


    /* نفذت الكمية */
    .product-card__addToCart__btn
    salla-button {

        background:
            var(--mb-champagne) !important;

        background-color:
            var(--mb-champagne) !important;

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

        --color-primary:
            var(--mb-champagne) !important;

        opacity:
            1 !important;
    }


    .product-card__addToCart__btn
    salla-button::after {

        background:
            var(--mb-champagne) !important;

        background-color:
            var(--mb-champagne) !important;
    }


    .product-card__addToCart__btn
    button.s-button-disabled {

        background:
            var(--mb-champagne) !important;

        background-color:
            var(--mb-champagne) !important;

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

        opacity:
            1 !important;
    }
}


/* ============================================================
   26 — DESKTOP POLISH
   ============================================================ */

@media (min-width: 768px) {

    ::-webkit-scrollbar {
        width: 9px;
    }

    ::-webkit-scrollbar-track {
        background: #F8F5F0;
    }

    ::-webkit-scrollbar-thumb {

        background:
            linear-gradient(
                var(--mb-gold-light),
                var(--mb-gold-dark)
            );

        border:
            2px solid #F8F5F0;

        border-radius:
            20px;
    }
}


/* ============================================================
   END — MANAL BEAUTY
   ============================================================ */
/* =====================================================
   MANAL BEAUTY — PRODUCT TITLE
   تحسين اسم المنتج بدون التأثير على باقي البطاقة
   ===================================================== */

.product-card__title {
    color: #292724 !important;
    font-weight: 500 !important;
    line-height: 1.65 !important;

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

    overflow: hidden !important;

    min-height: 3.3em;
    max-height: 3.3em;

    margin-bottom: 8px !important;
}


/* الكمبيوتر */
@media (min-width: 768px) {

    .product-card__title {
        -webkit-line-clamp: 2;
        min-height: 3.3em;
        max-height: 3.3em;
    }
}


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

    .product-card__title {
        font-size: 13px !important;

        line-height: 1.65 !important;

        -webkit-line-clamp: 3;

        min-height: 4.95em;
        max-height: 4.95em;

        margin-bottom: 7px !important;
    }
}
/* =====================================================
   MANAL BEAUTY — PRODUCT CONTENT ALIGNMENT
   توحيد الاسم والسعر داخل بطاقات المنتجات
   ===================================================== */

/* محتوى البطاقة */
.product-card__content {
    display: flex !important;
    flex-direction: column !important;
}


/* حاوية المحتوى */
.product-card__content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}


/* منطقة السعر */
.product-card__price {
    margin-top: 8px !important;
    min-height: 26px !important;

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


/* السعر نفسه */
.product-card__price .total-price {
    color: #1F1D1A !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}


/* رمز الريال */
.product-card__price .sicon-sar {
    color: #8A5728 !important;
}


/* =========================
   Desktop
   ========================= */

@media (min-width: 768px) {

    .product-card__price {
        margin-top: 7px !important;
    }
}


/* =========================
   Mobile
   ========================= */

@media (max-width: 767px) {

    .product-card__price {
        margin-top: 6px !important;
        min-height: 24px !important;
    }

    .product-card__price .total-price {
        font-size: 14px !important;
    }
}
/* =====================================================
   MANAL BEAUTY — VIEW ALL BUTTON
   زر عرض الكل
   ===================================================== */

/* زر عرض الكل نفسه */
.custom-products__view-all-wrap
a[data-selia="home-custom-products-view-all"] {

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

    min-height: 38px !important;
    padding: 8px 18px !important;

    background: #FFFFFF !important;

    color: #8A5728 !important;

    border: 1px solid #C99552 !important;
    border-radius: 7px !important;

    font-weight: 600 !important;

    box-shadow:
        0 3px 10px rgba(138, 87, 40, 0.06) !important;

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


/* النص */
.custom-products__view-all-wrap
a[data-selia="home-custom-products-view-all"] span {

    color: inherit !important;
}


/* السهم */
.custom-products__view-all-wrap
a[data-selia="home-custom-products-view-all"] i {

    color: #C99552 !important;

    font-size: 17px !important;

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


/* Hover */
.custom-products__view-all-wrap
a[data-selia="home-custom-products-view-all"]:hover {

    background: #C99552 !important;

    color: #FFFFFF !important;

    border-color: #C99552 !important;

    box-shadow:
        0 7px 18px rgba(138, 87, 40, 0.18) !important;

    transform: translateY(-2px);
}


/* السهم عند Hover */
.custom-products__view-all-wrap
a[data-selia="home-custom-products-view-all"]:hover i {

    color: #FFFFFF !important;

    transform: translateX(-3px);
}


/* =====================================================
   الخطوط الموجودة يمين ويسار عرض الكل
   ===================================================== */

.custom-products__view-all-wrap > span {

    background: linear-gradient(
        90deg,
        transparent,
        rgba(201, 149, 82, .38),
        transparent
    ) !important;

    height: 1px !important;
}


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

@media (max-width: 767px) {

    .custom-products__view-all-wrap
    a[data-selia="home-custom-products-view-all"] {

        min-height: 34px !important;

        padding: 6px 14px !important;

        font-size: 12px !important;

        border-radius: 6px !important;
    }


    .custom-products__view-all-wrap
    a[data-selia="home-custom-products-view-all"] i {

        font-size: 15px !important;
    }
}
/* ============================================================
   MANAL BEAUTY — CELIA HEADER
   Luxury Header
   ============================================================ */


/* الحاوية الرئيسية للهيدر */
.header__main-container {
    background: rgba(255, 253, 249, 0.97) !important;
}


/* صف الهيدر */
.header__main-row {
    background: transparent !important;

    border-bottom:
        1px solid rgba(201, 149, 82, 0.18) !important;

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


/* ============================================================
   أيقونات الهيدر
   ============================================================ */

.header__main-start,
.header__main-start a,
.header__main-start button,
.header__search-btn,
.theme-toggle,
.header__user-menu,
.header-btn,
.mburger {

    color: #3D3329 !important;

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


/* الأيقونات الداخلية */
.header__main-start svg,
.header__main-start i,
.header__search-btn svg,
.header__search-btn i,
.theme-toggle svg,
.theme-toggle i,
.header-btn svg,
.header-btn i,
.mburger svg,
.mburger i {

    color: #3D3329 !important;

    stroke: currentColor;

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


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

.header__main-start a:hover,
.header__main-start button:hover,
.header__search-btn:hover,
.theme-toggle:hover,
.header-btn:hover,
.mburger:hover {

    color: #8A5728 !important;

    transform: translateY(-1px);
}


.header__main-start a:hover svg,
.header__main-start button:hover svg,
.header__search-btn:hover svg,
.theme-toggle:hover svg,
.header-btn:hover svg,
.mburger:hover svg {

    color: #C99552 !important;
}


/* ============================================================
   MENU ICON
   الثلاثة خطوط
   ============================================================ */

.mburger {

    background:
        transparent !important;

    border:
        0 !important;
}


.mburger span,
.mburger span::before,
.mburger span::after {

    background-color:
        #3D3329 !important;

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


.mburger:hover span,
.mburger:hover span::before,
.mburger:hover span::after {

    background-color:
        #C99552 !important;
}


/* ============================================================
   USER / ACCOUNT
   ============================================================ */

.header__user-menu .header-btn {

    color:
        #3D3329 !important;

    background:
        transparent !important;
}


.header__user-menu .header-btn:hover {

    color:
        #C99552 !important;
}


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

.header__search-btn {

    background:
        transparent !important;

    border:
        0 !important;
}


.header__search-btn:hover {

    color:
        #C99552 !important;
}


/* ============================================================
   THEME TOGGLE
   ============================================================ */

.theme-toggle {

    background:
        transparent !important;

    border:
        0 !important;
}


.theme-toggle:hover {

    color:
        #C99552 !important;
}


/* ============================================================
   GOLD DETAIL
   خط فاخر أسفل الهيدر
   ============================================================ */

.header__main-container::after {

    content: "";

    display: block;

    height: 1px;

    width: 100%;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(201,149,82,.12) 20%,
        rgba(201,149,82,.38) 50%,
        rgba(201,149,82,.12) 80%,
        transparent 100%
    );

    pointer-events: none;
}


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

@media (max-width: 767px) {

    .header__main-container {

        background:
            rgba(255,253,249,.98) !important;
    }


    .header__main-row {

        border-bottom:
            1px solid rgba(201,149,82,.16) !important;
    }


    .header-btn,
    .mburger,
    .header__search-btn,
    .theme-toggle {

        color:
            #3D3329 !important;
    }
}
/* ============================================================
   MANAL BEAUTY — MOBILE HEADER SPACING
   إزالة الفراغ العلوي في الجوال فقط
   ============================================================ */

@media (max-width: 767px) {

    /* إخفاء الشريط العلوي غير الضروري على الجوال */
    .store-header .top-navbar {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* إزالة أي مساحة متبقية */
    .store-header .header__topbar-inner,
    .store-header .header__topbar-start {
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* الرأس الرئيسي */
    .store-header .main-nav-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* المحافظة على ارتفاع مناسب للهيدر */
    #mainnav {
        height: 62px !important;
        min-height: 62px !important;
    }
}
/* ============================================================
   MANAL BEAUTY — CATEGORIES SECTION TITLE
   عنوان قسم اكتشف تصنيفات العطور
   ============================================================ */

/* منطقة العنوان */
.home-block-title {
    text-align: center !important;
}


/* العنوان الرئيسي */
h2[data-selia="home-circle-links-title"],
.circle-links__title {

    color: #292724 !important;

    font-weight: 700 !important;

    line-height: 1.45 !important;

    letter-spacing: 0 !important;

    margin-bottom: 8px !important;
}


/* الوصف أسفل العنوان */
p[data-selia="home-circle-links-description"],
.circle-links__description {

    color: #77716A !important;

    font-weight: 400 !important;

    line-height: 1.8 !important;

    margin-top: 5px !important;

    max-width: 650px;

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


/* ============================================================
   الزخرفة الذهبية الموجودة أسفل العنوان
   ============================================================ */

.home-block-line {

    opacity: 1 !important;

    color: #C99552 !important;
}


/* الخطوط داخل الزخرفة إن وجدت */
.home-block-line::before,
.home-block-line::after {

    background: linear-gradient(
        90deg,
        transparent,
        #C99552,
        transparent
    ) !important;

    opacity: .55 !important;
}


/* ============================================================
   لمسة ذهبية صغيرة للعنوان
   ============================================================ */

h2[data-selia="home-circle-links-title"]::after {

    content: "";

    display: block;

    width: 38px;
    height: 2px;

    margin: 12px auto 0;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #8A5728,
        #E9C382,
        #8A5728
    );
}


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

@media (max-width: 767px) {

    h2[data-selia="home-circle-links-title"],
    .circle-links__title {

        font-size: 25px !important;

        line-height: 1.45 !important;

        margin-bottom: 6px !important;
    }


    p[data-selia="home-circle-links-description"],
    .circle-links__description {

        font-size: 13px !important;

        line-height: 1.75 !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }


    h2[data-selia="home-circle-links-title"]::after {

        width: 34px;
        margin-top: 10px;
    }
}
h2[data-selia="home-circle-links-title"]::after {
    content: "";
    display: block;
    width: 38px;
    height: 2px;
    margin: 12px auto 0;
    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #8A5728,
        #E9C382,
        #8A5728
    );
}
h2[data-selia="home-circle-links-title"]::after {
    width: 34px;
    margin-top: 10px;
}
/* =====================================================
   MANAL BEAUTY — REMOVE DUPLICATE TITLE LINE
   ===================================================== */

/* إلغاء الخط الذي أضفناه تحت عنوان التصنيفات */
h2[data-selia="home-circle-links-title"]::after,
.circle-links__title::after {
    content: none !important;
    display: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

/* نحتفظ بزخرفة سيليا الأصلية أسفل الوصف */
.home-block-line {
    display: block !important;
    opacity: 1 !important;
}
/* ============================================================
   MANAL BEAUTY — CATEGORY ICONS
   تحسين أيقونات تصنيفات العطور
   ============================================================ */


/* دائرة/حاوية صورة التصنيف */
.s-block--circle-links .circle-links__image-wrap {

    background: #FCF9F3 !important;

    border:
        1px solid rgba(201, 149, 82, .22) !important;

    border-radius:
        50% !important;

    box-shadow:
        0 5px 16px rgba(35, 27, 18, .045) !important;

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


/* صورة التصنيف */
.s-block--circle-links
.circle-links__image-wrap img {

    transition:
        transform .35s ease,
        filter .35s ease !important;
}


/* ============================================================
   اسم التصنيف
   ============================================================ */

.s-block--circle-links
.circle-links__item-title {

    color:
        #292724 !important;

    font-weight:
        600 !important;

    line-height:
        1.55 !important;

    margin-top:
        12px !important;

    transition:
        color .25s ease !important;
}


/* ============================================================
   الوصف الصغير للتصنيف
   ============================================================ */

.s-block--circle-links
.circle-links__item-subtitle {

    color:
        #77716A !important;

    line-height:
        1.6 !important;

    margin-top:
        4px !important;
}


/* ============================================================
   HOVER — COMPUTER
   ============================================================ */

@media (min-width: 768px) {

    .s-block--circle-links
    .swiper-slide:hover
    .circle-links__image-wrap {

        transform:
            translateY(-5px) !important;

        background:
            #FFFFFF !important;

        border-color:
            rgba(201, 149, 82, .70) !important;

        box-shadow:
            0 12px 28px rgba(138, 87, 40, .12) !important;
    }


    .s-block--circle-links
    .swiper-slide:hover
    .circle-links__image-wrap img {

        transform:
            scale(1.055) !important;
    }


    .s-block--circle-links
    .swiper-slide:hover
    .circle-links__item-title {

        color:
            #8A5728 !important;
    }
}


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

@media (max-width: 767px) {

    /* المحافظة على خفة التصميم */
    .s-block--circle-links
    .circle-links__image-wrap {

        box-shadow:
            0 3px 10px rgba(35, 27, 18, .035) !important;
    }


    /* أسماء التصنيفات */
    .s-block--circle-links
    .circle-links__item-title {

        font-size:
            13px !important;

        line-height:
            1.5 !important;

        margin-top:
            9px !important;
    }


    /* الوصف */
    .s-block--circle-links
    .circle-links__item-subtitle {

        font-size:
            11px !important;

        line-height:
            1.5 !important;
    }
}
/* ============================================================
   MANAL BEAUTY — PRODUCT PROMOTION LABEL
   العنوان الترويجي أعلى صورة المنتج
   ============================================================ */

.product-card__promotion {
    background: linear-gradient(
        135deg,
        #A87335 0%,
        #C99552 55%,
        #D9AD6C 100%
    ) !important;

    background-color: #C99552 !important;

    color: #FFFFFF !important;

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

    border-radius: 4px !important;

    font-weight: 600 !important;

    letter-spacing: 0 !important;

    box-shadow:
        0 4px 12px rgba(86,55,25,.14) !important;

    opacity: 1 !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,.08) !important;
}


/* أي نص داخلي */
.product-card__promotion * {
    color: #FFFFFF !important;
}


/* الكمبيوتر */
@media (min-width: 768px) {

    .product-card__promotion {
        font-size: 13px !important;
        padding: 6px 12px !important;
    }
}


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

    .product-card__promotion {
        font-size: 11px !important;

        padding: 5px 9px !important;

        line-height: 1.35 !important;

        border-radius: 3px !important;

        box-shadow:
            0 3px 8px rgba(86,55,25,.12) !important;
    }
}
/* MANAL BEAUTY — PROMOTION BADGE MOBILE */

@media (max-width: 767px) {

    .product-card__promotion {
        font-size: 10.5px !important;
        font-weight: 600 !important;

        padding: 4px 8px !important;

        line-height: 1.3 !important;

        border-radius: 4px !important;

        box-shadow:
            0 3px 8px rgba(86,55,25,.10) !important;
    }
}
/* ============================================================
   MANAL BEAUTY — PRODUCT ACTION ICONS
   القلب + المعاينة السريعة
   ============================================================ */

/* الحاويات */
.product-card__actions .wishlist,
.product-card__actions .quickview-btn {
    position: relative;
}


/* القلب والعين */
.product-card__actions .wishlist button,
.product-card__actions .quickview-btn button {

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

    padding: 0 !important;

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

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

    color: #8A5728 !important;

    border:
        1px solid rgba(201,149,82,.35) !important;

    border-radius:
        50% !important;

    box-shadow:
        0 4px 12px rgba(40,30,20,.06) !important;

    opacity: 1 !important;

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


/* الأيقونات الموجودة داخل الزر */
.product-card__actions .wishlist button i,
.product-card__actions .wishlist button svg,
.product-card__actions .quickview-btn button i,
.product-card__actions .quickview-btn button svg {

    color: #8A5728 !important;
    stroke: currentColor !important;

    opacity: 1 !important;
}


/* ============================================================
   HOVER — الكمبيوتر
   ============================================================ */

@media (min-width: 768px) {

    .product-card__actions .wishlist button:hover,
    .product-card__actions .quickview-btn button:hover {

        background: #C99552 !important;

        color: #FFFFFF !important;

        border-color: #C99552 !important;

        box-shadow:
            0 7px 18px rgba(138,87,40,.18) !important;

        transform:
            translateY(-2px) scale(1.04);
    }


    .product-card__actions .wishlist button:hover i,
    .product-card__actions .wishlist button:hover svg,
    .product-card__actions .quickview-btn button:hover i,
    .product-card__actions .quickview-btn button:hover svg {

        color: #FFFFFF !important;
    }
}


/* ============================================================
   القلب عند إضافة المنتج للمفضلة
   ============================================================ */

.product-card__actions
.btn--wishlist.added button,

.product-card__actions
.btn--wishlist.favorited button,

.product-card__actions
.btn--wishlist:not(.not-added):not(.un-favorited) button {

    background: #C99552 !important;

    color: #FFFFFF !important;

    border-color: #C99552 !important;
}


/* ============================================================
   MOBILE
   أصغر قليلًا حتى لا يغطي صورة المنتج
   ============================================================ */

@media (max-width: 767px) {

    .product-card__actions .wishlist button,
    .product-card__actions .quickview-btn button {

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

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

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

        border:
            1px solid rgba(201,149,82,.28) !important;

        box-shadow:
            0 3px 9px rgba(40,30,20,.045) !important;
    }
}
/* ============================================================
   MANAL BEAUTY — CELIA MOBILE MENU
   القائمة الجانبية للجوال
   ============================================================ */

@media (max-width: 767px) {

    /* خلفية القائمة */
    #mobile-menu,
    .mobile-menu {
        background: #FCFAF6 !important;
        color: #292724 !important;
    }


    /* القائمة الرئيسية */
    #mobile-menu .main-menu,
    .mobile-menu .main-menu {
        background: #FCFAF6 !important;
    }


    /* كل صف */
    #mobile-menu .main-menu > li,
    .mobile-menu .main-menu > li {
        background: transparent !important;

        border-bottom:
            1px solid #EEE8DF !important;

        margin: 0 !important;
    }


    /* روابط القائمة */
    #mobile-menu .main-menu > li > a,
    .mobile-menu .main-menu > li > a {

        color: #292724 !important;

        background: transparent !important;

        min-height: 50px !important;

        padding: 13px 18px !important;

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

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

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


    /* النص */
    #mobile-menu .main-menu > li > a > span,
    .mobile-menu .main-menu > li > a > span {
        color: inherit !important;
    }


    /* عند اللمس / hover */
    #mobile-menu .main-menu > li > a:hover,
    .mobile-menu .main-menu > li > a:hover {

        background: #F7F0E6 !important;

        color: #8A5728 !important;
    }


    /* خط ذهبي صغير عند التفاعل */
    #mobile-menu .main-menu > li > a:hover {
        border-right:
            3px solid #C99552 !important;
    }


    /* ========================================================
       قوائم mm-spn الخاصة بسيليا
       ======================================================== */

    #mobile-menu.mm-spn,
    .mobile-menu.mm-spn {

        background: #FCFAF6 !important;
        color: #292724 !important;
    }


    #mobile-menu.mm-spn ul,
    .mobile-menu.mm-spn ul {

        background: #FCFAF6 !important;
    }


    /* حدود العناصر */
    #mobile-menu.mm-spn li::after,
    .mobile-menu.mm-spn li::after {

        border-color:
            rgba(201,149,82,.16) !important;
    }


    /* الأسهم */
    #mobile-menu.mm-spn li::before,
    .mobile-menu.mm-spn li::before {

        border-color:
            #C99552 !important;
    }


    /* ========================================================
       القائمة الفرعية
       ======================================================== */

    #mobile-menu .main-menu ul a,
    .mobile-menu .main-menu ul a {

        color: #5F5A53 !important;

        background: #FFFFFF !important;

        font-size: 13px !important;

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


    #mobile-menu .main-menu ul a:hover,
    .mobile-menu .main-menu ul a:hover {

        color: #8A5728 !important;

        background: #F8F3EB !important;
    }


    /* ========================================================
       Scrollbar داخل القائمة
       ======================================================== */

    #mobile-menu::-webkit-scrollbar,
    .mobile-menu::-webkit-scrollbar {
        width: 5px;
    }

    #mobile-menu::-webkit-scrollbar-thumb,
    .mobile-menu::-webkit-scrollbar-thumb {

        background: #C99552 !important;

        border-radius: 20px;
    }
}
/* ============================================================
   MANAL BEAUTY — MOBILE MENU POLISH
   ============================================================ */

@media (max-width: 767px) {

    /* خلفية القائمة */
    #mobile-menu,
    .mobile-menu,
    #mobile-menu.mm-spn,
    .mobile-menu.mm-spn {
        background: #FCFAF6 !important;
        color: #292724 !important;
    }

    /* رأس القائمة */
    #mobile-menu.mm-spn--navbar::before,
    .mobile-menu.mm-spn--navbar::before {
        background: #FCFAF6 !important;
        color: #292724 !important;
        font-weight: 700 !important;
        border-bottom: 1px solid #E8D7BC !important;
    }

    /* عناصر القائمة */
    #mobile-menu .main-menu > li,
    .mobile-menu .main-menu > li {
        border-bottom: 1px solid #EEE8DF !important;
    }

    /* الروابط */
    #mobile-menu .main-menu > li > a,
    .mobile-menu .main-menu > li > a {
        color: #292724 !important;
        background: transparent !important;
        font-weight: 500 !important;
        min-height: 52px !important;
        padding: 14px 20px !important;
    }

    /* التفاعل */
    #mobile-menu .main-menu > li > a:hover,
    .mobile-menu .main-menu > li > a:hover {
        background: #F7F1E8 !important;
        color: #8A5728 !important;
    }

    /* أسهم القوائم الفرعية */
    #mobile-menu.mm-spn li::before,
    .mobile-menu.mm-spn li::before {
        border-color: #C99552 !important;
    }

    /* خطوط الفصل */
    #mobile-menu.mm-spn li::after,
    .mobile-menu.mm-spn li::after {
        border-color: rgba(201,149,82,.16) !important;
    }

    /* زر الإغلاق / الرجوع */
    #mobile-menu.mm-spn::after,
    .mobile-menu.mm-spn::after {
        color: #8A5728 !important;
        border-color: #8A5728 !important;
    }
}
/* ============================================================
   MANAL BEAUTY — MOBILE MENU CLOSE BUTTON
   زر إغلاق القائمة
   ============================================================ */

@media (max-width: 767px) {

    #mobile-menu .close-mobile-menu,
    #mobile-menu .btn--close {
        color: #8A5728 !important;
        background: transparent !important;
        border: 0 !important;

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

    /* علامة X نفسها */
    #mobile-menu .close-mobile-menu::before,
    #mobile-menu .btn--close::before {
        color: #8A5728 !important;
    }

    /* عند الضغط/المرور */
    #mobile-menu .close-mobile-menu:hover,
    #mobile-menu .btn--close:hover {
        color: #C99552 !important;
        background: #F7F1E8 !important;
        transform: rotate(90deg);
    }

    #mobile-menu .close-mobile-menu:hover::before,
    #mobile-menu .btn--close:hover::before {
        color: #C99552 !important;
    }
}
/* ============================================================
   MANAL BEAUTY — CELIA LUXURY FOOTER
   ============================================================ */


/* ============================================================
   01 — MAIN FOOTER
   ============================================================ */

.store-footer__inner {
    background:
        linear-gradient(
            145deg,
            #11100F 0%,
            #181613 55%,
            #0D0D0C 100%
        ) !important;

    color: #EDE7DE !important;

    border-top:
        1px solid rgba(201,149,82,.38) !important;
}


/* ============================================================
   02 — FOOTER GRID
   ============================================================ */

.store-footer__grid {
    color: #EDE7DE !important;
}


/* ============================================================
   03 — TITLES
   ============================================================ */

.store-footer__menu-title,
.store-footer__inner h3,
.store-footer__inner h4 {

    color:
        #E9C382 !important;

    font-weight:
        700 !important;

    position:
        relative;

    margin-bottom:
        18px !important;
}


/* خط ذهبي صغير أسفل عنوان العمود */
.store-footer__menu-title::after {

    content: "";

    display: block;

    width: 32px;
    height: 2px;

    margin-top: 8px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #8A5728,
        #E9C382
    );
}


/* ============================================================
   04 — LINKS
   ============================================================ */

.store-footer__inner a,
.store-footer__menu a,
.footer-list a {

    color:
        #DDD6CC !important;

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


.store-footer__inner a:hover,
.store-footer__menu a:hover,
.footer-list a:hover {

    color:
        #E9C382 !important;
}


/* ============================================================
   05 — LIST BULLETS
   ============================================================ */

.store-footer__inner .links_with_bullits li::before,
.store-footer__inner .enhanced_links li::before {

    color:
        #C99552 !important;

    background-color:
        #C99552 !important;
}


/* ============================================================
   06 — BRAND / DESCRIPTION
   ============================================================ */

.store-footer__brand {

    color:
        #EDE7DE !important;
}


.store-footer__brand .footer-description,
.store-footer__inner .footer-description {

    color:
        #CFC7BC !important;

    line-height:
        1.9 !important;

    font-weight:
        400 !important;
}


/* ============================================================
   07 — LOGO
   لا نغير ألوان صورة شعار MANAL
   ============================================================ */

.store-footer__brand img {

    opacity:
        1 !important;

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


@media (min-width: 768px) {

    .store-footer__brand img:hover {

        transform:
            scale(1.025);
    }
}


/* ============================================================
   08 — OFFICIAL BADGES
   السجل والضريبة وغيرها
   ============================================================ */

.footer-badges {

    border-top:
        1px solid rgba(201,149,82,.14);

    padding-top:
        18px !important;
}


.footer-badges img {

    background:
        rgba(255,255,255,.96);

    border-radius:
        7px;

    padding:
        4px;

    border:
        1px solid rgba(201,149,82,.18);

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


@media (min-width: 768px) {

    .footer-badges img:hover {

        transform:
            translateY(-2px);

        box-shadow:
            0 7px 18px rgba(0,0,0,.18);
    }
}


/* ============================================================
   09 — APPS SECTION
   ============================================================ */

.store-footer__apps {

    color:
        #D8D0C5 !important;
}


/* ============================================================
   10 — LINES / SEPARATORS
   ============================================================ */

.store-footer__inner hr {

    border:
        0 !important;

    height:
        1px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201,149,82,.30),
            transparent
        ) !important;
}


/* ============================================================
   11 — SOCIAL ICONS
   ============================================================ */

.store-footer__inner
.social-link,

.store-footer__inner
[class*="social"] a {

    color:
        #E9C382 !important;

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


.store-footer__inner
.social-link:hover,

.store-footer__inner
[class*="social"] a:hover {

    color:
        #FFFFFF !important;

    transform:
        translateY(-2px);
}


/* ============================================================
   12 — MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .store-footer__inner {

        background:
            linear-gradient(
                160deg,
                #12110F,
                #0C0C0B
            ) !important;
    }


    /* عناوين الأعمدة */
    .store-footer__menu-title,
    .store-footer__inner h3,
    .store-footer__inner h4 {

        color:
            #E9C382 !important;

        font-size:
            16px !important;

        margin-bottom:
            14px !important;
    }


    /* الروابط */
    .store-footer__inner a {

        color:
            #DDD6CC !important;

        font-size:
            13px !important;
    }


    /* الوصف */
    .store-footer__inner .footer-description {

        color:
            #CFC7BC !important;

        font-size:
            13px !important;

        line-height:
            1.9 !important;
    }


    /* فواصل الأعمدة */
    .store-footer__menu {

        border-bottom:
            1px solid rgba(201,149,82,.12);

        padding-bottom:
            18px;

        margin-bottom:
            18px;
    }


    .footer-badges {

        border-top:
            1px solid rgba(201,149,82,.12);
    }
}
/* MANAL BEAUTY — FOOTER FINAL POLISH */

.store-footer__brand .footer-description,
.store-footer__inner .footer-description {
    color: #D3CBC0 !important;
    font-weight: 400 !important;
    line-height: 1.9 !important;
}

/* روابط الفوتر */
.store-footer__inner .footer-list a {
    color: #DDD6CC !important;
    line-height: 1.8 !important;
}

/* مسافة آمنة أسفل الفوتر على الجوال */
@media (max-width: 767px) {
    .store-footer__inner {
        padding-bottom: 55px !important;
    }

    .store-footer__brand .footer-description,
    .store-footer__inner .footer-description {
        font-size: 12.5px !important;
        line-height: 1.85 !important;
    }

    .store-footer__inner .footer-list {
        padding-bottom: 8px !important;
    }
}
/* =====================================================
   MANAL BEAUTY — FOOTER CLEANUP
   إزالة الزخرفة الزائدة
   ===================================================== */

.store-footer__menu-title::after {
    content: none !important;
    display: none !important;
}
/* ============================================================
   MANAL BEAUTY — FOOTER BOTTOM
   الحقوق + وسائل الدفع
   ============================================================ */

/* الشريط السفلي */
.footer-bottom {
    background: #F8F3EB !important;
    border-top: 1px solid rgba(201,149,82,.30) !important;
    color: #292724 !important;
}


/* الحاوية الداخلية */
.store-footer__bottom-inner {
    background: transparent !important;
    color: #292724 !important;
}


/* حقوق المتجر */
.footer-rights,
.footer-rights p {
    color: #4A4034 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}


/* أي رابط داخل الحقوق */
.footer-rights a {
    color: #8A5728 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.footer-rights a:hover {
    color: #C99552 !important;
}


/* ============================================================
   وسائل الدفع
   ============================================================ */

.footer-bottom salla-payments {
    opacity: 1 !important;
}


/* المحافظة على وضوح شعارات الدفع */
.footer-bottom salla-payments img {
    opacity: 1 !important;
    filter: none !important;
}


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

@media (max-width: 767px) {

    .footer-bottom {
        background: #F8F3EB !important;
        padding-top: 18px !important;
        padding-bottom: 22px !important;
    }

    .store-footer__bottom-inner {
        color: #292724 !important;
    }

    .footer-rights {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 14px !important;
    }

    .footer-rights p {
        color: #4A4034 !important;
        font-size: 12px !important;
        line-height: 1.7 !important;
        margin-bottom: 0 !important;
    }

    .footer-rights a {
        color: #8A5728 !important;
    }

    /* مساحة مريحة حول وسائل الدفع */
    .footer-bottom salla-payments {
        display: block !important;
        margin-top: 8px !important;
    }
}
/* ============================================================
   MANAL BEAUTY — FLOATING CONTACT BUTTONS
   الهاتف + واتساب
   ============================================================ */


/* الهاتف */
#phone-selia {
    z-index: 50 !important;
}

#phone-selia > a {
    background: #FCF7EF !important;

    border: 1px solid rgba(201,149,82,.35) !important;

    box-shadow:
        0 5px 16px rgba(45,35,25,.10) !important;

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

#phone-selia .sicon-phone {
    color: #A87335 !important;
}


/* واتساب */
#wa-selia {
    z-index: 50 !important;

    box-shadow:
        0 5px 16px rgba(30,100,50,.12) !important;
}


/* الكمبيوتر */
@media (min-width: 768px) {

    #phone-selia:hover > a {
        background: #C99552 !important;

        transform: translateY(-2px);

        box-shadow:
            0 8px 20px rgba(138,87,40,.18) !important;
    }

    #phone-selia:hover .sicon-phone {
        color: #FFFFFF !important;
    }

    #wa-selia:hover {
        transform: translateY(-2px);
    }
}


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

@media (max-width: 767px) {

    /* الهاتف */
    #phone-selia {
        right: 16px !important;
        bottom: 92px !important;

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

    #phone-selia > a {
        width: 46px !important;
        height: 46px !important;

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

        border-radius: 50% !important;
    }

    #phone-selia .sicon-phone {
        font-size: 23px !important;
    }


    /* واتساب */
    #wa-selia {
        right: 16px !important;
        bottom: 34px !important;

        width: 46px !important;
        height: 46px !important;

        border-radius: 50% !important;
    }


    /* منع الأزرار من تغطية نهاية الصفحة */
    .footer-bottom {
        padding-right: 70px !important;
    }
}
/* ============================================================
   MANAL BEAUTY — ALL VIEW-ALL BUTTONS
   توحيد زر عرض الكل في جميع شرائح المنتجات
   ============================================================ */


/* النوع الأول + شرائح Best Offers */
.custom-products__view-all-wrap
a[data-selia="home-custom-products-view-all"],

.s-block--best-offers
a.btn.btn--outline-primary {

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

    min-height: 38px !important;
    padding: 7px 17px !important;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;

    color: #8A5728 !important;

    border: 1px solid #C99552 !important;
    border-radius: 7px !important;

    opacity: 1 !important;

    font-weight: 600 !important;

    box-shadow:
        0 3px 10px rgba(138,87,40,.06) !important;

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


/* النص */
.custom-products__view-all-wrap
a[data-selia="home-custom-products-view-all"] span,

.s-block--best-offers
a.btn.btn--outline-primary span {

    color: inherit !important;
    opacity: 1 !important;
}


/* السهم */
.custom-products__view-all-wrap
a[data-selia="home-custom-products-view-all"] i,

.s-block--best-offers
a.btn.btn--outline-primary i {

    color: #C99552 !important;
    opacity: 1 !important;

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


/* الخطان بجانب عرض الكل */
.s-block--best-offers
.flex.items-center > span.h-px {

    background: linear-gradient(
        90deg,
        transparent,
        rgba(201,149,82,.40),
        transparent
    ) !important;

    opacity: 1 !important;
}


/* ============================================================
   HOVER — COMPUTER
   ============================================================ */

@media (min-width: 768px) {

    .custom-products__view-all-wrap
    a[data-selia="home-custom-products-view-all"]:hover,

    .s-block--best-offers
    a.btn.btn--outline-primary:hover {

        background: #C99552 !important;
        background-color: #C99552 !important;

        color: #FFFFFF !important;

        border-color: #C99552 !important;

        box-shadow:
            0 7px 18px rgba(138,87,40,.18) !important;

        transform: translateY(-2px);
    }


    .custom-products__view-all-wrap
    a[data-selia="home-custom-products-view-all"]:hover i,

    .s-block--best-offers
    a.btn.btn--outline-primary:hover i {

        color: #FFFFFF !important;

        transform: translateX(-3px);
    }
}


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

@media (max-width: 767px) {

    .custom-products__view-all-wrap
    a[data-selia="home-custom-products-view-all"],

    .s-block--best-offers
    a.btn.btn--outline-primary {

        min-height: 34px !important;

        padding: 6px 14px !important;

        font-size: 12px !important;

        color: #8A5728 !important;

        background: #FFFFFF !important;

        border: 1px solid #C99552 !important;

        border-radius: 6px !important;

        opacity: 1 !important;
    }


    .s-block--best-offers
    a.btn.btn--outline-primary i {

        color: #C99552 !important;
        opacity: 1 !important;
    }
}
/* ============================================================
   MANAL BEAUTY — PRODUCT PAGE PROMOTION
   الشارة الترويجية داخل صفحة المنتج
   ============================================================ */

.promotion-title {
    background: linear-gradient(
        135deg,
        #A87335 0%,
        #C99552 55%,
        #D9AD6C 100%
    ) !important;

    background-color: #C99552 !important;

    color: #FFFFFF !important;

    width: auto !important;
    max-width: calc(100% - 32px) !important;

    padding: 7px 14px !important;

    border-radius: 7px !important;

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

    white-space: normal !important;

    box-shadow:
        0 4px 12px rgba(86,55,25,.13) !important;

    z-index: 5 !important;
}


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

    .promotion-title {
        width: auto !important;

        max-width: calc(100% - 24px) !important;

        padding: 6px 11px !important;

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

        border-radius: 5px !important;

        white-space: nowrap !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}
/* ============================================================
   MANAL BEAUTY — PRODUCT PAGE OUT OF STOCK
   نفذت الكمية داخل صفحة المنتج فقط
   ============================================================ */

/* المكون الخاص بصفحة المنتج */
.sticky-product-bar__btn[product-status="out"] salla-button {
    --color-primary: #E8D7BC !important;

    background: #E8D7BC !important;
    background-color: #E8D7BC !important;

    color: #3D3329 !important;

    opacity: 1 !important;

    border-radius: 7px !important;
}


/* الزر الداخلي */
.sticky-product-bar__btn[product-status="out"]
salla-button button,

.sticky-product-bar__btn[product-status="out"]
button.s-button-disabled {

    background: #E8D7BC !important;
    background-color: #E8D7BC !important;

    color: #3D3329 !important;

    border: 1px solid #D9C5A6 !important;

    opacity: 1 !important;

    box-shadow: none !important;

    font-weight: 600 !important;
}


/* النص والأيقونات داخل الزر */
.sticky-product-bar__btn[product-status="out"]
salla-button button * {

    color: #3D3329 !important;
    opacity: 1 !important;
}


/* معالجة الطبقات الإضافية في زر سلة */
.sticky-product-bar__btn[product-status="out"]
salla-button::before,

.sticky-product-bar__btn[product-status="out"]
salla-button::after {

    background: #E8D7BC !important;
    background-color: #E8D7BC !important;

    color: #3D3329 !important;

    opacity: 1 !important;
}


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

@media (max-width: 767px) {

    .sticky-product-bar__btn[product-status="out"]
    salla-button,

    .sticky-product-bar__btn[product-status="out"]
    salla-button button {

        min-height: 46px !important;

        background: #E8D7BC !important;
        background-color: #E8D7BC !important;

        color: #3D3329 !important;

        border-color: #D9C5A6 !important;

        opacity: 1 !important;

        font-size: 14px !important;

        border-radius: 7px !important;
    }
}
/* ============================================================
   MANAL BEAUTY — FAST CHECKOUT
   إصلاح زر اشترِ بواسطة
   ============================================================ */

salla-mini-checkout-widget {
    --color-primary: #8A5728 !important;
    --salla-fast-checkout-button-height: 44px;
    --salla-fast-checkout-button-border-radius: 7px;
}


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

    salla-mini-checkout-widget {
        --color-primary: #8A5728 !important;
        --salla-fast-checkout-button-height: 44px;
        --salla-fast-checkout-button-border-radius: 7px;
    }
}
/* =========================================
   MANAL BEAUTY — PRODUCT SKU
   رقم الموديل
   ========================================= */

.product-sku-wrapper {
    color: #292724 !important;
}

.product-sku-wrapper .product-sku {
    color: #8A5728 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* عنوان رقم الموديل */
.product-sku-wrapper b {
    color: #292724 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}
/* ============================================================
   MANAL BEAUTY — PRODUCT CATEGORY
   تصنيف المنتج داخل صفحة المنتج
   ============================================================ */

/* عنوان تصنيف المنتج */
#product-form section.bg-storeBG > .center-between > b {
    color: #292724 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}

/* اسم التصنيف / الرابط */
#product-form section.bg-storeBG > .center-between > a.text-primary {
    color: #8A5728 !important;
    opacity: 1 !important;

    font-weight: 600 !important;

    text-decoration-color: rgba(138, 87, 40, .35) !important;
    text-underline-offset: 3px !important;

    transition:
        color .25s ease,
        text-decoration-color .25s ease !important;
}

/* عند المرور بالماوس */
#product-form section.bg-storeBG > .center-between > a.text-primary:hover {
    color: #C99552 !important;
    text-decoration-color: #C99552 !important;
}
/* ==========================================
   MANAL BEAUTY — DESCRIPTION FINAL FIX
   عرض الوصف كاملًا وإخفاء اقرأ المزيد
   ========================================== */

@media (max-width: 767px) {

    /* عرض الوصف كاملًا بدون قص */
    .product-single-top-description .article.article--main {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* إخفاء اقرأ المزيد */
    .product-single-top-description #btn-show-more {
        display: none !important;
    }

    /* تقليل الفراغ بعد نهاية الوصف */
    .product-single-top-description {
        margin-bottom: 16px !important;
    }
}
/* لون عبارة شاملة الضريبة داخل سلة المشتريات */
#cart-drawer .cart-drawer__total .text-white,
#cart-drawer .cart-drawer__total [class*="text-white"] {
    color: #292724 !important;
}
/* توحيد منطقة تذييل متجر منال بيوتي */
.store-footer__contacts-row {
    background: #11100f !important;
    color: #ead8b5 !important;
    padding: 20px 15px !important;
    border-top: 1px solid rgba(218, 183, 124, 0.25) !important;
}

/* زر الجوال */
.store-footer__contacts-row .enhanced-contact-item,
.store-footer__contacts-row .enhanced-contact-item *,
.store-footer__contacts-row .text-unicode {
    color: #ead8b5 !important;
    border-color: #b88a4d !important;
    opacity: 1 !important;
}

/* أيقونات التواصل */
.store-footer__contacts-row .s-social-link,
.store-footer__contacts-row .s-social-link a,
.store-footer__contacts-row .s-social-icon,
.store-footer__contacts-row .s-social-icon::before {
    color: #d2a866 !important;
    opacity: 1 !important;
    filter: none !important;
}

/* دوائر أيقونات التواصل */
.store-footer__contacts-row .s-social-link a {
    border-color: #b88a4d !important;
    background: rgba(255,255,255,0.05) !important;
}

/* منطقة الحقوق ووسائل الدفع */
.footer-bottom {
    background: #f8f3eb !important;
    color: #292724 !important;
    border-top: 1px solid #e2d4bf !important;
}

.store-footer__bottom-inner {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* منع البهتان */
.store-footer__contacts-row *,
.footer-bottom * {
    visibility: visible !important;
    filter: none !important;
}
/* إصلاح لون عبارة مجموع المنتجات */
#cart-drawer .drawer-footer
.cart-drawer__subtotal-row
span[data-selia="cart-drawer-subtotal-label"] {
    color: #292724 !important;
    -webkit-text-fill-color: #292724 !important;
    opacity: 1 !important;
}
/* إصلاح رأس متجر منال بيوتي على الكمبيوتر */
@media (min-width: 1024px) {

    .main-nav-container {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .main-menu-row {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .main-menu-row custom-main-menu.as-row,
    .main-menu-row nav.mobile-menu {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .main-menu-row .main-menu {
        height: auto !important;
        min-height: 0 !important;
        padding: 8px 24px 10px !important;
        align-items: center !important;
        align-content: center !important;
        row-gap: 0 !important;
    }

    .main-menu-row .main-menu > li.root-level > a {
        padding: 8px 10px !important;
        white-space: nowrap !important;
    }
}
/* إصلاح اسم الماركة داخل صفحة المنتج فقط */
.product-single__brand-box a.text-primary.underline {
    color: #885828 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}
/* إظهار عبارة السعر شامل ضريبة القيمة المضافة */
#cart-drawer .cart-drawer__tax-note {
    color: #885828 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}
section.s-block--faq
p[data-selia="home-faq-answer"].faq__answer.text-store-text-secondary {
    color: #292724 !important;
    -webkit-text-fill-color: #292724 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* بيانات التواصل البيضاء في تذييل المتجر */
#manal-contact-footer,
#manal-contact-footer *,
#manal-contact-footer a,
#manal-contact-footer span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* إظهار بيانات التواصل أعلى وأسفل المتجر في الجوال */
@media (max-width: 1023px) {
    header.store-header .top-navbar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    header.store-header .header__topbar-inner {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 70px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 7px 8px !important;
        overflow: visible !important;
    }

    header.store-header
    .header__topbar-inner
    > :not(#manal-contact-header) {
        display: none !important;
    }

    #manal-contact-header,
    #manal-contact-footer {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 5px 4px !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    #manal-contact-header a,
    #manal-contact-footer a {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap !important;
    }
}        display: inline-flex !important;
        color: #6f4827 !important;
        -webkit-text-fill-color: #6f4827 !important;
        opacity: 1 !important;
    }

    #manal-contact-footer {
        display: flex !important;
        width: 100% !important;
    }
}
/* جعل بيانات التواصل أسفل الصفحة باللون الأبيض */
#manal-contact-bottom,
#manal-contact-bottom span,
#manal-contact-bottom a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

@media (max-width: 1023px) {
    header.store-header .header__topbar-inner {
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
    }

    header.store-header .top-navbar:not(:has(#manal-contact-header)) {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    header.store-header .top-navbar:has(#manal-contact-header) {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }

    #manal-contact-header {
        padding: 5px 8px !important;
    }
}
/* بيانات التواصل في الجوال بدون مساحة فارغة */
@media (max-width: 1023px) {

    header.store-header .top-navbar:has(#manal-contact-header) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    header.store-header .header__topbar-inner:has(#manal-contact-header) {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 6px 8px !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    header.store-header
    .header__topbar-inner
    > :not(#manal-contact-header) {
        display: none !important;
    }

    #manal-contact-header,
    #manal-contact-footer {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 4px !important;
        font-size: 13px !important;
        overflow: visible !important;
    }
}

/* لون بيانات التواصل أسفل الصفحة أبيض */
#manal-contact-footer,
#manal-contact-footer *,
#manal-contact-footer a,
#manal-contact-footer span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* ترتيب بيانات التواصل باحترافية في الجوال */
@media (max-width: 1023px) {

    #manal-contact-header,
    #manal-contact-footer {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px !important;
        width: 100% !important;
        padding: 7px 4px !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    /* إخفاء عبارة تواصل معنا لتقليل المساحة */
    #manal-contact-header > span:first-child,
    #manal-contact-footer > span:first-child {
        display: none !important;
    }

    #manal-contact-header a,
    #manal-contact-footer a {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    #manal-contact-header a span,
    #manal-contact-footer a span {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* إبقاء بيانات أسفل الصفحة باللون الأبيض */
#manal-contact-footer,
#manal-contact-footer a,
#manal-contact-footer span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* إصلاح رأس المتجر وإلغاء المساحة البيج في الجوال */
@media (max-width: 1023px) {
    header.store-header .top-navbar {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}
/* إظهار بيانات التواصل في تذييل الجوال فقط */
@media (max-width: 1023px) {

    footer.store-footer .store-footer__contacts-row {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #manal-contact-footer {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px 14px !important;
        margin: 0 0 10px !important;
        padding: 8px 4px !important;
        font-size: 12px !important;
    }

    #manal-contact-footer > span:first-child {
        display: none !important;
    }

    #manal-contact-footer a {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        white-space: nowrap !important;
        font-size: 12px !important;
    }

    #manal-contact-footer a span {
        display: inline-block !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}