<!--
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⠴⠒⠒⠒⢒⡶⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠞⠁⠀⠀⠀⠀⠀⡾⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡴⠁⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠞⠁⠀⢀⣀⣀⣀⡀⠀⠀⢧⠀⠀⠀⠀⠀⡴⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢀⣰⠿⠒⠋⠉⠉⠀⠀⠀⠈⠉⠓⠾⢄⣀⠀⠀⢠⡇⠸⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⣩⠏⠉⠒⢒⣲⡤⠤⣀⣀⠀⠀⠀⠀⠀⠈⠑⢤⡘⡄⠀⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠀
⠀⠀⠀⠀⠀⢰⠾⣣⠴⠚⠉⠉⠀⠀⠀⠀⠀⠉⠓⠀⠀⠀⠀⠀⠀⠙⣧⠀⠀⢣⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⣔⡿⡍⡇
⠀⠀⠀⠀⠀⢸⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠆⠀⠀⢳⡀⠀⠀⠀⠀⠀⣀⡤⠞⠋⣡⠞⠉⠀⣇⡇
⠀⠀⠀⠀⣴⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡠⠴⠒⠛⠓⠚⠉⠉⠉⠁⠀⣴⡟⠁⠀⠀⠀⣿⠁
⠀⠀⠀⣼⣁⣠⡤⢴⠖⠒⠒⠦⠤⢴⣶⣢⠤⠤⠔⠚⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣞⡞⠀⠀⠀⠀⢰⢿⠀
⠀⠀⠀⠉⠉⢙⣦⠞⠀⡠⠞⠉⢉⡷⡄⠉⢙⡶⠃⠀⠀⠀⢀⣠⣦⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡎⡼⠀⠀⠀⠀⠀⡜⡞⠀
⠀⠀⠀⣤⡖⠛⠀⠀⡜⠁⠀⡴⢋⣀⣹⣠⠋⠀⠀⠀⠀⣰⣿⠿⠛⠛⠿⣿⣷⣄⡀⠀⠀⠀⠀⠀⡼⢰⠃⠀⠀⠀⠀⡼⢱⠃⠀
⠀⢀⣴⠛⠀⠀⠀⢼⠁⠀⣼⢁⣿⡬⣿⠃⠀⠀⠀⠀⠐⠋⠁⠀⠀⠀⠀⠀⠙⢿⣷⣄⠀⠀⠀⣸⢃⡏⠀⠀⠀⢀⡜⢡⠏⠀⠀
⠀⠸⡿⠀⠀⠀⠀⢻⡀⠀⠀⠀⠉⢠⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣿⠁⣀⡜⠁⡼⠀⠀⠀⡠⠋⣰⠋⠀⠀⠀
⠀⠀⣧⠀⠀⠀⠀⠈⢳⣀⣙⣦⡤⠋⠀⠀⠀⠀⠀⠀⠀⣰⠄⠀⠀⠀⠀⠀⠀⢤⠀⣹⠌⢩⠏⢠⣇⣠⠴⠊⢀⡼⠁⠀⠀⠀⠀
⠀⠀⠘⡆⢀⡴⠖⠋⠉⠉⠀⠀⠀⠀⠀⠀⠀⠘⢧⣤⣾⣷⣿⣿⣿⣷⣦⡀⠀⢸⠀⠻⣾⠉⠀⠀⠀⠀⢀⣠⠋⠀⠀⠀⠀⠀⠀
⠀⠀⢠⡟⣥⠤⠦⠤⠤⢤⣀⣀⠀⠀⠀⠀⠀⠀⠀⠉⠁⠀⠀⠉⠛⠿⣿⣿⣄⣸⠀⠈⠻⣇⠀⢀⣀⠤⠟⠓⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠸⡆⢧⡀⠀⠀⠀⠀⠀⠈⠙⠲⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠁⠀⠀⠀⣸⡍⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢳⡄⠙⢦⡀⠀⠀⠀⣀⡤⠞⠁⠀⠀⠀⠀⢀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠙⢦⣀⣉⣷⡚⠉⠀⠀⠀⠀⠀⠀⠀⢀⡾⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠼⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⣦⣴⠚⢁⡾⠋⠉⠳⢤⣀⢀⣀⣀⣠⠔⠋⠀⠀⠀⠀⠀⠀⣀⣠⠤⠖⠋⠁⢀⣺⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢰⣷⡇⠀⡞⠀⠀⠀⠀⠀⡼⠋⠉⠁⠀⠀⣀⣀⠤⠴⠒⠊⠉⠉⠀⠀⠀⠀⠀⣼⣿⠻⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠈⢯⡛⢦⡀⠀⠀⠀⢀⡾⠥⠤⠔⠒⠊⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠰⡆⣸⣹⠛⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⡿⠀⢹⣶⣶⣖⡋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡟⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢀⡿⠿⠉⠉⠋⠀⠀⠉⠙⠶⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡀⠹⢤⣀⣀⣀⣀⣀⡠⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⡰⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠢⣄⠀⠀⠀⡀⠀⠀⠀⠀⠀⠀⠀⣼⠇⠀⠀⠀⠀⠀⠙⠋⠩⠿⢿⣁⠀⠀⠀⠀⠀⠀
⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⡄⠀⠉⠑⠶⢤⣀⣀⣠⣴⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠿⣅⠀⠀⠀⠀⠀
⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠂⠀⠀⠀⠀⠀⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢦⠀⠀⠀⠀
⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀
⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠀⠀⠀
⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠀⠀⠀
Yep, this project is made by a furry owo >;3 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta http-equiv="X-Frame-Options" content="DENY">
    <meta http-equiv="Referrer-Policy" content="no-referrer">
    
    <link href="/static/css/main.css?v=1777713660" rel="stylesheet">
    <link href="/static/themes.php?v=1777713660" rel="stylesheet">
    <link rel="stylesheet" href="/static/js/sweetalert2.min.css?v=1747740437">
    <link rel="stylesheet" href="/static/lib/tippy/tippy.css?v=1747740437">
    <link rel="stylesheet" href="/static/css/bootstrap-icons.css?v=1747740437">

    <script src="/static/js/sweetalert2.min.js?v=1747740437" defer></script>
    <script src="/static/header_scripts.js?v=1777713660" defer></script>
    <script src="/static/js/notifications.js?v=1747740437" defer></script>
    <script src="/static/lib/tippy/popper.min.js?v=1747740437" defer></script>
    <script src="/static/lib/tippy/tippy.umd.min.js?v=1747740437" defer></script>

    <link rel="icon" type="image/png" href="/static/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/static/favicon/favicon.svg" />
    <link rel="shortcut icon" href="/static/favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/static/favicon/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-title" content="goSupertools" />

    <script>
        if (localStorage.getItem("dark-mode") === "enabled") {
            document.documentElement.classList.add("dark-mode");
        }
    </script>
    
        
        <style>
        .dark-mode body {
            background-image: url('/static/backgrounds/testt.png');
        }
    </style>
        
        
    <style>
                
            </style>
</head>
<body>
    
        
    <div class="topbar">
        <div class="topbar-container">
            <div class="logo-container">
                <div class="topbar-title logo">
                    <a href="/">
                        <img src="/static/logos/logo.png" alt="Logo" width="180">
                    </a>
                </div>
                <div id="banner" class="banner">
                    <div class="note" id="bannerNote">The new Marketplace is live! Be sure to check it out &lt;3 - more info in the newspost: https://gosuper.tools/news.php?id=75</div>
                    <button id="closeBanner">&times;</button>
                </div>
                <div class="topbar-subtitle">goSupertools
                </div>
            </div>
            <div class="topbar-button-container">

                <a href="/" class="topbar-button">Home</a>
                <a href="/list/" class="topbar-button">Item
                    Database</a>
                <a href="/sale/"
                    class="topbar-button active">Marketplace</a>
                <a href="/list/catwalk.php"
                    class="topbar-button">Catwalk</a>
                <a href="/analyzer-v2/"
                    class="topbar-button">Wardrobe
                    Analyzer</a>

                                </div>
                <div class="topbar-links">
                    <button id="registerButton" class="profile-button"><i class="bi bi-person-plus-fill" style="font-size: 18px; font-weight: bold; margin-right: 8px;"></i>Register</button>
                    <button id="loginButton" class="log-in"><i class="bi bi-box-arrow-in-right" style="font-size: 18px; font-weight: bold; margin-right: 8px;"></i>Login</button>
                                <div class="search-container">
                    <input type="text" id="linkInput" name="searchInput" class="search-input"
                        placeholder="Enter Item Link" autocomplete="off">
                    <button id="srchButton" class="search-button">
                        <i class="bi bi-search" style="font-size: 18px; font-weight: bold;"></i>
                    </button>
                </div>

                <div id="dark-mode-toggle" class="toggle-container">
                    <div class="toggle-switch">
                        <i class="bi bi-moon-fill moon-icon" style="font-size: 18px; color: #D9D9D9;"></i>
                        <i class="bi bi-sun-fill sun-icon" style="font-size: 18px; color: #606060;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="footer">    
    <div class="footer-links">
        <span><a href="/item/8naxAS2fOYGl0qmILVUo-">Random Item</a></span> | 
        <span><a href="/help/">Help</a></span> | 
        <span><a href="/help/info.php">Information</a></span> | 
        <span><a href="/help/safety.php">Safety</a></span> | 
        <span><a href="/help/terms.php">Terms</a></span> | 
        <span><a href="/help/rules.php">Rules</a></span> | 
        <span><a href="/help/thanks.php">Credits</a></span> | 
        <span><a href="/help/feedback.php">Feedback</a></span> | 
        <span><a href="/help/imprint.php">Imprint</a></span>
            </div>
    <div class="footer-note">
        <span>Thanks to © 2024 Momio Aps. All Rights Reserved. Used with permission.</span>
    </div>
</div>

<style>
    .gsm-ad-container {
        width: 100%;
        max-width: inherit;
        padding: 20px 0;
        text-align: center;
        margin: 10px auto 80px auto;
    }
    
    .gsm-ad-banner {
        background-color: var(--gst-background-columncontainer-opacity);
        border-radius: 25px;
        padding: 10px;
        display: inline-block;
        max-width: 100%;
    }
    
    .dark-mode .gsm-ad-banner {
        background-color: #2a2a2a;
        color: #e0e0e0;
    }
    
    .gsm-ad-content {
        min-height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
    
    .column-container {
        margin-bottom: 100px;
    }
</style>


<title>goSupertools - Marketplace</title>
<link rel="stylesheet" href="marketplace.css">
<script src="marketplace.js" defer></script>

<style>
/* Container */
.marketplace-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Poppins', sans-serif;
}

/* Header */
.marketplace-header {
    margin: 10px auto 30px;
    max-width: 890px;
}

.marketplace-header h1 {
    font-size: 36px;
    font-weight: 700;
    color: var(--gst-text-pink);
    text-align: center;
    margin: 0;
    padding: 20px;
}

.marketplace-header p {
    display: none;
}

/* Header Buttons */
.header-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 25px;
}

.btn-action {
    padding: 10px 0;
    background-color: var(--gst-background-pink);
    color: #fff;
    border-radius: 25px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    width: 210px;
    height: 30px;
    transition: all 0.3s;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--gst-border-pink);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.btn-action i {
    position: absolute;
    left: 20px;
    font-size: 16px;
}

.btn-action:hover {
    background-color: var(--gst-background-white);
    font-weight: 700;
    color: var(--gst-text-pink);
}

.btn-action.btn-secondary {
    background-color: var(--gst-background-pink);
}

.btn-action.btn-secondary:hover {
    background-color: var(--gst-background-white);
    color: var(--gst-text-pink);
}

.btn-action.btn-tertiary {
    background-color: #6c757d;
}

.btn-action.btn-tertiary:hover {
    background-color: var(--gst-background-white);
    color: #6c757d;
    font-weight: 700;
}

.filters-container {
    padding: 18px 20px;
    background: var(--gst-background-white2);
    border-radius: 12px;
    border: 1px solid var(--gst-border-pink);
    margin: 0 auto 20px;
    max-width: 890px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Row 1: item link search */
.filter-row-search {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.filter-row-search .filter-group {
    flex: 1;
}

/* Row 2: price / category / sort / buttons */
.filter-row-options {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
}

.filter-group.filter-group-sm {
    min-width: 90px;
    flex: 0 0 auto;
}

.filter-group label {
    font-weight: 600;
    font-size: 13px;
    color: var(--gst-text-4D4D4D);
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
}

.filter-group input,
.filter-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gst-border-ccc);
    border-radius: 8px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    background-color: var(--gst-background-white);
    color: var(--gst-body-fontcolor);
    box-sizing: border-box;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--gst-border-pink);
}

/* Search hint shown after link paste */
.filter-search-hint {
    font-size: 11px;
    color: var(--gst-text-777);
    margin-top: 3px;
    min-height: 15px;
}

.filter-search-hint.active {
    color: #5EBD73;
    font-weight: 500;
}

.filter-buttons {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
}

.btn-filter {
    padding: 8px 18px;
    background-color: var(--gst-background-pink);
    color: white;
    border: 1px solid var(--gst-border-pink);
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    transition: 0.3s;
    white-space: nowrap;
}

.btn-filter:hover {
    background-color: var(--gst-background-white);
    color: var(--gst-text-pink);
    font-weight: 700;
}

.btn-reset {
    padding: 8px 18px;
    background-color: #6c757d;
    color: white;
    border: 1px solid #6c757d;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    transition: 0.3s;
    text-decoration: none;
    white-space: nowrap;
}

.btn-reset:hover {
    background-color: var(--gst-background-white);
    color: #6c757d;
    font-weight: 700;
    text-decoration: none;
}

.checkbox-filters {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.checkbox-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-filter input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.checkbox-filter label {
    margin: 0;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    color: var(--gst-text-4D4D4D);
    display: flex;
    align-items: center;
    gap: 5px;
}

.checkbox-filter input[type="checkbox"]:checked + label {
    color: var(--gst-text-pink);
    font-weight: 600;
}

.checkbox-filter input[type="checkbox"]#wishlist:checked + label {
    color: #E91E63;
}

.results-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--gst-text-555);
    margin: 20px auto;
    max-width: 890px;
    font-weight: 500;
}

.listings-grid {
    max-width: 890px;
    margin: 0 auto 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 162px);
    gap: 20px;
    justify-content: center;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 20px 0;
    max-width: 890px;
    margin: 0 auto;
}

.pagination a,
.pagination span {
    padding: 10px 18px;
    background-color: var(--gst-background-pink);
    border: 1px solid var(--gst-border-pink);
    border-radius: 25px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
}

.pagination a:hover {
    background-color: white;
    color: var(--gst-text-pink);
    font-weight: 700;
}

.pagination .current {
    background-color: var(--gst-background-white);
    color: var(--gst-text-pink);
    font-weight: 700;
    border: 2px solid var(--gst-border-pink);
    box-shadow: 0 0 0 2px var(--gst-border-pink);
}

.no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--gst-text-555);
    max-width: 890px;
    margin: 0 auto;
    background: var(--gst-background-white2);
    border-radius: 12px;
    border: 1px solid var(--gst-border-pink);
}

.no-results i {
    font-size: 48px;
    margin-bottom: 15px;
    color: var(--gst-text-pink);
    opacity: 0.3;
}
</style>

</head>
<body>
<div class="column-container">
    <a href="/help/"><div id="questionIcon">Help</div></a>    
    <div class="marketplace-container">
        <!-- Header -->
        <div class="marketplace-header">
            <h1>Marketplace</h1>
            <p>Buy and sell goSupermodel items safely</p>
            <div style="text-align:center; margin: -16px 0 14px; font-size: 13px;">
                <a href="https://gosuper.tools/news.php?id=75" target="_blank" style="color: var(--gst-text-pink); font-weight: 600; text-decoration: none;">
                    Learn more about the Marketplace <i class="bi bi-arrow-right"></i>
                </a>
            </div>
                    </div>

        <!-- Filters -->
        <div class="filters-container">
                <form method="GET" action="" id="filterForm">
                        <!-- Row 1: Item link search -->
            <div class="filter-row-search">
                <div class="filter-group">
                    <label for="search">Search by Item Link</label>
                    <input type="text" id="search" name="search"
                           placeholder="https://gosupermodel.com/item/..."
                           value=""
                           autocomplete="off">
                    <div class="filter-search-hint" id="searchHint">
                                            </div>
                </div>
            </div>

            <!-- Row 2: Seller / Price / Category / Sort / Buttons -->
            <div class="filter-row-options">
                <div class="filter-group" style="flex: 1; min-width: 140px;">
                    <label for="seller">Seller Name</label>
                    <input type="text" id="seller" name="seller"
                           placeholder="Username..."
                           value=""
                           autocomplete="off">
                </div>

                <div class="filter-group filter-group-sm">
                    <label for="currency">Currency</label>
                    <select id="currency" name="currency">
                        <option value="" selected>All Currencies</option>
                        <option value="gomoney" >goMoney</option>
                        <option value="diamonds" >Diamonds</option>
                        <option value="vip" >VIP Days</option>
                        <option value="greetings" >Greetings</option>
                    </select>
                </div>

                <div class="filter-group filter-group-sm">
                    <label for="min_price">Min Price</label>
                    <input type="number" id="min_price" name="min_price"
                           placeholder="0"
                           value="">
                </div>

                <div class="filter-group filter-group-sm">
                    <label for="max_price">Max Price</label>
                    <input type="number" id="max_price" name="max_price"
                           placeholder="∞"
                           value="">
                </div>

                <div class="filter-group" style="flex: 1;">
                    <label for="category">Category</label>
                    <select id="category" name="category">
                        <option value="">All Categories</option>
                        <option value="shop" >
                            Shop Items
                        </option>
                        <option value="community_shop" >
                            Community Shop Items
                        </option>

                                                    <optgroup label="Current Events">
                                                                    <option value="39"
                                            >
                                        Emerald Shop                                    </option>
                                                                    <option value="5"
                                            >
                                        Fashion Pass Free                                    </option>
                                                                    <option value="6"
                                            >
                                        Fashion Pass Premium                                    </option>
                                                                    <option value="37"
                                            >
                                        SPT Refreshment 2026                                    </option>
                                                                    <option value="38"
                                            >
                                        Premium Refreshment 2026                                    </option>
                                                            </optgroup>
                                                    <optgroup label="Past Events">
                                                                    <option value="15"
                                            >
                                        Perk Item                                    </option>
                                                                    <option value="14"
                                            >
                                        Pearl Shop                                    </option>
                                                                    <option value="8"
                                            >
                                        Gemma Stone&#039;s Shop                                    </option>
                                                                    <option value="20"
                                            >
                                        SPT Refreshment 2023                                    </option>
                                                                    <option value="1"
                                            >
                                        Advent Calendar 2023                                    </option>
                                                                    <option value="16"
                                            >
                                        Premium Advent Calendar 2023                                    </option>
                                                                    <option value="2"
                                            >
                                        Advent Calendar 2024                                    </option>
                                                                    <option value="17"
                                            >
                                        Premium Advent Calendar 2024                                    </option>
                                                                    <option value="21"
                                            >
                                        SPT Refreshment 2024                                    </option>
                                                                    <option value="10"
                                            >
                                        Halloween Potions 2024                                    </option>
                                                                    <option value="18"
                                            >
                                        Premium Potions 2024                                    </option>
                                                                    <option value="29"
                                            >
                                        SPT Refreshment 2025                                    </option>
                                                                    <option value="30"
                                            >
                                        Premium Refreshment 2025                                    </option>
                                                                    <option value="33"
                                            >
                                        Halloween Potions 2025                                    </option>
                                                                    <option value="34"
                                            >
                                        Premium Potions 2025                                    </option>
                                                                    <option value="35"
                                            >
                                        Advent Calendar 2025                                    </option>
                                                                    <option value="36"
                                            >
                                        Premium Advent Calendar 2025                                    </option>
                                                            </optgroup>
                        
                                                    <option value="25"
                                    >
                                goPack Item                            </option>
                                                    <option value="24"
                                    >
                                goCode Item                            </option>
                                                    <option value="22"
                                    >
                                VIP Gift                            </option>
                                                    <option value="11"
                                    >
                                Icon Hunt                            </option>
                                                    <option value="9"
                                    >
                                Giftcard Item                            </option>
                                                    <option value="3"
                                    >
                                Competition Item                            </option>
                                                    <option value="7"
                                    >
                                Referral Reward                            </option>
                                                    <option value="23"
                                    >
                                Volunteer Exclusive                            </option>
                                                    <option value="26"
                                    >
                                goSpecials Item                            </option>
                                                    <option value="13"
                                    >
                                Other Event                            </option>
                                                    <option value="31"
                                    >
                                Origin Item                            </option>
                                                    <option value="32"
                                    >
                                Level Up Reward                            </option>
                                            </select>
                </div>

                <div class="filter-group" style="flex: 1;">
                    <label for="sort">Sort By</label>
                    <select id="sort" name="sort">
                        <option value="newest" selected>Newest First</option>
                        <option value="price_low" >Price: Low → High</option>
                        <option value="price_high" >Price: High → Low</option>
                        <option value="popular" >Most Viewed</option>
                        <option value="ending_soon" >Ending Soon</option>
                    </select>
                </div>

                <div class="filter-buttons">
                    <button type="submit" class="btn-filter">
                        <i class="bi bi-search"></i> Filter
                    </button>
                    <a href="index.php" class="btn-reset">Reset</a>
                </div>
            </div>

            <!-- Checkboxes -->
            <div class="checkbox-filters">
                <div class="checkbox-filter">
                    <input type="checkbox" id="offers" name="offers" value="1"
                                                      onchange="document.getElementById('filterForm').submit();">
                    <label for="offers">Accept Offers</label>
                </div>
                                <div class="checkbox-filter">
                    <input type="checkbox" id="hideOwned" onchange="toggleHideOwned(this.checked)">
                    <label for="hideOwned">
                        <i class="bi bi-bag-check-fill" style="color: #5EBD73;"></i> Hide Owned
                    </label>
                </div>
            </div>
        </form>

        <script>
        (function () {
            const input = document.getElementById('search');
            const hint  = document.getElementById('searchHint');
            const linkPattern = /(?:gosupermodel\.com|gosuper\.tools)\/item\/([^/?&\s]{1,30})/;

            function updateHint() {
                const m = input.value.match(linkPattern);
                if (m) {
                    const uiid = m[1].substring(0, 12);
                    hint.innerHTML = '<i class="bi bi-check-circle" style="color:#5EBD73"></i> '
                        + '<span style="color:#5EBD73;font-weight:500"> Searching for UIID: ' + uiid + '</span>';
                } else {
                    hint.innerHTML = '';
                }
            }

            input.addEventListener('input', updateHint);
            input.addEventListener('paste', function () {
                setTimeout(updateHint, 0);
            });
        })();
        </script>
    </div>

        <!-- Results Info -->
        <div class="results-info">
        <div>
            Showing 76-100 of 136 listings
                    </div>
    </div>

        <!-- Listings Grid -->
        <div class="listings-grid">
                    
<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-1">
    <a href="?listing=494" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(494);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/z5i9YA2nIVcr" 
                 alt="Item z5i9YA2nIVcr"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="z5i9YA2nIVcr">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #78AFC1;">
                goPack Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">3,000                                </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=1994" 
                   onclick="event.stopPropagation();">
                    Brallan                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                4d 5h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-2">
    <a href="?listing=113" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(113);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/UziD-AgbE3pC" 
                 alt="Item UziD-AgbE3pC"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="UziD-AgbE3pC">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #78AFC1;">
                goPack Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">1,500                                        <span class="negotiable">
                    <i class="bi bi-chat-dots"></i> Negotiable
                </span>
                    </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=89" 
                   onclick="event.stopPropagation();">
                    RGB                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                4d 2h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-2">
    <a href="?listing=114" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(114);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/1zIeBBjXrvbB" 
                 alt="Item 1zIeBBjXrvbB"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="1zIeBBjXrvbB">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #78AFC1;">
                goPack Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">200                                        <span class="negotiable">
                    <i class="bi bi-chat-dots"></i> Negotiable
                </span>
                    </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=89" 
                   onclick="event.stopPropagation();">
                    RGB                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                4d 2h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-2">
    <a href="?listing=116" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(116);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/Z1xDJIpiKYdt" 
                 alt="Item Z1xDJIpiKYdt"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="Z1xDJIpiKYdt">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #78AFC1;">
                goPack Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">1,500                                        <span class="negotiable">
                    <i class="bi bi-chat-dots"></i> Negotiable
                </span>
                    </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=89" 
                   onclick="event.stopPropagation();">
                    RGB                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                4d 2h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-2">
    <a href="?listing=117" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(117);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/dEzietMZAxer" 
                 alt="Item dEzietMZAxer"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="dEzietMZAxer">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #78AFC1;">
                goPack Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">200                                        <span class="negotiable">
                    <i class="bi bi-chat-dots"></i> Negotiable
                </span>
                    </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=89" 
                   onclick="event.stopPropagation();">
                    RGB                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                4d 2h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=111" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(111);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/jJxNK0XwS3Gx" 
                 alt="Item jJxNK0XwS3Gx"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="jJxNK0XwS3Gx">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #CD5151;">
                Competition Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">1,500                                        <span class="negotiable">
                    <i class="bi bi-chat-dots"></i> Negotiable
                </span>
                    </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=89" 
                   onclick="event.stopPropagation();">
                    RGB                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                4d 2h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-1">
    <a href="?listing=97" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(97);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/2KMC5QFvKpl2" 
                 alt="Item 2KMC5QFvKpl2"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="2KMC5QFvKpl2">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #CD5151;">
                Competition Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">3,000                                </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=4" 
                   onclick="event.stopPropagation();">
                    Inuka                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=98" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(98);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/OgyCkj7j9mCy" 
                 alt="Item OgyCkj7j9mCy"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="OgyCkj7j9mCy">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #CD5151;">
                Competition Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">1,000                                </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=4" 
                   onclick="event.stopPropagation();">
                    Inuka                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=99" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(99);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/vI5nmVPt-tQw" 
                 alt="Item vI5nmVPt-tQw"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="vI5nmVPt-tQw">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #CD5151;">
                Competition Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">1,500                                </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=4" 
                   onclick="event.stopPropagation();">
                    Inuka                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=100" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(100);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/WVtjK2Xv29x7" 
                 alt="Item WVtjK2Xv29x7"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="WVtjK2Xv29x7">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #CD5151;">
                Competition Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">600                                </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=4" 
                   onclick="event.stopPropagation();">
                    Inuka                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=101" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(101);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/gI9f1PLyFI0s" 
                 alt="Item gI9f1PLyFI0s"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="gI9f1PLyFI0s">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #CD5151;">
                Competition Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">1,500                                </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=4" 
                   onclick="event.stopPropagation();">
                    Inuka                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=102" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(102);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/JEHKnxtomG3z" 
                 alt="Item JEHKnxtomG3z"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="JEHKnxtomG3z">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #CD5151;">
                Competition Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">2,500                                </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=4" 
                   onclick="event.stopPropagation();">
                    Inuka                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=104" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(104);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/nPHorJY5xlZt" 
                 alt="Item nPHorJY5xlZt"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="nPHorJY5xlZt">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #CD5151;">
                Competition Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">500                                </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=4" 
                   onclick="event.stopPropagation();">
                    Inuka                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=105" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(105);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/YAjewJn7AvFd" 
                 alt="Item YAjewJn7AvFd"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="YAjewJn7AvFd">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #CD5151;">
                Competition Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">1,000                                </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=4" 
                   onclick="event.stopPropagation();">
                    Inuka                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=92" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(92);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/OlsoK7IqGMrV" 
                 alt="Item OlsoK7IqGMrV"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="OlsoK7IqGMrV">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #CD5151;">
                Competition Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">2,000                                </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=269" 
                   onclick="event.stopPropagation();">
                    Chizumi                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=94" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(94);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/2OC1ypYPG4U_" 
                 alt="Item 2OC1ypYPG4U_"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="2OC1ypYPG4U_">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #CD5151;">
                Competition Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">1,000                                </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=269" 
                   onclick="event.stopPropagation();">
                    Chizumi                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=93" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(93);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/MfL2Le0DbntE" 
                 alt="Item MfL2Le0DbntE"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="MfL2Le0DbntE">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #CD5151;">
                Competition Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">2,500                                </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=269" 
                   onclick="event.stopPropagation();">
                    Chizumi                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=75" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(75);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/htevVOg1J70o" 
                 alt="Item htevVOg1J70o"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="htevVOg1J70o">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #B778C1;">
                Community Shop Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">50                                        <span class="negotiable">
                    <i class="bi bi-chat-dots"></i> Negotiable
                </span>
                    </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=4" 
                   onclick="event.stopPropagation();">
                    Inuka                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=76" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(76);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/2jE4FrVeCdWl" 
                 alt="Item 2jE4FrVeCdWl"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="2jE4FrVeCdWl">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #B778C1;">
                Community Shop Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">200                                        <span class="negotiable">
                    <i class="bi bi-chat-dots"></i> Negotiable
                </span>
                    </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=4" 
                   onclick="event.stopPropagation();">
                    Inuka                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=77" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(77);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/7-MKgTYGiIbk" 
                 alt="Item 7-MKgTYGiIbk"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="7-MKgTYGiIbk">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #B778C1;">
                Community Shop Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">50                                        <span class="negotiable">
                    <i class="bi bi-chat-dots"></i> Negotiable
                </span>
                    </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=4" 
                   onclick="event.stopPropagation();">
                    Inuka                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=79" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(79);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/2zxvDlI_VhxQ" 
                 alt="Item 2zxvDlI_VhxQ"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="2zxvDlI_VhxQ">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #B778C1;">
                Community Shop Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">50                                        <span class="negotiable">
                    <i class="bi bi-chat-dots"></i> Negotiable
                </span>
                    </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=4" 
                   onclick="event.stopPropagation();">
                    Inuka                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=81" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(81);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/eVVK4048OWxc" 
                 alt="Item eVVK4048OWxc"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="eVVK4048OWxc">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #B778C1;">
                Community Shop Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">50                                        <span class="negotiable">
                    <i class="bi bi-chat-dots"></i> Negotiable
                </span>
                    </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=4" 
                   onclick="event.stopPropagation();">
                    Inuka                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=82" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(82);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/eVVK4048OWxc" 
                 alt="Item eVVK4048OWxc"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="eVVK4048OWxc">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #B778C1;">
                Community Shop Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">50                                        <span class="negotiable">
                    <i class="bi bi-chat-dots"></i> Negotiable
                </span>
                    </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=4" 
                   onclick="event.stopPropagation();">
                    Inuka                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=83" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(83);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/1oA9H1qqhyYg" 
                 alt="Item 1oA9H1qqhyYg"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="1oA9H1qqhyYg">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #B778C1;">
                Community Shop Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">20                                        <span class="negotiable">
                    <i class="bi bi-chat-dots"></i> Negotiable
                </span>
                    </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=4" 
                   onclick="event.stopPropagation();">
                    Inuka                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>


<style>
.listing-card {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    font-family: Poppins;
}

.listing-card.quality-0 {
    background-color: #eaefd9;
}

.listing-card.quality-1 {
    background-color: #def3f6;
}

.listing-card.quality-2 {
    background-color: #e1d3ec;
}

.listing-card.quality-3 {
    background-color: #fcf4e2;
}

.listing-card.quality-4 {
    background-color: #ffd6da;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quality-0 .listing-card-image {
    background-color: #f5f8ed;
}

.quality-1 .listing-card-image {
    background-color: #eff9fb;
}

.quality-2 .listing-card-image {
    background-color: #f0e9f6;
}

.quality-3 .listing-card-image {
    background-color: #fefaf1;
}

.quality-4 .listing-card-image {
    background-color: #ffebee;
}

.listing-card-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.listing-badge {
    background: var(--gst-background-pink-hover);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.listing-badge.contact-trade {
    background: #6B7280;
}

.listing-badge.offer {
    background: #5EBD73;
}

.listing-badge.backlayer {
    background: var(--gst-background-pink);
}

.listing-badge.owned {
    background: var(--gst-background-pink);
    display: none;
}

.listing-card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gst-background-pink-hover);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    pointer-events: auto;
    z-index: 10;
    color: white;
}

.listing-card-wishlist:hover {
    background: var(--gst-background-pink);
}

.listing-card-wishlist.in-wishlist {
    background: var(--gst-background-pink);
}

.listing-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.listing-card-category {
    font-size: 13px;
    font-weight: 600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
}

.listing-card-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-pink);
}

.listing-card-price .currency-icon {
    height: 13px;
    margin-right: 2px;
}

.listing-card-price .negotiable {
    color: #5EBD73;
    font-style: italic;
    font-size: 12px;
}

.listing-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gst-text-777);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

.listing-card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 60%;
}

.listing-card-seller a {
    color: var(--gst-text-777);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-seller a:hover {
    color: var(--gst-text-pink);
}

.listing-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.listing-card-time.urgent {
    color: #d33;
}

.listing-card-time.expired {
    color: #999;
}

.listing-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

</style>

<div class="listing-card quality-0">
    <a href="?listing=84" 
       class="listing-card-link" 
       onclick="event.preventDefault(); MarketplaceModal.open(84);"></a>
    
    <div class="listing-card-image">
                    <img src="https://gosupermodel.com/item/vkS6NRLjLDrc" 
                 alt="Item vkS6NRLjLDrc"
                 loading="lazy">
                
        <div class="listing-card-badges">
                            <span class="listing-badge owned owned-badge" data-uiid="vkS6NRLjLDrc">
                    <i class="bi bi-check-circle-fill"></i> Owned
                </span>
                    </div>
        
            </div>
    
    <div class="listing-card-content">
                    <div class="listing-card-category" style="background-color: #B778C1;">
                Community Shop Item            </div>
                
        <div class="listing-card-price">
                            <img src="/static/icons/money.png" class="currency-icon">50                                        <span class="negotiable">
                    <i class="bi bi-chat-dots"></i> Negotiable
                </span>
                    </div>
        
        <div class="listing-card-meta">
            <div class="listing-card-seller">
                <i class="bi bi-person"></i>
                <a href="/profile/?id=4" 
                   onclick="event.stopPropagation();">
                    Inuka                </a>
            </div>
            
            <div class="listing-card-time ">
                <i class="bi bi-clock"></i>
                3d 8h            </div>
        </div>
    </div>
</div>

            </div>

        <!-- Pagination -->
                    <div class="pagination">
                            <a href="?listing=532&page=1">
                    <i class="bi bi-chevron-double-left"></i>
                </a>
                <a href="?listing=532&page=3">
                    <i class="bi bi-chevron-left"></i>
                </a>
                        
                                                <a href="?listing=532&page=2">
                        2                    </a>
                                                                <a href="?listing=532&page=3">
                        3                    </a>
                                                                <span class="current">4</span>
                                                                <a href="?listing=532&page=5">
                        5                    </a>
                                                                <a href="?listing=532&page=6">
                        6                    </a>
                                        
                            <a href="?listing=532&page=5">
                    <i class="bi bi-chevron-right"></i>
                </a>
                <a href="?listing=532&page=6">
                    <i class="bi bi-chevron-double-right"></i>
                </a>
                            </div>
            </div>
</div>

<!-- Listing Detail Modal -->
<div id="listingModal" class="listing-modal" style="display: none;">
    <div class="listing-modal-overlay"></div>
    <div class="listing-modal-content">
        <button class="listing-modal-close" onclick="MarketplaceModal.close()">
            <i class="bi bi-x-lg"></i>
        </button>
        
        <div class="listing-modal-body">
            <!-- Loading state -->
            <div class="listing-modal-loading">
                <div class="spinner"></div>
                <p>Loading listing...</p>
            </div>
            
            <!-- Content will be loaded here -->
            <div class="listing-modal-loaded" style="display: none;">
                <!-- Will be populated by JavaScript -->
            </div>
        </div>
    </div>
</div>

<style>
/* Modal Overlay & Container */
.listing-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.listing-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.2s ease;
}

.listing-modal-content {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    background: var(--gst-background-columncontainer);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #333333;

    /* Force light-mode variables inside the modal regardless of active theme */
    --gst-background-columncontainer: #F5F0F0;
    --gst-background-white:           #FFFFFF;
    --gst-background-white2:          #FFFFFF;
    --gst-background-lightgray:       #eee3e3;
    --gst-background-F5F5F5:          #F5F5F5;
    --gst-background-pink:            #C17888;
    --gst-background-pink-hover:      #C5A1A8;
    --gst-text-pink:                  #C17888;
    --gst-border-pink:                #C17888;
    --gst-border-pink-hover:          #C5A1A8;
    --gst-border-ccc:                 #cccccc;
    --gst-body-fontcolor:             #333333;
    --gst-text-4D4D4D:                #4D4D4D;
    --gst-text-555:                   #555555;
    --gst-text-777:                   #777777;
    --gst-text-959595:                #959595;
}

.listing-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gst-background-pink-hover);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    transition: background 0.2s;
    z-index: 10;
}

.listing-modal-close:hover {
    background: var(--gst-background-pink);
}

.listing-modal-body {
    overflow-y: auto;
    padding: 30px;
    flex: 1;
}

.listing-modal-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--gst-text-777);
}

.listing-modal-loading .spinner {
    margin: 0 auto 20px;
}

/* Modal Content Layout */
.listing-modal-header {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 12px;
    background-color: var(--gst-background-white2);
}

.listing-modal-header.quality-0 {
    background-color: #eaefd9;
}

.listing-modal-header.quality-1 {
    background-color: #def3f6;
}

.listing-modal-header.quality-2 {
    background-color: #e1d3ec;
}

.listing-modal-header.quality-3 {
    background-color: #fcf4e2;
}

.listing-modal-header.quality-4 {
    background-color: #ffd6da;
}

.listing-modal-image {
    flex: 0 0 300px;
    position: relative;
}

.listing-modal-main-image {
    width: 100%;
    height: 300px;
    background-color: var(--gst-background-lightgray);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.listing-modal-header.quality-0 .listing-modal-main-image {
    background-color: #f5f8ed;
}

.listing-modal-header.quality-1 .listing-modal-main-image {
    background-color: #eff9fb;
}

.listing-modal-header.quality-2 .listing-modal-main-image {
    background-color: #f0e9f6;
}

.listing-modal-header.quality-3 .listing-modal-main-image {
    background-color: #fefaf1;
}

.listing-modal-header.quality-4 .listing-modal-main-image {
    background-color: #ffebee;
}

.listing-modal-main-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-modal-status-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.listing-modal-status-badge {
    background: var(--gst-background-pink);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: white;
}

.listing-modal-status-badge.active {
    background: var(--gst-background-pink);
}

.listing-modal-status-badge.sold {
    background: #AF4C4C;
}

.listing-modal-status-badge.owned {
    background: var(--gst-background-pink);
}

.listing-modal-image-links {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 13px;
}

.listing-modal-image-links a {
    color: var(--gst-text-pink);
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.listing-modal-image-links a:hover {
    text-decoration: underline;
}

.listing-modal-info {
    flex: 1;
    min-width: 0;
}

.listing-modal-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--gst-text-4D4D4D);
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.listing-modal-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--gst-text-777);
    flex-wrap: wrap;
}

.listing-modal-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.listing-modal-price-box {
    background: var(--gst-background-white2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.listing-modal-price-box h3 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--gst-text-777);
    display: flex;
    align-items: center;
    gap: 6px;
}

.listing-modal-prices {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.listing-modal-price-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 18px;
    font-weight: 700;
    color: var(--gst-text-pink);
}

.listing-modal-price-item img {
    height: 18px;
}

.listing-modal-negotiable {
    background: #5EBD73;
    color: white;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.listing-modal-features {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.listing-modal-feature {
    background: #eaefd9;
    color: #5EBD73;
    padding: 8px 15px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.listing-modal-description {
    margin-bottom: 25px;
}

.listing-modal-description h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--gst-text-4D4D4D);
}

.listing-modal-description p {
    margin: 0;
    line-height: 1.6;
    color: var(--gst-text-777);
    white-space: pre-wrap;
}

.listing-modal-seller {
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 20px;
    background: var(--gst-background-white2);
    border: 1px solid var(--gst-border-ccc);
}

.listing-modal-seller-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.listing-modal-seller-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--gst-background-lightgray);
}

/* Show only upper half of the full-body doll image */
.listing-modal-seller-avatar img {
    width: 130%;
    height: 200%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.listing-modal-seller-details {
    flex: 1;
    min-width: 0;
}

.listing-modal-seller-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--gst-text-777);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.listing-modal-seller-details a {
    font-weight: 600;
    font-size: 14px;
    color: var(--gst-text-pink);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-modal-seller-details a:hover {
    text-decoration: underline;
}

.listing-modal-seller-profile-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 10px;
    background: var(--gst-background-pink-hover);
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}

.listing-modal-seller-profile-btn:hover {
    background: var(--gst-background-pink);
    color: white;
    text-decoration: none;
}

.contact-method-info {
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.04);
    border-radius: 8px;
    font-size: 12px;
    color: var(--gst-text-555);
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-method-info i {
    font-size: 13px;
    color: var(--gst-text-959595);
    flex-shrink: 0;
}

.listing-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.listing-modal-btn {
    padding: 12px 24px;
    border-radius: 17px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    text-decoration: none;
}

.listing-modal-btn-primary {
    background: #5EBD73;
    color: white;
}

.listing-modal-btn-primary:hover {
    background: #88D098;
}

.listing-modal-btn-secondary {
    background: var(--gst-background-pink-hover);
    color: white;
}

.listing-modal-btn-secondary:hover {
    background: var(--gst-background-pink);
}

.listing-modal-owner-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 12px 14px;
    background: var(--gst-background-white2);
    border: 1px solid var(--gst-border-ccc);
    border-radius: 12px;
    flex-wrap: wrap;
}

.listing-modal-owner-bar-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gst-text-pink);
    white-space: nowrap;
    margin-right: auto;
}

.listing-modal-owner-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.listing-modal-owner-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
    background: var(--gst-background-white);
    color: var(--gst-text-555);
}

.listing-modal-owner-btn:hover {
    opacity: 0.8;
    text-decoration: none;
    color: var(--gst-text-555);
}

.listing-modal-owner-btn.success {
    background: #d4f0de;
    color: #2e7d4f;
}

.listing-modal-owner-btn.danger {
    background: #fde8e8;
    color: #b33;
}

.listing-modal-also-see {
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--gst-background-white2);
    border-radius: 12px;
    border: 1px solid var(--gst-border-ccc);
}

.listing-modal-also-see h3 {
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--gst-text-959595);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.listing-modal-also-see-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.listing-modal-also-see-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--gst-background-white);
    border: 1px solid var(--gst-border-ccc);
    border-radius: 20px;
    font-size: 13px;
    color: var(--gst-text-4D4D4D);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.listing-modal-also-see-item:hover {
    border-color: var(--gst-green, #5EBD73);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    color: var(--gst-text-4D4D4D);
    text-decoration: none;
}

.listing-modal-also-see-seller {
    color: var(--gst-text-959595);
    font-size: 12px;
}

.listing-modal-also-see-price {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}

.listing-modal-also-see-icon {
    height: 13px;
    width: auto;
}

.listing-modal-other-listings {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 2px solid var(--gst-border-ccc);
}

.listing-modal-other-listings h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--gst-text-4D4D4D);
}

.listing-modal-other-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
}

.listing-modal-other-item {
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
}

.listing-modal-other-item.quality-0 {
    background-color: #eaefd9;
}

.listing-modal-other-item.quality-1 {
    background-color: #def3f6;
}

.listing-modal-other-item.quality-2 {
    background-color: #e1d3ec;
}

.listing-modal-other-item.quality-3 {
    background-color: #fcf4e2;
}

.listing-modal-other-item.quality-4 {
    background-color: #ffd6da;
}

.listing-modal-other-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.listing-modal-other-item-image {
    width: 100%;
    height: 120px;
    background-color: var(--gst-background-lightgray);
    display: flex;
    align-items: center;
    justify-content: center;
}

.listing-modal-other-item.quality-0 .listing-modal-other-item-image {
    background-color: #f5f8ed;
}

.listing-modal-other-item.quality-1 .listing-modal-other-item-image {
    background-color: #eff9fb;
}

.listing-modal-other-item.quality-2 .listing-modal-other-item-image {
    background-color: #f0e9f6;
}

.listing-modal-other-item.quality-3 .listing-modal-other-item-image {
    background-color: #fefaf1;
}

.listing-modal-other-item.quality-4 .listing-modal-other-item-image {
    background-color: #ffebee;
}

.listing-modal-other-item-image img {
    max-width: 90%;
    max-height: 90%;
}

.listing-modal-other-item-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--gst-text-pink);
    padding: 10px;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .listing-modal-header {
        flex-direction: column;
    }
    
    .listing-modal-image {
        flex: none;
    }
    
    .listing-modal-content {
        max-height: 95vh;
        border-radius: 20px 20px 0 0;
    }
    
    .listing-modal-body {
        padding: 20px;
    }
}

/* Body no-scroll when modal open */
body.modal-open {
    overflow: hidden;
}

/* Category tag — matches i-color-box-container style */
.listing-modal-category-tag {
    display: inline-flex;
    flex-wrap: wrap;
    background-color: #CC934F;
    padding: 5px 15px;
    border-radius: 90px;
    font-size: 14px;
    margin-top: 10px;
    transition: 0.4s;
    width: fit-content;
    color: #fff;
    min-height: 17px;
    align-items: center;
}

/* Expired listing (not owned) */
.listing-modal-expired-banner {
    background: #4B5563;
    color: white;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 600;
    font-size: 15px;
}

.listing-modal-expired-banner i {
    font-size: 24px;
    flex-shrink: 0;
    opacity: 0.9;
}

.listing-modal-expired-banner .expired-sub {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.75;
    margin-top: 3px;
}

.listing-modal-loaded.is-expired .listing-modal-header {
    filter: grayscale(0.65);
    opacity: 0.7;
}

.listing-modal-loaded.is-expired .listing-modal-actions {
    display: none;
}
</style>


<script>
/**
 * Apply owned-badge visibility and optional hide-owned filter.
 */
function applyOwnedState() {
    const owned      = JSON.parse(localStorage.getItem('loggedUiids') || '[]');
    const hideOwned  = localStorage.getItem('marketplace_hide_owned') === 'true';

    document.querySelectorAll('.listing-card').forEach(card => {
        const badge = card.querySelector('.owned-badge');
        if (!badge) return;
        const uiid  = badge.dataset.uiid;
        const isOwned = uiid && owned.some(u => u.includes(uiid));

        badge.style.display = isOwned ? 'flex' : 'none';

        card.style.display = (hideOwned && isOwned) ? 'none' : '';
    });
}

function toggleHideOwned(checked) {
    localStorage.setItem('marketplace_hide_owned', checked ? 'true' : 'false');
    applyOwnedState();
}

document.addEventListener('DOMContentLoaded', function () {
    const hideOwned = localStorage.getItem('marketplace_hide_owned') === 'true';
    const cb = document.getElementById('hideOwned');
    if (cb) cb.checked = hideOwned;

    applyOwnedState();
});
</script>
</body>
</html>