/* ==========================================================================
   1. LAYOUT UTAMA: BULMA + WOOCOMMERCE SIDEBAR
   ========================================================================== */
.shop-layout-container {
    display: flex;
    flex-wrap: wrap;
    margin: 40px auto;
    max-width: 1300px;
    padding: 0 20px;
    gap: 40px;
}

.shop-main-content {
    flex: 1;
    min-width: 0; 
}

.shop-sidebar-area {
    width: 300px;
    flex-shrink: 0;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    padding: 25px;
    height: fit-content;
}

/* Grid Produk Bulma Fix */
.shop-main-content .columns.is-multiline {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
}

/* ==========================================================================
   2. STYLING KARTU PRODUK (GRID UTAMA)
   ========================================================================== */
.shop-main-content .product {
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 10px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.shop-main-content .product img {
    max-width: 100%;
    height: 180px;
    object-fit: contain;
    margin-bottom: 15px;
}

.woocommerce-loop-product__title {
    font-size: 1rem !important;
    font-weight: 700;
    line-height: 1.4;
    min-height: 3em;
    margin-bottom: 10px !important;
    color: #363636;
}

/* HARGA PRODUK */
.shop-main-content .product .price {
    display: block;
    margin-bottom: 15px !important; /* Memberikan ruang di bawah harga */
    color: #4a4a4a;
    font-weight: 600;
}

/* TOMBOL ADD TO CART (GRID UTAMA) */
.shop-main-content .product .button, 
.shop-main-content .product .add_to_cart_button {
    margin-top: 15px !important; /* Jarak tambahan agar tidak menempel dengan harga */
    background-color: #3273dc;
    color: #fff !important;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    /* Vertikal Center */
    height: 45px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 15px !important;
    line-height: 1 !important;
}

/* ==========================================================================
   3. SIDEBAR WIDGETS (GENERAL)
   ========================================================================== */
.shop-sidebar-area .widget {
    margin-bottom: 40px;
}

.shop-sidebar-area .widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #3273dc;
    color: #363636;
}

/* ==========================================================================
   4. MINI CART FIX: DELETE (X) & INFO PRODUK
   ========================================================================== */
.shop-sidebar-area .cart_list li img {
    display: none !important;
}

.shop-sidebar-area .cart_list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.shop-sidebar-area .cart_list li {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #f0f0f0;
    gap: 0 12px;
}

.shop-sidebar-area .cart_list li a.remove {
    order: 1 !important;
    color: #ff3860 !important;
    font-size: 1.1rem !important;
    font-weight: bold;
    text-decoration: none !important;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 10px !important; 
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
}

.shop-sidebar-area .cart_list li a.remove:hover {
    background-color: #ff3860;
    color: #ffffff !important;
    border-radius: 4px;
}

.shop-sidebar-area .cart_list li a:not(.remove) {
    order: 2 !important;
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem !important;
    line-height: 1.4;
    color: #333;
    display: block;
    text-decoration: none;
    padding: 0 !important;
    margin: 0 0 5px 0 !important;
}

.shop-sidebar-area .quantity {
    order: 3 !important;
    flex-basis: 100%;
    margin-left: 32px; 
    font-size: 0.85rem;
    color: #666;
    margin-top: -2px;
}

/* ==========================================================================
   5. SUBTOTAL & TOMBOL SIDEBAR
   ========================================================================== */
.shop-sidebar-area .total {
    padding: 20px 0 10px 0;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    justify-content: space-between;
    border-top: 2px solid #363636;
    margin-top: 15px;
    color: #363636;
}

.shop-sidebar-area .buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.shop-sidebar-area .buttons a {
    flex: 1;
    height: 40px; 
    display: flex !important;
    align-items: center; 
    justify-content: center; 
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1 !important;
    padding: 0 5px !important;
}

.shop-sidebar-area .buttons a.wc-forward:not(.checkout) {
    background: #f5f5f5 !important;
    color: #4a4a4a !important;
    border: 1px solid #dbdbdb;
}

.shop-sidebar-area .buttons a.checkout {
    background: #3273dc !important;
    color: #ffffff !important;
    border: 1px solid #3273dc;
}

/* Responsif */
@media (max-width: 1024px) {
    .shop-layout-container { flex-direction: column; }
    .shop-sidebar-area { width: 100%; order: 2; }
}

/* ==========================================================================
   1. LAYOUT WRAPPER UTAMA
   ========================================================================== */
.shop-layout-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 40px;
    align-items: flex-start;
}

.shop-main-content {
    flex: 1 !important;
}

.shop-sidebar-area {
    width: 300px !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   2. SINGLE PRODUCT - 2 COLUMNS SYSTEM
   ========================================================================== */
/* Layout 2 Kolom di Detail Produk */
/* 1. Reset & Force Layout Flex */
.custom-product-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* 2. Paksa Gallery ke Kiri (45%) */
.product-gallery {
    flex: 0 0 45% !important;
    max-width: 45% !important;
    width: 45% !important;
}

/* 3. Paksa Summary/Info ke Kanan (50%) */
.product-info {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
}

/* 4. Paksa Gambar/Gallery agar tidak Full Width */
.product-gallery .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
}

/* 5. Paksa Area Bawah (Tabs) tetap Full Width */
.product-full-width-bottom {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-top: 30px !important;
}

/* 6. Mobile Responsive (Kembali ke 1 kolom) */
@media (max-width: 768px) {
    .custom-product-wrapper { flex-direction: column !important; }
    .product-gallery, .product-info {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}



/* Area Tabs & Related di Bawah */
.product-full-width-bottom {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-top: 40px !important;
    clear: both;
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .product-gallery, .product-info {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* 1. Paksa area detail produk menjadi rata kiri */
.custom-product-wrapper, 
.product-info, 
.summary.entry-summary {
    text-align: left !important;
}

/* 2. Mengatur perataan khusus pada area tab agar tidak center */
.product-full-width-bottom, 
.woocommerce-tabs.wc-tabs-wrapper, 
.wc-tab {
    text-align: left !important;
}

/* 3. Menyesuaikan posisi harga dan tombol agar sejajar ke kiri */
.product-info .price,
.product-info form.cart {
    text-align: left !important;
    display: block !important;
}

/* 4. Memastikan konten di dalam tab (deskripsi) juga rata kiri */
#tab-description, 
#tab-description p, 
#tab-description ul {
    text-align: left !important;
}

/* Menghilangkan bayangan/shadow pada wrapper tab */
.woocommerce-tabs,
.wc-tabs-wrapper,
.tabs, 
.wc-tab,
.panel.entry-content {
    box-shadow: none !important;
    border: none !important; /* Opsional: hilangkan border jika efek shadow masih terasa */
    background: transparent !important; /* Pastikan background sesuai dengan tema */
}

/* Jika shadow muncul pada area tab judul */
ul.tabs li,
ul.wc-tabs li {
    box-shadow: none !important;
}

/* Memperbesar ukuran font nama produk */
.custom-product-wrapper .product-info h1.product_title,
.custom-product-wrapper .product-info h2.product_title {
    font-size: 2rem !important; /* Anda bisa menyesuaikan angka ini (misal: 2.2rem, 3rem) */
    line-height: 1.2 !important;  /* Menjaga jarak antar baris agar tetap rapi */
    margin-bottom: 20px !important;
}

/* ==========================================================================
   GALERI PRODUK (Ganti semua CSS galeri lama dengan ini)
   ========================================================================== */

/* 1. Kontainer Utama */
.product-gallery { 
    flex: 0 0 45% !important; 
    max-width: 45% !important; 
    position: relative;
}

/* 2. Menghilangkan Jarak Atas (Space) */
.woocommerce-product-gallery,
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image {
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Gambar Utama: Pastikan proporsional */
.woocommerce-product-gallery__wrapper img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

/* 4. Thumbnail (Grid Bawah) */
.flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 20px !important;
    padding: 0 !important;
    list-style: none !important;
}

.flex-control-thumbs li {
    width: 80px !important;
    height: 80px !important;
    cursor: pointer;
    border: 2px solid #eee;
    border-radius: 6px;
    overflow: hidden;
}

.flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.flex-control-thumbs li img.flex-active {
    border: 2px solid #3273dc;
}

/* 5. Posisi Ikon Kaca Pembesar */
.woocommerce-product-gallery__trigger {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 100 !important;
    background: rgba(255,255,255,0.7) !important;
    padding: 8px !important;
    border-radius: 50% !important;
}

/* 6. Memperbaiki Lightbox */
.pswp__img {
    object-fit: contain !important;
}

/* Sembunyikan Navigasi Slider */
.flex-direction-nav { display: none !important; }

/* Memastikan kontainer zoom memiliki z-index yang benar dan tidak terpotong */
.woocommerce-product-gallery__image {
    position: relative !important;
    overflow: hidden !important;
}

/* Memastikan area magnifier (zoom) tidak tertutup oleh elemen lain */
.zoomImg {
    z-index: 10 !important;
    cursor: crosshair !important;
}

/* 1. Paksa kursor menjadi 'pointer' (atau 'zoom-in') untuk menunjukkan bisa diklik */
.woocommerce-product-gallery__image {
    cursor: zoom-in !important;
}

/* Jika ingin menggunakan ikon kaca pembesar custom (bawaan browser) */
.woocommerce-product-gallery__image img {
    cursor: zoom-in !important;
}

/* 2. Pastikan elemen zoom tidak aktif dan tidak ada interaksi saat hover */
.woocommerce-product-gallery__image img {
    pointer-events: auto !important; /* Biarkan klik tetap jalan */
}

/* 4. Pastikan saat hover tidak ada pergeseran atau transisi zoom */
.zoomImg {
    display: none !important;
}

/* PRUDUCT TAB */

/* 1. Reset total kontainer Bulma di WooCommerce Tabs */
.woocommerce-tabs.tabs ul {
    justify-content: flex-start !important;
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 2px solid #000 !important;
}

/* 2. Reset elemen LI Bulma */
.woocommerce-tabs.tabs li {
    display: block !important;
    margin-bottom: -2px !important; /* Tarik ke bawah untuk menimpa border ul */
    margin: 0 !important; /* Hapus margin kanan 5px yang tadi */
    display: inline-block !important;
    float: none !important;
}

/* 3. Reset elemen A Bulma (Bulma biasanya menaruh border di sini) */
.woocommerce-tabs.tabs li a {
    border: 2px solid #000 !important;
    border-bottom: none !important; /* Hilangkan border bawah bawaan Bulma */
    background-color: #f4f4f4 !important;
    border-radius: 5px 5px 0 0 !important;
    padding: 10px 20px !important;
    display: block !important;
    color: #000 !important;
    font-weight: bold !important;
    transition: none !important;
	margin-left: -2px !important; /* Menarik tab kedua dst ke arah kiri */
}

/* 4. OVERRIDE TAB AKTIF (Gaya Nuclear) */
.woocommerce-tabs.tabs li.is-active a,
.woocommerce-tabs.tabs li.active a {
    background-color: #fff !important;
    border-bottom: 2px solid #fff !important; /* Garis putih untuk 'menghapus' garis hitam ul */
    color: #3273dc !important;
    position: relative !important;
    z-index: 5 !important;
}

/* 5. Panel Konten di Bawah */
.woocommerce-tabs .panel {
    border: none !important;
    border-top: none !important; /* Biarkan dia menyatu dengan tab */
    padding: 0 !important;
    background-color: #fff !important;
    margin-top: 0 !important;
    clear: both;
}

/* 6. Hilangkan Shadow/Pseudo Bulma yang tersisa */
.woocommerce-tabs.tabs li a:hover {
    background-color: #eeeeee !important;
    border-bottom-color: transparent !important;
}

.panel {
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-bottom: none;
}


/* HALAMAN CART */
/* Merapikan tabel cart agar tidak terlalu lebar */
.woocommerce-cart-form__contents {
    border: 2px solid #000;
    border-radius: 8px;
    overflow: hidden;
}

.woocommerce-cart-form__cart-item td {
    padding: 20px 10px !important;
    border-bottom: 1px solid #eee;
}

/* Membuat tombol Update Cart lebih rapi */
button[name="update_cart"] {
    background-color: #f4f4f4 !important;
    color: #000 !important;
    border: 2px solid #000 !important;
    font-weight: bold;
    border-radius: 4px;
}

button[name="update_cart"]:hover {
    background-color: #000 !important;
    color: #fff !important;
}

/* HALAMAN CHECKOUT */

/* 1. Kontainer Utama: Paksa Flexbox */
.woocommerce-checkout {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
}

/* Memaksa pesan error mengambil lebar 100% (berada di atas kolom) */
.woocommerce-NoticeGroup-checkout, 
.woocommerce-error {
    flex: 1 1 100% !important;
    width: 100% !important;
}

/* 2. Kolom Kiri: Paksa Billing & Shipping menumpuk ke bawah */
.col2-set {
    flex: 1 1 500px !important; /* Biarkan dia fleksibel, tapi punya basis minimal 500px */
    max-width: 100% !important; /* Penting agar tidak meluber di mobile */
}

/* Memastikan Billing (col-1) dan Shipping (col-2) mengisi lebar penuh & menumpuk */
.woocommerce-checkout .col-1, 
.woocommerce-checkout .col-2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important; /* Matikan float default WooCommerce */
    display: block !important;
    margin-bottom: 30px !important;
}

/* 3. Kolom Kanan: Order Review */
#order_review_heading, 
#order_review {
    flex: 1 1 35% !important;
    width: 35% !important;
    min-width: 320px !important;
}

/* Mempercantik box Order Review di sisi kanan */
#order_review {
    background: #ffffff !important;
    padding: 20px !important;
    border: 2px solid #000 !important;
}

/* 4. Responsif Mobile */
@media screen and (max-width: 991px) {
    .woocommerce-checkout {
        flex-direction: column !important;
    }
    .col2-set, #order_review_heading, #order_review {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.checkout-sidebar-right, 
#order_review,
#order_review_heading {
    flex: 1 1 400px !important; /* Memberikan ruang minimal 400px agar tidak terlalu sempit */
    max-width: 100% !important;
}

/* 1. Atur pembagian kolom baru */
.col2-set {
    flex: 1 1 55% !important; /* Kurangi sedikit lebar kiri */
    max-width: 55% !important;
}

#order_review_heading, 
#order_review {
    flex: 1 1 40% !important; /* Lebarkan kolom kanan */
    width: 40% !important;
    max-width: 40% !important;
}

/* 2. Opsional: Buat tabel di dalam Order Summary memenuhi lebar kotaknya */
#order_review {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important; /* Reset margin agar simetris */
}
/* 3. Rapikan Padding dan Margin agar lebih simetris */
.woocommerce-checkout {
    justify-content: space-between !important; /* Memaksa kolom kiri ke kiri mentok, kanan ke kanan mentok */
    max-width: 1300px; /* Opsional: lebarkan kontainer utama jika layar besar */
    margin: 0 auto;
}

/* 4. Pastikan form input tetap rapi di kolom yang lebih sempit */
.woocommerce-checkout .form-row {
    width: 100% !important;
}

/* 1. Paksa box order summary memenuhi lebar kolom kanan */
#order_review {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important; /* Memastikan padding tidak merusak lebar */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. Paksa tabel di dalamnya juga memenuhi lebar box */
#order_review table.shop_table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important; /* Agar kolom harga dan produk membagi ruang dengan baik */
}

/* 3. Menyeimbangkan whitespace di dalam tabel */
#order_review table.shop_table th,
#order_review table.shop_table td {
    padding: 15px 10px !important;
}

/* 4. Pastikan teks di sisi kanan (Harga) mepet ke pinggir kanan */
#order_review table.shop_table .product-total,
#order_review table.shop_table .cart-subtotal td,
#order_review table.shop_table .order-total td,
#order_review table.shop_table .shipping td {
    text-align: right !important;
}

#order_review table.shop_table {
    width: 100% !important;
    table-layout: fixed !important; /* Memaksa tabel mengikuti lebar box hitam */
    border-collapse: collapse !important;
}

#order_review table.shop_table td.product-name {
    width: 65% !important; /* Beri ruang lebih besar untuk nama produk */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important; /* Agar teks panjang turun ke bawah, bukan terpotong */
}

#order_review table.shop_table td.product-total {
    width: 35% !important;
    text-align: right !important;
}

/* 1. Merapikan Ukuran & Warna Font di Area Pembayaran */
#payment .payment_methods li, 
#payment .payment_box p,
.woocommerce-privacy-policy-text p {
    font-size: 0.9rem !important; /* Ukuran lebih kecil agar rapi */
    line-height: 1.5 !important;
    color: #444 !important;
}

/* Membuat judul metode pembayaran (Bank Transfer) sedikit lebih tegas */
#payment .payment_methods label {
    font-weight: 700 !important;
    font-size: 1rem !important;
}

/* 2. Membuat Tombol Place Order Full Width */
#place_order {
    width: 100% !important; /* Membuat tombol memenuhi lebar kolom */
    display: block !important;
    padding: 15px !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: #7b51a8 !important; /* Warna ungu Anda */
    border: 2px solid #000 !important; /* Border hitam agar senada dengan box */
    border-radius: 4px !important;
    transition: all 0.3s ease;
}

#place_order:hover {
    background-color: #000 !important; /* Berubah hitam saat hover */
    color: #fff !important;
    box-shadow: 4px 4px 0px #7b51a8; /* Efek bayangan saat hover */
}

/* 3. Merapikan Jarak Antar Elemen */
#payment div.payment_box {
    background-color: #f0f0f0 !important; /* Warna abu-abu terang */
    border: 1px solid #ddd !important;
    border-radius: 4px;
}

.woocommerce-privacy-policy-text {
    margin-bottom: 20px !important;
    margin-top: 15px !important;
}

.woocommerce-privacy-policy-text {
    font-size: 0.8rem !important;
    color: #777 !important;
    text-align: justify;
}

/* Merapikan kontainer utama pesan error */
.woocommerce-error {
    background-color: #fff1f1 !important;
    border: 2px solid #e00000 !important;
    border-radius: 4px !important;
    list-style: none !important;
    padding: 15px 20px !important;
    margin-bottom: 30px !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Merapikan setiap baris pesan error */
.woocommerce-error li {
    color: #e00000 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 5px 0 !important;
    border-bottom: 1px solid rgba(224, 0, 0, 0.1);
}

.woocommerce-error li:last-child {
    border-bottom: none;
}

/* Memberikan icon kecil di depan pesan (opsional) */
.woocommerce-error li::before {
    content: "✕ ";
    margin-right: 8px;
}

/* Memberikan border merah pada input yang tidak valid */
.woocommerce-invalid input {
    border-color: #e00000 !important;
    background-color: #fff8f8 !important;
}

/* Merapikan pesan error yang muncul tepat di bawah field (jika ada) */
.woocommerce-invalid .woocommerce-error {
    margin-top: 5px !important;
    padding: 5px !important;
    border: none !important;
    background: none !important;
    font-size: 0.75rem !important;
}