@import url(daftarproduct.css);
@import url(text.css);



.text-saran {
     color: #910f0f;
}
.kode {
     font-size: 16px;
     color: #508b9e;
}

.thumbnailImageDetail {
     object-fit:cover;
     height: 100px;
     width: 100px;
}
.discount {
     font-size: 13px;
     color: black;
     text-decoration: line-through;
}
.price {
     font-weight: bold;
     font-size: 25px;
}


.order-product-now a {
     padding: 10px;
     text-align: center;
     display: block;
     font-size: 14px;
}

.order-product-now a:hover {
     cursor: pointer;
     background: #000;
     color: #f60;
}

.order-now  {
     background:#333333;
     color: white;
     padding: 10px;
     text-align: center;
     display: block;
}

.order-now:hover {
     cursor: pointer;
     background: #000;
     color: #f60;
}

.add-to-cart  {
     border: 1px solid #333333;
     color: #333333;
}

.whatsapp  {
     background: #24CC63;
     color: white;
}

.harganonmember {
     font-size: 11px;
     color: #0e9488;
}

.heading {
     font-size: 30px;
     font-weight: 300;
     border-bottom: 1px solid #eeeeee;
     margin-top: 30px;
}

.details-container {
     background: #f6f6f6;
}





.kolom-qty-order {
     grid-gap:2%;
}

.qty-order {
     grid-template-columns: 1fr auto;
     align-items: center;
}

#sizeBanyakContainer {
     display:none;
}

.gambardetail-container {
    margin: 20px auto;
}
.thumbnailImageDetail {
     object-fit:cover;
     height: 150px;
     width: 150px;
}

.pilih-size {
     display: grid;
     grid-gap:20px;
}

@media (max-width: 740px){
    .gambardetail-container {
        width: 97vw;
    }
    .gambardetail {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
     .image-detail {
          display: grid;
          grid-gap:10px;
          grid-template-columns: 1fr 1fr 1fr;
     }

     .order-now {font-size: 14px;}

     .pilih-size-container  {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          grid-gap:5px;
     }

     .pilih-size {
          grid-template-columns: 1fr 1fr;
     }

}
@media (min-width: 741px){
     .pilih-size {
          grid-template-columns: 1fr 1fr 1fr 1fr;
     }


    .gambardetailgrid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    .gambardetailflex {
        display: flex;
    }
     .order-now {font-size: 18px;}

     .pilih-size div {
          display: inline;
          margin-right: 10px;
     }
     .pilih-size li {
          display: inline;
          margin-right: 10px;
     }

     .image-detail a {
          display: inline;
          padding: 10px;
     }


}
