/* --- Global Reset & Base Styles for Header --- */
.site-header {
    background-color: #ffffff; /* Latar belakang putih bersih */
    border-bottom: 1px solid #e0e0e0; /* Garis bawah halus */
    padding: 0; /* Padding vertikal */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Bayangan lembut */
    position: relative; /* Pastikan posisi relatif untuk penempatan elemen anak */
    z-index: 1000; /* Pastikan header selalu di atas konten lain */
}

/* --- Main Header Area Layout --- */
.header-main-area {
    max-width: 1280px; /* Batasi lebar maksimum konten header */
    margin: 0 auto; /* Pusatkan header */
    display: flex; /* Gunakan Flexbox untuk tata letak */
    justify-content: space-between; /* Sebarkan elemen ke ujung */
    align-items: center; /* Tengah-kan elemen secara vertikal */
    padding: 0 25px; /* Padding horizontal untuk ruang */
}

/* --- Site Branding (Logo & Nama Toko) --- */
.site-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Cegah logo mengecil */
}

.site-branding .custom-logo-link img {
    max-height: 50px; /* Tinggi maksimum logo */
    width: auto;
    margin-right: 15px; /* Jarak antara logo dan nama toko */
}

.site-branding .site-title {
    margin: 0;
    line-height: 1.2;
}

.site-branding .site-title a {
    text-decoration: none;
    color: #333333; /* Warna teks nama toko */
    font-size: 2.2em; /* Ukuran font nama toko */
    font-weight: 700; /* Tebal */
}

.site-branding .site-description { /* Sembunyikan deskripsi situs jika tidak diinginkan */
    display: none;
}

/* --- Main Navigation (Menu) --- */
.main-navigation {
    flex-grow: 1; /* Biarkan menu mengisi ruang yang tersedia */
    text-align: center; /* Tengah-kan menu jika ada ruang */
}

.main-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex; /* Tampilkan item menu secara horizontal */
    justify-content: center; /* Tengah-kan item menu */
    gap: 5px; /* Sedikit jarak antar menu item */
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #555555; /* Warna teks menu */
    font-weight: 500;
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 4px; /* Sudut membulat untuk item menu */
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a { /* Tambahan untuk parent menu aktif */
    color: #007bff; /* Warna hover/aktif (biru) */
    background-color: #e6f2ff; /* Latar belakang saat hover/aktif */
}

/* Sub-menu styling */
.main-navigation ul ul {
    display: none;
    position: absolute;
    background-color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    z-index: 999;
    border-top: 3px solid #007bff; /* Garis biru di atas submenu */
    left: 0; /* Sejajarkan dengan parent */
    text-align: left; /* Teks submenu rata kiri */
    flex-direction: column; /* Tumpuk item submenu vertikal */
    padding: 5px 0; /* Padding untuk submenu */
}

.main-navigation ul li:hover > ul {
    display: flex; /* Tampilkan submenu saat hover */
}

.main-navigation ul ul li {
    border-bottom: 1px solid #eeeeee; /* Garis pemisah antar item submenu */
}

.main-navigation ul ul li:last-child {
    border-bottom: none;
}

.main-navigation ul ul a {
    padding: 10px 20px;
    font-weight: normal;
    color: #444444;
    border-radius: 0; /* Hilangkan sudut membulat untuk submenu */
}

.main-navigation ul ul a:hover {
    background-color: #f5f5f5;
    color: #007bff;
}

/* Mobile Menu Toggle - Sembunyikan secara default untuk desktop */
.menu-toggle {
    display: none;
}

/* --- Header Utilities (Search, Cart, Account) --- */
.header-utilities {
    display: flex;
    align-items: center;
    gap: 20px; /* Jarak antar utilitas */
    flex-shrink: 0; /* Cegah utilitas mengecil */
    margin-left: 20px; /* Jarak dari menu */
}

/* WooCommerce Search Form */
.header-search {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #dddddd;
    border-radius: 25px; /* Bentuk pil */
    overflow: hidden; /* Pastikan input dan tombol tidak meluap */
    transition: all 0.3s ease;
    width: 200px; /* Lebar default input search */
    height: 40px; /* Atur tinggi kolom pencarian */
    box-sizing: border-box; /* Pastikan padding dan border termasuk dalam tinggi */
    /* padding: 20px; <-- Hapus ini, karena sudah diatur oleh padding input dan tinggi. Ini menyebabkan ukuran terlalu besar. */
}

.header-search:focus-within { /* Efek border saat input difokus */
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.header-search .woocommerce-product-search {
    display: flex;
    width: 100%;
    height: 100%; /* Pastikan form pencarian mengisi tinggi */
}

.header-search .woocommerce-product-search .search-field {
    border: none; /* Hilangkan border asli input */
    padding: 0 15px; /* Padding horizontal saja, vertikal diatur oleh height */
    font-size: 0.9em; /* Ukuran font */
    flex-grow: 1; /* Biarkan input mengisi ruang */
    outline: none; /* Hilangkan outline default focus */
    height: 100%; /* Pastikan input mengisi tinggi parent */
    line-height: 1; /* Atur line-height untuk penengahan vertikal teks */
}

.header-search .woocommerce-product-search .button {
    background-color: #007bff; /* Warna tombol pencarian */
    color: #ffffff;
    border: none;
    padding: 0 10px; /* Padding horizontal saja */
    cursor: pointer;
    font-size: 1em; /* Ukuran font tombol */
    border-radius: 0 25px 25px 0; /* Sudut membulat hanya di kanan */
    transition: background-color 0.3s ease;
    height: 100%; /* Pastikan tombol mengisi tinggi parent */
    display: flex; /* Untuk menengahkan ikon/teks di tombol */
    align-items: center; /* Tengah-kan ikon/teks secara vertikal */
    justify-content: center; /* Tengah-kan ikon/teks secara horizontal */
    /* display: none; <-- Hapus ini jika Anda ingin tombolnya terlihat */
}

.header-search .woocommerce-product-search .button:hover {
    background-color: #0056b3;
}

/* WooCommerce Mini Cart */
.header-cart .cart-contents {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #555555;
    font-weight: 600;
    transition: color 0.3s ease;
}

.header-cart .cart-contents:hover {
    color: #007bff;
}

.header-cart .cart-icon {
    font-size: 1.6em; /* Ukuran ikon keranjang */
    margin-right: 8px; /* Jarak ke teks */
    line-height: 1; /* Pastikan ikon sejajar */
}

.header-cart .cart-count {
    background-color: #dc3545; /* Warna badge count (merah) */
    color: #ffffff;
    border-radius: 50%;
    padding: 3px 8px; /* Padding lebih besar untuk badge */
    font-size: 0.7em;
    margin-right: 5px;
    min-width: 22px; /* Agar tetap bulat walau 1 digit */
    text-align: center;
    display: inline-flex; /* Untuk penengahan yang lebih baik */
    justify-content: center;
    align-items: center;
    height: 22px;
}

.header-cart .cart-total {
    font-size: 0.95em;
    white-space: nowrap; /* Cegah angka total terpotong */
}

/* My Account Link with Icon */
.header-my-account a {
    display: flex; /* Gunakan flexbox untuk menata ikon dan teks */
    align-items: center; /* Tengah-kan secara vertikal */
    text-decoration: none;
    color: #555555;
    font-weight: 600;
    transition: color 0.3s ease;
}

.header-my-account a:hover {
    color: #007bff;
}

.header-my-account .account-icon {
    font-size: 1.6em; /* Ukuran ikon */
    line-height: 1; /* Pastikan ikon sejajar dengan baik */
    margin-right: 8px; /* Jarak antara ikon dan teks (jika teks ada) */
}

/* --- Responsive Adjustments for Header --- */
@media (max-width: 1100px) {
    .header-main-area {
        flex-wrap: wrap; /* Izinkan elemen wrap ke baris baru */
        padding: 0 15px;
    }

    .site-branding {
        flex-basis: 100%; /* Logo mengambil lebar penuh */
        justify-content: center; /* Pusatkan logo */
        margin-bottom: 15px; /* Jarak ke bawah */
    }
    .site-branding .custom-logo-link img {
        margin-right: 0;
        margin-bottom: 10px;
    }
    .site-branding {
        flex-direction: column; /* Tumpuk logo dan teks secara vertikal */
    }

    .main-navigation {
        order: 3; /* Pindahkan navigasi ke bawah */
        flex-basis: 100%;
        margin-top: 15px;
    }

    .header-utilities {
        order: 2; /* Pindahkan utilitas di bawah branding */
        flex-basis: 100%;
        justify-content: center; /* Pusatkan utilitas */
        margin-top: 0;
        margin-left: 0;
    }
    /* Untuk kolom pencarian yang lebih kecil pada tablet landscape/laptop kecil */
    .header-search {
        width: 180px;
    }
}

@media (max-width: 768px) {
    .header-main-area {
        flex-direction: column; /* Semua elemen bertumpuk vertikal */
        align-items: center;
    }

    .site-branding {
        margin-bottom: 15px;
    }

    .main-navigation {
        width: 100%; /* Navigasi mengambil lebar penuh */
        margin-bottom: 15px;
    }
    .main-navigation ul {
        flex-direction: column; /* Tampilkan menu vertikal */
        align-items: center; /* Tengah-kan item menu */
        display: none; /* Sembunyikan secara default, akan di-toggle JS */
        border-top: 1px solid #eee;
        padding-top: 10px;
    }
    .main-navigation.toggled ul { /* Kelas untuk menampilkan menu saat toggle */
        display: flex;
    }
    .main-navigation li {
        width: 100%;
        border-bottom: 1px solid #eee;
    }
    .main-navigation li:last-child {
        border-bottom: none;
    }
    .main-navigation ul ul { /* Submenu di mobile, tampilkan sebagai bagian dari menu utama */
        position: static;
        box-shadow: none;
        border-top: none;
        background-color: #f9f9f9;
        padding-left: 20px; /* Indent submenu */
    }

    .menu-toggle { /* Tampilkan tombol toggle menu */
        display: block;
        align-self: flex-end; /* Posisikan di kanan atas */
        margin-bottom: 10px;
        font-size: 1.2em;
        padding: 5px 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #f0f0f0;
    }

    .header-utilities {
        flex-wrap: wrap; /* Biarkan utilitas wrap jika terlalu banyak */
        justify-content: center;
        width: 100%;
        margin-bottom: 15px;
    }

    .header-search {
        width: 100%; /* Search bar mengambil lebar penuh */
        max-width: 250px; /* Batasi agar tidak terlalu lebar */
    }
    /* Sembunyikan teks "My Account" di layar lebih kecil dari 768px */
    .header-my-account .account-text {
        display: none;
    }
    .header-my-account .account-icon {
        margin-right: 0; /* Hilangkan margin jika teks disembunyikan */
    }
    .header-cart .cart-total {
        /* display: none; <-- Jika ingin sembunyikan total harga di tablet juga */
    }
}

@media (max-width: 480px) {
    .site-branding .site-title a {
        font-size: 1.8em;
    }
    .header-search {
        width: 90%; /* Sedikit lebih kecil pada layar sangat kecil */
        max-width: 200px; /* Batasi lebar pada mobile sangat kecil */
    }
    .header-utilities {
        gap: 10px; /* Kurangi jarak antar utilitas */
    }
    .header-cart .cart-total {
        display: none; /* Sembunyikan total harga di mobile sangat kecil */
    }
}

/* --- General Layout and Wrapper --- */
.csd-shop-wrapper {
    max-width: 1280px; /* Lebar maksimum wrapper yang sedikit lebih besar */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* --- Shop Title --- */
.csd-shop-title {
    font-size: 2.8em;
    color: #333;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
    border-bottom:1px solid #ccc;
}

/* --- Product Grid --- */
.csd-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 kolom */
    gap: 25px; /* Jarak antar produk */
    margin-bottom: 40px;
    margin-top:25px;
}

/* --- Individual Product Item --- */
.csd-product-item {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* Rapi tengah */
    padding: 15px 10px 60px; /* Tambahkan ruang bawah untuk tombol */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    min-height: 400px; /* Pastikan tinggi cukup agar semua elemen tampil */
}

.csd-product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Sale Flash / Badge "Obrol!" */
.csd-product-item .onsale {
    position: absolute;
    top: -5px !important; /* Geser sedikit ke atas agar terlihat */
    left: -40px !important; /* Geser sedikit ke kiri */
    color: #fff;
    padding: 6px 10px !important;
    border-radius: 2px !important;
    width: 100px !important; /* Lebar lingkaran */
    height: 40px !important; /* Tinggi lingkaran */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.7em !important;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Bayangan untuk efek 3D */
    transform: rotate(-45deg) !important; /* Sedikit rotasi agar menarik */
    white-space: nowrap; /* Pastikan teks tidak pecah */
    overflow: hidden; /* Sembunyikan bagian teks jika terlalu panjang */
    text-align: center;
    background-color: #d3091c !important;
    padding-bottom: 2px !important; /* sebelumnya mungkin terlalu besar */
  margin-bottom: 1px !important;  /* atur agar tidak terlalu renggang antar produk */
}

/* Styling for elements within 'content-product.php' */
/* --- Perubahan Layout Produk Sesuai Gambar Preview --- */

.csd-product-item {
  text-align: center;
  background: #fff;
  padding: 15px 10px 60px;
  border: 1px solid #eee;
  border-radius: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 400px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-product-image {
  width: 512px;
  object-fit: contain;
  margin-bottom: 10px;
}

.custom-title {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 5px;
  line-height: 1.4;
  height: 2.8em; /* ~2 baris teks */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.custom-title a {
  text-decoration: none; /* Hilangkan underline */
  color: inherit;         /* Warna teks mengikuti elemen induk */
}

.custom-title a:hover {
  text-decoration: none;  /* Pastikan tetap tidak muncul saat hover */
  color: #0073aa;         /* (Opsional) warna hover */
}

.star-rating {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}

.star-rating::before {
  content: "★★★★";
  opacity: 1;
  color: #ccc;
}

.star-rating span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #ffc107;
}

.star-rating span::before {
  content: "★★★★";
}

/* Untuk kompatibilitas tema WooCommerce bawaan */

.custom-price {
  font-size: 16px;
  font-weight: bold;
  color: #28a745;
  margin: 5px 0 10px;
  min-height: 32px; /* agar posisi tetap walau tidak ada harga coret */
  position:relative !important;
  display: flex; /* Jadikan flex container */
  align-items: center; /* Vertikal sejajar */
  gap: 8px; /* Jarak antara harga coret dan diskon */
  flex-wrap: wrap !important; /* Agar bisa turun ke bawah jika sempit */

}

.custom-price del {
  font-size: 14px;
  color: #999;
  display: block;
  margin-bottom: 3px;
}

.csd-product-item .button.add_to_cart_button {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  border-radius: 0 0 8px 8px;
  padding: 12px;
  width: 100%;
  background-color: #007bff;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
}


.csd-product-item .button.add_to_cart_button:hover {
    background-color: #0056b3;
}


/* --- Pagination --- */
.woocommerce-pagination {
    text-align: center;
    margin-top: 40px;
}

.woocommerce-pagination ul.page-numbers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: 8px;
}

.woocommerce-pagination ul.page-numbers li {
    display: inline-block;
}

.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
    display: block;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-decoration: none;
    color: #555;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.woocommerce-pagination ul.page-numbers li span.current {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.woocommerce-pagination ul.page-numbers li a:hover {
    background-color: #f0f0f0;
    color: #007bff;
    border-color: #007bff;
}

/* --- Responsive Adjustments for Main Content --- */
@media (max-width: 1024px) {
    .csd-product-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 kolom pada layar tablet besar */
    }
}

@media (max-width: 768px) {
    .csd-product-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 kolom pada tablet */
        gap: 20px;
    }

    .csd-shop-title {
        font-size: 2em;
        margin-bottom: 30px;
    }

    .csd-product-item .onsale {
        width: 50px;
        height: 50px;
        font-size: 0.8em;
    }
    .csd-product-item img.woocommerce-loop-product__thumbnail {
        height: 180px;
    }
    .csd-product-item h2.woocommerce-loop-product__title {
        font-size: 1.1em;
        height: 2.4em; /* Sesuaikan tinggi baris pada mobile */
        -webkit-line-clamp: 2;
    }
    .csd-product-item .woocommerce-loop-product__excerpt,
    .csd-product-item .description {
        font-size: 0.85em;
        height: 3.8em; /* Sesuaikan tinggi baris pada mobile */
        -webkit-line-clamp: 3;
    }
    .csd-product-item .price {
        font-size: 1.1em; /* Harga lebih kecil lagi di mobile */
    }
    .csd-product-item .button.add_to_cart_button {
        padding: 10px 15px;
        font-size: 0.9em;
    }
 .custom-price {
    font-size: 15px;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 5px;
  }

  .custom-rating {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .custom-rating .star-rating {
    padding: 0;
  }
}


@media (max-width: 480px) {
    .csd-product-grid {
        grid-template-columns: 1fr; /* Satu kolom pada perangkat mobile */
        gap: 15px;
    }

    .csd-shop-wrapper {
        padding: 15px;
    }

    .csd-shop-title {
        font-size: 1.8em;
        margin-bottom: 25px;
    }

    .csd-product-item img.woocommerce-loop-product__thumbnail {
        height: 160px;
    }

    .csd-product-item h2.woocommerce-loop-product__title {
        height: auto;
        -webkit-line-clamp: unset;
    }

    .csd-product-item .woocommerce-loop-product__excerpt,
    .csd-product-item .description {
        height: auto;
        -webkit-line-clamp: unset;
    }
    .csd-product-item .price {
        font-size: 1.0em; /* Harga sangat kecil di mobile */
    }
     .custom-price {
    flex-direction: row; /* Boleh vertikal jika sempit */
  }

  .custom-rating {
    font-size: 12px;
  }
}

/* === Wrapper Flex untuk Filter Bar === */
.woocommerce-ordering {
  margin: 0;
}

.woocommerce-ordering select.orderby {
  padding: 10px 15px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  min-width: 220px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20,50 70,100 120,50' fill='none' stroke='%23666' stroke-width='20'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce-ordering select.orderby:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* === Filter Kategori Dropdown === */
.csd-category-dropdown-form {
  margin: 0;
}

.csd-category-dropdown {
  padding: 10px 15px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  min-width: 220px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20,50 70,100 120,50' fill='none' stroke='%23666' stroke-width='20'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.csd-category-dropdown:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* === Responsive Mobile: Dropdown Stack Vertikal === */
@media (max-width: 768px) {
  .csd-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .woocommerce-ordering select.orderby,
  .csd-category-dropdown {
    width: 100%;
    max-width: 100%;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .csd-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .woocommerce-ordering select.orderby,
  .csd-category-dropdown {
    width: 100%;
    max-width: 100%;
    font-size: 1rem;
  }
}