/* Axomify Marketplace Frontend Mobile-First Styling */
.axmp-sold-by {
    font-family: 'Inter', sans-serif;
}
.axmp-directory-grid .axmp-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.axmp-directory-grid .axmp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

/* BUG FIXED (2026-09-10, owner-reported, round 4): "5 vendor profile directory
 * show hona chahiye ... mobile view mei 2 vendor" -- the Vendor Directory grid
 * used to compute its own column count via `auto-fill, minmax(260px, 1fr)`
 * (inline style in frontend/class-store.php), which landed on 4 cards per row
 * at typical desktop widths -- not the 5 the owner asked for. Explicit column
 * counts now, at every breakpoint, so the layout can never silently drift
 * again the way auto-fill did. 1024px tablet step added so cards don't get
 * uncomfortably narrow in the gap between desktop and phone widths; the two
 * endpoints (5 desktop / 2 mobile) are exactly what was requested. */
.axmp-directory-grid {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1024px) {
    .axmp-directory-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .axmp-sold-by {
        width: 100%;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px !important;
    }

    /* BUG FIXED (round 4): this used to force a single column on mobile --
     * the owner explicitly wants 2 vendor cards per row on mobile, not 1. */
    .axmp-directory-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    /* BUG FIXED (round 8, owner-reported: "vendor directory ka mobile UI bhi
     * thik karna hai"): at 2-per-row on a ~375px phone, each card's content
     * width is only ~140-150px -- not enough to fit the "⭐ 0 (0)" rating and
     * the "Visit Store" pill button side by side (frontend/class-store.php's
     * justify-content:space-between row). The button, a normal shrinkable
     * flex item with no explicit width, got squeezed narrower than its own
     * text needed, wrapping "Visit Store" onto two lines and -- combined with
     * the shared .axmp-btn class's border-radius:999px -- rendering as a
     * near-circular blob instead of a clean pill. Confirmed via a real
     * 375px-viewport screenshot before writing this fix. Stack the rating
     * above a full-width, non-wrapping button on mobile only; desktop/tablet
     * keep the original side-by-side row untouched (ample width there). */
    .axmp-directory-card-footer {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }

    .axmp-directory-visit-btn {
        width: 100%;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .axmp-card table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}