/* Minimalist design option css */

/* .rkit-product-carousel-wpc {

  display: grid;

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

  gap: 30px;

  background-color: transparent;

  justify-content: center;

} */



/* @media only screen and (max-width: 1024px) {

  .rkit-product-carousel-wpc {

    grid-template-columns: repeat(2, 1fr) !important;

  }

  .rkit-product-carousel-wpc-pro {

    grid-template-columns: repeat(2, 1fr) !important;

  }

}



@media only screen and (max-width: 767px) {

  .rkit-product-carousel-wpc {

    grid-template-columns: auto !important;

  }

  .rkit-product-carousel-wpc-pro {

    grid-template-columns: auto !important;

  }

} */



.rkit-icon-readmore-wpc {

  align-content: center;

}



.rkit-product-card-wpc {

  background-color: #ffffff;

  /* border: 1px solid #e0e0e0; */

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  padding-bottom: 10px;

  position: relative;

  height: min-content;

  width: -webkit-fill-available;

  display: flex;

  flex-direction: column;

}



.rkit-addcart-wrap-button-wpc::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 50%;

  width: 0;

  height: 2px;

}



.rkit-product-card-wpc:hover {

  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);

}



.rkit-product-image-wpc {

  position: relative;

  overflow: hidden;

}



.rkit-product-image-wpc img {

  width: 100%;

  height: auto;

  object-fit: cover;

  transition: all 0.3s ease;

  display: block;

}



.rkit-product-image-wpc:hover img {

  transform: scale(1.1);

  filter: brightness(40%);

}

/* 

.rkit-product-image-wpc:hover::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: #575555;

  opacity: 0.3;

  transition: width 0.6s ease;

  z-index: 0;

} */



.rkit-product-details-wpc {

  padding: 16px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.rkit-product-info-wpc {

  display: flex;

  flex-direction: column;

  flex: 1 0 50%;

  width: 100%;

}



.rkit-product-title-wpc {

  font-size: 18px;

  font-weight: 600;

  color: #333333;

  margin: 0;

  text-wrap: wrap;

  text-wrap-style: stable;

}



.rkit-product-category-wpc {

  font-size: 14px;

  color: #888888;

  margin-top: 4px;

}



.rkit-product-price-wpc {

  font-size: 18px;

  font-weight: 600;

  color: #333333;

}



.rkit-product-feat-wpc {

  display: flex;

  flex-direction: column;

  justify-content: right;

  /* text-align: end; */

  align-self: self-start;

}



.rkit-addcart-wrap-button-wpc {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, 30px);

  opacity: 0;

  visibility: hidden;

  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;

}



.rkit-product-image-wpc:hover .rkit-addcart-wrap-button-wpc {

  transform: translate(-50%, -50%);

  opacity: 1;

  visibility: visible;

  z-index: 99;

  justify-content: center;

  display: flex;

  width: 100%;

}



.rkit-addcart-button-wpc {

  /* display: inline-block; */

  display: flex;

  gap: 10px;

  padding: 12px 24px;

  background-color: #ffffff;

  color: #000000;

  text-align: center;

  font-size: 16px;

  font-weight: 600;

  position: relative;

  transition: background-color 0.3s ease;

}



.rkit-addcart-button-wpc span {

  position: relative;

  display: inline-block;

}



.rkit-addcart-button-wpc span::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 0%;

  height: 2px;

  background-color: #000000;

  transition: width 0.6s ease;

  z-index: 999;

}



.rkit-product-image-container {

  overflow: hidden;

}



.rkit-product-image-wpc:hover span::after {

  width: 100%;

}



.rkit-product-rating-wpc {

  font-size: 14px;

  color: #f5c518;

  display: flex;

}



/* ribbon */

.rkit-product-ribbon-wpc {

  position: absolute;

  /* top: 10px;  */

  background-color: #ff0000;

  /* Warna background ribbon */

  color: #fff;

  /* Warna teks */

  padding: 5px 15px;

  font-size: 12px;

  font-weight: bold;

  z-index: 10;

  border-radius: 0px;

  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */

}



.rkit-product-card-wpc {

  position: relative;

}



/* =============================================divider======================================================= */



/* profesional design css layout 2 */



/* .rkit-product-carousel-wpc-pro {

  overflow: hidden;

} */



.rkit-product-card-wpc-pro {

  border-radius: 20px 20px 20px 20px;

  /* background-color: transparent; */

  /* background: linear-gradient(29deg, #000000 20%, #A0A0A0 100%); */

  background-color: #a0a0a0;

  padding: 20px 20px 20px 20px;

  overflow: hidden;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  padding-bottom: 10px;

  position: relative;

  height: min-content;

  /* width: -webkit-fill-available; */

}



.rkit-product-image-wpc-pro {

  position: relative;

  overflow: hidden;

  border-radius: 20px 20px 20px 20px;

}



.rkit-product-image-wpc-pro img {

  width: 100%;

  height: auto;

  object-fit: cover;

  transition: transform 0.3s ease;

  border-radius: 20px 20px 20px 20px;

}



.rkit-product-image-wpc-pro:hover::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: transparent;

  opacity: 0.3;

  transition: width 0.6s ease;

  z-index: 1;

}



/* content */



.rkit-product-details-wpc-pro {

  padding-top: 20px;

  padding-bottom: 20px;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: flex-start;

}



.rkit-product-info-wpc-pro {

  display: flex;

  flex-direction: column;

  flex: 0 0 50%;

  width: 100%;

}



.rkit-product-title-wpc-pro {

  font-weight: 600;

  color: #ffffff;

  margin: 0;

  text-wrap: wrap;

}



.rkit-product-price-wpc-pro {

  font-size: 22px;

  font-weight: 800;

  color: #ffffff;

}



.rkit-product-feat-wpc-pro {

  display: flex;

  flex-direction: column;

  justify-content: right;

  text-align: end;

  align-self: flex-start;

}



.rkit-product-desc-wpc-pro {

  opacity: 0;

  max-height: 0;

  overflow: hidden;

  transition-delay: 2s;

  transition: max-height 0.5s ease, opacity 0.5s ease;

}



.rkit-product-text-desc-wpc-pro {

  font-size: 14px;

  font-weight: 100;

  color: #ffffff;

  text-wrap: wrap;

  text-align: center;

}



.rkit-product-card-wpc-pro:hover .rkit-product-desc-wpc-pro {

  opacity: 1;

  max-height: 200px;

}



/* button */

.rkit-addcart-wrap-button-wpc-all-pro {

  display: inline-flex;

  position: relative;

  justify-content: center;

  width: 100%;

  padding-top: 20px;

  padding-bottom: 20px;

  background-color: transparent;

}



.rkit-addcart-wrap-button-wpc-pro {

  display: flex;

  position: relative;

}



/* Gradient border wrapper */

.gradient-border {

  position: absolute;

  top: -2px;

  left: -2px;

  right: -2px;

  bottom: -2px;

  border-radius: 15px;

  background-image: linear-gradient(

    30deg,

    var(--gradient-color-one),

    var(--gradient-color-two)

  );

  background-size: 500%;

  z-index: 0;

  animation: border-ambient 3s linear infinite;

}



/* The button itself */

.rkit-addcart-button-wpc-pro {

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #00cea6;

  border-radius: 15px;

  padding: 12px 30px;

  width: 100%;

  max-width: 100%;

  font-size: 15px;

  color: white;

  position: relative;

  z-index: 1;

  transition: all 0.5s;

  overflow: hidden;

  gap: 20px;

}



.rkit-addcart-wrap-button-wpc-pro {

  width: 100%;

  margin: 0 auto;

  /* overflow: hidden;  */

}



/* Gradient animation */

@keyframes border-ambient {

  0% {

    background-position: 0% 50%;

  }



  25% {

    background-position: 50% 75%;

  }



  50% {

    background-position: 100% 50%;

  }



  75% {

    background-position: 50% 25%;

  }



  100% {

    background-position: 0% 50%;

  }

}



.rkit-product-rating-wpc-pro {

  font-size: 14px;

  color: #f5c518;

}



/* ribbon pro*/

.rkit-product-ribbon-wpc-pro {

  background-color: #00cea6;

  margin-top: 0px;

  border-radius: 0px;

  position: absolute;

  color: #fff;

  padding: 5px 15px;

  font-size: 12px;

  font-weight: bold;

  z-index: 10;

}



.rkit-product-card-wpc-pro {

  position: relative;

}



/* =============================================================================================================== */

/* premium style css layout 3 */



/* .rkit-product-carousel-wpc-prem {

  display: grid;

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

  flex-direction: row;

  gap: 16px;

  justify-content: center;

} */



.rkit-product-card-wpc-prem {

  /* width: 100%;  */

  padding: 20px;

  background-color: #d0d1d5;

  border-radius: 12px;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  text-align: center;

  position: relative;

  overflow: hidden;

  transition: all 0.3s ease-in-out;

  height: min-content;

  width: -webkit-fill-available;

}



.rkit-product-image-wpc-prem {

  position: relative;

  overflow: hidden;

  border-radius: 20px 20px 20px 20px;

}



.rkit-product-image-wpc-prem img {

  width: 100%;

  height: auto;

  object-fit: cover;

  transition: transform 0.3s ease;

  border-radius: 20px 20px 20px 20px;

}



.rkit-product-image-wpc-prem:hover::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: transparent;

  opacity: 0.3;

  transition: width 0.6s ease;

  z-index: 0;

}



.rkit-product-ribbon-wpc-prem {

  background-color: #00cea6;

  /* background: linear-gradient(305deg, #393131 0%, #00CEA6 100%); */

  margin-top: 0px;

  border-radius: 20px 20px 20px 20px;

  position: absolute;

  color: #fff;

  padding: 5px 15px;

  font-size: 12px;

  font-weight: bold;

  z-index: 10;

}



.rkit-product-details-wpc-prem {

  display: flex !important;

  flex-direction: column-reverse;

  align-content: flex-start;

  justify-content: flex-start;

  text-align: left;

  gap: 15px;

  position: relative;

  z-index: 1;

  transition: transform 0.6s ease-in-out;

  /* height : 100%; */

  max-height: min-content;

  gap: 10px;

  /* transform: translateY(60%);  */

}



.rkit-product-details-wpc-prem::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: transparent;

  opacity: 0.5;

  z-index: -1;

}



.rkit-product-info-wpc-prem {

  margin-bottom: 12px;

  flex: 0 0 50%;

  width: 100%;

}



.rkit-product-title-wpc-prem {

  font-weight: bold;

  margin: 0;

  color: #333;

  width: fit-content;

  position: relative;

  padding-bottom: 25px;

}



.rkit-product-title-wpc-prem::after {

  content: "";

  text-align: left;

  justify-content: start;

  display: block;

  width: 50%;

  border-bottom: 3px solid #000000;

  margin: 0 auto;

  position: absolute;

  left: 0;

  padding-bottom: 10px;

}



.rkit-product-feat-wpc-prem {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: start;

  align-self: flex-start;

}



.rkit-product-price-wpc-prem {

  font-size: 24px;

  font-weight: 300;

  color: #000000;

}



.rkit-product-rating-wpc-prem {

  font-size: 14px;

  color: #f4a261;

}



.rkit-product-hov-wpc-prem {

  display: flex;

  gap: 10px;

  flex-direction: row;

  width: 100%;

  /* padding-top: 10px; */

  height: min-content;

  position: relative;

  text-align: center;

  opacity: 0;

  max-height: min-content;

  overflow: hidden;

  visibility: hidden;

  /* transform: translateY(-80%);  */

  transition: max-height 0.5s ease, opacity 0.5s ease-in-out,

    transform 0.5s ease-in-out;

}



.rkit-product-card-wpc-prem:hover .rkit-product-details-wpc-prem {

  transform: translateY(-70%);

  max-height: min-content;

}



.rkit-product-card-wpc-prem:hover .rkit-product-hov-wpc-prem {

  opacity: 1;

  /* height : fit-content; */

  max-height: min-content;

  visibility: visible;

  transform: translateY(-70%);

}



.rkit-product-card-wpc-prem:hover {

  max-height: min-content;

}



.rkit-addcart-button-wpc-prem {

  display: flex;

  justify-content: center;

  background-color: #1f1f29;

  border-radius: 15px;

  padding: 10px 20px;

  font-size: 15px;

  color: #d9dade;

  position: relative;

}



.rkit-addcart-wrap-button-wpc-prem {

  display: flex;

  flex: 0 0 40%;

  align-items: center;

  width: 100%;

  margin: 0 auto;

  align-content: center;

  transition: max-height 0.5s ease, opacity 0.5s ease;

}



.rkit-addcart-wrap-button-wpc-prem span {

  display: flex;

  align-items: center;

}



.rkit-addcart-wrap-button-wpc-prem i {

  display: flex;

  align-items: center;

}



.text-button {

  display: flex;

}



.rkit-product-desc-wpc-prem {

  padding: 0px 0px 0px 0px;

  display: flex;

  flex: 0 0 60%;

  overflow: hidden;

  transition-delay: 2s;

  transition: max-height 0.5s ease, opacity 0.5s ease;

}



.rkit-product-text-desc-wpc-prem {

  font-size: 14px;

  font-weight: 100;

  color: #000000;

  text-wrap: wrap;

  text-align: left;

  max-width: 100%;

  overflow: hidden;

}



/* Styling untuk bintang */

.star-rating-wpc {

  display: inline-block;

  font-size: 20px;

  line-height: 1;

  color: #ddd;

  position: relative;

}



.star-rating-wpc span {

  display: block;

  color: #f5c518;

  overflow: hidden;

  position: absolute;

  top: 0;

  left: 0;

  white-space: nowrap;

  width: 0;

}



/* SALE PRICE */

.rkit-product-sale-price-wpc {

  color: #000000;

  font-weight: bold;

  font-size: 20px;

}



.rkit-product-sale-price-wpc-pro {

  color: #ffffff;

  font-weight: bold;

  font-size: 20px;

}



.rkit-product-sale-price-wpc-prem {

  color: #000000;

  font-weight: bold;

  font-size: 24px;

}



/* REGULAR PRICE (Jika Ada Sale Price) */

.if-sale-price-wpc {

  display: flex;

  flex-direction: row;

  align-items: flex-start;

  /* line-height: 0px; */

  gap: 2px;

  /* padding-bottom: 20px; */

}



.if-sale-price-wpc-pro {

  display: flex;

  flex-direction: row;

  align-items: center;

  /* line-height: 0px; */

  gap: 5px;

}



.if-sale-price-wpc-prem {

  display: flex;

  flex-direction: column-reverse;

}



.rkit-product-sale-price-reguler-wpc {

  color: #777;

  text-decoration: line-through;

  font-size: 14px;

  font-weight: normal;

  align-content: center;

  align-self: center;

}



.rkit-product-sale-price-reguler-wpc-pro {

  color: #ffffff;

  text-decoration: line-through;

  font-size: 16px;

  font-weight: normal;

}



.rkit-product-sale-price-reguler-wpc-prem {

  color: #777;

  text-decoration: line-through;

  font-size: 14px;

  font-weight: normal;

}



/* REGULAR PRICE (Tanpa Sale Price) */

.rkit-product-price-reguler-wpc {

  color: #333;

  font-weight: bold;

  font-size: 20px;

  text-align: start;

}



.rkit-product-price-reguler-wpc-pro {

  color: #ffffff;

  font-weight: bold;

  font-size: 20px;

  text-align: start;

}



.rkit-product-price-reguler-wpc-prem {

  color: #333;

  font-weight: bold;

  font-size: 24px;

  text-align: start;

}



.rkit-flex-absolute-woo-product-carousel {

  display: flex;

  align-items: center;

  position: absolute;

  inset: 0;

  justify-content: space-between;

  z-index: 999999;

  pointer-events: none;

}



.rkit-swiper-button-prev-woo-product-carousel {

  left: -55px;

}



.rkit-swiper-button-next-woo-product-carousel {

  right: -55px;

}



.rkit-swiper-button-next-woo-product-carousel,

.rkit-swiper-button-prev-woo-product-carousel {

  position: absolute;

  z-index: 999;

  cursor: pointer;

  pointer-events: auto;

  width: 45px;

  height: 45px;

  background-color: #f7f7f7;

  transform: translateY(0);

  color: #1f1f1f;

  display: flex;

  justify-content: center;

  align-items: center;

  transition: all 0.5s;

  border-radius: 5px;

  --swiper-navigation-size: 44px;

  --swiper-navigation-top-offset: 50%;

  --swiper-navigation-sides-offset: 10px;

}



.rkit-animation-hover-woo-product-carousel-enabled .rkit-swiper-button-next-woo-product-carousel,

.rkit-animation-hover-woo-product-carousel-enabled .rkit-swiper-button-prev-woo-product-carousel {

  opacity: 0;

  transition: all 0.5s;

  transition-delay: 0.3s;

}

.rkit-animation-hover-woo-product-carousel-enabled:hover .rkit-swiper-button-next-woo-product-carousel,

.rkit-animation-hover-woo-product-carousel-enabled:hover .rkit-swiper-button-prev-woo-product-carousel {

  opacity: 1;

   transform: translate(0, -50%);

}



.rkit-animation-hover-woo-product-carousel-enabled .rkit-swiper-button-next-woo-product-carousel {

  transform: translate(-30px, -50%);

}

.rkit-animation-hover-woo-product-carousel-enabled .rkit-swiper-button-prev-woo-product-carousel {

  transform: translate(30px, -50%);

}





.rkit-woo-product-carousel-container{

  position: relative;

  overflow: visible !important;

}



.rkit-woo-product-carousel-pagination {

  display: flex;

  flex-direction: row;

  gap: 0.5rem;

  padding: 1rem;

  justify-content: center;

  align-items: center;

}



.rkit-woo-carousel-bullet {

  width: 8px;

  aspect-ratio: 1/1;

  border-radius: 50%;

  background-color: #aaaaaa;

  transition: all 0.5s ease;

}



.rkit-woo-carousel-bullet-active {

  background-color: #161616;

}



.rkit-woo-carousel-bullet-clickable .rkit-clientcarousel-bullet {

  cursor: pointer;

}





/* 📱 Mobile */

@media (max-width: 766px) {

  .rkit-product-rating-wpc.align-end-mobile { align-self:flex-end; }

}



/* 💻 Tablet */

@media (min-width: 767px) and (max-width: 1024px) {

  .rkit-product-rating-wpc.align-end-tablet { align-self:flex-end; }

}



/* 🖥️ Desktop */

@media (min-width: 1025px) {

  .rkit-product-rating-wpc.align-end { align-self:flex-end; }

}

