.grid-item.Consumer-Grade {
            outline-color: rgb(176, 195, 217);
        }

        .grid-item.Industrial-Grade {
            outline-color: rgb(94, 152, 217);
        }

        .grid-item.Mil-Spec-Grade {
            outline-color: rgb(75, 105, 255);
        }

        .grid-item.Restricted {
            outline-color: rgb(136, 71, 255);
        }

        .grid-item.Classified {
            outline-color: rgb(211, 44, 230);
        }

        .grid-item.Covert {
            outline-color: rgb(235, 75, 75);
        }

        .grid-item.Contraband {
            outline-color: rgb(228, 174, 57);
            background-color: rgb(228, 174, 57);
        }

        .grid-item.Default {
            outline-color: rgb(228, 228, 228);
            background-color: rgb(41, 41, 41);
        }

        .grid-item.Stattrak {
            outline-color: rgb(207, 106, 50);
        }

        .grid-item.Souvenir {
            outline-color: rgb(255, 215, 0);
        }

        .grid-item.Genuine {
            outline-color: rgb(77, 116, 85);
        }

        .grid-item.Knives {
            outline-color: rgb(134, 80, 172);
        }

        .grid-item.Gloves {
            outline-color: rgb(134, 80, 172);
        }

        .grid-item {
            border-radius: 0;
            background-color: rgb(41, 41, 41);
        }

        .result-item.Consumer-Grade {
  outline: 1px solid rgb(176,195,217);
  /* optional: background-color / gradient to mimic Steam cards */
}

.result-item.Industrial-Grade {
  outline: 1px solid rgb(94,152,217);
}

.result-item.Mil-Spec-Grade {
  outline: 1px solid rgb(75,105,255);
}

.result-item.Restricted {
  outline: 1px solid rgb(136,71,255);
}

.result-item.Classified {
  outline: 1px solid rgb(211,44,230);
}

.result-item.Covert {
  outline: 1px solid rgb(235,75,75);
}

.result-item.Contraband {
  outline: 1px solid rgb(228,174,57);
  background-color: rgb(228,174,57);
}


        .OptionButtonContainer {
            display: flex;
            width: -webkit-fill-available;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: baseline;
            position: absolute;
        }

        .remove-button {
            color: rgb(255, 255, 255);
            position: unset;
            font-weight: bold;
            cursor: pointer;
            display: none;
            z-index: 5;
            margin-left: 10%;
            margin-right: 10%;
        }

        .droppable:hover .remove-button {
            display: block;
        }

        .stattrak-toggle-box {
            z-index: 5;
            cursor: pointer;
            display: none;
            margin: 10%;
        }

        .droppable:hover .stattrak-toggle-box {
            display: block;
        }

        .genuine-toggle-box {
            z-index: 5;
            cursor: pointer;
            display: none;
            margin: 10%;
        }

        .droppable:hover .genuine-toggle-box {
            display: block;
        }

        .souvenir-toggle-box {
            z-index: 5;
            cursor: pointer;
            display: none;
            margin: 10%;
        }

        .droppable:hover .souvenir-toggle-box {
            display: block;
        }

        .buttons {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            white-space: nowrap;
            margin-top: 5px;
            font-size: 14px;
        }

        .optionbuttons {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            white-space: nowrap;
        }

        .pagebtn {
            display: inline-block;
            line-height: 24px;
            background-color: #1a303d;
            border: 1px transparent;
            border-radius: 3px;
            cursor: pointer;
            padding: 0px 16px;
            color: #66c0f4;
        }

        .pagebtn:hover {
            display: inline-block;
            line-height: 24px;
            background-color: #66c0f4;
            border: 1px transparent;
            border-radius: 3px;
            cursor: pointer;
            padding: 0px 16px;
            color: #ffffff;
        }

        .pagecontrols {
            text-align: center;
            line-height: 22px;
        }

        .pagecount {
            font-family: "Motiva Sans",
                Arial,
                Helvetica,
                sans-serif;
            color: #969696;
            font-size: 14px;
        }

        #Flexbox {
            max-width: 520px;
        }

        .grid-container {
            grid-gap: 8px;
            padding: 8px;
        }

        /* === Wear badge on RESULTS (not on grid) === */
#resultsList .result-item { position: relative; }
#resultsList .result-item .wear-badge{
  position:absolute; top:6px; left:6px;
  padding:2px 6px; border-radius:6px;
  font-size:11px; line-height:1; font-weight:700;
  color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25);
  user-select:none; pointer-events:none; z-index:2;
  outline:1px solid rgba(0,0,0,.15);
}
/* Community wear colors */
.wear-FN { background:#27ae60; }                  /* Factory New */
.wear-MW { background:#2ecc71; }                  /* Minimal Wear */
.wear-FT { background:#f1c40f; color:#111; }      /* Field-Tested */
.wear-WW { background:#e67e22; }                  /* Well-Worn */
.wear-BS { background:#e74c3c; }                  /* Battle-Scarred */

/* (Optional) small spacing tweak so badge never sits under rounded corners */
#resultsList .result-item img { display:block; }




        /* md */
        @media (max-width: 768px) {
            .fixed {
                position: relative;
            }

            .searchandfilter {
                width: 90%;
                padding: 5%;
            }

            #Flexbox {
                margin-top: 65px;
                height: auto;
                max-width: 520px;
                left: 0;
            }

            #resultsList {
                margin-top: 12px;
            }

            #sidebar {
                margin-top: 80px;
                height: auto;
            }

            .grid-container {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                grid-gap: 8px;
                padding: 8px;
                background-color: #000000;
                border: 1px solid #2c2c2d;
            }

            .searchandfilter {
                width: 100%;
                padding: 10px 0 10px 0;
            }
        }

        @media (max-width: 360px) {
            .grid-container {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                grid-gap: 7px;
                padding: 7px;
                background-color: #000000;
                border: 1px solid #2c2c2d;
            }
        }

        @media (max-width: 267px) {
            .buttons {
                display: flex;
                align-items: center;
            }

            button {
                margin-left: 0;
                margin-right: 0;
            }

            .pagecount {
                display: none;
            }
        }