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

/**
 * ============================================================================
 * MEZEEJ | مزيج — Botanical Luxury Theme for Salla
 * ----------------------------------------------------------------------------
 * مبني على الهوية البصرية للعلامة:
 *   الأخضر الزمردي #0F4A33 · الذهب الشمبانيا #D9BC76 · البرتقالي #F58220
 *   الزيتوني #4B671B · الأخضر الورقي #8AA549 · الكريمي #FBF8F1
 *
 * الفكرة التصميمية: "الصيدلية النباتية"
 *   - حافة الورقة: زوايا البطاقات تحاكي صورة الورقة في الشعار (قطر غير متماثل)
 *   - الزخرفة الرباعية (الزهرة) تُستخدم كفاصل وكنسيج للفوتر — لا تدرّجات زخرفية
 *   - الذهب خط شعرة (hairline) وليس مساحات
 *   - البرتقالي لحالة واحدة فقط: التخفيض والإلحاح
 *
 * ملاحظة على هذه النسخة:
 *   نسخة واحدة كاملة (بلا تكرار)، وقد حُذف منها التوكن المكسور
 *   --mz-ink-mute: #8397 8D; وضُمّت كتلة SURFACE التي تُلغي خلفية ثيم
 *   جلامور السوداء على غلاف التطبيق .app-inner (سبب الشريط الأسود بين
 *   الهيدر والفوتر).
 * ============================================================================
 */

/* ============================================================================
 *  1. TOKENS
 *  ============================================================================ */
:root {
    /* Core brand */
    --mz-emerald: #0F4A33;
    --mz-emerald-deep: #0A3524;
    --mz-emerald-soft: #16624A;
    --mz-olive: #4B671B;
    --mz-leaf: #8AA549;

    --mz-gold: #D9BC76;
    --mz-gold-light: #F2E2B4;
    --mz-gold-deep: #B2914A;
    --mz-gold-hairline: rgba(217, 188, 118, 0.42);

    --mz-ember: #F58220;

    /* Surfaces */
    --mz-paper: #FBF8F1;
    --mz-sand: #F1E9DA;
    --mz-card: #FFFFFF;

    /* Ink */
    --mz-ink: #132A21;
    --mz-ink-soft: #4A6459;
    --mz-ink-muted: #83978D;

    /* Leaf geometry — مأخوذ من شكل الورقة في الشعار */
    --mz-leaf-radius: 30px 6px 30px 6px;
    --mz-leaf-radius-sm: 18px 4px 18px 4px;
    --mz-radius-soft: 14px;
    --mz-radius-pill: 999px;

    /* Elevation — أخضر مائل لا رمادي */
    --mz-lift-1: 0 2px 10px rgba(15, 74, 51, 0.05);
    --mz-lift-2: 0 14px 34px -18px rgba(15, 74, 51, 0.28);
    --mz-lift-3: 0 26px 56px -24px rgba(10, 53, 36, 0.38);

    /* Type */
    /* Montserrat يغطي اللاتيني في العناوين، و GE SS Two / Cairo يلتقطان العربي
     *    تلقائيًا لأن Montserrat لا يحتوي محارف عربية — هذا يعطي الثنائي المطلوب
     *    دون أي كود إضافي */
    --mz-display: 'Montserrat', 'GE SS Two', 'Cairo', system-ui, sans-serif;
    --mz-body: 'GE SS Two', 'Cairo', 'Montserrat', system-ui, sans-serif;

    /* شعار MEZEEJ اللاتيني — Trajan Pro خط مرخّص من Adobe وغير متاح على
     *    Google Fonts. إن رفعتِه للمتجر سيُستخدم تلقائيًا، وإلا يسقط على Cinzel
     *    وهو البديل الحر الأقرب له شكلًا (نفس الأصل الروماني) */
    --mz-logo: 'Trajan Pro', 'Trajan Pro 3', 'Cinzel', 'Times New Roman', serif;

    /* Salla token overrides */
    --theme-primary-color: #0F4A33 !important;
    --color-primary: #0F4A33 !important;
    --color-primary-dark: #0A3524 !important;
    --color-primary-light: #4B671B !important;
    --color-secondary: #D9BC76 !important;
}

/* ============================================================================
 *  2. FOUNDATION
 *  ============================================================================ */
body {
    background-color: var(--mz-paper) !important;
    color: var(--mz-ink) !important;
    font-family: var(--mz-body) !important;
    font-weight: 400;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

/* --- SURFACE — إصلاح الشريط الأسود بين الهيدر والفوتر ------------------------
 *  السبب المقيس: ثيم جلامور يضع خلفية سوداء على غلاف التطبيق كـ inline style:
 *
 *    <div class="flex flex-col min-h-full app-inner overflow-hidden relative"
 *         style="background: #000000; color:#004956">
 *
 *  وبما أن هيدر الثيم position: absolute (خارج التدفق) و main يقصر أحيانًا،
 *  يظهر من هذا الغلاف شريط أسود بعرض الصفحة بين الهيدر والفوتر.
 *
 *  الـ !important هنا إلزامي: المصدر inline style، ولا يتغلّب عليه إلا !important.
 *  وضبط اللون ضروري أيضًا لأن الثيم يفرض color:#004956 (تركوازي) على الغلاف.
 *  -------------------------------------------------------------------------- */
.app-inner,
.app-outer,
#app {
background-color: var(--mz-paper) !important;
color: var(--mz-ink) !important;
}

/* شبكة أمان: أي مساحة فارغة داخل main تعرض لون الورق لا أي خلفية داكنة تحتها */
main {
    background-color: var(--mz-paper);
}

h1, h2, h3, h4,
.section-title,
.s-block-title,
.s-product-card-title {
    font-family: var(--mz-display) !important;
    letter-spacing: 0 !important;
}

::selection {
    background: var(--mz-gold-light);
    color: var(--mz-emerald-deep);
}

:where(a, button, [role="button"], input, select, textarea):focus-visible {
    outline: 2px solid var(--mz-gold-deep) !important;
    outline-offset: 3px !important;
    border-radius: 6px;
}

/* شريط تمرير بلون العلامة */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--mz-sand); }
::-webkit-scrollbar-thumb {
    background: var(--mz-emerald);
    border-radius: 999px;
    border: 3px solid var(--mz-sand);
}

/* ============================================================================
 *  3. HEADER — هدوء تام، الذهب خط شعرة فقط
 *  ============================================================================ */
header,
.s-header,
.site-header,
.header-wrapper {
    background: rgba(251, 248, 241, 0.92) !important;
    backdrop-filter: saturate(140%) blur(14px) !important;
    -webkit-backdrop-filter: saturate(140%) blur(14px) !important;
    border-bottom: 1px solid var(--mz-gold-hairline) !important;
    box-shadow: none !important;
}

.announcement-bar,
.top-bar,
.s-top-bar {
    background: var(--mz-emerald) !important;
    color: var(--mz-gold-light) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px;
    border-bottom: none !important;
}

.announcement-bar strong,
.s-top-bar strong { color: var(--mz-gold) !important; }

/* روابط القائمة: تحتها ورقة ذهبية تنمو عند المرور */
.main-menu a,
.mainmenu a,
.s-header nav a,
header nav a {
    font-family: var(--mz-display) !important;
    font-weight: 500 !important;
    color: var(--mz-emerald-deep) !important;
    position: relative;
    padding-bottom: 4px !important;
    transition: color 0.25s ease;
}

.main-menu a::after,
.mainmenu a::after,
header nav a::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 100%;
    height: 1.5px;
    background: var(--mz-gold);
    transform: scaleX(0);
    transform-origin: inline-end;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.main-menu a:hover::after,
.mainmenu a:hover::after,
header nav a:hover::after { transform: scaleX(1); transform-origin: inline-start; }

.header-logo img,
.site-logo img,
.store-logo img,
.s-header img[alt*="مزيج"] {
    filter: drop-shadow(0 1px 6px rgba(15, 74, 51, 0.10));
}

/* حقل البحث */
header input[type="text"],
header input[type="search"],
.s-search-input {
    background: #FFFFFF !important;
    border: 1px solid var(--mz-gold-hairline) !important;
    border-radius: var(--mz-radius-pill) !important;
    font-family: var(--mz-body) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

header input[type="text"]:focus,
header input[type="search"]:focus,
.s-search-input:focus {
    border-color: var(--mz-gold) !important;
    box-shadow: 0 0 0 4px rgba(217, 188, 118, 0.18) !important;
}

/* ============================================================================
 *  4. SECTION HEADINGS — زهرة العلامة الرباعية كفاصل
 *  ============================================================================ */
.section-title,
.s-block-title,
h2.section-title,
.s-block-header h2 {
    font-size: clamp(1.45rem, 2.6vw, 2rem) !important;
    font-weight: 600 !important;
    color: var(--mz-emerald-deep) !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 1.6rem !important;
}

.section-title::before,
.s-block-title::before,
.s-block-header h2::before {
    content: "";
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23D9BC76' stroke-width='6'%3E%3Ccircle cx='60' cy='28' r='19'/%3E%3Ccircle cx='60' cy='92' r='19'/%3E%3Ccircle cx='28' cy='60' r='19'/%3E%3Ccircle cx='92' cy='60' r='19'/%3E%3Ccircle cx='60' cy='60' r='8' fill='%230F4A33' stroke='none'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* الخط الذهبي الممتد بعد العنوان */
.section-title::after,
.s-block-title::after,
.s-block-header h2::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--mz-gold-hairline) 35%, var(--mz-gold-hairline));
}

/* ============================================================================
 *  5. PRODUCT CARD — القطعة البطل في الصفحة
 *  ============================================================================ */
.s-product-card-entry,
.s-product-card-vertical,
.product-card,
custom-salla-product-card {
    background: var(--mz-card) !important;
    border: 1px solid rgba(217, 188, 118, 0.30) !important;
    border-radius: var(--mz-leaf-radius) !important;
    box-shadow: var(--mz-lift-1) !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease !important;
}

.s-product-card-entry:hover,
.s-product-card-vertical:hover,
.product-card:hover {
    transform: translateY(-6px) !important;
    border-color: var(--mz-gold) !important;
    box-shadow: var(--mz-lift-3) !important;
}

/* الصورة: خلفية رملية بدل الأبيض الميت + قصّ ثابت */
.s-product-card-image,
.product-card-image,
.s-product-card-image-link {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(160deg, var(--mz-sand) 0%, #FFFFFF 70%) !important;
    border-radius: 0 !important;
}

.s-product-card-image img,
.product-card-image img {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover !important;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.s-product-card-entry:hover .s-product-card-image img,
.product-card:hover .product-card-image img { transform: scale(1.055) !important; }

/* حجاب أخضر خفيف أسفل الصورة ليثبّت النص فوقه */
.s-product-card-image::after,
.product-card-image::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    background: linear-gradient(to top, rgba(15, 74, 51, 0.12), transparent);
    pointer-events: none;
}

/* ---- الشارة الترويجية: شريط زمردي بحافة ذهبية بدل الأحمر ---- */
.s-product-card-promotion-title,
.product-card-promotion,
.s-product-card-promotion {
    position: absolute !important;
    top: 12px !important;
    inset-inline-start: 0 !important;
    z-index: 3 !important;
    background: var(--mz-emerald) !important;
    color: var(--mz-gold-light) !important;
    font-family: var(--mz-body) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    padding: 6px 14px 6px 12px !important;
    max-width: 78% !important;
    border: none !important;
    border-inline-end: 2px solid var(--mz-gold) !important;
    border-radius: 0 var(--mz-radius-pill) var(--mz-radius-pill) 0 !important;
    box-shadow: 0 6px 16px -8px rgba(10, 53, 36, 0.6) !important;
    white-space: normal !important;
    text-align: start !important;
}

/* في الاتجاه RTL تنقلب الاستدارة تلقائيًا */
[dir="rtl"] .s-product-card-promotion-title,
[dir="rtl"] .s-product-card-promotion {
    border-radius: var(--mz-radius-pill) 0 0 var(--mz-radius-pill) !important;
}

/* ---- زر المفضلة: عائم على الصورة، دائرة زجاجية ---- */
salla-add-product-to-wishlist,
.s-product-card-wishlist-btn,
.s-product-card-wishlist,
.product-card-wishlist,
.btn-wishlist {
    position: absolute !important;
    top: 12px !important;
    inset-inline-end: 12px !important;
    inset-inline-start: auto !important;
    bottom: auto !important;
    z-index: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(6px);
    border: 1px solid var(--mz-gold-hairline) !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 16px -8px rgba(15, 74, 51, 0.5) !important;
    color: var(--mz-emerald) !important;
    transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease !important;
}

salla-add-product-to-wishlist svg,
.s-product-card-wishlist-btn svg,
.s-product-card-wishlist-btn i {
    font-size: 1rem !important;
    color: inherit !important;
}

salla-add-product-to-wishlist:hover,
.s-product-card-wishlist-btn:hover {
    background: var(--mz-emerald) !important;
    color: var(--mz-gold-light) !important;
    transform: scale(1.08) !important;
}

/* حالة "مضاف للمفضلة" */
salla-add-product-to-wishlist[loading] ,
.s-product-card-wishlist-btn.s-button-loading { opacity: 0.7 !important; }

/* ---- جسم البطاقة ---- */
.s-product-card-content,
.s-product-card-content-main,
.product-card-content {
    padding: 16px 16px 18px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.s-product-card-title,
.product-card-title {
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    color: var(--mz-emerald-deep) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    transition: color 0.25s ease;
}

.s-product-card-entry:hover .s-product-card-title { color: var(--mz-olive) !important; }

.s-product-card-subtitle,
.product-card-subtitle {
    font-size: 0.8rem !important;
    font-weight: 300 !important;
    color: var(--mz-ink-muted) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* فاصل شعرة ذهبية قبل السعر */
.s-product-card-price,
.product-card-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    margin: 0 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(217, 188, 118, 0.28) !important;
    background: none !important;
    border-radius: 0 !important;
    width: 100% !important;
}

.s-product-card-sale-price,
.s-product-card-price > span:first-child,
.product-card-price .price-now {
    font-family: var(--mz-display) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--mz-emerald) !important;
}

.s-product-card-full-price,
.product-card-price .price-old {
    font-size: 0.85rem !important;
    font-weight: 300 !important;
    color: var(--mz-ink-muted) !important;
    text-decoration: line-through !important;
    text-decoration-color: var(--mz-ember) !important;
    text-decoration-thickness: 1.5px !important;
}

/* رمز الريال بلون ذهبي داكن */
.s-product-card-price .s-price-currency,
.s-product-card-price svg { color: var(--mz-gold-deep) !important; fill: var(--mz-gold-deep) !important; }

/* ---- زر الإضافة داخل البطاقة: مُفرَّغ ثم يمتلئ ---- */
.s-product-card-content salla-add-product-button button,
.s-product-card-content .s-button-element,
.s-product-card-entry .s-button-element {
    width: 100% !important;
    margin-top: 12px !important;
    background: transparent !important;
    color: var(--mz-emerald) !important;
    font-family: var(--mz-display) !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    padding: 11px 16px !important;
    border: 1.5px solid var(--mz-emerald) !important;
    border-radius: var(--mz-radius-pill) !important;
    box-shadow: none !important;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

.s-product-card-content salla-add-product-button button:hover,
.s-product-card-entry .s-button-element:hover {
    background: var(--mz-emerald) !important;
    border-color: var(--mz-emerald) !important;
    color: var(--mz-gold-light) !important;
    transform: none !important;
}

/* ---- نفدت الكمية ---- */
.s-product-card-out-of-stock {
    background: rgba(10, 53, 36, 0.86) !important;
    backdrop-filter: blur(3px);
    color: var(--mz-gold-light) !important;
    font-family: var(--mz-display) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.4px;
    border-top: 1px solid var(--mz-gold-hairline) !important;
    border-bottom: 1px solid var(--mz-gold-hairline) !important;
    padding: 10px 0 !important;
}

/* ============================================================================
 *  6. PRODUCT PAGE — المعرض وصندوق الشراء
 *  ============================================================================ */
.product-images,
.product-gallery,
.main-slider {
    border-radius: var(--mz-leaf-radius) !important;
    overflow: hidden !important;
    background: linear-gradient(160deg, var(--mz-sand), #FFFFFF 70%) !important;
    border: 1px solid var(--mz-gold-hairline) !important;
    box-shadow: var(--mz-lift-2) !important;
}

.product-thumbnails .thumbnail-item,
.thumbs-slider .swiper-slide {
    border-radius: var(--mz-leaf-radius-sm) !important;
    border: 1.5px solid transparent !important;
    overflow: hidden;
    background: #FFFFFF;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.product-thumbnails .thumbnail-item.active,
.thumbs-slider .swiper-slide-thumb-active {
    border-color: var(--mz-gold) !important;
    transform: translateY(-2px);
}

h1.product-title,
.product-details h1,
.product-entry h1 {
    font-family: var(--mz-display) !important;
    font-size: clamp(1.6rem, 3.4vw, 2.25rem) !important;
    font-weight: 600 !important;
    color: var(--mz-emerald-deep) !important;
    line-height: 1.5 !important;
    margin-bottom: 0.6rem !important;
}

.product-category,
.product-brand-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(138, 165, 73, 0.12);
    color: var(--mz-olive);
    padding: 4px 14px;
    border-radius: var(--mz-radius-pill);
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid rgba(75, 103, 27, 0.2);
    margin-bottom: 0.8rem;
}

/* صندوق السعر: حقل رملي بخط شعرة ذهبي — بلا تدرّجات */
.product-price,
.s-price,
[class*="product-price"]:not(.s-product-card-price) {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    margin: 1.1rem 0 !important;
    padding: 14px 20px !important;
    background: var(--mz-sand) !important;
    border: 1px solid var(--mz-gold-hairline) !important;
    border-inline-start: 3px solid var(--mz-gold) !important;
    border-radius: var(--mz-radius-soft) !important;
    width: fit-content !important;
}

.product-price .price-now,
.product-price .current-price,
.s-price-value,
.total-price {
    font-family: var(--mz-display) !important;
    font-size: clamp(1.7rem, 4vw, 2.2rem) !important;
    font-weight: 700 !important;
    color: var(--mz-emerald) !important;
}

.product-price .price-currency,
.s-price-currency {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--mz-gold-deep) !important;
}

.product-price .price-old,
.s-price-old {
    font-size: 1.05rem !important;
    color: var(--mz-ink-muted) !important;
    text-decoration: line-through !important;
    text-decoration-color: var(--mz-ember) !important;
}

.price-discount-badge,
.save-badge {
    background: var(--mz-ember) !important;
    color: #FFFFFF !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    padding: 4px 11px !important;
    border-radius: var(--mz-radius-pill) !important;
    border: none !important;
    box-shadow: none !important;
}

/* التقسيط */
.tamara-installment,
.tabby-promo-snippet,
[class*="split-payment"],
[class*="installment"] {
    border-radius: var(--mz-radius-soft) !important;
    border: 1px solid var(--mz-gold-hairline) !important;
    background: #FFFFFF !important;
    padding: 12px 16px !important;
    margin-bottom: 1rem !important;
    box-shadow: none !important;
    transition: border-color 0.25s ease;
}

.tamara-installment:hover,
.tabby-promo-snippet:hover { border-color: var(--mz-gold) !important; }

/* ============================================================================
 *  7. الزر الرئيسي — الذهب المصقول (اللحظة الجريئة الوحيدة)
 *  ============================================================================ */
salla-add-product-button,
.s-add-product-button,
.add-to-cart-btn,
.btn-buy-now {
    width: 100% !important;
    position: relative !important;
}

.product-details salla-add-product-button button,
.product-single salla-add-product-button button,
.s-add-product-button button,
.btn-add-to-cart {
    width: 100% !important;
    background: linear-gradient(135deg, #F2E2B4 0%, #D9BC76 48%, #B2914A 100%) !important;
    color: var(--mz-emerald-deep) !important;
    font-family: var(--mz-display) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    border: 1px solid #F6ECCD !important;
    border-radius: var(--mz-radius-pill) !important;
    box-shadow: 0 14px 30px -14px rgba(178, 145, 74, 0.85) !important;
    padding: 16px 28px !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease, filter 0.3s ease !important;
}

/* لمعة تمر مرة كل فترة — حركة واحدة مقصودة في الصفحة */
.product-details salla-add-product-button button::after,
.s-add-product-button button::after,
.btn-add-to-cart::after {
    content: "";
    position: absolute;
    top: -60%;
    inset-inline-start: -40%;
    width: 34%;
    height: 220%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(22deg);
    animation: mzSheen 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}

@keyframes mzSheen {
    0%   { inset-inline-start: -45%; }
    38%  { inset-inline-start: 135%; }
    100% { inset-inline-start: 135%; }
}

.product-details salla-add-product-button button:hover,
.s-add-product-button button:hover,
.btn-add-to-cart:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 20px 38px -14px rgba(178, 145, 74, 0.95) !important;
    filter: brightness(1.03);
}

.product-details salla-add-product-button button:active,
.s-add-product-button button:active { transform: translateY(1px) !important; }

/* ============================================================================
 *  8. شارات الثقة أسفل زر الشراء
 *  ============================================================================ */
.mazeej-hero-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 1.25rem;
    padding: 14px 10px;
    background: #FFFFFF;
    border: 1px solid var(--mz-gold-hairline);
    border-radius: var(--mz-radius-soft);
}

.mazeej-hero-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 0 8px;
}

.mazeej-hero-trust-item + .mazeej-hero-trust-item {
    border-inline-start: 1px solid rgba(217, 188, 118, 0.3);
}

.mazeej-hero-trust-item svg,
.mazeej-hero-trust-item i {
    color: var(--mz-olive);
    font-size: 1.15rem;
}

.mazeej-hero-trust-item span {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mz-ink-soft);
    line-height: 1.5;
}

/* ============================================================================
 *  9. شريط الشراء الثابت (موبايل) — معطّل بناءً على طلب العميل
 *  الأنماط أدناه محفوظة للرجوع إليها فقط؛ القاعدة التالية تُخفيه نهائيًا،
 *  كما أنه لم يعد يُنشأ أصلًا في ملف JS.
 *  ============================================================================ */
#mazeej-sticky-buy-bar,
.mazeej-sticky-bar { display: none !important; }

.mazeej-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: rgba(10, 53, 36, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--mz-gold);
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    box-shadow: 0 -12px 34px rgba(10, 53, 36, 0.28);
    transform: translateY(115%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    direction: rtl;
}

.mazeej-sticky-bar.is-visible { transform: translateY(0); }

.mazeej-sticky-content {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mazeej-sticky-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }

.mazeej-sticky-thumb {
    width: 46px;
    height: 46px;
    border-radius: var(--mz-leaf-radius-sm);
    object-fit: cover;
    border: 1px solid var(--mz-gold);
    background: #FFFFFF;
    flex-shrink: 0;
}

.mazeej-sticky-details { display: flex; flex-direction: column; overflow: hidden; }

.mazeej-sticky-title {
    font-family: var(--mz-display);
    font-size: 0.88rem;
    font-weight: 500;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.mazeej-sticky-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: rgba(242, 226, 180, 0.85);
    margin-top: 2px;
}

.mazeej-sticky-rating .stars { color: var(--mz-gold); }

.mazeej-sticky-action { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.mazeej-sticky-price { display: flex; flex-direction: column; align-items: flex-end; }

.mazeej-sticky-price-now {
    font-family: var(--mz-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--mz-gold-light);
    line-height: 1.1;
}

.mazeej-sticky-price-now span { font-size: 0.78rem; color: var(--mz-gold); }

.mazeej-sticky-price-old {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: line-through;
}

.mazeej-sticky-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #F2E2B4 0%, #D9BC76 50%, #B2914A 100%);
    color: var(--mz-emerald-deep);
    font-family: var(--mz-display);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 11px 20px;
    border-radius: var(--mz-radius-pill);
    border: 1px solid #F6ECCD;
    box-shadow: 0 6px 16px -6px rgba(178, 145, 74, 0.8);
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mazeej-sticky-btn:hover { transform: scale(1.03); }
.mazeej-sticky-btn:active { transform: scale(0.97); }

.mazeej-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--mz-leaf);
    animation: mzPulse 2.4s infinite;
    display: inline-block;
}

@keyframes mzPulse {
    0%   { box-shadow: 0 0 0 0 rgba(138, 165, 73, 0.75); }
    70%  { box-shadow: 0 0 0 7px rgba(138, 165, 73, 0); }
    100% { box-shadow: 0 0 0 0 rgba(138, 165, 73, 0); }
}

/* ============================================================================
 *  10. إشعار الطلبات الحيّة
 *  ============================================================================ */
.mazeej-social-proof-toast {
    position: fixed;
    bottom: 84px;
    inset-inline-end: 18px;
    z-index: 99990;
    background: #FFFFFF;
    border: 1px solid var(--mz-gold-hairline);
    border-inline-start: 3px solid var(--mz-olive);
    border-radius: var(--mz-radius-soft);
    padding: 11px 15px;
    box-shadow: var(--mz-lift-2);
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: 330px;
    direction: rtl;
    transform: translateX(-120%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
    pointer-events: none;
}

.mazeej-social-proof-toast.is-shown { transform: translateX(0); opacity: 1; }

.mazeej-toast-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(138, 165, 73, 0.14);
    color: var(--mz-olive);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mazeej-toast-text { font-size: 0.78rem; color: var(--mz-ink); line-height: 1.6; }
.mazeej-toast-text strong { color: var(--mz-emerald); font-weight: 600; }

.mazeej-toast-time {
    display: block;
    font-size: 0.69rem;
    color: var(--mz-ink-muted);
    margin-top: 2px;
}

/* شارة المشاهدين */
#mazeej-viewers-badge {
background: rgba(138, 165, 73, 0.12) !important;
border: 1px solid rgba(75, 103, 27, 0.22) !important;
color: var(--mz-olive) !important;
font-family: var(--mz-body) !important;
font-weight: 500 !important;
}

/* ============================================================================
 *  11. FOOTER — أرض زمردية بنسيج الزخرفة النباتية
 *  ============================================================================ */
footer,
.store-footer,
.footer-wrapper,
.s-footer {
    position: relative;
    background: var(--mz-emerald-deep) !important;
    color: rgba(255, 255, 255, 0.82) !important;
    border-top: none !important;
}

/* سبب بقاء الخلفية بيضاء: سلة تغلّف محتوى الفوتر داخل حاويات تحمل خلفية
 *  بيضاء خاصة بها (bg-white) — هنا نُفرغ خلفية كل الحاويات الداخلية فقط،
 *  مع إبقاء الصور وشارات الدفع على حالها */
footer :is(div, section, nav, ul, li, aside, salla-contacts, salla-apps-icons),
.store-footer :is(div, section, nav, ul, li, aside),
.s-footer :is(div, section, nav, ul, li, aside) {
    background-color: transparent !important;
    background-image: none !important;
}

/* كل نص داخل الفوتر يرث الأبيض افتراضيًا */
footer,
footer *:not(img):not(svg):not(path):not(circle):not(rect):not(polygon),
.s-footer,
.s-footer *:not(img):not(svg):not(path):not(circle):not(rect):not(polygon) {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* شريط الزخرفة أعلى الفوتر */
footer::before,
.store-footer::before,
.s-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='56' viewBox='0 0 112 56' fill='none' stroke='%23D9BC76' stroke-width='3' opacity='0.5'%3E%3Ccircle cx='20' cy='20' r='7'/%3E%3Ccircle cx='20' cy='38' r='7'/%3E%3Ccircle cx='11' cy='29' r='7'/%3E%3Ccircle cx='29' cy='29' r='7'/%3E%3Cpath d='M76 12c9 9 9 25 0 34-9-9-9-25 0-34z'/%3E%3C/svg%3E");
    background-size: 112px 56px;
    background-repeat: repeat-x;
    opacity: 0.28;
    pointer-events: none;
}

/* ملاحظة: :not(#__mz1__):not(#__mz2__) خدعة CSS لرفع مستوى التحديد (specificity)
 *  إلى مستوى الـ ID دون استخدام ID فعلي — تضمن أن ألوان الفوتر تكسب أي تنسيق
 *  افتراضي أقوى يفرضه قالب سلة (وهو سبب اختفاء النصوص: بقيت بلونها الغامق
 *  الافتراضي فوق خلفية الفوتر الغامقة الجديدة) */

footer :is(h1, h2, h3, h4, h5, h6, .footer-title):not(#__mz1__):not(#__mz2__),
.s-footer :is(h1, h2, h3, h4, h5, h6, .footer-title):not(#__mz1__):not(#__mz2__),
.store-footer :is(h1, h2, h3, h4, h5, h6, .footer-title):not(#__mz1__):not(#__mz2__) {
    font-family: var(--mz-display) !important;
    color: var(--mz-gold) !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    margin-bottom: 0.9rem !important;
}

footer :is(a, p, span, li, label, strong, small, dt, dd):not(#__mz1__):not(#__mz2__),
.s-footer :is(a, p, span, li, label, strong, small, dt, dd):not(#__mz1__):not(#__mz2__),
.store-footer :is(a, p, span, li, label, strong, small, dt, dd):not(#__mz1__):not(#__mz2__) {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 0.86rem !important;
    transition: color 0.25s ease, padding-inline-start 0.25s ease;
}

footer a:hover:not(#__mz1__):not(#__mz2__),
.s-footer a:hover:not(#__mz1__):not(#__mz2__) {
    color: var(--mz-gold-light) !important;
    padding-inline-start: 3px;
}

/* أيقونات SVG داخل الفوتر (أرقام الجوال، الشعار، أيقونات التواصل) —
 *  بعضها يستخدم fill ثابت بدل currentColor فيختفي فوق الخلفية الغامقة */
footer svg:not(#__mz1__):not(#__mz2__),
footer svg :is(path, circle, rect, polygon):not(#__mz1__):not(#__mz2__),
.s-footer svg:not(#__mz1__):not(#__mz2__),
.s-footer svg :is(path, circle, rect, polygon):not(#__mz1__):not(#__mz2__) {
    fill: rgba(255, 255, 255, 0.85) !important;
    stroke: rgba(255, 255, 255, 0.85) !important;
}

/* استثناء شعار مزيج والشارات الرسمية (ضريبة القيمة المضافة، السجل التجاري)
 *  من تلوين الـ SVG القسري كي تبقى بألوانها الأصلية */
footer img,
footer a[href*="gov.sa"] svg,
footer a[href*="gov.sa"] svg *,
.s-footer img {
    fill: unset !important;
    stroke: unset !important;
}

/* أيقونات التواصل */
footer .social-icons a,
.s-footer [class*="social"] a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(217, 188, 118, 0.38);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

footer .social-icons a:hover,
.s-footer [class*="social"] a:hover {
    background: var(--mz-gold);
    border-color: var(--mz-gold);
    color: var(--mz-emerald-deep) !important;
}

footer .social-icons a:hover svg,
footer .social-icons a:hover svg *,
.s-footer [class*="social"] a:hover svg,
.s-footer [class*="social"] a:hover svg * {
    fill: var(--mz-emerald-deep) !important;
    stroke: var(--mz-emerald-deep) !important;
}

footer .social-icons a:hover,
.s-footer [class*="social"] a:hover {
    transform: translateY(-2px);
}

/* سطر قانوني موحّد: السجل التجاري (salla-trust-badges) بجانب الرقم الضريبي
 *  — ينشئه سكربت mazeej-sa.js ليجمع العنصرين الإخوة في صف واحد متمركز */
.mz-legal-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem 2rem;
    width: 100%;
}

.mz-legal-row > salla-trust-badges {
    display: inline-flex !important;
    align-items: center;
}

.mz-legal-row > div.flex.items-end {
    display: inline-flex !important;
    align-items: flex-end;
    width: auto !important;
}

/* ---- زر واتساب الفوتر — CTA أنيق بهوية مزيج --------------------------------
 *  يتدرّج زمردي→أخضر واتساب بخيط ذهبي، أيقونة داخل قرص أبيض ونقطة نبض خضراء.
 *  ملاحظة specificity: قواعد نص الفوتر تستخدم :not(#__mz1__):not(#__mz2__)
 *  للوصول لمستوى الـ ID — نستعمل نفس الحيلة هنا حتى يكسب زرنا فوقها وفوق
 *  قاعدة الإخفاء العامة a[href*="wa.me"] (وكذلك قواعد اللون/الحجم !important). */
footer a.mz-wa-foot:not(#__mz1__):not(#__mz2__) {
    display: flex !important;
    width: fit-content;
    margin: 20px auto 10px;
    align-items: center;
    gap: 12px;
    padding: 9px 22px 9px 12px;
    background: linear-gradient(135deg, var(--mz-emerald-deep) 0%, #0e5c3e 55%, #1a9e5a 100%) !important;
    border: 1px solid var(--mz-gold-hairline) !important;
    border-radius: var(--mz-radius-pill) !important;
    box-shadow: 0 12px 30px -14px rgba(26, 158, 90, 0.65), var(--mz-lift-2);
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: var(--mz-body) !important;
    transition: transform 0.28s ease, box-shadow 0.28s ease,
        border-color 0.28s ease, filter 0.28s ease !important;
}

footer a.mz-wa-foot:hover:not(#__mz1__):not(#__mz2__) {
    transform: translateY(-3px);
    border-color: var(--mz-gold) !important;
    box-shadow: 0 18px 38px -14px rgba(26, 158, 90, 0.75), var(--mz-lift-3);
    filter: brightness(1.06);
    padding: 9px 22px 9px 12px !important; /* يعترض تحويل hover الافتراضي للفوتر */
}

footer a.mz-wa-foot:active:not(#__mz1__):not(#__mz2__) {
    transform: translateY(-1px);
}

footer a.mz-wa-foot:focus-visible:not(#__mz1__):not(#__mz2__) {
    outline: 2px solid var(--mz-gold) !important;
    outline-offset: 3px;
}

/* القرص والأيقونة */
footer .mz-wa-foot__icon:not(#__mz1__):not(#__mz2__) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #1a9e5a !important;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.3);
}

footer .mz-wa-foot__icon svg:not(#__mz1__):not(#__mz2__) {
    fill: currentColor !important;
    stroke: none !important;
    display: block;
}

/* قاعدة الإبقاء: قاعدة الفوتر العامة (footer svg :is(path...)) تلوّن كل مسار
 *  داخل الفوتر بالأبيض !important — هنا نفرض لون الأيقونة (green) على المسار
 *  بتحديد أعلى (أضفنا class) حتى يظهر الشعار فوق القرص الأبيض. */
footer .mz-wa-foot__icon svg :is(path, circle, rect, polygon):not(#__mz1__):not(#__mz2__) {
    fill: #1a9e5a !important;
    stroke: none !important;
}

/* النصوص */
footer .mz-wa-foot__body:not(#__mz1__):not(#__mz2__) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.25;
}

footer .mz-wa-foot__label:not(#__mz1__):not(#__mz2__) {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: var(--mz-gold-light) !important;
    font-size: 0.7rem !important;
    font-weight: 500;
    letter-spacing: 0.02em;
}

footer .mz-wa-foot__num:not(#__mz1__):not(#__mz2__) {
    display: block !important;
    color: #ffffff !important;
    font-family: var(--mz-display) !important;
    font-size: 0.95rem !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    direction: ltr;
    unicode-bidi: isolate;
}

/* نقطة النبض بجانب النص */
footer .mz-wa-foot__dot:not(#__mz1__):not(#__mz2__) {
    display: inline-block !important;
    width: 7px;
    height: 7px;
    border-radius: 50% !important;
    background: #25d366 !important;
    animation: mzWaDot 2s ease-out infinite;
}

@keyframes mzWaDot {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* الجوال */
@media (max-width: 560px) {
    footer a.mz-wa-foot:not(#__mz1__):not(#__mz2__) {
        padding: 8px 16px 8px 10px;
        gap: 10px;
    }
    footer .mz-wa-foot__icon:not(#__mz1__):not(#__mz2__) {
        width: 34px;
        height: 34px;
    }
    footer .mz-wa-foot__num:not(#__mz1__):not(#__mz2__) {
        font-size: 0.88rem !important;
    }
}

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    footer a.mz-wa-foot:not(#__mz1__):not(#__mz2__) { transition: none !important; }
    footer .mz-wa-foot__dot:not(#__mz1__):not(#__mz2__) { animation: none !important; }
}

/* ============================================================================
 *  12. عناصر عامة أخرى
 *  ============================================================================ */

/* أزرار سلة الثانوية */
.s-button-secondary,
.btn--outline {
    border: 1.5px solid var(--mz-emerald) !important;
    color: var(--mz-emerald) !important;
    background: transparent !important;
    border-radius: var(--mz-radius-pill) !important;
}

/* التبويبات والوصف */
.product-description,
.s-tabs-content {
    font-size: 0.95rem;
    line-height: 1.95;
    color: var(--mz-ink-soft);
    max-width: 72ch;
}

/* الأكورديون (الأسئلة الشائعة) */
.mazeej-faq-item {
    border: 1px solid var(--mz-gold-hairline);
    border-radius: var(--mz-radius-soft);
    background: #FFFFFF;
    margin-bottom: 10px;
    overflow: hidden;
}

.mazeej-faq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    font-family: var(--mz-display);
    font-weight: 500;
    color: var(--mz-emerald-deep);
}

.mazeej-faq-item.active .mazeej-faq-header { background: var(--mz-sand); }

.mazeej-faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 0 16px;
    font-size: 0.88rem;
    line-height: 1.85;
    color: var(--mz-ink-soft);
}

.mazeej-faq-item.active .mazeej-faq-body { padding-bottom: 14px; }

/* التوهج عند التمرير للزر */
.mazeej-highlight-pulse {
    animation: mzHighlight 1.4s ease;
    border-radius: var(--mz-radius-soft);
}

@keyframes mzHighlight {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 188, 118, 0); }
    40%      { box-shadow: 0 0 0 10px rgba(217, 188, 118, 0.35); }
}

/* ============================================================================
 *  13. RESPONSIVE
 *  ============================================================================ */
@media (max-width: 767px) {
    .s-product-card-entry,
    .product-card { border-radius: var(--mz-leaf-radius-sm) !important; }

    .s-product-card-content { padding: 13px 13px 15px !important; }

    .s-product-card-title { font-size: 0.9rem !important; }

    .s-product-card-sale-price { font-size: 1.1rem !important; }

    .s-product-card-promotion-title { font-size: 0.66rem !important; padding: 5px 11px !important; }

    salla-add-product-to-wishlist,
    .s-product-card-wishlist-btn { width: 34px !important; height: 34px !important; top: 9px !important; inset-inline-end: 9px !important; }

    .section-title,
    .s-block-title { font-size: 1.25rem !important; }

    .product-price { width: 100% !important; justify-content: space-between; }

    .mazeej-social-proof-toast {
        bottom: 78px;
        inset-inline-end: 10px;
        inset-inline-start: 10px;
        max-width: calc(100% - 20px);
    }

    .mazeej-sticky-title { max-width: 130px; font-size: 0.82rem; }
    .mazeej-sticky-btn { padding: 9px 15px; font-size: 0.88rem; }
}

/* ============================================================================
 *  14. تقليل الحركة
 *  ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}


/* ---- الأسئلة الشائعة: دعم details/summary (تعمل بلا JavaScript) ---- */
details.mazeej-faq-item > summary.mazeej-faq-header { list-style: none; }
details.mazeej-faq-item > summary.mazeej-faq-header::-webkit-details-marker { display: none; }
details.mazeej-faq-item[open] > summary.mazeej-faq-header { background: var(--mz-sand); }
details.mazeej-faq-item[open] > summary.mazeej-faq-header::after { transform: rotate(45deg); }
details.mazeej-faq-item > .mazeej-faq-body { max-height: none; padding-top: 2px; padding-bottom: 16px; }
details.mazeej-faq-item > summary.mazeej-faq-header { outline-offset: -2px; }

@media (prefers-reduced-motion: no-preference) {
    details.mazeej-faq-item > .mazeej-faq-body { animation: mzFaqOpen 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
    @keyframes mzFaqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* ============================================================================
 *  15. الزخارف النباتية — مأخوذة مباشرة من دليل الهوية (Pattern)
 *  الزهرة الرباعية · الدائرة المركزية · الورقة البسيطة · التوليب
 *  ============================================================================ */
:root {
    --mz-band-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='64' viewBox='0 0 160 64' fill='none' stroke='%23D9BC76' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='24' r='7'/%3E%3Ccircle cx='20' cy='40' r='7'/%3E%3Ccircle cx='12' cy='32' r='7'/%3E%3Ccircle cx='28' cy='32' r='7'/%3E%3Ccircle cx='20' cy='32' r='2.5' fill='%23D9BC76'/%3E%3Cpath d='M60 14c10 10 10 26 0 36-10-10-10-26 0-36z'/%3E%3Cpath d='M60 17v30'/%3E%3Ccircle cx='100' cy='32' r='12'/%3E%3Ccircle cx='100' cy='32' r='4' fill='%23D9BC76'/%3E%3Cpath d='M132 24v18M132 42c-6 0-10-4-10-10 4 0 7 2 10 6 3-4 6-6 10-6 0 6-4 10-10 10z'/%3E%3C/svg%3E");

    --mz-band-olive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='64' viewBox='0 0 160 64' fill='none' stroke='%234B671B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='24' r='7'/%3E%3Ccircle cx='20' cy='40' r='7'/%3E%3Ccircle cx='12' cy='32' r='7'/%3E%3Ccircle cx='28' cy='32' r='7'/%3E%3Ccircle cx='20' cy='32' r='2.5' fill='%234B671B'/%3E%3Cpath d='M60 14c10 10 10 26 0 36-10-10-10-26 0-36z'/%3E%3Cpath d='M60 17v30'/%3E%3Ccircle cx='100' cy='32' r='12'/%3E%3Ccircle cx='100' cy='32' r='4' fill='%234B671B'/%3E%3Cpath d='M132 24v18M132 42c-6 0-10-4-10-10 4 0 7 2 10 6 3-4 6-6 10-6 0 6-4 10-10 10z'/%3E%3C/svg%3E");

    --mz-petal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23D9BC76' stroke-width='6'%3E%3Ccircle cx='60' cy='28' r='19'/%3E%3Ccircle cx='60' cy='92' r='19'/%3E%3Ccircle cx='28' cy='60' r='19'/%3E%3Ccircle cx='92' cy='60' r='19'/%3E%3Ccircle cx='60' cy='60' r='8' fill='%23D9BC76' stroke='none'/%3E%3C/svg%3E");

    --mz-petal-olive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%234B671B' stroke-width='6'%3E%3Ccircle cx='60' cy='28' r='19'/%3E%3Ccircle cx='60' cy='92' r='19'/%3E%3Ccircle cx='28' cy='60' r='19'/%3E%3Ccircle cx='92' cy='60' r='19'/%3E%3Ccircle cx='60' cy='60' r='8' fill='%234B671B' stroke='none'/%3E%3C/svg%3E");

    --mz-leaf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%234B671B' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M60 14c22 22 22 70 0 92-22-22-22-70 0-92z'/%3E%3Cpath d='M60 20v80'/%3E%3C/svg%3E");
}

/* شريط زخرفي يفصل بين الأقسام */
.mz-band {
    height: 64px;
    background-image: var(--mz-band-gold);
    background-repeat: repeat-x;
    background-size: 160px 64px;
    opacity: 0.55;
}

.mz-band--olive { background-image: var(--mz-band-olive); opacity: 0.4; }
.mz-band--tight { height: 40px; background-size: 100px 40px; }

/* انزلاق لا نهائي للشريط الزيتوني — الخطوة = عرض البلاطة (100px) ليبقى بدون فراغات */
@keyframes mzOliveScroll {
    from { background-position-x: 0; }
    to   { background-position-x: -100px; }
}
.mz-band--olive {
    animation: mzOliveScroll 18s linear infinite;
    will-change: background-position;
}
@media (max-width: 560px) {
    @keyframes mzOliveScrollSm {
        from { background-position-x: 0; }
        to   { background-position-x: -110px; }
    }
    .mz-band--olive { animation: mzOliveScrollSm 14s linear infinite; }
}

/* ---- بلاطات الهوية الملونة (من دليل الهوية المصوّر / PDF) ----
 *  بلاطة SVG واحدة 448×64 تضم ثماني بلاطات متعاقبة (56×56 داخل مربع 64):
 *  ورقة · نفل · زنبقة · دوائر · ديزة · ورقة صغيرة · نفل · حلقة.
 *  ألوان الدليل: برتقالي #E98A2B · زيتوني #6E7F3C · كريمي #F3ECD3 */
:root {
    --mz-tiles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='448' height='64' viewBox='0 0 448 64'%3E%3Crect x='4' y='4' width='48' height='56' rx='12' fill='%23E98A2B'/%3E%3Cpath d='M28 16c6 6 6 18 0 24-6-6-6-18 0-24z' fill='none' stroke='%23F3ECD3' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M28 19v18' stroke='%23F3ECD3' stroke-width='2.2' stroke-linecap='round'/%3E%3Crect x='60' y='4' width='48' height='56' rx='12' fill='%23F3ECD3'/%3E%3Cg fill='none' stroke='%236E7F3C' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='84' cy='25' r='5.5'/%3E%3Ccircle cx='84' cy='39' r='5.5'/%3E%3Ccircle cx='77' cy='32' r='5.5'/%3E%3Ccircle cx='91' cy='32' r='5.5'/%3E%3C/g%3E%3Ccircle cx='84' cy='32' r='2.2' fill='%236E7F3C'/%3E%3Crect x='116' y='4' width='48' height='56' rx='12' fill='%236E7F3C'/%3E%3Cg fill='none' stroke='%23F3ECD3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M140 16c3.5 5 3.5 9 0 12-3.5-3-3.5-7 0-12z'/%3E%3Cpath d='M131 25c5 0 9 1.8 9 7s-4 7-9 7-9-1.8-9-7 4-7 9-7z'/%3E%3Cpath d='M149 25c-5 0-9 1.8-9 7s4 7 9 7 9-1.8 9-7-4-7-9-7z'/%3E%3Cpath d='M140 32v12'/%3E%3C/g%3E%3Crect x='172' y='4' width='48' height='56' rx='12' fill='%23E98A2B'/%3E%3Ccircle cx='196' cy='32' r='11' fill='none' stroke='%23F3ECD3' stroke-width='2.2'/%3E%3Ccircle cx='196' cy='32' r='6' fill='none' stroke='%23F3ECD3' stroke-width='2.2'/%3E%3Ccircle cx='196' cy='32' r='2.2' fill='%23F3ECD3'/%3E%3Crect x='228' y='4' width='48' height='56' rx='12' fill='%23F3ECD3'/%3E%3Cg fill='none' stroke='%23E98A2B' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='252' cy='32' r='12'/%3E%3Ccircle cx='252' cy='21' r='4.8'/%3E%3Ccircle cx='252' cy='43' r='4.8'/%3E%3Ccircle cx='241' cy='32' r='4.8'/%3E%3Ccircle cx='263' cy='32' r='4.8'/%3E%3Ccircle cx='244.5' cy='24.5' r='4.8'/%3E%3Ccircle cx='259.5' cy='24.5' r='4.8'/%3E%3Ccircle cx='244.5' cy='39.5' r='4.8'/%3E%3Ccircle cx='259.5' cy='39.5' r='4.8'/%3E%3C/g%3E%3Ccircle cx='252' cy='32' r='2.6' fill='%23E98A2B'/%3E%3Crect x='284' y='4' width='48' height='56' rx='12' fill='%236E7F3C'/%3E%3Cpath d='M308 18c7 7 7 21 0 28-7-7-7-21 0-28z' fill='none' stroke='%23F3ECD3' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M308 21v22' stroke='%23F3ECD3' stroke-width='2.2' stroke-linecap='round'/%3E%3Crect x='340' y='4' width='48' height='56' rx='12' fill='%23E98A2B'/%3E%3Cg fill='none' stroke='%23F3ECD3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='364' cy='25' r='5.5'/%3E%3Ccircle cx='364' cy='39' r='5.5'/%3E%3Ccircle cx='357' cy='32' r='5.5'/%3E%3Ccircle cx='371' cy='32' r='5.5'/%3E%3C/g%3E%3Ccircle cx='364' cy='32' r='2.6' fill='%23F3ECD3'/%3E%3Crect x='396' y='4' width='48' height='56' rx='12' fill='%23F3ECD3'/%3E%3Ccircle cx='420' cy='32' r='11' fill='none' stroke='%236E7F3C' stroke-width='2.2'/%3E%3Ccircle cx='420' cy='32' r='4.5' fill='%236E7F3C'/%3E%3C/svg%3E");
}

/* شريط البلاطات — انزلاق أفقي لا نهائي بلا فراغات (الخطوة = عرض البلاطة) */
@keyframes mzTilesScroll {
    from { background-position-x: 0; }
    to   { background-position-x: -448px; }
}
@keyframes mzTilesScrollTight {
    from { background-position-x: 0; }
    to   { background-position-x: -280px; }
}

.mz-band--tiles {
    height: 64px;
    background-image: var(--mz-tiles);
    background-repeat: repeat-x;
    background-size: 448px 64px;
    background-position: 0 top;
    opacity: 0.95;
    animation: mzTilesScroll 22s linear infinite;
    will-change: background-position;
}

.mz-band--tiles.mz-band--tight {
    height: 40px;
    background-size: 280px 40px;
    animation: mzTilesScrollTight 16s linear infinite;
}

/* زخرفة زاوية قسم رملي: غصن بشفافية خفيفة (من موتيفات الدليل) */
.mz-sec--sand { position: relative; }
.mz-sec--sand::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    width: 150px;
    height: 150px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' fill='none' stroke='%236E7F3C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M145 145C110 120 85 90 78 52'/%3E%3Cpath d='M78 52c-2 12-8 20-18 24 2-12 8-20 18-24z' fill='%236E7F3C' fill-opacity='0.25'/%3E%3Cpath d='M96 74c-10 0-18 4-24 12 10 2 18-2 24-12z' fill='%236E7F3C' fill-opacity='0.25'/%3E%3Cpath d='M104 96c-9-2-17 0-24 6 9 4 17 2 24-6z' fill='%236E7F3C' fill-opacity='0.25'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.14;
    pointer-events: none;
}

@media (max-width: 560px) {
    @keyframes mzTilesScrollSm {
        from { background-position-x: 0; }
        to   { background-position-x: -308px; }
    }
    @keyframes mzTilesScrollTightSm {
        from { background-position-x: 0; }
        to   { background-position-x: -224px; }
    }
    .mz-band--tiles { height: 44px; background-size: 308px 44px; animation: mzTilesScrollSm 16s linear infinite; }
    .mz-band--tiles.mz-band--tight { height: 32px; background-size: 224px 32px; animation: mzTilesScrollTightSm 12s linear infinite; }
}

/* علامة مائية نباتية خفيفة داخل قسم */
.mz-watermark { position: relative; overflow: hidden; }

.mz-watermark::after {
    content: "";
    position: absolute;
    inset-inline-end: -70px;
    bottom: -70px;
    width: 260px;
    height: 260px;
    background-image: var(--mz-petal-olive);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.06;
    pointer-events: none;
}

/* ============================================================================
 *  16. أقسام الصفحة الرئيسية — مكوّنات HTML مخصصة
 *  ============================================================================ */
.mz-wrap {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 20px;
}

.mz-sec { padding-block: clamp(48px, 7vw, 86px); }
.mz-sec--paper { background: var(--mz-paper); }
.mz-sec--sand  { background: var(--mz-sand); }
.mz-sec--green { background: var(--mz-emerald); color: #FFFFFF; }

.mz-sec-head { margin-bottom: clamp(26px, 4vw, 44px); max-width: 62ch; }

.mz-sec-head--center { margin-inline: auto; text-align: center; }

.mz-h2 {
    font-family: var(--mz-display);
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
    font-weight: 600;
    line-height: 1.5;
    color: var(--mz-emerald-deep);
    margin: 0 0 10px;
}

.mz-sec--green .mz-h2 { color: var(--mz-gold-light); }

.mz-lead {
    font-size: 1rem;
    line-height: 1.95;
    color: var(--mz-ink-soft);
    margin: 0;
}

.mz-sec--green .mz-lead { color: rgba(255, 255, 255, 0.78); }

/* زهرة صغيرة تسبق العنوان */
.mz-sec-head .mz-h2::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-inline-end: 10px;
    vertical-align: -2px;
    background-image: var(--mz-petal);
    background-size: contain;
    background-repeat: no-repeat;
}

/* ---- 1. الهيرو ---- */
.mz-hero {
    position: relative;
    background: var(--mz-emerald);
    color: #FFFFFF;
    padding-block: clamp(56px, 9vw, 110px);
    overflow: hidden;
}

.mz-hero::before,
.mz-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 64px;
    background-image: var(--mz-band-gold);
    background-repeat: repeat-x;
    background-size: 160px 64px;
    opacity: 0.22;
    pointer-events: none;
}

.mz-hero::before { top: 0; }
.mz-hero::after  { bottom: 0; }

.mz-hero__inner { position: relative; z-index: 1; text-align: center; max-width: 720px; margin-inline: auto; }

.mz-hero__title {
    font-family: var(--mz-display);
    font-size: clamp(1.9rem, 5.2vw, 3.1rem);
    font-weight: 600;
    line-height: 1.45;
    color: var(--mz-gold-light);
    margin: 0 0 14px;
}

.mz-hero__sub {
    font-size: clamp(0.95rem, 1.7vw, 1.1rem);
    line-height: 1.95;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 auto 28px;
    max-width: 54ch;
}

.mz-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.mz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--mz-display);
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 30px;
    border-radius: var(--mz-radius-pill);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.mz-btn--gold {
    background: linear-gradient(135deg, #F2E2B4 0%, #D9BC76 50%, #B2914A 100%);
    color: var(--mz-emerald-deep);
    border: 1px solid #F6ECCD;
    box-shadow: 0 12px 26px -14px rgba(178, 145, 74, 0.9);
}

.mz-btn--gold:hover { transform: translateY(-2px); color: var(--mz-emerald-deep); }

.mz-btn--ghost {
    background: transparent;
    color: var(--mz-gold-light);
    border: 1.5px solid rgba(217, 188, 118, 0.55);
}

.mz-btn--ghost:hover { background: rgba(217, 188, 118, 0.14); color: var(--mz-gold-light); }

.mz-btn--emerald {
    background: var(--mz-emerald);
    color: var(--mz-gold-light);
    border: 1px solid var(--mz-emerald);
}

.mz-btn--emerald:hover { background: var(--mz-emerald-deep); color: var(--mz-gold-light); transform: translateY(-2px); }

/* ---- 2. شريط الضمانات ---- */
.mz-assure {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--mz-emerald-deep);
    border-block: 1px solid rgba(217, 188, 118, 0.3);
}

.mz-assure__item {
    padding: 18px 14px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.mz-assure__item + .mz-assure__item { border-inline-start: 1px solid rgba(217, 188, 118, 0.2); }

.mz-assure__item strong {
    display: block;
    font-family: var(--mz-display);
    color: var(--mz-gold);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 2px;
}

/* ---- شبكات عامة ---- */
.mz-grid { display: grid; gap: 18px; }
.mz-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mz-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mz-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---- 3. بطاقة المشكلة ---- */
.mz-symptom {
    background: #FFFFFF;
    border: 1px solid rgba(217, 188, 118, 0.32);
    border-radius: var(--mz-leaf-radius-sm);
    padding: 22px 20px;
}

.mz-symptom__icon {
    width: 34px;
    height: 34px;
    background-image: var(--mz-leaf-icon);
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 12px;
    opacity: 0.85;
}

.mz-symptom h3 {
    font-family: var(--mz-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mz-emerald-deep);
    margin: 0 0 6px;
}

.mz-symptom p { font-size: 0.87rem; line-height: 1.85; color: var(--mz-ink-soft); margin: 0; }

/* ---- 4. قصة العلامة (عمودان) ---- */
.mz-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

.mz-figure {
    border-radius: var(--mz-leaf-radius);
    overflow: hidden;
    background: var(--mz-sand) var(--mz-band-olive) repeat;
    background-size: 160px 64px;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--mz-gold-hairline);
    display: grid;
    place-items: center;
}

.mz-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mz-prose p { font-size: 0.97rem; line-height: 2; color: var(--mz-ink-soft); margin: 0 0 14px; max-width: 60ch; }

/* ---- 5. المكوّنات النباتية ---- */
.mz-ingredient {
    background: #FFFFFF;
    border: 1px solid rgba(217, 188, 118, 0.32);
    border-radius: var(--mz-leaf-radius-sm);
    padding: 20px 18px;
    text-align: center;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.mz-ingredient:hover { border-color: var(--mz-gold); transform: translateY(-4px); }

.mz-ingredient__seal {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: rgba(138, 165, 73, 0.12);
    display: grid;
    place-items: center;
}

.mz-ingredient__seal::before {
    content: "";
    width: 26px;
    height: 26px;
    background-image: var(--mz-petal-olive);
    background-size: contain;
    background-repeat: no-repeat;
}

.mz-ingredient h3 {
    font-family: var(--mz-display);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--mz-emerald-deep);
    margin: 0 0 5px;
}

.mz-ingredient p { font-size: 0.83rem; line-height: 1.8; color: var(--mz-ink-muted); margin: 0; }

/* ---- 6. الفوائد ---- */
.mz-benefit {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: var(--mz-radius-soft);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(217, 188, 118, 0.25);
}

.mz-benefit__mark {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23D9BC76' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 16c20 20 20 62 0 88-20-26-20-68 0-88z'/%3E%3Cpath d='M60 24v72'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.mz-benefit h3 {
    font-family: var(--mz-display);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--mz-gold-light);
    margin: 0 0 4px;
}

.mz-benefit p { font-size: 0.86rem; line-height: 1.85; color: rgba(255, 255, 255, 0.72); margin: 0; }

/* ---- 7. خطوات الاستخدام (تسلسل حقيقي) ---- */
.mz-step {
    position: relative;
    padding: 26px 20px 22px;
    background: #FFFFFF;
    border: 1px solid rgba(217, 188, 118, 0.32);
    border-radius: var(--mz-leaf-radius-sm);
}

.mz-step__num {
    position: absolute;
    top: -16px;
    inset-inline-start: 20px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mz-emerald);
    color: var(--mz-gold-light);
    font-family: var(--mz-display);
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid var(--mz-paper);
}

.mz-step h3 {
    font-family: var(--mz-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mz-emerald-deep);
    margin: 6px 0 6px;
}

.mz-step p { font-size: 0.87rem; line-height: 1.85; color: var(--mz-ink-soft); margin: 0; }

/* ---- 8. الأرقام ---- */
.mz-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--mz-gold-hairline);
    border-radius: var(--mz-radius-soft);
    background: #FFFFFF;
    overflow: hidden;
}

.mz-stat { padding: 24px 16px; text-align: center; }
.mz-stat + .mz-stat { border-inline-start: 1px solid rgba(217, 188, 118, 0.28); }

.mz-stat__num {
    font-family: var(--mz-display);
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    font-weight: 700;
    color: var(--mz-emerald);
    line-height: 1.2;
    display: block;
}

.mz-stat__label { font-size: 0.82rem; color: var(--mz-ink-muted); line-height: 1.7; }

/* ---- 9. آراء العميلات ---- */
.mz-review {
    background: #FFFFFF;
    border: 1px solid rgba(217, 188, 118, 0.32);
    border-inline-start: 3px solid var(--mz-gold);
    border-radius: var(--mz-radius-soft);
    padding: 22px 20px;
}

.mz-review__stars { color: var(--mz-gold); font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 8px; }

.mz-review p { font-size: 0.9rem; line-height: 1.95; color: var(--mz-ink-soft); margin: 0 0 12px; }

.mz-review__by { font-family: var(--mz-display); font-size: 0.85rem; font-weight: 600; color: var(--mz-emerald-deep); }

.mz-review__city { font-size: 0.78rem; color: var(--mz-ink-muted); }

/* ---- 10. الضمان ---- */
.mz-guarantee {
    display: flex;
    align-items: center;
    gap: 22px;
    background: #FFFFFF;
    border: 1px dashed rgba(217, 188, 118, 0.6);
    border-radius: var(--mz-leaf-radius);
    padding: 26px 24px;
}

.mz-guarantee__seal {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%234B671B' stroke-width='5' stroke-linecap='round'%3E%3Crect x='10' y='10' width='100' height='100' rx='24'/%3E%3Cg stroke-width='6'%3E%3Ccircle cx='60' cy='44' r='13'/%3E%3Ccircle cx='60' cy='76' r='13'/%3E%3Ccircle cx='44' cy='60' r='13'/%3E%3Ccircle cx='76' cy='60' r='13'/%3E%3C/g%3E%3Ccircle cx='60' cy='60' r='5' fill='%234B671B' stroke='none'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.9;
}

.mz-guarantee h3 {
    font-family: var(--mz-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mz-emerald-deep);
    margin: 0 0 6px;
}

.mz-guarantee p { font-size: 0.9rem; line-height: 1.9; color: var(--mz-ink-soft); margin: 0; max-width: 62ch; }

/* ---- 11. نداء أخير ---- */
.mz-final {
    position: relative;
    background: var(--mz-emerald-deep);
    text-align: center;
    padding-block: clamp(46px, 7vw, 82px);
    overflow: hidden;
}

.mz-final::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--mz-band-gold);
    background-repeat: repeat;
    background-size: 160px 64px;
    opacity: 0.07;
    pointer-events: none;
}

.mz-final__inner { position: relative; z-index: 1; }

.mz-final h2 {
    font-family: var(--mz-display);
    font-size: clamp(1.5rem, 3.6vw, 2.3rem);
    font-weight: 600;
    color: var(--mz-gold-light);
    margin: 0 0 12px;
}

.mz-final p { color: rgba(255, 255, 255, 0.78); font-size: 1rem; line-height: 1.9; margin: 0 auto 26px; max-width: 50ch; }

/* ---- الأسئلة الشائعة: حاوية ---- */
.mazeej-faq-container { max-width: 800px; margin-inline: auto; }

.mazeej-faq-header::after {
    content: "";
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: var(--mz-petal-olive);
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.35s ease;
}

.mazeej-faq-item.active .mazeej-faq-header::after { transform: rotate(45deg); }

/* ---- استجابة ---- */
@media (max-width: 900px) {
    .mz-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .mz-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .mz-split { grid-template-columns: 1fr; }
    .mz-assure { grid-template-columns: repeat(2, 1fr); }
    .mz-assure__item:nth-child(3) { border-inline-start: none; }
    .mz-assure__item:nth-child(n+3) { border-top: 1px solid rgba(217, 188, 118, 0.2); }
}

@media (max-width: 560px) {
    .mz-grid--2,
    .mz-grid--3,
    .mz-grid--4 { grid-template-columns: 1fr; }
    .mz-stats { grid-template-columns: 1fr; }
    .mz-stat + .mz-stat { border-inline-start: none; border-top: 1px solid rgba(217, 188, 118, 0.28); }
    .mz-guarantee { flex-direction: column; text-align: center; }
    .mz-band { height: 44px; background-size: 110px 44px; }
}

/* ============================================================================
 *  17. شعار MEZEEJ اللاتيني
 *  ============================================================================ */
.mz-logotype,
.mz-wordmark {
    font-family: var(--mz-logo);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ============================================================================
 *  18. نظام الحركة — الكشف عند التمرير
 *  كل عنصر يحمل data-mz-reveal يبدأ مخفيًا ويظهر عند دخوله الشاشة.
 *  التأخير يأتي من المتغيّر --i الذي يضبطه JS تلقائيًا لكل شقيق.
 *
 *  تحصين: الإخفاء لا يعمل إلا إذا وسم السكربت <html> بـ class="mz-js".
 *  لو تعطّل السكربت أو حُجب لأي سبب تبقى كل النصوص ظاهرة دائمًا.
 *  ============================================================================ */
html.mz-js [data-mz-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
    will-change: opacity, transform;
}

html.mz-js [data-mz-reveal="right"] { transform: translateX(34px); }
html.mz-js [data-mz-reveal="left"]  { transform: translateX(-34px); }
html.mz-js [data-mz-reveal="zoom"]  { transform: scale(0.94); }
html.mz-js [data-mz-reveal="mask"]  { transform: none; clip-path: inset(0 0 100% 0); opacity: 1; transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1); }

html.mz-js [data-mz-reveal].is-in {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
}

/* ============================================================================
 *  19. الواجهة المصوّرة + طبقة الشيدر
 *  ============================================================================ */
.mz-hero--media {
    min-height: clamp(520px, 78vh, 760px);
    display: grid;
    align-items: center;
    padding-block: clamp(60px, 9vw, 120px);
}

.mz-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.mz-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.08);
    animation: mzDrift 26s ease-in-out infinite alternate;
}

@keyframes mzDrift {
    from { transform: scale(1.08) translate3d(0, 0, 0); }
    to   { transform: scale(1.16) translate3d(-1.6%, -1.4%, 0); }
}

/* حجاب زمردي يضمن قراءة النص فوق أي صورة */
.mz-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
    linear-gradient(to top, rgba(10, 53, 36, 0.94) 4%, rgba(10, 53, 36, 0.62) 46%, rgba(15, 74, 51, 0.5) 100%);
}

/* لوحة الشيدر (WebGL) — تمتزج مع الصورة كضوء ناعم */
.mz-hero__shader {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    mix-blend-mode: soft-light;
    opacity: 0.85;
    pointer-events: none;
}

.mz-hero--media .mz-hero__inner { z-index: 3; }
.mz-hero--media::before,
.mz-hero--media::after { z-index: 3; }

/* لمعة ذهبية تمر على العنوان مرة واحدة عند الدخول */
.mz-hero__title {
    background-image: linear-gradient(100deg,
                                      var(--mz-gold-light) 0%, var(--mz-gold-light) 38%,
                                      #FFFFFF 48%, var(--mz-gold-light) 58%, var(--mz-gold-light) 100%);
                                      background-size: 260% 100%;
                                      background-position: 100% 0;
                                      -webkit-background-clip: text;
                                      background-clip: text;
                                      color: transparent;
                                      -webkit-text-fill-color: transparent;
                                      animation: mzTitleSheen 7s ease-in-out 1.2s infinite;
}

@keyframes mzTitleSheen {
    0%, 68%, 100% { background-position: 100% 0; }
    88%           { background-position: 0 0; }
}

/* ============================================================================
 *  20. شريط الأعشاب المتحرك
 *  ============================================================================ */
.mz-ticker {
    background: var(--mz-emerald-deep);
    border-block: 1px solid rgba(217, 188, 118, 0.28);
    overflow: hidden;
    padding-block: 13px;
    direction: ltr;
}

.mz-ticker__track {
    display: flex;
    width: max-content;
    animation: mzTicker 42s linear infinite;
    will-change: transform;
}

.mz-ticker__seq {
    display: flex;
    flex-shrink: 0;
    gap: 42px;
    padding-inline-end: 42px;
}

.mz-ticker:hover .mz-ticker__track { animation-play-state: paused; }

.mz-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mz-body);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--mz-gold-light);
    white-space: nowrap;
}

.mz-ticker__item::before {
    content: "";
    width: 15px;
    height: 15px;
    background-image: var(--mz-petal);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.9;
}

@keyframes mzTicker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================================================================
 *  21. شبكة المنتجات المخصّصة (بديل مستقل عن مكوّن سلة)
 *  ============================================================================ */
.mz-product {
    display: flex;
    flex-direction: column;
    background: var(--mz-card);
    border: 1px solid rgba(217, 188, 118, 0.3);
    border-radius: var(--mz-leaf-radius);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--mz-lift-1);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease;
}

.mz-product:hover {
    transform: translateY(-8px);
    border-color: var(--mz-gold);
    box-shadow: var(--mz-lift-3);
}

.mz-product__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(160deg, var(--mz-sand), #FFFFFF 72%);
    overflow: hidden;
}

.mz-product__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.mz-product:hover .mz-product__media img { transform: scale(1.07); }

.mz-product__tag {
    position: absolute;
    top: 12px;
    inset-inline-start: 0;
    background: var(--mz-emerald);
    color: var(--mz-gold-light);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 6px 13px;
    border-inline-end: 2px solid var(--mz-gold);
    border-radius: var(--mz-radius-pill) 0 0 var(--mz-radius-pill);
    z-index: 2;
}

.mz-product__body {
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.mz-product__name {
    font-family: var(--mz-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mz-emerald-deep);
    margin: 0;
    line-height: 1.6;
}

.mz-product__desc {
    font-size: 0.83rem;
    line-height: 1.8;
    color: var(--mz-ink-muted);
    margin: 0;
    flex: 1;
}

.mz-product__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid rgba(217, 188, 118, 0.28);
}

.mz-product__price {
    font-family: var(--mz-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--mz-emerald);
}

.mz-product__price span { font-size: 0.78rem; font-weight: 500; color: var(--mz-gold-deep); }

.mz-product__go {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mz-olive);
    transition: gap 0.25s ease;
}

.mz-product:hover .mz-product__go { color: var(--mz-emerald); }

/* ============================================================================
 *  22. قسم البكج المتكامل
 *  ============================================================================ */
.mz-bundle {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(24px, 4vw, 54px);
    align-items: center;
    background: #FFFFFF;
    border: 1px solid var(--mz-gold-hairline);
    border-radius: var(--mz-leaf-radius);
    overflow: hidden;
    box-shadow: var(--mz-lift-2);
}

.mz-bundle__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(160deg, var(--mz-sand), #FFFFFF 70%);
    overflow: hidden;
    height: 100%;
}

.mz-bundle__media img { width: 100%; height: 100%; object-fit: cover; }

.mz-bundle__body { padding: clamp(22px, 3vw, 40px); padding-inline-start: 0; }

@media (max-width: 900px) {
    .mz-bundle { grid-template-columns: 1fr; }
    .mz-bundle__body { padding: 24px; padding-top: 0; }
    .mz-bundle__media { aspect-ratio: 16 / 11; }
}

.mz-bundle__list { list-style: none; padding: 0; margin: 18px 0 22px; }

.mz-bundle__list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed rgba(217, 188, 118, 0.4);
    font-size: 0.9rem;
    color: var(--mz-ink-soft);
}

.mz-bundle__list li span { color: var(--mz-ink-muted); font-size: 0.84rem; white-space: nowrap; }

.mz-bundle__total {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
}

.mz-bundle__now {
    font-family: var(--mz-display);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--mz-emerald);
    line-height: 1;
}

.mz-bundle__now span { font-size: 0.9rem; font-weight: 500; color: var(--mz-gold-deep); }

.mz-bundle__was {
    font-size: 1rem;
    color: var(--mz-ink-muted);
    text-decoration: line-through;
    text-decoration-color: var(--mz-ember);
}

.mz-bundle__save {
    background: var(--mz-ember);
    color: #FFFFFF;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: var(--mz-radius-pill);
}

/* ============================================================================
 *  23. تفاعلات دقيقة
 *  ============================================================================ */
.mz-btn--gold::after {
    content: "";
    position: absolute;
    top: -60%;
    inset-inline-start: -40%;
    width: 34%;
    height: 220%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(22deg);
    animation: mzSheen 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}

.mz-btn { position: relative; overflow: hidden; }

.mz-symptom,
.mz-step,
.mz-review {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.mz-symptom:hover,
.mz-step:hover,
.mz-review:hover {
    transform: translateY(-5px);
    border-color: var(--mz-gold);
    box-shadow: var(--mz-lift-2);
}

.mz-benefit { transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease; }

.mz-benefit:hover {
    background: rgba(217, 188, 118, 0.12);
    border-color: var(--mz-gold);
    transform: translateY(-4px);
}

.mz-stat__num { display: block; transition: transform 0.4s ease; }
.mz-stat:hover .mz-stat__num { transform: scale(1.06); }

/* النقر على صورة القصة يقرّبها قليلًا */
.mz-figure { overflow: hidden; }
.mz-figure img { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.mz-figure:hover img { transform: scale(1.05); }

/* ============================================================================
 *  24. احترام تقليل الحركة — يُلغي كل ما سبق
 *  ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    [data-mz-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
    .mz-hero__img,
    .mz-hero__title,
    .mz-ticker__track,
    .mz-band--tiles,
    .mz-band--olive,
    .mz-btn--gold::after { animation: none !important; }
    .mz-hero__title { color: var(--mz-gold-light); -webkit-text-fill-color: var(--mz-gold-light); }
    .mz-hero__shader { display: none; }
}

/* ============================================================================
 *  25. حماية بطاقات سلة من الانهيار قبل الـ hydration
 *  (custom-salla-product-card عنصر مخصص — إن لم يُعرَّف بعد فقد ينهار ارتفاعه
 *  إلى صفر وتبدو المنتجات وكأنها اختفت)
 *  ============================================================================ */
salla-products-list:not(:defined),
custom-salla-product-card:not(:defined),
salla-product-card:not(:defined) {
    display: block !important;
    min-height: 320px;
}

.s-product-card-entry { min-height: 260px; }

.s-product-card-image img:not([src]),
.s-product-card-image img[src=""] { aspect-ratio: auto !important; }


/* ============================================================================
 *  BOTANICAL PATTERN (مُضاف من mazeej-pattern.css)
 *  ============================================================================ */

/* ============================================================================
 *  MEZEEJ | مزيج — نسيج الزخرفة النباتية الكاملة (Botanical Pattern)
 *  ----------------------------------------------------------------------------
 *  مُستخرج من صفحات الزخرفة في دليل الهوية `مزيج.pdf` (ص4 · ص5 · ص6) وأُعيد
 *  رسمه متجهيًّا بعد قياس نِسَب كل موتيفة بالبكسل من الصفحات المصوّرة.
 *
 *  البلاطة: شبكة ٣×٢ بخطوة الدليل نفسها (٢١٢×١٧١ لكل خلية ⇒ ٦٣٦×٣٤٢)،
 *  وفي كل خلية موتيفة واحدة من الست:
 *    quatrefoil  الزهرة الرباعية      (FOUR-PETAL FLOWER)
 *    daisy       الديزة المهدَّبة      (CONCENTRIC CIRCLES)
 *    sprig       الغصن متعدد الأوراق  (MULTI-LEAF PLANT)
 *    tulip       التوليب              (FIVE-PETAL FLOWER)
 *    leaf        الورقة البسيطة       (SIMPLE LEAF BRANCH)
 *    ring        الدوائر المركزية     (CONCENTRIC)
 *  كل موتيفة داخل خليتها بهامش كافٍ ⇒ البلاطة تتكرّر بلا حدود (seamless).
 *
 *  النِّسَب المقيسة من الدليل (لا تخمين):
 *    quatrefoil · bbox ١٦٢ · سماكة الخط ١٧ · نقطة المركز ٣٤ ·
 *                 قمة الفتحة ٠٫٥٣٦×نصف قطر البتلة · البتلات على الأقطار
 *    daisy      · ٢٨ سنّة نصف دائرية · الحلقة ٠٫٦٥٦–١٫٠٠٠ · القرص ٠٫٤٨٤ ·
 *                 النقطة ٠٫١٧٢ · وفجوة أرضية بين الحلقة والقرص كما في الدليل
 *    leaf       · عدسة مزدوجة القوس + عرق وسطي واحد
 *    sprig      · ساق مركزية + أوراق مُعرَّقة في أزواج + حبّتان جانبيتان
 *    tulip      · تاج بثلاث قمم + ساق + زوجا أوراق
 *    ring       · حلقة ثقيلة + قرص + نقطة مركزية
 *  ألوان الدليل نفسها: #D9BC76 ذهبي · #F2E2B4 كريمي · #4B671B زيتوني.
 *
 *  ضبط قوة الزخرفة
 *    القوة مخبوزة داخل الـ SVG عبر  opacity='0.1'  في أول وسم <g>.
 *    لتخفيفها أو تقويتها بدّلي هذا الرقم وحده (يظهر مرة واحدة لكل توكن):
 *      0.05 أخفت  ·  0.16 أقوى  ·  0.22 أوضح ما يمكن بلا إزعاج للقراءة.
 *
 *  الحركة: النسيج ينزلق ببطء شديد (بلاطة كاملة كل ٧٥ ثانية) عبر
 *  mzPatternDrift في أسفل هذا الملف — انزلاق غير مرئي البداية عن النهاية.
 *  لتعطيل الحركة كليًا احذفي كتلة "النسيج المتحرك" أدناه.
 *  للتعطيل على قسم بعينه: أضيفي الكلاس  mz-plain  إلى ذلك القسم.
 *  ============================================================================ */

:root {
    /* نسيج ذهبي على الأرضية الزمردية — للأقسام الداكنة والفوتر */
    --mz-pattern-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='636' height='342' viewBox='0 0 636 342'%3E%3Cg opacity='0.1'%3E%3Cg transform='translate(36.4,15.9) scale(1.16)'%3E%3Cpath d='M83.6 60C109.3 34.2 85.8 10.7 60 36.4C34.2 10.7 10.7 34.2 36.4 60C10.7 85.8 34.2 109.3 60 83.6C85.8 109.3 109.3 85.8 83.6 60Z' fill='none' stroke='%23D9BC76' stroke-width='2.2' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Ccircle cx='60' cy='60' r='7.5' fill='%23D9BC76' fill-opacity='1.0'/%3E%3C/g%3E%3Cg transform='translate(248.4,15.9) scale(1.16)'%3E%3Cpath d='M71 26.1C71 18 49 18 49 26.1C44.2 19.5 26.4 32.5 31.1 39C23.4 36.5 16.6 57.5 24.3 60C16.6 62.5 23.4 83.5 31.1 81C26.4 87.5 44.2 100.5 49 93.9C49 102 71 102 71 93.9C75.8 100.5 93.6 87.5 88.9 81C96.6 83.5 103.4 62.5 95.7 60C103.4 57.5 96.6 36.5 88.9 39C93.6 32.5 75.8 19.5 71 26.1ZM33.8 60A26.2 26.2 0 1 0 86.2 60A26.2 26.2 0 1 0 33.8 60Z' fill='%23D9BC76' fill-rule='evenodd' fill-opacity='1.0'/%3E%3Cpath d='M60 40.6A19.4 19.4 0 1 0 60 79.4A19.4 19.4 0 1 0 60 40.6ZM60 53.1A6.9 6.9 0 1 0 60 66.9A6.9 6.9 0 1 0 60 53.1Z' fill='%23D9BC76' fill-rule='evenodd' fill-opacity='1.0'/%3E%3C/g%3E%3Cg transform='translate(460.4,15.9) scale(1.16)'%3E%3Cpath d='M60 116V16' fill='none' stroke='%23D9BC76' stroke-width='1.8' stroke-opacity='1.0'/%3E%3Cpath d='M60 4Q42 24 60 44Q78 24 60 4Z' fill='none' stroke='%23D9BC76' stroke-width='1.9' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 4L60 44' fill='none' stroke='%23D9BC76' stroke-width='1.5' stroke-opacity='1.0'/%3E%3Cpath d='M60 46Q58.3 20.6 33.2 25.1Q34.9 50.5 60 46Z' fill='none' stroke='%23D9BC76' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 46L33.2 25.1' fill='none' stroke='%23D9BC76' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 46Q85.1 50.5 86.8 25.1Q61.7 20.6 60 46Z' fill='none' stroke='%23D9BC76' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 46L86.8 25.1' fill='none' stroke='%23D9BC76' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 68Q58.3 42.6 33.2 47.1Q34.9 72.5 60 68Z' fill='none' stroke='%23D9BC76' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 68L33.2 47.1' fill='none' stroke='%23D9BC76' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 68Q85.1 72.5 86.8 47.1Q61.7 42.6 60 68Z' fill='none' stroke='%23D9BC76' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 68L86.8 47.1' fill='none' stroke='%23D9BC76' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 92Q38 80.4 30.3 104Q52.3 115.6 60 92Z' fill='none' stroke='%23D9BC76' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 92L30.3 104' fill='none' stroke='%23D9BC76' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 92Q67.7 115.6 89.7 104Q82 80.4 60 92Z' fill='none' stroke='%23D9BC76' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 92L89.7 104' fill='none' stroke='%23D9BC76' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Ccircle cx='20' cy='40' r='7.5' fill='%23D9BC76' fill-opacity='1.0'/%3E%3Ccircle cx='100' cy='40' r='7.5' fill='%23D9BC76' fill-opacity='1.0'/%3E%3C/g%3E%3Cg transform='translate(36.4,186.9) scale(1.16)'%3E%3Cpath d='M22 11L40 25L60 4L80 25L98 11C101 21 101 32 94 41C86 51 74 56 60 56C46 56 34 51 26 41C19 32 19 21 22 11Z' fill='none' stroke='%23D9BC76' stroke-width='2.2' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 56V112' fill='none' stroke='%23D9BC76' stroke-width='1.9' stroke-opacity='1.0'/%3E%3Cpath d='M60 76Q46.5 45.2 14 54Q27.5 84.8 60 76Z' fill='none' stroke='%23D9BC76' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 76L14 54' fill='none' stroke='%23D9BC76' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 76Q92.5 84.8 106 54Q73.5 45.2 60 76Z' fill='none' stroke='%23D9BC76' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 76L106 54' fill='none' stroke='%23D9BC76' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 100Q32.7 86.2 20 114Q47.3 127.8 60 100Z' fill='none' stroke='%23D9BC76' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 100L20 114' fill='none' stroke='%23D9BC76' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 100Q72.7 127.8 100 114Q87.3 86.2 60 100Z' fill='none' stroke='%23D9BC76' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 100L100 114' fill='none' stroke='%23D9BC76' stroke-width='1.4' stroke-opacity='1.0'/%3E%3C/g%3E%3Cg transform='translate(248.4,186.9) scale(1.16)'%3E%3Cpath d='M22 104Q81.7 84.7 98 24Q38.3 43.3 22 104Z' fill='none' stroke='%23D9BC76' stroke-width='2.2' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M22 104L98 24' fill='none' stroke='%23D9BC76' stroke-width='1.7' stroke-opacity='1.0'/%3E%3C/g%3E%3Cg transform='translate(460.4,186.9) scale(1.16)'%3E%3Ccircle cx='60' cy='60' r='26' fill='none' stroke='%23D9BC76' stroke-width='2.2' stroke-opacity='1.0'/%3E%3Cpath d='M60 48.6A11.4 11.4 0 1 0 60 71.4A11.4 11.4 0 1 0 60 48.6ZM60 57.4A2.6 2.6 0 1 0 60 62.6A2.6 2.6 0 1 0 60 57.4Z' fill='%23D9BC76' fill-rule='evenodd' fill-opacity='1.0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

    /* نسيج كريمي — للزمردي العميق حيث نريد تباينًا أعلى قليلًا */
    --mz-pattern-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='636' height='342' viewBox='0 0 636 342'%3E%3Cg opacity='0.08'%3E%3Cg transform='translate(36.4,15.9) scale(1.16)'%3E%3Cpath d='M83.6 60C109.3 34.2 85.8 10.7 60 36.4C34.2 10.7 10.7 34.2 36.4 60C10.7 85.8 34.2 109.3 60 83.6C85.8 109.3 109.3 85.8 83.6 60Z' fill='none' stroke='%23F2E2B4' stroke-width='2.2' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Ccircle cx='60' cy='60' r='7.5' fill='%23F2E2B4' fill-opacity='1.0'/%3E%3C/g%3E%3Cg transform='translate(248.4,15.9) scale(1.16)'%3E%3Cpath d='M71 26.1C71 18 49 18 49 26.1C44.2 19.5 26.4 32.5 31.1 39C23.4 36.5 16.6 57.5 24.3 60C16.6 62.5 23.4 83.5 31.1 81C26.4 87.5 44.2 100.5 49 93.9C49 102 71 102 71 93.9C75.8 100.5 93.6 87.5 88.9 81C96.6 83.5 103.4 62.5 95.7 60C103.4 57.5 96.6 36.5 88.9 39C93.6 32.5 75.8 19.5 71 26.1ZM33.8 60A26.2 26.2 0 1 0 86.2 60A26.2 26.2 0 1 0 33.8 60Z' fill='%23F2E2B4' fill-rule='evenodd' fill-opacity='1.0'/%3E%3Cpath d='M60 40.6A19.4 19.4 0 1 0 60 79.4A19.4 19.4 0 1 0 60 40.6ZM60 53.1A6.9 6.9 0 1 0 60 66.9A6.9 6.9 0 1 0 60 53.1Z' fill='%23F2E2B4' fill-rule='evenodd' fill-opacity='1.0'/%3E%3C/g%3E%3Cg transform='translate(460.4,15.9) scale(1.16)'%3E%3Cpath d='M60 116V16' fill='none' stroke='%23F2E2B4' stroke-width='1.8' stroke-opacity='1.0'/%3E%3Cpath d='M60 4Q42 24 60 44Q78 24 60 4Z' fill='none' stroke='%23F2E2B4' stroke-width='1.9' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 4L60 44' fill='none' stroke='%23F2E2B4' stroke-width='1.5' stroke-opacity='1.0'/%3E%3Cpath d='M60 46Q58.3 20.6 33.2 25.1Q34.9 50.5 60 46Z' fill='none' stroke='%23F2E2B4' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 46L33.2 25.1' fill='none' stroke='%23F2E2B4' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 46Q85.1 50.5 86.8 25.1Q61.7 20.6 60 46Z' fill='none' stroke='%23F2E2B4' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 46L86.8 25.1' fill='none' stroke='%23F2E2B4' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 68Q58.3 42.6 33.2 47.1Q34.9 72.5 60 68Z' fill='none' stroke='%23F2E2B4' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 68L33.2 47.1' fill='none' stroke='%23F2E2B4' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 68Q85.1 72.5 86.8 47.1Q61.7 42.6 60 68Z' fill='none' stroke='%23F2E2B4' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 68L86.8 47.1' fill='none' stroke='%23F2E2B4' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 92Q38 80.4 30.3 104Q52.3 115.6 60 92Z' fill='none' stroke='%23F2E2B4' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 92L30.3 104' fill='none' stroke='%23F2E2B4' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 92Q67.7 115.6 89.7 104Q82 80.4 60 92Z' fill='none' stroke='%23F2E2B4' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 92L89.7 104' fill='none' stroke='%23F2E2B4' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Ccircle cx='20' cy='40' r='7.5' fill='%23F2E2B4' fill-opacity='1.0'/%3E%3Ccircle cx='100' cy='40' r='7.5' fill='%23F2E2B4' fill-opacity='1.0'/%3E%3C/g%3E%3Cg transform='translate(36.4,186.9) scale(1.16)'%3E%3Cpath d='M22 11L40 25L60 4L80 25L98 11C101 21 101 32 94 41C86 51 74 56 60 56C46 56 34 51 26 41C19 32 19 21 22 11Z' fill='none' stroke='%23F2E2B4' stroke-width='2.2' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 56V112' fill='none' stroke='%23F2E2B4' stroke-width='1.9' stroke-opacity='1.0'/%3E%3Cpath d='M60 76Q46.5 45.2 14 54Q27.5 84.8 60 76Z' fill='none' stroke='%23F2E2B4' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 76L14 54' fill='none' stroke='%23F2E2B4' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 76Q92.5 84.8 106 54Q73.5 45.2 60 76Z' fill='none' stroke='%23F2E2B4' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 76L106 54' fill='none' stroke='%23F2E2B4' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 100Q32.7 86.2 20 114Q47.3 127.8 60 100Z' fill='none' stroke='%23F2E2B4' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 100L20 114' fill='none' stroke='%23F2E2B4' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 100Q72.7 127.8 100 114Q87.3 86.2 60 100Z' fill='none' stroke='%23F2E2B4' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 100L100 114' fill='none' stroke='%23F2E2B4' stroke-width='1.4' stroke-opacity='1.0'/%3E%3C/g%3E%3Cg transform='translate(248.4,186.9) scale(1.16)'%3E%3Cpath d='M22 104Q81.7 84.7 98 24Q38.3 43.3 22 104Z' fill='none' stroke='%23F2E2B4' stroke-width='2.2' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M22 104L98 24' fill='none' stroke='%23F2E2B4' stroke-width='1.7' stroke-opacity='1.0'/%3E%3C/g%3E%3Cg transform='translate(460.4,186.9) scale(1.16)'%3E%3Ccircle cx='60' cy='60' r='26' fill='none' stroke='%23F2E2B4' stroke-width='2.2' stroke-opacity='1.0'/%3E%3Cpath d='M60 48.6A11.4 11.4 0 1 0 60 71.4A11.4 11.4 0 1 0 60 48.6ZM60 57.4A2.6 2.6 0 1 0 60 62.6A2.6 2.6 0 1 0 60 57.4Z' fill='%23F2E2B4' fill-rule='evenodd' fill-opacity='1.0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

    /* نسيج زيتوني — للأقسام الفاتحة (ورقي · رملي) */
    --mz-pattern-olive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='636' height='342' viewBox='0 0 636 342'%3E%3Cg opacity='0.07'%3E%3Cg transform='translate(36.4,15.9) scale(1.16)'%3E%3Cpath d='M83.6 60C109.3 34.2 85.8 10.7 60 36.4C34.2 10.7 10.7 34.2 36.4 60C10.7 85.8 34.2 109.3 60 83.6C85.8 109.3 109.3 85.8 83.6 60Z' fill='none' stroke='%234B671B' stroke-width='2.2' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Ccircle cx='60' cy='60' r='7.5' fill='%234B671B' fill-opacity='1.0'/%3E%3C/g%3E%3Cg transform='translate(248.4,15.9) scale(1.16)'%3E%3Cpath d='M71 26.1C71 18 49 18 49 26.1C44.2 19.5 26.4 32.5 31.1 39C23.4 36.5 16.6 57.5 24.3 60C16.6 62.5 23.4 83.5 31.1 81C26.4 87.5 44.2 100.5 49 93.9C49 102 71 102 71 93.9C75.8 100.5 93.6 87.5 88.9 81C96.6 83.5 103.4 62.5 95.7 60C103.4 57.5 96.6 36.5 88.9 39C93.6 32.5 75.8 19.5 71 26.1ZM33.8 60A26.2 26.2 0 1 0 86.2 60A26.2 26.2 0 1 0 33.8 60Z' fill='%234B671B' fill-rule='evenodd' fill-opacity='1.0'/%3E%3Cpath d='M60 40.6A19.4 19.4 0 1 0 60 79.4A19.4 19.4 0 1 0 60 40.6ZM60 53.1A6.9 6.9 0 1 0 60 66.9A6.9 6.9 0 1 0 60 53.1Z' fill='%234B671B' fill-rule='evenodd' fill-opacity='1.0'/%3E%3C/g%3E%3Cg transform='translate(460.4,15.9) scale(1.16)'%3E%3Cpath d='M60 116V16' fill='none' stroke='%234B671B' stroke-width='1.8' stroke-opacity='1.0'/%3E%3Cpath d='M60 4Q42 24 60 44Q78 24 60 4Z' fill='none' stroke='%234B671B' stroke-width='1.9' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 4L60 44' fill='none' stroke='%234B671B' stroke-width='1.5' stroke-opacity='1.0'/%3E%3Cpath d='M60 46Q58.3 20.6 33.2 25.1Q34.9 50.5 60 46Z' fill='none' stroke='%234B671B' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 46L33.2 25.1' fill='none' stroke='%234B671B' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 46Q85.1 50.5 86.8 25.1Q61.7 20.6 60 46Z' fill='none' stroke='%234B671B' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 46L86.8 25.1' fill='none' stroke='%234B671B' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 68Q58.3 42.6 33.2 47.1Q34.9 72.5 60 68Z' fill='none' stroke='%234B671B' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 68L33.2 47.1' fill='none' stroke='%234B671B' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 68Q85.1 72.5 86.8 47.1Q61.7 42.6 60 68Z' fill='none' stroke='%234B671B' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 68L86.8 47.1' fill='none' stroke='%234B671B' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 92Q38 80.4 30.3 104Q52.3 115.6 60 92Z' fill='none' stroke='%234B671B' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 92L30.3 104' fill='none' stroke='%234B671B' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 92Q67.7 115.6 89.7 104Q82 80.4 60 92Z' fill='none' stroke='%234B671B' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 92L89.7 104' fill='none' stroke='%234B671B' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Ccircle cx='20' cy='40' r='7.5' fill='%234B671B' fill-opacity='1.0'/%3E%3Ccircle cx='100' cy='40' r='7.5' fill='%234B671B' fill-opacity='1.0'/%3E%3C/g%3E%3Cg transform='translate(36.4,186.9) scale(1.16)'%3E%3Cpath d='M22 11L40 25L60 4L80 25L98 11C101 21 101 32 94 41C86 51 74 56 60 56C46 56 34 51 26 41C19 32 19 21 22 11Z' fill='none' stroke='%234B671B' stroke-width='2.2' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 56V112' fill='none' stroke='%234B671B' stroke-width='1.9' stroke-opacity='1.0'/%3E%3Cpath d='M60 76Q46.5 45.2 14 54Q27.5 84.8 60 76Z' fill='none' stroke='%234B671B' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 76L14 54' fill='none' stroke='%234B671B' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 76Q92.5 84.8 106 54Q73.5 45.2 60 76Z' fill='none' stroke='%234B671B' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 76L106 54' fill='none' stroke='%234B671B' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 100Q32.7 86.2 20 114Q47.3 127.8 60 100Z' fill='none' stroke='%234B671B' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 100L20 114' fill='none' stroke='%234B671B' stroke-width='1.4' stroke-opacity='1.0'/%3E%3Cpath d='M60 100Q72.7 127.8 100 114Q87.3 86.2 60 100Z' fill='none' stroke='%234B671B' stroke-width='1.8' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M60 100L100 114' fill='none' stroke='%234B671B' stroke-width='1.4' stroke-opacity='1.0'/%3E%3C/g%3E%3Cg transform='translate(248.4,186.9) scale(1.16)'%3E%3Cpath d='M22 104Q81.7 84.7 98 24Q38.3 43.3 22 104Z' fill='none' stroke='%234B671B' stroke-width='2.2' stroke-linejoin='round' stroke-opacity='1.0'/%3E%3Cpath d='M22 104L98 24' fill='none' stroke='%234B671B' stroke-width='1.7' stroke-opacity='1.0'/%3E%3C/g%3E%3Cg transform='translate(460.4,186.9) scale(1.16)'%3E%3Ccircle cx='60' cy='60' r='26' fill='none' stroke='%234B671B' stroke-width='2.2' stroke-opacity='1.0'/%3E%3Cpath d='M60 48.6A11.4 11.4 0 1 0 60 71.4A11.4 11.4 0 1 0 60 48.6ZM60 57.4A2.6 2.6 0 1 0 60 62.6A2.6 2.6 0 1 0 60 57.4Z' fill='%234B671B' fill-rule='evenodd' fill-opacity='1.0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

    /* مقاس البلاطة — يُستهلك في background-size */
    --mz-pattern-size: 636px 342px;
    --mz-pattern-size-sm: 318px 171px;
}

/* ---- ١) الأقسام الفاتحة: نسيج زيتوني خفيف على الورقي والرملي ---------- */
.mz-sec--paper,
.mz-sec--sand {
    background-image: var(--mz-pattern-olive);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: var(--mz-pattern-size);
}

/* ---- ٢) الأقسام الزمردية: نسيج ذهبي -------------------------------- */
.mz-sec--green {
    background-image: var(--mz-pattern-gold);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: var(--mz-pattern-size);
}

/* ---- ٣) الهيرو: النسيج يمتد تحت شريطَي الحافة الذهبيين ----------------
 *  الهيرو المصوّر (.mz-hero--media) مستثنى: صورته وحجابه يغطّيان الخلفية */
.mz-hero:not(.mz-hero--media) {
    background-image: var(--mz-pattern-gold);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: var(--mz-pattern-size);
}

/* ---- ٤) النداء الأخير: نستبدل شريط الحافة القديم بالنسيج الكامل ------
 *  كان ::before يحمل --mz-band-gold بمقاس 160×64 عند شفافية 0.07 */
.mz-final::before {
    background-image: var(--mz-pattern-gold);
    background-size: var(--mz-pattern-size);
    opacity: 1;
}

/* ---- ٥) الفوتر: أرض زمردية بنسيج نباتي ------------------------------
 *  !important لازمة لأن قاعدة الفوتر تستعمل background المختصرة بـ !important */
footer,
.store-footer,
.footer-wrapper,
.s-footer {
    background-image: var(--mz-pattern-gold) !important;
    background-repeat: repeat !important;
    background-position: 0 0 !important;
    background-size: var(--mz-pattern-size) !important;
}

/* ---- ٦) الجوال: نصف مقاس البلاطة ------------------------------------
 *  عند ٦٣٦ بكسل على شاشة ٣٩٠ تقع بلاطة واحدة فقط ⇒ تبدو الزخرفة كرسمة
 *  كبيرة لا كنَسيج. النصف (٣١٨×١٧١) يعطي ١٫٢ بلاطة في العرض فتتكرّر
 *  العين النمط فعلًا، وموتيفة الواحدة ١٠٦ بكسل ⇒ مقروءة بلا إزعاج. */
@media (max-width: 560px) {
    :root { --mz-pattern-size: var(--mz-pattern-size-sm); }
}

/* ---- ٦-ب) حركة انسيابية هادئة للنسيج ----------------------------------
 *  انزلاق بطيء جدًا (بلاطة كاملة كل ٧٥ ثانية) يعطي إحساس "تنفّس" نباتي
 *  دون تشتيت. الخطوة تساوي البلاطة نفسها ⇒ التكرار غير مرئي (seamless):
 *  تنتهي الحركة على إطار مطابق تمامًا لإطار البداية.
 *  ملاحظة الجوال: البلاطة المعروضة نصف المقاس عبر background-size، لذا
 *  خطوة الـ ٦٣٦ بكسل (بلاطتان مصغّرتان) تطابق النمط تمامًا أيضًا.
 *  القيم في الـ keyframes صريحة بالبكسل عمدًا — var() داخل to لا يُستكمل
 *  (interpolate) بموثوقية في Chrome فيُجمّد الحركة.
 *  ملاحظة أداء: نحرّك background-position فقط على طبقة زخرفة data-URI،
 *  والعناصر النصية فوقها لا تتأثر — والتكلفة أقل من إعادة رسم transform. */
@keyframes mzPatternDrift {
    from { background-position: 0 0; }
    to   { background-position: 636px 342px; }
}

.mz-sec--paper,
.mz-sec--sand,
.mz-sec--green,
.mz-hero:not(.mz-hero--media) {
    animation: mzPatternDrift 75s linear infinite;
    will-change: background-position;
}

/* الفوتر وطبقة ::before للنداء الأخير: نفس الحركة على الطبقات الزخرفية */
footer,
.store-footer,
.footer-wrapper,
.s-footer {
    animation: mzPatternDrift 75s linear infinite;
}

.mz-final::before {
    animation: mzPatternDrift 75s linear infinite;
}

/* تقليل الحركة: النسيج يتجمّد — القاعدة العامة أسفل الملف تعالج معظم
 *  الحالات، وهذه تحصين إضافي خاص بالتوكنز الجديدة */
@media (prefers-reduced-motion: reduce) {
    .mz-sec--paper,
    .mz-sec--sand,
    .mz-sec--green,
    .mz-hero:not(.mz-hero--media),
    footer,
    .store-footer,
    .footer-wrapper,
    .s-footer,
    .mz-final::before {
        animation: none !important;
    }
}

/* ---- ٧) باب خروج: تعطيل الزخرفة على قسم بعينه ----------------------- */
.mz-plain { background-image: none !important; }


/* إخفاء زر واتساب العائم فقط — يغطي أكثر السيلكتورات شيوعًا في تطبيقات سلة.
 *  الزر المضافة في الفوتر (.mz-wa-foot) مستثنى صراحةً بـ :not(.mz-wa-foot)
 *  فلا تلمسه هذه القاعدة إطلاقًا. */
.floating-whatsapp,
#floating-whatsapp,
.whatsapp-float,
.whatsapp-floating,
.whatsapp-button,
.wp-whatsapp-button,
.float-whatsapp-button,
#whatsapp-btn,
#whatsapp-float,
a[href*="wa.me"]:not(.mz-wa-foot),
a[href*="api.whatsapp.com"]:not(.mz-wa-foot),
salla-whatsapp,
.s-whatsapp-button,
.chat-whatsapp,
[class*="whatsapp-icon"],
[id*="whatsapp"] {
    display: none !important;
}