:root {

            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --primary-light: #eff6ff;

            --dark: #0b1220;
            --dark-2: #111827;

            --text: #334155;
            --text-dark: #0f172a;
            --muted: #64748b;

            --background: #f7f9fc;
            --white: #ffffff;

            --border: #e5e7eb;

            --success: #16a34a;
            --warning: #f59e0b;
            --danger: #ef4444;

            --shadow-sm:
                0 2px 8px rgba(15, 23, 42, .05);

            --shadow:
                0 8px 25px rgba(15, 23, 42, .08);

            --shadow-lg:
                0 18px 50px rgba(15, 23, 42, .16);

            --radius: 10px;
            --radius-lg: 16px;
        }


        /* =========================================================
           GLOBAL
        ========================================================== */

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {

            margin: 0;

            background: var(--background);

            color: var(--text);

            font-family: "Inter", sans-serif;

            font-size: 14px;

            line-height: 1.6;
        }

        body.mobile-menu-open {
            overflow: hidden;
        }

        a {
            text-decoration: none;
        }

        button,
        input {
            font-family: inherit;
        }

        button {
            cursor: pointer;
        }

        img {
            max-width: 100%;
        }

        .container {
            max-width: 1240px;
        }


        /* =========================================================
           TOPBAR
        ========================================================== */

        .topbar {

            background: var(--dark);

            color: #cbd5e1;

            font-size: 12px;
        }

        .topbar-inner {

            min-height: 36px;

            display: flex;

            align-items: center;

            justify-content: space-between;
        }

        .topbar-left,
        .topbar-right {

            display: flex;

            align-items: center;

            gap: 18px;
        }

        .topbar a {
            color: #cbd5e1;
        }

        .topbar a:hover {
            color: #fff;
        }


        /* =========================================================
           HEADER
        ========================================================== */

        .main-header {

            background: #fff;

            border-bottom: 1px solid var(--border);

            position: sticky;

            top: 0;

            z-index: 1000;
        }

        .main-header-inner {

            min-height: 72px;

            display: flex;

            align-items: center;

            gap: 18px;
        }

        .brand {

            display: flex;

            align-items: center;

            gap: 9px;

            flex-shrink: 0;
        }

        .brand-icon {

            width: 40px;
            height: 40px;

            display: flex;

            align-items: center;
            justify-content: center;

            background: var(--primary);

            color: #fff;

            border-radius: 10px;

            font-size: 21px;

            font-weight: 800;
        }

        .brand-text {

            color: var(--text-dark);

            font-size: 22px;

            font-weight: 800;
        }

        .brand-text span {
            color: var(--primary);
        }

        .location-box {

            display: flex;

            align-items: center;

            gap: 7px;

            padding: 8px 12px;

            border: 1px solid var(--border);

            border-radius: 9px;

            white-space: nowrap;
        }

        .location-box i {
            color: var(--primary);
        }

        .header-search {

            flex: 1;

            max-width: 560px;

            margin: auto;
        }

        .header-search form {

            display: flex;

            overflow: hidden;

            border: 1px solid var(--border);

            border-radius: 9px;
        }

        .header-search input {

            flex: 1;

            border: 0;

            outline: 0;

            padding: 11px 14px;
        }

        .header-search button {

            width: 48px;

            border: 0;

            background: var(--primary);

            color: #fff;
        }

        .header-actions {

            display: flex;

            align-items: center;

            gap: 6px;
        }

        .header-btn {

            padding: 9px 13px;

            border-radius: 8px;

            color: var(--text);

            font-size: 13px;

            font-weight: 700;
        }

        .header-btn:hover {

            color: var(--primary);

            background: var(--primary-light);
        }

        .header-btn-primary {

            color: #fff;

            background: var(--primary);
        }

        .header-btn-primary:hover {

            color: #fff;

            background: var(--primary-dark);
        }


        /* =========================================================
           MOBILE SEARCH
        ========================================================== */

        .mobile-search {
            display: none;
        }


        /* =========================================================
           DIRECTORY NAV
        ========================================================== */

        .directory-menu {

            background: #fff;

            border-bottom: 1px solid var(--border);

            position: relative;

            z-index: 900;
        }

        .directory-menu-inner {

            min-height: 54px;

            display: flex;

            align-items: center;

            justify-content: space-between;
        }

        .directory-links {

            display: flex;

            align-items: center;
        }

        .directory-link,
        .directory-dropdown-btn {

            height: 54px;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 7px;

            padding: 0 15px;

            border: 0;

            background: transparent;

            color: var(--text);

            font-size: 13px;

            font-weight: 600;

            white-space: nowrap;
        }

        .directory-link:hover,
        .directory-link.active,
        .directory-dropdown-btn:hover,
        .directory-dropdown.active > .directory-dropdown-btn {

            color: var(--primary);

            background: var(--primary-light);
        }

        .directory-dropdown {
            position: static;
        }


        /* =========================================================
           DESKTOP CATEGORY MEGA MENU
        ========================================================== */

        .desktop-category-menu {

            position: absolute;

            top: 54px;

            left: 50%;

            transform: translateX(-50%);

            width: min(900px, calc(100vw - 30px));

            display: none;

            grid-template-columns: 230px 1fr;

            background: #fff;

            border: 1px solid var(--border);

            border-radius: 0 0 14px 14px;

            box-shadow: var(--shadow-lg);

            overflow: hidden;
        }

        .category-dropdown:hover .desktop-category-menu {

            display: grid;
        }


        /* =========================================================
           DESKTOP LEFT CATEGORY
        ========================================================== */

        .desktop-category-list {

            background: #f8fafc;

            padding: 10px;

            border-right: 1px solid var(--border);
        }

        .desktop-category-heading {

            padding: 8px 10px 10px;

            color: var(--muted);

            font-size: 14px;

            font-weight: 800;

            text-transform: uppercase;

            letter-spacing: .5px;
        }

        .desktop-category-item {

            width: 100%;

            display: flex;

            align-items: center;

            justify-content: space-between;

            border: 0;

            background: transparent;

            padding: 10px;

            border-radius: 8px;

            color: var(--text);

            text-align: left;

            font-size: 12px;

            font-weight: 600;
        }

        .desktop-category-item:hover,
        .desktop-category-item.active {

            background: #fff;

            color: var(--primary);

            box-shadow: var(--shadow-sm);
        }

        .desktop-category-name {

            display: flex;

            align-items: center;

            gap: 8px;
        }

        .desktop-category-icon {

            width: 30px;
            height: 30px;

            display: flex;

            align-items: center;
            justify-content: center;

            background: #fff;

            color: var(--primary);

            border-radius: 7px;
        }


        /* =========================================================
           DESKTOP PRODUCT PANEL
        ========================================================== */

        .desktop-products {

            padding: 22px;

            min-height: 390px;
        }

        .desktop-product-panel {

            display: none;
        }

        .desktop-product-panel.active {

            display: block;
        }

        .desktop-products-header {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 15px;

            margin-bottom: 4px;
        }

        .desktop-products-header h4 {

            margin: 0;

            color: var(--text-dark);

            font-size: 17px;

            font-weight: 800;
        }

        .desktop-products-header a {

            color: var(--primary);

            font-size: 13px;

            font-weight: 700;
        }

        .desktop-product-description {

            color: var(--muted);

            font-size: 13px;

            margin: 0 0 18px;
        }

        .desktop-product-grid {

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 8px;
        }

        .desktop-product-item {

            display: flex;

            align-items: center;

            gap: 8px;

            padding: 10px;

            border: 1px solid var(--border);

            border-radius: 8px;

            color: var(--text);

            font-size: 13px;

            font-weight: 600;
        }

        .desktop-product-item i {

            color: var(--primary);

            font-size: 15px;
        }

        .desktop-product-item:hover {

            background: var(--primary-light);

            color: var(--primary);

            border-color: #bfdbfe;
        }

        .desktop-menu-footer {

            display: flex;

            align-items: center;

            justify-content: space-between;

            margin-top: 20px;

            padding-top: 14px;

            border-top: 1px solid var(--border);
        }

        .desktop-menu-footer span {

            color: var(--muted);

            font-size: 14px;
        }

        .desktop-menu-footer a {

            display: inline-flex;

            align-items: center;

            gap: 5px;

            padding: 8px 11px;

            background: var(--primary);

            color: #fff;

            border-radius: 7px;

            font-size: 14px;

            font-weight: 700;
        }


        /* =========================================================
           PRODUCTS SIMPLE DROPDOWN
        ========================================================== */

        .products-dropdown {
            position: relative;
        }

        .products-dropdown-menu {

            position: absolute;

            top: 54px;

            left: 0;

            width: 245px;

            display: none;

            padding: 8px;

            background: #fff;

            border: 1px solid var(--border);

            border-radius: 0 0 12px 12px;

            box-shadow: var(--shadow-lg);
        }

        .products-dropdown:hover .products-dropdown-menu {

            display: block;
        }

        .products-dropdown-menu a {

            display: flex;

            align-items: center;

            gap: 9px;

            padding: 9px 10px;

            color: var(--text);

            border-radius: 7px;

            font-size: 12px;
        }

        .products-dropdown-menu a:hover {

            background: var(--primary-light);

            color: var(--primary);
        }

        .products-dropdown-menu i {

            width: 18px;

            color: var(--primary);
        }


        /* =========================================================
           LIST BUSINESS
        ========================================================== */

        .list-business-btn {

            display: inline-flex;

            align-items: center;

            gap: 7px;

            padding: 9px 14px;

            background: var(--primary);

            color: #fff;

            border-radius: 8px;

            font-size: 12px;

            font-weight: 700;
        }

        .list-business-btn:hover {

            background: var(--primary-dark);

            color: #fff;
        }


        /* =========================================================
           MOBILE CATEGORY DRAWER
        ========================================================== */

        .mobile-category-overlay {

            display: none;
        }

        .mobile-category-drawer {

            display: none;
        }


        /* =========================================================
           HERO
        ========================================================== */

        .hero {

            padding: 72px 0 76px;

            color: #fff;

            background:
                radial-gradient(
                    circle at 85% 20%,
                    rgba(37, 99, 235, .35),
                    transparent 35%
                ),
                linear-gradient(
                    135deg,
                    #0b1220,
                    #111827
                );
        }

        .hero-badge {

            display: inline-flex;

            align-items: center;

            gap: 7px;

            padding: 7px 11px;

            border: 1px solid rgba(255,255,255,.15);

            border-radius: 50px;

            background: rgba(255,255,255,.06);

            color: #dbeafe;

            font-size: 13px;

            font-weight: 600;

            margin-bottom: 17px;
        }

        .hero h1 {

            margin: 0 0 17px;

            max-width: 720px;

            font-size: clamp(32px, 5vw, 52px);

            line-height: 1.08;

            font-weight: 800;
        }

        .hero h1 span {

            color: #60a5fa;
        }

        .hero-description {

            max-width: 620px;

            color: #cbd5e1;

            font-size: 15px;

            margin-bottom: 27px;
        }

        .hero-search {

            max-width: 720px;

            display: flex;

            padding: 6px;

            background: #fff;

            border-radius: 11px;
        }

        .hero-search-field {

            flex: 1;

            display: flex;

            align-items: center;

            gap: 8px;

            padding: 0 12px;

            border-right: 1px solid var(--border);
        }

        .hero-search-field i {

            color: var(--primary);
        }

        .hero-search-field input {

            width: 100%;

            padding: 10px 0;

            border: 0;

            outline: 0;
        }

        .hero-search button {

            padding: 0 21px;

            border: 0;

            border-radius: 8px;

            background: var(--primary);

            color: #fff;

            font-weight: 700;
        }

        .hero-stats {

            display: flex;

            flex-wrap: wrap;

            gap: 28px;

            margin-top: 28px;
        }

        .hero-stat strong {

            display: block;

            color: #fff;

            font-size: 20px;
        }

        .hero-stat span {

            color: #94a3b8;

            font-size: 14px;
        }

        .hero-preview {

            padding: 18px;

            background: rgba(255,255,255,.06);

            border: 1px solid rgba(255,255,255,.1);

            border-radius: 17px;
        }

        .preview-top {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 10px;

            margin-bottom: 14px;
        }

        .preview-business {

            display: flex;

            align-items: center;

            gap: 9px;
        }

        .preview-icon {

            width: 42px;
            height: 42px;

            display: flex;

            align-items: center;
            justify-content: center;

            background: rgba(37,99,235,.2);

            color: #60a5fa;

            border-radius: 9px;
        }

        .preview-business strong {

            display: block;

            color: #fff;

            font-size: 13px;
        }

        .preview-business small {

            color: #94a3b8;

            font-size: 14px;
        }

        .verified {

            color: #4ade80;

            font-size: 14px;
        }

        .preview-card {

            padding: 12px;

            margin-bottom: 8px;

            background: rgba(255,255,255,.05);

            border: 1px solid rgba(255,255,255,.08);

            border-radius: 9px;
        }

        .preview-card strong {

            display: block;

            color: #fff;

            font-size: 12px;
        }

        .preview-card small {

            color: #94a3b8;

            font-size: 14px;
        }


        /* =========================================================
           TRUST
        ========================================================== */

        .trust-strip {

            background: #fff;

            border-bottom: 1px solid var(--border);
        }

        .trust-grid {

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            padding: 18px 0;
        }

        .trust-item {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 9px;

            border-right: 1px solid var(--border);
        }

        .trust-item:last-child {
            border-right: 0;
        }

        .trust-item i {

            color: var(--primary);

            font-size: 20px;
        }

        .trust-item strong {

            display: block;

            color: var(--text-dark);

            font-size: 13px;
        }

        .trust-item span {

            color: var(--muted);

            font-size: 12px;
        }


        /* =========================================================
           SECTIONS
        ========================================================== */

        .section {

            padding: 65px 0;
        }

        .section-header {

            display: flex;

            align-items: flex-end;

            justify-content: space-between;

            gap: 20px;

            margin-bottom: 24px;
        }

        .section-title {

            margin: 0;

            color: var(--text-dark);

            font-size: 26px;

            font-weight: 800;
        }

        .section-subtitle {

            margin: 5px 0 0;

            color: var(--muted);

            font-size: 12px;
        }

        .section-link {

            color: var(--primary);

            font-size: 13px;

            font-weight: 700;
        }


        /* =========================================================
           CATEGORY CARDS
        ========================================================== */

        .category-grid {

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 14px;
        }

        .category-card {

            padding: 19px;

            background: #fff;

            border: 1px solid var(--border);

            border-radius: 12px;

            color: var(--text);

            transition: .2s;
        }

        .category-card:hover {

            transform: translateY(-3px);

            border-color: #bfdbfe;

            box-shadow: var(--shadow);
        }

        .category-card-icon {

            width: 42px;
            height: 42px;

            display: flex;

            align-items: center;
            justify-content: center;

            margin-bottom: 13px;

            background: var(--primary-light);

            color: var(--primary);

            border-radius: 9px;

            font-size: 19px;
        }

        .category-card strong {

            display: block;

            color: var(--text-dark);

            font-size: 13px;
        }

        .category-card span {

            color: var(--muted);

            font-size: 14px;
        }


        /* =========================================================
           BUSINESS / PRODUCTS
        ========================================================== */

        .business-grid,
        .product-grid {

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 17px;
        }

        .business-card,
        .product-card {

            overflow: hidden;

            background: #fff;

            border: 1px solid var(--border);

            border-radius: 13px;

            transition: .2s;
        }

        .business-card:hover,
        .product-card:hover {

            transform: translateY(-3px);

            box-shadow: var(--shadow);
        }

        .business-image,
        .product-image {

            height: 175px;

            display: flex;

            align-items: center;
            justify-content: center;

            background: linear-gradient(
                135deg,
                #dbeafe,
                #eff6ff
            );

            color: var(--primary);

            font-size: 45px;
        }

        .business-body,
        .product-body {

            padding: 16px;
        }

        .business-top,
        .product-top {

            display: flex;

            justify-content: space-between;

            gap: 10px;
        }

        .business-body h3,
        .product-body h3 {

            margin: 0;

            color: var(--text-dark);

            font-size: 14px;

            font-weight: 700;
        }

        .favorite {

            border: 0;

            background: transparent;

            color: #94a3b8;

            font-size: 18px;
        }

        .favorite.active {

            color: var(--danger);
        }

        .business-location,
        .product-category {

            margin-top: 5px;

            color: var(--muted);

            font-size: 14px;
        }

        .verified-badge {

            display: inline-flex;

            align-items: center;

            gap: 4px;

            margin-top: 11px;

            padding: 4px 7px;

            background: #f0fdf4;

            color: var(--success);

            border-radius: 5px;

            font-size: 12px;

            font-weight: 700;
        }


        /* =========================================================
           CITIES
        ========================================================== */

        .city-grid {

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 11px;
        }

        .city-card {

            display: flex;

            align-items: center;

            gap: 8px;

            padding: 14px;

            background: #fff;

            border: 1px solid var(--border);

            border-radius: 9px;

            color: var(--text);

            font-size: 12px;

            font-weight: 600;
        }

        .city-card i {
            color: var(--primary);
        }

        .city-card:hover {

            background: var(--primary-light);

            color: var(--primary);
        }


        /* =========================================================
           CTA
        ========================================================== */

        .cta {

            padding: 65px 0;
        }

        .cta-box {

            padding: 44px;

            background:
                radial-gradient(
                    circle at 80% 30%,
                    rgba(96,165,250,.25),
                    transparent 30%
                ),
                linear-gradient(
                    135deg,
                    #1d4ed8,
                    #2563eb
                );

            color: #fff;

            border-radius: 19px;
        }

        .cta-box h2 {

            margin: 0 0 8px;

            font-size: 27px;

            font-weight: 800;
        }

        .cta-box p {

            color: #dbeafe;

            margin-bottom: 21px;
        }

        .cta-btn {

            display: inline-flex;

            align-items: center;

            gap: 7px;

            padding: 10px 17px;

            background: #fff;

            color: var(--primary);

            border-radius: 8px;

            font-weight: 700;
        }


        /* =========================================================
           FOOTER
        ========================================================== */

        .footer {

            padding: 50px 0 35px;

            background: var(--dark);

            color: #94a3b8;
        }

        .footer-brand {

            color: #fff;

            font-size: 20px;

            font-weight: 800;
        }

        .footer-brand span {
            color: #60a5fa;
        }

        .footer-description {

            max-width: 330px;

            margin-top: 11px;

            font-size: 13px;
        }

        .footer h5 {

            color: #fff;

            font-size: 12px;

            margin-bottom: 12px;
        }

        .footer a {

            display: block;

            margin-bottom: 7px;

            color: #94a3b8;

            font-size: 13px;
        }

        .footer a:hover {
            color: #fff;
        }

        .footer-bottom {

            margin-top: 30px;

            padding-top: 17px;

            border-top: 1px solid rgba(255,255,255,.08);

            font-size: 14px;
        }


        /* =========================================================
           MOBILE BOTTOM NAV
        ========================================================== */

        .mobile-bottom-nav {
            display: none;
        }


        /* =========================================================
           TABLET
        ========================================================== */

        @media (max-width: 1100px) {

            .location-box {
                display: none;
            }

            .directory-link,
            .directory-dropdown-btn {
                padding-left: 11px;
                padding-right: 11px;
            }

        }


        @media (max-width: 991px) {

            .header-actions .header-btn:not(.header-btn-primary) {
                display: none;
            }

            .directory-menu-inner {

                overflow-x: auto;

                scrollbar-width: none;

                justify-content: flex-start;
            }

            .directory-menu-inner::-webkit-scrollbar {
                display: none;
            }

            .directory-links {
                flex-shrink: 0;
            }

            .directory-menu-inner > .list-business-btn {
                display: none;
            }

            /*
             * Desktop mega menu disabled on mobile/tablet.
             */

            .desktop-category-menu {

                display: none !important;
            }

            .hero-preview {
                margin-top: 30px;
            }

            .category-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .business-grid,
            .product-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .city-grid {
                grid-template-columns: repeat(3, 1fr);
            }

        }


        /* =========================================================
           MOBILE
        ========================================================== */

        @media (max-width: 767px) {

            body {
                padding-bottom: 62px;
            }

            .topbar {
                display: none;
            }


            /* HEADER */

            .main-header {
                position: relative;
            }

            .main-header-inner {

                min-height: 60px;

                gap: 8px;

                justify-content: space-between;
            }

            .brand-icon {

                width: 36px;
                height: 36px;

                font-size: 18px;
            }

            .brand-text {
                font-size: 19px;
            }

            .header-search {
                display: none;
            }

            .header-btn {
                padding: 7px 8px;
            }

            .header-btn-primary {
                font-size: 14px;
            }


            /* MOBILE SEARCH */

            .mobile-search {

                display: block;

                padding: 8px 0;

                background: #fff;

                border-bottom: 1px solid var(--border);
            }

            .mobile-search form {

                display: flex;

                overflow: hidden;

                border: 1px solid var(--border);

                border-radius: 8px;
            }

            .mobile-search input {

                flex: 1;

                min-width: 0;

                padding: 9px 11px;

                border: 0;

                outline: 0;

                font-size: 12px;
            }

            .mobile-search button {

                width: 43px;

                border: 0;

                background: var(--primary);

                color: #fff;
            }


            /* DIRECTORY */

            .directory-menu {
                overflow: visible;
            }

            .directory-menu-inner {

                min-height: 48px;

                overflow-x: auto;

                overflow-y: hidden;

                scrollbar-width: none;
            }

            .directory-menu-inner::-webkit-scrollbar {
                display: none;
            }

            .directory-links {

                width: max-content;

                min-width: max-content;
            }

            .directory-link,
            .directory-dropdown-btn {

                height: 48px;

                padding: 0 12px;

                gap: 5px;

                font-size: 14px;
            }

            .directory-link i,
            .directory-dropdown-btn > i:first-child {
                font-size: 14px;
            }

            .directory-dropdown-btn .bi-chevron-down {
                font-size: 11px;
            }


            /*
             * IMPORTANT:
             * Hide desktop category system.
             * Mobile uses separate drawer below.
             */

            .products-dropdown-menu {
                display: none !important;
            }


            /* HERO */

            .hero {

                padding: 42px 0 45px;
            }

            .hero h1 {

                font-size: 30px;

                letter-spacing: -.5px;
            }

            .hero-description {

                font-size: 12px;

                margin-bottom: 20px;
            }

            .hero-search {

                display: block;

                padding: 6px;
            }

            .hero-search-field {

                border-right: 0;

                border-bottom: 1px solid var(--border);

                margin-bottom: 4px;
            }

            .hero-search button {

                width: 100%;

                min-height: 42px;
            }

            .hero-stats {

                gap: 18px;

                margin-top: 23px;
            }

            .hero-stat strong {
                font-size: 17px;
            }

            .hero-preview {
                display: none;
            }


            /* TRUST */

            .trust-grid {

                grid-template-columns: 1fr 1fr;

                padding: 4px 0;
            }

            .trust-item {

                justify-content: flex-start;

                padding: 12px 6px;

                border: 0;
            }

            .trust-item i {
                font-size: 16px;
            }

            .trust-item strong {
                font-size: 12px;
            }

            .trust-item span {
                font-size: 12px;
            }


            /* SECTIONS */

            .section {

                padding: 42px 0;
            }

            .section-title {
                font-size: 21px;
            }

            .section-subtitle {
                font-size: 14px;
            }


            /* CATEGORIES */

            .category-grid {

                grid-template-columns: repeat(2, 1fr);

                gap: 9px;
            }

            .category-card {

                padding: 14px;

                border-radius: 10px;
            }

            .category-card-icon {

                width: 35px;
                height: 35px;

                margin-bottom: 9px;

                font-size: 16px;
            }

            .category-card strong {
                font-size: 13px;
            }

            .category-card span {
                font-size: 11px;
            }


            /* BUSINESS */

            .business-grid,
            .product-grid {

                grid-template-columns: 1fr;

                gap: 12px;
            }

            .business-image,
            .product-image {
                height: 145px;
            }


            /* CITY */

            .city-grid {

                grid-template-columns: repeat(2, 1fr);

                gap: 8px;
            }

            .city-card {

                padding: 11px;

                font-size: 14px;
            }


            /* CTA */

            .cta {
                padding: 42px 0;
            }

            .cta-box {

                padding: 29px 20px;

                border-radius: 15px;
            }

            .cta-box h2 {
                font-size: 21px;
            }

            .cta-box p {
                font-size: 13px;
            }


            /* FOOTER */

            .footer {
                padding-bottom: 80px;
            }

            .footer-column {
                margin-top: 25px;
            }


            /* MOBILE BOTTOM */

            .mobile-bottom-nav {

                display: block;

                position: fixed;

                left: 0;
                right: 0;
                bottom: 0;

                height: 62px;

                background: #fff;

                border-top: 1px solid var(--border);

                box-shadow: 0 -5px 20px rgba(15,23,42,.08);

                z-index: 4000;
            }

            .mobile-bottom-nav-inner {

                height: 100%;

                display: grid;

                grid-template-columns: repeat(5, 1fr);
            }

            .mobile-bottom-link {

                display: flex;

                flex-direction: column;

                align-items: center;

                justify-content: center;

                gap: 2px;

                color: var(--muted);

                font-size: 12px;

                font-weight: 600;
            }

            .mobile-bottom-link i {
                font-size: 18px;
            }

            .mobile-bottom-link.active {
                color: var(--primary);
            }


            /* =====================================================
               MOBILE CATEGORY DRAWER
            ====================================================== */

            .mobile-category-overlay {

                position: fixed;

                inset: 0;

                display: block;

                background: rgba(15,23,42,.45);

                opacity: 0;

                visibility: hidden;

                transition:
                    opacity .25s ease,
                    visibility .25s ease;

                z-index: 5000;
            }

            .mobile-category-overlay.show {

                opacity: 1;

                visibility: visible;
            }


            /*
             * Main mobile drawer.
             */

            .mobile-category-drawer {

                position: fixed;

                left: 0;
                right: 0;
                bottom: 0;

                height: min(
                    calc(100dvh - 54px),
                    680px
                );

                display: block;

                background: #fff;

                border-radius: 18px 18px 0 0;

                box-shadow:
                    0 -15px 45px rgba(15,23,42,.2);

                overflow: hidden;

                transform: translateY(105%);

                transition:
                    transform .3s cubic-bezier(.22,.61,.36,1);

                z-index: 5100;
            }

            .mobile-category-drawer.show {

                transform: translateY(0);
            }


            /*
             * Drawer header.
             */

            .mobile-category-header {

                height: 58px;

                display: flex;

                align-items: center;

                justify-content: space-between;

                gap: 10px;

                padding: 0 16px;

                border-bottom: 1px solid var(--border);

                background: #fff;

                position: relative;

                z-index: 5;
            }

            .mobile-category-header-left {

                display: flex;

                align-items: center;

                gap: 10px;
            }

            .mobile-category-back {

                width: 34px;
                height: 34px;

                display: none;

                align-items: center;
                justify-content: center;

                border: 0;

                background: var(--primary-light);

                color: var(--primary);

                border-radius: 8px;
            }

            .mobile-category-drawer.products-view
            .mobile-category-back {

                display: flex;
            }

            .mobile-category-title {

                color: var(--text-dark);

                font-size: 15px;

                font-weight: 800;
            }

            .mobile-category-subtitle {

                display: block;

                margin-top: -2px;

                color: var(--muted);

                font-size: 12px;

                font-weight: 500;
            }

            .mobile-category-close {

                width: 34px;
                height: 34px;

                display: flex;

                align-items: center;
                justify-content: center;

                border: 0;

                background: #f1f5f9;

                color: var(--text);

                border-radius: 8px;

                font-size: 17px;
            }


            /*
             * Sliding viewport.
             */

            .mobile-category-viewport {

                position: relative;

                height: calc(100% - 58px);

                overflow: hidden;
            }


            /*
             * Two complete pages:
             *
             * Page 1 = categories
             * Page 2 = products
             */

            .mobile-category-pages {

                width: 200%;

                height: 100%;

                display: flex;

                transition:
                    transform .3s cubic-bezier(.22,.61,.36,1);
            }

            .mobile-category-drawer.products-view
            .mobile-category-pages {

                transform: translateX(-50%);
            }


            .mobile-category-page {

                width: 50%;

                height: 100%;

                overflow-y: auto;

                overflow-x: hidden;

                -webkit-overflow-scrolling: touch;

                overscroll-behavior: contain;
            }


            /* =====================================================
               CATEGORY LIST PAGE
            ====================================================== */

            .mobile-category-page-inner {

                padding: 12px 14px 25px;
            }

            .mobile-category-intro {

                padding: 4px 2px 13px;

                color: var(--muted);

                font-size: 14px;
            }

            .mobile-category-list {

                display: grid;

                grid-template-columns: 1fr;

                gap: 7px;
            }

            .mobile-category-item {

                width: 100%;

                min-height: 58px;

                display: flex;

                align-items: center;

                justify-content: space-between;

                gap: 10px;

                padding: 9px 11px;

                border: 1px solid var(--border);

                background: #fff;

                border-radius: 10px;

                color: var(--text);

                text-align: left;

                transition: background .15s ease;
            }

            .mobile-category-item:active {

                background: var(--primary-light);

                border-color: #bfdbfe;
            }

            .mobile-category-item-left {

                display: flex;

                align-items: center;

                gap: 11px;

                min-width: 0;
            }

            .mobile-category-item-icon {

                width: 40px;
                height: 40px;

                flex: 0 0 40px;

                display: flex;

                align-items: center;
                justify-content: center;

                background: var(--primary-light);

                color: var(--primary);

                border-radius: 9px;

                font-size: 18px;
            }

            .mobile-category-item-text {

                min-width: 0;
            }

            .mobile-category-item-name {

                display: block;

                color: var(--text-dark);

                font-size: 12px;

                font-weight: 700;

                white-space: nowrap;

                overflow: hidden;

                text-overflow: ellipsis;
            }

            .mobile-category-item-count {

                display: block;

                color: var(--muted);

                font-size: 12px;
            }

            .mobile-category-item-arrow {

                width: 30px;
                height: 30px;

                flex: 0 0 30px;

                display: flex;

                align-items: center;
                justify-content: center;

                background: #f8fafc;

                color: var(--muted);

                border-radius: 7px;
            }


            /* =====================================================
               PRODUCT PAGE
            ====================================================== */

            .mobile-product-page-inner {

                padding: 12px 14px 30px;
            }

            .mobile-selected-category {

                display: flex;

                align-items: center;

                gap: 10px;

                padding: 12px;

                margin-bottom: 12px;

                background: var(--primary-light);

                border: 1px solid #dbeafe;

                border-radius: 10px;
            }

            .mobile-selected-category-icon {

                width: 38px;
                height: 38px;

                display: flex;

                align-items: center;
                justify-content: center;

                background: #fff;

                color: var(--primary);

                border-radius: 8px;

                font-size: 17px;
            }

            .mobile-selected-category strong {

                display: block;

                color: var(--text-dark);

                font-size: 12px;
            }

            .mobile-selected-category span {

                color: var(--muted);

                font-size: 12px;
            }

            .mobile-products-heading {

                display: flex;

                align-items: center;

                justify-content: space-between;

                margin-bottom: 10px;
            }

            .mobile-products-heading h3 {

                margin: 0;

                color: var(--text-dark);

                font-size: 13px;

                font-weight: 800;
            }

            .mobile-products-heading a {

                color: var(--primary);

                font-size: 12px;

                font-weight: 700;
            }

            .mobile-product-list {

                display: grid;

                grid-template-columns: 1fr;

                gap: 7px;
            }

            .mobile-product-link {

                min-height: 50px;

                display: flex;

                align-items: center;

                gap: 10px;

                padding: 9px 10px;

                border: 1px solid var(--border);

                border-radius: 9px;

                background: #fff;

                color: var(--text);

                transition: background .15s ease;
            }

            .mobile-product-link:active {

                background: var(--primary-light);

                border-color: #bfdbfe;
            }

            .mobile-product-icon {

                width: 34px;
                height: 34px;

                flex: 0 0 34px;

                display: flex;

                align-items: center;
                justify-content: center;

                background: #f8fafc;

                color: var(--primary);

                border-radius: 7px;

                font-size: 15px;
            }

            .mobile-product-name {

                flex: 1;

                color: var(--text-dark);

                font-size: 13px;

                font-weight: 600;
            }

            .mobile-product-arrow {

                color: #94a3b8;

                font-size: 12px;
            }

            .mobile-product-view-all {

                display: flex;

                align-items: center;

                justify-content: center;

                gap: 7px;

                margin-top: 14px;

                padding: 11px;

                background: var(--primary);

                color: #fff;

                border-radius: 8px;

                font-size: 13px;

                font-weight: 700;
            }

        }


        /* =========================================================
           VERY SMALL DEVICES
        ========================================================== */

        @media (max-width: 380px) {

            .brand-text {
                font-size: 17px;
            }

            .header-btn-primary {
                padding: 7px;
            }

            .directory-link,
            .directory-dropdown-btn {
                padding-left: 10px;
                padding-right: 10px;
            }

            .hero h1 {
                font-size: 28px;
            }

        }
 
 
   /* =====================================================
           CATEGORY IMAGE
        ===================================================== */

        .category-card-image {
            width: 100%;
            height: 150px;
            overflow: hidden;
            border-radius: 14px;
            background: #f1f5f9;
            margin-bottom: 15px;
        }

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

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


        /* =====================================================
           DESKTOP MEGA MENU IMAGES
        ===================================================== */

        .desktop-category-image {
            width: 46px;
            height: 46px;
            border-radius: 10px;
            overflow: hidden;
            flex: 0 0 46px;
            background: #f1f5f9;
        }

        .desktop-category-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .desktop-category-name {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .desktop-product-item {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .desktop-product-image {
            width: 52px;
            height: 52px;
            flex: 0 0 52px;
            border-radius: 10px;
            overflow: hidden;
            background: #f1f5f9;
        }

        .desktop-product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }


        /* =====================================================
           MOBILE CATEGORY IMAGES
        ===================================================== */

        .mobile-category-item-left {
            display: flex;
            align-items: center;
            min-width: 0;
        }

        .mobile-category-item-icon {
            width: 58px !important;
            height: 58px !important;
            flex: 0 0 58px;
            border-radius: 12px;
            overflow: hidden;
            background: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mobile-category-item-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }


        /* =====================================================
           MOBILE SELECTED CATEGORY IMAGE
        ===================================================== */

        .mobile-selected-category-icon {
            width: 58px;
            height: 58px;
            flex: 0 0 58px;
            border-radius: 12px;
            overflow: hidden;
            background: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mobile-selected-category-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }


        /* =====================================================
           MOBILE PRODUCT IMAGE
        ===================================================== */

        .mobile-product-icon {
            width: 54px !important;
            height: 54px !important;
            flex: 0 0 54px;
            border-radius: 10px;
            overflow: hidden;
            background: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mobile-product-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }


        /* =====================================================
           POPULAR PRODUCT IMAGE
        ===================================================== */

        .product-image {
            position: relative;
            overflow: hidden;
        }

        .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.05);
        }


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

        .responsive-ad-section {
            padding: 24px 0;
            background: #f7f9fc;
        }

        .responsive-ad {
            position: relative;
            width: 100%;
            min-height: 120px;
            border-radius: 16px;
            overflow: hidden;
            background: #e9eef7;
            box-shadow: 0 8px 30px rgba(15, 23, 42, .06);
        }

        .responsive-ad-link {
            display: block;
            width: 100%;
            text-decoration: none;
        }

        .responsive-ad img {
            display: block;
            width: 100%;
            height: auto;
            min-height: 120px;
            max-height: 260px;
            object-fit: cover;
        }

        .responsive-ad-label {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 2;
            padding: 4px 8px;
            border-radius: 5px;
            background: rgba(15, 23, 42, .72);
            color: #fff;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .4px;
            text-transform: uppercase;
        }


        /* =====================================================
           MOBILE AD
        ===================================================== */

        @media (max-width: 767px) {

            .responsive-ad-section {
                padding: 16px 0;
            }

            .responsive-ad {
                border-radius: 12px;
                min-height: 90px;
            }

            .responsive-ad img {
                min-height: 90px;
                max-height: 180px;
            }

            .category-card-image {
                height: 125px;
                border-radius: 12px;
            }

            .desktop-category-image {
                width: 42px;
                height: 42px;
                flex-basis: 42px;
            }

        }


        @media (max-width: 575px) {

            .responsive-ad {
                border-radius: 10px;
            }

            .responsive-ad img {
                min-height: 80px;
            }

            .mobile-category-item-icon {
                width: 54px !important;
                height: 54px !important;
                flex-basis: 54px;
            }

            .mobile-product-icon {
                width: 50px !important;
                height: 50px !important;
                flex-basis: 50px;
            }

        }


        /* =====================================================
           SMALL IMAGE FALLBACK
        ===================================================== */

        .image-fallback {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64748b;
            background: #f1f5f9;
        }