/* ================================================================
   MANAFIZ SWEETS — Global CSS
   Paste this ENTIRE file into:
   Salla Dashboard > تصميم المتجر > CSS مخصص
   ================================================================ */

/* ── SALLA SCROLL FIX (must be first, unscoped) ── */
html, body, #app, .s-layout, .s-layout__content, .s-content-area {
    overflow: visible !important;
    height: auto !important;
    min-height: unset !important;
}
html { overflow-y: scroll !important; }

/* ── FONT IMPORT (once, globally) ── */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

/* ================================================================
   CSS CUSTOM PROPERTIES  —  8-point grid · WCAG AA · brand tokens
   ================================================================ */
:root {
    /* Brand colours */
    --mnf-pink:         #E91A8C;
    --mnf-pink-hover:   #CC1279;
    --mnf-pink-light:   #FF6EC7;
    --mnf-pink-50:      #FFF0F8;
    --mnf-pink-100:     #FFD6EE;
    --mnf-pink-200:     #FFB3DE;
    --mnf-purple:       #2D1B8D;
    --mnf-purple-hover: #231575;
    --mnf-purple-light: #6C5CE7;
    --mnf-purple-50:    #F0EEFF;
    --mnf-purple-100:   #D4CCFF;
    --mnf-gold:         #F59E0B;
    --mnf-green:        #10B981;
    --mnf-red:          #EF4444;

    /* Neutrals */
    --mnf-gray-50:  #F9FAFB;
    --mnf-gray-100: #F3F4F6;
    --mnf-gray-200: #E5E7EB;
    --mnf-gray-300: #D1D5DB;
    --mnf-gray-400: #9CA3AF;
    --mnf-gray-500: #6B7280;
    --mnf-gray-600: #4B5563;
    --mnf-gray-700: #374151;
    --mnf-gray-800: #1F2937;
    --mnf-gray-900: #111827;
    --mnf-white:    #FFFFFF;
    --mnf-surface:  #FFFAF9;

    /* 8-point spacing grid */
    --mnf-sp-1:   8px;
    --mnf-sp-2:   16px;
    --mnf-sp-3:   24px;
    --mnf-sp-4:   32px;
    --mnf-sp-5:   40px;
    --mnf-sp-6:   48px;
    --mnf-sp-7:   56px;
    --mnf-sp-8:   64px;
    --mnf-sp-10:  80px;
    --mnf-sp-12:  96px;

    /* Typography scale */
    --mnf-text-xs:   12px;
    --mnf-text-sm:   14px;
    --mnf-text-base: 16px;
    --mnf-text-lg:   18px;
    --mnf-text-xl:   20px;
    --mnf-text-2xl:  24px;
    --mnf-text-3xl:  30px;
    --mnf-text-4xl:  36px;
    --mnf-text-5xl:  48px;
    --mnf-text-6xl:  60px;

    /* Elevation system */
    --mnf-shadow-1:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --mnf-shadow-2:      0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
    --mnf-shadow-3:      0 10px 30px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
    --mnf-shadow-xl:     0 20px 50px rgba(0,0,0,.10), 0 8px 16px rgba(0,0,0,.06);
    --mnf-shadow-pink-1: 0 4px 15px rgba(233,26,140,.15);
    --mnf-shadow-pink-2: 0 8px 28px rgba(233,26,140,.24);
    --mnf-shadow-pink-3: 0 16px 44px rgba(233,26,140,.34);

    /* Border radii */
    --mnf-radius-sm:   8px;
    --mnf-radius-md:   16px;
    --mnf-radius-lg:   24px;
    --mnf-radius-xl:   32px;
    --mnf-radius-full: 9999px;

    /* Motion (Doherty threshold <400ms) */
    --mnf-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --mnf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --mnf-dur:         300ms;
    --mnf-dur-sm:      180ms;
    --mnf-dur-lg:      500ms;
}

/* ================================================================
   KEYFRAME ANIMATIONS
   ================================================================ */

@keyframes bFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-24px) scale(1.04); }
}

@keyframes candyRise {
    0%   { transform: translateY(105vh) rotate(0deg); opacity: 0; }
    8%   { opacity: .5; }
    92%  { opacity: .5; }
    100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-16px) rotate(.6deg); }
}

@keyframes eyebrowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233,26,140,.4); }
    50%       { box-shadow: 0 0 0 12px rgba(233,26,140,0); }
}

@keyframes tagBob {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-9px); }
}

@keyframes dotBounce {
    0%, 80%, 100% { transform: scale(.55); opacity: .4; }
    40%            { transform: scale(1.3); opacity: 1; }
}

@keyframes cardPop {
    from { transform: scale(.72) translateY(28px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-9px); }
}

@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
    50%       { opacity: .7; box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}

@keyframes waPulse {
    0%, 100% { box-shadow: 0 8px 28px rgba(37,211,102,.44); }
    50%       { box-shadow: 0 8px 44px rgba(37,211,102,.72); }
}

@keyframes fadein {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes mnfLoaderBg {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Respect user motion preferences (WCAG 2.1 AAA) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ================================================================
   SCROLLBAR
   ================================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--mnf-gray-100); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--mnf-pink), var(--mnf-purple));
    border-radius: var(--mnf-radius-full);
}

/* ================================================================
   BASE BLOCK WRAPPER
   All blocks share this base — direction and font set here once
   ================================================================ */
.mnf-block {
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
.mnf-block *, .mnf-block *::before, .mnf-block *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.mnf-block img { display: block; max-width: 100%; }

/* ================================================================
   FADE-UP ANIMATION SYSTEM  (.mnf-fu + .mnf-vis)
   ================================================================ */
.mnf-fu {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s var(--mnf-ease), transform .6s var(--mnf-ease);
}
.mnf-fu.mnf-vis { opacity: 1; transform: translateY(0); }
.mnf-fu:nth-child(1)  { transition-delay: .00s; }
.mnf-fu:nth-child(2)  { transition-delay: .06s; }
.mnf-fu:nth-child(3)  { transition-delay: .12s; }
.mnf-fu:nth-child(4)  { transition-delay: .18s; }
.mnf-fu:nth-child(5)  { transition-delay: .24s; }
.mnf-fu:nth-child(6)  { transition-delay: .30s; }
.mnf-fu:nth-child(7)  { transition-delay: .36s; }
.mnf-fu:nth-child(8)  { transition-delay: .42s; }
.mnf-fu:nth-child(9)  { transition-delay: .48s; }
.mnf-fu:nth-child(10) { transition-delay: .54s; }

/* ================================================================
   BUTTON SYSTEM
   ================================================================ */
.mnf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mnf-sp-1);
    min-height: 52px;
    padding: 0 var(--mnf-sp-4);
    border-radius: var(--mnf-radius-full);
    border: none;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-size: var(--mnf-text-base);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform var(--mnf-dur) var(--mnf-ease),
        box-shadow var(--mnf-dur) var(--mnf-ease),
        background var(--mnf-dur) var(--mnf-ease);
}
.mnf-btn:focus-visible {
    outline: 3px solid var(--mnf-pink);
    outline-offset: 3px;
}
.mnf-btn-primary {
    background: linear-gradient(135deg, var(--mnf-pink), var(--mnf-purple));
    color: var(--mnf-white);
    box-shadow: var(--mnf-shadow-pink-2);
}
.mnf-btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: var(--mnf-shadow-pink-3);
    color: var(--mnf-white);
    text-decoration: none;
}
.mnf-btn-primary:active { transform: translateY(-1px); }

.mnf-btn-outline {
    background: var(--mnf-white);
    color: var(--mnf-pink);
    border: 2.5px solid var(--mnf-pink);
}
.mnf-btn-outline:hover {
    background: var(--mnf-pink-50);
    transform: translateY(-4px);
    color: var(--mnf-pink);
    text-decoration: none;
}

.mnf-btn-white {
    background: var(--mnf-white);
    color: var(--mnf-purple);
    box-shadow: var(--mnf-shadow-xl);
}
.mnf-btn-white:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,.22);
    color: var(--mnf-purple);
    text-decoration: none;
}

/* ================================================================
   BADGE SYSTEM
   ================================================================ */
.mnf-badge {
    padding: 4px 12px;
    border-radius: var(--mnf-radius-full);
    font-size: var(--mnf-text-xs);
    font-weight: 700;
    color: var(--mnf-white);
    font-family: 'Cairo', sans-serif;
}
.mnf-b-new  { background: linear-gradient(135deg, #00C9FF, #0066FF); }
.mnf-b-hot  { background: linear-gradient(135deg, var(--mnf-pink), var(--mnf-purple)); }
.mnf-b-sale { background: linear-gradient(135deg, #FF6B6B, #EF4444); }

/* ================================================================
   SECTION SYSTEM
   ================================================================ */
.mnf-sec {
    padding: var(--mnf-sp-10) 5%;
}
.mnf-sec-inner {
    max-width: 1400px;
    margin: 0 auto;
}
.mnf-sec-head {
    text-align: center;
    margin-bottom: var(--mnf-sp-8);
}
.mnf-sec-eyebrow {
    display: inline-block;
    background: linear-gradient(135deg, var(--mnf-pink-50), var(--mnf-purple-50));
    color: var(--mnf-pink);
    padding: 5px var(--mnf-sp-2);
    border-radius: var(--mnf-radius-full);
    font-size: var(--mnf-text-sm);
    font-weight: 700;
    margin-bottom: var(--mnf-sp-2);
    border: 1px solid var(--mnf-pink-200);
    font-family: 'Cairo', sans-serif;
}
.mnf-sec-title {
    font-size: clamp(var(--mnf-text-3xl), 3.5vw, var(--mnf-text-5xl));
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: var(--mnf-sp-2);
    color: var(--mnf-gray-900);
    font-family: 'Cairo', sans-serif;
}
.mnf-sec-title .mnf-gt {
    background: linear-gradient(135deg, var(--mnf-pink), var(--mnf-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mnf-sec-sub {
    font-size: var(--mnf-text-base);
    color: var(--mnf-gray-400);
    font-weight: 400;
    line-height: 1.7;
    font-family: 'Cairo', sans-serif;
}
.mnf-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mnf-sp-1);
    margin-top: var(--mnf-sp-2);
}
.mnf-div-line {
    width: 64px;
    height: 3px;
    background: linear-gradient(135deg, var(--mnf-pink), var(--mnf-purple));
    border-radius: var(--mnf-radius-full);
}
.mnf-div-dot {
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, var(--mnf-pink), var(--mnf-purple));
    border-radius: 50%;
}
.mnf-sec-foot { text-align: center; margin-top: var(--mnf-sp-7); }

/* ================================================================
   TOP BAR
   ================================================================ */
.mnf-topbar {
    background: linear-gradient(135deg, var(--mnf-purple) 0%, var(--mnf-pink) 100%);
    color: var(--mnf-white);
    text-align: center;
    padding: 10px var(--mnf-sp-3);
    font-size: var(--mnf-text-sm);
    font-weight: 600;
    letter-spacing: .3px;
    font-family: 'Cairo', sans-serif;
    direction: rtl;
}

/* ================================================================
   TRUST BAR
   ================================================================ */
.mnf-trust-bar {
    background: var(--mnf-white);
    border-top: 3px solid transparent;
    border-image: linear-gradient(135deg, var(--mnf-pink), var(--mnf-purple)) 1;
    padding: var(--mnf-sp-3) 5%;
    box-shadow: 0 4px 20px rgba(0,0,0,.04);
}
.mnf-trust-inner {
    display: flex;
    justify-content: center;
    gap: var(--mnf-sp-8);
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}
.mnf-trust-item {
    display: flex;
    align-items: center;
    gap: var(--mnf-sp-2);
}
.mnf-trust-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: var(--mnf-radius-md);
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--mnf-pink-50), var(--mnf-purple-50));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: var(--mnf-shadow-1);
}
.mnf-trust-label strong {
    display: block;
    font-size: var(--mnf-text-sm);
    font-weight: 700;
    color: var(--mnf-gray-900);
    font-family: 'Cairo', sans-serif;
}
.mnf-trust-label span {
    font-size: var(--mnf-text-xs);
    color: var(--mnf-gray-400);
    font-family: 'Cairo', sans-serif;
}

/* ================================================================
   HERO SECTION
   ================================================================ */
.mnf-hero {
    min-height: 90vh;
    background: linear-gradient(150deg, var(--mnf-pink-50) 0%, var(--mnf-purple-50) 55%, var(--mnf-pink-50) 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.mnf-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(233,26,140,.06) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(45,27,141,.08) 0%, transparent 60%);
    pointer-events: none;
}
.mnf-hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    opacity: .12;
}
.mnf-blob1 {
    width: 640px; height: 640px;
    background: var(--mnf-pink);
    top: -180px; left: -180px;
    animation: bFloat 11s ease-in-out infinite;
}
.mnf-blob2 {
    width: 480px; height: 480px;
    background: var(--mnf-purple);
    bottom: -160px; right: -120px;
    animation: bFloat 14s ease-in-out infinite reverse;
}
.mnf-blob3 {
    width: 300px; height: 300px;
    background: var(--mnf-pink-light);
    top: 35%; right: 28%;
    animation: bFloat 8s ease-in-out infinite;
}
.mnf-candy {
    position: absolute;
    pointer-events: none;
    opacity: .5;
    animation: candyRise linear infinite;
}
.mnf-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--mnf-sp-10);
    padding: var(--mnf-sp-10) 5%;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 2;
}
.mnf-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--mnf-sp-1);
    background: linear-gradient(135deg, var(--mnf-pink), var(--mnf-purple));
    color: var(--mnf-white);
    padding: 7px var(--mnf-sp-2);
    border-radius: var(--mnf-radius-full);
    font-size: var(--mnf-text-sm);
    font-weight: 700;
    margin-bottom: var(--mnf-sp-3);
    box-shadow: var(--mnf-shadow-pink-1);
    animation: eyebrowPulse 2.8s ease-in-out infinite;
    font-family: 'Cairo', sans-serif;
}
.mnf-hero-title {
    font-size: clamp(2.8rem, 5.5vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--mnf-sp-3);
    color: var(--mnf-gray-900);
    font-family: 'Cairo', sans-serif;
}
.mnf-hero-title .mnf-gradient-text {
    background: linear-gradient(135deg, var(--mnf-pink) 0%, var(--mnf-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mnf-hero-title .mnf-outline-text {
    -webkit-text-stroke: 2px var(--mnf-pink);
    -webkit-text-fill-color: transparent;
}
.mnf-hero-body {
    font-size: var(--mnf-text-lg);
    color: var(--mnf-gray-500);
    line-height: 1.75;
    margin-bottom: var(--mnf-sp-5);
    font-weight: 400;
    max-width: 50ch;
    font-family: 'Cairo', sans-serif;
}
.mnf-hero-ctas {
    display: flex;
    gap: var(--mnf-sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--mnf-sp-6);
}
.mnf-hero-stats {
    display: flex;
    gap: var(--mnf-sp-5);
}
.mnf-stat { position: relative; }
.mnf-stat::after {
    content: '';
    position: absolute;
    left: calc(-1 * var(--mnf-sp-3));
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--mnf-gray-200);
}
.mnf-stat:first-child::after { display: none; }
.mnf-stat-num {
    font-size: var(--mnf-text-3xl);
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--mnf-pink), var(--mnf-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Cairo', sans-serif;
}
.mnf-stat-label {
    font-size: var(--mnf-text-xs);
    color: var(--mnf-gray-400);
    font-weight: 500;
    margin-top: 3px;
    font-family: 'Cairo', sans-serif;
}
.mnf-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mnf-hero-card-wrap {
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1;
    border-radius: var(--mnf-radius-xl);
    overflow: visible;
    position: relative;
    animation: heroFloat 5.5s ease-in-out infinite;
}
.mnf-hero-card-inner {
    width: 100%;
    height: 100%;
    border-radius: var(--mnf-radius-xl);
    background: linear-gradient(135deg, var(--mnf-pink-100), var(--mnf-purple-100));
    box-shadow: var(--mnf-shadow-pink-3), 0 0 0 1px rgba(255,255,255,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8rem;
    flex-wrap: wrap;
    gap: var(--mnf-sp-2);
    padding: var(--mnf-sp-5);
    overflow: hidden;
    position: relative;
}
.mnf-hero-card-inner::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(233,26,140,.3), transparent);
    top: -50px;
    right: -50px;
    pointer-events: none;
}
.mnf-float-tag {
    position: absolute;
    background: var(--mnf-white);
    border-radius: var(--mnf-radius-md);
    padding: var(--mnf-sp-2);
    box-shadow: var(--mnf-shadow-3);
    display: flex;
    align-items: center;
    gap: var(--mnf-sp-1);
    font-size: var(--mnf-text-sm);
    font-weight: 700;
    color: var(--mnf-gray-900);
    white-space: nowrap;
    border: 1px solid var(--mnf-gray-100);
    font-family: 'Cairo', sans-serif;
}
.mnf-ft1 { top: 2%; right: -10%; animation: tagBob 4.2s ease-in-out infinite; }
.mnf-ft2 { bottom: 6%; left: -10%; animation: tagBob 4.2s ease-in-out infinite .9s; }
.mnf-ft3 { top: 46%; right: -16%; animation: tagBob 4.2s ease-in-out infinite 1.8s; }
.mnf-tag-pip {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mnf-pink);
    flex-shrink: 0;
}

/* ================================================================
   CATEGORY CARDS
   ================================================================ */
.mnf-cats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--mnf-sp-3);
}
.mnf-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mnf-sp-2);
    padding: var(--mnf-sp-4) var(--mnf-sp-2);
    background: var(--mnf-white);
    border-radius: var(--mnf-radius-lg);
    text-decoration: none;
    color: var(--mnf-gray-900);
    border: 1.5px solid var(--mnf-gray-100);
    transition:
        transform var(--mnf-dur) var(--mnf-ease),
        box-shadow var(--mnf-dur) var(--mnf-ease),
        border-color var(--mnf-dur) var(--mnf-ease);
    position: relative;
    overflow: hidden;
    font-family: 'Cairo', sans-serif;
}
.mnf-cat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--mnf-pink-50), var(--mnf-purple-50));
    opacity: 0;
    transition: opacity var(--mnf-dur) var(--mnf-ease);
}
.mnf-cat-card:hover {
    border-color: var(--mnf-pink);
    transform: translateY(-10px);
    box-shadow: var(--mnf-shadow-pink-2);
    text-decoration: none;
    color: var(--mnf-gray-900);
}
.mnf-cat-card:hover::after { opacity: 1; }
.mnf-cat-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mnf-pink-50), var(--mnf-purple-50));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    transition: all var(--mnf-dur) var(--mnf-ease);
    position: relative;
    z-index: 1;
    box-shadow: var(--mnf-shadow-1);
}
.mnf-cat-card:hover .mnf-cat-icon-wrap {
    background: linear-gradient(135deg, var(--mnf-pink), var(--mnf-purple));
    transform: scale(1.12) rotate(-5deg);
    box-shadow: var(--mnf-shadow-pink-2);
}
.mnf-cat-name {
    font-size: var(--mnf-text-sm);
    font-weight: 700;
    text-align: center;
    position: relative;
    z-index: 1;
    color: var(--mnf-gray-800);
    font-family: 'Cairo', sans-serif;
}
.mnf-cat-cnt {
    font-size: var(--mnf-text-xs);
    color: var(--mnf-gray-400);
    position: relative;
    z-index: 1;
    font-family: 'Cairo', sans-serif;
}

/* ================================================================
   PRODUCT CARDS
   ================================================================ */
.mnf-prods-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mnf-sp-3);
}
.mnf-prod-card {
    background: var(--mnf-white);
    border-radius: var(--mnf-radius-lg);
    overflow: hidden;
    position: relative;
    border: 1.5px solid var(--mnf-gray-100);
    transition:
        transform var(--mnf-dur) var(--mnf-ease),
        box-shadow var(--mnf-dur) var(--mnf-ease),
        border-color var(--mnf-dur) var(--mnf-ease);
    cursor: pointer;
    box-shadow: var(--mnf-shadow-1);
    font-family: 'Cairo', sans-serif;
}
.mnf-prod-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--mnf-shadow-pink-2);
    border-color: var(--mnf-pink-200);
}
.mnf-prod-badges {
    position: absolute;
    top: var(--mnf-sp-2);
    right: var(--mnf-sp-2);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
}
.mnf-prod-img-wrap {
    height: 200px;
    background: linear-gradient(135deg, var(--mnf-pink-50), var(--mnf-purple-50));
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mnf-prod-emoji {
    font-size: 5rem;
    transition: transform var(--mnf-dur) var(--mnf-ease);
    will-change: transform;
}
.mnf-prod-card:hover .mnf-prod-emoji {
    transform: scale(1.18) rotate(6deg);
}
.mnf-prod-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(233,26,140,.88), rgba(45,27,141,.88));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mnf-sp-2);
    opacity: 0;
    transition: opacity var(--mnf-dur) var(--mnf-ease);
}
.mnf-prod-card:hover .mnf-prod-overlay { opacity: 1; }
.mnf-ov-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mnf-white);
    color: var(--mnf-pink);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: var(--mnf-shadow-2);
    transition: all var(--mnf-dur) var(--mnf-ease);
    transform: translateY(20px);
}
.mnf-prod-card:hover .mnf-ov-btn { transform: translateY(0); }
.mnf-prod-card:hover .mnf-ov-btn:nth-child(1) { transition-delay: .04s; }
.mnf-prod-card:hover .mnf-ov-btn:nth-child(2) { transition-delay: .08s; }
.mnf-prod-card:hover .mnf-ov-btn:nth-child(3) { transition-delay: .12s; }
.mnf-ov-btn:hover {
    background: var(--mnf-purple);
    color: var(--mnf-white);
    transform: scale(1.12) !important;
}
.mnf-prod-info {
    padding: var(--mnf-sp-2) var(--mnf-sp-3) var(--mnf-sp-3);
}
.mnf-prod-name {
    font-size: var(--mnf-text-sm);
    font-weight: 700;
    margin-bottom: var(--mnf-sp-1);
    color: var(--mnf-gray-900);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Cairo', sans-serif;
}
.mnf-prod-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--mnf-sp-2);
}
.mnf-stars { color: var(--mnf-gold); font-size: var(--mnf-text-sm); }
.mnf-rating-cnt { font-size: var(--mnf-text-xs); color: var(--mnf-gray-400); font-family: 'Cairo', sans-serif; }
.mnf-prod-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mnf-prices {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mnf-prod-price {
    font-size: var(--mnf-text-xl);
    font-weight: 900;
    color: var(--mnf-pink);
    font-family: 'Cairo', sans-serif;
}
.mnf-prod-old {
    font-size: var(--mnf-text-xs);
    color: var(--mnf-gray-400);
    text-decoration: line-through;
    font-family: 'Cairo', sans-serif;
}
.mnf-cart-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--mnf-pink), var(--mnf-purple));
    color: var(--mnf-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    transition:
        transform var(--mnf-dur) var(--mnf-ease),
        box-shadow var(--mnf-dur) var(--mnf-ease);
    box-shadow: var(--mnf-shadow-pink-1);
    font-family: 'Cairo', sans-serif;
}
.mnf-cart-btn:hover {
    transform: scale(1.18) rotate(15deg);
    box-shadow: var(--mnf-shadow-pink-2);
}

/* ================================================================
   PROMO BANNER (Eid)
   ================================================================ */
.mnf-promo-wrap {
    padding: 0 5% var(--mnf-sp-10);
    background: var(--mnf-white);
}
.mnf-promo {
    border-radius: var(--mnf-radius-xl);
    background: linear-gradient(135deg, var(--mnf-purple) 0%, #5B2EA6 50%, var(--mnf-pink) 100%);
    padding: var(--mnf-sp-10) 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    gap: var(--mnf-sp-5);
    font-family: 'Cairo', sans-serif;
}
.mnf-promo::before {
    content: '';
    position: absolute;
    width: 360px;
    height: 360px;
    background: rgba(255,255,255,.06);
    border-radius: 50%;
    top: -120px;
    left: 44%;
}
.mnf-promo::after {
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    background: rgba(255,255,255,.04);
    border-radius: 50%;
    bottom: -100px;
    right: 20%;
}
.mnf-promo-txt { position: relative; z-index: 2; max-width: 520px; }
.mnf-promo-eyebrow {
    display: inline-block;
    background: rgba(255,255,255,.2);
    color: var(--mnf-white);
    padding: 5px var(--mnf-sp-2);
    border-radius: var(--mnf-radius-full);
    font-size: var(--mnf-text-xs);
    font-weight: 700;
    margin-bottom: var(--mnf-sp-2);
    font-family: 'Cairo', sans-serif;
}
.mnf-promo-title {
    font-size: clamp(var(--mnf-text-2xl), 3.5vw, var(--mnf-text-4xl));
    font-weight: 900;
    color: var(--mnf-white);
    margin-bottom: var(--mnf-sp-1);
    line-height: 1.2;
    font-family: 'Cairo', sans-serif;
}
.mnf-promo-body {
    font-size: var(--mnf-text-base);
    color: rgba(255,255,255,.85);
    margin-bottom: var(--mnf-sp-4);
    line-height: 1.7;
    font-family: 'Cairo', sans-serif;
}
.mnf-promo-emojis {
    font-size: 5.5rem;
    position: relative;
    z-index: 2;
    animation: heroFloat 4.5s ease-in-out infinite;
    flex-shrink: 0;
}

/* ================================================================
   FILTER TABS
   ================================================================ */
.mnf-tabs {
    display: flex;
    gap: var(--mnf-sp-1);
    justify-content: center;
    margin-bottom: var(--mnf-sp-5);
    flex-wrap: wrap;
}
.mnf-tab {
    padding: var(--mnf-sp-1) var(--mnf-sp-3);
    min-height: 44px;
    border-radius: var(--mnf-radius-full);
    border: 1.5px solid var(--mnf-pink-200);
    background: var(--mnf-white);
    color: var(--mnf-gray-500);
    font-family: 'Cairo', sans-serif;
    font-size: var(--mnf-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--mnf-dur) var(--mnf-ease);
}
.mnf-tab:hover,
.mnf-tab.mnf-active {
    background: linear-gradient(135deg, var(--mnf-pink), var(--mnf-purple));
    color: var(--mnf-white);
    border-color: transparent;
    box-shadow: var(--mnf-shadow-pink-1);
}

/* ================================================================
   TESTIMONIAL CARDS
   ================================================================ */
.mnf-tstm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mnf-sp-3);
}
.mnf-tstm-card {
    background: var(--mnf-surface);
    border-radius: var(--mnf-radius-lg);
    padding: var(--mnf-sp-4);
    position: relative;
    border: 1.5px solid var(--mnf-gray-100);
    box-shadow: var(--mnf-shadow-1);
    transition:
        transform var(--mnf-dur) var(--mnf-ease),
        box-shadow var(--mnf-dur) var(--mnf-ease),
        border-color var(--mnf-dur) var(--mnf-ease);
    font-family: 'Cairo', sans-serif;
}
.mnf-tstm-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--mnf-shadow-pink-2);
    border-color: var(--mnf-pink-200);
}
.mnf-tstm-quote {
    font-size: 72px;
    color: var(--mnf-pink-100);
    font-family: Georgia, serif;
    line-height: .8;
    margin-bottom: var(--mnf-sp-2);
    display: block;
}
.mnf-tstm-text {
    font-size: var(--mnf-text-sm);
    color: var(--mnf-gray-500);
    line-height: 1.8;
    margin-bottom: var(--mnf-sp-3);
    font-family: 'Cairo', sans-serif;
}
.mnf-tstm-author {
    display: flex;
    align-items: center;
    gap: var(--mnf-sp-2);
}
.mnf-tstm-av {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--mnf-pink), var(--mnf-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--mnf-white);
    font-weight: 800;
    box-shadow: var(--mnf-shadow-pink-1);
    font-family: 'Cairo', sans-serif;
}
.mnf-tstm-name {
    font-size: var(--mnf-text-sm);
    font-weight: 700;
    color: var(--mnf-gray-900);
    font-family: 'Cairo', sans-serif;
}
.mnf-tstm-loc {
    font-size: var(--mnf-text-xs);
    color: var(--mnf-gray-400);
    font-family: 'Cairo', sans-serif;
}

/* ================================================================
   NEWSLETTER
   ================================================================ */
.mnf-nl-sec {
    background: linear-gradient(135deg, var(--mnf-pink-50), var(--mnf-purple-50));
    padding: var(--mnf-sp-10) 5%;
    text-align: center;
    font-family: 'Cairo', sans-serif;
}
.mnf-nl-form {
    display: flex;
    gap: var(--mnf-sp-1);
    max-width: 500px;
    margin: var(--mnf-sp-4) auto 0;
}
.mnf-nl-input {
    flex: 1;
    min-height: 52px;
    padding: 0 var(--mnf-sp-3);
    border: 2px solid transparent;
    border-radius: var(--mnf-radius-full);
    font-family: 'Cairo', sans-serif;
    font-size: var(--mnf-text-sm);
    outline: none;
    direction: rtl;
    transition:
        border-color var(--mnf-dur) var(--mnf-ease),
        box-shadow var(--mnf-dur) var(--mnf-ease);
    background: var(--mnf-white);
    color: var(--mnf-gray-900);
}
.mnf-nl-input:focus {
    border-color: var(--mnf-pink);
    box-shadow: 0 0 0 4px rgba(233,26,140,.10);
}
.mnf-nl-input.mnf-error {
    border-color: var(--mnf-red);
    box-shadow: 0 0 0 4px rgba(239,68,68,.10);
}

/* ================================================================
   PAGE LOADER (fixed element)
   ================================================================ */
.mnf-page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mnf-dur) var(--mnf-ease);
}
.mnf-page-loader::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(26,16,53,.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.mnf-page-loader.mnf-active {
    opacity: 1;
    pointer-events: all;
}
.mnf-loader-card {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mnf-sp-2);
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.22);
    border-radius: var(--mnf-radius-xl);
    padding: var(--mnf-sp-8) var(--mnf-sp-10);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow: 0 32px 80px rgba(233,26,140,.28), 0 0 0 1px rgba(255,255,255,.08);
    animation: cardPop var(--mnf-dur-lg) var(--mnf-ease-spring) both;
}
.mnf-loader-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: var(--mnf-radius-md);
    box-shadow: var(--mnf-shadow-pink-2);
    animation: logoFloat 2.2s ease-in-out infinite;
}
.mnf-loader-brand {
    font-size: var(--mnf-text-2xl);
    font-weight: 900;
    background: linear-gradient(135deg, #FF6EC7, #B39EFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Cairo', sans-serif;
}
.mnf-loader-tagline {
    font-size: var(--mnf-text-lg);
    font-weight: 700;
    color: rgba(255,255,255,.92);
    letter-spacing: 1px;
    text-shadow: 0 2px 14px rgba(233,26,140,.45);
    font-family: 'Cairo', sans-serif;
}
.mnf-loader-dots {
    display: flex;
    gap: var(--mnf-sp-1);
    margin-top: var(--mnf-sp-1);
}
.mnf-loader-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mnf-pink), var(--mnf-purple));
    animation: dotBounce 1.3s ease-in-out infinite;
}
.mnf-loader-dots span:nth-child(2) { animation-delay: .18s; }
.mnf-loader-dots span:nth-child(3) { animation-delay: .36s; }

/* ================================================================
   TOAST NOTIFICATION
   ================================================================ */
.mnf-notif {
    position: fixed;
    top: var(--mnf-sp-3);
    left: 50%;
    transform: translateX(-50%) translateY(-140px);
    background: var(--mnf-white);
    border: 2px solid var(--mnf-pink);
    border-radius: var(--mnf-radius-full);
    padding: var(--mnf-sp-2) var(--mnf-sp-4);
    display: flex;
    align-items: center;
    gap: var(--mnf-sp-1);
    font-size: var(--mnf-text-sm);
    font-weight: 700;
    color: var(--mnf-gray-900);
    box-shadow: var(--mnf-shadow-pink-2);
    z-index: 99000;
    transition: transform var(--mnf-dur) var(--mnf-ease);
    white-space: nowrap;
    min-height: 48px;
    font-family: 'Cairo', sans-serif;
}
.mnf-notif.mnf-show {
    transform: translateX(-50%) translateY(0);
}

/* ================================================================
   LIVE PURCHASE FOMO
   ================================================================ */
.mnf-live-buy {
    position: fixed;
    bottom: 110px;
    left: var(--mnf-sp-3);
    background: var(--mnf-white);
    border-radius: var(--mnf-radius-lg);
    padding: var(--mnf-sp-2) var(--mnf-sp-3);
    display: flex;
    align-items: center;
    gap: var(--mnf-sp-2);
    box-shadow: var(--mnf-shadow-xl);
    z-index: 990;
    max-width: 272px;
    transform: translateX(-320px);
    transition: transform var(--mnf-dur-lg) var(--mnf-ease);
    border-left: 3px solid var(--mnf-pink);
    font-family: 'Cairo', sans-serif;
}
.mnf-live-buy.mnf-show { transform: translateX(0); }
.mnf-live-dot {
    width: 9px;
    height: 9px;
    background: var(--mnf-green);
    border-radius: 50%;
    flex-shrink: 0;
    animation: livePulse 1.6s ease-in-out infinite;
}
.mnf-live-buy-text {
    font-size: var(--mnf-text-xs);
    color: var(--mnf-gray-700);
    line-height: 1.5;
    font-family: 'Cairo', sans-serif;
}
.mnf-live-buy-text strong {
    display: block;
    font-size: var(--mnf-text-sm);
    color: var(--mnf-gray-900);
    font-family: 'Cairo', sans-serif;
}
.mnf-live-buy-time {
    font-size: 10px;
    color: var(--mnf-gray-400);
    font-family: 'Cairo', sans-serif;
}

/* ================================================================
   WHATSAPP FLOATING BUTTON
   ================================================================ */
.mnf-wa-btn {
    position: fixed;
    bottom: var(--mnf-sp-4);
    left: var(--mnf-sp-4);
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(37,211,102,.44);
    z-index: 990;
    transition: transform var(--mnf-dur) var(--mnf-ease);
    animation: waPulse 3s ease-in-out infinite;
}
.mnf-wa-btn:hover { transform: scale(1.15); }

/* ================================================================
   SCROLL-TO-TOP BUTTON
   ================================================================ */
.mnf-scroll-top-btn {
    position: fixed;
    bottom: var(--mnf-sp-4);
    right: var(--mnf-sp-4);
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--mnf-pink), var(--mnf-purple));
    border-radius: var(--mnf-radius-md);
    border: none;
    color: var(--mnf-white);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--mnf-shadow-pink-2);
    z-index: 990;
    opacity: 0;
    transform: translateY(16px);
    transition: all var(--mnf-dur) var(--mnf-ease);
    font-family: 'Cairo', sans-serif;
}
.mnf-scroll-top-btn.mnf-vis {
    opacity: 1;
    transform: translateY(0);
}
.mnf-scroll-top-btn:hover {
    transform: translateY(-5px);
    box-shadow: var(--mnf-shadow-pink-3);
}

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */

/* Tablet landscape */
@media (max-width: 1100px) {
    .mnf-cats-grid  { grid-template-columns: repeat(4, 1fr); }
    .mnf-prods-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet portrait */
@media (max-width: 820px) {
    .mnf-hero-grid {
        grid-template-columns: 1fr;
        padding: var(--mnf-sp-8) 5%;
    }
    .mnf-hero-visual { display: none; }
    .mnf-hero-stats  { gap: var(--mnf-sp-4); }
    .mnf-trust-inner { gap: var(--mnf-sp-4); }
    .mnf-cats-grid   { grid-template-columns: repeat(3, 1fr); }
    .mnf-prods-grid  { grid-template-columns: repeat(2, 1fr); }
    .mnf-tstm-grid   { grid-template-columns: 1fr; }
    .mnf-promo {
        flex-direction: column;
        text-align: center;
        padding: var(--mnf-sp-7) 6%;
    }
    .mnf-promo-emojis { font-size: 4rem; }
    .mnf-promo-title  { font-size: var(--mnf-text-2xl); }
}

/* Mobile */
@media (max-width: 540px) {
    .mnf-cats-grid  { grid-template-columns: repeat(2, 1fr); }
    .mnf-prods-grid { grid-template-columns: 1fr; }
    .mnf-nl-form    { flex-direction: column; }
    .mnf-hero-ctas  { flex-direction: column; }
    .mnf-hero-title { font-size: clamp(2.2rem, 8vw, 3rem); }
    .mnf-trust-inner { flex-direction: column; align-items: flex-start; padding: 0 5%; }
    .mnf-tabs { gap: 6px; }
    .mnf-tab  { font-size: var(--mnf-text-xs); padding: 6px 12px; min-height: 40px; }
}
  
  :root{--mnf-pink:#e8117f;--mnf-pink-light:#ff85c2;--mnf-purple:#7b2fff;--mnf-dark:#1a004d;--mnf-gold:#ff9f00;--mnf-white:#ffffff;--mnf-radius:24px;--mnf-sha
  dow:0 8px 40px rgba(232,17,127,.22)}                                                                                                                        
  .mnf-delivery{position:relative;padding:64px 24px 72px;overflow:hidden;background:linear-gradient(145deg,#fce4f3 0%,#f3d0ff 50%,#ffe0f0
  100%);direction:rtl;font-family:'Noto Kufi Arabic','Segoe UI',Arial,sans-serif}                                                                             
  .mnf-delivery::before,.mnf-delivery::after{content:'';position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;animation:mnfBlobFloat 8s
  ease-in-out infinite alternate}                                                                                                                             
  .mnf-delivery::before{width:420px;height:420px;background:radial-gradient(circle,rgba(232,17,127,.18),transparent 70%);top:-100px;right:-80px}
  .mnf-delivery::after{width:380px;height:380px;background:radial-gradient(circle,rgba(123,47,255,.15),transparent                                            
  70%);bottom:-80px;left:-60px;animation-delay:-4s}                                                                                                           
  @keyframes mnfBlobFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(20px,30px) scale(1.08)}}                                              
  .mnf-delivery-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}      
  @media(max-width:768px){.mnf-delivery-inner{grid-template-columns:1fr;gap:32px;text-align:center}}                                                          
  .mnf-delivery-map{position:relative;display:flex;justify-content:center;align-items:center}                                                                 
  .mnf-map-frame{position:relative;width:360px;height:360px;border-radius:50%;background:linear-gradient(135deg,#ff3fa4,#7b2fff);padding:5px;box-shadow:0 0 0 
  12px rgba(232,17,127,.12),0 0 0 24px rgba(123,47,255,.07),var(--mnf-shadow);animation:mnfMapPulse 3.5s ease-in-out infinite}                                
  @keyframes mnfMapPulse{0%,100%{box-shadow:0 0 0 12px rgba(232,17,127,.12),0 0 0 24px rgba(123,47,255,.07),var(--mnf-shadow)}50%{box-shadow:0 0 0 18px       
  rgba(232,17,127,.18),0 0 0 36px rgba(123,47,255,.10),var(--mnf-shadow)}}                                                                                    
  .mnf-map-frame svg{width:100%;height:100%;border-radius:50%;display:block}
  .mnf-city-pin{position:absolute;background:var(--mnf-white);border-radius:20px;padding:5px                                                                  
  12px;font-size:11px;font-weight:700;color:var(--mnf-dark);box-shadow:0 4px 16px rgba(123,47,255,.25);border:2px solid                                       
  var(--mnf-pink-light);white-space:nowrap;animation:mnfPinBob 3s ease-in-out infinite;display:flex;align-items:center;gap:4px}                               
  .mnf-city-pin::after{content:'';position:absolute;bottom:-8px;right:50%;transform:translateX(50%);border:5px solid                                          
  transparent;border-top-color:var(--mnf-pink-light)}                                                                                                         
  .mnf-city-pin:nth-child(1){top:-12px;right:30px;animation-delay:0s}
  .mnf-city-pin:nth-child(2){top:50px;left:-40px;animation-delay:.6s}                                                                                         
  .mnf-city-pin:nth-child(3){bottom:40px;right:-30px;animation-delay:1.2s}                                                                                    
  .mnf-city-pin:nth-child(4){bottom:-8px;left:40px;animation-delay:1.8s}                                                                                      
  @keyframes mnfPinBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}                                                                       
  .mnf-delivery-content{display:flex;flex-direction:column;gap:20px}                                                                                          
  .mnf-delivery-eyebrow{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(90deg,var(--mnf-pink),var(--mnf-purple));color:var(--mnf-whi
  te);font-size:13px;font-weight:700;padding:6px 18px;border-radius:50px;width:fit-content;letter-spacing:.5px}                                               
  .mnf-delivery-title{font-size:clamp(28px,4vw,42px);font-weight:900;color:var(--mnf-dark);line-height:1.3;margin:0}
  .mnf-delivery-title span{background:linear-gradient(135deg,var(--mnf-pink),var(--mnf-purple));-webkit-background-clip:text;-webkit-text-fill-color:transpare
  nt;background-clip:text}                                                                                                                                    
  .mnf-delivery-body{font-size:15px;color:#5a3060;line-height:1.8;margin:0;max-width:420px}                                                                   
  .mnf-regions-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}                                                                                      
  .mnf-region-badge{display:flex;align-items:center;gap:6px;background:var(--mnf-white);border:1.5px solid                                                    
  var(--mnf-pink-light);border-radius:50px;padding:6px 16px;font-size:12px;font-weight:700;color:var(--mnf-dark);transition:all .25s ease;cursor:default}     
  .mnf-region-badge:hover{background:linear-gradient(135deg,var(--mnf-pink),var(--mnf-purple));color:var(--mnf-white);border-color:transparent;transform:trans
  lateY(-2px);box-shadow:0 6px 20px rgba(232,17,127,.3)}                                                                                                      
  .mnf-region-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--mnf-pink);flex-shrink:0;transition:background .25s}
  .mnf-region-badge:hover .dot{background:var(--mnf-white)}                                                                                                   
  .mnf-delivery-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px}
  .mnf-btn-delivery{display:inline-flex;align-items:center;gap:8px;padding:14px                                                                               
  32px;border-radius:50px;font-size:15px;font-weight:800;text-decoration:none;transition:all .28s cubic-bezier(.34,1.56,.64,1);border:none;cursor:pointer}    
  .mnf-btn-delivery.primary{background:linear-gradient(135deg,var(--mnf-pink),var(--mnf-purple));color:var(--mnf-white);box-shadow:0 6px 24px                 
  rgba(232,17,127,.35)}                                                                                                                                       
  .mnf-btn-delivery.primary:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 36px rgba(232,17,127,.45)}
  .mnf-delivery-note{font-size:13px;color:#9a6aaa;display:flex;align-items:center;gap:6px}                                                                    
  .mnf-delivery-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px;padding-top:28px;border-top:1.5px dashed                      
  rgba(232,17,127,.25);max-width:1100px;margin-left:auto;margin-right:auto}                                                                                   
  .mnf-dstat{text-align:center;padding:16px 8px;background:var(--mnf-white);border-radius:var(--mnf-radius);box-shadow:0 4px 20px                             
  rgba(123,47,255,.1);transition:transform .25s ease}                                                                                                         
  .mnf-dstat:hover{transform:translateY(-4px)}              
  .mnf-dstat-num{font-size:28px;font-weight:900;background:linear-gradient(135deg,var(--mnf-pink),var(--mnf-purple));-webkit-background-clip:text;-webkit-text
  -fill-color:transparent;background-clip:text;display:block;line-height:1.1}                                                                                 
  .mnf-dstat-label{font-size:11px;color:#7a5590;font-weight:600;margin-top:4px;display:block}
  .mnf-delivery-candy{position:absolute;pointer-events:none;font-size:1.6rem;animation:mnfFloat 6s ease-in-out                                                
  infinite;z-index:1;opacity:.55;user-select:none}                                                                                                            
  @keyframes mnfFloat{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-18px) rotate(8deg)}66%{transform:translateY(-8px) rotate(-5deg)}}
                                                                                                                                                              
  ---                                                       
  JS — paste in <script> tags:                                                                                                                                
                                                            
  (function(){
    function animateCounter(el){
      var target=parseInt(el.dataset.target,10),suffix=el.dataset.suffix||'',duration=1600,step=16,inc=target/(duration/step),cur=0;
      var t=setInterval(function(){cur+=inc;if(cur>=target){cur=target;clearInterval(t);}el.textContent=Math.floor(cur)+suffix;},step);                       
    }                                                                                                                                                         
    var counters=document.querySelectorAll('.mnf-dstat-num[data-target]'),triggered=false;                                                                    
    if('IntersectionObserver' in window){                                                                                                                     
      var obs=new IntersectionObserver(function(entries){entries.forEach(function(e){if(e.isIntersecting&&!triggered){triggered=true;counters.forEach(animateC
  ounter);obs.disconnect();}});},{threshold:.4});                                                                                                             
      var sec=document.querySelector('.mnf-delivery');if(sec)obs.observe(sec);
    } else {counters.forEach(animateCounter);}                                                                                                                
    document.querySelectorAll('.mnf-city-pin').forEach(function(p,i){                                                                                         
      p.style.opacity='0';p.style.transform='translateY(-12px)';
      setTimeout(function(){p.style.transition='opacity .5s ease,transform .5s                                                                                
  cubic-bezier(.34,1.56,.64,1)';p.style.opacity='1';p.style.transform='translateY(0)';},300+i*200);                                                           
    });                                                                                                                                                       
  })();