/*
 * Penyesuaian tampilan storefront.
 * Dipakai tema modern, classic, dan simple.
 */

/* =====================================================================
 * DROPDOWN — komposisi sama dengan panel A Shop (baris lega, ikon
 * berkolom tetap, sudut besar, bayangan lembut), TAPI warnanya memakai
 * aksen toko masing-masing (--accent-color) supaya tidak menabrak
 * palet yang dipilih penjual di Website Builder.
 * ===================================================================== */

.dropdown-menu {
    --bs-dropdown-min-width: 13rem;
    border: 0 !important;
    border-radius: 18px;
    padding: .45rem;
    margin-top: .4rem !important;
    box-shadow: 0 18px 40px -18px rgba(16, 24, 40, .3), 0 2px 8px -3px rgba(16, 24, 40, .12);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    border-radius: 11px;
    padding: .7rem .85rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    transition: background-color .15s ease, color .15s ease;
}

.dropdown-item > i,
.dropdown-item > .bi {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    text-align: center;
    font-size: 1.02rem;
    line-height: 1;
    margin: 0 !important;   /* menetralkan me-1 / me-2 di markup */
    opacity: .75;
    transition: opacity .15s ease, color .15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background: var(--accent-color) !important;
    color: #fff !important;
}
.dropdown-item:hover > i,
.dropdown-item:focus > i,
.dropdown-item.active > i,
.dropdown-item:active > i { color: #fff !important; opacity: 1; }

.dropdown-menu form { margin: 0; }
.dropdown-menu form > .dropdown-item { text-align: left; }

.dropdown-divider { margin: .35rem .5rem; opacity: .35; }

.dropdown-menu.show { animation: sfDropIn .16s ease-out; }
@keyframes sfDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .dropdown-menu.show { animation: none; }
}

/* =====================================================================
 * Header di layar HP — nama toko panjang jangan sampai memecah 3 baris
 * dan mendorong konten jauh ke bawah.
 * ===================================================================== */

@media (max-width: 575.98px) {

    /* ---- Nama toko / logo ---- */

    /* Mengecil mengikuti lebar layar, tapi tidak pernah lebih kecil dari .95rem */
    .navbar-brand,
    #site-name-text {
        font-size: clamp(.95rem, 4.2vw, 1.15rem) !important;
        line-height: 1.15;
    }

    /* Nama toko panjang dibatasi 2 baris — sisanya dipotong dengan elipsis,
       jadi tinggi header tidak pernah membengkak seberapa pun panjang namanya. */
    #site-name-text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
    }

    /* Tema classic menulis nama toko dengan .fs-4 + uppercase + tracking lebar */
    #site-name-text.fs-4 {
        font-size: clamp(.95rem, 4.2vw, 1.15rem) !important;
        letter-spacing: .04em !important;
    }

    #logo-img-preview {
        height: 30px !important;
        width: auto;
    }

    /* ---- Tinggi header ---- */

    .navbar { padding-top: .35rem; padding-bottom: .35rem; }
    .navbar-brand { padding-top: 0; padding-bottom: 0; margin-right: 0; }

    /* Header tema classic memakai grid baris sendiri, bukan .navbar */
    header .row.align-items-center { row-gap: .25rem; }

    /* Tombol hamburger & ikon aksi ikut dirampingkan agar sebaris dengan brand */
    .navbar-toggler { padding: .2rem .45rem; font-size: .9rem; }
    .navbar-toggler:focus { box-shadow: none; }
}