body {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            background-color: #f9f9f9;
        }
        .salla-header {
            background-color: #1E3F8A;
            color: #fff;
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .salla-header a {
            color: #fff;
            text-decoration: none;
        }
        .cart-icon-wrapper {
            position: relative;
            font-size: 1.5rem;
        }
        .cart-badge {
            position: absolute;
            top: -5px;
            right: -8px;
            background-color: #d32f2f;
            color: white;
            border-radius: 50%;
            font-size: 0.75rem;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .categories-bar {
            background: #fff;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
            overflow-x: auto;
            white-space: nowrap;
        }
        .category-pill {
            display: inline-block;
            background-color: #f3f4f6;
            color: #333;
            padding: 8px 20px;
            border-radius: 50px;
            text-decoration: none;
            font-size: 0.9rem;
            margin-left: 10px;
            border: 1px solid transparent;
        }
        .category-pill.active, .category-pill:hover {
            background-color: #eef2ff;
            color: #1E3F8A;
            border-color: #1E3F8A;
        }
        .product-card {
            background: #fff;
            border: 1px solid #eaeaea;
            border-radius: 8px;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: transform 0.2s;
        }
        .product-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        .product-image {
            height: 200px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #adb5bd;
            border-bottom: 1px solid #eaeaea;
        }
        .product-image i {
            font-size: 3rem;
        }
        .product-details {
            padding: 15px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .product-title {
            font-size: 0.95rem;
            color: #333;
            margin-bottom: 10px;
            line-height: 1.4;
        }
        .product-price {
            font-size: 1.1rem;
            font-weight: 700;
            color: #1E3F8A;
            margin-top: auto;
            margin-bottom: 15px;
        }
        .add-to-cart-btn {
            background-color: #fff;
            color: #1E3F8A;
            border: 1px solid #1E3F8A;
            border-radius: 4px;
            padding: 8px;
            width: 100%;
            font-weight: 500;
            transition: all 0.2s;
        }
        .add-to-cart-btn:hover {
            background-color: #1E3F8A;
            color: #fff;
        }
        .social-media-links { display: flex; gap: 15px; margin-top: 20px; }
        .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; color: #ffffff; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.1); }
        .social-icon svg { width: 20px; height: 20px; }
        .social-icon:hover { background-color: #ffffff; color: #d32f2f; transform: translateY(-3px); }
        .branches-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; padding: 20px; max-width: 1300px; margin: 0 auto; direction: rtl; }
        .branch-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; display: flex; flex-direction: column; height: 100%; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease; }
        .branch-card:hover { transform: translateY(-5px); }
        .branch-header { padding: 20px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 12px; }
        .branch-header h3 { margin: 0; font-size: 1.25rem; color: #1e293b; }
        .branch-badge { background: #3b82f6; color: white; padding: 4px 12px; font-size: 0.75rem; font-weight: bold; border-radius: 99px; width: fit-content; margin: 15px 15px 0 0; }
        .branch-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; gap: 15px; }
        .branch-image { width: 100%; margin-top: 10px; }
        .branch-image img { width: 100%; height: 250px; object-fit: cover; border-radius: 12px; display: block; }
        .branch-map { width: 100%; height: 220px; margin-top: auto; border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; }
        .branch-map iframe { width: 100% !important; height: 100% !important; border: 0; }
        .branch-card.main { border: 2px solid #3b82f6; }

        .offcanvas-salla {
            width: 300px;
        }
        .offcanvas-salla .offcanvas-header {
            background-color: #fff;
            color: #333;
            padding: 0;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .offcanvas-salla .offcanvas-title {
            padding-right: 15px;
            font-size: 1rem;
            font-weight: bold;
        }
        .offcanvas-salla .btn-close-custom {
            background-color: #f44336;
            color: #fff;
            border: none;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
        }
        .offcanvas-salla .list-group-item {
            border: none;
            border-bottom: 1px solid #fcfcfc;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #333;
            font-weight: 600;
            font-size: 0.95rem;
        }
        .offcanvas-salla .list-group-item:hover {
            background-color: #fafafa;
        }
        .offcanvas-salla .list-group-item .item-content {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .offcanvas-salla .list-group-item img {
            width: 35px;
            height: 35px;
            object-fit: contain;
        }
        .offcanvas-salla .list-group-item .chevron {
            color: #ccc;
            font-size: 0.8rem;
        }