/* ■■■■ Shop Page Styles ■■■■ */

:root {
    --fs-h1: clamp(1rem, 1rem + 4vw, 1.5rem);
    --buttons-bg : rgb(0, 119, 145);
}

.main {
    width: 100%;
    padding-block: 120px 70px;
    background: var(--main-bg);
    overflow: hidden;
}
.main-container {
    max-width: 1440;
    padding: 0 20px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.breadcrumb-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.url-box p {
    font-size: 13px;
}
.page-title-2 {
    /*font-size: 20px;*/
    font-size: var(--fs-h1);
    text-align: center;
    font-family: "Vazir-Bold";
    margin-bottom: 25px;
    /*display: inline-block;*/
    padding: 8px 20px;
    /*border-bottom: 2px solid var(--buttons-bg);*/
    /*border-radius: 999px;*/
    /*position: relative;*/
    /*left: -50%;*/
    /*transform: translateX(50%);*/
}
/*.page-title::after , .page-title::before {*/
/*    content: "";*/
/*    width: 100%;*/
/*    max-width: 50%;*/
/*    height: 1.6px;*/
/*    background: var(--buttons-bg);*/
/*    position: absolute;*/
/*    bottom: 30%;*/
/*    transform: translateY(-30%);*/
/*    display: none;*/
/*}*/
/*.page-title::after {*/
/*    right: 100%;*/
/*}*/
/*.page-title::before {*/
/*    left: 100%;*/
/*}*/
.filter-button {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.filter-icon {
    width: 25px;
    height: 25px;
    fill: var(--buttons-bg);
}
.products {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 70px;
    grid-column-gap: 18px;
    align-items: center;
    justify-content: center;
    margin-top: 90px;
}
.product {
    padding: 16px;
    margin-bottom: 50px;
    border-radius: 16px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    background: var(--product-card-bg);
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.product-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    margin: -30% auto 0;
    box-shadow: 0 0 5px rgba(0,0,0,0.1) , 0 -5px 5px rgba(0,0,0,0.2);
}
.product-img-box a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
}
.product-img-box,
.product-img-box a img {
    border-top-right-radius: 14px;
    border-top-left-radius: 14px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 8px;
}
.like-button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(3px);
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
}
.like-icon {
    width: 18px;
    height: 18px;
    fill: var(--buttons-bg);
}
.info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 10px;
    padding: 10px 8px 8px;
    border-top: 1px solid var(--buttons-bg);
}
.product-title-2 {
    font-size: 16px;
    font-family: "Vazir-bold";
    padding-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-price-2 {
    font-size: 16px;
    font-weight: 600;
    align-self: flex-end;
}
.buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}
.product-info, .add-to-cart {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.add-to-cart a {
    font-size: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-info-icon, .add-to-cart-icon {
    width: 20px;
    height: 20px;
    fill: var(--buttons-bg);
}
.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.page-numbers li {
    width: 35px;
    height: 35px;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--buttons-bg);
    box-shadow: rgba(0,0,0,0.3);
    color: #fff;
}






@media screen and (min-width: 348px) {
    .products {
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: 40px;
    }
    .product {
        padding: 10px;
    }
    .info {
        gap: 20px;
    }
    .product-title-2 {
        font-size: 14px;
    }
    .product-price-2 {
        font-size: 15px;
    }
}


@media screen and (min-width: 480px) {
    .main {
        padding-top: 160px;
    }
    .url-box p {
        font-size: 16px;
    }
    .products {
        grid-row-gap: 55px;
    }
    .product {
        padding: 16px;
    }
    .info {
        gap: 16px;
    }
    .product-title-2 {
        font-size: 16px;
    }
    .product-price-2 {
        font-size: 15px;
    }
    .product-info,
    .add-to-cart {
        width: 42px;
        height: 42px;
    }
    .product-info-icon,
    .add-to-cart-icon {
        width: 25px;
        height: 25px;
    }
}


@media screen and (min-width: 588px) {
    
}


@media screen and (min-width: 768px) {
    .main {
        padding: 160px 40px;
    }
    .products {
        grid-template-columns: repeat(3, 1fr);
    }
}


@media screen and (min-width: 1024px) {
    .main {
        padding-top: 180px;
    }
}


@media screen and (min-width: 1400px) {
    .products {
        grid-template-columns: repeat(4, 1fr);
    }
}