/*
Theme Name: StoreX Child
Theme URI: https://burgerthemes.com/storex-free/
Template: storex
Author: burgersoftware
Author URI: https://burgerthemes.com/
Description: StoreX is a modern and flexible WooCommerce WordPress theme. It is suitable for creating fashion, jewelry, kids store, auto parts, furniture, electronics, accessories, beauty, or cosmetics shop websites. StoreX provides essential features to build a clean and functional eCommerce website.
Tags: e-commerce,grid-layout,right-sidebar,custom-logo,custom-menu,featured-images,footer-widgets,theme-options,threaded-comments,translation-ready
Version: 1.0.11.1779097301
Updated: 2026-05-18 09:41:41
*/

/* MENGUNCI WARNA ORANGE SECARA PERMANEN */
:root {
    --theme-color: #FD5000 !important;
    --secondary-color: #1a1a1a !important;
    --text-color: #111111 !important;
    --title-color: #111111 !important;
}

/* Memastikan tombol dan aksen mengikuti warna orange */
a, .button, button, input[type="submit"] {
    --theme-color: #FD5000 !important;
}

/* CONTAINER UTAMA HOMEPAGE */
.main-homepage-container {
    padding: 10px !important;
    background-color: #f4f5f7 !important;
    clear: both !important;
}

/* KOTAK WADAH BESAR PER KELOMPOK */
.grup-kategori-box {
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 12px 8px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* JUDUL LABEL KELOMPOK */
.grup-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    margin-bottom: 12px !important;
    display: inline-block !important;
}
.warna-pangan { background: #FFEFE6 !important; color: #FF6600 !important; }
.warna-tekno { background: #E6F0FA !important; color: #0066CC !important; }
.warna-gaya { background: #F5E6FB !important; color: #9900CC !important; }
.warna-bumi { background: #E6F7ED !important; color: #009933 !important; }
.warna-jasa { background: #E0F7FA !important; color: #00838F !important; }

/* ITEM LINK SUBKATEGORI UTAMA */
.item-sub {
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* LINGKARAN IKON MINIMALIS */
.buletan-ikon {
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 5px !important;
}
.buletan-ikon img {
    width: 60% !important;
    height: auto !important;
}
.cp-1 { background: #FFF4EE !important; color: #FF6600 !important; }
.ct-1 { background: #F0F7FF !important; color: #0066CC !important; }
.cg-1 { background: #FAF0FF !important; color: #9900CC !important; }
.cb-1 { background: #F0FBF5 !important; color: #009933 !important; }
.cj-1 { background: #F0FDFA !important; color: #0D9488 !important; }

/* TEKS NAMA KATEGORI */
.item-sub span {
    font-weight: 500 !important;
    color: #444444 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* DESAIN DASAR WRAPPER SEARCH FIELD */
.search-wrapper-app-hp {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}
.search-icon-svg-hp {
    position: absolute !important;
    left: 15px !important;
    z-index: 2 !important;
}
.search-field-app-hp {
    width: 100% !important;
    padding: 8px 15px 8px 40px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    background-color: #f9fafb !important;
}

/* KUNCI UTAMA: SECARA DEFAULT MENU BARU HARUS LENYAP DI HP */
.desktop-sub-menu-bar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}


/* ========================================================
   SETTING TAMPILAN KHUSUS LAPTOP & DESKTOP (992PX KE ATAS)
   ======================================================== */
@media (min-width: 992px) {
    /* Atur Layout Baris Spanduk Orange Kiri Logo, Kanan Konten */
    .upper-inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Wadah Kolom Kanan Spanduk Oranye (Menampung 2 Tingkat) */
    .right-column-orange {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        width: 60% !important;
        gap: 12px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    /* 1. MENGATUR BARIS MENU DI KANAN ATAS SPANDUK ORANGE */
    .desktop-nav-list-orange {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        gap: 22px !important;
    }
    .desktop-nav-list-orange li {
        list-style-type: none !important;
    }
    .desktop-nav-list-orange li a {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        text-decoration: none !important;
        transition: all 0.2s ease;
    }
    .desktop-nav-list-orange li a:hover, 
    .desktop-nav-list-orange li a.active {
        color: #ffffff !important;
        text-shadow: 0px 0px 8px rgba(255,255,255,0.6) !important;
    }

    /* 2. MENGATUR KOTAK SEARCH FIELD DI BAWAH MENU */
    .desktop-only-search-orange {
        display: block !important;
        width: 100% !important;
        max-width: 420px !important;
    }
    .desktop-only-search-orange .search-field-app-hp {
        background-color: #ffffff !important;
        border: none !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
    }

    /* 3. DESAIN BARIS BARU TEKS BERJALAN DI BAWAH SPANDUK ORANGE */
    .desktop-bottom-marquee-bar {
        display: block !important;
        visibility: visible !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e5e7eb !important;
        padding: 10px 0 !important;
    }
    .header-announcement-desktop-new {
        display: flex !important;
        align-items: center !important;
        background: #FFEFE6 !important;
        padding: 8px 20px !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        border: 1px solid #FFE6D5 !important;
    }
    .announcement-icon-new {
        margin-right: 12px !important;
        font-size: 20px !important;
        flex-shrink: 0 !important;
    }
    .marquee-wrapper-new {
        overflow: hidden !important;
        position: relative !important;
        width: 100% !important;
        height: 26px !important;
    }
    .marquee-text-new {
        position: absolute !important;
        width: max-content !important;
        white-space: nowrap !important;
        margin: 0 !important;
        font-size: 20px !important;
        font-weight: 900 !important;
        color: #FF5000 !important;
        line-height: 26px !important;
        animation: marquee-jalur-bawah 25s linear infinite !important;
    }

    /* Sembunyikan Kontainer Search Bar melayang milik HP */
    .sticky-search-hp-box {
        display: none !important;
    }

    /* Grid Kategori Laptop 8 Kolom */
    .grid-sub-kategori {
        display: grid !important;
        grid-template-columns: repeat(8, 1fr) !important; 
        gap: 20px 15px !important;
    }
    .buletan-ikon {
        width: 65px !important;
        height: 65px !important;
        margin-bottom: 8px !important;
    }
    .grup-title {
        font-size: 16px !important;
        padding: 4px 12px !important;
    }
    .item-sub span {
        font-size: 14px !important;
    }
}


/* ========================================================
   SETTING TAMPILAN KHUSUS HP & TABLET (MAKSIMAL 991PX)
   ======================================================== */
@media (max-width: 991px) {
    .desktop-bottom-marquee-bar,
    .right-column-orange {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
    }

    .mobile-nav-toggler,
    .header-lower,
    .menu-area {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .grid-sub-kategori {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px 5px !important;
    }
    .buletan-ikon {
        width: 42px !important;
        height: 42px !important;
    }
    .item-sub span {
        font-size: 12px !important;
    }
    .main-header .logo img.custom-logo {
        max-width: 130px !important;
        height: auto !important;
    }
    .header-upper {
        padding-top: 8px !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    .upper-inner {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .site-description {
        font-size: 10px !important;
        margin-top: 2px !important;
        margin-bottom: 5px !important;
    }
    .sticky-search-hp-box {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 99999 !important;
        padding: 10px 12px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .storex-content, 
    #content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* ANIMASI JALAN TIMUR KE BARAT */
@keyframes marquee-jalur-bawah {
    0% { transform: translate3d(100%, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* ========================================================
   KUNCI STRUKTUR WAJIB SLIDER BANNER (ANTI-BERTUMPUK)
   ======================================================== */
.slider-container-jombang {
    width: 100% !important;
    margin-bottom: 15px !important;
    overflow: hidden !important;
}
.slider-wrapper-jombang {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
}
.slider-wrapper-jombang::-webkit-scrollbar {
    display: none !important;
}
.slide-item {
    flex: 0 0 100% !important;
    width: 100% !important;
    scroll-snap-align: start !important;
    padding: 0 4px !important;
}
.slide-item img {
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
    display: block !important;
}

/* JURUS PAMUNGKAS MEMOTONG BARIS PENYEDIA BAWAAN TEMA YANG DOBEL */
.product_meta .posted_in a[href*="product_brand"],
.product_meta span a[href*="product_brand"],
.product_meta li a[href*="product_brand"] {
    display: none !important;
}

/* Trik cadangan jika tema membungkus teks "Penyedia:" di dalam label induknya */
.product_meta .posted_in:has(a[href*="product_brand"]) {
    display: none !important;
}

/* ========================================================
   CSS HERO SECTION SPLIT MULTI-COLUMN (DESKTOP & TV)
   ======================================================== */

/* KONDISI DEFAULT: KHUSUS LAYAR HP (DI BAWAH 991PX) */
@media (max-width: 991px) {
    .desktop-side-banners {
        display: none !important; /* Sembunyikan total di HP */
    }
    .slider-container-jombang {
        width: 100% !important; /* Slider penuhi lebar layar HP */
    }
}

/* KONDISI KHUSUS: monitor DESKTOP & TV 50 INCH (992PX KE ATAS) */
@media (min-width: 992px) {
    
    /* Wadah utama yang membagi slider dan banner samping */
    .marketplace-hero-section {
        display: flex !important;
        max-width: 1200px !important; /* Membatasi agar tidak melar se-layar penuh */
        margin: 0 auto 15px auto !important; /* Otomatis posisi di tengah (center) */
        gap: 15px !important; /* Jarak pisah tengah antarkolom */
    }

    /* Set Kolom Kiri: Slider Utama mengambil porsi 70% */
    .slider-container-jombang {
        flex: 0 0 70% !important;
        width: 70% !important;
        margin-bottom: 0 !important;
    }

    /* Set tinggi slider di desktop/TV agar seragam dan pas */
    .slide-item {
        height: 350px !important;
        overflow: hidden !important;
    }
    .slide-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Mencegah gambar menjadi gepeng */
    }

    /* Set Kolom Kanan: Wadah Banner Statis mengambil porsi 30% */
    .desktop-side-banners {
        display: flex !important;
        flex-direction: column !important; /* Tersusun vertikal atas-bawah */
        justify-content: space-between !important; /* Membuat jarak atas bawah rata presisi */
        flex: 0 0 30% !important;
        width: 30% !important;
        height: 350px !important; /* WAJIB SAMA dengan tinggi .slide-item */
    }

    /* Desain per banner kecil di kanan */
    .side-banner-item {
        height: calc(50% - 7.5px) !important; /* Membagi dua tinggi dikurangi setengah celah gap */
        overflow: hidden !important;
        border-radius: 10px !important;
    }
    .side-banner-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        transition: transform 0.3s ease !important;
    }

    /* Efek hover interaktif kosmetik modern */
    .side-banner-item img:hover {
        transform: scale(1.02) !important;
    }
}