/* =========================
   CATALOG
========================= */

.catalog-section{

    padding: 40px 60px 100px;

}

/* =========================
   FILTERS
========================= */

.catalog-filters{

    width: 100%;

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 40px;

    flex-wrap: wrap;

}

/* =========================
   SEARCH INPUT
========================= */

.catalog-filters input{

    flex: 1;

    min-width: 260px;

    height: 58px;

    border: none;

    outline: none;

    padding: 0 22px;

    border-radius: 18px;

    background: #171a21;

    color: white;

    font-size: 15px;

    border:
    1px solid rgba(255,255,255,0.05);

}

.catalog-filters input::placeholder{

    color: #8e96a3;

}

/* =========================
   SELECT
========================= */

.catalog-filters select{

    min-width: 220px;

    height: 58px;

    border: none;

    outline: none;

    padding: 0 18px;

    border-radius: 18px;

    background: #171a21;

    color: white;

    font-size: 15px;

    border:
    1px solid rgba(255,255,255,0.05);

    cursor: pointer;

}

/* =========================
   BUTTON
========================= */

.catalog-filters button{

    height: 58px;

    padding: 0 28px;

    border: none;

    border-radius: 18px;

    background: #00d9ff;

    color: black;

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

    transition: .2s;

}

.catalog-filters button:hover{

    transform: translateY(-3px);

}

/* =========================
   PRODUCTS GRID
========================= */

.products-grid{

    display: grid;

    grid-template-columns:
    repeat(auto-fill,minmax(270px,1fr));

    gap: 24px;

}

/* =========================
   PRODUCT CARD
========================= */

.product-card{

    background: #171a21;

    border-radius: 28px;

    overflow: hidden;

    text-decoration: none;

    border:
    1px solid rgba(255,255,255,0.05);

    transition: .25s;

}

.product-card:hover{

    transform: translateY(-6px);

}

.product-card-image{

    height: 300px;

    overflow: hidden;

    background: #0f1115;

}

.product-card-image img{

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .3s;

}

.product-card:hover img{

    transform: scale(1.05);

}

/* =========================
   PRODUCT INFO
========================= */

.product-card-info{

    padding: 24px;

}

.product-card-info h3{

    color: white;

    font-size: 18px;

    line-height: 1.5;

    margin-bottom: 16px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

}

.product-card-info span{

    color: white;

    font-size: 28px;

    font-weight: 800;

}

/* =========================
   EMPTY STATE
========================= */

.catalog-empty{

    width: 100%;

    padding: 80px 30px;

    border-radius: 28px;

    background: #171a21;

    border:
    1px solid rgba(255,255,255,0.05);

    text-align: center;

}

.catalog-empty h3{

    font-size: 28px;

    margin-bottom: 12px;

    color: white;

}

.catalog-empty p{

    color: #9aa3b2;

}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:700px){

    .catalog-section{

        padding-left: 16px;

        padding-right: 16px;

    }

    .catalog-filters{

        flex-direction: column;

        align-items: stretch;

    }

    .catalog-filters input,
    .catalog-filters select,
    .catalog-filters button{

        width: 100%;
        min-width: 0;

    }

    .products-grid{

        grid-template-columns:
        repeat(2, 1fr);

    }

    .product-card-image{

        height: 180px;

    }

}

/* =========================
   SEARCH RESULT
========================= */

.catalog-search-result{

    margin-top: 12px;

    color: #9aa3b2;

    font-size: 15px;

}

.catalog-search-result span{

    color: #00d9ff;

    font-weight: 700;

}

/* =========================
   MOBILE OVERFLOW FIX (Chrome)
========================= */

html, body{
    max-width: 100vw;
    overflow-x: hidden;
}

@media(max-width:400px){

    .products-grid{
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .product-card-info{
        padding: 14px;
    }

    .product-card-info h3{
        font-size: 14px;
        line-height: 1.4;
    }

    .product-card-info span{
        font-size: 20px;
    }

}