/*
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;
}

/* MENYEMBUNYIKAN KONTROL DESKTOP BARU SECARA DEFAULT DI HP */
.desktop-bottom-marquee-bar {
    display: none !important;
    visibility: hidden;
}


/* ========================================================
   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; /* Dorong menu & search menempel kanan */
        width: 60% !important;
        gap: 12px !important; /* Jarak vertikal antara menu dan search bar */
        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; /* Warna putih bersih transparan elegan */
        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; /* Efek menyala pas aktif */
    }

  /* 2. MENGATUR KOTAK SEARCH FIELD DI BAWAH MENU */
    .desktop-only-search-orange {
        display: block !important;
        width: 80% !important;        /* KUNCI: Set lebar kotak pencarian sebesar 60% */
        max-width: 80% !important;    /* Kunci batas maksimal agar tidak melebihi 80% */
        margin-right: auto !important; /* KUNCI UTAMA: Mendorong kotak ke kiri mendekati logo */
        margin-left: 0 !important;
        padding-left: 20px !important; /* Jarak aman kosmetik agar tidak terlalu menempel ke teks deskripsi logo */
    }
    .desktop-only-search-orange .search-form-app-hp,
    .desktop-only-search-orange .search-wrapper-app-hp {
        width: 100% !important;
        max-width: 100% !important;
    }
    .desktop-only-search-orange .search-field-app-hp {
        width: 100% !important;
        background-color: #ffffff !important;
        border: none !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
        font-size: 14px !important;
        padding: 10px 15px 10px 45px !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; /* Background krem orange lembut */
        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; /* Ukuran proporsional di area putih */
        font-weight: 900 !important;
        color: #FF5000 !important; /* Berwarna orange tebal agar mencolok */
        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: 14px !important;
        padding: 4px 12px !important;
    }
    .item-sub span {
        font-size: 13px !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: 10px !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); }
}

/* ========================================================
   SLIDER BANNER PWA SUPER RINGAN (0% JAVASCRIPT)
   ======================================================== */
.slider-container-jombang {
    width: 100% !important;
    margin-bottom: 15px !important;
    overflow: hidden !important;
}

.slider-wrapper-jombang {
    display: flex !important;
    overflow-x: auto !important; /* Biar bisa digeser menyamping */
    scroll-snap-type: x mandatory !important; /* Mantra pengunci geseran biar pas di tengah */
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important; /* Sentuhan mulus di iPhone/Safari */
}

/* Menghilangkan baris scrollbar abu-abu di bawah gambar agar rapi */
.slider-wrapper-jombang::-webkit-scrollbar {
    display: none !important;
}

.slide-item {
    flex: 0 0 100% !important; /* Paksa satu gambar memakan 100% lebar layar */
    width: 100% !important;
    scroll-snap-align: start !important; /* Kunci gambar pas di tepian monitor */
    padding: 0 4px !important; /* Beri jarak tipis antar banner */
}

.slide-item img {
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important; /* Bikin sudut melengkung estetik gaya Tokopedia */
    display: block !important;
}