/*
|--------------------------------------------------------------------------
| BUYSELL GH — SEARCH POLISH V3
|--------------------------------------------------------------------------
|
| Fixes observed in live screenshot:
|
| 1. Increase desktop marketplace width.
| 2. Increase floating header width.
| 3. Fix broken category filter rows.
| 4. Enlarge category SVG icons.
| 5. Increase sidebar readability.
| 6. Increase listing-card scale.
| 7. Increase sponsored banner scale.
| 8. Improve desktop spacing.
|
*/


/* ========================================================= */
/* MASTER FRONTEND WIDTH */
/* ========================================================= */


:root{
    --am-container:1480px !important;
    --am-global-gutter:22px;
}


.am-container{
    width:
        min(
            1480px,
            calc(100% - 44px)
        ) !important;

    max-width:none !important;

    margin-left:auto !important;
    margin-right:auto !important;
}


/* ========================================================= */
/* FLOATING GLOBAL HEADER */
/* ========================================================= */


.am-header{
    width:
        min(
            1480px,
            calc(100% - 28px)
        ) !important;

    min-height:76px !important;

    height:76px !important;
}


.am-header .am-container{
    width:100% !important;

    max-width:none !important;

    padding:
        0 24px !important;
}


.am-header-inner{
    height:76px !important;
}


.am-logo-mark{
    width:44px !important;
    height:44px !important;
    flex-basis:44px !important;
}


.am-logo-text strong,
.am-logo-text b{
    font-size:20.5px !important;
}


.am-main-nav{
    gap:29px !important;
}


.am-main-nav a{
    font-size:13.5px !important;

    font-weight:600 !important;
}


.am-post-button{
    height:47px !important;

    padding:
        0 22px !important;

    font-size:13.5px !important;
}


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


.ams-search-hero{
    margin-top:14px !important;

    min-height:262px !important;
}


.ams-search-hero-inner{
    padding-top:55px !important;

    padding-bottom:29px !important;
}


.ams-search-title-row h1{
    font-size:46px !important;

    line-height:1.03 !important;

    letter-spacing:-2px !important;
}


.ams-search-title-row p{
    margin-top:9px !important;

    font-size:15px !important;

    line-height:1.5 !important;
}


.ams-main-search{
    margin-top:31px !important;

    grid-template-columns:
        1.25fr
        1fr
        1fr
        174px
        !important;

    gap:12px !important;
}


.ams-search-control{
    height:61px !important;

    padding:
        0 18px !important;
}


.ams-search-control input,
.ams-search-control select{
    font-size:13px !important;
}


.ams-search-button{
    min-height:61px !important;

    font-size:14px !important;
}


/* ========================================================= */
/* CATEGORY CHIP ROW */
/* ========================================================= */


.ams-chip-strip{
    padding:
        14px 0 13px !important;
}


.ams-chip-scroll{
    gap:9px !important;
}


.ams-category-chip{
    min-height:45px !important;

    padding:
        0 17px !important;

    gap:9px !important;

    border-radius:12px !important;

    font-size:11.5px !important;
}


.ams-chip-icon{
    width:21px !important;

    height:21px !important;

    flex:
        0 0 21px !important;
}


.ams-category-svg{
    width:19px !important;

    height:19px !important;
}


/* ========================================================= */
/* MAIN SEARCH ARCHITECTURE */
/* ========================================================= */


.ams-results-section{
    padding-top:18px !important;
}


.ams-results-layout{
    grid-template-columns:
        305px
        minmax(0,1fr)
        !important;

    gap:26px !important;

    align-items:start !important;
}


/* ========================================================= */
/* SIDEBAR */
/* ========================================================= */


.ams-sidebar{
    width:305px !important;

    border-radius:15px !important;
}


.ams-filter-heading{
    min-height:64px !important;

    padding:
        0 18px !important;
}


.ams-filter-heading h2{
    font-size:18px !important;
}


.ams-filter-heading a{
    font-size:11px !important;
}


.ams-filter-group{
    padding:
        18px 18px !important;
}


.ams-filter-title{
    margin-bottom:14px !important;

    font-size:13.5px !important;

    font-weight:800 !important;
}


/* ========================================================= */
/* FIX CATEGORY FILTER ROW — IMPORTANT */
/* ========================================================= */


.ams-filter-options
.ams-category-check-row{
    width:100% !important;

    min-height:31px !important;

    display:grid !important;

    grid-template-columns:
        18px
        24px
        minmax(0,1fr)
        42px
        !important;

    grid-template-rows:
        31px
        !important;

    column-gap:8px !important;

    row-gap:0 !important;

    align-items:center !important;

    justify-items:start !important;

    padding:0 !important;

    margin:0 !important;

    line-height:1 !important;
}


/*
|--------------------------------------------------------------------------
| Radio / checkbox
|--------------------------------------------------------------------------
*/


.ams-category-check-row
> input{
    grid-column:1 !important;

    grid-row:1 !important;

    width:17px !important;

    height:17px !important;

    margin:0 !important;

    padding:0 !important;

    justify-self:start !important;

    align-self:center !important;
}


/*
|--------------------------------------------------------------------------
| SVG
|--------------------------------------------------------------------------
*/


.ams-category-check-row
> .ams-filter-category-icon{
    grid-column:2 !important;

    grid-row:1 !important;

    width:24px !important;

    height:24px !important;

    margin:0 !important;

    padding:0 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    justify-self:center !important;

    align-self:center !important;

    background:transparent !important;
}


.ams-category-check-row
.ams-filter-svg{
    width:18px !important;

    height:18px !important;

    display:block !important;
}


/*
|--------------------------------------------------------------------------
| Category name
|--------------------------------------------------------------------------
*/


.ams-category-check-row
> .ams-filter-category-name{
    grid-column:3 !important;

    grid-row:1 !important;

    width:100% !important;

    min-width:0 !important;

    margin:0 !important;

    padding:0 !important;

    justify-self:stretch !important;

    text-align:left !important;

    overflow:hidden !important;

    white-space:nowrap !important;

    text-overflow:ellipsis !important;

    color:#324966 !important;

    font-size:11.75px !important;

    line-height:31px !important;

    font-weight:550 !important;
}


/*
|--------------------------------------------------------------------------
| Count — force it into same row
|--------------------------------------------------------------------------
*/


.ams-category-check-row
> b{
    grid-column:4 !important;

    grid-row:1 !important;

    width:42px !important;

    margin:0 !important;

    padding:0 !important;

    justify-self:end !important;

    align-self:center !important;

    display:block !important;

    text-align:right !important;

    white-space:nowrap !important;

    color:#657791 !important;

    font-size:10.5px !important;

    line-height:31px !important;

    font-weight:550 !important;

    font-variant-numeric:
        tabular-nums;
}


/*
|--------------------------------------------------------------------------
| Selected category
|--------------------------------------------------------------------------
*/


.ams-category-check-row:has(
    input:checked
)
.ams-filter-category-name{
    color:#095fcf !important;

    font-weight:750 !important;
}


.ams-category-check-row:has(
    input:checked
)
.ams-filter-category-icon{
    color:#106de8 !important;
}


.ams-category-check-row:has(
    input:checked
)
> b{
    color:#0e68df !important;

    font-weight:700 !important;
}


/* ========================================================= */
/* NORMAL FILTER ROWS */
/* ========================================================= */


.ams-check-row:not(
    .ams-category-check-row
){
    min-height:25px !important;

    font-size:11.75px !important;

    line-height:1.35 !important;
}


.ams-check-row:not(
    .ams-category-check-row
)
input{
    width:17px !important;

    height:17px !important;
}


.ams-check-row:not(
    .ams-category-check-row
)
b{
    font-size:10.5px !important;
}


/* ========================================================= */
/* PRICE FILTER */
/* ========================================================= */


.ams-price-inputs{
    gap:9px !important;
}


.ams-price-inputs input{
    height:42px !important;

    padding:
        0 11px !important;

    font-size:11px !important;
}


.ams-price-presets{
    gap:5px !important;
}


.ams-price-presets button{
    min-height:28px !important;

    padding:
        0 8px !important;

    font-size:9px !important;
}


.ams-filter-apply{
    min-height:40px !important;

    height:40px !important;

    margin-top:11px !important;
}


/* ========================================================= */
/* LOCATION + DATE */
/* ========================================================= */


.ams-location-search{
    height:44px !important;
}


.ams-location-search select{
    font-size:11.5px !important;
}


.ams-distance-options{
    gap:8px !important;
}


.ams-distance-options label{
    min-height:20px !important;

    font-size:11px !important;
}


/* ========================================================= */
/* RESULTS TOOLBAR */
/* ========================================================= */


.ams-results-toolbar{
    min-height:70px !important;
}


.ams-results-toolbar h2{
    font-size:27px !important;

    line-height:1.1 !important;
}


.ams-results-toolbar p{
    margin-top:5px !important;

    font-size:12.5px !important;
}


.ams-sort-area{
    gap:9px !important;
}


.ams-sort-area select{
    min-width:170px !important;

    height:46px !important;

    font-size:11.5px !important;
}


.ams-view-button{
    min-height:46px !important;

    height:46px !important;
}


/* ========================================================= */
/* SPONSORED BANNER */
/* ========================================================= */


.ams-sponsored-banner{
    min-height:250px !important;

    border-radius:15px !important;

    margin:
        4px 0 18px !important;
}


.ams-sponsored-copy{
    padding:
        22px 26px 17px !important;
}


.ams-sponsored-copy h3{
    font-size:27px !important;
}


.ams-sponsored-copy p{
    max-width:540px !important;

    font-size:12px !important;
}


.ams-sponsored-copy > strong{
    height:45px !important;

    font-size:11.5px !important;
}


.ams-sponsored-benefits{
    left:26px !important;

    bottom:16px !important;

    gap:18px !important;

    font-size:9px !important;
}


.ams-sponsored-image{
    min-height:250px !important;
}


/* ========================================================= */
/* RESULT GRID */
/* ========================================================= */


.ams-listing-grid{
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        )
        !important;

    gap:17px !important;
}


.ams-card{
    border-radius:13px !important;

    overflow:hidden !important;
}


.ams-card-image{
    height:220px !important;

    background:
        #edf2f7 !important;
}


.ams-card-image img{
    width:100% !important;

    height:100% !important;

    object-fit:cover !important;

    object-position:center !important;
}


.ams-card-body{
    padding:
        14px 15px 15px !important;
}


.ams-card-title{
    min-height:22px !important;

    font-size:14.5px !important;

    line-height:1.35 !important;

    font-weight:750 !important;
}


.ams-card-subtitle{
    min-height:18px !important;

    font-size:11px !important;
}


.ams-card-price{
    margin-top:10px !important;

    font-size:19.5px !important;
}


.ams-card-meta{
    font-size:10.5px !important;
}


/* ========================================================= */
/* LIST VIEW WIDTH */
/* ========================================================= */


.ams-list-card{
    grid-template-columns:
        330px
        minmax(0,1fr)
        235px
        !important;

    min-height:220px !important;
}


.ams-list-image,
.ams-list-image img{
    min-height:220px !important;
}


/* ========================================================= */
/* PAGINATION */
/* ========================================================= */


.ams-pagination-row{
    min-height:82px !important;
}


.ams-pagination a,
.ams-pagination span{
    width:41px !important;

    height:41px !important;
}


/* ========================================================= */
/* APP STRIP */
/* ========================================================= */


.am-app-strip{
    padding:
        33px 0 50px !important;
}


.am-app-grid{
    gap:26px !important;
}


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


.am-footer{
    padding:
        30px 0 !important;
}


/* ========================================================= */
/* WIDE DESKTOP */
/* ========================================================= */


@media(min-width:1600px){

    .am-container{
        width:
            min(
                1480px,
                calc(100% - 48px)
            )
            !important;
    }


    .ams-results-layout{
        grid-template-columns:
            305px
            minmax(0,1fr)
            !important;
    }

}


/* ========================================================= */
/* LAPTOP */
/* ========================================================= */


@media(max-width:1250px){

    :root{
        --am-container:1180px !important;
    }


    .am-container{
        width:
            calc(100% - 34px)
            !important;
    }


    .am-header{
        width:
            calc(100% - 24px)
            !important;
    }


    .ams-results-layout{
        grid-template-columns:
            270px
            minmax(0,1fr)
            !important;
    }


    .ams-sidebar{
        width:270px !important;
    }


    .ams-card-image{
        height:190px !important;
    }


    .ams-list-card{
        grid-template-columns:
            270px
            minmax(0,1fr)
            205px
            !important;
    }

}


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


@media(max-width:900px){

    .am-container{
        width:
            calc(100% - 28px)
            !important;
    }


    .ams-results-layout{
        grid-template-columns:
            1fr
            !important;
    }


    .ams-sidebar{
        width:100% !important;
    }


    .ams-filter-options{
        grid-template-columns:
            1fr 1fr;
    }


    .ams-filter-options
    .ams-category-check-row{
        grid-template-columns:
            18px
            24px
            minmax(0,1fr)
            38px
            !important;
    }


    .ams-listing-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )
            !important;
    }

}


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


@media(max-width:600px){

    .am-container{
        width:
            calc(100% - 20px)
            !important;
    }


    .ams-search-title-row h1{
        font-size:31px !important;
    }


    .ams-filter-options{
        grid-template-columns:
            1fr;
    }


    .ams-category-check-row{
        min-height:33px !important;
    }


    .ams-listing-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )
            !important;

        gap:10px !important;
    }


    .ams-card-image{
        height:145px !important;
    }


    .ams-card-title{
        font-size:12px !important;
    }


    .ams-card-price{
        font-size:16px !important;
    }

}