/* =========================================================================
   RUANG BOUTIQUE - Tema 01: penyesuaian responsif (desktop, tablet, ponsel)
   Dimuat SETELAH stylesheet.css sehingga aturan di sini menimpa yang lama.
   Titik patah:  <= 979px tablet/ponsel,  <= 767px ponsel,  <= 479px ponsel kecil
   ========================================================================= */

html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
img { max-width: 100%; }
img[width][height] { height: auto; }
iframe, video, embed, object { max-width: 100%; }

/* Tombol menu mobile (dibuat oleh js/app.js) disembunyikan di desktop */
.menu-toggle { display: none; }

/* Konten rich-text dari editor admin tidak boleh melebihi layar */
#content .box img, .artikel img, .deskripsi img { max-width: 100%; height: auto; }
#content table { max-width: 100%; }

/* ---------- Layar lebar sangat besar: batasi lebar maksimum ---------- */
@media (min-width: 1600px) {
    #header_top, #header_bottom { width: 100%; }
}

/* ---------- Tablet & ponsel (<= 979px) ---------- */
@media (max-width: 979px) {
    .inner, #slide_footer .inner, #footer .inner, #header_top, #header_bottom, #header #logo, #main-menu,
    div.prod_hold, .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth,
    .three_fifth, .four_fifth, input, textarea, select, .box { box-sizing: border-box; }
    body { min-width: 0; }

    /* Kontainer jadi fluid (sebelumnya lebar tetap 320/500/710px) */
    .inner,
    #slide_footer .inner,
    #footer .inner {
        width: auto !important;
        max-width: 100%;
        padding: 0 16px !important;
        margin: 0 auto;
    }

    /* Header: bar atas tidak fixed agar tidak menutupi konten di layar pendek */
    #header { padding-bottom: 0; margin-bottom: 20px; min-height: 0 !important; }
    #header_top { position: relative; height: auto; padding: 8px 0; }
    #header_top .inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
    #header_bottom { height: auto; margin: 0; float: none; }

    /* Logo di tengah, tidak lagi menempel di kiri */
    #header #logo {
        position: relative; width: 100%; height: auto; margin: 0; padding: 12px 0;
        background: #222; float: none; order: -1; flex: 0 0 100%;
    }
    #header #logo a { margin: 0 auto; display: block; width: 177px; }
    #header #logo img { display: block; margin: 0 auto; }

    #header #search { float: none; position: static; flex: 1 1 200px; margin: 0; }
    #header #search input[type=text] { width: calc(100% - 40px); }
    #header #welcome { float: none; position: static; margin: 0; padding: 0; flex: 1 1 auto; }

    /* Menu utama: tombol hamburger */
    #main-menu { width: 100%; float: none; margin: 0; padding: 8px 0; }
    #main-menu .menu-toggle {
        display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
        background: #222; color: #fff; border: 0; border-radius: 4px; font-size: 15px; cursor: pointer;
    }
    .menu-toggle-bar { display: block; width: 20px; height: 2px; background: #fff; box-shadow: 0 6px 0 #fff, 0 -6px 0 #fff; }
    .menu-toggle-bar:nth-child(2), .menu-toggle-bar:nth-child(3) { display: none; }
    .menu-toggle-label { font-weight: bold; }
    #header_bottom #main-menu ul.menu { display: none !important; float: none; width: 100%; }
    #header_bottom #main-menu.terbuka ul.menu { display: block !important; }
    #header_bottom #main-menu ul.menu li { float: none; width: 100%; border-bottom: 1px solid #eee; }
    #header_bottom #main-menu ul.menu li a { display: block; padding: 12px 14px; }
    #header_bottom #main-menu li ul.sub-menu {
        position: static; display: none; width: 100%; box-shadow: none; border: 0; background: #f7f7f7;
    }
    #header_bottom #main-menu li.sub-terbuka > ul.sub-menu { display: block; }
    #header_bottom #main-menu li ul.sub-menu li a { padding-left: 30px; }
    .js .selectnav { display: none !important; }   /* plugin selectnav lama sudah dihapus */

    /* Menu kategori + keranjang (sidebar kiri di desktop) */
    #header_bottom #menu, #header #menu {
        position: static; width: 100% !important; margin: 10px 0 0; float: none; left: auto; top: auto;
    }
    #cart-module { width: 100%; margin: 0; }
    ul#topnav2 { display: flex; flex-wrap: wrap; width: 100%; padding: 0; }
    ul#topnav2 li { flex: 1 1 45%; width: auto !important; float: none; padding: 8px 10px; }

    /* Konten & sidebar */
    #content { padding-top: 10px; }
    .content_holder, .has-sidebar .content_holder, .sidebar { width: 100% !important; float: none; margin-left: 0; }
    .slideshow, .slideshow .flexslider { width: 100%; }
    .flexslider .slides img { width: 100%; height: auto; display: block; }
    .flex-caption { display: none; }

    /* Grid kolom: 2 kolom di tablet */
    .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth {
        float: left; width: 48% !important; margin: 0 1% 20px;
    }
    .one_fourth.last, .one_half.last { margin-right: 1%; }
    .clear { clear: both; }

    /* Kartu produk: 3 kolom tablet */
    div.prod_hold {
        width: calc(33.333% - 14px) !important; height: auto !important; min-height: 0;
        margin: 0 7px 24px !important; padding: 2px 0 !important;
    }
    div.prod_hold img { width: 100%; height: auto; }

    /* Tabel (keranjang, order) bisa digeser horizontal bila sempit */
    .box table, #content .box form { max-width: 100%; }
    .box table.cart-info, .box table.tabel-responsif { display: block; overflow-x: auto; }

    /* Form */
    input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], textarea, select {
        max-width: 100%;
    }
    fieldset { min-width: 0; }
    .contact-form input[type=text], .contact-form textarea, .text-input, .textarea { width: 100% !important; }

    /* Peta & embed */
    .map_holder, .map_holder iframe { width: 100% !important; max-width: 100%; }

    /* Footer */
    #slide_footer .one_fourth, #footer .one_fourth { width: 48% !important; }
    #back-top { right: 8px; bottom: 24px; }
}

/* Pengaman tambahan untuk tablet/ponsel */
@media (max-width: 979px) {
    html, body { overflow-x: hidden; }
    .slideshow { overflow: hidden; }
    #header #search, #header_top #search { width: 100% !important; max-width: 100%; background: none; }
    #header #search form { display: flex; align-items: center; gap: 6px; }
    #header #search input[type=text] { flex: 1 1 auto; width: auto !important; min-width: 0; }
    #cart-module { height: auto !important; position: relative !important; }
    #cart-module a { display: flex; align-items: center; gap: 8px; }
    .box table.form td, table.form td { display: block; width: 100% !important; }
    span.komen { position: static !important; display: inline-block; }
}

/* ---------- Ponsel (<= 767px) ---------- */
@media (max-width: 767px) {
    .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth,
    #slide_footer .one_fourth, #footer .one_fourth { width: 100% !important; margin: 0 0 18px !important; }

    div.prod_hold { width: calc(50% - 10px) !important; margin: 0 5px 20px !important; }
    ul#topnav2 li { flex-basis: 50%; }

    h1.cat_big_title { height: auto; }
    h1.cat_big_title img { width: 100%; height: auto; }
    h1.cat_big_title span { font-size: 24px; position: static; display: block; padding: 8px 0; color: #222 !important; }

    .heading-title, h2 { font-size: 20px; }
    .box-login .one_half { width: 100% !important; }

    /* Tabel keranjang & order: sembunyikan kolom kurang penting sudah diatur di CSS lama;
       sisanya bisa digeser */
    .cart-info, .cart-info table { width: 100%; }
    #content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .tab-nav, .htabs { display: flex; flex-wrap: wrap; }

    /* Kotak komentar */
    #content .box-comments .content { padding-left: 0; }
}

/* ---------- Ponsel kecil (<= 479px) ---------- */
@media (max-width: 479px) {
    .inner, #slide_footer .inner, #footer .inner { padding: 0 12px !important; }
    div.prod_hold { width: calc(50% - 8px) !important; margin: 0 4px 18px !important; }
    div.prod_hold .name { font-size: 12px; }
    div.prod_hold .links a.small_cart { padding: 8px 6px; font-size: 12px; }
    ul#topnav2 li { flex-basis: 48%; }
    .author_credits { text-align: center; float: none; }
}

/* ---------- Kontak WhatsApp (menggantikan Yahoo Messenger) ---------- */
.cs-wa { margin: 6px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-wa-nama { color: inherit; }
.cs-wa-tombol {
    display: inline-block; padding: 4px 10px; border-radius: 14px; background: #25d366; color: #fff !important;
    font-size: 12px; font-weight: bold; text-decoration: none;
}
.cs-wa-tombol:hover { background: #1ebe5b; }
.sosial-links li { margin-bottom: 6px; }

/* Aksesibilitas: fokus terlihat jelas */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #f26b21; outline-offset: 2px;
}

/* Menu aktif: teks tetap terbaca (sebelumnya putih di atas abu-abu muda) */
#header_bottom #main-menu ul.menu li a.aktif { background: none; color: #f26b21; border-bottom: 3px solid #f26b21; }

/* Captcha: gambar + tombol refresh berdampingan (tanpa margin negatif) */
.captcha-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 16px; clear: both; }
.captcha-row img#captcha { margin: 0; border: 1px solid #ccc; border-radius: 3px; flex: 0 0 auto; }
.captcha-refresh img { display: block; max-width: none; }

/* =========================================================================
   Perbaikan tampilan mobile/tablet (menu, kartu produk)
   ========================================================================= */
@media (max-width: 979px) {

    /* ---- Menu utama + submenu (sebelumnya submenu tak terlihat: opacity 0) ---- */
    #header_bottom #main-menu { margin-bottom: 14px; }
    #header_bottom #main-menu ul.menu li a { height: auto; padding: 14px 16px; font-size: 14px; }
    #header_bottom #main-menu ul.menu { background: #222; border-radius: 4px; overflow: hidden; }
    #header_bottom #main-menu ul.menu li { border-bottom: 1px solid #333; }
    #header_bottom #main-menu ul.menu li:last-child { border-bottom: 0; }
    #header_bottom #main-menu ul.menu li a.aktif { border-bottom: 0; border-left: 4px solid #f26b21; background: #2c2c2c; }
    #header_bottom #main-menu li ul.sub-menu {
        position: static; display: none; width: 100%; top: auto; left: auto; padding: 0; margin: 0;
        opacity: 1; visibility: visible; transition: none; background: #2c2c2c; box-shadow: none; border: 0;
    }
    #header_bottom #main-menu li.sub-terbuka > ul.sub-menu { display: block; }
    #header_bottom #main-menu li ul.sub-menu li { float: none; width: 100%; border-bottom: 1px solid #383838; }
    #header_bottom #main-menu li ul.sub-menu li a { height: auto; padding: 12px 16px 12px 32px; color: #ddd !important; font-size: 13px; white-space: normal; }
    #header_bottom #main-menu li.menu-item > a .panah { float: right; }
    #header_bottom #main-menu li.menu-item.punya-anak > a::after { content: "\25BE"; float: right; color: #f26b21; }
    #header_bottom #main-menu li.sub-terbuka > a::after { content: "\25B4"; }

    /* ---- Keranjang & kategori: dua kartu terpisah dengan jarak ---- */
    #header_bottom #menu, #header #menu { margin: 0 0 18px !important; background: none !important; }
    #cart-module {
        margin: 0 0 10px !important; padding: 12px 14px 12px 58px !important; background-color: #222 !important;
        background-position: 12px 50% !important; border: 0 !important; border-radius: 4px; min-height: 48px;
    }
    #cart-module .cart-heading { margin: 0; }
    #cart-module .cart-count, #cart-module span.cart-count { top: 34px; left: 22px; }
    ul#topnav2 { background: #222; border-radius: 4px; padding: 6px !important; gap: 4px; }
    ul#topnav2 li { border: 0 !important; background: #2c2c2c; border-radius: 3px; }
    ul#topnav2 li a { display: block; }

    /* ---- Kartu produk: tata letak fleksibel (tanpa posisi absolut ber-piksel) ---- */
    div.prod_hold {
        display: flex; flex-direction: column; position: relative; height: auto !important; padding: 0 !important;
    }
    div.prod_hold .image { display: block; order: 1; position: relative; }
    div.prod_hold .image a { display: block; }
    div.prod_hold .image img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
    div.prod_hold a.wrap_link { order: 2; display: block; }
    div.prod_hold .name { order: 2; width: auto; height: auto; margin: 10px 0 6px; padding-bottom: 6px; line-height: 1.3; }
    div.prod_hold .price_hold { order: 3; margin-bottom: 8px; }
    div.prod_hold .links { order: 4; display: block !important; position: static; left: auto; top: auto; height: auto; width: 100% !important; background: none; padding: 0; }
    div.prod_hold .links a { box-sizing: border-box; }
    div.prod_hold .links a.small_cart, div.prod_hold .links .small_cart {
        float: none; display: block; width: 100%; height: auto; margin: 0; padding: 10px 12px;
        background: #333; color: #fff; text-align: center; border-radius: 3px; font-weight: bold;
    }
    div.prod_hold .lihat, div.prod_hold .go_to_prod_link { display: none !important; }   /* tombol hover tidak berguna di layar sentuh */
    /* Label diskon di sudut kiri atas gambar */
    div.prod_hold .sale { top: 8px; bottom: auto; left: 8px; }
    div.prod_hold .save { top: 28px; bottom: auto; left: 8px; }
    div.prod_hold .new_prod { top: 8px; left: 8px; transform: none; filter: none; }
    div.prod_hold .price_hold .old_price, div.prod_hold .price_hold .price { display: inline-block; }
}

@media (max-width: 979px) {
    #header_bottom #main-menu ul.menu li a:hover, #header_bottom #main-menu ul.menu li a:focus { background: #333; color: #fff; }
}

@media (max-width: 979px) {
    #cart-module { width: auto !important; display: flex; align-items: center; }
    #cart-module a { width: 100%; }
    #cart-module .cart-heading { display: block; line-height: 24px; }
    #cart-module .cart-count, #cart-module span.cart-count { top: auto !important; bottom: 10px; left: 24px; height: auto; }
    ul#topnav2 li { flex: 0 0 calc(50% - 2px) !important; max-width: calc(50% - 2px); width: calc(50% - 2px) !important; margin: 0 !important; box-sizing: border-box; clear: none !important; }
}

/* Footer: daftar artikel terbaru */
.artikel-terbaru li { margin-bottom: 10px; }
.artikel-terbaru .tgl-artikel { display: block; font-size: 11px; color: #999; margin-top: 2px; }

/* Daftar kategori selebar kartu keranjang (sebelumnya melebihi lebar kartu di atasnya) */
@media (max-width: 979px) {
    #header_bottom #menu, #header #menu, #cart-module, ul#topnav2 { box-sizing: border-box; max-width: 100%; }
    ul#topnav2 { width: 100% !important; margin: 0 !important; }

    /* Grid produk: flex agar tinggi kartu sebaris sama (tidak ada kotak kosong akibat float) */
    :has(> .box-products) { display: flex; flex-wrap: wrap; align-items: stretch; }
    :has(> .box-products) > *:not(.box-products) { flex: 0 0 100%; width: 100%; }
    .box-products { display: contents; }
    .box-products > div.prod_hold { float: none !important; }
}