/* ===================================
       WMSTORE - CLEAN CSS (No Duplicates)
       Duplicates removed, last-wins merged
    =================================== */

    /* 1) VARIABLES */
    :root {
        --primary: #00d4aa;
        --primary-dark: #00b890;
        --secondary: #1a1a1a;
        --accent: #ff6b6b;
        --text: #2d2d2d;
        --text-light: #666;
        --bg: #ffffff;
        --bg-alt: #f8f9fa;
        --border: #e0e0e0;
        --shadow: rgba(0,0,0,.1);
        --shadow-lg: rgba(0,0,0,.15);
        --gradient-yellow: linear-gradient(135deg,#ffd900 0%,#ffaa00 100%);
        --gradient-blue: linear-gradient(135deg,#00b4d8 0%,#0077b6 100%);
        --gradient-purple: linear-gradient(135deg,#a855f7 0%,#7c3aed 100%);
        --gradient-green: linear-gradient(135deg,#10b981 0%,#059669 100%);
        --transition: all .3s cubic-bezier(.4,0,.2,1);
        --success: #10b981;
        --warning: #f59e0b;
        --danger: #ef4444;
        --info: #6366f1;
        --cartW: 420px;
        --header-h: 140px;
        --header-h-mobile: 70px;
        --ssc-bg: #ffffff;
        --ssc-text: #111827;
        --ssc-muted: #6b7280;
        --ssc-border: #e5e7eb;
        --ssc-shadow: 0 10px 30px rgba(0,0,0,.08);
        --ssc-radius: 999px
    }

    /* 2) RESET */
    *, *::before, *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box
    }

    html {
        scroll-behavior: smooth;
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
        overflow-x: hidden
    }

    body {
        font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
        color: var(--text);
        background: var(--bg);
        line-height: 1.5;
        overflow-x: hidden;
        font-size: 14px;
        padding-top: 10px
    }

        body.rtl {
            direction: rtl;
            text-align: right
        }

        body.auth-page {
            padding-top: 0 !important;
            overflow-x: hidden;
            min-height: 100vh;
            background: radial-gradient(900px 500px at 10% 10%,rgba(0,212,170,.22),transparent 55%),radial-gradient(900px 500px at 90% 90%,rgba(0,212,170,.18),transparent 55%),linear-gradient(135deg,rgba(0,212,170,.18),rgba(0,184,144,.22));
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 28px 14px
        }

            body.auth-page .header, body.auth-page header.header {
                display: none !important
            }

    .container {
        max-width: 1200px;
        margin-inline: auto
    }

    /* 3) HEADER */
    .header, .header * {
        box-sizing: border-box
    }

    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: rgba(255,255,255,.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--border);
        transition: box-shadow .3s ease
    }

        .header.scrolled {
            box-shadow: 0 2px 16px rgba(0,0,0,.1)
        }

        .header a, .header a:visited, .header a:hover, .header a:active {
            text-decoration: none !important;
            color: inherit
        }

    .header-top, .search-section {
        display: none !important
    }

    .header-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        gap: 16px;
        flex-wrap: nowrap
    }

    .logo h1 {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -.5px;
        color: var(--secondary);
        white-space: nowrap
    }

    .logo span {
        color: var(--primary)
    }

    /* 4) NAV */
    .nav {
        display: flex;
        gap: 4px;
        flex: 1;
        justify-content: center;
        flex-wrap: wrap
    }

    .nav-item {
        position: relative;
        cursor: pointer;
        padding: 8px 14px;
        border-radius: 6px;
        transition: var(--transition);
        font-size: 13px;
        font-weight: 500;
        color: var(--text)
    }

        .nav-item:hover {
            background: var(--bg-alt);
            color: var(--primary)
        }

        .nav-item > span {
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 6px;
            transition: all .3s ease;
            display: flex;
            align-items: center;
            gap: 4px
        }

            .nav-item > span:hover {
                background: rgba(0,212,170,.1);
                color: var(--primary)
            }

    .nav-link {
        display: inline-block;
        padding: 8px 12px;
        border-radius: 6px;
        color: inherit;
        text-decoration: none;
        transition: var(--transition)
    }

        .nav-link:hover {
            background: rgba(0,212,170,.1);
            color: var(--primary)
        }

    .dropdown {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 20px var(--shadow-lg);
        padding: 12px;
        min-width: 180px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: var(--transition);
        z-index: 100
    }

    .nav-item:hover .dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0)
    }

    .brands-grid {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 6px
    }

    .brand-link {
        display: block;
        padding: 8px 12px;
        text-decoration: none;
        color: var(--text);
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        transition: var(--transition);
        background: var(--bg-alt);
        position: relative;
        overflow: hidden
    }

        .brand-link::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 3px;
            background: var(--primary);
            transform: scaleY(0);
            transition: transform .2s ease
        }

        .brand-link:hover {
            background: var(--primary);
            color: #fff;
            transform: translateX(3px)
        }

            .brand-link:hover::before {
                transform: scaleY(1)
            }

    /* 5) HEADER ACTIONS */
    .header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        min-width: 0
    }

    .lang-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 12px;
        border: 1px solid rgba(0,0,0,.12);
        border-radius: 12px;
        background: #fff;
        cursor: pointer;
        user-select: none;
        font-weight: 700;
        font-size: 12px;
        transition: var(--transition);
        white-space: nowrap
    }

        .lang-toggle:hover {
            border-color: var(--primary);
            transform: translateY(-1px)
        }

        .lang-toggle .sep {
            opacity: .55
        }

    .lang-ar {
        opacity: .4
    }

    body.rtl .lang-en {
        opacity: .4
    }

    body.rtl .lang-ar {
        opacity: 1
    }

    .cart-btn, .icon-pill {
        position: relative;
        width: 44px;
        height: 40px;
        min-width: 44px;
        min-height: 40px;
        padding: 0;
        border: 1px solid rgba(0,0,0,.12);
        border-radius: 12px;
        background: #fff;
        cursor: pointer;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: inherit
    }

        .cart-btn:hover, .icon-pill:hover {
            border-color: var(--primary);
            transform: translateY(-1px)
        }

    .cart-count {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--accent);
        color: #fff;
        font-size: 11px;
        font-weight: 900;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        pointer-events: none;
        animation: bounce .5s ease
    }

        .cart-count.updated {
            animation: cartPulse .4s ease
        }

    body.rtl .cart-count {
        right: auto;
        left: -6px
    }

    .auth-btn, .pill-btn {
        height: 40px;
        min-height: 40px;
        padding: 0 14px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-weight: 800;
        font-size: 13px;
        line-height: 1;
        cursor: pointer;
        white-space: nowrap;
        border: 1px solid transparent;
        transition: var(--transition);
        text-decoration: none
    }

    .pill-outline {
        background: #fff;
        border-color: rgba(0,0,0,.12);
        color: #111
    }

        .pill-outline:hover {
            border-color: var(--primary);
            color: var(--primary);
            transform: translateY(-1px)
        }

    .pill-dark, .auth-btn.dark {
        background: var(--secondary);
        color: #fff;
        border-color: transparent
    }

        .pill-dark:hover, .auth-btn.dark:hover {
            background: var(--primary);
            transform: translateY(-1px)
        }

    .auth-btn.primary {
        background: var(--primary);
        color: #fff;
        border: none
    }

        .auth-btn.primary:hover {
            background: var(--primary-dark);
            transform: translateY(-1px)
        }

    .auth-btn.outline {
        background: transparent;
        border-color: rgba(0,0,0,.12);
        color: #111
    }

        .auth-btn.outline:hover {
            border-color: var(--primary);
            color: var(--primary)
        }

    .account-text, .header-btn-text {
        max-width: 190px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .logout-form {
        display: inline-flex;
        margin: 0
    }

    /* 6) PROMO BAR */
    .promo-bar {
        position: relative;
        z-index: 100;
        background: var(--bg-alt);
        padding: 10px 0 14px;
        border-bottom: 1px solid var(--border)
    }

    .promo-scroll {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding: 4px 2px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch
    }

        .promo-scroll::-webkit-scrollbar {
            display: none
        }

    .promo-card {
        min-width: 300px;
        max-width: 520px;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 12px 14px;
        text-decoration: none;
        color: var(--text);
        transition: var(--transition);
        scroll-snap-align: start;
        position: relative;
        overflow: hidden
    }

        .promo-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,transparent,rgba(0,212,170,.1),transparent);
            transition: left .5s ease
        }

        .promo-card:hover::before {
            left: 100%
        }

        .promo-card:hover {
            border-color: var(--primary);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px var(--shadow-lg)
        }

    .promo-title {
        font-weight: 800;
        font-size: 14px
    }

    .promo-sub {
        opacity: .7;
        font-size: 12px
    }

    .promo-hint {
        margin-top: 6px;
        font-size: 12px;
        opacity: .65
    }

    .promo-cta {
        padding: 8px 14px;
        border-radius: 999px;
        background: var(--primary);
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        flex-shrink: 0;
        white-space: nowrap;
        position: relative;
        overflow: hidden
    }

        .promo-cta::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255,255,255,.3);
            transform: translate(-50%,-50%);
            transition: width .3s ease,height .3s ease
        }

    .promo-card:hover .promo-cta::after {
        width: 100px;
        height: 100px
    }

    .promo-ticker {
        position: relative;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(15,23,42,.06);
        border: 1px solid rgba(15,23,42,.10);
        box-shadow: 0 10px 25px rgba(0,0,0,.06)
    }

    .promo-ticker__track {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        white-space: nowrap;
        will-change: transform;
        animation: promo-bounce 12s ease-in-out infinite alternate
    }

    body.rtl .promo-ticker__track {
        animation-name: promo-bounce-rtl
    }

    .promo-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(0,212,170,.14);
        border: 1px solid rgba(0,212,170,.35);
        color: #0f766e;
        font-weight: 900;
        font-size: 12px
    }

    .promo-pill__dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #00d4aa;
        box-shadow: 0 0 0 4px rgba(0,212,170,.18)
    }

    .promo-text {
        color: #0b1220;
        font-weight: 900;
        font-size: 13px
    }

    .promo-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(255,217,0,.16);
        border: 1px solid rgba(255,217,0,.35);
        color: #7c5b00;
        font-weight: 900;
        font-size: 12px
    }

    .promo-sep {
        color: rgba(15,23,42,.35);
        font-weight: 900;
        margin: 0 4px
    }

    .promo-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(15,23,42,.08);
        border: 1px solid rgba(15,23,42,.12);
        color: #0b1220;
        text-decoration: none;
        font-weight: 900;
        font-size: 12px
    }

        .promo-link:hover {
            background: rgba(15,23,42,.12)
        }

    /* 7) TOP STRIP + WM PROMO (merged) */
    .wm-top-strip {
        position: sticky;
        top: 0;
        z-index: 10000;
        background: #0f172a;
        color: #fff;
        border-bottom: 1px solid rgba(255,255,255,.08)
    }

    .wm-strip {
        display: block;
        padding: 8px 0
    }

    .wm-strip__track {
        display: flex;
        gap: 10px;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none
    }

        .wm-strip__track::-webkit-scrollbar {
            height: 0
        }

    .wm-strip__item {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(255,255,255,.10);
        border: 1px solid rgba(255,255,255,.10);
        color: #fff;
        text-decoration: none;
        white-space: nowrap;
        font-weight: 700;
        font-size: 13px
    }

    .wm-strip__badge {
        padding: 5px 9px;
        border-radius: 999px;
        background: #00d4aa;
        color: #062a24;
        font-weight: 900;
        font-size: 12px
    }

    .wm-strip__text {
        opacity: .95
    }

    .wm-promo {
        position: sticky;
        top: 0;
        z-index: 9999;
        background: #0b1220;
        border-bottom: 1px solid rgba(255,255,255,.08)
    }

    .wm-promo__inner {
        height: 42px;
        display: flex;
        align-items: center
    }

    .wm-promo__viewport {
        position: relative;
        width: 100%;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.10);
        height: 34px;
        display: flex;
        align-items: center;
        padding: 0 10px
    }

        .wm-promo__viewport::before, .wm-promo__viewport::after {
            content: "";
            position: absolute;
            top: 0;
            width: 44px;
            height: 100%;
            pointer-events: none;
            z-index: 2
        }

        .wm-promo__viewport::before {
            left: 0;
            background: linear-gradient(to right,#0b1220 0%,rgba(11,18,32,0) 100%)
        }

        .wm-promo__viewport::after {
            right: 0;
            background: linear-gradient(to left,#0b1220 0%,rgba(11,18,32,0) 100%)
        }

    .wm-promo__track {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        white-space: nowrap;
        will-change: transform;
        transform: translateX(0);
        padding: 0 40px
    }

    .wm-promo__chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(0,212,170,.14);
        border: 1px solid rgba(0,212,170,.25);
        font-weight: 800;
        font-size: 12px;
        letter-spacing: .2px;
        color: #eafffb
    }

    .wm-promo__dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #00d4aa;
        box-shadow: 0 0 0 4px rgba(0,212,170,.15)
    }

    .wm-promo__msg {
        color: rgba(255,255,255,.92);
        font-weight: 700;
        font-size: 13px
    }

    .wm-promo__off {
        color: #0b1220;
        background: #ffd900;
        border-radius: 999px;
        padding: 5px 10px;
        font-weight: 900;
        font-size: 12px
    }

    .wm-promo__cta {
        color: #0b1220;
        background: #00d4aa;
        border-radius: 999px;
        padding: 6px 10px;
        font-weight: 900;
        font-size: 12px;
        text-decoration: none;
        border: 1px solid rgba(0,0,0,.08)
    }

    .wm-promo__sep {
        opacity: .6;
        color: #fff;
        font-weight: 700
    }

    .wm-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        border-radius: 999px;
        font-weight: 900;
        font-size: 13px;
        letter-spacing: .2px;
        user-select: none
    }

        .wm-chip strong {
            font-weight: 950
        }

    .wm-chip--dark {
        background: rgba(15,23,42,.92);
        color: #fff
    }

    .wm-chip--light {
        background: rgba(255,255,255,.92);
        color: #0b1220;
        border: 1px solid rgba(15,23,42,.10)
    }

    .wm-chip--ghost {
        background: rgba(255,255,255,.55);
        color: #0b1220;
        border: 1px dashed rgba(15,23,42,.18);
        text-decoration: none
    }

        .wm-chip--ghost:hover {
            background: rgba(255,255,255,.85)
        }

    .wm-chip--accent {
        background: rgba(16,185,129,.16);
        color: #0b1220;
        border: 1px solid rgba(16,185,129,.28)
    }

    .wm-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #10b981;
        box-shadow: 0 0 0 4px rgba(16,185,129,.18)
    }

    .wm-sep {
        opacity: .45;
        font-weight: 900
    }

    body.rtl .wm-promo__bar {
        direction: rtl
    }

    body.rtl .wm-promo__track {
        direction: rtl
    }

    /* 8) MOBILE NAV */
    .mobile-menu-btn {
        display: none;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        z-index: 1001;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        transition: background .2s
    }

        .mobile-menu-btn:hover {
            background: var(--bg-alt)
        }

        .mobile-menu-btn span {
            width: 24px;
            height: 2px;
            background: var(--text);
            transition: all .3s ease;
            border-radius: 2px;
            display: block
        }

        .mobile-menu-btn.active span:nth-child(1) {
            transform: rotate(45deg) translateY(10px)
        }

        .mobile-menu-btn.active span:nth-child(2) {
            opacity: 0
        }

        .mobile-menu-btn.active span:nth-child(3) {
            transform: rotate(-45deg) translateY(-10px)
        }

    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0,0,0,.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all .3s ease
    }

        .mobile-overlay.active {
            opacity: 1;
            visibility: visible
        }

    /* 9) HERO */
    .hero {
        padding: 24px 0;
        background: linear-gradient(135deg,#f9fbfc,#f3f6f8);
        position: relative;
        overflow: hidden
    }

    .hero-content {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        align-items: center;
        gap: 24px
    }

    .hero-text h1, .hero-text h2 {
        font-size: clamp(24px,3.6vw,44px);
        font-weight: 800;
        line-height: 1.1;
        margin: 0 0 12px;
        letter-spacing: -.8px;
        color: var(--secondary);
        animation: fadeInUp .8s ease
    }

    .hero-text p {
        margin: 0 0 18px;
        color: #666;
        line-height: 1.6;
        font-size: 14px;
        animation: fadeInUp .8s ease .2s backwards
    }

    .hero-buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        animation: fadeInUp .8s ease .4s backwards
    }

    .btn-primary {
        padding: 12px 16px;
        background: var(--primary);
        color: #fff;
        border: none;
        border-radius: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition);
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        min-width: 180px;
        box-shadow: 0 2px 12px rgba(0,212,170,.25)
    }

        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0,212,170,.35)
        }

    .btn-secondary {
        padding: 12px 16px;
        background: #fff;
        color: #111;
        border: 1px solid #eee;
        border-radius: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition);
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        min-width: 180px
    }

        .btn-secondary:hover {
            background: var(--secondary);
            border-color: var(--secondary);
            color: #fff;
            transform: translateY(-2px)
        }

    .hero-image {
        position: relative;
        min-height: 240px
    }

    .floating-card {
        position: absolute;
        width: 170px;
        height: 170px;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0,0,0,.10);
        background: #fff;
        animation: floatCard 6s ease-in-out infinite
    }

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

        .floating-card:hover {
            animation-play-state: paused;
            transform: scale(1.05) !important
        }

    .card-1 {
        top: 0;
        left: 30px;
        transform: rotate(-5deg);
        z-index: 3
    }

    .card-2 {
        top: 70px;
        right: 10px;
        transform: rotate(5deg);
        z-index: 2;
        animation-name: floatCard2
    }

    .card-3 {
        bottom: 0;
        left: 70px;
        transform: rotate(3deg);
        z-index: 1;
        animation-name: floatCard3
    }

    .hero--clean {
        padding: 28px 0 34px;
        background: radial-gradient(900px 450px at 10% 20%,rgba(0,212,170,.16),transparent 55%),radial-gradient(700px 420px at 90% 30%,rgba(99,102,241,.10),transparent 50%),linear-gradient(135deg,#fbfdff,#f3f7f9)
    }

    .hero-content--clean {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        gap: 22px;
        align-items: stretch
    }

    .hero-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 8px 0 16px
    }

    .hero-chip {
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,.08);
        background: rgba(255,255,255,.75);
        font-weight: 800;
        font-size: 12px;
        color: #111827
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 10px;
        margin-top: 16px
    }

    .hero-stat {
        background: rgba(255,255,255,.9);
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 14px;
        padding: 12px
    }

        .hero-stat strong {
            display: block;
            font-size: 18px;
            font-weight: 900;
            color: #111827;
            line-height: 1.1
        }

        .hero-stat span {
            display: block;
            margin-top: 4px;
            font-size: 12px;
            color: rgba(17,24,39,.65);
            font-weight: 700
        }

    .hero-card {
        background: rgba(255,255,255,.92);
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 18px;
        box-shadow: 0 18px 50px rgba(0,0,0,.08);
        padding: 18px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 240px
    }

    .hero-card__badge {
        display: inline-flex;
        align-items: center;
        height: 26px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(0,212,170,.14);
        color: #0f766e;
        font-weight: 900;
        font-size: 12px;
        border: 1px solid rgba(0,212,170,.25)
    }

    .hero-card h3 {
        margin: 10px 0 6px;
        font-size: 18px;
        font-weight: 900;
        color: #111827
    }

    .hero-card p {
        margin: 0;
        color: rgba(17,24,39,.65);
        font-weight: 600;
        font-size: 13px;
        line-height: 1.6
    }

    .hero-card__actions {
        margin-top: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    .hero-card__btn {
        height: 44px;
        border-radius: 14px;
        background: var(--primary);
        color: #fff;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        border: 1px solid rgba(0,0,0,.06)
    }

        .hero-card__btn:hover {
            background: var(--primary-dark)
        }

    .hero-card__link {
        text-decoration: none;
        font-weight: 800;
        color: #111827;
        opacity: .8
    }

        .hero-card__link:hover {
            opacity: 1;
            text-decoration: underline
        }

    .hero-promos {
        display: grid;
        gap: 10px;
        margin-top: 14px;
        max-height: 170px;
        overflow: auto;
        padding-right: 4px
    }

    .hero-promo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 14px;
        padding: 12px 14px;
        text-decoration: none;
        color: inherit
    }

    .hero-promo__left {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0
    }

    .hero-promo__badge {
        display: inline-flex;
        align-self: flex-start;
        font-size: 12px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(0,212,170,.12);
        border: 1px solid rgba(0,212,170,.25)
    }

    .hero-promo__title {
        font-weight: 700;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 280px
    }

    .hero-promo__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 14px;
        border-radius: 999px;
        font-weight: 700;
        background: #00d4aa;
        color: #fff
    }

    .hero-banner {
        position: relative;
        display: block;
        border-radius: 16px;
        overflow: hidden;
        min-height: 220px;
        background: #f3f4f6;
        border: 1px solid rgba(0,0,0,.06);
        text-decoration: none
    }

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

    .hero-banner__overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.40) 100%)
    }

    .hero-banner__btn {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        padding: 12px 18px;
        border-radius: 999px;
        font-weight: 800;
        background: var(--primary);
        color: #fff;
        border: 2px solid rgba(255,255,255,.55);
        box-shadow: 0 10px 25px rgba(0,0,0,.22);
        backdrop-filter: blur(6px)
    }

    .hero-banner:hover .hero-banner__btn {
        transform: translate(-50%,-50%) scale(1.03)
    }

    body.rtl .hero-card__actions {
        align-items: stretch
    }

    /* 10) SECTION HEADERS */
    .section-header {
        text-align: center;
        margin-bottom: 40px;
        position: relative
    }

        .section-header h2 {
            font-size: 32px;
            font-weight: 800;
            margin-bottom: 10px;
            letter-spacing: -.5px
        }

        .section-header p {
            font-size: 14px;
            color: var(--text-light)
        }

    .view-all {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary);
        text-decoration: none;
        font-weight: 600;
        font-size: 13px;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        padding: 8px 0
    }

        .view-all:hover {
            transform: translateY(-50%) translateX(4px);
            gap: 8px
        }

    /* 11) PRODUCTS GRID (single source of truth) */
    .best-sellers {
        padding: 80px 0
    }

    .category-pills {
        display: flex;
        gap: 10px;
        margin-bottom: 32px;
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none
    }

        .category-pills::-webkit-scrollbar {
            display: none
        }

    .pill {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 9px 16px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 20px;
        font-weight: 600;
        font-size: 13px;
        cursor: pointer;
        transition: var(--transition);
        white-space: nowrap;
        flex-shrink: 0;
        min-height: 40px
    }

        .pill:hover {
            border-color: var(--primary);
            transform: translateY(-1px)
        }

        .pill.active {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
            box-shadow: 0 4px 12px rgba(0,212,170,.3)
        }

        .pill svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0
        }
    /* Base grid */
    .products-grid, #bestSellersGrid, .brand-products-grid {
        display: grid;
        gap: 16px;
        align-items: stretch;
        grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
        animation: fadeIn .6s ease
    }
    /* Best sellers: fixed 4 cols */
    .best-sellers .products-grid, .best-sellers #bestSellersGrid, .brand-products-grid {
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 18px
    }

    .product-card {
        position: relative;
        background: #fff;
        border-radius: 16px;
        padding: 16px;
        border: 1px solid var(--border);
        box-shadow: 0 10px 25px rgba(0,0,0,.05);
        transition: all .3s cubic-bezier(.4,0,.2,1);
        cursor: pointer;
        animation: fadeInUp .5s ease backwards;
        -webkit-tap-highlight-color: transparent;
        overflow: hidden;
        display: flex;
        flex-direction: column
    }

        .product-card:hover {
            border-color: var(--primary);
            transform: translateY(-6px);
            box-shadow: 0 12px 32px rgba(0,0,0,.15)
        }

    .product-image {
        position: relative;
        width: 100%;
        aspect-ratio: 1/1;
        background: var(--bg-alt);
        border-radius: 14px;
        margin-bottom: 16px;
        overflow: hidden
    }

    .best-sellers .product-image {
        height: 240px;
        aspect-ratio: unset
    }

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .35s ease
    }

    .product-card:hover .product-image img {
        transform: scale(1.06)
    }

    @supports not (aspect-ratio:1/1) {
        .product-image {
            height: 220px
        }
    }

    .product-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        z-index: 10;
        pointer-events: none
    }

        .product-badge.out-of-stock {
            background: rgba(239,68,68,.9);
            color: #fff
        }

        .product-badge.low-stock {
            background: rgba(245,158,11,.9);
            color: #fff
        }

    .product-info h3 {
        font-size: 14px;
        margin-bottom: 4px;
        font-weight: 600;
        line-height: 1.4
    }

    .product-title a {
        color: inherit;
        text-decoration: none;
        transition: color .2s ease
    }

        .product-title a:hover {
            color: var(--primary)
        }

    .product-info p {
        font-size: 12px;
        color: var(--text-light);
        margin-bottom: 10px
    }

    .product-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: calc(1.5em * 2)
    }

    .product-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: auto;
        gap: 10px;
        flex-wrap: wrap
    }

    .product-price {
        font-size: 18px;
        font-weight: 800;
        color: var(--primary);
        line-height: 1;
        white-space: nowrap
    }

        .product-price .currency {
            font-size: 14px;
            font-weight: 600;
            margin-left: 2px
        }

    body.rtl .product-price .currency {
        margin-left: 0;
        margin-right: 2px
    }

    .price-old {
        text-decoration: line-through;
        color: #999;
        margin-right: 8px
    }

    .add-to-cart {
        position: relative;
        overflow: hidden;
        padding: 10px 18px;
        background: var(--primary);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        font-size: 12px;
        cursor: pointer;
        transition: var(--transition);
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        white-space: nowrap
    }

        .add-to-cart:hover {
            background: var(--primary-dark);
            transform: translateY(-1px)
        }

        .add-to-cart:disabled {
            opacity: .6;
            cursor: not-allowed;
            background: #9ca3af
        }

        .add-to-cart:not(:disabled):active {
            transform: scale(.95)
        }

        .add-to-cart.loading::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255,255,255,.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin .6s linear infinite
        }

        .add-to-cart.success {
            animation: successPulse .4s ease
        }

    /* 12) HORIZONTAL SCROLL */
    .hscroll {
        position: relative;
        overflow: hidden
    }

    .hscroll__track {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 6px 2px 10px;
        min-width: 0;
        max-width: 100%;
        scroll-behavior: smooth
    }

        .hscroll__track::-webkit-scrollbar {
            height: 8px
        }

        .hscroll__track::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,.15);
            border-radius: 999px
        }

        .hscroll__track::-webkit-scrollbar-track {
            background: transparent
        }

    .hscroll__item {
        flex: 0 0 auto;
        scroll-snap-align: start
    }

    html[dir="rtl"] .hscroll__track {
        direction: rtl
    }

    .hscroll__track.dragging {
        cursor: grabbing;
        user-select: none
    }

    .brand-products-track .hscroll__item {
        width: 240px
    }

    /* 13) HOME TOP PRODUCTS SCROLLER */
    .home-topbar-products {
        margin-top: 10px;
        padding: 8px 0 10px;
        background: #fff;
        border-bottom: 1px solid rgba(0,0,0,.06)
    }

        .home-topbar-products .container {
            overflow-x: hidden
        }

    .home-topbar-products__scroll {
        display: flex;
        gap: 18px;
        align-items: flex-start;
        padding: 4px 2px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none
    }

        .home-topbar-products__scroll::-webkit-scrollbar {
            display: none
        }

    .home-topbar-products__item {
        flex: 0 0 auto;
        width: 96px;
        text-align: center;
        text-decoration: none;
        color: inherit;
        scroll-snap-align: start
    }

    .home-topbar-products__img {
        width: 74px;
        height: 74px;
        margin: 0 auto 8px;
        border-radius: 999px;
        background: rgba(0,212,170,.10);
        border: 2px solid rgba(0,212,170,.25);
        box-shadow: 0 10px 22px rgba(0,0,0,.06);
        display: grid;
        place-items: center;
        overflow: hidden;
        transition: transform .15s ease,border-color .15s ease
    }

        .home-topbar-products__img img {
            width: 68%;
            height: 68%;
            object-fit: contain;
            display: block
        }

    .home-topbar-products__name {
        font-size: 13px;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: .85
    }

    .home-topbar-products__item:hover .home-topbar-products__img {
        border-color: rgba(0,212,170,.55);
        transform: translateY(-2px)
    }

    .home-topbar-products__item:active .home-topbar-products__img {
        transform: scale(.98)
    }

    .home-top-products {
        padding: 14px 0 6px;
        background: #fff
    }

    .home-top-products__scroll {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 6px 2px 10px;
        align-items: flex-start;
        scrollbar-width: none
    }

        .home-top-products__scroll::-webkit-scrollbar {
            height: 0
        }

    .home-top-products__item {
        flex: 0 0 auto;
        width: 96px;
        text-decoration: none;
        color: inherit;
        scroll-snap-align: start;
        display: grid;
        gap: 10px;
        justify-items: center
    }

    .home-top-products__img {
        width: 86px;
        height: 86px;
        border-radius: 999px;
        overflow: hidden;
        position: relative;
        background: rgba(0,0,0,.04);
        border: 1px solid rgba(0,0,0,.06);
        box-shadow: 0 10px 24px rgba(0,0,0,.06)
    }

        .home-top-products__img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

    .home-top-products__cta {
        position: absolute;
        left: 50%;
        bottom: 6px;
        transform: translateX(-50%);
        background: rgba(0,0,0,.72);
        color: #fff;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
        pointer-events: none
    }

    .home-top-products__name {
        font-size: 13px;
        opacity: .75;
        max-width: 96px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center
    }

    /* 14) POPULAR CATEGORIES */
    .popular-categories {
        padding: 60px 0;
        background: var(--bg-alt)
    }

    .categories-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
        gap: 20px
    }

    .category-card {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--border);
        transition: var(--transition);
        cursor: pointer;
        position: relative
    }

        .category-card:hover {
            border-color: var(--primary);
            transform: translateY(-4px);
            box-shadow: 0 8px 24px var(--shadow-lg)
        }

    .category-visual {
        position: relative;
        height: 160px;
        overflow: hidden
    }

    .gradient-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: var(--transition)
    }

    .category-card:hover .gradient-bg {
        transform: scale(1.1)
    }

    .gradient-yellow {
        background: var(--gradient-yellow)
    }

    .gradient-blue {
        background: var(--gradient-blue)
    }

    .gradient-purple {
        background: var(--gradient-purple)
    }

    .gradient-green {
        background: var(--gradient-green)
    }

    .category-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 64px;
        transition: var(--transition);
        filter: drop-shadow(0 4px 8px rgba(0,0,0,.1))
    }

    .category-card:hover .category-icon {
        transform: translate(-50%,-50%) scale(1.15) rotate(10deg)
    }

    .category-info {
        padding: 20px
    }

        .category-info h3 {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 6px
        }

        .category-info p {
            font-size: 13px;
            color: var(--text-light);
            margin-bottom: 14px
        }

    .category-brands {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 14px
    }

        .category-brands span {
            padding: 5px 10px;
            background: var(--bg-alt);
            border-radius: 5px;
            font-size: 11px;
            font-weight: 600
        }

    .category-stats {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px
    }

        .category-stats a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 600
        }

    .category-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 4px 20px var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: var(--transition);
        z-index: 10;
        border: 1px solid var(--primary);
        border-top: none
    }

    .category-card:hover .category-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0)
    }

    .dropdown-products {
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    .dropdown-product {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        background: var(--bg-alt);
        border-radius: 6px;
        transition: var(--transition)
    }

        .dropdown-product:hover {
            background: var(--primary);
            color: #fff;
            transform: translateX(3px)
        }

        .dropdown-product img {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            object-fit: cover;
            flex-shrink: 0
        }

    .product-mini-info h4 {
        font-size: 13px;
        margin-bottom: 2px;
        font-weight: 600
    }

    .product-mini-info p {
        font-size: 11px;
        opacity: .8
    }

    .product-mini-info span {
        font-weight: 700;
        font-size: 14px
    }

    .category-icons {
        display: grid;
        grid-template-columns: repeat(7,1fr);
        gap: 16px
    }

    .cat-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: var(--transition);
        -webkit-tap-highlight-color: transparent
    }

        .cat-icon:hover {
            transform: translateY(-4px)
        }

    .icon-box {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: var(--transition)
    }

    .cat-icon:hover .icon-box {
        transform: scale(1.05)
    }

    .icon-box.yellow {
        background: linear-gradient(135deg,#ffeaa7 0%,#fdcb6e 100%)
    }

    .icon-box.teal {
        background: linear-gradient(135deg,#74ebd5 0%,#9face6 100%)
    }

    .icon-box.blue {
        background: linear-gradient(135deg,#a8edea 0%,#fed6e3 100%)
    }

    .icon-emoji {
        font-size: 50px
    }

    .cat-icon > span {
        font-size: 13px;
        font-weight: 600;
        color: #2d2d2d;
        text-align: center
    }

    /* 15) FEATURED BANNERS */
    .featured-banners {
        padding: 60px 0;
        background: #fff
    }

    .banner-large {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: linear-gradient(135deg,#89f7fe 0%,#66a6ff 100%);
        border-radius: 24px;
        padding: 50px;
        margin-bottom: 24px;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        transition: var(--transition);
        min-height: 360px;
        align-items: center
    }

        .banner-large:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(0,0,0,.15)
        }

    .smartwatches-banner {
        background: linear-gradient(135deg,#7ee8fa 0%,#80ff72 100%)
    }

    .banner-content {
        display: flex;
        flex-direction: column;
        justify-content: center
    }

        .banner-content h2 {
            font-size: 48px;
            font-weight: 800;
            margin-bottom: 12px;
            color: #1a1a1a;
            line-height: 1.1
        }

        .banner-content p {
            font-size: 18px;
            margin-bottom: 28px;
            color: #2d2d2d
        }

    .btn-view {
        padding: 14px 28px;
        background: #1a1a1a;
        color: #fff;
        border: none;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        cursor: pointer;
        transition: var(--transition);
        align-self: flex-start;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center
    }

        .btn-view:hover {
            background: #2d2d2d;
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0,0,0,.2)
        }

    .banner-image {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .banner-product-display {
        font-size: 160px;
        animation: floatProduct 3s ease-in-out infinite;
        line-height: 1
    }

    .banners-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-bottom: 24px
    }

    .banner-medium {
        background: linear-gradient(135deg,#e0c3fc 0%,#8ec5fc 100%);
        border-radius: 24px;
        padding: 36px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 20px;
        cursor: pointer;
        transition: var(--transition);
        min-height: 260px
    }

        .banner-medium:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 32px rgba(0,0,0,.12)
        }

    .chargers-banner {
        background: linear-gradient(135deg,#d4fc79 0%,#96e6a1 100%)
    }

    .banner-text small {
        font-size: 15px;
        color: #2d2d2d;
        display: block;
        margin-bottom: 6px
    }

    .banner-text h3 {
        font-size: 36px;
        font-weight: 800;
        margin-bottom: 20px;
        color: #1a1a1a;
        line-height: 1.1
    }

    .btn-view-teal {
        padding: 12px 24px;
        background: #00d4aa;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
        min-height: 44px;
        display: inline-flex;
        align-items: center
    }

        .btn-view-teal:hover {
            background: #00b890;
            transform: translateY(-2px)
        }

    .banner-product-icon {
        font-size: 100px;
        text-align: center;
        animation: pulse 2s ease-in-out infinite;
        line-height: 1
    }

    .banners-small-grid {
        display: grid;
        grid-template-rows: 1fr 1fr;
        gap: 24px
    }

    .banner-small {
        border-radius: 16px;
        padding: 24px;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        transition: var(--transition)
    }

        .banner-small:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0,0,0,.12)
        }

    .audio-banner {
        background: linear-gradient(135deg,#fbc2eb 0%,#a6c1ee 100%)
    }

    .cables-banner {
        background: linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)
    }

    .banner-small-content h4 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 4px;
        color: #1a1a1a
    }

    .banner-small-content p {
        font-size: 13px;
        color: #2d2d2d;
        margin-bottom: 12px
    }

    .btn-view-white {
        padding: 8px 16px;
        background: #fff;
        color: #1a1a1a;
        border: none;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
        min-height: 38px;
        display: inline-flex;
        align-items: center
    }

        .btn-view-white:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,.15)
        }

    .banner-small-icon {
        font-size: 72px;
        line-height: 1
    }

    /* 16) BRANDS SECTION */
    .brands-section {
        padding: 80px 0;
        background: #fafafa
    }

    .brands-carousel {
        display: flex;
        gap: 12px;
        margin-bottom: 32px;
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none
    }

        .brands-carousel::-webkit-scrollbar {
            display: none
        }

    .brand-pill {
        padding: 12px 24px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 8px;
        font-weight: 600;
        font-size: 13px;
        cursor: pointer;
        transition: all .3s cubic-bezier(.4,0,.2,1);
        white-space: nowrap;
        flex-shrink: 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center
    }

        .brand-pill:hover, .brand-pill.active {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(0,0,0,.1)
        }

    .brand-showcase {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
        gap: 20px;
        min-height: 200px
    }

    .brand-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
        gap: 14px;
        margin: 18px 0
    }

    .brand-card {
        border: 1px solid #e9eef0;
        background: #fff;
        border-radius: 16px;
        padding: 14px;
        cursor: pointer;
        text-align: left;
        box-shadow: 0 10px 30px rgba(0,0,0,.06);
        transition: transform .15s ease,box-shadow .15s ease,border-color .15s ease
    }

        .brand-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 38px rgba(0,0,0,.08);
            border-color: #d7ece7
        }

        .brand-card.active {
            border-color: var(--primary);
            box-shadow: 0 14px 40px rgba(0,0,0,.10)
        }

    .brand-name {
        font-weight: 800;
        font-size: 16px;
        margin-bottom: 6px
    }

    .brand-sub {
        font-size: 13px;
        color: #6b7280
    }

    .brand-count {
        color: #777;
        font-size: 14px
    }
    /* Brand Tabs (single definition) */
    .brand-tabs-wrap {
        width: 100%;
        overflow: hidden;
        margin-top: 10px
    }

    .brand-tabs {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 6px 2px 10px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%
    }

        .brand-tabs::-webkit-scrollbar {
            display: none
        }

    .brand-tab {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid var(--ssc-border);
        background: #fff;
        cursor: pointer;
        font-weight: 900;
        scroll-snap-align: start;
        white-space: nowrap
    }

        .brand-tab.active {
            background: #111;
            color: #fff;
            border-color: #111
        }

    .brand-tab-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 26px;
        height: 26px;
        padding: 0 8px;
        border-radius: 999px;
        background: rgba(0,0,0,.08);
        font-size: 12px;
        font-weight: 900
    }

    .brand-tab.active .brand-tab-count {
        background: rgba(255,255,255,.18);
        color: #fff
    }

    .brand-panels {
        margin-top: 10px
    }

    .brand-panel {
        display: none
    }

        .brand-panel.active {
            display: block
        }

    .brand-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 6px 0 14px
    }

    .brand-panel-title {
        font-size: 18px;
        font-weight: 800;
        margin: 0
    }
    /* Brand Products Scroll (single definition) */
    .brand-products-scroll {
        display: flex;
        flex-wrap: nowrap;
        gap: 18px;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        max-width: 100%;
        padding: 6px 2px 14px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        box-sizing: border-box;
        scrollbar-width: none
    }

        .brand-products-scroll::-webkit-scrollbar {
            display: none
        }

        .brand-products-scroll > .product-card {
            flex: 0 0 auto;
            width: 320px;
            max-width: 320px
        }

        .brand-products-scroll .product-image {
            display: block;
            width: 100%
        }

            .brand-products-scroll .product-image img {
                width: 100%;
                height: 220px;
                object-fit: cover;
                display: block
            }
    /* Marquee */
    .marquee {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        position: relative;
        touch-action: pan-y
    }

        .marquee .marquee-track {
            display: flex;
            gap: 12px;
            width: max-content;
            will-change: transform;
            animation: marquee-left 22s linear infinite
        }

        .marquee:hover .marquee-track, .marquee.is-paused .marquee-track {
            animation-play-state: paused
        }

    /* 17) NEWSLETTER */
    .newsletter {
        padding: 60px 0;
        background: linear-gradient(135deg,#1a1d29 0%,#2d3142 50%,#1a1d29 100%);
        color: #fff;
        position: relative;
        overflow: hidden
    }

        .newsletter::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 20% 50%,rgba(0,212,170,.1) 0%,transparent 50%);
            pointer-events: none
        }

    .newsletter-content {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        align-items: center
    }

    .newsletter-text h2 {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 12px;
        letter-spacing: -.5px
    }

    .newsletter-text p {
        font-size: 14px;
        opacity: .8;
        line-height: 1.6
    }

    .newsletter-form {
        display: flex;
        gap: 10px
    }

        .newsletter-form input {
            flex: 1;
            padding: 12px 16px;
            border: 1px solid rgba(255,255,255,.2);
            border-radius: 8px;
            background: rgba(255,255,255,.1);
            color: #fff;
            font-size: 14px;
            font-family: inherit;
            transition: var(--transition);
            min-height: 48px;
            outline: none
        }

            .newsletter-form input::placeholder {
                color: rgba(255,255,255,.5)
            }

            .newsletter-form input:focus {
                border-color: var(--primary);
                background: rgba(255,255,255,.15)
            }

        .newsletter-form button {
            position: relative;
            overflow: hidden;
            padding: 12px 24px;
            background: var(--primary);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 13px;
            cursor: pointer;
            transition: var(--transition);
            white-space: nowrap;
            min-height: 48px;
            flex-shrink: 0
        }

            .newsletter-form button:hover {
                background: var(--primary-dark);
                transform: translateY(-1px)
            }

            .newsletter-form button:disabled {
                opacity: .7;
                cursor: not-allowed
            }

    /* 18) FOOTER */
    .footer {
        background: var(--secondary);
        color: #fff;
        padding: 50px 0 20px
    }

    .footer-content {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
        gap: 32px;
        margin-bottom: 32px
    }

    .footer-logo h3 {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 12px
    }

    .footer-logo span {
        color: var(--primary)
    }

    .footer-logo p {
        font-size: 13px;
        opacity: .7;
        line-height: 1.5;
        margin-bottom: 20px
    }

    .footer-contact p {
        font-size: 12px;
        margin-bottom: 6px;
        opacity: .8
    }

    .footer-contact a {
        color: var(--primary);
        text-decoration: none
    }

    .footer-column h4 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 12px
    }

    .footer-column ul {
        list-style: none
    }

    .footer-column li {
        margin-bottom: 8px
    }

    .footer-column a {
        color: rgba(255,255,255,.7);
        text-decoration: none;
        font-size: 13px;
        transition: var(--transition);
        display: inline-block
    }

        .footer-column a:hover {
            color: var(--primary);
            transform: translateX(3px)
        }

    .footer-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 20px
    }

    .tag {
        padding: 6px 12px;
        background: rgba(255,255,255,.1);
        border-radius: 6px;
        font-size: 11px;
        text-decoration: none;
        color: #fff;
        transition: var(--transition)
    }

        .tag:hover {
            background: var(--primary)
        }

    .social-links {
        display: flex;
        gap: 10px;
        margin-bottom: 16px
    }

        .social-links a {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,.1);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition)
        }

            .social-links a:hover {
                background: var(--primary);
                transform: translateY(-2px)
            }

    .payment-methods {
        display: flex;
        gap: 6px;
        flex-wrap: wrap
    }

        .payment-methods span {
            padding: 5px 10px;
            background: rgba(255,255,255,.1);
            border-radius: 5px;
            font-size: 11px;
            font-weight: 600
        }

    .footer-bottom {
        padding-top: 20px;
        border-top: 1px solid rgba(255,255,255,.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px
    }

    .footer-info {
        display: flex;
        gap: 16px;
        font-size: 12px;
        opacity: .7;
        flex-wrap: wrap
    }

    .footer-bottom p {
        font-size: 12px;
        opacity: .7
    }

    .footer-legal {
        display: flex;
        gap: 16px;
        flex-wrap: wrap
    }

        .footer-legal a {
            color: rgba(255,255,255,.7);
            text-decoration: none;
            font-size: 12px;
            transition: var(--transition)
        }

            .footer-legal a:hover {
                color: var(--primary)
            }

    /* 19) CART SIDEBAR */
    .cart-sidebar {
        position: fixed;
        top: 0;
        right: calc(var(--cartW)*-1) !important;
        left: auto !important;
        width: var(--cartW) !important;
        max-width: 90vw !important;
        height: 100vh;
        background: #fff;
        z-index: 9999 !important;
        transition: right .3s ease;
        box-shadow: -20px 0 60px rgba(0,0,0,.15);
        display: flex;
        flex-direction: column
    }

        .cart-sidebar.open, .cart-sidebar.active {
            right: 0 !important
        }

    body.rtl .cart-sidebar {
        right: auto !important;
        left: calc(var(--cartW)*-1) !important
    }

        body.rtl .cart-sidebar.open, body.rtl .cart-sidebar.active {
            left: 0 !important;
            right: auto !important
        }

    .cart-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.35);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        z-index: 9998
    }

        .cart-overlay.active {
            opacity: 1;
            pointer-events: auto
        }

    .cart-header {
        padding: 20px;
        border-bottom: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0
    }

        .cart-header h3 {
            font-size: 18px;
            font-weight: 600
        }

    .cart-close {
        width: 36px;
        height: 36px;
        border: none;
        background: var(--bg-alt);
        border-radius: 6px;
        font-size: 22px;
        cursor: pointer;
        transition: var(--transition);
        display: flex;
        align-items: center;
        justify-content: center
    }

        .cart-close:hover {
            background: var(--accent);
            color: #fff
        }

    .cart-items {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        -webkit-overflow-scrolling: touch
    }

    .empty-cart {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: var(--text-light);
        padding: 40px 20px;
        text-align: center
    }

        .empty-cart svg {
            margin-bottom: 12px;
            opacity: .3
        }

        .empty-cart p {
            font-size: 14px
        }

    .cart-item {
        display: flex;
        gap: 12px;
        padding: 12px;
        background: var(--bg-alt);
        border-radius: 8px;
        margin-bottom: 10px
    }

    .cart-item-image {
        width: 70px;
        height: 70px;
        border-radius: 6px;
        object-fit: cover;
        flex-shrink: 0
    }

    .cart-item-info {
        flex: 1;
        min-width: 0
    }

        .cart-item-info h4 {
            font-size: 13px;
            margin-bottom: 3px;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .cart-item-info p {
            font-size: 12px;
            color: var(--text-light);
            margin-bottom: 6px
        }

    .cart-item-quantity {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 6px
    }

        .cart-item-quantity button {
            width: 30px;
            height: 30px;
            border: none;
            background: #fff;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 700;
            font-size: 13px;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }

            .cart-item-quantity button:hover {
                background: var(--primary);
                color: #fff
            }

        .cart-item-quantity span {
            font-size: 13px;
            font-weight: 600
        }

    .cart-item-price {
        font-size: 16px;
        font-weight: 700;
        color: var(--primary);
        flex-shrink: 0
    }

    .cart-footer {
        padding: 20px;
        border-top: 1px solid var(--border);
        flex-shrink: 0
    }

    .cart-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 14px
    }

    .total-amount {
        color: var(--primary)
    }

    .checkout-btn {
        width: 100%
    }

    /* 20) MODALS */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        padding: 20px
    }

        .modal.active {
            opacity: 1;
            visibility: visible
        }

    .modal-content {
        background: #fff;
        border-radius: 12px;
        padding: 32px;
        max-width: 420px;
        width: 100%;
        position: relative;
        transform: translateY(30px);
        transition: var(--transition);
        max-height: 90vh;
        overflow-y: auto
    }

    .modal.active .modal-content {
        transform: translateY(0)
    }

    .modal-close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        border: none;
        background: var(--bg-alt);
        border-radius: 6px;
        font-size: 22px;
        cursor: pointer;
        transition: var(--transition);
        display: flex;
        align-items: center;
        justify-content: center
    }

        .modal-close:hover {
            background: var(--accent);
            color: #fff
        }

    .modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 2000;
        align-items: center;
        justify-content: center;
        padding: 20px
    }

        .modal-overlay.active {
            display: flex
        }

    .modal-header {
        padding: 24px;
        border-bottom: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center
    }

        .modal-header h2 {
            font-size: 20px;
            font-weight: 600
        }

    .btn-close {
        background: none;
        border: none;
        font-size: 28px;
        color: var(--text-light);
        cursor: pointer;
        line-height: 1;
        padding: 0;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        transition: background .2s
    }

        .btn-close:hover {
            background: var(--bg-alt);
            color: var(--text)
        }

    .modal-body {
        padding: 24px
    }

    .modal-footer {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
        margin-top: 24px;
        flex-wrap: wrap
    }

    .auth-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 24px
    }

    .auth-tab {
        flex: 1;
        padding: 10px;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        transition: var(--transition);
        min-height: 44px
    }

        .auth-tab.active {
            border-bottom-color: var(--primary);
            color: var(--primary)
        }

    /* 21) FORMS */
    .form-group {
        display: flex;
        flex-direction: column;
        gap: 6px
    }

        .form-group label {
            font-size: 13px;
            font-weight: 700;
            color: #1a1a1a;
            display: block;
            margin-bottom: 2px
        }

        .form-group input, .form-group select, .form-group textarea, .form-control {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid rgba(0,0,0,.12);
            border-radius: 12px;
            font-size: 14px;
            font-family: inherit;
            color: var(--text);
            transition: var(--transition);
            min-height: 44px;
            background: #fff;
            outline: none
        }

            .form-group input:focus, .form-group select:focus, .form-group textarea:focus, .form-control:focus {
                border-color: var(--primary);
                box-shadow: 0 0 0 4px rgba(0,212,170,.12)
            }

        .form-group small {
            font-size: 12px;
            color: #666
        }

        .form-group textarea {
            resize: vertical;
            min-height: 80px
        }

    .auth-form {
        display: flex;
        flex-direction: column;
        gap: 14px
    }

        .auth-form input {
            width: 100%;
            margin-bottom: 0
        }

    .form-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px
    }

    .remember-me {
        display: flex;
        align-items: center;
        gap: 8px
    }

        .remember-me input {
            width: 18px;
            height: 18px;
            accent-color: var(--primary)
        }

        .remember-me label {
            font-size: 13px;
            color: #666;
            cursor: pointer
        }

    .forgot-password {
        color: var(--primary);
        text-decoration: none;
        font-size: 13px;
        font-weight: 700
    }

        .forgot-password:hover {
            color: var(--primary-dark);
            text-decoration: underline
        }

    .divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 16px 0;
        color: #999;
        font-size: 13px
    }

        .divider::before, .divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #e0e0e0
        }

        .divider span {
            padding: 0 8px
        }

    .message {
        padding: 12px 16px;
        border-radius: 12px;
        margin-bottom: 12px;
        font-size: 13px
    }

        .message.error {
            background: rgba(255,0,0,.06);
            color: #991b1b;
            border: 1px solid rgba(255,0,0,.18)
        }

        .message.success {
            background: #d1fae5;
            color: #065f46;
            border: 1px solid #6ee7b7
        }

    /* 22) AUTH */
    .auth-main {
        width: 100%
    }

    .auth-container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .auth-box {
        width: min(520px,100%);
        background: #fff;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 22px;
        padding: 32px;
        box-shadow: 0 20px 60px rgba(0,0,0,.15);
        position: relative;
        z-index: 1
    }

    .auth-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px
    }

    .auth-brand {
        text-decoration: none;
        color: inherit
    }

    .auth-logo {
        text-align: center;
        margin-bottom: 16px
    }

        .auth-logo h2 {
            font-size: 28px;
            font-weight: 800;
            color: #1a1a1a;
            margin: 0;
            letter-spacing: .2px
        }

            .auth-logo h2 span {
                color: var(--primary)
            }

    .auth-header {
        text-align: center;
        margin-bottom: 20px
    }

        .auth-header h1 {
            font-size: 28px;
            font-weight: 800;
            margin-bottom: 8px
        }

        .auth-header p {
            color: #666;
            font-size: 14px;
            margin: 0
        }

    .auth-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 6px
    }

    /* 23) SHOP PAGE */
    .shop-section {
        padding: 28px 0 70px;
        background: #f8f9fa;
        min-height: calc(100vh - 200px)
    }

    .shop-layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 32px;
        align-items: start
    }

    .shop-sidebar {
        background: #fff;
        border-radius: 12px;
        border: 1px solid #e0e0e0;
        padding: 24px;
        height: fit-content;
        position: sticky;
        top: 120px
    }

    .filter-toggle-btn {
        display: none;
        width: 100%;
        padding: 12px 16px;
        background: #fff;
        border: 1.5px solid var(--border);
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 20px;
        min-height: 48px;
        transition: var(--transition)
    }

        .filter-toggle-btn:hover {
            border-color: var(--primary)
        }

    .filter-group {
        margin-bottom: 28px;
        padding-bottom: 28px;
        border-bottom: 1px solid #e0e0e0
    }

        .filter-group:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none
        }

        .filter-group h3 {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 16px;
            color: #1a1a1a
        }

    .brand-list {
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    .brand-item {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        padding: 8px;
        border-radius: 6px;
        transition: background .2s;
        min-height: 44px
    }

        .brand-item:hover {
            background: #f8f9fa
        }

        .brand-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #00d4aa;
            flex-shrink: 0
        }

        .brand-item label {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-size: 14px;
            color: #2d2d2d
        }

    .shop-main {
        background: #fff;
        border-radius: 12px;
        border: 1px solid #e0e0e0;
        padding: 28px
    }

    .shop-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 18px;
        flex-wrap: wrap;
        background: #fff;
        border: 1px solid #eaeaea;
        border-radius: 16px;
        padding: 16px
    }

    .shop-title h1 {
        font-size: 22px;
        font-weight: 800;
        margin: 0 0 6px;
        color: #111
    }

    .breadcrumb {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #666;
        flex-wrap: wrap
    }

        .breadcrumb a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 700
        }

            .breadcrumb a:hover {
                text-decoration: underline
            }

    .shop-controls {
        width: min(820px,100%)
    }

    .shop-controls-form {
        display: grid;
        grid-template-columns: 1fr 220px 220px auto;
        gap: 10px;
        align-items: center
    }

    .search-input, .sort-select {
        width: 100%;
        height: 44px;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,.12);
        background: #fff;
        padding: 0 12px;
        outline: none
    }

        .search-input:focus, .sort-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(0,212,170,.10)
        }

    .control--actions {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: flex-end
    }

    .show-options {
        display: flex;
        align-items: center;
        gap: 8px
    }

        .show-options span {
            font-size: 13px;
            color: #666;
            font-weight: 600
        }

    .show-btn {
        padding: 8px 14px;
        border: 1px solid #e0e0e0;
        background: #fff;
        color: #2d2d2d;
        font-size: 13px;
        font-weight: 600;
        border-radius: 6px;
        cursor: pointer;
        transition: all .2s;
        min-height: 40px
    }

        .show-btn:hover, .show-btn.active {
            background: #00d4aa;
            color: #fff;
            border-color: #00d4aa
        }

    .view-options {
        display: flex;
        gap: 8px
    }

    .view-btn {
        padding: 8px;
        border: 1px solid #e0e0e0;
        background: #fff;
        border-radius: 6px;
        cursor: pointer;
        transition: all .2s;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px
    }

        .view-btn:hover, .view-btn.active {
            background: #00d4aa;
            border-color: #00d4aa
        }

            .view-btn:hover svg, .view-btn.active svg {
                stroke: #fff
            }
    /* Shop products grid */
    .shop-section .products-grid {
        display: grid;
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 16px
    }

    .shop-section .product-card {
        background: #fff;
        border: 1px solid #eaeaea;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 26px rgba(0,0,0,.05);
        transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease;
        display: flex;
        flex-direction: column
    }

        .shop-section .product-card:hover {
            transform: translateY(-4px);
            border-color: rgba(0,212,170,.45);
            box-shadow: 0 14px 34px rgba(0,0,0,.10)
        }

    .shop-section .product-image {
        position: relative;
        width: 100%;
        height: 260px;
        display: block;
        background: #f3f4f6;
        overflow: hidden;
        border-bottom: 1px solid #f1f1f1
    }

        .shop-section .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transform: scale(1);
            transition: transform .25s ease
        }

    .shop-section .product-card:hover .product-image img {
        transform: scale(1.05)
    }

    .shop-section .product-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 2;
        border-radius: 999px;
        padding: 6px 12px;
        font-weight: 900;
        font-size: 12px;
        color: #fff
    }

        .shop-section .product-badge.low-stock {
            background: rgba(245,158,11,.95)
        }

        .shop-section .product-badge.out-of-stock {
            background: rgba(239,68,68,.95)
        }

    .shop-section .product-info {
        padding: 14px 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1
    }

    .shop-section .product-title {
        margin: 0;
        font-size: 15px;
        font-weight: 900;
        line-height: 1.25
    }

        .shop-section .product-title a {
            color: #111;
            text-decoration: none
        }

            .shop-section .product-title a:hover {
                color: var(--primary)
            }

    .shop-section .product-brand {
        font-size: 12px;
        font-weight: 800;
        color: #6b7280
    }

    .shop-section .product-footer {
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px
    }

    .shop-section .product-price {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-weight: 900;
        color: #111
    }

    .shop-section .price-old {
        text-decoration: line-through;
        color: #9ca3af;
        font-weight: 800;
        font-size: 13px
    }

    .shop-section .price-new {
        font-size: 16px;
        font-weight: 900;
        color: var(--primary)
    }

    .shop-section .currency {
        font-size: 12px;
        font-weight: 800;
        color: #6b7280
    }

    .shop-section .add-to-cart {
        height: 40px;
        padding: 0 14px;
        border-radius: 12px;
        border: 1px solid var(--primary);
        background: var(--primary);
        color: #fff;
        font-weight: 900;
        cursor: pointer;
        white-space: nowrap;
        transition: filter .15s ease,transform .15s ease
    }

        .shop-section .add-to-cart:hover {
            filter: brightness(.95);
            transform: translateY(-1px)
        }

        .shop-section .add-to-cart:disabled {
            background: #e5e7eb;
            border-color: #e5e7eb;
            color: #6b7280;
            cursor: not-allowed;
            transform: none
        }

    .shop-section .shop-empty {
        grid-column: 1/-1;
        text-align: center;
        padding: 60px 16px;
        background: #fff;
        border: 1px solid #eaeaea;
        border-radius: 16px
    }

        .shop-section .shop-empty h3 {
            margin: 0 0 6px;
            font-weight: 900
        }

        .shop-section .shop-empty p {
            margin: 0;
            color: #6b7280;
            font-weight: 700
        }

    .products-grid.list-view {
        grid-template-columns: 1fr
    }

        .products-grid.list-view .product-card {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 20px
        }

        .products-grid.list-view .product-image {
            width: 160px;
            height: 160px;
            aspect-ratio: auto;
            flex-shrink: 0;
            margin-bottom: 0
        }

        .products-grid.list-view .product-info {
            flex: 1
        }

    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap
    }

        .pagination button {
            padding: 8px 14px;
            border: 1px solid #e0e0e0;
            background: #fff;
            color: #2d2d2d;
            font-size: 14px;
            font-weight: 600;
            border-radius: 6px;
            cursor: pointer;
            transition: all .2s;
            min-height: 40px;
            min-width: 40px
        }

            .pagination button:hover {
                background: #f8f9fa;
                border-color: #00d4aa
            }

            .pagination button.active {
                background: #00d4aa;
                color: #fff;
                border-color: #00d4aa
            }

            .pagination button:disabled {
                opacity: .5;
                cursor: not-allowed
            }

    /* 24) PRODUCT DETAILS */
    .product-details {
        padding: 28px 0 50px
    }

    .product-breadcrumb {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        font-size: 14px;
        color: rgba(17,24,39,.65);
        margin-bottom: 18px
    }

        .product-breadcrumb a {
            color: inherit;
            text-decoration: none
        }

            .product-breadcrumb a:hover {
                text-decoration: underline
            }

        .product-breadcrumb .current {
            color: rgba(17,24,39,.9);
            font-weight: 600
        }

    .product-layout {
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        gap: 22px;
        align-items: start
    }

    .product-media-card, .product-info-card {
        background: #fff;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 18px;
        box-shadow: 0 12px 30px rgba(0,0,0,.05)
    }

    .product-media-card {
        position: relative;
        padding: 12px;
        overflow: hidden
    }

    .product-info-card {
        padding: 18px 18px 16px
    }

    .product-badge-media {
        position: absolute;
        top: 12px;
        left: 12px;
        background: #10b981;
        color: #fff;
        font-weight: 800;
        font-size: 12px;
        padding: 6px 10px;
        border-radius: 999px;
        box-shadow: 0 8px 18px rgba(0,0,0,.12);
        z-index: 2
    }

    .product-title-big {
        font-size: 26px;
        line-height: 1.15;
        margin: 2px 0 10px;
        letter-spacing: -.02em
    }

    .product-meta {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        color: rgba(17,24,39,.7);
        font-size: 14px;
        margin-bottom: 14px
    }

    .meta-label {
        opacity: .75
    }

    .meta-value {
        font-weight: 600;
        color: rgba(17,24,39,.9)
    }

    .meta-dot {
        opacity: .4
    }

    .product-price-row {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin: 10px 0 14px
    }

    .price-chip {
        font-size: 12px;
        font-weight: 700;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(16,185,129,.12);
        color: #0f766e
    }

    .product-description {
        color: rgba(17,24,39,.78);
        line-height: 1.75;
        margin: 0 0 16px
    }

        .product-description.muted {
            opacity: .7
        }

    .product-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 10px
    }

        .product-actions .btn-primary, .product-actions .btn-secondary {
            border-radius: 12px;
            padding: 10px 14px;
            font-weight: 800;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px
        }

        .product-actions .btn-primary {
            background: #10b981;
            color: #fff;
            border: 1px solid rgba(16,185,129,.35)
        }

            .product-actions .btn-primary:hover {
                filter: brightness(.95)
            }

        .product-actions .btn-secondary {
            background: #fff;
            color: #111827;
            border: 1px solid rgba(0,0,0,.12)
        }

            .product-actions .btn-secondary:hover {
                background: rgba(0,0,0,.02)
            }

    /* 25) CHECKOUT */
    .checkout-section {
        padding: 26px 0 70px;
        background: #f6f7f8
    }

    .checkout-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 14px;
        flex-wrap: wrap
    }

    .checkout-title h1 {
        margin: 0 0 4px;
        font-size: 24px;
        font-weight: 900;
        color: #111827
    }

    .checkout-title p {
        margin: 0;
        color: rgba(17,24,39,.65);
        font-weight: 700;
        font-size: 13px
    }

    .checkout-back {
        text-decoration: none;
        font-weight: 900;
        color: #111827;
        opacity: .85;
        padding: 10px 12px;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 14px;
        background: #fff
    }

        .checkout-back:hover {
            opacity: 1;
            border-color: rgba(0,212,170,.4)
        }

    .checkout-content {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        gap: 16px;
        align-items: start
    }

    .checkout-card {
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 18px;
        box-shadow: 0 16px 46px rgba(0,0,0,.06)
    }

    .checkout-form-container .checkout-card {
        padding: 16px
    }

    .form-section {
        padding: 14px 0;
        border-bottom: 1px solid rgba(0,0,0,.06)
    }

        .form-section:last-child {
            border-bottom: none
        }

    .section-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
        flex-wrap: wrap
    }

        .section-head h2 {
            margin: 0;
            font-size: 16px;
            font-weight: 900;
            color: #111827
        }

    .section-hint {
        color: rgba(17,24,39,.65);
        font-weight: 800;
        font-size: 12px
    }

    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 12px
    }

    .required {
        color: #ef4444;
        font-weight: 900
    }

    .checkout-card .form-control {
        height: 46px;
        border-radius: 14px;
        border: 1px solid rgba(0,0,0,.12);
        background: #fff;
        padding: 0 12px
    }

    .checkout-card textarea.form-control {
        height: auto;
        padding: 10px 12px;
        min-height: 110px;
        resize: vertical
    }

    .checkout-card .form-control:focus {
        border-color: rgba(0,212,170,.65);
        box-shadow: 0 0 0 4px rgba(0,212,170,.10)
    }

    .place-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 14px
    }

    .btn-place-order {
        width: 100%;
        max-width: 260px;
        height: 48px;
        border-radius: 16px;
        border: none;
        background: var(--primary);
        color: #fff;
        font-weight: 900;
        cursor: pointer;
        box-shadow: 0 10px 22px rgba(0,212,170,.22)
    }

        .btn-place-order:hover {
            background: var(--primary-dark);
            transform: translateY(-1px)
        }

    .place-secure {
        display: flex;
        align-items: center;
        gap: 8px;
        color: rgba(17,24,39,.65);
        font-weight: 900;
        font-size: 12px;
        white-space: nowrap
    }

        .place-secure .dot {
            width: 10px;
            height: 10px;
            border-radius: 99px;
            background: rgba(16,185,129,.95);
            box-shadow: 0 0 0 6px rgba(16,185,129,.12)
        }

    .order-summary-sticky {
        padding: 16px;
        position: sticky;
        top: 92px
    }

    .summary-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px
    }

        .summary-head h2 {
            margin: 0;
            font-size: 16px;
            font-weight: 900;
            color: #111827
        }

    .summary-count {
        font-size: 12px;
        font-weight: 900;
        color: rgba(17,24,39,.65);
        border: 1px solid rgba(0,0,0,.08);
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(0,0,0,.02)
    }

    .summary-items {
        border-top: 1px solid rgba(0,0,0,.06);
        border-bottom: 1px solid rgba(0,0,0,.06);
        padding: 10px 0;
        margin: 10px 0;
        max-height: 320px;
        overflow: auto
    }

    .summary-item {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px dashed rgba(0,0,0,.08)
    }

        .summary-item:last-child {
            border-bottom: none
        }

    .s-name {
        font-weight: 900;
        color: #111827;
        font-size: 13px;
        line-height: 1.25
    }

    .s-meta {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 6px;
        color: rgba(17,24,39,.65);
        font-weight: 800;
        font-size: 12px
    }

    .s-promo {
        color: #b45309;
        background: rgba(245,158,11,.12);
        border: 1px solid rgba(245,158,11,.20);
        padding: 3px 8px;
        border-radius: 999px;
        font-weight: 900
    }

    .s-right {
        text-align: right;
        min-width: 88px
    }

    .s-old {
        font-size: 12px;
        color: rgba(17,24,39,.45);
        text-decoration: line-through;
        font-weight: 900
    }

    .s-new {
        font-size: 13px;
        font-weight: 900;
        color: #111827
    }

    .summary-calculations {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 10px
    }

    .calc-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-weight: 900;
        color: #111827;
        font-size: 13px
    }

    .calc-value {
        font-weight: 900
    }

        .calc-value.discount {
            color: #ef4444
        }

    .summary-total {
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
        border-radius: 16px;
        background: rgba(0,212,170,.10);
        border: 1px solid rgba(0,212,170,.22);
        font-weight: 900
    }

    .total-value {
        font-size: 18px;
        color: #0f766e
    }

    .coupon-section {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(0,0,0,.06)
    }

    .coupon-input-group {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center
    }

    .btn-apply {
        height: 46px;
        padding: 0 14px;
        border-radius: 14px;
        border: 1px solid rgba(0,0,0,.10);
        background: #111;
        color: #fff;
        font-weight: 900;
        cursor: pointer
    }

        .btn-apply:hover {
            opacity: .92
        }

    .btn-back-cart {
        width: 100%;
        margin-top: 12px;
        height: 46px;
        border-radius: 16px;
        border: 1px solid rgba(0,0,0,.12);
        background: #fff;
        font-weight: 900;
        cursor: pointer
    }

        .btn-back-cart:hover {
            border-color: rgba(0,212,170,.35)
        }

    .coupon-msg {
        font-size: 12px;
        font-weight: 900;
        color: #0f766e;
        background: rgba(16,185,129,.10);
        border: 1px solid rgba(16,185,129,.18);
        padding: 8px 10px;
        border-radius: 14px
    }

    /* 26) NOTIFICATIONS */
    #notificationContainer {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 3000;
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: calc(100vw - 40px)
    }

    .notification {
        background: #fff;
        border-left: 4px solid;
        border-radius: 8px;
        padding: 14px 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,.15);
        min-width: 280px;
        max-width: 360px;
        animation: slideIn .3s ease
    }

        .notification.success {
            border-left-color: var(--success)
        }

        .notification.error {
            border-left-color: var(--danger)
        }

    .notification-content {
        display: flex;
        align-items: center;
        gap: 12px
    }

    .notification-icon {
        font-size: 20px;
        flex-shrink: 0
    }

    .notification-message {
        flex: 1;
        font-size: 14px;
        font-weight: 500
    }

    /* 27) SSC HEADER */
    .ssc-header {
        position: sticky;
        top: 0;
        z-index: 9990;
        background: var(--ssc-bg);
        border-bottom: 1px solid var(--ssc-border)
    }

        .ssc-header.scrolled {
            box-shadow: var(--ssc-shadow)
        }

    .ssc-header__bar {
        padding: 12px 0
    }

    .ssc-header__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: nowrap
    }

    .ssc-left {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 0 0 auto
    }

    .ssc-right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 0 auto
    }

    .ssc-center {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
        min-width: 0
    }

    .ssc-logo {
        display: flex;
        align-items: baseline;
        gap: 2px;
        text-decoration: none;
        color: var(--ssc-text);
        font-weight: 900;
        letter-spacing: -.4px
    }

    .ssc-logo__wm {
        color: var(--primary);
        font-size: 22px
    }

    .ssc-logo__store {
        color: #111;
        font-size: 22px
    }

    .ssc-burger {
        width: 44px;
        height: 44px;
        border: 1px solid var(--ssc-border);
        background: #fff;
        border-radius: 14px;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        padding: 0 12px;
        cursor: pointer;
        transition: background .2s
    }

        .ssc-burger:hover {
            background: rgba(0,0,0,.03)
        }

        .ssc-burger span {
            display: block;
            width: 18px;
            height: 2px;
            background: #111827;
            border-radius: 2px;
            transition: .2s
        }

        .ssc-burger.is-open span:nth-child(1) {
            transform: translateY(8px) rotate(45deg)
        }

        .ssc-burger.is-open span:nth-child(2) {
            opacity: 0
        }

        .ssc-burger.is-open span:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg)
        }

    .ssc-search {
        width: min(780px,100%);
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border: 1px solid var(--ssc-border);
        background: #fff;
        border-radius: 16px;
        transition: .2s
    }

        .ssc-search:focus-within {
            border-color: rgba(0,212,170,.65);
            box-shadow: 0 0 0 4px rgba(0,212,170,.08)
        }

    .ssc-search__icon {
        display: inline-flex;
        color: var(--ssc-muted)
    }

    .ssc-search__input {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        font-size: 14px;
        color: var(--ssc-text);
        min-width: 0
    }

    .ssc-search__btn {
        border: 0;
        background: transparent;
        padding: 0;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        cursor: pointer
    }

    .ssc-pill {
        height: 44px;
        padding: 0 14px;
        border-radius: var(--ssc-radius);
        border: 1px solid var(--ssc-border);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        font-weight: 700;
        color: var(--ssc-text);
        background: #fff;
        transition: .15s;
        position: relative;
        cursor: pointer;
        white-space: nowrap
    }

        .ssc-pill:hover {
            transform: translateY(-1px);
            box-shadow: var(--ssc-shadow)
        }

    .ssc-pill__icon {
        display: inline-flex
    }

    .ssc-pill__text {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .ssc-pill--light {
        background: #f6f6f6;
        border-color: transparent
    }

    .ssc-pill--dark {
        background: #0f0f0f;
        color: #fff;
        border-color: transparent
    }

        .ssc-pill--dark svg {
            stroke: #fff
        }

    .ssc-cart {
        position: relative
    }

    .ssc-cart__total {
        font-weight: 900;
        white-space: nowrap
    }

    .ssc-cart__badge {
        position: absolute;
        top: -8px;
        right: -8px;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: #ef4444;
        color: #fff;
        font-size: 12px;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #fff
    }

    .ssc-lang {
        height: 44px;
        padding: 0 12px;
        border-radius: var(--ssc-radius);
        border: 1px solid var(--ssc-border);
        background: #fff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 900;
        font-size: 12px
    }

    .ssc-lang__sep {
        opacity: .5;
        margin: 0 4px
    }

    .ssc-iconbtn {
        width: 44px;
        height: 44px;
        border-radius: var(--ssc-radius);
        border: 1px solid var(--ssc-border);
        background: #fff;
        display: none;
        align-items: center;
        justify-content: center;
        color: var(--ssc-text);
        text-decoration: none
    }

    .ssc-logout-form {
        margin: 0;
        display: inline-flex
    }
    /* SSC Account dropdown */
    .ssc-account {
        position: relative;
        display: inline-block
    }

    .ssc-account__btn {
        display: flex;
        align-items: center;
        gap: 8px
    }

    .ssc-account__chev {
        font-size: 12px;
        opacity: .7
    }

    .ssc-account__menu {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        min-width: 210px;
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(0,0,0,.12);
        padding: 8px;
        display: none;
        z-index: 9999
    }

    .ssc-account__item {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 10px 12px;
        border-radius: 10px;
        text-decoration: none;
        color: inherit;
        font-weight: 900;
        opacity: .92
    }

        .ssc-account__item:hover {
            background: rgba(0,0,0,.05)
        }

    .ssc-account__sep {
        height: 1px;
        background: rgba(0,0,0,.08);
        margin: 6px 8px
    }

    .ssc-account__item--btn {
        background: transparent;
        border: 0;
        cursor: pointer;
        text-align: left
    }

    .ssc-account.is-open .ssc-account__menu {
        display: block
    }

    /* 28) SSC DRAWER */
    .ssc-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        opacity: 0;
        pointer-events: none;
        transition: .2s;
        z-index: 9991
    }

        .ssc-overlay.is-open {
            opacity: 1;
            pointer-events: auto
        }

    .ssc-drawer {
        position: fixed;
        top: 0;
        left: 0;
        width: min(420px,92vw);
        height: 100dvh;
        background: #fff;
        transform: translateX(-105%);
        transition: .25s ease;
        z-index: 9992;
        display: flex;
        flex-direction: column;
        box-shadow: 10px 0 30px rgba(0,0,0,.12)
    }

        .ssc-drawer.is-open {
            transform: translateX(0)
        }

    body.rtl .ssc-drawer {
        left: auto;
        right: 0;
        transform: translateX(102%);
        box-shadow: -10px 0 30px rgba(0,0,0,.12)
    }

        body.rtl .ssc-drawer.is-open {
            transform: translateX(0)
        }

    .ssc-drawer__top {
        padding: 16px;
        border-bottom: 1px solid var(--ssc-border);
        flex-shrink: 0
    }

    .ssc-drawer-search {
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1px solid var(--ssc-border);
        border-radius: 14px;
        padding: 10px 12px;
        margin-bottom: 12px
    }

        .ssc-drawer-search input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            background: transparent
        }

        .ssc-drawer-search button {
            width: 44px;
            height: 44px;
            border: none;
            background: #111;
            color: #fff;
            border-radius: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }

    .ssc-tabs {
        display: flex;
        gap: 10px;
        background: #f3f4f6;
        padding: 6px;
        border-radius: 999px
    }

    .ssc-tab {
        flex: 1;
        height: 38px;
        border-radius: 999px;
        border: none;
        background: transparent;
        font-weight: 900;
        cursor: pointer;
        color: #111827;
        font-size: 12px
    }

        .ssc-tab.is-active {
            background: #fff;
            box-shadow: 0 8px 18px rgba(0,0,0,.08)
        }

    .ssc-tabpanel {
        display: none;
        overflow: auto;
        position: relative
    }

        .ssc-tabpanel.is-active {
            display: block
        }

    /* 29) SSC MENU */
    .ssc-menu {
        padding: 10px 10px 16px;
        position: relative
    }

    .ssc-menu-item {
        border: 1px solid var(--ssc-border);
        border-radius: 14px;
        margin: 10px 6px;
        overflow: hidden;
        background: #fff
    }

    .ssc-menu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px;
        text-decoration: none;
        color: #111827;
        font-weight: 900;
        cursor: pointer
    }

        .ssc-menu-link:hover {
            background: rgba(0,0,0,.02)
        }

    .ssc-menu-text {
        font-size: 14px
    }

    .ssc-menu-item.has-sub .ssc-menu-link::after {
        content: "▾";
        font-size: 14px;
        color: #6b7280
    }

    .ssc-menu-item.is-open .ssc-menu-link::after {
        content: "▴"
    }

    #sscDrawer .ssc-menu-item {
        position: static !important
    }

    #sscDrawer .ssc-sub[data-subpanel] {
        position: absolute;
        inset: 0;
        background: #fff;
        z-index: 60;
        transform: translateX(110%);
        transition: transform .22s ease;
        overflow-y: auto;
        padding: 12px;
        border-radius: 14px;
        box-shadow: 0 10px 25px rgba(0,0,0,.08);
        display: block
    }

    #sscDrawer .ssc-menu-item.is-open > .ssc-sub[data-subpanel] {
        transform: translateX(0)
    }

    body.rtl #sscDrawer .ssc-sub[data-subpanel] {
        transform: translateX(-110%)
    }

    body.rtl #sscDrawer .ssc-menu-item.is-open > .ssc-sub[data-subpanel] {
        transform: translateX(0)
    }

    .ssc-sub-head {
        position: sticky;
        top: 0;
        background: #fff;
        padding: 8px 0 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
        z-index: 2
    }

    .ssc-sub-back {
        border: 1px solid #eee;
        background: #fff;
        border-radius: 12px;
        padding: 8px 10px;
        font-weight: 700;
        cursor: pointer
    }

    .ssc-sub-title {
        font-weight: 800;
        font-size: 14px
    }

    .ssc-sub-link {
        display: block;
        padding: 12px 10px;
        border-radius: 12px;
        text-decoration: none;
        color: #111;
        border: 1px solid var(--ssc-border);
        background: #f9fafb;
        font-size: 13px;
        font-weight: 800
    }

        .ssc-sub-link:hover {
            background: var(--primary);
            color: #fff
        }

    .ssc-menu--simple .ssc-menu-link {
        border: 1px solid var(--ssc-border);
        border-radius: 14px;
        margin: 10px 6px;
        background: #fff
    }

    .ssc-menu-link--btn {
        border: none;
        background: transparent;
        width: 100%;
        text-align: left;
        cursor: pointer;
        font-weight: 900
    }

    /* 30) SSC PAGES / CARDS */
    .ssc-page {
        padding: 24px 0
    }

    .ssc-card {
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 18px;
        padding: 18px;
        box-shadow: 0 16px 34px rgba(0,0,0,.08)
    }

    .ssc-card--wide {
        max-width: 900px;
        margin: 18px auto
    }

    .ssc-card__divider {
        height: 1px;
        background: rgba(0,0,0,.08);
        margin: 14px 0
    }

    .ssc-card__h {
        margin: 0 0 10px;
        font-weight: 900
    }

    .ssc-page-title {
        font-size: 22px;
        font-weight: 900;
        margin: 0 0 6px
    }

    .ssc-page-sub {
        margin: 0 0 14px;
        opacity: .75
    }

    .ssc-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap
    }

    .ssc-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 14px;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,.10);
        text-decoration: none;
        font-weight: 900;
        cursor: pointer;
        background: #fff;
        color: inherit
    }

    .ssc-btn--primary {
        background: #00b890;
        color: #fff;
        border-color: #00b890
    }

    .ssc-btn--ghost {
        background: #fff
    }

    .ssc-btn--soft {
        background: rgba(0,184,144,.10);
        border-color: rgba(0,184,144,.25);
        color: #007c63
    }

    .ssc-note {
        margin: 10px 0 0;
        opacity: .75;
        font-size: 13px
    }

    .ssc-empty {
        opacity: .75;
        padding: 10px 0
    }

    .ssc-alert {
        padding: 10px 12px;
        border-radius: 12px;
        font-weight: 900;
        margin: 0 0 12px
    }

    .ssc-alert--ok {
        background: rgba(0,184,144,.10);
        border: 1px solid rgba(0,184,144,.25);
        color: #007c63
    }

    .ssc-alert--err {
        background: rgba(255,0,0,.06);
        border: 1px solid rgba(255,0,0,.18);
        color: #b00020
    }

    .ssc-success {
        display: flex;
        gap: 12px;
        align-items: center
    }

    .ssc-success__icon {
        font-size: 26px
    }

    .ssc-success__title {
        margin: 0;
        font-size: 22px;
        font-weight: 900
    }

    .ssc-success__sub {
        opacity: .75;
        margin-top: 4px
    }

    .ssc-summary {
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    .ssc-row {
        display: flex;
        justify-content: space-between;
        gap: 16px
    }

    .ssc-row--muted {
        opacity: .75
    }

    .ssc-row--green {
        color: #00b890;
        font-weight: 900
    }

    .ssc-row--total {
        font-size: 18px;
        font-weight: 900
    }
    /* Orders */
    .ssc-orders-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 14px;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch
    }

        .ssc-orders-grid > .ssc-order {
            flex: 0 0 78%;
            max-width: 78%;
            scroll-snap-align: start
        }

    .ssc-order {
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 16px;
        padding: 14px
    }

    .ssc-order__top {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: flex-start
    }

    .ssc-order__id {
        font-weight: 900
    }

    .ssc-order__date {
        opacity: .7;
        font-size: 13px;
        margin-top: 2px
    }

    .ssc-order__actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 12px
    }

    .ssc-badge {
        padding: 6px 10px;
        border-radius: 999px;
        font-weight: 900;
        font-size: 12px;
        border: 1px solid rgba(0,0,0,.08)
    }

    .ssc-badge--pending {
        background: rgba(255,170,0,.12);
        color: #8a5a00;
        border-color: rgba(255,170,0,.25)
    }

    .ssc-badge--processing {
        background: rgba(0,136,255,.10);
        color: #005bb5;
        border-color: rgba(0,136,255,.25)
    }

    .ssc-badge--shipped {
        background: rgba(120,80,255,.10);
        color: #4b2bd6;
        border-color: rgba(120,80,255,.22)
    }

    .ssc-badge--delivered {
        background: rgba(0,184,144,.10);
        color: #007c63;
        border-color: rgba(0,184,144,.25)
    }

    .ssc-badge--cancelled {
        background: rgba(255,0,0,.06);
        color: #b00020;
        border-color: rgba(255,0,0,.18)
    }

    .ssc-tablewrap {
        overflow: auto;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 14px
    }

    .ssc-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 680px
    }

        .ssc-table th, .ssc-table td {
            padding: 12px;
            border-bottom: 1px solid rgba(0,0,0,.06);
            text-align: left
        }

    .ssc-price-old {
        text-decoration: line-through;
        opacity: .6;
        margin-right: 8px
    }

    .ssc-chip {
        margin-left: 8px;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 999px;
        background: #f3f3f3
    }

    .ssc-totals {
        max-width: 420px;
        margin-left: auto;
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    .ssc-orderhead {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start
    }

    .ssc-info {
        margin-top: 10px;
        opacity: .9
    }

    .ssc-form {
        max-width: 760px
    }

    .ssc-formgrid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .ssc-colspan {
        grid-column: 1/-1
    }

    .ssc-label {
        display: block;
        font-weight: 900;
        margin-bottom: 6px
    }

    .ssc-input {
        width: 100%;
        border: 1px solid rgba(0,0,0,.12);
        border-radius: 12px;
        padding: 10px 12px;
        outline: none
    }

        .ssc-input:focus {
            border-color: rgba(0,184,144,.55);
            box-shadow: 0 0 0 4px rgba(0,184,144,.12)
        }

    .ssc-pagehead {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap
    }

    .ssc-filters {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center
    }

        .ssc-filters .ssc-input {
            min-width: 180px
        }

        .ssc-filters input.ssc-input {
            min-width: 240px
        }
    /* SSC Products scroll */
    .ssc-products-grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 6px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(to right,transparent,black 20px,black calc(100% - 20px),transparent)
    }

        .ssc-products-grid::-webkit-scrollbar {
            height: 8px
        }

        .ssc-products-grid::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,.15);
            border-radius: 10px
        }

    .ssc-product {
        flex: 0 0 280px;
        scroll-snap-align: start;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 16px;
        padding: 14px
    }

    .ssc-product__top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px
    }

    .ssc-product__media {
        width: 64px;
        height: 64px;
        border-radius: 14px;
        overflow: hidden;
        background: rgba(0,0,0,.05);
        flex: 0 0 auto
    }

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

    .ssc-product__ph {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: .5
    }

    .ssc-product__meta {
        min-width: 0;
        flex: 1
    }

    .ssc-product__name {
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .ssc-product__sub {
        opacity: .7
    }

    .ssc-product__price {
        text-align: right;
        white-space: nowrap
    }

    .ssc-price-now {
        font-weight: 800
    }

    .ssc-product__mid {
        margin-top: 10px
    }

    .ssc-product__actions {
        margin-top: 12px
    }

    /* 31) HELPERS */
    .ssc-only-desktop {
        display: flex
    }

    .ssc-only-mobile {
        display: none
    }

    .no-scroll {
        overflow: hidden
    }

    /* 32) FOCUS */
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px
    }

    .nav-item:focus-within, .cart-btn:focus-visible, .auth-btn:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
        border-radius: 6px
    }

    .product-card:focus-within {
        outline: 2px solid var(--primary);
        outline-offset: 4px;
        border-radius: 12px
    }

    /* 33) RTL */
    body.rtl .header-main {
        flex-direction: row-reverse
    }

    body.rtl .nav {
        flex-direction: row-reverse
    }

    body.rtl .header-actions {
        flex-direction: row-reverse
    }

    body.rtl .shop-controls {
        flex-direction: row-reverse
    }

    body.rtl .breadcrumb {
        direction: rtl
    }

    body.rtl .form-group {
        text-align: right
    }

    body.rtl .search-results {
        text-align: right
    }

    body.rtl .ssc-cart__badge {
        right: auto;
        left: -6px
    }

    body.rtl .ssc-right {
        flex-direction: row-reverse
    }

    body.rtl .hero-card__actions {
        align-items: stretch
    }

    /* 34) ANIMATIONS */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(24px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    @keyframes bounce {
        0%,100% {
            transform: scale(1)
        }

        50% {
            transform: scale(1.2)
        }
    }

    @keyframes cartPulse {
        0%,100% {
            transform: scale(1)
        }

        50% {
            transform: scale(1.15)
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg)
        }

        100% {
            transform: rotate(360deg)
        }
    }

    @keyframes pulse {
        0%,100% {
            transform: scale(1)
        }

        50% {
            transform: scale(1.1)
        }
    }

    @keyframes successPulse {
        0%,100% {
            transform: scale(1);
            opacity: 1
        }

        50% {
            transform: scale(1.05);
            opacity: .9
        }
    }

    @keyframes slideIn {
        from {
            transform: translateX(100px);
            opacity: 0
        }

        to {
            transform: translateX(0);
            opacity: 1
        }
    }

    @keyframes floatProduct {
        0%,100% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(-20px)
        }
    }

    @keyframes floatCard {
        0%,100% {
            transform: translateY(0) rotate(-5deg)
        }

        50% {
            transform: translateY(-25px) rotate(-8deg)
        }
    }

    @keyframes floatCard2 {
        0%,100% {
            transform: translateY(-50%) rotate(5deg)
        }

        50% {
            transform: translateY(calc(-50% - 25px)) rotate(8deg)
        }
    }

    @keyframes floatCard3 {
        0%,100% {
            transform: translateX(50%) rotate(3deg)
        }

        50% {
            transform: translateX(50%) translateY(-25px) rotate(6deg)
        }
    }

    @keyframes promo-bounce {
        0% {
            transform: translateX(0%)
        }

        100% {
            transform: translateX(-45%)
        }
    }

    @keyframes promo-bounce-rtl {
        0% {
            transform: translateX(0%)
        }

        100% {
            transform: translateX(45%)
        }
    }

    @keyframes marquee-left {
        from {
            transform: translateX(0)
        }

        to {
            transform: translateX(-50%)
        }
    }

    /* 35) SCROLLBAR */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px
    }

    ::-webkit-scrollbar-track {
        background: var(--bg-alt)
    }

    ::-webkit-scrollbar-thumb {
        background: var(--primary);
        border-radius: 4px
    }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-dark)
        }

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

    @media(max-width:1200px) {
        .footer-content {
            grid-template-columns: 1fr 1fr 1fr;
            gap: 24px
        }

        .category-icons {
            grid-template-columns: repeat(5,1fr)
        }

        .banner-content h2 {
            font-size: 40px
        }

        .banner-product-display {
            font-size: 130px
        }

        .shop-layout {
            grid-template-columns: 240px 1fr
        }
    }

    @media(max-width:1100px) {
        .best-sellers .products-grid, .best-sellers #bestSellersGrid, .brand-products-grid {
            grid-template-columns: repeat(3,minmax(0,1fr))
        }

        .shop-section .products-grid {
            grid-template-columns: repeat(3,minmax(0,1fr))
        }

        .brand-products-track .hscroll__item {
            width: 220px
        }
    }

    @media(max-width:992px) {
        .ssc-center {
            display: none
        }

        .ssc-iconbtn {
            display: inline-flex
        }

        .ssc-only-desktop {
            display: none !important
        }

        .ssc-only-mobile {
            display: flex !important
        }

        .hero-content {
            grid-template-columns: 1fr;
            gap: 24px
        }

        .hero-content--clean {
            grid-template-columns: 1fr
        }

        .hero-card {
            min-height: auto
        }

        .hero-image {
            min-height: 220px
        }

        .newsletter-content {
            grid-template-columns: 1fr;
            gap: 28px
        }

        .categories-grid {
            grid-template-columns: repeat(2,1fr)
        }

        .banner-large {
            grid-template-columns: 1fr;
            padding: 36px;
            min-height: 280px;
            text-align: center
        }

        .banner-content {
            align-items: center
        }

        .btn-view {
            align-self: center
        }

        .banner-product-display {
            font-size: 100px
        }

        .banners-row {
            grid-template-columns: 1fr
        }

        .banner-medium {
            grid-template-columns: 1fr;
            min-height: auto;
            text-align: center
        }

        .banner-product-icon {
            font-size: 80px;
            margin: 0 auto
        }

        .category-icons {
            grid-template-columns: repeat(4,1fr)
        }

        .shop-layout {
            grid-template-columns: 1fr
        }

        .shop-sidebar {
            position: static
        }

        .product-layout {
            grid-template-columns: 1fr
        }

        .product-title-big {
            font-size: 22px
        }

        .best-sellers .products-grid, .best-sellers #bestSellersGrid, .brand-products-grid {
            grid-template-columns: repeat(2,minmax(0,1fr));
            gap: 12px
        }

        .shop-section .products-grid {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }

        .checkout-content {
            grid-template-columns: 1fr
        }

        .order-summary-sticky {
            position: static;
            top: auto
        }

        .shop-controls-form {
            grid-template-columns: 1fr 1fr
        }

        .control--actions {
            justify-content: stretch;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px
        }

        .wm-promo__inner {
            height: 40px
        }

        .wm-promo__viewport {
            height: 32px
        }

        .hero-banner {
            min-height: 200px
        }

        .ssc-orders-grid > .ssc-order {
            flex: 0 0 45%;
            max-width: 45%
        }

        .brand-tabs {
            overflow-x: visible;
            flex-wrap: wrap
        }

        .ssc-formgrid {
            grid-template-columns: 1fr
        }

        .hero-stats {
            grid-template-columns: repeat(3,1fr)
        }
    }

    @media(max-width:768px) {
        :root {
            --cartW: 100vw;
            --header-h: var(--header-h-mobile)
        }

        body {
            padding-top: 64px
        }

        .mobile-menu-btn {
            display: flex
        }

        .nav {
            position: fixed;
            top: 0;
            right: -100%;
            width: 290px;
            height: 100vh;
            background: #fff;
            flex-direction: column;
            padding: 72px 12px 20px;
            box-shadow: -6px 0 30px rgba(0,0,0,.15);
            border-left: 1px solid var(--border);
            transition: right .28s cubic-bezier(.4,0,.2,1);
            z-index: 1200;
            overflow-y: auto;
            gap: 6px;
            justify-content: flex-start;
            flex-wrap: nowrap
        }

            .nav.active {
                right: 0
            }

        body.rtl .nav {
            right: auto;
            left: -100%
        }

            body.rtl .nav.active {
                left: 0
            }

        .nav-item {
            width: 100%;
            padding: 0;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: #fff;
            overflow: hidden;
            flex-shrink: 0
        }

            .nav-item > .nav-link, .nav-item > span {
                display: flex !important;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                padding: 14px;
                font-size: 14px;
                font-weight: 700;
                min-height: 52px
            }

                .nav-item > span::after {
                    content: '›';
                    display: inline-block;
                    font-size: 20px;
                    font-weight: 700;
                    transition: transform .3s ease;
                    line-height: 1
                }

            .nav-item.active > span::after {
                transform: rotate(90deg)
            }

        .dropdown {
            position: static;
            opacity: 1;
            visibility: visible;
            transform: none;
            box-shadow: none;
            padding: 8px 10px 12px;
            border-top: 1px solid var(--border);
            display: none;
            background: #f9fafb
        }

        .nav-item.active .dropdown {
            display: block
        }

        .brands-grid {
            grid-template-columns: 1fr;
            gap: 6px
        }

        .brand-link {
            padding: 10px 12px;
            font-size: 13px
        }

        .header-main {
            flex-wrap: nowrap;
            padding: 10px 0
        }

        .header-actions {
            margin-left: auto;
            gap: 6px
        }

        .auth-btn span {
            display: none
        }

        .account-text, .header-btn-text {
            display: none !important
        }

        .pill-btn, .auth-btn {
            padding: 0 12px;
            height: 40px
        }

        .promo-card {
            min-width: 260px;
            padding: 10px 12px
        }

        .promo-title {
            font-size: 13px
        }

        .promo-sub {
            font-size: 11px
        }

        .promo-cta {
            font-size: 11px;
            padding: 6px 12px
        }

        .hero-promos {
            max-height: 200px
        }

        .hero-promo__title {
            max-width: 200px
        }

        .hero-banner {
            min-height: 180px;
            border-radius: 14px
        }

        .hero {
            padding: 28px 0 36px
        }

        .hero-buttons {
            flex-direction: column;
            gap: 12px
        }

            .hero-buttons .btn-primary, .hero-buttons .btn-secondary {
                width: 100%;
                min-width: 0
            }

        .hero-image {
            display: none
        }

        .section-header {
            margin-bottom: 24px
        }

            .section-header h2 {
                font-size: 22px
            }

        .view-all {
            position: static;
            transform: none;
            margin-top: 10px;
            display: inline-flex
        }

        .best-sellers {
            padding: 36px 0
        }

        .product-card {
            padding: 12px;
            border-radius: 14px
        }

        .product-price {
            font-size: 17px
        }

        .add-to-cart {
            padding: 8px 10px;
            font-size: 11px
        }

        .best-sellers .product-footer {
            flex-direction: column;
            align-items: stretch
        }

        .best-sellers .add-to-cart {
            width: 100%;
            justify-content: center;
            padding: 12px 14px;
            border-radius: 12px
        }

        .popular-categories {
            padding: 36px 0
        }

        .categories-grid {
            grid-template-columns: 1fr
        }

        .category-card:hover .category-dropdown {
            display: none
        }

        .featured-banners {
            padding: 36px 0
        }

        .banner-large {
            padding: 24px;
            border-radius: 16px
        }

        .banner-content h2 {
            font-size: 26px
        }

        .banner-content p {
            font-size: 15px;
            margin-bottom: 20px
        }

        .banner-product-display {
            font-size: 72px
        }

        .banners-small-grid {
            grid-template-rows: auto;
            gap: 14px
        }

        .banner-small {
            grid-template-columns: 1fr;
            text-align: center;
            gap: 8px;
            padding: 20px
        }

        .banner-small-icon {
            font-size: 56px;
            margin: 0 auto
        }

        .btn-view-white {
            width: 100%;
            justify-content: center
        }

        .category-icons {
            grid-template-columns: repeat(3,1fr);
            gap: 12px
        }

        .icon-emoji {
            font-size: 40px
        }

        .cat-icon > span {
            font-size: 12px
        }

        .footer {
            padding: 36px 0 16px
        }

        .footer-content {
            grid-template-columns: 1fr;
            gap: 24px
        }

        .footer-bottom {
            flex-direction: column;
            text-align: center;
            gap: 10px
        }

        .footer-info {
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px
        }

        .footer-legal {
            justify-content: center
        }

        .cart-sidebar {
            width: 100vw !important;
            max-width: 100vw !important;
            right: -100vw !important
        }

            .cart-sidebar.open, .cart-sidebar.active {
                right: 0 !important
            }

        body.rtl .cart-sidebar {
            left: -100vw !important;
            right: auto !important
        }

            body.rtl .cart-sidebar.open, body.rtl .cart-sidebar.active {
                left: 0 !important;
                right: auto !important
            }

        .shop-section {
            padding: 20px 0 40px
        }

        .shop-main {
            padding: 18px
        }

        .shop-title h1 {
            font-size: 20px
        }

        .filter-toggle-btn {
            display: flex
        }

        .shop-sidebar {
            display: none
        }

            .shop-sidebar.open {
                display: block
            }

        .shop-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px
        }

        .shop-controls {
            width: 100%
        }

        .products-grid.list-view {
            grid-template-columns: repeat(2,1fr)
        }

            .products-grid.list-view .product-card {
                flex-direction: column
            }

            .products-grid.list-view .product-image {
                width: 100%;
                height: auto;
                aspect-ratio: 1/1;
                margin-bottom: 12px
            }

        #notificationContainer {
            top: auto;
            bottom: 20px;
            right: 16px;
            left: 16px;
            max-width: 100%
        }

        .notification {
            min-width: 0;
            max-width: 100%
        }

        .ssc-pill.ssc-auth {
            display: none
        }

        .ssc-cart__total {
            display: none
        }

        .brand-products-grid {
            display: flex !important;
            flex-wrap: nowrap !important;
            gap: 14px !important
        }

            .brand-products-grid .product-card {
                flex: 0 0 auto !important;
                width: 240px;
                max-width: 80vw;
                scroll-snap-align: start;
                min-width: 240px
            }

                .brand-products-grid .product-card img {
                    max-width: 100%;
                    display: block
                }

        .brand-products-scroll > .product-card {
            width: 260px;
            max-width: 260px
        }

        .home-topbar-products__item {
            width: 88px
        }

        .home-topbar-products__img {
            width: 78px;
            height: 78px
        }

        .home-topbar-products__name {
            max-width: 88px;
            font-size: 12.5px
        }

        .home-top-products__item {
            width: 88px
        }

        .home-top-products__img {
            width: 78px;
            height: 78px
        }

        .home-top-products__name {
            max-width: 88px;
            font-size: 12.5px
        }
    }

    @media(max-width:600px) {
        .hero-banner {
            min-height: 180px;
            border-radius: 14px
        }

        .hero-banner__btn {
            padding: 10px 14px
        }

        .ssc-success__title {
            font-size: 18px
        }

        .ssc-card {
            padding: 14px
        }

        .ssc-btn {
            width: 100%
        }
    }

    @media(max-width:576px) {
        .brand-products-track .hscroll__item {
            width: 200px
        }

        .checkout-content .form-grid {
            grid-template-columns: 1fr
        }

        .place-row {
            flex-direction: column;
            align-items: stretch
        }

        .btn-place-order {
            max-width: 100%
        }

        .wm-chip {
            padding: 8px 10px;
            font-size: 12.5px
        }

        .wm-promo__msg {
            font-size: 12.5px
        }

        .wm-promo__chip {
            font-size: 11.5px;
            padding: 5px 9px
        }

        .wm-promo__cta {
            padding: 5px 9px
        }
    }

    @media(max-width:520px) {
        .hero-stats {
            grid-template-columns: 1fr
        }

        .hero-promo {
            flex-direction: column;
            align-items: flex-start
        }

        .hero-promo__cta {
            width: 100%;
            text-align: center
        }

        .hero-promo__title {
            white-space: normal
        }

        .product-footer {
            flex-direction: column;
            align-items: stretch
        }

        .add-to-cart {
            width: 100%
        }

        .shop-section .products-grid {
            grid-template-columns: 1fr
        }

        .shop-section .product-footer {
            flex-direction: column;
            align-items: stretch
        }

        .shop-section .add-to-cart {
            width: 100%;
            justify-content: center
        }

        .shop-section .product-image {
            height: 220px
        }

        .control--search {
            grid-column: 1/-1
        }

        .control--brand {
            grid-column: 1/2
        }

        .control--sort {
            grid-column: 2/3
        }

        .control--actions {
            grid-column: 1/-1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px
        }

        .shop-controls-form {
            grid-template-columns: 1fr 1fr;
            gap: 10px
        }
    }

    @media(max-width:480px) {
        .container {
            padding: 0 14px
        }

        .logo h1 {
            font-size: 17px
        }

        .section-header h2 {
            font-size: 20px
        }

        .banner-content h2 {
            font-size: 22px
        }

        .banner-text h3 {
            font-size: 26px
        }

        .newsletter-form {
            flex-direction: column
        }

            .newsletter-form input, .newsletter-form button {
                width: 100%
            }

        .pill {
            padding: 8px 12px;
            font-size: 12px
        }

        .promo-card {
            min-width: 240px
        }

        .btn-primary, .btn-secondary {
            width: 100%;
            min-width: 0
        }

        .wm-strip__item {
            padding: 7px 10px;
            font-size: 12.5px
        }

        .wm-strip__badge {
            font-size: 11px;
            padding: 4px 8px
        }

        .home-top-products__item {
            width: 88px
        }

        .home-top-products__img {
            width: 78px;
            height: 78px
        }

        .home-top-products__name {
            max-width: 88px;
            font-size: 12.5px
        }

        .hero-promos {
            max-height: 200px
        }
    }

    @media(max-width:420px) {
        .best-sellers .products-grid, .best-sellers #bestSellersGrid, .brand-products-grid {
            grid-template-columns: 1fr
        }
    }

    @media(max-width:360px) {
        .container {
            padding: 0 12px
        }

        .logo h1 {
            font-size: 15px
        }

        .header-actions {
            gap: 4px
        }

        .lang-toggle {
            padding: 5px 7px
        }

        .cart-btn, .icon-pill {
            width: 38px !important;
            min-width: 38px !important;
            padding: 0
        }

        .auth-btn, .pill-btn {
            padding: 0 10px
        }

        .category-icons {
            grid-template-columns: repeat(2,1fr)
        }

        .category-brands span {
            font-size: 10px
        }

        .pill {
            padding: 7px 10px;
            font-size: 11px
        }

        .add-to-cart {
            font-size: 11px;
            padding: 7px 9px
        }

        .auth-box {
            padding: 22px 14px
        }

        .best-sellers .products-grid, .best-sellers #bestSellersGrid {
            grid-template-columns: 1fr
        }

        .ssc-orders-grid > .ssc-order {
            flex: 0 0 85%;
            max-width: 85%
        }
    }

    /* Desktop: fix orders grid + brand tabs */
    @media(min-width:992px) {
        .ssc-orders-grid {
            flex-wrap: wrap !important;
            overflow-x: visible !important
        }

            .ssc-orders-grid > .ssc-order {
                flex: 0 0 calc(33.333% - 14px) !important;
                max-width: calc(33.333% - 14px) !important
            }

        .brand-tabs {
            overflow-x: visible;
            flex-wrap: wrap
        }

        .home-topbar-products__item {
            width: 112px
        }

        .home-topbar-products__img {
            width: 86px;
            height: 86px
        }

        .home-topbar-products__name {
            font-size: 14px
        }
    }

    @media(min-width:1100px) {
        .home-topbar-products__item {
            width: 112px
        }

        .home-topbar-products__img {
            width: 86px;
            height: 86px
        }

        .home-topbar-products__name {
            font-size: 14px
        }
    }

    /* Print */
    @media print {
        .hero-image, .newsletter, .add-to-cart, .hero-buttons, .header, .cart-sidebar, .cart-overlay, .mobile-menu-btn, .mobile-overlay, .promo-bar, .footer .social-links, .ssc-header, .ssc-drawer, .ssc-overlay {
            display: none !important
        }

        body {
            padding-top: 0
        }

        .product-card {
            break-inside: avoid
        }

        .shop-layout {
            grid-template-columns: 1fr !important;
            margin-left: 0 !important
        }
    }

    /* Reduced motion */
    @media(prefers-reduced-motion:reduce) {
        *, *::before, *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important
        }

        .hero-text h1, .hero-text h2, .hero-text p, .hero-buttons {
            animation: none
        }

        .marquee .marquee-track {
            animation: none !important
        }

        .promo-ticker__track {
            animation: none
        }
    }
    /* =========================
       WM PROMO BAR (Rock-like)
    ========================= */
    .wm-promo {
        position: relative;
        width: 100%;
        background: #f59e0b; /* orange قريب من الصورة */
        color: #111;
        z-index: 50;
    }

    .wm-promo__viewport {
        width: 100%;
        overflow: hidden;
        height: 36px;
        display: flex;
        align-items: center;
    }

    .wm-promo__track {
        display: flex;
        will-change: transform;
        transform: translateX(0);
    }

    .wm-promo__item {
        flex: 0 0 100%;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-decoration: none;
        color: inherit;
        padding: 0 16px;
        font-weight: 700;
        letter-spacing: .2px;
        white-space: nowrap;
    }

    .wm-promo__text {
        font-size: 13px;
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: min(820px, 70vw);
    }

    .wm-promo__badge {
        background: rgba(17,17,17,.14);
        border: 1px solid rgba(17,17,17,.18);
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 800;
    }

    @media (max-width: 520px) {
        .wm-promo__viewport {
            height: 34px;
        }

        .wm-promo__item {
            height: 34px;
            padding: 0 10px;
            gap: 8px;
        }

        .wm-promo__text {
            font-size: 12px;
            max-width: 68vw;
        }

        .wm-promo__badge {
            font-size: 11px;
            padding: 3px 8px;
        }
    }

    /* ===============================
       FIX: Remove white space above promo
    ================================ */

    /* شيل أي مسافة فوق البودي */
    body {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* سكشن البرومو نفسه */
    .wm-promo-home {
        margin-top: 5px !important;
        padding-top: 5px !important;
    }

    /* أول عنصر بعد الهيدر */
    header + *,
    .ssc-header + * {
        margin-top: 0 !important;
    }

    /* منع container يعمل فراغ */
    .wm-promo-home .container {
        padding-top: 0 !important;
    }

/* ==============================
   ✅ BRAND TABS (NEATER)
============================== */

/* خلي التاب نفسه ثابت ومرتب */
.brand-tab {
    height: 56px;
    min-width: 72px;
    padding: 10px 16px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: transform .15s ease, background .15s ease;
}

    .brand-tab:hover {
        transform: translateY(-1px);
        background: #fafafa;
    }

/* اللوقو داخل التاب */
.brand-tab-logo {
    height: 50px; /* ⬅️ كبّرت اللوقو */
    max-width: 110px; /* ⬅️ يمنع يتمدد زيادة */
    width: auto;
    object-fit: contain;
    display: block;
}

/* ✅ Active tab underline مرتب */
.brand-tab.active {
    position: relative;
}

    .brand-tab.active::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: -8px;
        height: 3px;
        border-radius: 999px;
        background: #00d4aa;
    }

/* ==============================
   ✅ BRAND PANEL HEADER LOGO
============================== */

.brand-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* لوقو الهيدر داخل البانل */
.brand-panel-logo {
    height: 40px; /* ⬅️ أكبر شوي */
    max-width: 180px;
    width: auto;
    object-fit: contain;
    display: block;
}

    /* =========================
       BRANDS SECTION - LOGO TABS (LIKE SSJCJOR)
    ========================= */

    .brands-section .brand-tabs-wrap {
        margin-top: 10px;
        border-bottom: 1px solid rgba(0,0,0,.08);
    }

    .brands-section .brand-tabs-scroll {
        display: flex;
        align-items: center;
        gap: 38px;
        padding: 18px 6px 14px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }

        .brands-section .brand-tabs-scroll::-webkit-scrollbar {
            display: none; /* Chrome/Safari */
        }

    /* tab button */
    .brands-section .brand-tab {
        appearance: none;
        border: 0;
        background: transparent;
        padding: 8px 10px 14px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        cursor: pointer;
        position: relative;
        opacity: .65;
        transition: opacity .18s ease, transform .18s ease;
        white-space: nowrap;
    }

        .brands-section .brand-tab:hover {
            opacity: 1;
            transform: translateY(-1px);
        }

        .brands-section .brand-tab.active {
            opacity: 1;
        }

        /* underline like the reference */
        .brands-section .brand-tab::after {
            content: "";
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: 4px;
            height: 3px;
            border-radius: 999px;
            background: #00d4aa;
            transform: scaleX(0);
            transform-origin: center;
            transition: transform .2s ease;
        }

        .brands-section .brand-tab.active::after {
            transform: scaleX(1);
        }

    /* logo image sizing */
    .brands-section .brand-tab-logo {
        height: 46px;
        max-width: 190px;
        object-fit: contain;
        display: block;
    }

    /* fallback name if no logo */
    .brands-section .brand-tab-name {
        font-weight: 900;
        letter-spacing: .2px;
    }

    /* count badge (small circle top-right) */
    .brands-section .brand-tab-count {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 22px;
        height: 22px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        font-size: 12px;
        font-weight: 900;
        background: rgba(0,0,0,.08);
        color: #111;
    }

    .brands-section .brand-tab.active .brand-tab-count {
        background: rgba(0,212,170,.16);
        color: #0a3b33;
    }

    /* RTL */
    body.rtl .brands-section .brand-tab-count {
        right: auto;
        left: 4px;
    }

    /* panel header */
    .brands-section .brand-panel-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 14px 0 8px;
    }

    .brands-section .brand-panel-logo {
        height: 38px;
        max-width: 220px;
        object-fit: contain;
        display: block;
    }

    /* mobile tuning */
    @media (max-width: 768px) {
        .brands-section .brand-tabs-scroll {
            gap: 22px;
            padding: 14px 4px 12px;
        }

        .brands-section .brand-tab-logo {
            height: 34px;
            max-width: 150px;
        }
    }

    /* =========================
       Section Header - Responsive fix (View all)
    ========================= */
    .section-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
    }

        .section-header .view-all {
            flex: 0 0 auto;
            text-decoration: none;
            font-weight: 900;
            color: #00b890;
            border: 1px solid rgba(0,0,0,.10);
            padding: 10px 14px;
            border-radius: 999px;
            background: #fff;
            line-height: 1;
            transition: transform .18s ease;
        }

            .section-header .view-all:hover {
                transform: translateY(-1px);
            }

    @media (max-width: 768px) {
        .section-header {
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
        }

        body.rtl .section-header {
            align-items: flex-end;
            text-align: right;
        }

        .section-header .view-all {
            margin-top: 6px;
        }
    }

    /* =========================
       Brands Section - Premium Logo Tabs
    ========================= */
    .brands-section .brand-tabs-wrap {
        margin-top: 10px;
        border-bottom: 1px solid rgba(0,0,0,.08);
    }

    .brands-section .brand-tabs-scroll {
        display: flex;
        align-items: center;
        gap: 34px;
        padding: 16px 6px 12px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .brands-section .brand-tabs-scroll::-webkit-scrollbar {
            display: none;
        }

    .brands-section .brand-tab {
        border: 0;
        background: transparent;
        cursor: pointer;
        padding: 8px 10px 14px;
        border-radius: 14px;
        opacity: .60;
        transition: opacity .18s ease, transform .18s ease;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .brands-section .brand-tab:hover {
            opacity: 1;
            transform: translateY(-1px);
        }

        .brands-section .brand-tab.active {
            opacity: 1;
        }

        .brands-section .brand-tab::after {
            content: "";
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: 4px;
            height: 3px;
            border-radius: 999px;
            background: #00d4aa;
            transform: scaleX(0);
            transition: transform .2s ease;
        }

        .brands-section .brand-tab.active::after {
            transform: scaleX(1);
        }

    .brands-section .brand-tab-logo {
        height: 44px;
        max-width: 200px;
        object-fit: contain;
        display: block;
        filter: saturate(1.05);
    }

    /* Panel header logo */
    .brands-section .brand-panel-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 14px 0 8px;
    }

    .brands-section .brand-panel-logo {
        height: 38px;
        max-width: 220px;
        object-fit: contain;
        display: block;
    }

    /* Mobile */
    @media (max-width: 768px) {
        .brands-section .brand-tabs-scroll {
            gap: 20px;
            padding: 12px 4px 10px;
        }

        .brands-section .brand-tab-logo {
            height: 32px;
            max-width: 150px;
        }
    }

    /* =========================================================
       WMSTORE - SSC MOBILE DRAWER (CLEAN FINAL)
       Paste this ONCE at the very end of all-styles.css
    ========================================================= */

    /* ---------- Overlay ---------- */
    #sscOverlay.ssc-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.42);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
        z-index: 9998;
    }

    body.ssc-drawer-open #sscOverlay.ssc-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    /* ---------- Drawer shell ---------- */
    #sscDrawer.ssc-drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(92vw,390px);
        transform: translateX(-102%);
        transition: transform .25s ease;
        z-index: 9999;
        display: flex;
        outline: none;
    }

    body.ssc-drawer-open #sscDrawer.ssc-drawer {
        transform: translateX(0);
    }

    /* RTL opens from right */
    body.rtl #sscDrawer.ssc-drawer {
        left: auto;
        right: 0;
        transform: translateX(102%);
    }

    body.rtl.ssc-drawer-open #sscDrawer.ssc-drawer {
        transform: translateX(0);
    }

    /* ---------- Panel ---------- */
    #sscDrawer .ssc-drawer__panel {
        width: 100%;
        height: 100%;
        background: #fff;
        border-top-right-radius: 22px;
        border-bottom-right-radius: 22px;
        box-shadow: 0 18px 40px rgba(0,0,0,.22);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    body.rtl #sscDrawer .ssc-drawer__panel {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 22px;
        border-bottom-left-radius: 22px;
    }

    /* ---------- Top ---------- */
    #sscDrawer .ssc-drawer__top {
        padding: 14px 14px 10px;
        background: #fff;
        border-bottom: 1px solid rgba(0,0,0,.06);
    }

    #sscDrawer .ssc-drawer__topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }

    #sscDrawer .ssc-drawer__close {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,.08);
        background: #fff;
        cursor: pointer;
        font-weight: 900;
        box-shadow: 0 10px 22px rgba(0,0,0,.06);
    }

    /* drawer language button */
    #sscDrawer .ssc-lang--drawer {
        height: 40px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,.08);
        background: #fff;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-weight: 900;
        box-shadow: 0 10px 22px rgba(0,0,0,.06);
    }

    /* ---------- Search ---------- */
    #sscDrawer .ssc-drawer-search {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 16px;
        border: 1px solid rgba(0,0,0,.08);
        background: #f7f7f8;
    }

        #sscDrawer .ssc-drawer-search input[type="search"] {
            flex: 1;
            border: 0;
            outline: 0;
            background: transparent;
            font-weight: 800;
            font-size: 14px;
        }

        #sscDrawer .ssc-drawer-search button {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            border: 0;
            background: #0b1220;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

    /* ---------- Tabs ---------- */
    #sscDrawer .ssc-tabs {
        margin-top: 12px;
        padding: 6px;
        border-radius: 18px;
        background: #f3f4f6;
        border: 1px solid rgba(0,0,0,.06);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    #sscDrawer .ssc-tab {
        height: 44px;
        border-radius: 16px;
        border: 0;
        background: transparent;
        font-weight: 1000;
        cursor: pointer;
    }

        #sscDrawer .ssc-tab.is-active {
            background: #00d4aa;
            color: #041814;
            box-shadow: 0 12px 26px rgba(0,212,170,.22);
        }

    /* ---------- Body ---------- */
    #sscDrawer .ssc-drawer__body {
        flex: 1;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px 14px 130px; /* space for bottom account */
    }

    /* panels */
    #sscDrawer .ssc-tabpanel {
        display: none;
    }

        #sscDrawer .ssc-tabpanel.is-active {
            display: block;
        }

    /* ---------- Categories list ---------- */
    #sscDrawer .ssc-menu-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 14px;
    }

    /* card */
    #sscDrawer .ssc-menu-item {
        background: #fff;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 18px;
        box-shadow: 0 14px 30px rgba(0,0,0,.05);
        overflow: hidden;
    }

    /* row: link + arrow */
    #sscDrawer .ssc-menu-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px;
    }

    /* link */
    #sscDrawer .ssc-menu-link {
        flex: 1;
        min-width: 0;
        text-decoration: none;
        color: #0b1220;
        font-weight: 1000;
        display: flex;
        align-items: center;
    }

    #sscDrawer .ssc-menu-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* IMPORTANT: remove any old pseudo chevrons */
    #sscDrawer .ssc-menu-item.has-sub .ssc-menu-link::after {
        content: none !important;
        display: none !important;
    }

    /* arrow button */
    #sscDrawer .ssc-sub-toggle {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        border: 1px solid rgba(0,0,0,.08);
        background: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 10px 22px rgba(0,0,0,.06);
        position: relative;
        z-index: 3;
    }

    #sscDrawer .ssc-chevron {
        font-size: 22px;
        font-weight: 1000;
        line-height: 1;
        transform: translateX(1px);
    }

    body.rtl #sscDrawer .ssc-chevron {
        transform: rotate(180deg) translateX(1px);
    }

    /* ---------- Subpanel (inside the same card) ---------- */
    #sscDrawer .ssc-sub {
        padding: 0 14px 14px;
    }

    #sscDrawer .ssc-menu-item.is-sub-open .ssc-menu-row {
        border-bottom: 1px solid rgba(0,0,0,.06);
    }

    /* Sub header */
    #sscDrawer .ssc-sub-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 0;
    }

    #sscDrawer .ssc-sub-back {
        height: 40px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,.08);
        background: #fff;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-weight: 1000;
        box-shadow: 0 10px 22px rgba(0,0,0,.06);
    }

    #sscDrawer .ssc-back-icon {
        font-size: 16px;
    }

    body.rtl #sscDrawer .ssc-back-icon {
        transform: rotate(180deg);
    }

    #sscDrawer .ssc-sub-title {
        flex: 1;
        text-align: center;
        font-weight: 1000;
        font-size: 14px;
        color: #0b1220;
    }

    /* Brand links */
    #sscDrawer .ssc-sub-link {
        display: block;
        text-decoration: none;
        color: #0b1220;
        font-weight: 900;
        font-size: 14px;
        padding: 12px 14px;
        border-radius: 14px;
        background: #f7f7f8;
        border: 1px solid rgba(0,0,0,.06);
        margin-bottom: 10px;
    }

        #sscDrawer .ssc-sub-link:hover {
            background: rgba(0,212,170,.10);
            border-color: rgba(0,212,170,.35);
        }

    /* empty */
    #sscDrawer .ssc-sub-empty {
        display: block;
        padding: 12px 14px;
        border-radius: 14px;
        background: #fff7ed;
        border: 1px solid rgba(245,158,11,.28);
        color: #92400e;
        font-weight: 900;
    }

    /* RTL row */
    body.rtl #sscDrawer .ssc-menu-row {
        flex-direction: row-reverse;
    }

    /* ---------- Bottom account sticky ---------- */
    #sscDrawer .ssc-drawer__bottom {
        position: sticky;
        bottom: 0;
        z-index: 5;
        padding: 14px;
        border-top: 1px solid rgba(0,0,0,.06);
        background: linear-gradient(180deg,#0b1220,#0f172a);
        color: #fff;
    }

    #sscDrawer .ssc-drawer-account {
        border-radius: 18px;
        padding: 14px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.10);
        box-shadow: 0 18px 40px rgba(0,0,0,.18);
    }

    #sscDrawer .ssc-drawer-account__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    #sscDrawer .ssc-drawer-btn {
        height: 44px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-weight: 1000;
        border: 0;
        cursor: pointer;
    }

    #sscDrawer .ssc-drawer-btn--light {
        background: #fff;
        color: #0b1220;
    }

    #sscDrawer .ssc-drawer-btn--dark {
        background: #00d4aa;
        color: #041814;
    }

    /* small devices */
    @media (max-width:420px) {
        #sscDrawer.ssc-drawer {
            width: 94vw;
        }

        #sscDrawer .ssc-drawer__panel {
            border-top-right-radius: 18px;
            border-bottom-right-radius: 18px;
        }

        body.rtl #sscDrawer .ssc-drawer__panel {
            border-top-left-radius: 18px;
            border-bottom-left-radius: 18px;
        }
    }

    #sscDrawer .ssc-sub-toggle {
        position: relative !important;
        z-index: 999 !important;
        pointer-events: auto !important;
    }

    #sscDrawer .ssc-sub[hidden] {
        display: none !important;
    }

    #sscDrawer .ssc-menu-item.is-sub-open > .ssc-sub {
        display: block !important;
    }

    /* =========================
       WM SHOP + PDP (RESPONSIVE)
    ========================= */
    .wm-shop {
        padding: 18px 0 40px;
    }

    .wm-shop__head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

    .wm-shop__title {
        font-size: 26px;
        font-weight: 900;
        letter-spacing: -.4px;
        color: var(--secondary);
    }

    .wm-shop__crumb {
        margin-top: 6px;
        font-weight: 800;
        font-size: 12px;
        opacity: .75;
        display: flex;
        gap: 8px;
        align-items: center;
    }

        .wm-shop__crumb a {
            text-decoration: none;
            color: inherit;
        }

    .wm-shop__layout {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 16px;
        align-items: start;
    }

    .wm-filters {
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(0,0,0,.06);
        overflow: hidden;
        position: sticky;
        top: calc(var(--header-h-mobile) + 16px);
    }

    .wm-filters__form {
        padding: 14px;
        display: grid;
        gap: 12px;
    }

    .wm-filters__block {
        display: grid;
        gap: 8px;
    }

    .wm-filters__label {
        font-weight: 900;
        font-size: 12px;
        color: #0b1220;
        opacity: .85;
    }

    .wm-input {
        height: 44px;
        border-radius: 14px;
        border: 1px solid rgba(0,0,0,.12);
        padding: 0 12px;
        outline: none;
        transition: all .2s ease;
        background: #fff;
        font-weight: 700;
    }

        .wm-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(0,212,170,.16);
        }

    .wm-pricegrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .wm-colors {
        display: grid;
        gap: 8px;
        max-height: 260px;
        overflow: auto;
        padding-right: 4px;
    }

    .wm-colorchip {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid rgba(0,0,0,.10);
        background: #fff;
        cursor: pointer;
        font-weight: 900;
        font-size: 12px;
        text-align: left;
        transition: all .2s ease;
    }

        .wm-colorchip:hover {
            border-color: var(--primary);
            transform: translateY(-1px);
        }

        .wm-colorchip.is-active {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(0,212,170,.14);
        }

    .wm-colors .wm-dot {
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,.15);
    }

    .wm-colorname {
        opacity: .85;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wm-filters__actions {
        display: flex;
        gap: 10px;
        margin-top: 4px;
    }

    .wm-btn {
        height: 44px;
        padding: 0 14px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        text-decoration: none;
        border: 1px solid transparent;
        cursor: pointer;
        transition: all .2s ease;
    }

    .wm-btn--primary {
        background: var(--primary);
        color: #fff;
        box-shadow: 0 10px 25px rgba(0,212,170,.22);
    }

        .wm-btn--primary:hover {
            background: var(--primary-dark);
            transform: translateY(-1px);
        }

    .wm-btn--soft {
        background: #fff;
        color: #111;
        border-color: rgba(0,0,0,.12);
    }

        .wm-btn--soft:hover {
            border-color: var(--primary);
            color: var(--primary);
            transform: translateY(-1px);
        }

    .wm-results {
        min-width: 0;
    }

    .wm-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0,1fr));
        gap: 14px;
    }

    .wm-card {
        display: block;
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 18px;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        box-shadow: 0 10px 25px rgba(0,0,0,.05);
        transition: all .25s ease;
    }

        .wm-card:hover {
            transform: translateY(-4px);
            border-color: var(--primary);
            box-shadow: 0 18px 40px rgba(0,0,0,.10);
        }

    .wm-card__media {
        position: relative;
        aspect-ratio: 1 / 1;
        background: rgba(0,0,0,.03);
    }

        .wm-card__media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .35s ease;
        }

    .wm-card:hover .wm-card__media img {
        transform: scale(1.06);
    }

    .wm-card__colors {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: flex;
        gap: 6px;
        padding: 8px 10px;
        border-radius: 999px;
        background: rgba(255,255,255,.85);
        border: 1px solid rgba(0,0,0,.08);
        backdrop-filter: blur(8px);
        opacity: 0;
        transform: translateY(6px);
        transition: all .2s ease;
    }

    .wm-card:hover .wm-card__colors {
        opacity: 1;
        transform: translateY(0);
    }

    .wm-cdot {
        width: 12px;
        height: 12px;
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,.15);
    }

    .wm-card__body {
        padding: 12px 12px 14px;
        display: grid;
        gap: 6px;
    }

    .wm-card__name {
        font-weight: 950;
        font-size: 13px;
        line-height: 1.25;
    }

    .wm-card__sub {
        font-weight: 800;
        font-size: 11px;
        opacity: .65;
    }

    .wm-card__price {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        flex-direction: row-reverse;
    }

    .wm-old {
        text-decoration: line-through;
        opacity: .55;
        font-weight: 900;
        font-size: 12px;
    }

    .wm-now {
        font-weight: 950;
        color: var(--primary);
        font-size: 14px;
    }

    .wm-badge {
        font-weight: 950;
        font-size: 11px;
        background: rgba(255,107,107,.12);
        color: #b42318;
        border: 1px solid rgba(255,107,107,.25);
        padding: 4px 8px;
        border-radius: 999px;
    }

    .wm-empty {
        padding: 22px;
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 18px;
        text-align: center;
        font-weight: 900;
        opacity: .75;
    }

    .wm-pager {
        margin-top: 18px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .wm-page {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        font-weight: 950;
        text-decoration: none;
        border: 1px solid rgba(0,0,0,.12);
        color: inherit;
        background: #fff;
    }

        .wm-page.is-active {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
        }

    /* Mobile filter button + drawer */
    .wm-filterbtn {
        display: none;
        height: 44px;
        padding: 0 12px;
        border-radius: 14px;
        border: 1px solid rgba(0,0,0,.12);
        background: #fff;
        font-weight: 950;
        cursor: pointer;
    }

        .wm-filterbtn:hover {
            border-color: var(--primary);
            transform: translateY(-1px);
        }

    .wm-dim {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        opacity: 0;
        pointer-events: none;
        transition: all .2s ease;
        z-index: 99990;
    }

    .wm-drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        width: min(92vw, 420px);
        right: -430px;
        background: #fff;
        z-index: 99991;
        box-shadow: -20px 0 60px rgba(0,0,0,.20);
        border-left: 1px solid rgba(0,0,0,.08);
        transition: right .22s ease;
        display: flex;
        flex-direction: column;
    }

    body.rtl .wm-drawer {
        right: auto;
        left: -430px;
        transition: left .22s ease;
    }

    .wm-drawer__head {
        padding: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(0,0,0,.08);
    }

    .wm-x {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,.12);
        background: #fff;
        cursor: pointer;
        font-weight: 950;
    }

    .wm-drawer__body {
        padding: 14px;
        overflow: auto;
    }

    .wm-drawer__note {
        font-weight: 900;
        font-size: 12px;
        opacity: .65;
        margin-bottom: 10px;
    }

    .wm-drawer.is-open {
        right: 0;
    }

    body.rtl .wm-drawer.is-open {
        left: 0;
    }

    .wm-dim.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* PDP */
    .wm-pdp {
        padding: 18px 0 40px;
    }

    .wm-pdp__crumb {
        display: flex;
        gap: 8px;
        align-items: center;
        font-weight: 900;
        font-size: 12px;
        opacity: .75;
        margin-bottom: 12px;
    }

        .wm-pdp__crumb a {
            text-decoration: none;
            color: inherit;
        }

.wm-pdp__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 18px;
    align-items: start;
}

    .wm-pdp__layout > * {
        min-width: 0;
    }

    .wm-gal {
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 18px;
        padding: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,.06);
    }

    .wm-gal__main {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        background: rgba(0,0,0,.03);
        aspect-ratio: 1.15/1;
    }

        .wm-gal__main img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .35s ease;
        }

        .wm-gal__main:hover img {
            transform: scale(1.04);
        }

    .wm-sale {
        position: absolute;
        top: 12px;
        left: 12px;
        background: rgba(255,107,107,.95);
        color: #fff;
        padding: 6px 10px;
        border-radius: 999px;
        font-weight: 950;
        font-size: 12px;
        z-index: 2;
    }

    .wm-gal__thumbs {
        margin-top: 10px;
        display: flex;
        gap: 10px;
        overflow: auto;
        padding-bottom: 2px;
    }

    .wm-th {
        width: 74px;
        height: 74px;
        border-radius: 14px;
        border: 1px solid rgba(0,0,0,.10);
        background: #fff;
        overflow: hidden;
        cursor: pointer;
        flex: 0 0 auto;
        opacity: .9;
    }

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

        .wm-th.is-active {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(0,212,170,.14);
            opacity: 1;
        }

    .wm-pdp__info {
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 18px;
        padding: 14px;
        box-shadow: 0 10px 30px rgba(0,0,0,.06);
    }

    .wm-pdp__title {
        font-size: 22px;
        font-weight: 950;
        color: var(--secondary);
        letter-spacing: -.4px;
    }

    .wm-pdp__meta {
        margin-top: 8px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        font-weight: 800;
        font-size: 12px;
        opacity: .75;
    }

    .wm-dotsep {
        opacity: .5;
    }

    .wm-pdp__price {
        margin-top: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .wm-pdp__desc {
        margin-top: 10px;
        font-weight: 700;
        opacity: .75;
        line-height: 1.7;
    }

    .wm-pdp__colors {
        margin-top: 12px;
    }

    .wm-label {
        font-weight: 950;
        font-size: 12px;
        opacity: .85;
        margin-bottom: 8px;
    }

    .wm-colorrow {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .wm-colorbtn {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,.12);
        cursor: pointer;
        position: relative;
    }

        .wm-colorbtn.is-active {
            outline: 4px solid rgba(0,212,170,.18);
            border-color: var(--primary);
        }

    .wm-colorhint {
        display: none;
        position: absolute;
        bottom: -28px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(11,18,32,.92);
        color: #fff;
        padding: 4px 8px;
        border-radius: 999px;
        font-weight: 900;
        font-size: 11px;
        white-space: nowrap;
    }

    .wm-colorbtn:hover .wm-colorhint {
        display: block;
    }

    .wm-pdp__buy {
        margin-top: 14px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
    }

    .wm-qty {
        display: inline-flex;
        border: 1px solid rgba(0,0,0,.12);
        border-radius: 14px;
        overflow: hidden;
        height: 44px;
    }

    .wm-qbtn {
        width: 44px;
        border: 0;
        background: #fff;
        cursor: pointer;
        font-weight: 950;
    }

    .wm-qinp {
        width: 56px;
        border: 0;
        text-align: center;
        font-weight: 950;
        outline: none;
    }

    .wm-pdp__note {
        margin-top: 10px;
        font-weight: 800;
        font-size: 12px;
        opacity: .65;
    }

    /* Responsive */
    @media (max-width: 1100px) {
        .wm-grid {
            grid-template-columns: repeat(3, minmax(0,1fr));
        }

        .wm-pdp__layout {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 860px) {
        .wm-shop__layout {
            grid-template-columns: 1fr;
        }

        .wm-filters {
            display: none;
            position: static;
        }

        .wm-filterbtn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .wm-grid {
            grid-template-columns: repeat(2, minmax(0,1fr));
        }
    }

    @media (max-width: 420px) {
        .wm-grid {
            grid-template-columns: 1fr;
        }
    }

    .wm-filter__card {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 16px;
        padding: 16px;
        display: grid;
        gap: 14px;
        box-shadow: 0 10px 30px rgba(0,0,0,.05);
    }

    .wm-filter__section {
        display: grid;
        gap: 8px;
    }

    .wm-label {
        font-weight: 800;
        font-size: 13px;
        color: #222;
    }

    .wm-input {
        width: 100%;
        padding: 12px 12px;
        border: 1px solid #e6e6e6;
        border-radius: 14px;
        outline: none;
    }

        .wm-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(0,212,170,.12);
        }

    .wm-range {
        position: relative;
        padding: 8px 0;
    }

        .wm-range input[type=range] {
            width: 100%;
        }

    .wm-range__values {
        display: flex;
        justify-content: space-between;
        font-weight: 800;
        color: #333;
        margin-top: 8px;
        font-size: 13px;
    }

    .wm-colors {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .wm-colorchip {
        border: 1px solid #e6e6e6;
        border-radius: 999px;
        padding: 10px 12px;
        background: #fff;
        font-weight: 800;
        cursor: pointer;
    }

        .wm-colorchip span {
            display: block;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1px solid #ddd;
        }

        .wm-colorchip.is-active {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(0,212,170,.12);
        }

    .wm-filter__actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .wm-btn {
        padding: 10px 14px;
        border-radius: 14px;
        border: 1px solid #e6e6e6;
        font-weight: 900;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .wm-btn--primary {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }

    .wm-btn--soft {
        background: #f7f7f7;
        color: #111;
    }

    /* =========================
       SHOP v2 (Filters + Cards)
    ========================= */
    .wm-shop2 {
        padding: 26px 0 40px;
    }

    .wm-shop2__top {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 16px;
    }

    .wm-shop2__title {
        font-size: 34px;
        font-weight: 900;
        margin: 0;
    }

    .wm-shop2__crumb {
        margin-top: 6px;
        color: #6b7280;
        font-weight: 700;
        display: flex;
        gap: 8px;
        align-items: center;
    }

        .wm-shop2__crumb a {
            color: inherit;
            text-decoration: none;
        }

    .wm-shop2__tools {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .wm-select {
        height: 44px;
        padding: 0 14px;
        border-radius: 14px;
        border: 1px solid #e5e7eb;
        background: #fff;
        font-weight: 800;
    }

    .wm-filterbtn2 {
        height: 44px;
        padding: 0 14px;
        border-radius: 14px;
        border: 1px solid #e5e7eb;
        background: #fff;
        font-weight: 900;
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .wm-shop2__layout {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 18px;
    }

    @media(max-width: 980px) {
        .wm-shop2__layout {
            grid-template-columns: 1fr;
        }
    }

    /* Filters card */
    .wm-filtercard {
        border: 1px solid #eef2f7;
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 10px 25px rgba(0,0,0,.06);
        padding: 14px;
        position: sticky;
        top: 92px;
        height: fit-content;
    }

    @media(max-width: 980px) {
        #wmFiltersDesktop {
            display: none;
        }
    }

    .wm-field {
        padding: 10px 0;
        border-bottom: 1px solid #f1f5f9;
    }

        .wm-field:last-child {
            border-bottom: none;
        }

    .wm-field__label {
        font-weight: 900;
        color: #111827;
        margin-bottom: 8px;
    }

    .wm-input2 {
        width: 100%;
        height: 44px;
        border-radius: 14px;
        border: 1px solid #e5e7eb;
        padding: 0 14px;
        outline: none;
        font-weight: 800;
    }

        .wm-input2:focus {
            border-color: #00d4aa;
            box-shadow: 0 0 0 4px rgba(0,212,170,.12);
        }

    .wm-filtercard__actions {
        display: flex;
        gap: 10px;
        padding-top: 12px;
    }

    .wm-btn2 {
        height: 44px;
        padding: 0 14px;
        border-radius: 14px;
        border: 1px solid #e5e7eb;
        background: #fff;
        font-weight: 900;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #111827;
    }

    .wm-btn2--primary {
        background: #00d4aa;
        border-color: #00d4aa;
        color: #06251f;
        box-shadow: 0 12px 22px rgba(0,212,170,.18);
    }

    .wm-btn2--soft {
        background: #f8fafc;
    }

    /* Colors chips */
    .wm-colors2 {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .wm-chip2 {
        border: 1px solid #e5e7eb;
        background: #fff;
        border-radius: 999px;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 900;
    }

        .wm-chip2.is-active {
            border-color: #00d4aa;
            box-shadow: 0 0 0 4px rgba(0,212,170,.12);
        }

    .wm-chip2__dot {
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px #e5e7eb;
    }

    .wm-chip2__txt {
        max-width: 92px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Price slider */
    .wm-pricebox {
        padding: 10px 0 2px;
    }

    .wm-pricebox__row {
        display: flex;
        justify-content: space-between;
        color: #111827;
        font-weight: 900;
    }

    .wm-pricebox__hint {
        margin-top: 8px;
        font-size: 12px;
        color: #6b7280;
        font-weight: 800;
    }

    .wm-range2 {
        position: relative;
        height: 34px;
        margin-top: 10px;
    }

        .wm-range2 input[type="range"] {
            position: absolute;
            left: 0;
            top: 8px;
            width: 100%;
            pointer-events: none;
            -webkit-appearance: none;
            background: transparent;
            height: 20px;
        }

            .wm-range2 input[type="range"]::-webkit-slider-thumb {
                pointer-events: auto;
                -webkit-appearance: none;
                width: 18px;
                height: 18px;
                border-radius: 999px;
                background: #111827;
                border: 3px solid #fff;
                box-shadow: 0 0 0 2px rgba(0,0,0,.15);
            }

    .wm-range2__track {
        position: absolute;
        left: 0;
        right: 0;
        top: 16px;
        height: 6px;
        border-radius: 999px;
        background: #e5e7eb;
    }

    .wm-range2__fill {
        position: absolute;
        top: 16px;
        height: 6px;
        border-radius: 999px;
        background: #00d4aa;
    }

    /* Products grid like reference */
    .wm-products2 {
        min-width: 0;
    }

    .wm-grid2 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 14px;
    }

    @media(max-width: 1100px) {
        .wm-grid2 {
            grid-template-columns: repeat(2, minmax(0,1fr));
        }
    }

    @media(max-width: 640px) {
        .wm-grid2 {
            grid-template-columns: 1fr;
        }
    }

    .wm-pcard {
        border: 1px solid #eef2f7;
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0,0,0,.06);
        text-decoration: none;
        color: #111827;
        display: flex;
        flex-direction: column;
    }

    .wm-pcard__img {
        position: relative;
        aspect-ratio: 4/3;
        background: #f8fafc;
    }

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

    .wm-ph2 {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6b7280;
        font-weight: 900;
    }

    .wm-sale2 {
        position: absolute;
        left: 10px;
        top: 10px;
        background: #ef4444;
        color: #fff;
        font-weight: 900;
        font-size: 12px;
        padding: 6px 10px;
        border-radius: 999px;
    }

    .wm-pcard__body {
        padding: 12px 12px 14px;
    }

    .wm-pcard__name {
        font-weight: 1000;
        font-size: 15px;
    }

    .wm-pcard__meta {
        margin-top: 6px;
        color: #6b7280;
        font-weight: 900;
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .wm-dot {
        opacity: .6;
    }

    .wm-pcard__price {
        margin-top: 10px;
        display: flex;
        gap: 10px;
        align-items: baseline;
    }

    .wm-old2 {
        color: #9ca3af;
        text-decoration: line-through;
        font-weight: 900;
    }

    .wm-now2 {
        color: #00b890;
        font-weight: 1000;
        font-size: 16px;
    }

    .wm-pcard__colors {
        margin-top: 10px;
        display: flex;
        gap: 8px;
    }

    .wm-cdot2 {
        width: 12px;
        height: 12px;
        border-radius: 999px;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px #e5e7eb;
    }

    /* Pager */
    .wm-pager2 {
        margin-top: 18px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .wm-page2 {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-weight: 1000;
        color: #111827;
        background: #fff;
    }

        .wm-page2.is-active {
            background: #00d4aa;
            border-color: #00d4aa;
            color: #06251f;
        }

    /* Mobile drawer */
    .wm-dim2 {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.35);
        opacity: 0;
        pointer-events: none;
        transition: .18s;
        z-index: 9998;
    }

    .wm-drawer2 {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: min(420px, 92vw);
        background: #fff;
        transform: translateX(110%);
        transition: .22s;
        z-index: 9999;
        border-left: 1px solid #e5e7eb;
        display: flex;
        flex-direction: column;
    }

    .wm-drawer2__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 14px;
        border-bottom: 1px solid #eef2f7;
        font-weight: 1000;
    }

    .wm-x2 {
        border: 1px solid #e5e7eb;
        background: #fff;
        border-radius: 12px;
        width: 40px;
        height: 40px;
        font-weight: 1000;
    }

    .wm-drawer2__body {
        padding: 14px;
        overflow: auto;
    }

    .wm-drawer2.is-open {
        transform: translateX(0);
    }

    .wm-dim2.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* PDP v2 */
    .wm-pdp2 {
        padding: 24px 0 40px;
    }

    .wm-pdp2__crumb {
        color: #6b7280;
        font-weight: 900;
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 14px;
    }

        .wm-pdp2__crumb a {
            color: inherit;
            text-decoration: none;
        }

    .wm-pdp2__grid {
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        gap: 18px;
    }

    @media(max-width: 980px) {
        .wm-pdp2__grid {
            grid-template-columns: 1fr;
        }
    }

    .wm-gal2 {
        background: #fff;
        border: 1px solid #eef2f7;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0,0,0,.06);
    }

    .wm-gal2__main {
        position: relative;
    }

        .wm-gal2__main img {
            width: 100%;
            display: block;
            object-fit: cover;
            aspect-ratio: 4/3;
        }

    .wm-gal2__thumbs {
        display: flex;
        gap: 10px;
        padding: 12px;
        overflow: auto;
    }

    .wm-th2 {
        border: 1px solid #e5e7eb;
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        flex: 0 0 70px;
        height: 56px;
    }

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

        .wm-th2.is-active {
            border-color: #00d4aa;
            box-shadow: 0 0 0 4px rgba(0,212,170,.12);
        }

    .wm-info2 {
        background: #fff;
        border: 1px solid #eef2f7;
        border-radius: 18px;
        padding: 16px;
        box-shadow: 0 10px 25px rgba(0,0,0,.06);
    }

    .wm-info2__title {
        margin: 0;
        font-size: 26px;
        font-weight: 1000;
    }

    .wm-info2__meta {
        margin-top: 8px;
        color: #6b7280;
        font-weight: 900;
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
    }

    .wm-price2 {
        margin-top: 14px;
        padding: 12px;
        border-radius: 16px;
        background: #f8fafc;
        border: 1px solid #eef2f7;
    }

    .wm-badge2 {
        background: rgba(239,68,68,.12);
        color: #b91c1c;
        border: 1px solid rgba(239,68,68,.25);
        padding: 6px 10px;
        border-radius: 999px;
        font-weight: 1000;
    }

    .wm-total2 {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        font-weight: 1000;
    }

    .wm-desc2 {
        margin-top: 14px;
        color: #374151;
        font-weight: 800;
        line-height: 1.6;
    }

    .wm-colorswrap2 {
        margin-top: 14px;
    }

    .wm-label2 {
        font-weight: 1000;
        margin-bottom: 10px;
    }

    .wm-colorrow2 {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .wm-colorbtn2 {
        width: 44px;
        height: 44px;
        border-radius: 999px;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px #e5e7eb;
        position: relative;
    }

        .wm-colorbtn2.is-active {
            box-shadow: 0 0 0 4px rgba(0,212,170,.16), 0 0 0 1px #00d4aa inset;
        }

    .wm-colorhint2 {
        display: none;
    }

    .wm-buy2 {
        margin-top: 16px;
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
    }

    .wm-qty2 {
        display: flex;
        align-items: center;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        overflow: hidden;
        height: 44px;
        background: #fff;
    }

    .wm-qbtn2 {
        width: 44px;
        height: 44px;
        border: none;
        background: #fff;
        font-weight: 1000;
    }

    .wm-qinp2 {
        width: 64px;
        height: 44px;
        border: none;
        text-align: center;
        font-weight: 1000;
        outline: none;
    }

    .wm-note2 {
        margin-top: 10px;
        color: #6b7280;
        font-weight: 900;
    }

    /* =========================================================
       ✅ Home: Apply "Products page card look" ONLY to:
       - Best Sellers grid
       - Brand panels products
       Using: .wm-grid-skin scope (safe, doesn't affect other pages)
    ========================================================= */

    /* Grid layout (يمين/شمال) */
    .wm-grid-skin {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        align-items: stretch;
    }

    /* Responsive */
    @media (max-width: 992px) {
        .wm-grid-skin {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 640px) {
        .wm-grid-skin {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 360px) {
        .wm-grid-skin {
            grid-template-columns: 1fr;
        }
    }

    /* Card skin */
    .wm-grid-skin .product-card {
        position: relative;
        border: 1px solid #eef2f7;
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 24px rgba(0,0,0,.06);
        display: flex;
        flex-direction: column;
        min-width: 0; /* مهم للـgrid */
    }

        /* Image area like Products page */
        .wm-grid-skin .product-card .product-image {
            position: relative;
            display: block;
            background: #f3f4f6;
            overflow: hidden;
            aspect-ratio: 1 / 1; /* ✅ نفس صفحة products */
        }

            /* Image fill */
            .wm-grid-skin .product-card .product-image img {
                width: 100%;
                height: 100%;
                display: block;
                object-fit: cover; /* ✅ تغطي */
                object-position: center;
                transform: scale(1);
                transition: transform .22s ease;
            }

        /* Hover subtle zoom */
        .wm-grid-skin .product-card:hover .product-image img {
            transform: scale(1.04);
        }

        /* Badge: top-left */
        .wm-grid-skin .product-card .product-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 2;
            border-radius: 999px;
            padding: 6px 10px;
            font-weight: 900;
            font-size: 12px;
            line-height: 1;
        }

            /* Keep your classes but normalize colors */
            .wm-grid-skin .product-card .product-badge.low-stock {
                background: #ef4444;
                color: #fff;
            }

            .wm-grid-skin .product-card .product-badge.out-of-stock {
                background: #111827;
                color: #fff;
            }

        /* Body */
        .wm-grid-skin .product-card .product-info {
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex: 1 1 auto;
            min-width: 0;
        }

        .wm-grid-skin .product-card .product-title {
            margin: 0;
            font-weight: 950;
            font-size: 14px;
            line-height: 1.2;
        }

            .wm-grid-skin .product-card .product-title a {
                color: #111827;
                text-decoration: none;
            }

        /* Brand line */
        .wm-grid-skin .product-card .product-brand {
            color: #6b7280;
            font-weight: 800;
            font-size: 12px;
        }

        /* Hide long desc on home cards (keeps layout clean) */
        .wm-grid-skin .product-card .product-desc {
            display: none; /* ✅ عشان يطلع مرتب زي صفحة products */
        }

        /* Footer: price left, button right */
        .wm-grid-skin .product-card .product-footer {
            margin-top: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        /* Price look like products page */
        .wm-grid-skin .product-card .product-price {
            display: flex;
            align-items: baseline;
            gap: 8px;
            font-weight: 950;
            min-width: 0;
            white-space: nowrap;
        }

            .wm-grid-skin .product-card .product-price span:first-child {
                font-weight: 900;
            }

            .wm-grid-skin .product-card .product-price .currency {
                color: #00b890;
                font-weight: 950;
            }

        /* Button look */
        .wm-grid-skin .product-card .add-to-cart {
            height: 38px;
            padding: 0 14px;
            border-radius: 12px;
            background: #00d4aa;
            border: 1px solid #00d4aa;
            color: #041814;
            font-weight: 900;
            cursor: pointer;
            white-space: nowrap;
        }

            .wm-grid-skin .product-card .add-to-cart:hover {
                box-shadow: 0 0 0 3px rgba(0,212,170,.18);
            }

            .wm-grid-skin .product-card .add-to-cart:disabled {
                opacity: .5;
                cursor: not-allowed;
            }

    /* Brand section horizontal scroller was causing "under each other"
       Force it to behave like grid */
    .wm-grid-skin.brand-products-scroll {
        overflow: visible;
    }

    /* If your brand-products-wrap has scroll styles, neutralize only inside home */
    .brands-section .brand-products-wrap .brand-products-scroll.wm-grid-skin {
        overflow: visible !important;
    }
    /* =========================================================
       WMSTORE - UI FIX PACK (place at end of all-styles.css)
       Fixes:
       1) Cart badge position
       2) Brand text disappearing
       3) Product images look unprofessional
       4) Search input layout stability
       5) RTL/LTR glitches in Products page
    ========================================================= */

    /* ---------- 0) Small safety defaults ---------- */
    :root {
        --wm-radius: 16px;
        --wm-border: rgba(0,0,0,.10);
        --wm-shadow: 0 10px 25px rgba(0,0,0,.06);
        --wm-shadow-strong: 0 18px 40px rgba(0,0,0,.10);
        --wm-primary: var(--primary, #00d4aa);
        --wm-text: #111827;
        --wm-muted: #6b7280;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* Keep layout stable when switching languages */
    html {
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
    }

    /* ---------- 1) Cart badge (fix drifting) ---------- */
    /* افترض عندك زر سلة فيه badge class مثل cart-count / ssc-cart__badge */
    .cart-btn,
    .ssc-cart,
    .ssc-iconbtn,
    .header-cart {
        position: relative;
    }

    .cart-count,
    .ssc-cart__badge {
        position: absolute;
        top: 6px;
        right: 6px;
        transform: translate(40%, -40%);
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: #ef4444;
        color: #fff;
        font-size: 11px;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #fff;
        line-height: 1;
        z-index: 20;
    }

    /* RTL: badge moves to left */
    body.rtl .cart-count,
    body.rtl .ssc-cart__badge {
        right: auto;
        left: 6px;
        transform: translate(-40%, -40%);
    }

    /* ---------- 2) Brand name disappearing (truncate safely) ---------- */
    .brand-pill,
    .brand-tab,
    .wm-brand,
    .ssc-brand,
    .wm-card__sub,
    .ssc-product__sub {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0; /* مهم داخل flex */
    }

        /* Prevent active/hover from making text invisible */
        .brand-pill.active,
        .brand-tab.active {
            color: #fff !important;
            background: var(--wm-primary) !important;
            border-color: var(--wm-primary) !important;
        }

    /* ---------- 3) Product images (pro look) ---------- */
    /* Cards grid image */
    .wm-card__media,
    .ssc-product__media,
    .product-card__media,
    .product-media,
    .product-media-card {
        background: #f3f4f6;
        border-radius: var(--wm-radius);
        overflow: hidden;
    }

    /* If your card media is square */
    .wm-card__media {
        aspect-ratio: 1 / 1;
    }

        /* Unified image behavior */
        .wm-card__media img,
        .ssc-product__media img,
        .product-card__media img,
        .product-media-card img,
        .product-image {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover; /* احترافي */
            object-position: center;
        }

    /* Optional: make images feel nicer on hover */
    .wm-card:hover .wm-card__media img,
    .ssc-product:hover img {
        transform: scale(1.03);
        transition: transform .25s ease;
    }

    /* If you want "contain" instead of "cover" for products like logos */
    .wm-card__media.is-contain img {
        object-fit: contain;
        padding: 10px;
        background: #fff;
    }

    /* ---------- 4) Search field stability ---------- */
    /* prevent shrinking in header / filter layouts */
    .header-search,
    .wm-search,
    .ssc-header-search,
    .search-box {
        min-width: 220px;
    }

        .header-search input,
        .wm-search input,
        .ssc-header-search input,
        .search-box input {
            width: 100%;
            min-width: 220px;
        }

    /* ---------- 5) RTL/LTR layout fixes (Products page) ---------- */
    /* Use logical properties so RTL works automatically */
    .container {
        padding-inline: 16px;
    }

    .wm-shop__layout,
    .ssc-page,
    .wm-grid,
    .ssc-products-grid {
        min-width: 0;
    }

    /* Ensure cards don't break when dir changes */
    .wm-card__body,
    .ssc-product__meta {
        min-width: 0;
    }

    /* Drawer on RTL */
    body.rtl .wm-drawer {
        right: auto !important;
        left: 0 !important;
    }

    /* Fix icons/spacing for RTL quickly */
    body.rtl .wm-shop__crumb,
    body.rtl .ssc-pagehead {
        direction: rtl;
    }

    /* ---------- 6) Mobile polish ---------- */
    @media (max-width: 768px) {
        .wm-grid {
            grid-template-columns: repeat(2, minmax(0,1fr));
        }

        .wm-shop__top {
            gap: 10px;
        }

        .wm-shop__title {
            font-size: 22px;
        }

        .wm-card {
            box-shadow: var(--wm-shadow);
        }
    }

    @media (max-width: 420px) {
        .wm-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ---------- 7) Small UI consistency (optional) ---------- */
    .wm-card,
    .ssc-product,
    .product-card {
        border: 1px solid var(--wm-border);
        border-radius: 18px;
        box-shadow: var(--wm-shadow);
        background: #fff;
    }

        .wm-card:hover,
        .ssc-product:hover,
        .product-card:hover {
            box-shadow: var(--wm-shadow-strong);
            border-color: rgba(0,0,0,.16);
        }
    /* ================================
       FIX: Product card image quality
       Applies to Best Sellers + Brand sections
    ================================ */

    /* 1) Force a real media box with fixed ratio */
    .ssc-product__media,
    .home-card__media,
    .wm-card__media,
    .product-card__media,
    .best-seller-card__media,
    .card-media,
    [class*="product"] [class*="media"] {
        position: relative !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important; /* مربع محترم */
        overflow: hidden !important;
        border-radius: 16px !important;
        background: #f3f4f6 !important;
    }

        /* 2) Force the image to fill perfectly */
        .ssc-product__media img,
        .home-card__media img,
        .wm-card__media img,
        .product-card__media img,
        .best-seller-card__media img,
        .card-media img,
        [class*="product"] [class*="media"] img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important; /* احترافي */
            object-position: center !important;
            display: block !important;
            border-radius: 0 !important; /* خلي الروند للحاوية */
        }

    /* 3) If you have placeholder div instead of img */
    .ssc-product__ph,
    .wm-ph {
        width: 100% !important;
        height: 100% !important;
        display: grid !important;
        place-items: center !important;
        background: #f3f4f6 !important;
    }

    /* 4) Optional: smoother look */
    .ssc-product__media img,
    .wm-card__media img {
        transform: translateZ(0);
    }
    .wm-toast-host {
        position: fixed;
        z-index: 99999;
        right: 16px;
        top: 16px;
        display: grid;
        gap: 10px;
        max-width: min(360px, 92vw);
    }

    body.rtl .wm-toast-host {
        right: auto;
        left: 16px;
    }

    .wm-toast {
        background: #0b1220;
        color: #fff;
        border-radius: 16px;
        padding: 12px 14px;
        box-shadow: 0 16px 40px rgba(0,0,0,.22);
        display: flex;
        align-items: flex-start;
        gap: 10px;
        animation: wmToastIn .18s ease;
    }

    .wm-toast__icon {
        width: 28px;
        height: 28px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        background: rgba(255,255,255,.10);
        flex: 0 0 auto;
    }

    .wm-toast__title {
        font-weight: 900;
        font-size: 13px;
        margin: 0;
    }

    .wm-toast__msg {
        font-weight: 700;
        font-size: 12px;
        opacity: .85;
        margin: 2px 0 0;
    }

    .wm-toast__x {
        margin-left: auto;
        width: 34px;
        height: 34px;
        border-radius: 12px;
        border: 0;
        background: rgba(255,255,255,.08);
        color: #fff;
        cursor: pointer;
        font-weight: 900;
    }

    @keyframes wmToastIn {
        from {
            transform: translateY(-6px);
            opacity: 0
        }

        to {
            transform: translateY(0);
            opacity: 1
        }
    }
    /* PROMO BAR (Home only) */
    .wm-promo-home {
        margin: 10px 0 8px;
    }

    .wm-promo-home__bar {
        border-radius: 14px;
        overflow: hidden;
        background: linear-gradient(90deg,#0b1220,#0f172a);
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 10px 22px rgba(0,0,0,.12);
    }

    .wm-promo-home__viewport {
        width: 100%;
        height: 44px;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .wm-promo-home__track {
        display: flex;
        width: 100%;
        transform: translateX(0);
    }

    .wm-promo-home__item {
        flex: 0 0 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 14px;
        text-decoration: none;
        color: #e5e7eb;
        white-space: nowrap;
    }

    .wm-promo-home__tag {
        padding: 6px 10px;
        border-radius: 999px;
        font-weight: 900;
        font-size: 12px;
        background: rgba(255,255,255,.10);
        border: 1px solid rgba(255,255,255,.12);
    }

    .wm-promo-home__text {
        font-size: 13px;
        font-weight: 800;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: min(720px,52vw);
    }

    .wm-promo-home__badge {
        padding: 6px 10px;
        border-radius: 999px;
        font-weight: 900;
        font-size: 12px;
        background: rgba(0,212,170,.16);
        border: 1px solid rgba(0,212,170,.30);
        color: #bff7ea;
    }

    /* =========================
       PROMO CTA BUTTON
    ========================= */
    .wm-promo-home__cta {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        padding: 0 18px;
        border-radius: 999px;
        border: none;
        font-weight: 800;
        font-size: 13px;
        letter-spacing: .3px;
        color: #041814;
        background: linear-gradient(135deg, #00d4aa, #00b894);
        cursor: pointer;
        white-space: nowrap;
        transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }

        /* hover effect */
        .wm-promo-home__cta:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(0, 212, 170, 0.35);
            filter: brightness(1.05);
        }

        /* click effect */
        .wm-promo-home__cta:active {
            transform: translateY(0);
            box-shadow: 0 2px 6px rgba(0,0,0,.2);
        }

    /* RTL SUPPORT */
    body.rtl .wm-promo-home__cta {
        margin-left: 0;
        margin-right: auto;
    }

    @media (max-width:768px) {
        .wm-promo-home__viewport {
            height: 40px;
        }

        .wm-promo-home__item {
            height: 40px;
            padding: 0 10px;
            gap: 8px;
        }

        .wm-promo-home__text {
            font-size: 12px;
            max-width: 60vw;
        }

        .wm-promo-home__tag, .wm-promo-home__badge {
            font-size: 11px;
            padding: 5px 9px;
        }

        .wm-promo-home__cta {
            height: 30px;
            padding: 0 10px;
        }
    }
    a.wm-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        cursor: pointer;
    }
    /* =========================
       HOME / BRAND CARD (wm-card--home)
    ========================= */

    .wm-card.wm-card--home {
        position: relative;
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0,0,0,.06);
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

        .wm-card.wm-card--home:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 40px rgba(0,0,0,.10);
            border-color: rgba(0,212,170,.55);
        }

    /* ✅ overlay link covers card but under CTA */
    .wm-card__link {
        position: absolute;
        inset: 0;
        z-index: 2;
        text-decoration: none;
    }

    /* =========================
       IMAGE AREA
    ========================= */

    /* خلي مساحة الصورة ثابتة واحترافية */
    .wm-card--home .wm-card__media {
        width: 100%;
        aspect-ratio: 4 / 3; /* ✅ غيّرها لـ 1/1 لو بدك مربعة */
        background: #f3f4f6;
        overflow: hidden;
    }

        /* الصورة تغطي البلوك بدون تشويه */
        .wm-card--home .wm-card__media img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center;
            transform: scale(1);
            transition: transform .35s ease;
        }

    .wm-card--home:hover .wm-card__media img {
        transform: scale(1.06);
    }

    /* =========================
       BODY
    ========================= */

    .wm-card--home .wm-card__body {
        position: relative;
        z-index: 3;
        padding: 12px 12px 14px;
        display: grid;
        gap: 6px;
    }

    .wm-card--home .wm-card__name {
        font-weight: 950;
        font-size: 13px;
        line-height: 1.25;
    }

    .wm-card--home .wm-card__sub {
        font-weight: 800;
        font-size: 11px;
        opacity: .65;
    }

    .wm-card--home .wm-card__bottom {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .wm-card--home .wm-card__price {
        display: flex;
        align-items: baseline;
        gap: 6px;
        font-weight: 950;
    }

    .wm-card--home .wm-now {
        color: #00b894;
        font-size: 14px;
    }

    .wm-card--home .wm-cur {
        font-weight: 900;
        font-size: 12px;
        opacity: .75;
    }

    /* =========================
       CTA (VIEW)
    ========================= */

    .wm-card--home .wm-cta {
        position: relative;
        z-index: 4; /* ✅ فوق overlay link */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        padding: 0 16px;
        border-radius: 999px;
        background: #00d4aa;
        color: #041814;
        font-weight: 950;
        text-decoration: none;
        border: 1px solid rgba(0,0,0,.06);
        transition: transform .15s ease, box-shadow .15s ease;
    }

        .wm-card--home .wm-cta:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(0,212,170,.18);
        }
    .wm-card--home .wm-card__media img {
        object-fit: contain;
        background: #fff;
    }

    .ssc-lang {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        height: 44px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid #e5e7eb;
        background: #fff;
        font-weight: 900;
    }

    .ssc-lang__btn {
        border: 0;
        background: transparent;
        font-weight: 900;
        cursor: pointer;
        padding: 6px 8px;
        border-radius: 10px;
    }

        .ssc-lang__btn:hover {
            background: rgba(0,0,0,.04);
        }

    .ssc-lang__sep {
        opacity: .5;
    }


    .brand-panel {
        display: none;
    }

        .brand-panel.active {
            display: block;
        }



    /* =========================
       FOOTER - SOCIAL ICONS IMPROVED
       Add at END of all-styles.css
    ========================= */

    .footer .social-links {
        display: flex;
        gap: 12px;
        margin-top: 10px;
    }

        .footer .social-links .social {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.10);
            transition: transform .25s ease, background .25s ease, border-color .25s ease;
        }

            .footer .social-links .social svg {
                width: 20px;
                height: 20px;
                fill: #fff;
                opacity: .95;
            }

            .footer .social-links .social:hover {
                transform: translateY(-3px);
                border-color: rgba(255,255,255,.20);
            }

    /* Hover colors */
    .footer .social.instagram:hover {
        background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af);
    }

    .footer .social.facebook:hover {
        background: #1877f2;
    }

    .footer .social.whatsapp:hover {
        background: #25D366;
    }

    /* ===== PROMOTION CENTER TEXT ===== */
    .wm-promo__inner {
        justify-content: center;
    }

    .wm-promo__viewport {
        justify-content: center;
    }

    .wm-promo__track {
        justify-content: center;
        width: 100%;
        text-align: center;
    }

    .wm-hero-img__content {
        align-items: flex-end;
        justify-content: space-between;
    }

    /* ===== HERO CENTER BUTTON ===== */

    .wm-hero-img__content {
        position: absolute;
        inset: 0;
    }

    /* العنوان يبقى أسفل يسار */
    .wm-hero-img__title {
        position: absolute;
        left: 18px;
        bottom: 18px;
    }

    /* الزر في منتصف الصورة */
    .wm-hero-img__btn {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 52px;
        padding: 0 26px;
        border-radius: 999px;
        background: #00d4aa;
        color: #041814;
        font-weight: 900;
        font-size: 15px;
        box-shadow: 0 20px 40px rgba(0,212,170,.35);
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .wm-hero-img__wrap:hover .wm-hero-img__btn {
        transform: translate(-50%, -50%) scale(1.06);
    }

    /* Perfect center promo text even with CTA on the right */
    .wm-promo__viewport {
        position: relative;
    }

    .wm-promo__track {
        width: 100%;
        justify-content: center;
        padding: 0 120px; /* مساحة لزر اليمين */
    }

    .wm-promo__cta {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* RTL */
    body.rtl .wm-promo__cta {
        right: auto;
        left: 10px;
    }

    /* ===== TOP CATEGORIES CENTER TEXT ===== */

    .home-top-products__item {
        text-align: center;
        justify-items: center;
    }

    .home-top-products__name {
        text-align: center;
        width: 100%;
    }

    .home-top-products__cta {
        left: 50%;
        transform: translateX(-50%);
    }

    /* ===== HERO BUTTON PERFECT POSITION ===== */

    .wm-hero-img__content {
        position: absolute;
        inset: 0;
    }

    /* العنوان يبقى أسفل يسار */
    .wm-hero-img__title {
        position: absolute;
        left: 20px;
        bottom: 20px;
    }

    /* زر shop now بالنص لكن تحت */
    .wm-hero-img__btn {
        position: absolute;
        left: 50%;
        top: 68%; /* ← هذا السر (نص لكن نازل شوي) */
        transform: translate(-50%, -50%);
        height: 48px;
        padding: 0 26px;
        border-radius: 999px;
        background: #00d4aa;
        color: #041814;
        font-weight: 900;
        font-size: 15px;
        box-shadow: 0 18px 35px rgba(0,212,170,.35);
        transition: all .25s ease;
    }

    .wm-hero-img__wrap:hover .wm-hero-img__btn {
        transform: translate(-50%, -50%) scale(1.06);
    }

    /* ===== TOP CATEGORIES: CENTER TEXT ===== */
    .home-top-products__item {
        text-align: center;
        justify-items: center;
    }

    .home-top-products__name {
        width: 100%;
        text-align: center;
    }

    /* خلي Browse تحت الاسم وبالنص (بدون absolute) */
    .home-top-products__cta {
        position: static !important;
        transform: none !important;
        margin: 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        /* نفس الستايل الجميل */
        background: rgba(0,0,0,.72);
        color: #fff;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
    }

    /* ===== HERO: CENTER BUTTON BUT LOWER ===== */
    .wm-hero-img__content {
        position: absolute;
        inset: 0;
        display: block !important; /* يلغي flex */
        padding: 0 !important;
    }

    /* العنوان أسفل يسار */
    .wm-hero-img__title {
        position: absolute;
        left: 18px;
        bottom: 18px;
        max-width: 70%;
    }

    /* الزر بالنص لكن نازل شوي */
    .wm-hero-img__btn {
        position: absolute;
        left: 50%;
        top: 70%; /* ← غيّرها 68% / 72% حسب ما بدك */
        transform: translate(-50%, -50%) !important;
        height: 48px;
        padding: 0 26px;
        border-radius: 999px;
        background: #00d4aa;
        color: #041814;
        font-weight: 900;
        box-shadow: 0 18px 35px rgba(0,212,170,.35);
        transition: transform .25s ease;
    }

    .wm-hero-img__wrap:hover .wm-hero-img__btn {
        transform: translate(-50%, -50%) scale(1.06) !important;
    }

    /* RTL: العنوان يصير يمين */
    body.rtl .wm-hero-img__title {
        left: auto;
        right: 18px;
    }

    /* ===== HERO: stable for EN/AR ===== */
    .wm-hero-img__content {
        position: absolute;
        inset: 0;
        display: block;
    }

    .wm-hero-img__title {
        position: absolute;
        left: 18px;
        bottom: 18px;
        color: #fff;
        font-weight: 900;
        font-size: clamp(16px,2.2vw,28px);
        line-height: 1.15;
        max-width: 70%;
        text-shadow: 0 10px 22px rgba(0,0,0,.35);
    }

    /* RTL: العنوان يصير يمين */
    body.rtl .wm-hero-img__title {
        left: auto;
        right: 18px;
        text-align: right;
    }

    /* الزر بالنص وتحت شوي */
    .wm-hero-img__btn {
        position: absolute;
        left: 50%;
        top: 70%;
        transform: translate(-50%,-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        padding: 0 26px;
        border-radius: 999px;
        background: #00d4aa;
        color: #041814;
        font-weight: 900;
        box-shadow: 0 18px 35px rgba(0,212,170,.35);
        transition: transform .25s ease;
    }

    .wm-hero-img__wrap:hover .wm-hero-img__btn {
        transform: translate(-50%,-50%) scale(1.06);
    }

    /* ===== SECTION HEADER RTL FIX ===== */
    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    body.rtl .section-header {
        flex-direction: row-reverse;
    }

    /* view-all ثابت ومش بخرب */
    .view-all {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    body.rtl .view-all {
        direction: rtl;
    }

    /* ===== TOP CATEGORIES RTL ===== */
    .home-top-products__scroll {
        direction: ltr;
    }

    body.rtl .home-top-products__scroll {
        direction: rtl;
    }

    .home-top-products__item,
    .home-top-products__name {
        text-align: center;
    }

    body.rtl .section-header h2 {
        text-align: right;
        width: 100%;
    }

    /* ===== REVERSE SECTION HEADER (AR layout) ===== */

    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* لما اللغة عربي */
    body.rtl .section-header {
        flex-direction: row-reverse;
    }

        /* زر عرض الكل يبقى بمحاذاة الطرف */
        body.rtl .section-header .view-all {
            margin-left: 0;
            margin-right: auto;
        }

    /* ===== FORCE RTL: title RIGHT + view-all LEFT ===== */

    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    /* RTL Fix */
    body.rtl .section-header {
        flex-direction: row; /* لا نعكس */
    }

        /* العنوان على اليمين */
        body.rtl .section-header > div {
            margin-left: auto; /* يدفعه لليمين */
            text-align: right;
        }

        /* زر عرض الكل على اليسار */
        body.rtl .section-header .view-all {
            margin-left: 0;
            margin-right: auto; /* يخليه أقصى اليسار */
            direction: rtl;
        }
        body.rtl .section-header .view-all {
            float: none !important;
        }

        body.rtl .section-header > div {
            float: none !important;
        }

    /* ===== BEST SELLERS HEADER: RTL FIX (no overlap) ===== */
    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    /* RTL: استخدم Grid لضمان الترتيب */
    body.rtl .section-header {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 12px;
    }

        /* العنوان يمين */
        body.rtl .section-header > div {
            grid-column: 2;
            justify-self: end;
            text-align: right;
            margin: 0 !important;
        }

        /* عرض الكل يسار */
        body.rtl .section-header .view-all {
            grid-column: 1;
            justify-self: start;
            margin: 0 !important;
            direction: rtl;
        }

    /* ===== HEADER: force title right + view-all left when dir=rtl ===== */

    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    /* إذا الصفحة RTL (dir="rtl") */
    html[dir="rtl"] .section-header {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 12px;
    }

        html[dir="rtl"] .section-header > div {
            grid-column: 2;
            justify-self: end;
            text-align: right;
            margin: 0 !important;
        }

        html[dir="rtl"] .section-header .view-all {
            grid-column: 1;
            justify-self: start;
            margin: 0 !important;
            direction: rtl;
        }

    /* ✅ Section header stable in EN + RTL (Best Sellers / Brand) */
    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .section-title h2 {
        margin: 0;
    }

    .view-all {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    /* EN default: title left, view-all right */
    .section-title {
        order: 1;
        text-align: left;
    }

    .view-all {
        order: 2;
    }

    /* RTL: title RIGHT, view-all LEFT (✅ exactly what you want) */
    body.rtl .section-header {
        direction: rtl;
    }
    /* لا نستخدم row-reverse */
    body.rtl .section-title {
        order: 2;
        text-align: right;
    }

    body.rtl .view-all {
        order: 1;
    }

    /* ✅ RTL: عكس ألوان السعر (الجديد/القديم) */
    body.rtl .wm-now {
        color: #9ca3af !important;
    }

    body.rtl .wm-old {
        color: #00b890 !important;
    }
    body.rtl .wm-cur {
        color: #6b7280 !important;
    }

    /* ================================
       ✅ RTL: عكس ترتيب السعر
    ================================ */

    body.rtl .wm-card__price {
        flex-direction: row-reverse;
    }
/* Remove border from brand tab button */
.brand-tab {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

    .brand-tab.active {
        border: none !important;
        box-shadow: none !important;
    }
    .brand-tab:focus,
    .brand-tab:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

/* =========================================================
   WMSTORE EXTRA ADDITIONS
   - Desktop arrows for horizontal sections
   - Header search suggestions
   ========================================================= */

/* ---------- shared desktop horizontal arrows ---------- */
.home-top-products__wrap,
.wm-hscroll-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

    .home-top-products__scroll,
    .wm-hscroll-wrap .wm-hscroll {
        flex: 1 1 auto;
        min-width: 0;
    }

.home-top-products__nav,
.wm-hscroll__nav {
    display: none;
}

@media (min-width: 992px) {
    .home-top-products__wrap,
    .wm-hscroll-wrap {
        padding-left: 46px;
        padding-right: 46px;
    }

    .home-top-products__nav,
    .wm-hscroll__nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 38px;
        height: 38px;
        border: 1px solid #e5e7eb;
        border-radius: 999px;
        background: #fff;
        color: #111827;
        font-size: 24px;
        font-weight: 900;
        line-height: 1;
        cursor: pointer;
        z-index: 8;
        box-shadow: 0 8px 18px rgba(0,0,0,.08);
        transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }

        .home-top-products__nav:hover,
        .wm-hscroll__nav:hover {
            transform: translateY(-50%) scale(1.06);
            box-shadow: 0 12px 24px rgba(0,0,0,.12);
        }

        .home-top-products__nav:disabled,
        .wm-hscroll__nav:disabled {
            opacity: .35;
            cursor: default;
            transform: translateY(-50%);
            box-shadow: 0 8px 18px rgba(0,0,0,.05);
        }

    .home-top-products__nav--prev,
    .wm-hscroll__nav--prev {
        left: 0;
    }

    .home-top-products__nav--next,
    .wm-hscroll__nav--next {
        right: 0;
    }
}

@media (max-width: 991.98px) {
    .home-top-products__nav,
    .wm-hscroll__nav {
        display: none !important;
    }
}

/* ---------- search suggestions ---------- */
.ssc-search {
    position: relative;
}

.ssc-search__suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,.10);
    padding: 8px;
    z-index: 2000;
    max-height: 380px;
    overflow-y: auto;
}

.ssc-search__suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #111827;
    padding: 10px 12px;
    border-radius: 14px;
    transition: background .18s ease;
}

    .ssc-search__suggestion:hover,
    .ssc-search__suggestion.is-active {
        background: #f8fafc;
    }

.ssc-search__suggestion-img {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
    flex: 0 0 42px;
}

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

.ssc-search__suggestion-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ssc-search__suggestion-title {
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ssc-search__suggestion-sub {
    font-size: 12px;
    color: #6b7280;
    font-weight: 700;
}

.ssc-search__suggestion-empty {
    padding: 12px 14px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
}

/* ---------- keep brand panel arrows above cards ---------- */
.brand-panel .wm-hscroll-wrap {
    position: relative;
}

/* =========================================================
   WMSTORE - SEARCH SUGGESTIONS (Desktop + Drawer Mobile)
   Paste at END of all-styles.css
========================================================= */

.ssc-search,
.ssc-drawer-search {
    position: relative;
}

.ssc-search__suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 9999;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    box-shadow: 0 16px 30px rgba(0,0,0,.10);
    overflow: hidden;
    padding: 6px;
    max-height: 320px;
    overflow-y: auto;
}

.ssc-search__suggestions--drawer {
    top: calc(100% + 6px);
    z-index: 10000;
}

body.rtl .ssc-search__suggestions {
    direction: rtl;
}

.ssc-sugg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

    .ssc-sugg-item:hover,
    .ssc-sugg-item.is-active {
        background: rgba(0,0,0,.05);
    }

.ssc-sugg-img {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f3f4f6;
    flex: 0 0 auto;
    overflow: hidden;
}

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

.ssc-sugg-name {
    font-weight: 900;
    font-size: 13px;
    line-height: 1.2;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ssc-sugg-empty {
    padding: 10px 12px;
    color: #6b7280;
    font-weight: 800;
    font-size: 12px;
}


/* Fix input text color in Auth pages */
#Input_Email,
#Input_Password,
#Input_ConfirmPassword {
    color: #0f172a !important; /* كحلي */
}

    /* placeholder color */
    #Input_Email::placeholder,
    #Input_Password::placeholder,
    #Input_ConfirmPassword::placeholder {
        color: #64748b;
    }

.auth-form .form-control {
    color: #0f172a !important; /* navy */
}

    .auth-form .form-control::placeholder {
        color: #64748b;
    }