:root {
            /* ===== الهوية اللونية الرسمية | Sham Dental Supply ===== */
            --navy:        #1A5F7A;   /* Navy Trust — الثقة والاحترافية */
            --navy-deep:   #14506A;
            --navy-ink:    #10394A;
            --teal:        #22A699;   /* Surgical Teal — التعقيم والحداثة */
            --teal-deep:   #178578;
            --teal-tint:   #E7F6F3;
            --orange:      #F29727;   /* Vibrant Accent — طاقة الشباب */
            --orange-deep: #DD8214;
            --orange-tint: #FDF1E0;
            --wa:          #25D366;   /* WhatsApp */
            --wa-deep:     #1DA851;
            --bg:          #F8F9FA;   /* Clinical White — النقاء والوضوح */
            --card:        #FFFFFF;
            --ink:         #16323F;
            --ink-soft:    #4C6675;
            --line:        #E3EAEE;
            --shadow-soft: 0 10px 30px rgba(26,95,122,0.08);
            --shadow-lift: 0 18px 42px rgba(26,95,122,0.16);
            --radius:      16px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }

        body {
            font-family: 'Montserrat', 'Tajawal', sans-serif;
            background-color: var(--bg);
            color: var(--ink);
            line-height: 1.9;
        }
        body.no-scroll { overflow: hidden; }

        h1, h2, h3, h4, .section-num, .brand, .hero-motto, .btn, .badge, .price, .flow-badge {
            font-family: 'Montserrat', 'Cairo', sans-serif;
        }

        img { max-width: 100%; -webkit-user-drag: none; }
        a { color: var(--teal-deep); }

        /* منع تحديد ونسخ محتوى الموقع — حقول الإدخال تبقى قابلة للكتابة والتحديد */
        body { -webkit-user-select: none; user-select: none; }
        input, textarea, select { -webkit-user-select: text; user-select: text; }

        .container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

        /* ===================== أزرار ===================== */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-weight: 700;
            font-size: 0.95rem;
            padding: 0.72rem 1.5rem;
            border-radius: 999px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
            line-height: 1.5;
        }
        .btn:active { transform: scale(0.97); }
        .btn svg { flex-shrink: 0; }
        .btn-primary {
            background: linear-gradient(135deg, var(--teal-deep), #116357);
            color: #FFFFFF;
            box-shadow: 0 8px 20px rgba(34,166,153,0.35);
        }
        .btn-primary:hover { box-shadow: 0 12px 26px rgba(34,166,153,0.45); transform: translateY(-2px); }
        .btn-orange {
            background: linear-gradient(135deg, var(--orange), var(--orange-deep));
            color: #FFFFFF;
            box-shadow: 0 8px 20px rgba(242,151,39,0.35);
        }
        .btn-orange:hover { box-shadow: 0 12px 26px rgba(242,151,39,0.45); transform: translateY(-2px); }
        .btn-wa {
            background: linear-gradient(135deg, var(--wa-deep), #12813E);
            color: #FFFFFF;
            box-shadow: 0 8px 20px rgba(37,211,102,0.35);
        }
        .btn-wa:hover { box-shadow: 0 12px 26px rgba(37,211,102,0.45); transform: translateY(-2px); }
        .btn-ghost {
            background: transparent;
            color: var(--navy);
            border: 1.5px solid var(--navy);
        }
        .btn-ghost:hover { background: var(--navy); color: #FFFFFF; }
        .btn-sm { padding: 0.45rem 1rem; font-size: 0.85rem; }
        .btn-block { width: 100%; }

        /* ===================== شريط التنقل ===================== */
        .topnav {
            position: sticky;
            top: 0;
            z-index: 90;
            background: linear-gradient(180deg, var(--navy), var(--navy-deep));
            border-bottom: 3px solid var(--teal);
        }
        .topnav-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0.6rem 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }
        .brand {
            color: #FFFFFF;
            font-weight: 800;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 0.65rem;
            white-space: nowrap;
            text-decoration: none;
        }
        .brand-chip {
            background: #FFFFFF;
            border-radius: 10px;
            padding: 3px;
            width: 42px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.18);
            flex-shrink: 0;
        }
        .brand-chip img { width: 100%; height: 100%; object-fit: contain; display: block; }
        .brand small {
            display: block;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 0.56rem;
            letter-spacing: 0.14em;
            color: #8FD8CF;
            line-height: 1.2;
        }
        .topnav-links {
            display: flex;
            gap: 0.15rem;
            flex-wrap: wrap;
            list-style: none;
            align-items: center;
        }
        .topnav-links a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            font-size: 0.84rem;
            font-weight: 500;
            padding: 0.4rem 0.7rem;
            border-radius: 999px;
            transition: background 0.25s ease, color 0.25s ease;
            white-space: nowrap;
        }
        .topnav-links a:hover,
        .topnav-links a.active {
            background: rgba(34,166,153,0.28);
            color: #A9E8E0;
        }
        .nav-actions { display: flex; align-items: center; gap: 0.5rem; }
        .cart-btn, .menu-btn {
            position: relative;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.22);
            color: #FFFFFF;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        .cart-btn:hover, .menu-btn:hover { background: rgba(34,166,153,0.4); }
        .cart-count {
            position: absolute;
            top: -7px;
            inset-inline-start: -7px;
            background: var(--orange);
            color: var(--navy-ink);
            font-size: 0.68rem;
            font-weight: 800;
            min-width: 20px;
            height: 20px;
            padding: 0 4px;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--navy-deep);
            font-family: 'Montserrat', sans-serif;
        }
        .cart-count.hidden { display: none; }
        .menu-btn { display: none; }
        .lang-btn {
            width: auto;
            min-width: 44px;
            padding: 0 0.8rem;
            font-family: 'Montserrat', 'Cairo', sans-serif;
            font-weight: 800;
            font-size: 0.82rem;
            letter-spacing: 0.03em;
        }

        /* شريط البحث المنسدل من الشريط العلوي */
        .nav-search {
            background: var(--navy-deep);
            border-top: 1px solid rgba(255,255,255,0.12);
            padding: 0.65rem 1.25rem;
        }
        .nav-search[hidden] { display: none; }
        .nav-search-inner {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
        .nav-search-inner svg { flex-shrink: 0; }
        .nav-search-inner input {
            flex: 1;
            min-width: 0;
            font-family: inherit;
            font-size: 0.95rem;
            padding: 0.65rem 1.1rem;
            border: 1.5px solid rgba(255,255,255,0.25);
            border-radius: 999px;
            background: rgba(255,255,255,0.1);
            color: #FFFFFF;
            outline: none;
            transition: border-color 0.2s ease, background 0.2s ease;
        }
        .nav-search-inner input::placeholder { color: rgba(255,255,255,0.55); }
        .nav-search-inner input:focus { border-color: var(--teal); background: rgba(255,255,255,0.16); }
        .nav-search-close {
            flex-shrink: 0;
            background: rgba(255,255,255,0.12);
            border: none;
            color: #FFFFFF;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            font-size: 1.05rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .nav-search-close:hover { background: rgba(255,255,255,0.25); }

        /* قائمة الموبايل المنسدلة */
        .mobile-menu {
            display: none;
            background: var(--navy-deep);
            border-top: 1px solid rgba(255,255,255,0.12);
        }
        .mobile-menu.open { display: block; }
        .mobile-menu a {
            display: block;
            color: rgba(255,255,255,0.85);
            text-decoration: none;
            padding: 0.8rem 1.5rem;
            font-size: 0.95rem;
            border-bottom: 1px solid rgba(255,255,255,0.07);
        }
        .mobile-menu a:hover { background: rgba(34,166,153,0.25); color: #A9E8E0; }

        /* ===================== الغلاف (Hero) ===================== */
        header.hero {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(60% 80% at 12% 18%, rgba(34,166,153,0.10), transparent 65%),
                radial-gradient(50% 70% at 88% 82%, rgba(26,95,122,0.09), transparent 60%),
                var(--bg);
            padding: 3.5rem 1.5rem 3.2rem;
            text-align: center;
            border-bottom: 1px solid var(--line);
        }
        .hero-spark { position: absolute; pointer-events: none; opacity: 0.85; }
        .hero-spark.sp1 { top: 14%; left: 12%; width: 34px; }
        .hero-spark.sp2 { bottom: 20%; right: 9%; width: 22px; opacity: 0.55; }
        .hero-ring {
            position: absolute;
            border: 1.5px solid rgba(34,166,153,0.22);
            border-radius: 50%;
            pointer-events: none;
        }
        .hero-ring.r1 { width: 210px; height: 210px; top: -70px; right: -60px; }
        .hero-ring.r2 { width: 140px; height: 140px; bottom: -45px; left: -35px; border-color: rgba(242,151,39,0.28); }
        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-family: 'Montserrat', 'Cairo', sans-serif;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            color: var(--teal-deep);
            background: var(--teal-tint);
            border: 1px solid rgba(34,166,153,0.4);
            padding: 0.38rem 1.05rem;
            border-radius: 999px;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 2;
        }
        .hero-logo {
            position: relative;
            z-index: 2;
            width: min(360px, 78vw);
            margin: 0 auto 1.2rem;
            display: block;
        }
        header.hero h1 {
            position: relative;
            z-index: 2;
            font-size: clamp(1.7rem, 4vw, 2.6rem);
            font-weight: 900;
            color: var(--navy);
            margin-bottom: 0.8rem;
            line-height: 1.45;
        }
        .hero-motto {
            position: relative;
            z-index: 2;
            font-weight: 800;
            font-size: 1.02rem;
            letter-spacing: 0.06em;
            margin-bottom: 1rem;
        }
        .hero-motto .m-navy   { color: var(--navy); }
        .hero-motto .m-teal   { color: var(--teal); }
        .hero-motto .m-orange { color: var(--orange); }
        .hero-motto .m-dot    { color: var(--ink-soft); margin: 0 0.35rem; font-weight: 400; }
        header.hero p.hero-tagline {
            position: relative;
            z-index: 2;
            font-size: clamp(0.95rem, 2.6vw, 1.1rem);
            color: var(--ink-soft);
            max-width: 620px;
            margin-inline: auto;
        }
        .hero-logo { height: auto; }
        .hero-cta {
            position: relative;
            z-index: 2;
            display: flex;
            gap: 0.8rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 1.8rem;
        }
        .hero-stats {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: center;
            gap: clamp(1.2rem, 4vw, 3rem);
            flex-wrap: wrap;
            margin-top: 2.4rem;
        }
        .hero-stat { text-align: center; min-width: 110px; }
        .hero-stat b {
            display: block;
            font-family: 'Montserrat', 'Cairo', sans-serif;
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--navy);
            line-height: 1.3;
        }
        .hero-stat span { font-size: 0.82rem; color: var(--ink-soft); }

        /* ===================== شريط الثقة ===================== */
        .trust-strip {
            background: linear-gradient(135deg, var(--navy), var(--navy-deep));
            padding: 1.1rem 1.25rem;
        }
        .trust-inner {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
        }
        .trust-item {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            color: #FFFFFF;
            font-size: 0.86rem;
            font-weight: 500;
            justify-content: center;
        }
        .trust-item svg { flex-shrink: 0; }
        .trust-item b { display: block; font-size: 0.92rem; line-height: 1.5; }
        .trust-item span { display: block; color: rgba(255,255,255,0.65); font-size: 0.75rem; line-height: 1.5; }

        /* ===================== الأقسام العامة ===================== */
        main .container { padding-top: 3rem; padding-bottom: 1rem; }
        section { scroll-margin-top: 90px; margin-bottom: 3.5rem; }
        .section-head {
            display: flex;
            align-items: baseline;
            gap: 1rem;
            margin-bottom: 0.7rem;
            flex-wrap: wrap;
        }
        .section-num {
            font-weight: 800;
            font-size: 0.95rem;
            color: var(--teal-deep);
            letter-spacing: 0.05em;
            background: var(--teal-tint);
            border: 1px solid rgba(34,166,153,0.4);
            padding: 0.12rem 0.7rem;
            border-radius: 8px;
        }
        h2 {
            color: var(--navy);
            font-weight: 800;
            font-size: clamp(1.4rem, 3vw, 1.7rem);
            position: relative;
            padding-bottom: 0.3rem;
        }
        h2::after {
            content: "";
            display: block;
            width: 48px;
            height: 3px;
            margin-top: 0.5rem;
            background: linear-gradient(90deg, var(--teal) 0%, var(--teal) 60%, var(--orange) 100%);
            border-radius: 999px;
        }
        .section-sub { color: var(--ink-soft); max-width: 720px; margin-bottom: 1.8rem; }

        /* ===================== شريط الموسم ===================== */
        .season-banner {
            background: linear-gradient(135deg, var(--orange), var(--orange-deep));
            border-radius: var(--radius);
            color: #FFFFFF;
            padding: 1.1rem 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            box-shadow: 0 10px 26px rgba(242,151,39,0.3);
            margin-bottom: 3rem;
        }
        .season-banner p { font-weight: 600; font-size: 0.98rem; }
        .season-banner p b { font-family: 'Montserrat', 'Cairo', sans-serif; font-weight: 800; }
        .season-banner .btn { background: #FFFFFF; color: var(--orange-deep); box-shadow: none; }
        .season-banner .btn:hover { transform: translateY(-2px); }

        /* ===================== حقائب السنوات ===================== */
        .kits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
            gap: 1.4rem;
        }
        .kit-card {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .kit-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
        .kit-head {
            padding: 1.3rem 1.4rem 1.1rem;
            color: #FFFFFF;
            position: relative;
            overflow: hidden;
        }
        .kit-head::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,0.18), transparent 60%);
        }
        .kit-head.k1 { background: linear-gradient(135deg, var(--teal), var(--teal-deep)); }
        .kit-head.k2 { background: linear-gradient(135deg, var(--navy), var(--navy-deep)); }
        .kit-head.k3 { background: linear-gradient(135deg, var(--orange), var(--orange-deep)); }
        .kit-head.k4 { background: linear-gradient(135deg, var(--navy-ink), #0A2833); }
        .kit-stage {
            position: relative;
            z-index: 1;
            display: inline-block;
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.35);
            font-size: 0.72rem;
            font-weight: 700;
            padding: 0.1rem 0.7rem;
            border-radius: 999px;
            margin-bottom: 0.5rem;
        }
        .kit-head h3 { position: relative; z-index: 1; font-size: 1.15rem; font-weight: 800; color: #FFFFFF; line-height: 1.6; }
        .kit-body { padding: 1.2rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
        .kit-body ul { list-style: none; margin-bottom: 1rem; flex: 1; }
        .kit-body li {
            position: relative;
            padding-right: 1.5rem;
            margin-bottom: 0.45rem;
            color: var(--ink-soft);
            font-size: 0.9rem;
        }
        .kit-body li::before {
            content: "";
            position: absolute;
            right: 0;
            top: 0.62em;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--teal);
            box-shadow: 0 0 0 3px var(--teal-tint);
        }
        .kit-price-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            margin-bottom: 0.9rem;
            flex-wrap: wrap;
        }
        .kit-actions { display: flex; flex-direction: column; gap: 0.5rem; }
        .kit-note {
            margin-top: 1.6rem;
            background: var(--teal-tint);
            border: 1px dashed rgba(34,166,153,0.5);
            border-radius: 12px;
            padding: 0.9rem 1.2rem;
            font-size: 0.9rem;
            color: var(--ink-soft);
            display: flex;
            gap: 0.6rem;
            align-items: flex-start;
        }
        .kit-note svg { flex-shrink: 0; margin-top: 0.3rem; }
        .kit-note b { color: var(--navy); }

        /* ===================== الكتالوج ===================== */
        .catalog-tools {
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
            margin-bottom: 1.6rem;
        }
        .search-box {
            position: relative;
            max-width: 430px;
        }
        .search-box input {
            width: 100%;
            padding: 0.75rem 2.8rem 0.75rem 1.1rem;
            border: 1.5px solid var(--line);
            border-radius: 999px;
            font-family: inherit;
            font-size: 0.95rem;
            background: var(--card);
            color: var(--ink);
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .search-box input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(34,166,153,0.15); }
        .search-box svg {
            position: absolute;
            top: 50%;
            right: 1rem;
            transform: translateY(-50%);
            pointer-events: none;
        }
        .filter-chips { display: flex; gap: 0.45rem; flex-wrap: wrap; }
        .chip {
            background: var(--card);
            border: 1.5px solid var(--line);
            color: var(--ink-soft);
            font-family: inherit;
            font-size: 0.84rem;
            font-weight: 600;
            padding: 0.4rem 1rem;
            border-radius: 999px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .chip:hover { border-color: var(--teal); color: var(--teal-deep); }
        .chip.active {
            background: linear-gradient(135deg, var(--teal-deep), #116357);
            border-color: transparent;
            color: #FFFFFF;
            box-shadow: 0 4px 12px rgba(34,166,153,0.3);
        }
        .avail-legend {
            display: flex;
            gap: 1.2rem;
            flex-wrap: wrap;
            font-size: 0.8rem;
            color: var(--ink-soft);
            margin-bottom: 1.4rem;
        }
        .avail-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
        .cur-toggle-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
        .cur-toggle {
            display: inline-flex;
            background: var(--card);
            border: 1.5px solid var(--line);
            border-radius: 999px;
            padding: 3px;
            gap: 3px;
        }
        .cur-btn {
            border: none;
            background: transparent;
            color: var(--ink-soft);
            font-family: inherit;
            font-weight: 700;
            font-size: 0.82rem;
            padding: 0.45rem 1.05rem;
            border-radius: 999px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .cur-btn.active {
            background: linear-gradient(135deg, var(--teal-deep), #116357);
            color: #FFFFFF;
            box-shadow: 0 3px 10px rgba(34,166,153,0.3);
        }
        .rate-note { font-size: 0.75rem; color: var(--ink-soft); text-decoration: underline dotted; }
        .rate-note[hidden] { display: none; }
        .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
        .dot-in { background: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
        .dot-order { background: var(--orange); box-shadow: 0 0 0 3px var(--orange-tint); }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
            gap: 1.2rem;
        }
        .chip .chip-n {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            opacity: 0.75;
        }
        .cat-divider {
            grid-column: 1 / -1;
            display: flex;
            align-items: baseline;
            gap: 0.7rem;
            flex-wrap: wrap;
            margin-top: 1.3rem;
            padding-bottom: 0.45rem;
            border-bottom: 2px solid var(--teal-tint);
        }
        .cat-divider:first-child { margin-top: 0; }
        .cat-divider h3 {
            color: var(--navy);
            font-weight: 800;
            font-size: 1.08rem;
            margin: 0;
        }
        .cat-divider .cd-sub { font-size: 0.78rem; color: var(--ink-soft); }
        .cat-divider .cd-count {
            margin-inline-start: auto;
            font-size: 0.72rem;
            font-weight: 700;
            font-family: 'Montserrat', 'Cairo', sans-serif;
            color: var(--teal-deep);
            background: var(--teal-tint);
            border: 1px solid rgba(34,166,153,0.35);
            padding: 0.05rem 0.6rem;
            border-radius: 999px;
            white-space: nowrap;
        }
        .product-card {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            display: flex;
            flex-direction: column;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
        .product-media {
            background: linear-gradient(135deg, var(--teal-tint), #F0F7FA);
            height: 118px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .product-media svg { opacity: 0.9; }
        .badge {
            position: absolute;
            top: 0.7rem;
            right: 0.7rem;
            font-size: 0.68rem;
            font-weight: 700;
            padding: 0.15rem 0.65rem;
            border-radius: 999px;
            line-height: 1.7;
        }
        .badge-in { background: var(--teal-deep); color: #FFFFFF; }
        .badge-order { background: var(--orange); color: var(--navy-ink); }
        .badge-sub {
            position: static;
            background: rgba(34,166,153,0.1);
            color: var(--teal-deep);
            border: 1px solid rgba(34,166,153,0.35);
            font-weight: 700;
        }
        html[data-theme="dark"] .badge-sub {
            background: rgba(88,208,194,0.12);
            color: #58D0C2;
            border-color: rgba(88,208,194,0.3);
        }
        .drawer-sub-note {
            margin-bottom: 0.8rem;
            font-size: 0.78rem;
        }
        .drawer-sub-note a {
            display: block;
            background: var(--teal-tint);
            border: 1px dashed rgba(34,166,153,0.5);
            border-radius: 10px;
            padding: 0.5rem 0.9rem;
            color: var(--teal-deep);
            font-weight: 700;
            text-decoration: none;
            text-align: center;
        }
        .pp-sub {
            display: flex;
            gap: 0.5rem;
            align-items: stretch;
            flex-wrap: wrap;
            background: var(--teal-tint);
            border: 1px dashed rgba(34,166,153,0.5);
            border-radius: 12px;
            padding: 0.7rem;
        }
        .pp-sub select {
            flex: 1;
            min-width: 130px;
            font-family: inherit;
            font-size: 0.88rem;
            padding: 0.5rem 0.8rem;
            border: 1.5px solid var(--line);
            border-radius: 10px;
            background: var(--card);
            color: var(--ink);
        }
        .badge-src {
            position: static;
            background: rgba(26,95,122,0.08);
            color: var(--navy);
            border: 1px solid rgba(26,95,122,0.18);
            font-weight: 600;
        }
        .product-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; gap: 0.45rem; }
        .product-cat { font-size: 0.72rem; font-weight: 700; color: var(--teal-deep); letter-spacing: 0.02em; }
        .product-name { font-size: 1rem; font-weight: 700; color: var(--navy); line-height: 1.55; }
        .product-desc { font-size: 0.82rem; color: var(--ink-soft); flex: 1; }
        .product-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
        .price { font-weight: 800; color: var(--navy); font-size: 1.02rem; }
        .price .cur { font-size: 0.75rem; color: var(--ink-soft); font-weight: 600; }
        .price-ask { font-size: 0.8rem; font-weight: 700; color: var(--orange-deep); background: var(--orange-tint); padding: 0.1rem 0.6rem; border-radius: 999px; }
        .product-foot { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
        .qty-stepper {
            display: inline-flex;
            align-items: center;
            border: 1.5px solid var(--line);
            border-radius: 999px;
            overflow: hidden;
            flex-shrink: 0;
        }
        .qty-stepper button {
            background: none;
            border: none;
            width: 30px;
            height: 34px;
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--navy);
            cursor: pointer;
            font-family: inherit;
        }
        .qty-stepper button:hover { background: var(--teal-tint); }
        .qty-stepper .qty-val {
            min-width: 26px;
            text-align: center;
            font-weight: 700;
            font-size: 0.9rem;
            font-family: 'Montserrat', sans-serif;
        }
        .no-results {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--ink-soft);
            display: none;
        }
        .no-results b { color: var(--navy); display: block; margin-bottom: 0.4rem; font-size: 1.05rem; }

        /* ===================== العروض والتخفيضات ===================== */
        .deals-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
            gap: 1.3rem;
            margin-top: 1.2rem;
        }
        .deal-card {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            display: flex;
            flex-direction: column;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        .deal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
        .deal-stripe {
            color: #FFFFFF;
            font-weight: 800;
            font-size: 0.8rem;
            padding: 0.4rem 1.1rem;
            letter-spacing: 0.02em;
        }
        .deal-stripe.t-weekly    { background: linear-gradient(135deg, var(--orange), var(--orange-deep)); }
        .deal-stripe.t-clearance { background: linear-gradient(135deg, #C74634, #A33325); }
        .deal-stripe.t-used      { background: linear-gradient(135deg, var(--navy), var(--navy-deep)); }
        .deal-stripe.t-bundle    { background: linear-gradient(135deg, var(--teal-deep), #116357); }
        .deal-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
        .deal-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
        .deal-off {
            background: var(--orange);
            color: var(--navy-ink);
            font-family: 'Montserrat', 'Cairo', sans-serif;
            font-weight: 800;
            font-size: 1rem;
            padding: 0.15rem 0.7rem;
            border-radius: 10px;
        }
        .deal-prices { display: flex; align-items: baseline; gap: 0.5rem; }
        .deal-prices b {
            font-family: 'Montserrat', 'Cairo', sans-serif;
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--navy);
        }
        .deal-prices s { color: var(--ink-soft); font-size: 0.9rem; }
        .deal-card h3 { color: var(--navy); font-weight: 800; font-size: 1.05rem; line-height: 1.55; margin: 0; }
        .deal-en { font-size: 0.78rem; color: var(--ink-soft); font-family: 'Montserrat', sans-serif; }
        .deal-meta { display: flex; gap: 0.45rem; flex-wrap: wrap; }
        .deal-pill {
            font-size: 0.74rem;
            font-weight: 700;
            padding: 0.18rem 0.7rem;
            border-radius: 999px;
            line-height: 1.7;
        }
        .pill-qty { background: var(--teal-tint); color: var(--teal-deep); border: 1px solid rgba(34,166,153,0.35); }
        .pill-time { background: var(--orange-tint); color: var(--orange-deep); border: 1px solid rgba(242,151,39,0.4); }
        .pill-time.urgent { background: rgba(199,70,52,0.12); color: #C74634; border-color: rgba(199,70,52,0.4); }
        .deal-note { font-size: 0.82rem; color: var(--ink-soft); margin: 0; flex: 1; }
        .deal-actions { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.3rem; }
        html[data-theme="dark"] .deal-prices b,
        html[data-theme="dark"] .deal-card h3 { color: #8FCBE3; }
        html[data-theme="dark"] .pill-time { color: #FFB35C; }

        /* ===================== لماذا شام ===================== */
        .why-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1.4rem;
            margin-bottom: 2rem;
        }
        .why-card {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 1.7rem 1.5rem;
            box-shadow: var(--shadow-soft);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
        .why-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
        }
        .why-icon.i-teal { background: var(--teal-tint); }
        .why-icon.i-navy { background: rgba(26,95,122,0.1); }
        .why-icon.i-orange { background: var(--orange-tint); }
        .why-card h3 { color: var(--navy); font-weight: 800; font-size: 1.08rem; margin-bottom: 0.5rem; }
        .why-card p { color: var(--ink-soft); font-size: 0.9rem; }
        .sources-row {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-top: 0.9rem;
        }
        .src-tag {
            font-size: 0.76rem;
            font-weight: 700;
            color: var(--navy);
            background: rgba(26,95,122,0.07);
            border: 1px solid rgba(26,95,122,0.16);
            padding: 0.12rem 0.65rem;
            border-radius: 999px;
        }

        /* رحلة الطلب */
        .flowchart {
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
            margin-top: 1.6rem;
        }
        @media (min-width: 900px) {
            .flowchart { flex-direction: row; align-items: stretch; gap: 1.4rem; }
        }
        .flow-step {
            background: var(--card);
            border: 1.5px solid rgba(34,166,153,0.45);
            color: var(--navy);
            padding: 1.1rem 0.9rem;
            border-radius: 12px;
            text-align: center;
            font-weight: 600;
            font-size: 0.9rem;
            width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.45rem;
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .flow-step:hover { border-color: var(--teal); box-shadow: 0 6px 18px rgba(34,166,153,0.18); }
        .flow-step small { color: var(--ink-soft); font-weight: 400; font-size: 0.76rem; line-height: 1.6; }
        .flow-badge {
            font-weight: 800;
            font-size: 0.8rem;
            color: #FFFFFF;
            background: linear-gradient(135deg, var(--teal-deep), #116357);
            width: 27px;
            height: 27px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        @media (min-width: 900px) {
            .flow-step:not(:last-child)::after {
                content: "←";
                position: absolute;
                left: -1.45rem;
                top: 50%;
                transform: translateY(-50%);
                color: var(--orange);
                font-size: 1.4rem;
                font-weight: 700;
                z-index: 2;
            }
        }

        /* ===================== برنامج الولاء ===================== */
        .loyalty-banner {
            background:
                radial-gradient(70% 120% at 90% 10%, rgba(34,166,153,0.35), transparent 60%),
                linear-gradient(135deg, var(--navy), var(--navy-ink));
            border-radius: var(--radius);
            color: #FFFFFF;
            padding: clamp(1.6rem, 4vw, 2.6rem);
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            box-shadow: var(--shadow-lift);
        }
        @media (min-width: 820px) { .loyalty-banner { grid-template-columns: 1.4fr 1fr; align-items: center; } }
        .loyalty-banner h3 { font-size: 1.35rem; font-weight: 800; margin-bottom: 0.6rem; color: #FFF; }
        .loyalty-banner h3 span { color: #FFC46B; }
        .loyalty-banner p { color: rgba(255,255,255,0.82); font-size: 0.95rem; }
        .loyalty-steps { display: flex; flex-direction: column; gap: 0.8rem; }
        .loyalty-step {
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 12px;
            padding: 0.8rem 1.1rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
            font-size: 0.88rem;
        }
        .loyalty-step b { color: #FFC46B; font-family: 'Montserrat', 'Cairo', sans-serif; }
        .loyalty-step svg { flex-shrink: 0; }

        /* ===================== الطلب السريع ===================== */
        .order-wrap {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
        @media (min-width: 900px) { .order-wrap { grid-template-columns: 1.15fr 1fr; align-items: start; } }
        .order-form-card, .order-side-card {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 1.7rem 1.5rem;
            box-shadow: var(--shadow-soft);
        }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
        .form-field { display: flex; flex-direction: column; gap: 0.3rem; }
        .form-field.full { grid-column: 1 / -1; }
        .form-field label { font-size: 0.84rem; font-weight: 700; color: var(--navy); }
        .form-field input, .form-field select, .form-field textarea {
            font-family: inherit;
            font-size: 0.92rem;
            padding: 0.65rem 0.9rem;
            border: 1.5px solid var(--line);
            border-radius: 10px;
            background: var(--bg);
            color: var(--ink);
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            width: 100%;
        }
        .form-field input:focus, .form-field select:focus, .form-field textarea:focus {
            border-color: var(--teal);
            box-shadow: 0 0 0 4px rgba(34,166,153,0.13);
            background: #FFFFFF;
        }
        .form-field textarea { resize: vertical; min-height: 84px; }
        .form-field input.invalid, .form-field textarea.invalid, .form-field select.invalid {
            border-color: #C0392B;
            box-shadow: 0 0 0 4px rgba(192,57,43,0.12);
            background: #FFF7F6;
        }
        .form-hint { font-size: 0.75rem; color: var(--ink-soft); }
        .order-summary-box {
            background: var(--teal-tint);
            border: 1px solid rgba(34,166,153,0.35);
            border-radius: 12px;
            padding: 1rem 1.2rem;
            margin-bottom: 1.1rem;
            font-size: 0.88rem;
            color: var(--ink-soft);
        }
        .order-summary-box b { color: var(--navy); }
        .order-summary-box ul { list-style: none; margin-top: 0.5rem; }
        .order-summary-box li {
            display: flex;
            justify-content: space-between;
            gap: 0.6rem;
            padding: 0.22rem 0;
            border-bottom: 1px dashed rgba(34,166,153,0.25);
        }
        .order-summary-box li:last-child { border-bottom: none; }
        .order-empty-note { font-size: 0.85rem; color: var(--ink-soft); }
        .order-side-card h3 { color: var(--navy); font-weight: 800; font-size: 1.05rem; margin-bottom: 0.7rem; }
        .order-side-card p { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 1rem; }
        .contact-lines { display: flex; flex-direction: column; gap: 0.7rem; }
        .contact-line {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--bg);
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 0.7rem 1rem;
            text-decoration: none;
            color: var(--ink);
            font-size: 0.9rem;
            font-weight: 600;
            transition: border-color 0.2s ease, transform 0.2s ease;
        }
        .contact-line:hover { border-color: var(--teal); transform: translateX(-3px); }
        .contact-line svg { flex-shrink: 0; }
        .contact-line span { min-width: 0; }
        .contact-line small { display: block; color: var(--ink-soft); font-weight: 400; font-size: 0.76rem; line-height: 1.5; overflow-wrap: anywhere; }
        /* بطاقة الدفع الإلكتروني: اسم المستلم ورمز المحفظة مع أزرار نسخ */
        .pay-box {
            margin-top: 1.2rem;
            background: var(--teal-tint);
            border: 1px dashed rgba(34,166,153,0.5);
            border-radius: 12px;
            padding: 1rem 1.1rem;
        }
        .pay-box h3 { margin: 0 0 0.7rem; font-size: 0.95rem; color: var(--navy); font-weight: 800; }
        .pay-row {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: 0.55rem 0.8rem;
            margin-bottom: 0.5rem;
        }
        .pay-row > div { flex: 1; min-width: 0; }
        .pay-row small { display: block; font-size: 0.68rem; color: var(--ink-soft); font-weight: 700; }
        .pay-val { display: block; font-weight: 700; color: var(--navy); font-size: 0.9rem; overflow-wrap: anywhere; }
        .pay-val.code {
            font-family: 'Montserrat', monospace;
            direction: ltr;
            text-align: start;
            font-size: 0.8rem;
            letter-spacing: 0.02em;
        }
        .pay-copy {
            flex-shrink: 0;
            width: 42px;
            height: 42px;
            border: 1.5px solid var(--line);
            background: var(--bg);
            border-radius: 10px;
            cursor: pointer;
            font-size: 1rem;
            transition: border-color 0.2s ease, background 0.2s ease;
        }
        .pay-copy:hover { border-color: var(--teal); background: var(--teal-tint); }
        html[data-theme="dark"] .pay-box h3,
        html[data-theme="dark"] .pay-val { color: #8FCBE3; }

        /* ===================== الأسئلة الشائعة ===================== */
        .faq-list { display: flex; flex-direction: column; gap: 0.8rem; max-width: 860px; }
        .faq-item {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 14px;
            box-shadow: var(--shadow-soft);
            overflow: hidden;
        }
        .faq-item summary {
            list-style: none;
            cursor: pointer;
            padding: 1.05rem 1.3rem;
            font-weight: 700;
            color: var(--navy);
            font-size: 0.98rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            transition: background 0.2s ease;
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary:hover { background: var(--teal-tint); }
        .faq-item summary .faq-arrow {
            flex-shrink: 0;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--teal-tint);
            color: var(--teal-deep);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            transition: transform 0.25s ease, background 0.25s ease;
        }
        .faq-item[open] summary .faq-arrow { transform: rotate(45deg); background: var(--teal); color: #FFF; }
        .faq-item .faq-body {
            padding: 0 1.3rem 1.2rem;
            color: var(--ink-soft);
            font-size: 0.92rem;
        }
        .faq-item .faq-body b { color: var(--navy); }

        /* ===================== تواصل معنا ===================== */
        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 1.2rem;
        }
        .contact-card {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 1.5rem 1.3rem;
            text-align: center;
            box-shadow: var(--shadow-soft);
            text-decoration: none;
            color: var(--ink);
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
            display: block;
        }
        .contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--teal); }
        .contact-card .c-icon {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            margin: 0 auto 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .contact-card h3 { color: var(--navy); font-size: 1rem; font-weight: 800; margin-bottom: 0.25rem; }
        .contact-card p { color: var(--ink-soft); font-size: 0.85rem; direction: ltr; overflow-wrap: anywhere; }
        .contact-card p.rtl-txt { direction: rtl; }

        /* ===================== الفوتر ===================== */
        footer {
            background: linear-gradient(180deg, var(--navy-deep), var(--navy-ink));
            color: rgba(255,255,255,0.78);
            margin-top: 3.5rem;
            /* خلوص سفلي يمنع الأزرار العائمة من تغطية نص الفوتر عند أقصى تمرير */
            padding: 3rem 1.5rem calc(1.5rem + 72px);
        }
        .footer-grid {
            max-width: 1200px;
            margin: 0 auto 2rem;
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }
        @media (min-width: 820px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
        .foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
        .foot-chip {
            background: #FFFFFF;
            width: 58px;
            height: 58px;
            border-radius: 14px;
            padding: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 14px rgba(0,0,0,0.25);
        }
        .foot-chip img { width: 100%; height: 100%; object-fit: contain; display: block; }
        .foot-name {
            font-family: 'Montserrat', 'Cairo', sans-serif;
            color: #FFFFFF;
            font-weight: 800;
            font-size: 1.05rem;
        }
        .foot-en {
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 0.66rem;
            letter-spacing: 0.22em;
            color: #8FD8CF;
        }
        .foot-brand p { font-size: 0.86rem; max-width: 320px; }
        footer h4 { color: #FFFFFF; font-weight: 800; font-size: 0.95rem; margin-bottom: 0.9rem; }
        .foot-links { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
        .foot-links a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.86rem; transition: color 0.2s ease; }
        .foot-links a:hover { color: #A9E8E0; }
        .foot-contact { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.85rem; }
        .foot-contact li { display: flex; gap: 0.55rem; align-items: flex-start; min-width: 0; }
        .foot-contact span { overflow-wrap: anywhere; }
        .foot-contact svg { flex-shrink: 0; margin-top: 0.35rem; }
        .foot-bottom {
            max-width: 1200px;
            margin: 0 auto;
            border-top: 1px solid rgba(255,255,255,0.14);
            padding-top: 1.2rem;
            text-align: center;
            font-size: 0.8rem;
        }

        /* ===================== سلة الطلب (Drawer) ===================== */
        .drawer-overlay {
            position: fixed;
            inset: 0;
            background: rgba(16,57,74,0.55);
            backdrop-filter: blur(2px);
            z-index: 120;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .drawer-overlay.open { opacity: 1; pointer-events: auto; }
        .cart-drawer {
            position: fixed;
            top: 0;
            bottom: 0;
            inset-inline-end: 0;
            width: min(400px, 94vw);
            background: var(--card);
            z-index: 130;
            transform: translateX(-110%);
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
            display: flex;
            flex-direction: column;
            box-shadow: 12px 0 40px rgba(16,57,74,0.25);
        }
        [dir="rtl"] .cart-drawer { transform: translateX(-110%); }
        .cart-drawer.open { transform: translateX(0); }
        .drawer-head {
            background: linear-gradient(135deg, var(--navy), var(--navy-deep));
            color: #FFFFFF;
            padding: 1.1rem 1.4rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }
        .drawer-head h3 { font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
        .drawer-close {
            background: rgba(255,255,255,0.12);
            border: none;
            color: #FFFFFF;
            width: 34px;
            height: 34px;
            border-radius: 10px;
            font-size: 1.1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .drawer-close:hover { background: rgba(255,255,255,0.25); }
        .drawer-body { flex: 1; overflow-y: auto; padding: 1.1rem 1.3rem; }
        .cart-empty { text-align: center; color: var(--ink-soft); padding: 2.5rem 1rem; font-size: 0.92rem; }
        .cart-empty svg { margin-bottom: 0.8rem; opacity: 0.55; }
        .cart-item {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            padding: 0.8rem 0;
            border-bottom: 1px dashed var(--line);
        }
        .cart-item:last-child { border-bottom: none; }
        .cart-item-info { flex: 1; min-width: 0; }
        .cart-item-info b { display: block; color: var(--navy); font-size: 0.88rem; font-weight: 700; line-height: 1.55; }
        .cart-item-info span { font-size: 0.76rem; color: var(--ink-soft); }
        .cart-item .qty-stepper { transform: scale(0.92); transform-origin: center right; }
        .cart-remove {
            background: none;
            border: none;
            color: #C0392B;
            cursor: pointer;
            padding: 0.3rem;
            border-radius: 8px;
            display: flex;
        }
        .cart-remove:hover { background: rgba(192,57,43,0.1); }
        .drawer-foot {
            border-top: 1px solid var(--line);
            padding: 1rem 1.3rem 1.2rem;
            background: var(--bg);
        }
        .cart-total-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: 0.35rem;
        }
        .cart-total-note { font-size: 0.74rem; color: var(--ink-soft); margin-bottom: 0.8rem; }
        .drawer-foot .btn { margin-bottom: 0.45rem; }

        /* ===================== أزرار عائمة + شريط الموبايل ===================== */
        .fab {
            position: fixed;
            bottom: 1.4rem;
            z-index: 80;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 26px rgba(16,57,74,0.3);
            cursor: pointer;
            border: none;
            transition: transform 0.2s ease;
            text-decoration: none;
        }
        .fab:hover { transform: translateY(-3px) scale(1.05); }
        .fab-cart { inset-inline-end: 1.4rem; background: linear-gradient(135deg, var(--navy), var(--navy-deep)); }
        .fab-cart .cart-count { border-color: #FFFFFF; }

        /* حزمة التواصل السريع العائمة: واتساب، تيليغرام، إنستغرام، اتصال */
        .quick-dial {
            position: fixed;
            bottom: 1.4rem;
            inset-inline-start: 1.4rem;
            z-index: 80;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.6rem;
        }
        .quick-dial .fab { position: static; }
        .qd-menu {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.6rem;
            opacity: 0;
            transform: translateY(14px);
            pointer-events: none;
            visibility: hidden;   /* يخرج الروابط المخفية من ترتيب التنقل بلوحة المفاتيح */
            /* الإخفاء يتأخر حتى نهاية التلاشي، والإظهار فوري */
            transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
        }
        .quick-dial.open .qd-menu {
            opacity: 1;
            transform: none;
            pointer-events: auto;
            visibility: visible;
            transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
        }
        .qd-btn {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 20px rgba(16,57,74,0.28);
            transition: transform 0.2s ease;
        }
        .qd-btn:hover { transform: translateY(-3px) scale(1.05); }
        .qd-wa  { background: linear-gradient(135deg, var(--wa-deep), #12813E); }
        .qd-tg  { background: linear-gradient(135deg, #2AABEE, #1B8AC4); }
        .qd-ig  { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
        .qd-tel { background: linear-gradient(135deg, var(--navy), var(--navy-deep)); }
        .qd-main { background: linear-gradient(135deg, var(--teal-deep), #116357); }
        .qd-main .icon-close { display: none; }
        .quick-dial.open .qd-main .icon-chat { display: none; }
        .quick-dial.open .qd-main .icon-close { display: block; }

        .bottom-bar {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 85;
            background: #FFFFFF;
            border-top: 1px solid var(--line);
            box-shadow: 0 -6px 24px rgba(16,57,74,0.1);
            padding: 0.35rem 0.3rem calc(0.35rem + env(safe-area-inset-bottom));
        }
        .bottom-bar-inner { display: flex; justify-content: space-around; align-items: stretch; }
        .bb-item {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.15rem;
            padding: 0.35rem 0.2rem;
            text-decoration: none;
            color: var(--ink-soft);
            font-size: 0.66rem;
            font-weight: 600;
            border: none;
            background: none;
            cursor: pointer;
            font-family: inherit;
            border-radius: 10px;
            position: relative;
        }
        .bb-item:hover, .bb-item.active { color: var(--teal-deep); background: var(--teal-tint); }
        .bb-item.bb-wa { color: var(--wa-deep); }
        .bb-item .bb-count {
            position: absolute;
            top: 0;
            inset-inline-end: calc(50% - 20px);
            background: var(--orange);
            color: var(--navy-ink);
            font-size: 0.6rem;
            font-weight: 800;
            min-width: 16px;
            height: 16px;
            padding: 0 3px;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Montserrat', sans-serif;
        }
        .bb-item .bb-count.hidden { display: none; }

        /* ===================== صفحة المنتج ===================== */
        .product-card { cursor: pointer; }
        .product-card:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
        .product-card .product-name { transition: color 0.2s ease; }
        .product-card:hover .product-name { color: var(--teal-deep); }
        .product-media img.p-photo { width: 100%; height: 100%; object-fit: cover; }
        .pp-overlay {
            position: fixed;
            inset: 0;
            background: rgba(16,57,74,0.6);
            backdrop-filter: blur(3px);
            z-index: 140;
            display: none;
            overflow-y: auto;
            padding: clamp(0.8rem, 3vw, 2.5rem);
        }
        .pp-overlay.open { display: block; }
        .pp-card {
            max-width: 980px;
            margin: 0 auto;
            background: var(--card);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: 0 30px 80px rgba(16,57,74,0.4);
        }
        .pp-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.9rem 1.3rem;
            background: linear-gradient(135deg, var(--navy), var(--navy-deep));
            color: #FFFFFF;
        }
        .pp-top .pp-crumb { font-size: 0.8rem; color: #8FD8CF; font-weight: 600; }
        .pp-close {
            background: rgba(255,255,255,0.12);
            border: none;
            color: #FFFFFF;
            width: 34px;
            height: 34px;
            border-radius: 10px;
            font-size: 1.1rem;
            cursor: pointer;
            flex-shrink: 0;
        }
        .pp-close:hover { background: rgba(255,255,255,0.25); }
        .pp-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.6rem;
            padding: 1.5rem;
        }
        @media (min-width: 780px) { .pp-grid { grid-template-columns: 1fr 1.15fr; padding: 2rem; } }
        .pp-gallery-main {
            background: linear-gradient(135deg, var(--teal-tint), #F0F7FA);
            border: 1px solid var(--line);
            border-radius: 14px;
            height: clamp(200px, 58vw, 280px);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .pp-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
        .pp-gallery-main svg { width: 90px; height: 90px; opacity: 0.7; }
        .pp-thumbs { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
        .pp-thumb {
            width: 58px;
            height: 58px;
            border-radius: 10px;
            border: 2px solid var(--line);
            overflow: hidden;
            cursor: pointer;
            padding: 0;
            background: var(--bg);
        }
        .pp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .pp-thumb.active { border-color: var(--teal); }
        .pp-info h2 { font-size: 1.45rem; margin-bottom: 0.2rem; }
        .pp-info h2::after { display: none; }
        .pp-en { font-family: 'Montserrat', sans-serif; color: var(--ink-soft); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em; }
        .pp-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.9rem 0; }
        .pp-badges .badge { position: static; }
        .pp-desc {
            color: var(--ink-soft);
            font-size: 0.95rem;
            background: var(--bg);
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 0.9rem 1.1rem;
            margin-bottom: 1.1rem;
        }
        .pp-price-row { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; }
        .pp-price-row .price { font-size: 1.35rem; }
        .pp-actions { display: flex; flex-direction: column; gap: 0.55rem; }
        .pp-related { border-top: 1px solid var(--line); padding: 1.3rem 1.5rem 1.7rem; }
        @media (min-width: 780px) { .pp-related { padding-inline: 2rem; } }
        .pp-related h4 { color: var(--navy); font-weight: 800; margin-bottom: 0.8rem; font-size: 1rem; }
        .pp-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
        .pp-rel-card {
            background: var(--bg);
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 0.7rem 0.85rem;
            cursor: pointer;
            transition: border-color 0.2s ease, transform 0.2s ease;
            text-align: start;
            font-family: inherit;
        }
        .pp-rel-card:hover { border-color: var(--teal); transform: translateY(-2px); }
        .pp-rel-card b { display: block; color: var(--navy); font-size: 0.82rem; line-height: 1.5; margin-bottom: 0.2rem; }
        .pp-rel-card span { font-size: 0.72rem; color: var(--ink-soft); }

        /* ===================== لوحة التحكم ===================== */
        .admin-overlay {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 160;
            display: none;
            flex-direction: column;
        }
        .admin-overlay.open { display: flex; }
        .admin-head {
            background: linear-gradient(135deg, var(--navy), var(--navy-deep));
            color: #FFFFFF;
            padding: 0.85rem 1.3rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-shrink: 0;
        }
        .admin-head h2 { color: #FFFFFF; font-size: 1.05rem; }
        .admin-head h2::after { display: none; }
        .admin-head .a-sub { font-size: 0.7rem; color: #8FD8CF; letter-spacing: 0.12em; font-weight: 600; }
        .admin-tabs {
            display: flex;
            gap: 0.3rem;
            padding: 0.6rem 1.3rem 0;
            background: var(--card);
            border-bottom: 1px solid var(--line);
            overflow-x: auto;
            flex-shrink: 0;
        }
        .admin-tab {
            font-family: inherit;
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--ink-soft);
            background: none;
            border: none;
            border-bottom: 3px solid transparent;
            padding: 0.55rem 1rem;
            cursor: pointer;
            white-space: nowrap;
        }
        .admin-tab:hover { color: var(--teal-deep); }
        .admin-tab.active { color: var(--navy); border-bottom-color: var(--teal); }
        .admin-body { flex: 1; overflow-y: auto; padding: 1.3rem; }
        .admin-body .inner { max-width: 1050px; margin: 0 auto; }
        .a-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; margin-bottom: 1.4rem; }
        .a-stat {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 1rem 1.1rem;
            box-shadow: var(--shadow-soft);
        }
        .a-stat b { display: block; font-family: 'Montserrat', 'Cairo', sans-serif; font-size: 1.5rem; color: var(--navy); }
        .a-stat span { font-size: 0.78rem; color: var(--ink-soft); }
        .a-row {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 0.75rem 1rem;
            margin-bottom: 0.55rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
            flex-wrap: wrap;
        }
        .a-row .a-thumb {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: var(--teal-tint);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            flex-shrink: 0;
        }
        .a-row .a-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .a-row .a-thumb svg { width: 24px; height: 24px; }
        .a-row .a-main { flex: 1; min-width: 180px; }
        .a-row .a-main b { display: block; color: var(--navy); font-size: 0.9rem; line-height: 1.5; }
        .a-row .a-main span { font-size: 0.74rem; color: var(--ink-soft); }
        .a-row .a-acts { display: flex; gap: 0.4rem; flex-wrap: wrap; }
        .a-btn {
            font-family: inherit;
            font-size: 0.78rem;
            font-weight: 700;
            padding: 0.35rem 0.85rem;
            border-radius: 999px;
            border: 1.5px solid var(--line);
            background: var(--card);
            color: var(--navy);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .a-btn:hover { border-color: var(--teal); color: var(--teal-deep); }
        .a-btn.danger { color: #C0392B; }
        .a-btn.danger:hover { border-color: #C0392B; background: rgba(192,57,43,0.06); }
        .a-btn.solid { background: linear-gradient(135deg, var(--teal-deep), #116357); border-color: transparent; color: #FFFFFF; }
        .a-form {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 1.3rem;
            margin-bottom: 1.2rem;
            box-shadow: var(--shadow-soft);
        }
        .a-form h3 { color: var(--navy); font-size: 1rem; font-weight: 800; margin: 0 0 0.9rem; }
        .a-imgs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
        .a-img {
            position: relative;
            width: 64px;
            height: 64px;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid var(--line);
        }
        .a-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .a-img button {
            position: absolute;
            top: 2px;
            inset-inline-start: 2px;
            width: 20px;
            height: 20px;
            border-radius: 6px;
            border: none;
            background: rgba(192,57,43,0.9);
            color: #FFF;
            font-size: 0.7rem;
            cursor: pointer;
            line-height: 1;
        }
        .a-status {
            font-family: inherit;
            font-size: 0.78rem;
            font-weight: 700;
            border-radius: 999px;
            padding: 0.25rem 0.6rem;
            border: 1.5px solid var(--line);
            background: var(--bg);
            color: var(--ink);
        }
        .a-note {
            background: var(--orange-tint);
            border: 1px dashed rgba(242,151,39,0.5);
            border-radius: 12px;
            padding: 0.8rem 1.1rem;
            font-size: 0.82rem;
            color: var(--ink-soft);
            margin-bottom: 1.1rem;
        }
        .a-note b { color: var(--orange-deep); }
        .admin-login {
            max-width: 380px;
            margin: 8vh auto 0;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lift);
            padding: 2rem 1.7rem;
            text-align: center;
        }
        .admin-login h3 { color: var(--navy); font-weight: 800; margin-bottom: 0.4rem; }
        .admin-login p { color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 1.1rem; }
        .foot-admin-link { color: rgba(255,255,255,0.45); text-decoration: none; font-size: 0.75rem; }
        .foot-admin-link:hover { color: #A9E8E0; }

        /* ===================== توست ===================== */
        .toast {
            position: fixed;
            bottom: 5.6rem;
            inset-inline-start: 50%;
            transform: translateX(50%) translateY(20px);
            background: var(--navy-ink);
            color: #FFFFFF;
            padding: 0.7rem 1.4rem;
            border-radius: 999px;
            font-size: 0.88rem;
            font-weight: 600;
            z-index: 200;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease, transform 0.3s ease;
            box-shadow: 0 12px 30px rgba(16,57,74,0.35);
            max-width: 92vw;
            text-align: center;
        }
        [dir="rtl"] .toast { transform: translateX(50%) translateY(20px); }
        .toast.show { opacity: 1; transform: translateX(50%) translateY(0); }
        /* أنواع الإشعارات: نجاح (تركوازي) وتنبيه (كهرماني) بهوية الموقع */
        .toast.t-success { background: linear-gradient(135deg, var(--teal-deep), #116357); }
        .toast.t-warn    { background: linear-gradient(135deg, #B36607, #8A4E04); }

        /* ===================== ظهور تدريجي ===================== */
        .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
        .reveal.visible { opacity: 1; transform: translateY(0); }
        /* دخول سلس لبطاقات الشبكات عند كل فلترة أو بحث */
        @keyframes cardIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: none; }
        }
        .products-grid .product-card,
        .deals-grid .deal-card { animation: cardIn 0.35s ease both; }

        /* ===================== استجابة الشاشات ===================== */
        /* ═══════════ نظام العرض الأحادي (SPA Views) ═══════════ */
        .view { display: none; }
        .view.view-active { display: block; animation: viewIn 0.3s ease both; }
        @keyframes viewIn {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: none; }
        }
        /* الواجهة وشريط الثقة يظهران في الرئيسية فقط */
        body:not([data-view="home"]) header.hero,
        body:not([data-view="home"]) .trust-strip { display: none; }
        .section-num { display: none; }   /* الترقيم القديم لا معنى له داخل التبويبات */
        main .container { padding-top: 1.6rem; }

        /* تبويبات المتجر الموحد */
        .store-tabs {
            position: sticky;
            top: 62px;
            z-index: 40;
            display: flex;
            gap: 0.4rem;
            flex-wrap: wrap;
            background: var(--bg);
            padding: 0.6rem 0;
            margin-bottom: 1rem;
            border-bottom: 1px solid var(--line);
        }
        .store-tab {
            font-family: inherit;
            font-weight: 700;
            font-size: 0.86rem;
            padding: 0.5rem 1.15rem;
            border-radius: 999px;
            border: 1.5px solid var(--line);
            background: var(--card);
            color: var(--ink-soft);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .store-tab:hover { border-color: var(--teal); color: var(--teal-deep); }
        .store-tab.active {
            background: linear-gradient(135deg, var(--teal-deep), #116357);
            border-color: transparent;
            color: #FFFFFF;
            box-shadow: 0 4px 12px rgba(34,166,153,0.3);
        }
        @media (max-width: 640px) {
            .store-tabs {
                top: 56px;
                flex-wrap: nowrap;
                overflow-x: auto;
                scrollbar-width: none;
                margin-inline: -1.25rem;
                padding-inline: 1.25rem;
            }
            .store-tabs::-webkit-scrollbar { display: none; }
            .store-tab { flex: 0 0 auto; }
        }

        /* أكورديون «تعرف علينا» في الرئيسية */
        .about-acc {
            scroll-margin-top: 80px;   /* كي لا يختفي رأس الأكورديون خلف الشريط اللاصق */
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow-soft);
            margin-bottom: 1rem;
            overflow: hidden;
        }
        .about-acc > summary {
            list-style: none;
            cursor: pointer;
            padding: 1.05rem 1.3rem;
            font-weight: 800;
            color: var(--navy);
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }
        .about-acc > summary::-webkit-details-marker { display: none; }
        .about-acc > summary:hover { background: var(--teal-tint); }
        .about-acc > summary .faq-arrow { flex-shrink: 0; }
        .about-acc[open] > summary .faq-arrow { transform: rotate(45deg); background: var(--teal); color: #FFF; }
        .about-acc .acc-body { padding: 0 1.3rem 1.3rem; }
        .about-acc .acc-body section { margin-bottom: 0; scroll-margin-top: 0; }
        .about-acc .section-head, .about-acc h2 { display: none; }   /* العنوان في السطر القابل للطي */
        html[data-theme="dark"] .about-acc > summary { color: #8FCBE3; }

        /* مركز المساعدة المنبثق */
        .help-overlay {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 150;
            display: none;
            flex-direction: column;
        }
        .help-overlay.open { display: flex; animation: viewIn 0.25s ease both; }
        .help-head {
            background: linear-gradient(135deg, var(--navy), var(--navy-deep));
            color: #FFFFFF;
            padding: 1rem 1.4rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-shrink: 0;
        }
        .help-head h3 { font-size: 1.05rem; font-weight: 800; margin: 0; }
        .help-body {
            flex: 1;
            overflow-y: auto;
            padding: 1.6rem clamp(1.25rem, 4vw, 3rem) 3rem;
            max-width: 1000px;
            width: 100%;
            margin: 0 auto;
        }
        .help-body section { margin-bottom: 2.2rem; scroll-margin-top: 0; }

        /* السلة بخطوتين: الخطوة الثانية (نموذج الطلب) */
        .drawer-step2 { display: flex; flex-direction: column; gap: 0.9rem; }
        .drawer-step2[hidden] { display: none; }
        .drawer-step2 .order-form-card { padding: 1.1rem 1rem; box-shadow: none; border: none; background: transparent; }
        .drawer-step2 .form-grid { grid-template-columns: 1fr; }
        .drawer-step2 .order-summary-box { margin-bottom: 0.8rem; }
        .drawer-step2 .pay-box { margin-top: 0.9rem; }
        #drawerBack { align-self: flex-start; margin: 0.2rem 0 0; }

        /* كاروسيل أفقي بالتقاط سلس على الموبايل (تقليل التمرير العمودي) */
        @media (max-width: 640px) {
            .kits-grid, .deals-grid, .why-grid {
                display: flex;
                grid-template-columns: none;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                gap: 0.9rem;
                margin-inline: -1.25rem;
                padding-inline: 1.25rem;
                padding-bottom: 0.5rem;
            }
            .kits-grid::-webkit-scrollbar, .deals-grid::-webkit-scrollbar, .why-grid::-webkit-scrollbar { display: none; }
            .kits-grid > *, .deals-grid > *, .why-grid > * {
                flex: 0 0 80%;
                scroll-snap-align: center;
            }
            .trust-inner {
                display: flex;
                grid-template-columns: none;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scrollbar-width: none;
                gap: 0.8rem;
                padding-bottom: 0.2rem;
            }
            .trust-inner::-webkit-scrollbar { display: none; }
            .trust-inner .trust-item { flex: 0 0 44%; scroll-snap-align: center; }
        }

        /* اقتطاع وصف المنتج في صفحته مع «قراءة المزيد» */
        .pp-desc.clamped {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .pp-readmore {
            background: none;
            border: none;
            color: var(--teal-deep);
            font-family: inherit;
            font-weight: 700;
            font-size: 0.82rem;
            cursor: pointer;
            padding: 0.2rem 0;
            text-decoration: underline dotted;
        }

        /* ═══════════ الوضع الداكن — تحويل آمن للبطاقات والنماذج ═══════════ */
        #themeBtn .icon-sun { display: none; }
        html[data-theme="dark"] #themeBtn .icon-moon { display: none; }
        html[data-theme="dark"] #themeBtn .icon-sun { display: block; }
        html[data-theme="dark"] {
            --bg:          #0D1B24;
            --card:        #152A3A;
            --ink:         #E8F1F5;
            --ink-soft:    #9DB9C6;
            --line:        #234050;
            --teal-tint:   #10333A;
            --orange-tint: #3A2A12;
            --shadow-soft: 0 10px 30px rgba(0,0,0,0.35);
            --shadow-lift: 0 18px 42px rgba(0,0,0,0.5);
        }
        html[data-theme="dark"] body { background-color: var(--bg); }
        /* النصوص الكحلية على الأسطح الداكنة تتحول لأزرق فاتح مقروء */
        html[data-theme="dark"] h2,
        html[data-theme="dark"] header.hero h1,
        html[data-theme="dark"] .hero-stat b,
        html[data-theme="dark"] .hero-motto .m-navy,
        html[data-theme="dark"] .product-name,
        html[data-theme="dark"] .price,
        html[data-theme="dark"] .cart-item-info b,
        html[data-theme="dark"] .cart-total-row,
        html[data-theme="dark"] .order-summary-box b,
        html[data-theme="dark"] .order-summary-box li b,
        html[data-theme="dark"] .form-field label,
        html[data-theme="dark"] .why-card h3,
        html[data-theme="dark"] .contact-card h3,
        html[data-theme="dark"] .order-side-card h3,
        html[data-theme="dark"] .kit-note b,
        html[data-theme="dark"] .faq-item summary,
        html[data-theme="dark"] .faq-item .faq-body b,
        html[data-theme="dark"] .flow-step,
        html[data-theme="dark"] .cat-divider h3,
        html[data-theme="dark"] .no-results b,
        html[data-theme="dark"] .qty-stepper button,
        html[data-theme="dark"] .pp-info h2,
        html[data-theme="dark"] .pp-desc b,
        html[data-theme="dark"] p strong { color: #8FCBE3 !important; }
        html[data-theme="dark"] .section-num,
        html[data-theme="dark"] .hero-eyebrow,
        html[data-theme="dark"] .faq-item summary .faq-arrow,
        html[data-theme="dark"] .cat-divider .cd-count { color: #58D0C2; }
        html[data-theme="dark"] .price-ask { color: #FFB35C; }
        html[data-theme="dark"] .badge-src,
        html[data-theme="dark"] .src-tag {
            background: rgba(143,203,227,0.1);
            color: #A8D8EA;
            border-color: rgba(143,203,227,0.25);
        }
        html[data-theme="dark"] .btn-ghost { color: #8FCBE3; border-color: #8FCBE3; }
        html[data-theme="dark"] .btn-ghost:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #FFFFFF; }
        html[data-theme="dark"] .product-media,
        html[data-theme="dark"] .pp-gallery-main {
            background: linear-gradient(135deg, #10333A, #0F2530);
        }
        html[data-theme="dark"] .form-field input:focus,
        html[data-theme="dark"] .form-field select:focus,
        html[data-theme="dark"] .form-field textarea:focus { background: #1A3242; }
        html[data-theme="dark"] .form-field input.invalid,
        html[data-theme="dark"] .form-field textarea.invalid,
        html[data-theme="dark"] .form-field select.invalid { background: #3A1512; }
        html[data-theme="dark"] .bottom-bar {
            background: #12242F;
            box-shadow: 0 -6px 24px rgba(0,0,0,0.45);
        }
        html[data-theme="dark"] .bb-item:hover,
        html[data-theme="dark"] .bb-item.active { color: #58D0C2; }
        html[data-theme="dark"] .season-banner .btn { color: var(--orange-deep); }
        html[data-theme="dark"] .hero-ring { opacity: 0.5; }
        html[data-theme="dark"] .brand-chip,
        html[data-theme="dark"] .foot-chip { box-shadow: 0 2px 8px rgba(0,0,0,0.5); }

        /* ═══════════ تحويلات الاتجاه للنسخة الإنكليزية (LTR) ═══════════ */
        [dir="ltr"] body { font-family: 'Montserrat', 'Tajawal', sans-serif; }
        [dir="ltr"] .kit-body li { padding-right: 0; padding-left: 1.5rem; }
        [dir="ltr"] .kit-body li::before { right: auto; left: 0; }
        [dir="ltr"] .search-box input { padding: 0.75rem 1.1rem 0.75rem 2.8rem; }
        [dir="ltr"] .search-box svg { right: auto; left: 1rem; }
        [dir="ltr"] .badge { right: auto; left: 0.7rem; }
        [dir="ltr"] .badge-src { right: auto; left: auto; }
        [dir="ltr"] .toast { transform: translateX(-50%) translateY(20px); }
        [dir="ltr"] .toast.show { transform: translateX(-50%) translateY(0); }
        [dir="ltr"] .cart-drawer { transform: translateX(110%); }
        [dir="ltr"] .cart-drawer.open { transform: translateX(0); }
        [dir="ltr"] .contact-line:hover { transform: translateX(3px); }
        [dir="ltr"] .cart-item .qty-stepper { transform-origin: center left; }
        @media (min-width: 900px) {
            [dir="ltr"] .flow-step:not(:last-child)::after {
                content: "→";
                left: auto;
                right: -1.45rem;
            }
        }

        @media (min-width: 961px) {
            .mobile-menu { display: none !important; }
        }
        @media (max-width: 960px) {
            .topnav-links { display: none; }
            .menu-btn { display: flex; }
            .trust-inner { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 640px) {
            body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
            .filter-chips {
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                padding-bottom: 0.3rem;
                margin-inline: -1.25rem;
                padding-inline: 1.25rem;
            }
            .filter-chips::-webkit-scrollbar { display: none; }
            .filter-chips .chip { flex: 0 0 auto; }
            .bottom-bar { display: block; }
            .fab { bottom: 5.2rem; }
            .quick-dial { bottom: calc(5.2rem + env(safe-area-inset-bottom)); }
            .fab-cart { display: none; }
            .trust-inner { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
            .trust-item { justify-content: center; text-align: center; flex-direction: column; gap: 0.35rem; }
            .form-grid { grid-template-columns: 1fr; }
            .hero-cta .btn { width: 100%; }
            .season-banner { text-align: center; justify-content: center; }
            .products-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 0.8rem; }
            .product-media { height: 96px; }
            .product-foot { flex-wrap: wrap; }
            .product-foot .btn { width: 100%; }
            /* توسيط العناوين وفقرات التقديم على الموبايل (ضمن المحتوى الرئيسي فقط) */
            .section-head { justify-content: center; text-align: center; }
            main h2 { text-align: center; }
            main h2::after { margin-inline: auto; }
            .section-sub { text-align: center; margin-inline: auto; }
            .cat-divider { justify-content: center; text-align: center; }
            .cat-divider .cd-count { margin-inline-start: 0; }
            .avail-legend { justify-content: center; }
            .search-box { margin-inline: auto; }
            .kit-note { flex-direction: column; align-items: center; text-align: center; }
            /* أهداف لمس مريحة ≥44px */
            .btn { padding: 0.85rem 1.5rem; }
            .btn-sm { padding: 0.62rem 1.1rem; }
            .chip { padding: 0.55rem 1.05rem; }
            .qty-stepper button { width: 40px; height: 44px; }
            .qty-stepper .qty-val { min-width: 30px; }
            .faq-item summary { padding: 1.1rem 1.3rem; }
        }
        @media (max-width: 380px) {
            .bb-item { font-size: 0.6rem; padding: 0.35rem 0.05rem; }
            .bottom-bar { padding-inline: 0.15rem; }
        }
        @media (max-width: 420px) {
            .topnav-inner { padding: 0.5rem 0.7rem; gap: 0.4rem; }
            .brand { font-size: 0.8rem; gap: 0.4rem; min-width: 0; flex-shrink: 1; }
            .brand > span:last-child { white-space: normal; line-height: 1.3; }
            .brand small { display: none; }
            .brand-chip { width: 36px; height: 36px; }
            .nav-actions { flex-shrink: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            * { transition: none !important; animation: none !important; }
            .reveal { opacity: 1; transform: none; }
        }