/* ============================================
   MOBILE RESPONSIVE - Professional & Modern
   AlphaVendor Home Page
   ============================================ */

/* ---- Base Reset ---- */
*, *::before, *::after { box-sizing: border-box; }

@media (max-width: 768px) {
    body { overflow-x: hidden; }

    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
    }
}

/* ============================================
   HERO SLIDER
   ============================================ */
@media (max-width: 768px) {
    .hero-slider {
        height: 260px !important;
        border-radius: 0;
    }

    .hero-slider .slide img {
        height: 260px !important;
        object-fit: cover;
        object-position: center;
    }

    .slide-content {
        padding: 18px 20px !important;
        border-radius: 12px !important;
        width: 88% !important;
        max-width: 340px !important;
    }

    .slide-content h2 {
        font-size: 20px !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
    }

    .slide-content p {
        font-size: 13px !important;
        margin-bottom: 14px !important;
        line-height: 1.5 !important;
    }

    .slide-content .btn-primary {
        padding: 10px 22px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    .slider-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }

    .slider-btn.prev { left: 10px !important; }
    .slider-btn.next { right: 10px !important; }

    .slider-dots { bottom: 10px !important; }
    .dot { width: 7px !important; height: 7px !important; }
}

/* ============================================
   SECTION SPACING
   ============================================ */
@media (max-width: 768px) {
    section,
    .py-10, .py-12, .py-16,
    .md\:py-16 {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
}

/* ============================================
   SECTION HEADERS
   ============================================ */
@media (max-width: 768px) {
    /* Section title + "view all" row */
    .flex.justify-between.items-center,
    .flex.justify-between.items-start {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .flex.justify-between.items-center h2,
    .flex.justify-between.items-start h2 {
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    /* "View All / More" link - small pill */
    .flex.justify-between.items-center > a,
    .flex.justify-between.items-start > a {
        font-size: 12px !important;
        padding: 6px 12px !important;
        border-radius: 20px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Section header with icon */
    .flex.items-center.gap-3 .w-12,
    .flex.items-center.gap-3 .h-12 {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 10px !important;
    }

    .flex.items-center.gap-3 i {
        font-size: 15px !important;
    }

    .flex.items-center.gap-3 h2 {
        font-size: 17px !important;
    }

    .flex.items-center.gap-3 p {
        font-size: 12px !important;
    }

    /* Popular Categories / Brands header */
    .flex.flex-col.md\:flex-row {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .flex.flex-col.md\:flex-row > div h2 {
        font-size: 18px !important;
        margin-bottom: 2px !important;
    }

    .flex.flex-col.md\:flex-row > div p {
        font-size: 12px !important;
    }

    .flex.flex-col.md\:flex-row > a {
        font-size: 12px !important;
        padding: 7px 14px !important;
        border-radius: 20px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        margin-top: 0 !important;
    }
}

/* ============================================
   CATEGORY & BRAND CAROUSEL
   ============================================ */
@media (max-width: 768px) {
    .category-card-mobile,
    .brand-card-mobile {
        width: calc((100% - 0.75rem) / 2.5) !important;
    }

    .category-card-mobile > a > div,
    .brand-card-mobile > a > div,
    .category-card-mobile > div,
    .brand-card-mobile > div {
        padding: 12px 8px !important;
        border-radius: 14px !important;
    }

    .category-card-mobile .w-20,
    .category-card-mobile .h-20,
    .brand-card-mobile .w-20,
    .brand-card-mobile .h-20 {
        width: 56px !important;
        height: 56px !important;
        border-radius: 12px !important;
        margin-bottom: 8px !important;
    }

    .category-card-mobile h3,
    .brand-card-mobile h3 {
        font-size: 12px !important;
        min-height: auto !important;
        line-height: 1.3 !important;
    }

    .category-card-mobile p,
    .brand-card-mobile p {
        font-size: 10px !important;
    }

    /* Carousel arrows */
    button[id*="PrevBtn"],
    button[id*="NextBtn"] {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
        opacity: 1 !important;
    }

    button[id*="PrevBtn"] { left: -4px !important; }
    button[id*="NextBtn"] { right: -4px !important; }
}

/* ============================================
   PRODUCT CARDS - 2 column grid
   ============================================ */
@media (max-width: 640px) {
    /* Force 2-col grid on all product sections */
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4,
    .grid.grid-cols-2.sm\:grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Card wrapper */
    .bg-white.rounded-xl.shadow-lg {
        border-radius: 12px !important;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }

    /* Product image */
    .bg-white.rounded-xl img.w-full {
        height: 130px !important;
        object-fit: cover;
    }

    /* Card body padding */
    .bg-white.rounded-xl .p-3,
    .bg-white.rounded-xl .p-4 {
        padding: 8px 10px !important;
    }

    /* Product name */
    .bg-white.rounded-xl h4 {
        font-size: 12px !important;
        line-height: 1.35 !important;
        margin-bottom: 5px !important;
        height: auto !important;
        min-height: 30px !important;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Stars */
    .bg-white.rounded-xl .fas.fa-star,
    .bg-white.rounded-xl .far.fa-star {
        font-size: 9px !important;
    }

    .bg-white.rounded-xl .text-xs {
        font-size: 10px !important;
    }

    /* Price */
    .bg-white.rounded-xl .text-xl.font-bold,
    .bg-white.rounded-xl .text-lg.font-bold {
        font-size: 14px !important;
    }

    .bg-white.rounded-xl .text-sm.text-gray-400.line-through,
    .bg-white.rounded-xl .text-xs.text-gray-400 {
        font-size: 10px !important;
    }

    /* Discount badge */
    .bg-white.rounded-xl .absolute.top-3.left-3,
    .bg-white.rounded-xl span.absolute {
        top: 5px !important;
        left: 5px !important;
        font-size: 9px !important;
        padding: 2px 6px !important;
        border-radius: 5px !important;
    }

    /* Action buttons row */
    .bg-white.rounded-xl .flex.gap-2 {
        gap: 4px !important;
        margin-top: 6px !important;
    }

    .bg-white.rounded-xl .flex.gap-2 button {
        flex: 1 !important;
        padding: 7px 4px !important;
        font-size: 10px !important;
        border-radius: 7px !important;
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    .bg-white.rounded-xl .flex.gap-2 button i {
        font-size: 10px !important;
    }

    /* Hover overlay buttons (retail/wholesale/import) */
    .bg-white.rounded-xl .absolute.bottom-0 button {
        font-size: 10px !important;
        padding: 8px 4px !important;
    }
}

/* ============================================
   SPECIAL OFFERS
   ============================================ */
@media (max-width: 640px) {
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 img.w-full.h-48,
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 img.w-full.h-52 {
        height: 120px !important;
    }

    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 h3 {
        font-size: 13px !important;
    }

    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 span.inline-block {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }
}

/* ============================================
   PROMO BANNER
   ============================================ */
@media (max-width: 768px) {
    #promoBannerSection {
        padding: 0 !important;
    }

    .promo-slide {
        padding: 28px 0 !important;
    }

    .promo-slide .flex.flex-col.md\:flex-row {
        flex-direction: column-reverse !important;
        gap: 16px !important;
    }

    .promo-slide .w-full.md\:w-1\/2:first-child {
        text-align: center !important;
    }

    .promo-slide h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    .promo-slide p.text-lg {
        font-size: 13px !important;
        margin-bottom: 16px !important;
    }

    .promo-slide span.inline-block {
        font-size: 12px !important;
        padding: 4px 12px !important;
    }

    .promo-slide a.inline-flex {
        padding: 11px 24px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    .promo-slide img.w-full {
        height: 180px !important;
        border-radius: 14px !important;
    }

    /* Prev/Next buttons */
    button[onclick="promoSlide(-1)"],
    button[onclick="promoSlide(1)"] {
        width: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
    }
}

/* ============================================
   FEATURED VENDORS
   ============================================ */
@media (max-width: 768px) {
    .vendors-section {
        padding: 32px 0 !important;
    }

    .vendors-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .vendor-card {
        border-radius: 14px !important;
    }

    /* Vendor header */
    .vendor-card > div:first-child {
        padding: 20px 12px 14px !important;
    }

    /* Avatar */
    .vendor-card [style*="width: 110px"] {
        width: 72px !important;
        height: 72px !important;
        margin-bottom: 10px !important;
    }

    .vendor-card h3 {
        font-size: 13px !important;
        margin-bottom: 5px !important;
    }

    /* Role badge */
    .vendor-card span[style*="border-radius: 20px"] {
        font-size: 9px !important;
        padding: 4px 8px !important;
    }

    /* Rating badge */
    .vendor-card [style*="border-radius: 20px"][style*="FFD700"] {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    /* Stats grid */
    .vendor-card [style*="grid-template-columns: repeat(3"] {
        gap: 6px !important;
        margin-bottom: 12px !important;
    }

    .vendor-card [style*="grid-template-columns: repeat(3"] > div {
        padding: 8px 4px !important;
        border-radius: 8px !important;
    }

    .vendor-card [style*="font-size: 22px"] {
        font-size: 16px !important;
    }

    .vendor-card [style*="font-size: 11px"][style*="uppercase"] {
        font-size: 9px !important;
    }

    /* Visit store button */
    .visit-store-btn {
        padding: 10px 8px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        gap: 6px !important;
    }

    /* Section header */
    .vendors-section .section-header {
        text-align: left !important;
        margin-bottom: 20px !important;
    }

    .vendors-section .section-header h2 {
        font-size: 20px !important;
    }

    .vendors-section .section-header p {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }

    .view-all-btn {
        padding: 8px 18px !important;
        font-size: 12px !important;
        border-radius: 20px !important;
    }
}

@media (max-width: 380px) {
    .vendors-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   NEWSLETTER
   ============================================ */
@media (max-width: 768px) {
    .newsletter-section {
        padding: 36px 16px !important;
    }

    .newsletter-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 20px !important;
        align-items: center !important;
    }

    .newsletter-text h2 {
        font-size: 20px !important;
        margin-bottom: 6px !important;
    }

    .newsletter-text p {
        font-size: 13px !important;
    }

    .newsletter-form {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 10px !important;
    }

    .newsletter-form input {
        width: 100% !important;
        padding: 13px 16px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }

    .btn-subscribe {
        width: 100% !important;
        padding: 13px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }
}

/* ============================================
   SEE MORE BUTTON
   ============================================ */
@media (max-width: 768px) {
    .text-center.mt-8 a,
    .text-center.mt-6 a {
        padding: 11px 28px !important;
        font-size: 13px !important;
        border-radius: 24px !important;
    }
}

/* ============================================
   MOBILE NAVIGATION MENU (Slide-in)
   ============================================ */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
    padding: 8px;
    min-height: auto !important;
    min-width: auto !important;
}

.mobile-nav-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.55);
    z-index: 998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
    backdrop-filter: blur(2px);
}

.mobile-nav-overlay.active {
    display: block;
    opacity: 1;
}

.mobile-nav-menu {
    position: fixed;
    top: 0; left: -300px;
    width: 280px; height: 100%;
    background: #0d5c63;
    z-index: 999;
    transition: left 0.3s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto;
    box-shadow: 4px 0 20px rgba(0,0,0,0.2);
}

.mobile-nav-menu.active { left: 0; }

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background: #0a4a52;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-nav-close {
    background: none;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
    padding: 4px;
    min-height: auto !important;
    min-width: auto !important;
}

.mobile-nav-items {
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

.mobile-nav-items li {
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.mobile-nav-items a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: background 0.2s;
    min-height: auto !important;
}

.mobile-nav-items a:hover,
.mobile-nav-items a.active {
    background: rgba(255,255,255,0.1);
    color: #FFB833;
}

.mobile-nav-items i {
    font-size: 17px;
    width: 22px;
    text-align: center;
    color: rgba(255,255,255,0.85);
}

/* ============================================
   MOBILE NAV STRIP - Amazon style horizontal menu
   ============================================ */
.mobile-nav-strip {
    display: none;
    background: #0d5c63;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.mobile-nav-strip::-webkit-scrollbar {
    display: none;
}

.mobile-nav-strip a {
    display: inline-block;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 14px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    min-height: unset !important;
    min-width: unset !important;
    vertical-align: middle;
}

.mobile-nav-strip a:first-child { padding-left: 16px; }
.mobile-nav-strip a:last-child  { padding-right: 16px; }

.mobile-nav-strip a.active {
    color: #FFB833;
    border-bottom-color: #FFB833;
    font-weight: 600;
}

.mobile-nav-strip a:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.1);
}

/* ============================================
   SHOW/HIDE ON MOBILE vs DESKTOP
   ============================================ */
@media (max-width: 768px) {
    .mobile-menu-toggle { display: flex; align-items: center; }
    .navbar { display: none !important; }

    /* Show nav strip - FIXED at top */
    .mobile-nav-strip {
        display: block;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important;
        /* top will be set by JS based on header height */
    }

    /* Header also FIXED */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        width: 100% !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
    }

    /* body padding set by JS */
}

@media (min-width: 769px) {
    .mobile-menu-toggle,
    .mobile-nav-overlay,
    .mobile-nav-menu,
    .mobile-nav-strip {
        display: none !important;
    }
}

/* ============================================
   MISC FIXES
   ============================================ */
@media (max-width: 768px) {
    /* Prevent horizontal overflow */
    .overflow-hidden { overflow-x: hidden !important; }

    /* Gap utilities */
    .gap-4 { gap: 10px !important; }
    .gap-6 { gap: 14px !important; }

    /* Margin utilities */
    .mb-6, .mb-8 { margin-bottom: 18px !important; }
    .mt-6, .mt-8 { margin-top: 18px !important; }

    /* Line clamp */
    .line-clamp-2 {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Empty states */
    .text-center.py-12,
    .text-center.py-16 {
        padding: 32px 16px !important;
    }
}


/* ============================================
   WHOLESALE / RETAIL / IMPORT PRODUCT CARDS
   Fix: move overlay buttons inside card on mobile
   ============================================ */
@media (max-width: 768px) {

    /* 2-column grid */
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Card */
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a.bg-white {
        border-radius: 14px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important;
        overflow: hidden;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Product image */
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a.bg-white img.w-full {
        height: 120px !important;
        object-fit: cover;
    }

    /* Hide the absolute hover overlay buttons (desktop hover effect) */
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a.bg-white .absolute.bottom-0 {
        display: none !important;
    }

    /* Hide hover wishlist/eye icons */
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a.bg-white .absolute.top-3.right-3 {
        display: none !important;
    }

    /* Card body */
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a.bg-white .p-4 {
        padding: 8px 10px 10px !important;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* Product name */
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a.bg-white h4 {
        font-size: 12px !important;
        line-height: 1.35 !important;
        margin-bottom: 4px !important;
        height: auto !important;
        min-height: 30px !important;
        font-weight: 600 !important;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Stars */
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a.bg-white .fas.fa-star,
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a.bg-white .far.fa-star {
        font-size: 9px !important;
    }

    /* Price */
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a.bg-white .text-xl.font-bold {
        font-size: 14px !important;
    }

    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a.bg-white .text-sm.line-through {
        font-size: 10px !important;
    }

    /* Location text */
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a.bg-white p.text-xs {
        font-size: 10px !important;
        margin-bottom: 6px !important;
    }

    /* Min order badge */
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a.bg-white .absolute.top-3.left-3 {
        font-size: 9px !important;
        padding: 2px 6px !important;
        top: 5px !important;
        left: 5px !important;
        border-radius: 5px !important;
    }

    /* Buttons row that sits OUTSIDE the image (wholesale/import) */
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a.bg-white > .flex.gap-1 {
        display: flex !important;
        gap: 4px !important;
        padding: 0 8px 8px !important;
        background: white;
    }

    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a.bg-white > .flex.gap-1 button {
        flex: 1 !important;
        padding: 7px 4px !important;
        font-size: 10px !important;
        border-radius: 8px !important;
        min-height: unset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        font-weight: 600 !important;
    }

    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a.bg-white > .flex.gap-1 button i {
        font-size: 10px !important;
    }
}


/* ============================================
   FEATURED SELLERS SECTION HEADER FIX
   ============================================ */
@media (max-width: 768px) {

    .vendors-section {
        padding: 32px 0 !important;
    }

    /* Section header - stack vertically, centered */
    .vendors-section .section-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 24px !important;
        padding: 0 16px !important;
        gap: 8px !important;
    }

    .vendors-section .section-header h2 {
        font-size: 22px !important;
        font-weight: 800 !important;
        margin: 0 !important;
        letter-spacing: -0.3px !important;
        color: #1a1a1a !important;
    }

    .vendors-section .section-header p {
        font-size: 13px !important;
        color: #666 !important;
        margin: 0 0 12px !important;
        line-height: 1.4 !important;
    }

    /* View All Sellers button - compact pill */
    .vendors-section .view-all-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 9px 20px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 24px !important;
        border: 2px solid #0d5c63 !important;
        color: #0d5c63 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    /* Vendors grid - 2 columns on mobile */
    .vendors-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 16px !important;
    }

    /* Vendor card */
    .vendor-card {
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    /* Vendor header area */
    .vendor-card > div:first-child {
        padding: 16px 10px 12px !important;
    }

    /* Avatar */
    .vendor-card [style*="width: 110px"],
    .vendor-card [style*="width:110px"] {
        width: 64px !important;
        height: 64px !important;
        margin-bottom: 8px !important;
    }

    /* Badge on avatar */
    .vendor-card [style*="width: 38px"],
    .vendor-card [style*="width:38px"] {
        width: 24px !important;
        height: 24px !important;
    }

    .vendor-card [style*="width: 38px"] i,
    .vendor-card [style*="width:38px"] i {
        font-size: 11px !important;
    }

    /* Vendor name */
    .vendor-card h3 {
        font-size: 13px !important;
        margin-bottom: 5px !important;
        line-height: 1.3 !important;
    }

    /* Role badge */
    .vendor-card span[style*="border-radius: 20px"],
    .vendor-card span[style*="border-radius:20px"] {
        font-size: 9px !important;
        padding: 3px 8px !important;
        letter-spacing: 0 !important;
    }

    /* Rating badge */
    .vendor-card div[style*="FFD700"] {
        font-size: 11px !important;
        padding: 4px 10px !important;
        gap: 4px !important;
    }

    /* Stats grid */
    .vendor-card [style*="grid-template-columns: repeat(3"] {
        gap: 5px !important;
        margin-bottom: 10px !important;
    }

    .vendor-card [style*="grid-template-columns: repeat(3"] > div {
        padding: 7px 3px !important;
        border-radius: 8px !important;
    }

    /* Stats numbers */
    .vendor-card [style*="font-size: 22px"],
    .vendor-card [style*="font-size:22px"] {
        font-size: 15px !important;
        margin-bottom: 2px !important;
    }

    /* Stats labels */
    .vendor-card [style*="font-size: 11px"][style*="uppercase"],
    .vendor-card [style*="font-size:11px"] {
        font-size: 8px !important;
        letter-spacing: 0 !important;
    }

    /* Visit Store button */
    .visit-store-btn {
        padding: 10px 8px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        gap: 5px !important;
    }

    /* Vendor stats padding */
    .vendor-card > div:last-child {
        padding: 10px !important;
    }
}

/* Single column on very small screens */
@media (max-width: 360px) {
    .vendors-grid {
        grid-template-columns: 1fr !important;
    }
}