/*
Theme Name:   Astra Child
Theme URI:    https://wpastra.com/
Description:  Child Theme khusus untuk kustomisasi Toko Mumtaz Herbal
Author:       Amirudin Mumtaz
Author URI:   https://tokoherbalmumtaz.com/
Template:     astra
Version:      1.0.0
*/

/* Tulis Custom CSS tambahan Anda di bawah baris ini jika diperlukan */

/* Hanya menyembunyikan daftar kategori/tags di homepage */
.home .pt-cv-view .pt-cv-taxoterm,
.home .pt-cv-view [class*="pt-cv-tax-"] {
    display: none !important;
}

/* Menghilangkan label dan blok "Tidak ada stok" hanya di beranda */
.home .ast-shop-product-out-of-stock {
    display: none !important;
}


.pt-cv-readmore {

    color: #fbfafc !important;

    background-color: #7b4ef5 !important;

    border: none !important;

}

/* Membuat container utama branding (Logo & Judul) berada di tengah */
.site-branding {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* Memastikan area pembungkus judul dan logo Astra mengikuti posisi tengah */
.ast-site-title-wrap {
    text-align: center !important;
}

/* Membuat tata letak menu utama (seperti teks Beranda) ikut bergeser ke tengah */
.main-header-bar .ast-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
}

/* Menyelaraskan navigasi menu agar pas di tengah-tengah di bawah judul */
.site-header-primary-section-right {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.main-header-menu {
    display: flex !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: 20px !important;
}

/* Sembunyikan tulisan teks judul situs */
.site-title, 
.ast-site-title-wrap {
    display: none !important;
}

/* Mengubah rasio gambar thumbnail artikel menjadi 3:2 tanpa merusak gambar */
.pt-cv-view .pt-cv-thumbnail {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Efek bayangan estetik dan minimalis pada thumbnail artikel */
.pt-cv-view .pt-cv-thumbnail {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    object-position: center !important;
    
    /* Tambahan efek minimalis */
    border-radius: 8px !important; /* Membuat sudut gambar melengkung halus */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* Bayangan tipis & soft */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* Animasi smooth */
}

/* Efek interaktif saat kursor diarahkan ke thumbnail (Hover) */
.pt-cv-view .pt-cv-thumbnail:hover {
    transform: translateY(-5px) !important; /* Gambar sedikit terangkat ke atas */
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1) !important; /* Bayangan melebar lembut */
}

/* ==========================================================================
   PERBAIKAN LIVE SEARCH FUSE.JS (RESPONSIF DESKTOP & MOBILE)
   ========================================================================== */

/* Pastikan pembungkus form membatasi posisi absolut dengan benar */
.wp-block-search__inside-wrapper {
    position: relative !important;
}

/* Styling Utama Kontainer Dropdown Hasil Fuse.js */
#mumtaz-fuse-results {
    position: absolute !important;
    background: #ffffff !important;
    
    /* Mengunci posisi tepat di bawah kolom input 'Cari Produk...' */
    top: 100% !important;
    left: 0 !important;
    
    /* Lebar otomatis mengikuti kolom teks, tidak menabrak tombol ungu */
    width: calc(100% - 120px) !important; 
    
    z-index: 99999 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 0 8px 8px !important; /* Melengkung hanya di sudut bawah agar menyatu dengan input */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    margin-top: 2px !important;
    display: none;
    max-height: 380px !important; /* Batasi tinggi maksimal agar tidak merusak layout */
    overflow-y: auto !important; /* Munculkan scrollbar tipis jika hasil produk banyak */
}

/* Khusus Tampilan Layar HP/Mobile (Mengembalikan lebar penuh karena tombol ungu pindah ke bawah) */
@media (max-width: 767px) {
    #mumtaz-fuse-results {
        width: 100% !important;
        border-radius: 8px !important;
    }
}

/* Pengaturan Baris Item Produk */
.fuse-result-item {
    display: flex !important;
    align-items: center !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background-color 0.2s ease !important;
}

.fuse-result-item:last-child {
    border-bottom: none !important;
}

/* Efek Hover di Desktop */
.fuse-result-item:hover {
    background-color: #f8fafc !important; 
}

/* Foto Thumbnail Mini Produk */
.fuse-result-item img {
    width: 45px !important;
    height: 45px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
}

/* Info Text */
.fuse-result-info {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

/* Judul Produk di dalam Dropdown */
.fuse-result-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* Harga Produk */
.fuse-result-price {
    font-size: 12px !important;
    color: #7b4ef5 !important; /* Ungu khas Mumtaz */
    font-weight: 500 !important;
    margin-top: 3px !important;
}

/* Jika Produk Tidak Ditemukan */
.fuse-no-result {
    padding: 15px !important;
    color: #64748b !important;
    font-size: 14px !important;
    text-align: center !important;
}