.products-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:32px;

    margin-top:60px;

}

.product-card{

    position:relative;

    aspect-ratio:3/4;

    overflow:hidden;

    border-radius:20px;

    background:#2A2A22;

    transition:.3s;

}

.product-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 45px rgba(0,0,0,.18);

}

.product-card__link{

    position:absolute;

    inset:0;

    z-index:1;

    display:block;

    text-decoration:none;

}

.product-card__image{

    position:absolute;

    inset:0;

}

.product-card__image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s;

}

.product-card:hover .product-card__image img{

    transform:scale(1.05);

}

.product-card__placeholder{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:52px;

    background:#f7f7f5;

}

.product-card__overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(180deg, rgba(20,20,15,.05) 40%, rgba(20,20,15,.85) 100%);

}

.product-card__info{

    position:absolute;

    left:20px;

    right:20px;

    bottom:18px;

}

.product-card__title{

    margin:0 0 6px;

    color:#fff;

    font-size:18px;

}

.product-card__price{

    display:block;

    color:#fff;

    font-size:20px;

    font-weight:700;

}

.product-card__add{

    position:absolute;

    right:16px;

    bottom:16px;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    transition:background .2s ease, transform .2s ease;

}

.product-card__add:hover{

    background:var(--primary-hover);

    transform:scale(1.08);

}

.product-card__add svg{

    width:20px;

    height:20px;

}

.product-card__add.loading{

    opacity:.6;

    pointer-events:none;

}

.product-card__add.added{

    background:var(--primary-hover);

}

.product-card__add.added svg{

    display:none;

}

.product-card__add.added::after{

    content:"✓";

    font-size:18px;

    font-weight:700;

}

.shop-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:40px 0;

}

.shop-results{

    color:var(--text-light);

    font-size:15px;

}

.shop-ordering form{

    margin:0;

}

.shop-ordering select{

    padding:12px 18px;

    border:1px solid var(--border);

    border-radius:12px;

    background:#fff;

    font-size:15px;

    cursor:pointer;

}

@media (max-width:1100px){

    .products-grid{

        grid-template-columns:repeat(3,minmax(0,1fr));

    }

}

@media (max-width:820px){

    .products-grid{

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

        gap:22px;

        margin-top:40px;

    }

    .product-card__title{

        font-size:16px;

    }

    .product-card__price{

        font-size:18px;

    }

    .shop-toolbar{

        flex-direction:column;

        align-items:stretch;

        gap:18px;

    }

    .shop-ordering select{

        width:100%;

    }

}

@media (max-width:520px){

    .products-grid{

        grid-template-columns:1fr;

    }

}