/*
Theme Name: Wish Boyke Child
Theme URI: https://woocommerce.com/storefront/
Description: Child theme for Storefront
Author: Wish Boyke
Author URI: https://wishboyke.id/
Template: storefront
Version: 1.0.0
Text Domain: wishboyke-child
*/

/* Custom CSS di bawah ini */

/* Hilangkan outline saat klik mouse */
*:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Custom focus untuk keyboard (accessibility tetap aman) */
*:focus-visible {
    outline: 2px solid var(--e-global-color-accent);
    outline-offset: 2px;
}


/* ===============================
    WooCommerce ADD TO CART BUTTON
================================ */
.product-category,.onsale {
  font-family: poppins;
}
.wd-product-actions {
  display: flex;
  gap: 8px;
  width:100%;
}

.wd-product-actions .yith-wcqv-button {
  width: 40px;
  height: 40px;
  padding: 0;
  text-indent: -9999px;
  position: relative;
}

.wd-product-actions .yith-wcqv-button::before {
  content: "\f06e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  text-indent: 0;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wd-product-actions .wpcbn-btn {
  flex: 1;
}


/* align card woocommerce */
a.woocommerce-LoopProduct-link.woocommerce-loop-product__link{
	text-align:left;
}
h2.woocommerce-loop-product__title {
	color: var(--e-global-color-accent) !important;
    font-size: clamp(16px, 2vw, 20px) !important;
    line-height: 1.4;

    display: -webkit-box;
    -webkit-line-clamp: 2;      /* maksimal 2 baris */
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;
}

/* Harga produk - diskon vs normal */
.woocommerce ul.products li.product .price del span{
    color: var(--e-global-color-accent) !important;
    opacity: 1; /* opsional biar lebih soft */
}

.woocommerce ul.products li.product .price ins span,.woocommerce ul.products li.product .price ins bdi{
    color: var( --e-global-color-secondary ) !important; /* merah diskon */
    font-weight: 600;
	font-size:18px !important;
    text-decoration: none; /* hilangkan underline bawaan */
}


/* ===============================
   SALE BADGE – ELEGANT STYLE
================================ */

.woocommerce ul.products li.product {
  position: relative;
}

/* badge */
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;

  background: var( --e-global-color-secondary );
  color: #fff;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;

  padding: 8px 12px !important;
  border-radius: 20px;
  border: none;

 
  z-index: 5;
  line-height: 1;
}

/* optional: hilangkan default Woo style */
.woocommerce span.onsale {
  min-height: auto;
  min-width: auto;
}

/* Ganti Warna button woocomerce card*/
a.wpcbn-btn.wpcbn-btn-archive.button.product_type_simple.add_to_cart_button {
    background: #1d2a38;
	color: #ffffff;
	border-radius:10px;
	transition: all .3s;
}
a.wpcbn-btn.wpcbn-btn-archive.button.product_type_simple.add_to_cart_button:hover {
	background: #87ae73;
	color: #ffffff;
}

a.button.yith-wcqv-button,
a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart{
	border-radius: 10px;
	background:transparent;
	border:1px solid #1d2a38;
	transition: all .3s;
}
a.button.yith-wcqv-button:hover,
a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover{
	border-radius: 10px;
	background:#1d2a38;
	color:#ffffff;
	border:1px solid #1d2a38;
	transition: all .3s;
}

li.product.product-type-simple {
	background:#ffffff;
	padding:20px !important;
	border-radius:20px;
}
/* ===============================
   ADD TO CART RESPONSIVE WIDTH
================================ */

/* wrapper flex */
.woocommerce ul.products li.product {
  display: flex;
  flex-wrap: wrap;
}

/* default: full width */
.woocommerce ul.products li.product 
.add_to_cart_button:not(.wpcbn-btn) {
  width: 100%;
  margin-top: 4px;
}

/* ketika sudah added (dua tombol muncul) */
.woocommerce ul.products li.product 
.add_to_cart_button.added,
.woocommerce ul.products li.product 
.added_to_cart.wc-forward {
  width: 49%;
  padding: 10px !important;
}

/* rapihin posisi */
.woocommerce ul.products li.product 
.added_to_cart.wc-forward {
  text-align: center;
}

/* jarak antar tombol */
.woocommerce ul.products li.product 
.add_to_cart_button.added {
  margin-right: 6px;
}

/**/
/* ===============================
   End Woocommerce Custom CSS
================================ */