.elementor-1548 .elementor-element.elementor-element-2da17d8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1548 .elementor-element.elementor-element-49871b6{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-1548 .elementor-element.elementor-element-680c501{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-1548 .elementor-element.elementor-element-672d29a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-widget-woocommerce-product-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1548 .elementor-element.elementor-element-4c7d5c2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-widget-woocommerce-product-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1548 .elementor-element.elementor-element-7b653f3{color:var( --e-global-color-accent );}@media(min-width:768px){.elementor-1548 .elementor-element.elementor-element-680c501{--width:100%;}.elementor-1548 .elementor-element.elementor-element-672d29a{--width:100%;}.elementor-1548 .elementor-element.elementor-element-4c7d5c2{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-1c4d865 *//* ==================================================
   1. STYLE GAMBAR PRODUK (GALLERY WIDGET ELEMENTOR)
================================================== */
.sarana-single-product .woocommerce-product-gallery {
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 15px !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important;
}

.sarana-single-product .woocommerce-product-gallery .flex-control-thumbs {
    margin-top: 15px !important;
    display: flex !important;
    gap: 10px !important;
    padding: 0 !important;
    overflow-x: auto !important; /* Mencegah thumbnail berantakan jika banyak */
}

.sarana-single-product .woocommerce-product-gallery .flex-control-thumbs li {
    width: 80px !important;
    flex-shrink: 0 !important;
    list-style: none !important;
}

.sarana-single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    border-radius: 8px !important;
    border: 2px solid transparent !important;
    transition: 0.3s ease !important;
    cursor: pointer !important;
    width: 100% !important;
    height: auto !important;
}

.sarana-single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.sarana-single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
    border-color: #F7A21B !important; /* Warna aksen oranye */
    opacity: 1 !important;
}

/* ==================================================
   2. TYPOGRAPHY (JUDUL & DESKRIPSI SINGKAT)
================================================== */
.sarana-single-product h1.product_title {
    color: #1D2A4F !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
}

.sarana-single-product .woocommerce-product-details__short-description {
    color: #475569 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
    padding-bottom: 25px !important;
    border-bottom: 1px dashed #cbd5e1 !important;
}

/* ==================================================
   3. AREA TOMBOL & INPUT QTY (SANGAT UI/UX FRIENDLY)
================================================== */
.sarana-single-action-wrap {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
}

.sarana-qty-box {
    margin-bottom: 20px !important;
}

.sarana-qty-box .qty-label {
    display: block !important;
    font-weight: 700 !important;
    color: #1D2A4F !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
}

/* Group Input Qty yang Estetik */
.qty-input-group {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: 0.3s !important;
}
.qty-input-group:focus-within {
    border-color: #1D2A4F !important;
    box-shadow: 0 0 0 3px rgba(29, 42, 79, 0.1) !important;
}

.qty-input-group .qty-btn {
    background: #f1f5f9 !important;
    border: none !important;
    width: 45px !important;
    height: 45px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #1D2A4F !important;
    cursor: pointer !important;
    transition: 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.qty-input-group .qty-btn:hover { background: #e2e8f0 !important; }

.qty-input-group input[type="number"] {
    width: 60px !important;
    height: 45px !important;
    text-align: center !important;
    border: none !important;
    border-left: 1px solid #cbd5e1 !important;
    border-right: 1px solid #cbd5e1 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #1D2A4F !important;
    background: #ffffff !important;
    /* Disable interaksi manual di input untuk menghindari bug, biarkan klik + - */
    pointer-events: none !important; 
}
/* Hilangkan panah spinner default dari browser */
.qty-input-group input[type=number]::-webkit-inner-spin-button, 
.qty-input-group input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none !important; margin: 0 !important; 
}

/* Kumpulan Tombol Beli */
.sarana-action-buttons {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
}

.btn-single-cart, .btn-single-wa {
    flex: 1 !important;
    height: 50px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    border: none !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

.btn-single-cart {
    background-color: #F7A21B !important;
    color: #1D2A4F !important;
}
.btn-single-cart:hover {
    background-color: #e59415 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(247, 162, 27, 0.3) !important;
}

.btn-single-wa {
    background-color: #25D366 !important;
    color: #ffffff !important;
}
.btn-single-wa:hover {
    background-color: #20b858 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.3) !important;
}

/* ==================================================
   4. KONTEN DESKRIPSI (PRODUCT CONTENT)
================================================== */
.sarana-single-product .elementor-widget-woocommerce-product-content {
    background: #ffffff !important;
    padding: 30px !important;
    border-radius: 12px !important;
    border: 1px solid #eaeaea !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    margin-top: 30px !important;
}
.sarana-single-product .elementor-widget-woocommerce-product-content h3 {
    color: #1D2A4F !important;
    font-size: 22px !important;
    margin-top: 35px !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid #F7A21B !important;
    padding-bottom: 10px !important;
    display: inline-block !important;
    font-weight: 800 !important;
}
.sarana-single-product .elementor-widget-woocommerce-product-content h3:first-child {
    margin-top: 0 !important;
}
.sarana-single-product .elementor-widget-woocommerce-product-content ul {
    list-style-type: disc !important;
    padding-left: 25px !important;
    margin-top: 15px !important;
    color: #475569 !important;
}
.sarana-single-product .elementor-widget-woocommerce-product-content p,
.sarana-single-product .elementor-widget-woocommerce-product-content li {
    margin-bottom: 8px !important;
    color: #475569 !important;
    line-height: 1.8 !important;
}

/* ==================================================
   5. RESPONSIVE MOBILE (< 768px)
================================================== */
@media (max-width: 768px) {
    .sarana-single-product h1.product_title {
        font-size: 24px !important;
        margin-top: 15px !important;
    }
    
    .sarana-single-action-wrap {
        padding: 15px !important;
    }
    
    .qty-input-group {
        width: 100% !important; /* Qty memanjang penuh di HP */
        justify-content: space-between !important;
    }
    .qty-input-group input[type="number"] {
        flex: 1 !important; /* Input box memanjang */
    }

    .sarana-action-buttons {
        flex-direction: column !important; /* Susun tombol ke bawah */
        gap: 12px !important;
    }
    
    .btn-single-cart, .btn-single-wa {
        width: 100% !important;
        height: 48px !important;
    }

    .sarana-single-product .elementor-widget-woocommerce-product-content {
        padding: 20px !important;
    }
    .sarana-single-product .elementor-widget-woocommerce-product-content h3 {
        font-size: 18px !important;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2da17d8 */<div class="sarana-single-action-wrap">
    <!-- Box Qty dengan Tombol + dan - -->
    <div class="sarana-qty-box">
        <label for="single-qty" class="qty-label">Jumlah Pesanan:</label>
        <div class="qty-input-group">
            <button type="button" class="qty-btn minus" onclick="kurangiQty()">-</button>
            <input type="number" id="single-qty" value="1" min="1" step="1" readonly>
            <button type="button" class="qty-btn plus" onclick="tambahQty()">+</button>
        </div>
    </div>

    <!-- Tombol Aksi -->
    <div class="sarana-action-buttons">
        <button class="btn-single-cart" onclick="addSingleToCart(this)">
            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            Tambah ke Keranjang
        </button>
        <button class="btn-single-wa" onclick="buySingleWA()">
            <svg width="22" height="22" fill="currentColor" viewBox="0 0 24 24"><path d="M12.01 2.002c-5.522 0-10.002 4.478-10.002 10.002 0 1.956.556 3.79 1.543 5.352L2 22.004l4.808-1.46c1.517.893 3.268 1.46 5.19 1.46 5.524 0 10.004-4.478 10.004-10.002S17.534 2.002 12.01 2.002zm5.83 14.335c-.266.745-1.546 1.428-2.128 1.488-.543.056-1.185.127-3.418-.748-2.732-1.07-4.488-3.85-4.63-4.04-.138-.19-1.106-1.47-1.106-2.81 0-1.34.697-2.002.946-2.268.25-.266.544-.332.723-.332.18 0 .358 0 .514.007.165.008.384-.064.582.416.205.498.702 1.714.764 1.838.064.125.105.27.023.435-.083.165-.125.267-.25.412-.124.144-.263.313-.374.437-.123.136-.254.286-.11.533.142.247.633 1.05 1.363 1.698.943.84 1.735 1.097 1.983 1.22.25.124.394.103.54-.06.147-.164.634-.738.804-.99.17-.25.34-.21.564-.125.223.084 1.414.667 1.656.79.243.124.405.186.463.29.06.103.06.598-.206 1.343z"/></svg>
            Beli via WhatsApp
        </button>
    </div>
</div>

<script>
    function tambahQty() {
        let input = document.getElementById('single-qty');
        input.value = parseInt(input.value) + 1;
    }
    
    function kurangiQty() {
        let input = document.getElementById('single-qty');
        if (parseInt(input.value) > 1) {
            input.value = parseInt(input.value) - 1;
        }
    }

    function addSingleToCart(btnElement) {
        let titleEl = document.querySelector('.sarana-single-product h1.product_title');
        if(!titleEl) titleEl = document.querySelector('h1.product_title');
        
        if(!titleEl) return alert("Sistem sedang memuat, silakan coba lagi.");
        
        const productName = titleEl.innerText;
        const qty = parseInt(document.getElementById('single-qty').value);
        
        let localCart = JSON.parse(localStorage.getItem('saranaCart')) || [];
        const existingItem = localCart.find(item => item.name === productName);
        
        if (existingItem) {
            existingItem.qty += qty;
        } else {
            localCart.push({ name: productName, qty: qty });
        }

        // 1. Simpan ke Local Storage
        localStorage.setItem('saranaCart', JSON.stringify(localCart));
        
        // 2. KUNCI UTAMA: Kirim sinyal (Custom Event) ke seluruh sistem bahwa keranjang berubah
        window.dispatchEvent(new Event('keranjangSaranaDiupdate'));
        
        // 3. UI/UX Feedback Langsung di Tombol
        const originalHTML = btnElement.innerHTML;
        btnElement.innerHTML = "✅ Berhasil Ditambahkan!";
        btnElement.style.backgroundColor = "#20b858"; 
        btnElement.style.color = "#ffffff";
        btnElement.style.transform = "scale(1.02)";
        btnElement.style.transition = "all 0.3s ease";

        setTimeout(() => {
            btnElement.innerHTML = originalHTML;
            btnElement.style.backgroundColor = ""; 
            btnElement.style.color = "";
            btnElement.style.transform = "scale(1)";
        }, 2000);
    }

    function buySingleWA() {
        let titleEl = document.querySelector('.sarana-single-product h1.product_title');
        if(!titleEl) titleEl = document.querySelector('h1.product_title');
        
        const productName = titleEl ? titleEl.innerText : "Produk";
        const qty = parseInt(document.getElementById('single-qty').value);
        const waNumber = "6281386987295"; 
        
        let message = `Halo Sarana Elektrik! Saya ingin membeli langsung:\n\n*${productName}*\nJumlah: ${qty}pcs\n\nMohon info total harga dan ongkos kirim. Terima kasih.`;
        const encodedMessage = encodeURIComponent(message);
        window.open(`https://wa.me/${waNumber}?text=${encodedMessage}`, '_blank');
    }
</script>/* End custom CSS */