/* Base styles (mobile-first) */
/* By default yeh styles 0px se apply hote hain */
@media (max-width: 319px) {
  html{
      font-size:10px;
  }
  .ProList li{
      width: 45% !important;
  }
  .product-card{
      padding: 15px 9px !important;
  }
  .card-image img{
    width: 85px !important;
    height: 85px !important;
  }
  .card-details{
          padding: 4px 0 !important;
  }
  .card-details p{
        margin: 7px 0 !important;
            font-size: 10px !important;
  }
}

/* Small phones (very small devices, up to 320px) */
@media (min-width: 320px) and (max-width: 320px) {
  html{
      font-size:10px;
  }
  .ProList li{
      width: 47% !important;
  }
  .product-card{
      padding: 15px 9px !important;
  }
  .card-image img{
    width: 85px !important;
    height: 85px !important;
  }
  .card-details{
          padding: 4px 0 !important;
  }
  .card-details p{
        margin: 7px 0 !important;
            font-size: 11px !important;
  }
}

/* Medium phones (321px to 375px) */
@media (min-width: 321px) and (max-width: 375px) {
  html{
      font-size: 11.7188px;
  }
  .ProList li{
      width: 47% !important;
  }
  .product-card{
      padding: 15px 8px !important;
  }
  .card-image img{
    width: 85px !important;
    height: 85px !important;
  }
  .card-details{
          padding: 4px 0 !important;
  }
  .card-details p{
        margin: 7px 0 !important;
        font-size: 12px !important;
  }
}

/* Large phones (376px to 425px) */
@media (min-width: 376px) and (max-width: 425px) {
  html{
      font-size: 13.2812px;
  }
  .ProList li{
      width: 47% !important;
  }
  .product-card{
      padding: 15px 9px !important;
  }
  .card-image img{
    width: 85px !important;
    height: 85px !important;
  }
  .card-details{
          padding: 4px 0 !important;
  }
  .card-details p{
        margin: 7px 0 !important;
        font-size: 13px !important;
  }
}

/* Tablets (426px to 768px) */
@media (min-width: 426px) and (max-width: 768px) {
   html{
      font-size: 15px;
  }
  .ProList li{
      width: 48% !important;
  }
  .product-card{
      padding: 15px 9px !important;
  }
  .card-image img{
    width: 85px !important;
    height: 85px !important;
  }
  .card-details{
          padding: 4px 0 !important;
  }
  .card-details p{
        margin: 7px 0 !important;
        font-size: 13px !important;
  }
}

/* Small laptops (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  html{
      font-size: 15px;
  }
  .ProList li{
      width: 48% !important;
  }
  .product-card{
      padding: 15px 9px !important;
  }
  .card-image img{
    width: 85px !important;
    height: 85px !important;
  }
  .card-details{
          padding: 4px 0 !important;
  }
  .card-details p{
        margin: 7px 0 !important;
        font-size: 13px !important;
  }
}

/* Laptops and Desktops (1025px to 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
  html{
      font-size: 15px;
  }
  .ProList li{
      width: 48% !important;
  }
  .product-card{
      padding: 15px 9px !important;
  }
  .card-image img{
    width: 85px !important;
    height: 85px !important;
  }
  .card-details{
          padding: 4px 0 !important;
  }
  .card-details p{
        margin: 7px 0 !important;
        font-size: 13px !important;
  }
}


/* Large screens and TVs (1441px and above) */
@media (min-width: 1441px) {
  html{
      font-size: 15px;
  }
  .ProList li{
      width: 48% !important;
  }
  .product-card{
      padding: 15px 9px !important;
  }
  .card-image img{
    width: 85px !important;
    height: 85px !important;
  }
  .card-details{
          padding: 4px 0 !important;
  }
  .card-details p{
        margin: 7px 0 !important;
        font-size: 13px !important;
  }
}

.van-toast--success.toastBox .van-icon-success
{
    width: 36px !important;
    height: 36px !important;
}
     .goodsBuyPop {
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }

    .goodsBuyPop.active {
        transform: translateY(0%);
        display: block;
    }
    
    .van-list__finished-text {
    color: #fff !important;
}