.produk-expired {
    background: #FFF6F1;
    padding: 15px 10px;
    text-align: center;
    width: 100%;
    text-align: center;
    z-index: 100;
}
.produk-expired div {
    display: flex;
}
.produk-expired div ul{
    padding: 0px 5px;
}
.produk-expired div ul li:nth-child(1) {
    font-size: 16px;
}
.produk-expired div ul li:nth-child(2) {
    font-size: 10px;
}




.produk-container {
     grid-gap: 20px;
}

.produk {
     background-color: black;
     position:relative;
     overflow: hidden;
     transition: border 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
     color: white;
}

.produk:hover {
     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.produk .produk-badge {
     z-index: 1;
     top: 10px;
     left: 10px;
     display: flex;
     gap: 10px;
}

.produk .produk-badge div {
     font-size: 12px;
     display: inline-flex;
     padding: 5px 10px;
     z-index: 1;
     top: 10px;
     color: white;
     gap: 3px;
}

.produk .produk-hot {
     background-color: red;
}

.produk .produk-sale {
     background-color: #02a7a3;  
}

.produk .produk-sold {
     padding: 10px 20px;
     background-color: red;
     color: white;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 3;
     border-radius: 5px;
     box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
     -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
     -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
}


.produk .gambar-produk-container {
     overflow:hidden;
}

.produk .gambar-produk {
     overflow:hidden;
}




@media (max-width: 740px){
	.produk .gambar-produk {
          height: 200px;
          width: 200px;
     }
}
@media (min-width: 741px){
	.produk .gambar-produk {
		height: 300px;
          width: 300px;
	}
}

.produk .gambar-produk:hover {
     -webkit-transform:scale(1.2);transform:scale(1.2);
     opacity: 0.5;
     filter: alpha(opacity=50);
}
.produk .gambar-produk{
     -webkit-transition: all 0.7s ease;transition: all 0.7s ease;
}

.produk .produk-keterangan {
     padding: 20px;
}

.produk .produk-keterangan .kode {
     font-size: 10px;
}
.produk .produk-keterangan h3 {
     margin: 0px 0px 10px 0px;
}

.produk:hover h3 {
     color: #e50012;
}
.produk .produk-harga-non-member {
     font-size: 13px;
     color: #0079e8;
}

.produk .produk-harga {
     font-size: 18px;
     font-weight: 900;  
}
.produk .produk-discount {
     font-size: 13px;
     color: red;
     text-decoration: line-through;
}

.produk-tombol-grid {
     grid-template-columns: 1fr 1fr;
     padding: 10px;
}

.produk .produk-tombol-grid a,.produk .produk-tombol-grid div {
     display: flex;
     padding: 10px;
     text-align: center;
     font-size: 11px;
     align-items: center;
     justify-content: center;
}

.produk-tombol-grid i {
     font-size: 15px;
     margin-right: 5px;
}

.produk .produk-tombol-grid div {
     color:white;
     background: #f1f1f1;
     cursor: pointer;
     background-color: #e50012;  
}

.produk .produk-tombol-grid div:hover {
     background-color: black;  
}

.produk .produk-tombol-grid a {
     color:#fff;
     background: #333;
}
.produk .produk-tombol-grid a:hover {
     background: #e50012;
}

.size-container {
     display: none;
     font-size: 12px;
}


.size-container button {
  align-items: center;
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: .25rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  display: inline-flex;
  font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.25;
  margin: 0;
  min-height: 3rem;
  padding: calc(.875rem - 1px) calc(1.5rem - 1px);
  position: relative;
  text-decoration: none;
  transition: all 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  width: 100%;
}

.size-container button:hover,
.size-container button:focus {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
  color: rgba(0, 0, 0, 0.65);
}

.size-container button:hover {
  transform: translateY(-1px);
}

.size-container button:active {
  background-color: #F0F0F1;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
  color: rgba(0, 0, 0, 0.65);
  transform: translateY(0);
}

.text-warna-tersedia {
     font-size: 14px;
}

.kotak-warna {
     height: 25px;
     width:  25px;
}
.kotak-warna:hover {
     cursor: pointer;
}
.active-warna::before {
     content: "X";
}

.size-banyak {display: none;}
.show-size-banyak {display: block;}


@media (max-width: 740px)
{
     .produk-container  {
          grid-template-columns:1fr 1fr;
     }

     .produk .produk-keterangan h3 {
          font-size: 13px;
     }
     .size-container button {
          padding: 10px;
     }
}
@media (min-width: 741px)
{
     .produk .produk-keterangan h3 {
          font-size: 18px;
     }
	.produk-container  {
          grid-template-columns:1fr 1fr 1fr 1fr;
     }
     .size-container li {
          border: none;
          float: left;
          margin: 0px 5px 5px 0px;
     }
     .size-container button {
          padding: 5px 10px;
     }
}