/* =====================================================================
   Halaman toko (app/toko/index.php) -- lapisan tampilan "elegan"
   2026-10-07 (permintaan Mas Cahyo: clean & elegan seperti dasbor baru,
   lekukan & background cantik). Hanya CSS, dimuat SETELAH <style> bawaan.
   Hapus <link> file ini = tampilan lama.
   ===================================================================== */
:root {
    --te-hijau: #0f7a4f;
    --te-hijau-tua: #0b5e3c;
    --te-hijau-muda: #e8f5ee;
    --te-hijau-garis: #cfe8da;
    --te-teks: #0f172a;
    --te-teks-2: #475569;
    --te-redup: #94a3b8;
    --te-garis: #e7ece9;
    --te-bayang: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .07);
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--te-teks);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.005em;
    background:
        radial-gradient(1200px 420px at 50% -120px, rgba(15, 122, 79, .10), transparent 70%),
        linear-gradient(180deg, #f4f7f5 0%, #f6f8f7 40%, #f3f5f4 100%) fixed;
    background-color: #f4f6f5;
}

/* ---------- HEADER: lengkung bawah, overlay elegan ---------- */
.toko-header-wrap { border-bottom: 0 !important; margin-bottom: .9rem !important; }
.toko-header {
    min-height: 250px;
    padding: 1.4rem 1rem 2.4rem;
    border-radius: 0 0 34px 34px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(4, 30, 20, .22);
}
.toko-header .overlay {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(4, 30, 20, .10) 0%, rgba(4, 30, 20, .55) 65%, rgba(4, 30, 20, .85) 100%);
}
.toko-header::after {
    /* kilau tipis di tepi lengkung bawah */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
}
.toko-profile h3 {
    font-size: 1.32rem; font-weight: 800 !important; letter-spacing: -.015em; margin-top: 18px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.toko-profile .small.text-white { font-size: .86rem; opacity: .92; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.toko-profile .text-white-75 { color: rgba(255, 255, 255, .88) !important; font-size: .8rem; }
.toko-logo-ring { box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.toko-logo { width: 88px; height: 88px; border: 3px solid #fff; }
@media (max-width: 420px) { .toko-logo { width: 76px; height: 76px; } }
.toko-stats { gap: .45rem; margin-top: 12px; }
.toko-stat {
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
    padding: .38rem .75rem; font-size: .74rem; font-weight: 700;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.toko-actions { margin-top: 12px; }
.toko-actions .btn { box-shadow: 0 6px 16px rgba(0, 0, 0, .25); font-weight: 700; padding-top: .4rem; padding-bottom: .4rem; }
#btn-langganan { background: linear-gradient(135deg, #ef4444, #be123c); border: 0; padding-left: 1.4rem !important; padding-right: 1.4rem !important; }
#menu-button, #install-button { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }

/* ---------- KONTEN ---------- */
main.container { padding-top: .25rem; }
main h4.fw-bold { font-size: 1.15rem; font-weight: 800 !important; letter-spacing: -.01em; }
main h4.fw-bold .bi { color: var(--te-hijau) !important; }

/* tab Produk / Rekomendasi -> segmented */
#tokoTab {
    border: 0; background: #e9efec; padding: 4px; border-radius: 14px; display: flex; gap: 4px;
}
#tokoTab .nav-item { flex: 1; }
#tokoTab .nav-link {
    width: 100%; border: 0; border-radius: 11px; color: var(--te-teks-2); font-weight: 700; font-size: .9rem; padding: .55rem;
}
#tokoTab .nav-link.active { background: #fff; color: var(--te-hijau); box-shadow: 0 2px 8px rgba(15, 23, 42, .1); }

/* pencarian */
.produk-search-group { border-radius: 14px; box-shadow: var(--te-bayang); overflow: hidden; }
.produk-search-group .input-group-text, .produk-search-group .form-control { border-color: var(--te-garis) !important; padding-top: .7rem; padding-bottom: .7rem; }
.produk-search-group .form-control:focus { box-shadow: none; }

/* kategori */
.category-scroll-wrap { background: #f4f6f5; }
.category-scroll-wrap.is-stuck { background: rgba(244, 246, 245, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.scroll-hint-left { background: linear-gradient(to right, #f4f6f5 45%, rgba(244, 246, 245, 0)); }
.scroll-hint-right { background: linear-gradient(to left, #f4f6f5 45%, rgba(244, 246, 245, 0)); }
.category-chip .category-icon { box-shadow: 0 2px 8px rgba(15, 23, 42, .08); border: 1px solid var(--te-garis); }
.category-chip.active .category-icon { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--te-hijau) !important; border-color: transparent; }
.category-chip .category-label { color: var(--te-teks-2); font-weight: 600; }
.category-chip.active .category-label { color: var(--te-hijau); font-weight: 800; }

/* ---------- KARTU PRODUK ---------- */
main .row.row-cols-2 { --bs-gutter-x: .8rem; --bs-gutter-y: .8rem; }
@media (min-width: 768px) { main .row.row-cols-2 { --bs-gutter-x: 1.1rem; --bs-gutter-y: 1.1rem; } }
.product-card {
    border: 1px solid var(--te-garis) !important; border-radius: 20px !important;
    box-shadow: var(--te-bayang) !important; overflow: hidden; background: #fff;
    transition: transform .15s, box-shadow .15s;
}
.product-card:active { transform: scale(.985); }
.product-card .card-img-top { border-radius: 0 !important; }
.product-card .card-body { padding: .75rem .8rem .85rem; }
.product-card h6 {
    font-size: .88rem; font-weight: 700 !important; color: var(--te-teks); line-height: 1.28;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .35rem !important;
}
.product-card .fw-bold.text-success { color: var(--te-hijau) !important; font-size: 1rem; font-weight: 800 !important; letter-spacing: -.01em; }
.product-card .fw-bold.text-success small, .product-card .fw-bold.text-danger small { font-size: .72rem; font-weight: 600; color: var(--te-redup); }
.product-card .fw-bold.text-danger { font-size: 1rem; font-weight: 800 !important; }
.product-card small.text-muted { color: var(--te-redup) !important; font-size: .74rem; }
.qty-mini button { border-radius: 10px; border-color: var(--te-garis); background: #f6f8f7; color: var(--te-hijau); width: 30px; height: 30px; }
.qty-mini input { border-radius: 10px; border: 1px solid var(--te-garis); height: 30px; }
.btn-quick-add {
    background: linear-gradient(135deg, #12925f, var(--te-hijau-tua)) !important; border: 0 !important;
    border-radius: 12px !important; font-weight: 700; padding: .5rem 0 !important;
    box-shadow: 0 6px 14px rgba(11, 94, 60, .25);
}
.share-produk-btn { color: var(--te-hijau); box-shadow: 0 3px 10px rgba(0, 0, 0, .15); }
.flashsale-bar { border-radius: 0 !important; }

/* testimoni */
.testimoni-card { background: #fff; border: 1px solid var(--te-garis); border-radius: 18px; box-shadow: var(--te-bayang); }

/* tombol keranjang */
#cart-button {
    background: linear-gradient(135deg, #12925f, var(--te-hijau-tua)) !important;
    box-shadow: 0 12px 26px rgba(11, 94, 60, .4) !important; border: 0;
}

/* ---------- MODAL / OFFCANVAS ---------- */
.modal-content { border: 0; border-radius: 22px; box-shadow: 0 24px 60px rgba(15, 23, 42, .25); }
.modal-title { font-weight: 800; letter-spacing: -.01em; }
.offcanvas { border-radius: 0 22px 22px 0; }
.offcanvas.offcanvas-bottom { border-radius: 22px 22px 0 0; }
.btn-success { background: var(--te-hijau); border-color: var(--te-hijau); }
.btn-success:hover, .btn-success:active { background: var(--te-hijau-tua) !important; border-color: var(--te-hijau-tua) !important; }
.form-control, .form-select { border-radius: 12px; }
.form-control:focus, .form-select:focus { border-color: var(--te-hijau); box-shadow: 0 0 0 .2rem rgba(15, 122, 79, .15); }