/*
Theme Name: Minisite-VGA
Theme URI: ViralGarab.top
Author: ViralGrab App
Author URI: ViralGarab.top
Description: Minisite Tema untuk Jualan Produk
Version: 1.20
Text Domain: minisite-vga
*/

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500&family=Fuzzy+Bubbles&family=Sacramento&family=Mynerve&family=Playwrite+PL:wght@300&display=swap');

/* CSS Variables */
:root {
    /* Body Text */
    --body-font-family: Lexend, sans-serif;
    --body-font-size: 16px;
    --body-line-height: 1.6;
    --body-font-weight: 400;

    /* Headings */
    --heading-font-family: Lexend, sans-serif;
    --heading-font-weight: 500;
    --heading-line-height: 1.2;

    /* Heading Sizes */
    --h1-font-size: 40px;
    --h2-font-size: 32px;
    --h3-font-size: 28px;
    --h4-font-size: 24px;
    --h5-font-size: 20px;
    --h6-font-size: 16px;
}

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========== RESPONSIVE WooCommerce 1 Product ============ */
@media (max-width: 768px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
      display: block !important; /* Paksa layout block */
  }

  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
      width: 100% !important;  /* Paksa produk ambil 100% lebar */
      max-width: 100% !important; /* Buang had 43% */
      float: none !important; /* Pastikan produk tidak bersebelahan */
      clear: both !important; /* Reset susunan */
      display: block !important;
      margin: 0 auto !important; /* Tengah-kan produk */
  }

  /* Jika tema guna flex/grid */
  .woocommerce ul.products {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
  }

  /* Buang margin dan padding tambahan */
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
      margin: 0px !important;
      padding: 10px !important;
  }

  /* Pastikan gambar produk tidak terlalu kecil atau besar */
  .woocommerce ul.products li.product img,
  .woocommerce-page ul.products li.product img {
      width: 100% !important;
      height: auto !important;
      max-width: 100% !important;
  }

  /* Pastikan harga dan teks tidak menyebabkan layout terpecah */
  .woocommerce ul.products li.product .price,
  .woocommerce-page ul.products li.product .price {
      display: block !important;
      font-size: 16px !important;
      text-align: center !important;
  }

  /* Pastikan butang Add to Cart memenuhi lebar produk */
  .woocommerce ul.products li.product .button,
  .woocommerce-page ul.products li.product .button {
      width: 100% !important;
      display: block !important;
      text-align: center !important;
  }
}



/* add to cart addon */
.custom-add-to-cart {
  margin-top: 20px !important;
  text-align: center;
}


.add_to_cart_button .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button {
  background-color: #ff0000; /* Warna latar belakang merah */
  font-size: 28px; /* Ukuran font 28px */
  width: 40%; /* Lebar tombol 36% dari kontainer */
  padding: 15px; /* Padding di semua sisi tombol */
  color: #FFFFFF; /* Warna teks putih */
  border-style: dashed; /* Gaya border dashed */
  border-width: 0px 2px 0px 2px;
  border-color: #ffecec;
  text-align: center; /* Teks di tengah */
  display: inline-block; /* Menjaga tombol tetap pada satu baris */
  text-decoration: none; /* Menghilangkan garis bawah */
  box-sizing: border-box; /* Menghitung padding dalam ukuran tombol */
  padding-top: 30px; /* Padding atas tombol */
  padding-bottom: 30px; /* Padding bawah tombol */
}

.add_to_cart_button .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:hover {
  background-color: #a00000; /* Warna latar belakang merah lebih gelap saat hover */
  transform: scale(1.05); /* Membesarkan tombol sedikit saat hover */
  color: #FFFFFF;
}




/* butang overide */
.woocommerce form button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    font-size: 16px !important;
    line-height: 28px !important;
    padding: 8px 16px !important;
    min-height: 44px !important;
    width: auto !important;
    border: unset !important;
    border-radius: 4px !important;
    outline-color: rgb(84 105 212 / 0.5) !important;
    color: #ffffff !important;
    background-color: #2575fc !important;
    border: 0 !important;
    display: inline-block !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}





.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
  border: none !important;
  padding: 20px;
  margin: 2em 0;
  text-align: left;
  border-radius: 5px;
}

/* ============style pada chackout custom============== */
/* ============================= */
/*  Order Summary Custom Styling */
/* ============================= */

/* .wc-block-cart__submit {
  margin: 0 0 16px !important;
  position: relative !important;
  background-color: #84486f !important;
  text-decoration: none !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
} */

/* .wc-block-cart__submit :hover {
  margin: 0 0 16px !important;
  position: relative !important;
  background-color: #5c2d4b !important;
  text-decoration: none !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
} */


body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) {
  min-height: 3em;
  COLOR: #ffffff;
  text-decoration: #ffffff;
  background-color: #84486f !important;
  border-radius: 100px;
}

body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) :hover {
  COLOR: #ffbc03;
  background-color: #84486f !important;

}

.woocommerce_checkout_place_order {
  COLOR: #ffffff;
  float: right;
  background-color: #7f84486f54b3 !important;
}
.woocommerce_checkout_place_order :hover {
  COLOR: #ffbc03!important;
}


.woocommerce #payment #place_order, .woocommerce-page #payment #place_order{
  float: none !important;
  COLOR: #ffffff;
  text-decoration: #ffffff;
  background-color: #84486f !important;
  font-size: 20px !important;
  PADDING: 20px 30px 20px 30px ! IMPORTANT;
  border-radius: 100px !important;
}


.woocommerce-page {
  text-align: center !important;
  .woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
    float: none !important;
    COLOR: #ffffff;
    text-decoration: #ffffff;
    background-color: #84486f !important;
    font-size: 20px !important;
    PADDING: 20px 30px 20px 30px ! IMPORTANT;
    border-radius: 100px !important;
}
}



#add_payment_method #payment div.form-row, .woocommerce-cart #payment div.form-row, .woocommerce-checkout #payment div.form-row {
  padding: 1em;
  text-align: center !important;
}




form input[type="radio"] {
  width: 18px !important;
  box-shadow: none !important;
}

/* Wrapper utama */
.custom-order-summary {
  border: 2px solid #e1e1e1;
  padding: 20px;
  border-radius: 12px;
  background: #f9f9f9;
}

/* Produk dalam ringkasan pesanan */
.order-summary-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  padding: 12px 15px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 10px;
}

/* Nama produk */
.product-name {
  font-weight: bold;
  color: #333;
  flex-grow: 1;
}

/* Input jumlah produk */
.quantity-input {
  width: 60px;
  text-align: center;
  border: 2px solid #ddd;
  padding: 5px;
  border-radius: 6px;
  font-size: 16px;
  margin-right: 10px;
  transition: all 0.3s ease-in-out;
}

.quantity-input:focus {
  border-color: #0071a1;
  box-shadow: 0 0 8px rgba(0, 113, 161, 0.5);
}

/* Tombol Remove Product */
.remove-item {
  display: inline-block;
  padding: 8px 15px;
  background: linear-gradient(135deg, #ff4b4b, #ff0000);
  color: white;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 6px rgba(255, 0, 0, 0.2);
}

.remove-item:hover {
  background: linear-gradient(135deg, #cc0000, #990000);
  box-shadow: 0 6px 12px rgba(255, 0, 0, 0.4);
  transform: scale(1.05);
}



/* addon */
.empty-cart-message {
  text-align: center;
  padding: 20px;
  border: 2px dashed #ddd;
  background-color: #f9f9f9;
  margin-top: 20px;
}

.empty-cart-message p {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.recommended-products .product-list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 0;
  margin-top: 15px;
}

.recommended-products .product-item {
  text-align: center;
  padding: 10px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.recommended-products .product-item:hover {
  transform: translateY(-5px);
}

.recommended-products .product-item a {
  text-decoration: none;
  color: inherit;
}

.recommended-products .product-item img {
  max-width: 100px;
  height: auto;
  border-radius: 6px;
}


/* shop page 2 product */
.woocommerce ul.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}


/* Guna ini sahaj untukoveride !important woocommerce */
/* :root .woocommerce ul.products li.product,
:root .woocommerce-page ul.products li.product {
  width: 44% !important;

} */


:root .yith-wcaf-registration-form .login-form, .yith-wcaf-registration-form .register-form {
 padding: 0px 0px !important;
}

/* widget emty hide */
.footer-widgets:empty {
  display: none;
}



/*  login page my account */
.woocommerce-account .woocommerce-MyAccount-content {
  float: right;
  width: 68%;
  padding: 50px 0px 50px 0px !important;
  background-color: #f7e5ff !important;;
}

.footer-widget-area {
  background: #f8f8f8;
  padding: 20px;
  margin-top: 20px;
  text-align: center;
}

.footer-widget-area .widget {
  display: inline-block;
  max-width: 100%;
  padding: 10px;
}

.widget-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}


/* widget styling*/
/* .widget {
  background: #f8f8f8;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
} */

/* .widget-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
} */

/*
.site-content {
  max-width: 100%;
  padding: 20px;
  box-sizing: border-box;
} */

/* .widget-area {
  max-width: 100%;
}

.widget {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
} */


.sidebar {

  width: 30% !important;
  padding: 50px 0px 50px 0px !important;
  background-color: #f7e5ff !important;

}




/* ====================ENDstyle pada chackout custom========================= */

/* addtocart depan pada shop */
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button {
  background-color: #ff0000; /* Warna latar belakang merah */
  font-size: 15px; /* Ukuran font 28px */
  width: 150px; /* Lebar tombol 36% dari kontainer */
  padding: 15px; /* Padding di semua sisi tombol */
  color: #FFFFFF; /* Warna teks putih */
  border-style: dashed; /* Gaya border dashed */
  border-width: 0px 2px 0px 2px;
  border-color: #ffecec;
  text-align: center; /* Teks di tengah */
  display: inline-block; /* Menjaga tombol tetap pada satu baris */
  text-decoration: none; /* Menghilangkan garis bawah */
  box-sizing: border-box; /* Menghitung padding dalam ukuran tombol */
  padding-top: 10px; /* Padding atas tombol */
  padding-bottom: 10px; /* Padding bawah tombol */
}

/* start download pada tq page selepas payment */
.woocommerce-order-download {
  text-align: center;
  background: #f9f9f9;
  padding: 20px;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.woocommerce-order-download h2 {
  font-size: 22px;
  color: #333;
  margin-bottom: 10px;
}

.woocommerce-order-download p {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
}

.download-button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #fff !important;
  background: linear-gradient(135deg, #2575fc, #6a11cb);
  border: none;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.download-button:hover {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  transform: scale(1.05);
}

/* End */






/* ================Mobile Menu Styeling===================== */

/* --- 🔹 FOOTER MENU (BOTTOM NAVIGATION) --- */
/* 🔹 SEMBUNYIKAN MENU DI DESKTOP 🔹 */
@media screen and (min-width: 1025px) {
  .mobile-header, .mobile-footer {
      display: none !important;
  }
}

/* 🔹 HEADER MENU MOBILE 🔹 */
.mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #7D466F;
  padding: 15px;
  color: white;
  font-size: 20px;
  padding: 0 20px; /* Padding kiri & kanan */
  z-index: 9999; /* Pastikan sentiasa di atas elemen lain */
  width: 100%;
        height: 60px;
        position: fixed;
        top: 0;
        left: 0;
}
.mobile-header .menu-toggle {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

/* 🔹 FOOTER MENU MOBILE MODERN 🔹 */
/* 🔹 FOOTER MENU MOBILE MODERN 🔹 */
.mobile-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #7D466F;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    z-index: 9999;
    height: 60px;
    margin-bottom: -7px;
    box-shadow: 0 -2px 10px #797979; /* Efek bayangan untuk tampilan modern */
}

.footer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  text-decoration: none;
  font-size: 12px; /* Ukuran teks lebih kecil untuk tampilan bersih */
  transition: all 0.3s ease; /* Efek transisi halus */
}

.footer-item2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 10px; /* Ukuran teks lebih kecil untuk tampilan bersih */
  transition: all 0.3s ease; /* Efek transisi halus */
}

.footer-item i {
  font-size: 22px; /* Ukuran ikon sedikit lebih besar */
  margin-bottom: 5px;
  transition: transform 0.3s ease, color 0.3s ease; /* Efek hover ikon */
}

.footer-item2 i {
  font-size: 30px; /* Ukuran ikon sedikit lebih besar */
  margin-bottom: 5px;
  color: #ffffff;
  transition: transform 0.3s ease, color 0.3s ease; /* Efek hover ikon */
}


.footer-item:hover i,
.footer-item.active i {
  color: #FFD700; /* Warna ikon saat hover atau aktif */
  transform: scale(1.2); /* Ikon membesar saat hover */
}

.footer-item:hover span {
  color: #FFD700; /* Warna teks saat hover */
}

/* 🔹 STYLING TOMBOL TENGAH (MENU KE-3) 🔹 */
.footer-item2.focus {
  position: relative;
    transform: translateY(-15px);
    width: 80px !important;
    height: 80px !important;
    FONT-VARIANT: JIS78;
    border-radius: 50%;
    /* background-color: #7C376B; */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgb(124, 55, 107);
    transition: all 0.3s ease;
    margin-bottom: -20px;

    border-radius: 50%; /* Bentuk bulat */
    background: rgba(124, 55, 107, 0.2);
    backdrop-filter: blur(10px); /* Efek blur di belakang elemen */
    border: 1px solid rgba(124, 55, 107, 0.2); /* Border tipis semi-transparan */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan ringan */
    transition: all 0.3s ease; /* Efek transisi halus */
}

.footer-item.focus span {
  font-size: 14px; /* Ukuran teks */
  font-weight: bold; /* Tebal teks */
  color: #7D466F; /* Warna teks default */
  transition: color 0.3s ease; /* Efek transisi warna teks */
}

.footer-item.focus:hover {
  background-color: #FFA500; /* Warna latar belakang tombol tengah saat hover */
  transform: scale(1.1); /* Tombol membesar saat hover */
}

.footer-item.focus:hover span {
  color: #FFFFFF; /* Warna teks saat hover */
}

/* 🔹 RESPONSIVE DESIGN 🔹 */
@media only screen and (max-width: 768px) {
  .footer-item {
      font-size: 10px; /* Ukuran teks lebih kecil untuk mobile */
  }

  .footer-item i {
      font-size: 20px; /* Ukuran ikon lebih kecil untuk mobile */
  }

  .footer-item.focus {
      width: 50px; /* Lebar tombol bulat lebih kecil untuk mobile */
      height: 50px; /* Tinggi tombol bulat lebih kecil untuk mobile */
  }

  .footer-item.focus span {
      font-size: 12px; /* Ukuran teks lebih kecil untuk mobile */
  }

  :root .elementor-12 .exad-button-wrapper .exad-button-action {
    background-color: #000000;
    font-size: 28px;
    width: 100% !important;
    padding: 15px 15px 15px 15px;
    color: #FFFFFF;
    border-style: dashed;
    border-width: 0px 3px 0px 3px;
    border-color: #FF0003;

  }

  :root .elementor-12 .elementor-element img{
    width: 60%;
    PADDING-BOTTOM: 20PX;
  }
}
/* END Menu Footer Mobile Modern */





/* ====================MENU HEADER========================== */
          /* ======= MENU TOGGLE HEADER ======= */
 /* ======= MENU TOGGLE HEADER ======= */
/* 🔹 MOBILE HEADER STYLING 🔹 */
.mobile-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #7D466F; /* Warna latar belakang header */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  z-index: 9999; /* Pastikan header di atas elemen lain */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Efek bayangan untuk tampilan modern */
}

/* 🔹 LOGO CENTERED AND CLICKABLE 🔹 */
.logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* Pusatkan logo secara horizontal */
  font-size: 18px;
  font-weight: bold;
  color: #FFFFFF; /* Warna teks logo */
  text-decoration: none;
}

.logo a {
  color: #FFFFFF; /* Warna teks logo */
  text-decoration: none; /* Hilangkan garis bawah pada link */
  transition: color 0.3s ease; /* Efek hover halus */
}

.logo a:hover {
  color: #ffacd3; /* Warna teks logo saat hover */
}

/* 🔹 MENU TOGGLE BUTTON 🔹 */
.menu-toggle {
  background: none;
  border: none;
  color: #FFFFFF; /* Warna ikon hamburger */
  font-size: 24px;
  cursor: pointer;
  transition: color 0.3s ease; /* Efek hover halus */
}

.menu-toggle:hover {
  color: #ffffff; /* Warna ikon hamburger saat hover */
}

/* 🔹 DESKTOP MENU STYLING 🔹 */
.desktop-nav {
  display: block;
}

.header-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-menu li {
  position: relative;
  margin: 0 15px;
}

.header-menu a {
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff; /* Warna teks menu */
  padding: 12px 18px;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}

.header-menu a:hover {
  background: #5E3C6F; /* Warna hover */
  transform: translateY(-2px);
  border-bottom: 1px solid #9a65b5;
}

/* 🔹 MOBILE NAVIGATION MENU 🔹 */
.mobile-nav {
  position: fixed;
  top: 60px; /* Letak di bawah header */
  left: 0;
  width: 100%;
  background-color: #7D466F; /* Warna latar belakang menu */
  color: #FFFFFF; /* Warna teks menu */
  display: none; /* Menu disembunyikan secara default */
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  z-index: 9998;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Efek bayangan untuk tampilan modern */
}

.mobile-menu2 {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.mobile-menu2 li {
  margin: 10px 0;
  text-align: center;
}

.mobile-menu2 a {
  color: #FFFFFF; /* Warna teks menu */
  text-decoration: none;
  font-size: 16px;
  padding: 10px 20px;
  display: block;
  transition: color 0.3s ease; /* Efek hover halus */
}

.mobile-menu2 a:hover {
  color: #FFD700; /* Warna teks menu saat hover */
}

/* ========= MEDIA QUERIES ========== */

/* ✅ HIDE DESKTOP MENU ON MOBILE & TABLETS */
@media (max-width: 1024px) {
  .header-menu {
      display: none !important; /* Sembunyikan menu desktop */
  }

  .mobile-menu2 {
      display: block !important; /* Tampilkan menu mobile */
  }
}

/* ✅ HIDE MOBILE MENU ON DESKTOP */
@media (min-width: 1025px) {
  .mobile-menu2 {
      display: none !important; /* Sembunyikan menu mobile */
  }
}

          /* =========== SHORTCODE HEADER MENU ============ */
          /* --- 🔹 HEADER MENU MODERN & ELEGAN 🔹 --- */
          .header-menu {
            display: flex;
            justify-content: center;
            align-items: center;
            background: #7D466F;
            padding: 15px;
            border-radius: 10px;
            list-style: none;
            text-transform: uppercase;
          }

          .menu-container {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            top: 410px;
            justify-content: center;
            border-radius: 10px;
            z-index: 999;
          }

          /* Styling untuk UL (menu items) */
          .header-menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex; /* Buat menu horizontal */
            gap: 30px; /* Jarak antara item menu */
          }

          /* Styling untuk setiap LI (menu item) */
          .header-menu li {
            position: relative;
          }

          /* Styling untuk LINK */
          .header-menu a {
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            color: #ffffff; /* Warna teks menu */
            padding: 12px 18px;
            border-radius: 5px;
            transition: all 0.3s ease-in-out;
          }

          /* Hover Effect */
          .header-menu a:hover {
            background: #5E3C6F; /* Warna hover */
            transform: translateY(-2px);
            border-bottom: 1px solid #9a65b5;
          }

          /* Active (Current Page) */
          .header-menu .current-menu-item a {
            background: #5E3C6F;
            border-bottom: 1px solid #9a65b5;
          }

          /* --- 🔹 DROPDOWN MENU 🔹 --- */
          /* Styling Menu Utama */
/* Styling Menu Utama */
.header-menu {
  background-color: #7D466F;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.header-menu ul li {
  position: relative;
}

.header-menu ul li a {
  text-decoration: none;
  color: #FFFFFF;
  padding: 12px 20px;
  display: block;
  transition: background 0.3s ease-in-out;
  width: 100%; /* Membuat lebar background dan hover sama */
}

.header-menu ul li a:hover, .header-menu ul li a.active {
  background-color: #7D466F;
}

/* Styling Submenu */
.header-menu ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #7D466F;
  display: none; /* Submenu disembunyikan secara default */
  z-index: 1000;
}

.header-menu ul li:hover > ul {
  display: block; /* Menampilkan submenu saat hover */
}

.header-menu ul li ul li {
  width: 100%;
  position: relative;
}

.header-menu ul li ul li a {
  padding: 10px 15px;
  display: block;
}

.header-menu ul li ul li a:hover {
  background-color: #7D466F;
}

/* Styling Submenu Level 2 dan 3 */
.header-menu ul li ul li ul {
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #7D466F;
  display: none; /* Submenu level 2 dan 3 disembunyikan secara default */
  z-index: 1000;
}

.header-menu ul li ul li:hover > ul {
  display: block; /* Menampilkan submenu level 2 dan 3 saat hover */
}



          /* --- 🔹 RESPONSIVE (Mobile View) 🔹 --- */
          @media screen and (max-width: 768px) {
            .header-menu {
                flex-direction: column;
                padding: 10px;
            }

            .header-menu ul {
                flex-direction: column;
                gap: 10px;
            }

            .header-menu li {
                text-align: center;
            }

            .header-menu li ul {
                position: static;
                display: none;
                box-shadow: none;
            }

            .header-menu li:hover > ul {
                display: block;
            }
          }


/* ====================END MENU HEADER====================== */


/* =========== RESPONSIVE DESIGN ============ */
@media only screen and (max-width: 768px) {
  .mobile-header {
      padding-top: 0px !important; /* Pastikan padding atas 0px hanya untuk mobile */
  }

  .mobile-footer {
      padding-bottom: 10px; /* Pastikan ada sedikit padding untuk footer agar tidak terlalu rapat */
  }

  body {
      margin-top: 30px !important; /* Pastikan keseluruhan badan halaman tidak mempunyai margin atas */
  }


}

/* 🔹 PASTIKAN MENU MOBILE VISIBLE PADA PORTRAIT MODE 🔹 */
@media only screen and (orientation: portrait) and (max-width: 768px) {
  .mobile-header,
  .mobile-footer {
      display: flex !important;
  }
}



/* style my-account start */
/* ========== MY ACCOUNT PAGE STYLING ========== */

/* Wrapper utama */
.woocommerce-account {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
}

/* Notifikasi WooCommerce */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
}

.woocommerce-message {
  background-color: #e3fcef;
  border-left: 4px solid #34c759;
  color: #2c662d;
}

.woocommerce-info {
  background-color: #eef5ff;
  border-left: 4px solid #2575fc;
  color: #2a4d85;
}

.woocommerce-error {
  background-color: #fdecea;
  border-left: 4px solid #e3342f;
  color: #7a1f1f;
}

/* ========== LOGIN & REGISTER FORM ========== */
.woocommerce form {
  background: #fff;
  padding: 20px !important;
  border-radius: 5px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1) !important;

}

/* Input field */
.woocommerce form .form-row input {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Tombol Submit */
.woocommerce form button {
  width: 100%;
  background-color: #2575fc;
  color: #fff;
  padding: 12px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.woocommerce form button:hover {
  background-color: #1a5fc4;
}


/* Paksa overide dengan css kita walau woo sudang menggunakan !important */
body.woocommerce-page .woocommerce ul.products li.product,
body.woocommerce .woocommerce-page ul.products li.product {

    width: 44% !important;

}

.woocommerce-ordering {
  /* float: right; */
  display: none !important;
}
.woocommerce-result-count {
  /* float: right; */
  display: none !important;
}

/* mobile */
@media (max-width: 1024px) {

  body.woocommerce-page .woocommerce ul.products li.product,
  body.woocommerce .woocommerce-page ul.products li.product {
      float: none !important;
      margin: 0 auto !important;
      padding: 25px !important;
      width: 90% !important;
      background-color: #f3eeff !important;
  border: 5px solid #ffffff !important;
  outline: dashed 1px #6944ff;
}
/* Desktop */
body .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  /* float: left !important;
  margin: 0 3.8% 2.992em 0 !important;
  padding: 20px !important;
  position: relative !important; */
  width: auto !important;
  /* background-color: #f3eeff !important;
  border: 5px solid #ffffff !important;
  outline: dashed 1px #6944ff; */
}

}
/* ===========END=============== */


/* ===========Order summary============= */
.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
  font-size: 12px !important;


}
h3 .wc-block-components-order-summary-item__description {
  font-size: 14px !important;
  font-weight: 500 !important;



}




/* ========== DASHBOARD & NAVIGATION ========== */

/* Navigasi My Account */
.woocommerce-MyAccount-navigation {
  background: #F7E5FF;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-MyAccount-navigation ul li {
  margin-bottom: 10px;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 10px;
  color: #2575fc;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s, color 0.3s;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  background: #2575fc;
  color: #fff;
}

/* ========== ORDER TABLE ========== */
.woocommerce-MyAccount-content table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.woocommerce-MyAccount-content table th,
.woocommerce-MyAccount-content table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

.woocommerce-MyAccount-content table th {
  background: #2575fc;
  color: #fff;
}

/* Responsive */
@media (max-width: 600px) {
  .woocommerce form button {
      font-size: 14px;
      padding: 10px;
  }

  .woocommerce form .form-row input {
      font-size: 12px;
      padding: 8px;
  }
}

/* style my-account end */

/* Tambah style butang addtocart dan explore features plus icon font awsome */

/* Untuk Input Text */
form .input-text {
  font-size: 16px;
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 4px;
  outline-color: rgb(84 105 212 / 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

/* Untuk Input Text */
form input[type="text"] {
    font-size: 16px;
    line-height: 28px;
    padding: 8px 16px;
    width: 100%;
    min-height: 44px;
    border: unset;
    border-radius: 4px;
    outline-color: rgb(84 105 212 / 0.5);
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}



/* Untuk Input url2 */
input {
  font-size: 16px;
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 4px;
  outline-color: rgb(84 105 212 / 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

/* Untuk Textarea */
form textarea {
  font-size: 16px;
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 4px;
  outline-color: rgb(84 105 212 / 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

/* Untuk Dropdown (select) */
form select {
  font-size: 16px;
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 4px;
  outline-color: rgb(84 105 212 / 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

/* Untuk Dropdown (select) */
.select2-selection__rendered {
  font-size: 16px;
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 4px;
  outline-color: rgb(84 105 212 / 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

/* Untuk Radio Buttons */
form input[type="radio"] {
  width: auto;
  height: auto;
  padding: unset;
  margin: 0 5px;
  border: unset;
  border-radius: 50%;
  outline-color: rgb(84 105 212 / 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

/* Untuk Checkbox */
form input[type="checkbox"] {
  width: 20px;
  height: 20px;
  padding: unset;
  margin: 0 5px;
  border: unset;
  border-radius: 4px;
  outline-color: rgb(84 105 212 / 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

.woocommerce form .form-row input[type="checkbox"],
.woocommerce input[type="checkbox"] {
    width: 20px !important;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 0px !important
}




/* Untuk Button */
form button {
  font-size: 16px;
  line-height: 28px;
  padding: 8px 16px;
  min-height: 44px;
  width: auto;
  border: unset;
  border-radius: 4px;
  outline-color: rgb(84 105 212 / 0.5);

  color: #ffffff !important;
  background-color: #2575fc;
  border: 0;
  display: inline-block;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
}

form button:hover {
  background-color: #0942a3 !important;
  text-decoration: none;
  background-image: none;
  color: #c1d8ff !important;
}

/* Untuk File Input */
form input[type="file"] {
  font-size: 16px;
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 4px;
  outline-color: rgb(84 105 212 / 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

/* Untuk Email Input */
form input[type="email"] {
  font-size: 16px;
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 4px;
  outline-color: rgb(84 105 212 / 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

/* Untuk Date Picker */
form input[type="date"] {
  font-size: 16px;
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 4px;
  outline-color: rgb(84 105 212 / 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

/* Untuk Quantity Input (Number Input) */
form input[type="number"] {
  font-size: 16px;
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 4px;
  outline-color: rgb(84 105 212 / 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  -moz-appearance: textfield; /* Untuk menghilangkan spinner di Firefox */
}

form input[type="number"]::-webkit-outer-spin-button,
form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.woocommerce input.button {
  font-size: 100%;
  margin: 0;
  line-height: 1;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  overflow: visible;
  padding: .618em 1em;
  font-weight: 700;
  border-radius: 3px;
  left: auto;
  color: #ffffff;
  background-color: #2575fc;
  border: 0;
  display: inline-block;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
}


.woocommerce input.button:hover {
  background-color: #124aa9;
  text-decoration: none;
  background-image: none;
  color: #e7e7e7;
}


/* Body Styles */
body {
    font-family: var(--body-font-family) !important;
    font-size: var(--body-font-size) !important;
    line-height: var(--body-line-height) !important;
    font-weight: var(--body-font-weight) !important;

    background: linear-gradient(to right, var(--gradient-start, #4B366F), var(--gradient-end, #8A4A6F)) !important;
}

/* Heading Styles */
h1, h2, h3, h4, h5, h6 {
    margin: 1em 0 !important;
}

h1 {
    font-family: var(--h1-font-family, var(--heading-font-family)) !important;
    font-weight: var(--h1-font-weight, var(--heading-font-weight)) !important;
    line-height: var(--h1-line-height, var(--heading-line-height)) !important;
    font-size: var(--h1-font-size) !important;
    margin: 1em 0 !important;
}

h2 {
    font-family: var(--h2-font-family, var(--heading-font-family)) !important;
    font-weight: var(--h2-font-weight, var(--heading-font-weight)) !important;
    line-height: var(--h2-line-height, var(--heading-line-height)) !important;
    font-size: var(--h2-font-size) !important;
    margin: 1em 0 !important;
}

h3 {
    font-family: var(--h3-font-family, var(--heading-font-family)) !important;
    font-weight: var(--h3-font-weight, var(--heading-font-weight)) !important;
    line-height: var(--h3-line-height, var(--heading-line-height)) !important;
    font-size: var(--h3-font-size) !important;
    margin: 1em 0 !important;
}

h4 {
    font-family: var(--h4-font-family, var(--heading-font-family)) !important;
    font-weight: var(--h4-font-weight, var(--heading-font-weight)) !important;
    line-height: var(--h4-line-height, var(--heading-line-height)) !important;
    font-size: var(--h4-font-size) !important;
    margin: 1em 0 !important;
}

h5 {
    font-family: var(--h5-font-family, var(--heading-font-family)) !important;
    font-weight: var(--h5-font-weight, var(--heading-font-weight)) !important;
    line-height: var(--h5-line-height, var(--heading-line-height)) !important;
    font-size: var(--h5-font-size) !important;
    margin: 1em 0 !important;
}

h6 {
    font-family: var(--h6-font-family, var(--heading-font-family)) !important;
    font-weight: var(--h6-font-weight, var(--heading-font-weight)) !important;
    line-height: var(--h6-line-height, var(--heading-line-height)) !important;
    font-size: var(--h6-font-size) !important;
    margin: 1em 0 !important;
}

/* Customizer Controls */
#heading-select {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
    font-size: 14px;
}

.customize-control {
    display: none;
}

.customize-control.active {
    display: block;
}

/* Main Container */
.container {
    max-width: 990px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Header Alignment */
.site-header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    margin-bottom: -10px;
}

/* Footer Alignment */
.site-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

.header-image, .footer-image {
    max-width: 100%;
    height: auto;
    /* transform: scale(1.3); */
}

.site-branding {
    margin-top: 20px;
    text-align: center;
    display: none;
}

.entry-header {
    display: none;
}

/* Body Background Image */
body {
    background-image: url('images/body-loop.png');
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 990px auto;
}

/* Add your custom styles here */

/* Content */
.site-content {
    max-width: 987px !important;
    margin: 0 auto !important;
    padding: 5px 90px 20px 90px !important;
    position: relative;
    z-index: 2;
    margin-top: -50px;
    padding-top: 70px;
    background-position: center !important;
    background-repeat: repeat-y !important;
    /* box-shadow: 0 0 10px rgba(0,0,0,0.1) !important; */
    background: url('images/body-loop.png') !important;
    background-blend-mode: overlay;
    min-height: calc(100vh - 485px); /* 430px header + 55px footer */
}







/* ========override woocommerce style========== */
/* Override WooCommerce styles */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: left !important;
  margin: 0 3.8% 2.992em 0 !important;
  padding: 20px !important;
  position: relative !important;
  /* width: 200px !important; */
  background-color: #f3eeff !important;
  border: 5px solid #ffffff !important;
  outline: dashed 1px #6944ff;
}

.woocommerce ul.products li.product .onsale {
  top: 0;
  right: 0;
  left: auto;
  margin: -25px -25px 0 0 !important;
  color: #ffffff !important;
  background-color: #ff0000 !important;
  padding: 10px 15px 10px 15px !important;
}

.woocommerce span.onsale {
  min-height: 3.236em;
  min-width: 3.236em;
  padding: .202em;
  font-size: 1em;
  font-weight: 700;
  position: absolute;
  text-align: center;
  line-height: 3.236;
  top: -.5em;
  left: -.5em;
  margin: 0;
  border-radius: 100%;
  color: #ffffff !important;
  background-color: #ff0000 !important;
  padding: 10px 15px 10px 15px !important;
  font-size: .857em;
  z-index: 9;

  display: none;
  }

.woocommerce ul.products li.product .price ins {
  background: 0 0 !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #ff0202 !important;
  display: inline-block;
}

/* .woocommerce ul.products li.product .button {
  display: inline-block !important;
  margin-top: 1em !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
} */


.custom-product-description {
  margin: -60px 0 0 0 !important;
}


/* Sembunyikan height yang diatur oleh WooCommerce */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    height: none !important;
}
/* ======== END override woocommerce style========== */


/* Pusatkan butang dalam produk */
.custom-button-wrapper {
  display: flex;
  justify-content: center; /* Pusatkan butang */
  align-items: center;
  gap: 15px; /* Jarak antara butang */
  margin-top: 10px;
}

/* Gaya butang Explore Features */
.explore-button {
  background-color: #ff9800; /* Warna oren */
  color: #ffffff;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px; /* Jarak antara ikon dan teks */
}

/* Hover effect */
.explore-button:hover {
  background-color: #e68900;
}

/* Gaya butang Add to Cart */
.add-to-cart-button {
  background-color: #2575fc; /* Warna biru */
  color: #ffffff;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hover effect untuk Add to Cart */
.add-to-cart-button:hover {
  background-color: #1a5fc4;
}

/* Pastikan ikon Font Awesome sejajar */
.explore-button i,
.add-to-cart-button i {
  font-size: 16px;
}

/* =========== Kotak Harga & Butang ============ */
.product-action-box {
  border: 1px solid #ffffff; /* Garis putih */
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  border-radius: 5px;
  background: #e2d7ff; /* Warna latar */
}

/* =========== Harga Produk ============ */
/* Gaya harga promosi */
.product-action-box .product-price ins {
  font-size: 22px !important;  /* Harga promosi lebih besar */
  font-weight: bold;
  color: #000000 !important; /* Warna hitam */
  display: inline-block;
  margin-right: 5px;
}

/* Gaya harga asal (harga lama yang dicoret) */
.product-action-box .product-price del {
  font-size: 14px !important;  /* Harga asal lebih kecil */
  color: #8d8c8c !important; /* Warna kelabu */
  display: inline-block;
  margin-left: 5px;
  text-decoration: line-through;
  border: 1px solid;
    border-radius: 4px;
    display: inline-block;
}

/* Buang garisan tebal pada harga promosi */
.product-action-box .product-price ins span {
  text-decoration: none !important;
}

/* =========== Butang Explore Features & Add to Cart ============ */
.product-action-box .button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  gap: 8px; /* Jarak ikon & teks */
}

/* Butang Explore Features */
.explore-button {
  background-color: #ff9800;
  color: #ffffff;
}

.explore-button:hover {
  background-color: #e68900;
}

/* Butang Add to Cart */
.add-to-cart-button {
  background-color: #2575fc;
  color: #ffffff;
}

.add-to-cart-button:hover {
  background-color: #1a5fc4;
}

/* Pastikan ikon Font Awesome sejajar */
.product-action-box .button i {
  font-size: 16px;
  display: inline-block;
  margin-right: 5px;
}

/* =========== Sembunyikan Elemen Asal WooCommerce ============ */
/* Sembunyikan harga asal */
.woocommerce ul.products li.product .price {
  display: none !important;
}

/* Sembunyikan butang "Add to Cart" asal */
.woocommerce ul.products li.product .add_to_cart_button {
  display: none !important;
}




/* Tetapkan ketinggian tetap untuk teks pendek */
.custom-short-description {
  font-size: 12px !important; /* Tetapkan saiz teks 12px */
  color: #333; /* Warna teks */
  line-height: 1.5; /* Jarak antara baris */
  height: 3em; /* Hadkan teks kepada 3 baris sahaja */
  overflow: hidden; /* Sembunyikan teks yang lebih panjang */
  text-overflow: ellipsis; /* Tambahkan "..." jika teks terlalu panjang */
  /* white-space: nowrap; =Pastikan teks dalam satu baris */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Hadkan kepada 3 baris */
  -webkit-box-orient: vertical;

  margin-top: -30px;
  padding-bottom: 60px;
}

/* Pastikan .product-action-box berada di bahagian bawah */
.product-action-box {
  margin-top: auto; /* Pastikan ia turun ke bawah */
}




/* Default style untuk semua perangkat */
.video {
  height: 380px; /* Tinggi otomatis untuk mobile */
  width: 100%; /* Lebar penuh */
  background-color: #f0f0f0; /* Contoh warna latar belakang */
  padding: 20px; /* Padding opsional */
  box-sizing: border-box; /* Memastikan padding tidak memengaruhi lebar/tinggi */
}


/* Responsive Typography */
@media (max-width: 768px) {
:root {
    --body-font-size: 14px;
    --h1-font-size: 32px;
    --h2-font-size: 28px;
    --h3-font-size: 24px;
    --h4-font-size: 20px;
    --h5-font-size: 18px;
    --h6-font-size: 16px;
}
/* Mobile Header and Footer */
      .site-header, .site-footer {
        max-width: 100%;
        padding: 0px 15px 0 0;
      }

      .header-image img {
        width: 100%;
        height: auto;
        /* max-height: 100px; */
        /* margin-left: -30px; */

      }

      .footer-image img {
        width: 100%;
        height: auto;
        /* max-height: 100px; */
        margin-left: -30px;
        /* margin-top:-20px */

      }

      .site-branding {
          margin-top: 10px;
      }


    .video {
      height: auto; /* Tinggi tetap 360px  */
        }

        /* Responsive content */
    .site-content {
      margin: -30px 0px -30px 0px !important;
      padding: 30px 20px 20px 20px !important;
      position: relative;
      z-index: 2;
      margin-top: -50px;
      padding-top: 70px;
      background-position: center !important;
      background-repeat: repeat-y !important;
      /* box-shadow: 0 0 10px rgba(0,0,0,0.1) !important; */
      background: #ffffff !important;
      background-blend-mode: overlay;
      min-height: calc(100vh - 485px); /* 430px header + 55px footer */
    }
}


/* body.loaded .loader {
  display: none !important;
} */







/* Preloader Container */
.preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ff7eb3, #ff758c);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out;
}

/* Loader Animasi */
.loader {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-top: 5px solid #ff3d00;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Keyframes untuk Rotasi */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Sembunyikan Preloader Setelah Halaman Siap */
.preloader.hidden {
  opacity: 0;
  pointer-events: none;
}