/**
* Theme Name: Umimo Child
* Description: This is a child theme of Umimo, generated by Merlin WP.
* Author: <a href="https://pavothemes.com/">Pavothemes Team</a>
* Template: umimo
* Version: 1.2.9
*/

/*.sale-perc {
   background-color: #ffffff;
   display: inline;
   padding: .2em .6em .3em;
   font-size: 75%;
   font-weight: bold;
   color:#FF0000;
   text-align: center;
   border-radius: .25em;
	position: absolute;
  top: 30px;
	margin-left: 10px;
}*/

/* =========================================
   HERO SECTION - FINAL (Image Fix + New Button Style)
   ========================================= */

/* 1. Wrapper Utama (Layout Gambar Tetap Sama) */
.hero-native {
    position: relative;
    width: 100vw;
    
    /* Layout Image Responsif (Sesuai kode Anda sebelumnya) */
    aspect-ratio: 1920 / 800;
    max-height: 600px;
    min-height: 500px;

    display: flex;
    align-items: flex-end; /* Konten di bawah */
    justify-content: center; /* Konten di tengah */
    overflow: hidden;
    
    /* Breakout Full Width */
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* 2. Gambar Background */
.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    object-position: center center;
}

/* 3. Container Konten */
.hero-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    
    /* POSISI TOMBOL: Jarak dari bawah */
    /* Sesuaikan % ini jika tombol terlalu naik/turun */
    padding-bottom: 3%; 
    padding-left: 10%;
    padding-right: 5%;
    
    pointer-events: none; /* Agar klik tembus ke gambar (kecuali di tombol) */
}

.hero-content {
    display: flex;
    justify-content: flex-end; /* Posisi Tombol: TENGAH */
    width: 100%;
    pointer-events: auto; /* Aktifkan klik di area tombol */
}

/* 4. STYLE TOMBOL BARU (Sesuai Gambar WhatsApp) */
.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Dimensi & Bentuk */
    padding: 12px 45px; /* Lebar dan Tinggi tombol */
    border-radius: 25px; /* Pill Shape (Bulat lonjong) */
    
    /* Typography */
    font-family: var(--e-global-typography-primary-font-family, sans-serif);
    font-size: 24px;
    font-weight: 700; /* Bold */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    
    /* WARNA NORMAL (Sesuai Request) */
    background-color: #FF3A2D; /* Merah Spesifik */
    color: #ffffff; /* Teks Putih */
    border: 1px solid #FF3A2D; /* Border Merah */
    
    /* Efek Bayangan Halus */
    box-shadow: 0 4px 15px rgba(255, 58, 45, 0.3);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

/* 5. HOVER EFFECT (Sesuai Request) */
.hero-btn:hover {
    background-color: #ffffff; /* Jadi Putih */
    color: #000000; /* Teks Jadi Hitam */
    border: 1px solid #FF3A2D; /* Border Tetap Merah */
    
    /* Opsional: Border Emas jika mau */
    /* border-color: #D9B25A; */ 
    
    transform: translateY(-3px); /* Naik sedikit */
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* =========================================
   RESPONSIVE (Mobile)
   ========================================= */
@media screen and (max-width: 767px) {
    .hero-native {
        /* Mobile: Ubah jadi kotak agar gambar tidak terlalu kecil */
        aspect-ratio: 1/1; 
        min-height: 400px;
        align-items: flex-end !important; /* Tombol di tengah vertikal pada HP */
    }

    .hero-container {
        padding-bottom: 10% !important;
        padding-left: 20% !important;
   	    padding-right: 45% !important; /* Reset jarak bawah di HP */
    }
    
    .hero-bg-image {
        /* Geser fokus gambar di HP (jika perlu) */
        object-position: 85% center; 
    }

    .hero-btn {
        padding: 8px 21px;
        font-size: 12px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    
    /* Mengatur ulang posisi gambar di Tablet */
    .hero-bg-image {
        /* Format: object-position: [Posisi Horizontal] [Posisi Vertikal]; */
        
        /* Contoh: 70% berarti gambar geser agak ke kiri agar bagian kanan terlihat */
        object-position: 70% center !important; 
    }

    /* Menyesuaikan posisi tombol di iPad jika perlu */
    .hero-container {
        padding-right: 18%; /* Sesuaikan lagi khusus iPad */
        padding-bottom: 5%;
    }
	
	.hero-btn {
		font-size: 18px;
	}
}

.diskon-persentase {
    position: absolute;
    top: 10px;
    left: 10px;
    /*background: #ff4d4d;*/
	/*background: #fff;*/
	/*opacity: 0.5;*/
	/*font-size: 8px;*/
	background: transparent;
    color: #ff4d4d;
    padding: 5px 10px;
    font-weight: bold;
    border-radius: 5px;
    z-index: 99;
}
/*.woocommerce-billing-fields .required {
    display: none;
}*/

/* Hide Company Name */
.woocommerce-billing-fields #billing_company_field {
    display: none !important;
}

/* Hide Country / Region */
.woocommerce-billing-fields #billing_country_field {
    display: none !important;
}

/* Hide Street Address (both line 1 and 2) */
.woocommerce-billing-fields #billing_address_1_field,
.woocommerce-billing-fields #billing_address_2_field {
    display: none !important;
}

/* Hide Postcode / ZIP */
.woocommerce-billing-fields #billing_postcode_field {
    display: none !important;
}


.myWooSlider .swiper-button-next,
.myWooSlider .swiper-button-prev {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.1); /* abu2 transparan */
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease;
}

.myWooSlider .swiper-button-next:hover,
.myWooSlider .swiper-button-prev:hover {
  background: #000; /* hitam kontras saat hover */
  color: #fff;
}

/* kecilkan icon panah */
.myWooSlider .swiper-button-next::after,
.myWooSlider .swiper-button-prev::after {
  font-size: 16px;
}



.myWooSlider .product-item {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.myWooSlider .product-item img {
  transition: transform 0.3s ease;
}

.myWooSlider .product-item:hover img {
  transform: scale(1.05);
}

/* contoh jika mau munculin add to cart button pas hover */
.myWooSlider .product-item .button {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.myWooSlider .product-item:hover .button {
  opacity: 1;
}