/* ==========================================================================
   BERANDA -- seluruh warnanya turunan dari satu token.

   LINGKUP
   -------
   SATU TAMPILAN UNTUK SEMUA LEBAR LAYAR.

   Sebelumnya seluruh berkas ini digerbangi @media (min-width: 1024px), dan di
   bawah ambang itu beranda ponsel yang lama tetap berjalan -- dua tata letak
   berbeda untuk satu halaman. Hasilnya persis seperti yang terlihat: kartu
   toko, panel jasa, keranjang, dan kaki halaman hanya ada di desktop, dan
   ponsel masih menampilkan barisan chip serta kisi kategori lama.

   Sekarang aturannya ditulis mobile-first: bentuk dasarnya satu kolom, dan
   @media (min-width: 1024px) hanya menaikkan jumlah kolom serta menyalakan
   rel kanan yang lengket. Beranda ponsel yang lama disembunyikan di SEMUA
   lebar layar.

   SATU SUMBER WARNA
   -----------------
   Tidak ada satu pun nilai warna yang ditulis lepas di berkas ini. Semuanya
   dicampur dari var(--primary, #2ecc71) memakai color-mix(), jadi mengganti
   --primary satu kali mengganti seluruh halaman: garis, isian, latar, teks,
   tombol, sampai bayangan.

   Di beranda, --primary saat ini bernilai #28a745 (dideklarasikan di
   dashboard_css.blade.php, menang atas #006d37 milik komponen beranda karena
   urutan dokumen). Nilai cadangan #2ecc71 hanya terpakai kalau --primary
   sama sekali tidak ada.

   KENAPA PERSENTASENYA BEGITU
   ---------------------------
   Hijau terang tidak bisa dipakai apa adanya untuk teks: #28a745 polos hanya
   3,13:1 di atas putih dan #2ecc71 hanya 2,10:1 -- keduanya jatuh di bawah
   ambang WCAG AA. Karena itu setiap peran punya campurannya sendiri, dan
   persentasenya dipilih supaya lolos 4,5:1 untuk SELURUH nilai --primary yang
   dipakai proyek ini. Diverifikasi dengan rumus WCAG:

                            #28a745    #2ecc71    #006d37    #1a8754
     hijau di putih          6,61       4,80      11,08       8,68
     putih di hijau-gelap   11,43       9,29      15,37      12,47
     tinta-3 di putih        6,98       6,05       8,77       7,42

   CADANGAN UNTUK PERAMBAN LAMA
   ----------------------------
   Tiap token ditulis dua kali: nilai tetap dulu, lalu color-mix(). Peramban
   tanpa dukungan color-mix() membuang baris kedua dan memakai yang pertama,
   bukan kehilangan warnanya sama sekali. Nilai tetapnya dihitung dari
   #28a745 -- nilai --primary yang sebenarnya berlaku hari ini.

   WARNA GALAT TIDAK IKUT DIHIJAUKAN
   ---------------------------------
   Merah galat bukan warna merek, melainkan penanda arti. Menghijaukannya
   berarti pesan galat tidak lagi bisa dibedakan dari pesan biasa hanya
   dengan melirik.
   ========================================================================== */

:root {
    --bd-primary: var(--primary, #2ecc71);

    /* teks aksen, tombol utama, harga */
    --bd-hijau: #2ecc71;
    --bd-hijau: color-mix(in srgb, var(--bd-primary) 64%, #000);

    /* bilah keadaan, ubin utama, judul di atas isian lembut */
    --bd-hijau-gelap: #2ecc71;
    --bd-hijau-gelap: color-mix(in srgb, var(--bd-primary) 40%, #000);

    /* isian ubin ikon dan lencana */
    --bd-hijau-lembut: #dff2e3;
    --bd-hijau-lembut: color-mix(in srgb, var(--bd-primary) 15%, #fff);

    /* latar halaman */
    --bd-hijau-tipis: #f2faf4;
    --bd-hijau-tipis: color-mix(in srgb, var(--bd-primary) 6%, #fff);

    --bd-garis: #c7e8cf;
    --bd-garis: color-mix(in srgb, var(--bd-primary) 26%, #fff);

    --bd-garis-tipis: #e3f4e7;
    --bd-garis-tipis: color-mix(in srgb, var(--bd-primary) 13%, #fff);

    /* Tinta pun ikut berona: hitam netral di antara hijau terbaca sebagai
       warna kedua. Ketiganya tetap jauh di atas ambang kontras. */
    --bd-tinta: #2ecc71;
    --bd-tinta: color-mix(in srgb, var(--bd-primary) 18%, #0b1410);

    --bd-tinta-2: #2ecc71;
    --bd-tinta-2: color-mix(in srgb, var(--bd-primary) 24%, #1e3128);

    --bd-tinta-3: #2ecc71;
    --bd-tinta-3: color-mix(in srgb, var(--bd-primary) 28%, #2f4a3e);

    --bd-putih: #ffffff;

    /*
     * Tinta untuk teks yang duduk DI ATAS isian --primary polos.
     *
     * Putih tidak bisa dipakai di situ: di atas #2ecc71 ia hanya 2,10:1 dan
     * di atas #28a745 3,13:1. Yang lolos justru arah sebaliknya -- hijau
     * sangat gelap. Campuran 26% memberi 6,47:1 di atas #2ecc71 dan 4,88:1
     * di atas #28a745.
     *
     * BATASNYA: pasangan ini mengandaikan --primary yang TERANG. Kalau suatu
     * saat --primary diubah ke hijau tua seperti #006d37, tinta gelap di atas
     * isian gelap hanya memberi 2,4:1 dan bilahnya harus berbalik memakai
     * teks putih. Ambangnya: --primary perlu luminansi relatif di atas ~0,25,
     * yang dipenuhi #2ecc71 (0,52) dan #28a745 (0,31).
     */
    --bd-tinta-atas-primary: #0a2b12;
    --bd-tinta-atas-primary: color-mix(in srgb, var(--bd-primary) 26%, #000);

    /* Bayangan ikut berona lewat campuran dengan transparent, bukan rgba
       hitam yang membuat panel tampak kelabu di atas latar hijau. */
    --bd-bayang: 0 1px 2px rgba(16, 67, 28, .05), 0 10px 26px rgba(16, 67, 28, .07);
    --bd-bayang: 0 1px 2px color-mix(in srgb, var(--bd-hijau-gelap) 9%, transparent),
                 0 10px 26px color-mix(in srgb, var(--bd-hijau-gelap) 13%, transparent);

    --bd-lengkung: 14px;
}

/* Latar halaman PUTIH BERSIH -- di SEMUA lebar layar, bukan hanya desktop.
   Diletakkan di luar @media supaya ponsel ikut mendapatkannya.

   ATURANNYA TETAP DIPERLUKAN WALAU WARNANYA PUTIH, dan !important-nya juga.
   Tanpa keduanya beranda duduk di atas bg-slate-50 milik Tailwind (#f8fafc),
   abu kebiruan yang di antara isian hijau langsung terbaca sebagai rona
   kedua -- bukan putih. Menghapus aturan ini tidak menghasilkan putih, ia
   mengembalikan abu itu.

   Kartu tetap terbaca di atas putih karena setiap permukaan putih di sini
   punya garis tepi berona hijau sendiri (--bd-garis pada panel dan ubin,
   --bd-garis-tipis pada kartu toko) ditambah --bd-bayang. Jadi pemisahnya
   memang garis, bukan selisih warna latar -- putih di atas putih tidak
   membuat satu pun kartu lenyap.

   --bd-hijau-tipis SENGAJA tidak ikut diubah: ia masih dipakai tiga tempat
   lain sebagai isian keadaan tenang/tersorot. Mengubah tokennya akan
   memutihkan ketiganya juga dan menghapus satu tingkat kedalaman yang tidak
   ada hubungannya dengan latar halaman. */
.bd-baru body.bd-aktif {
    background: #fff !important;
}



/* Tampilan baru TERSEMBUNYI SAMPAI DIPILIH.
   Bawaannya tampilan lama; .bd-baru dipasang pada <html> oleh skrip sebaris di
   dashboard/index.blade.php, yang berjalan sebelum <body> dirender supaya
   halamannya tidak sempat tergambar dengan tampilan yang salah. */
.bd {
    display: none;
    max-width: 1240px;
    color: var(--bd-tinta);
}

.bd-baru .bd {
    display: block;
}

/* Bagian beranda ponsel yang digantikan tampilan ini. Disembunyikan lewat
   CSS, bukan dihapus dari Blade: skrip beranda masih memasang penyimak
   pada elemen-elemen ini, dan membuangnya dari DOM akan mematikan
   pencarian serta spanduk di ponsel juga. */
.bd-baru .bd-aktif .welcome-section,
.bd-baru .bd-aktif .category-track,
.bd-baru .bd-aktif #skeleton,
.bd-baru .bd-aktif #categories-by,
.bd-baru .bd-aktif .bd-lama-kategori {
    display: none !important;
}

/* ==================================================================
   SPANDUK
   ================================================================== */

/* Spanduknya tetap milik komponen beranda -- isinya promo nyata dari API
   dan Swiper sudah terpasang padanya. Yang diubah di sini hanya
   bingkainya, supaya seirama dengan panel di bawahnya. */
.bd-baru .bd-aktif .swiper.banner1 {
    margin: 18px 0 0;
    max-width: 1240px;
    border-radius: var(--bd-lengkung);
    overflow: hidden;
    box-shadow: var(--bd-bayang);
}

.bd-baru .bd-aktif .swiper.banner1 .hero-banner {
    position: relative;
    height: 208px;
}

.bd-baru .bd-aktif .swiper.banner1 .banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lapisan gelapnya miring dari kiri: teksnya duduk di kiri, jadi sisi
   kanan foto tidak perlu ikut diredupkan. */
.bd-baru .bd-aktif .swiper.banner1 .banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(16, 67, 28, .94) 0%,
        rgba(16, 67, 28, .86) 38%,
        rgba(16, 67, 28, .35) 72%,
        rgba(16, 67, 28, .10) 100%);
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--bd-hijau-gelap) 94%, transparent) 0%,
        color-mix(in srgb, var(--bd-hijau-gelap) 86%, transparent) 38%,
        color-mix(in srgb, var(--bd-hijau-gelap) 35%, transparent) 72%,
        color-mix(in srgb, var(--bd-hijau-gelap) 10%, transparent) 100%);
}

.bd-baru .bd-aktif .swiper.banner1 .banner-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 9px;
    padding: 0 20px;
    max-width: 640px;
    color: var(--bd-putih);
}

.bd-baru .bd-aktif .swiper.banner1 .promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
    color: var(--bd-putih);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.bd-baru .bd-aktif .swiper.banner1 .banner-content h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--bd-putih);
    text-wrap: balance;
}

.bd-baru .bd-aktif .swiper.banner1 .banner-content p {
    margin: 0;
    max-width: 46ch;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
}

/* Tombol ini isian putih dengan teks hijau tua, bukan isian hijau.
   ALASANNYA DIUKUR: tombol ini duduk di atas lapisan gelap. Isian
   --primary apa adanya hanya memberi 4,48:1 untuk teksnya saat --primary
   #28a745, dan turun ke 2,51:1 saat #006d37 -- makin gelap --primary,
   makin tidak terbaca. Isian putih membalik keduanya: tombolnya paling
   menonjol di atas lapisan gelap, dan teks hijau tua di atas putih lolos
   untuk setiap nilai --primary (terendah 9,29:1). */
.bd-baru .bd-aktif .swiper.banner1 .btn-detail {
    margin-top: 4px;
    background: var(--bd-putih);
    color: var(--bd-hijau-gelap);
    border: 0;
    border-radius: 10px;
    padding: 11px 22px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: filter .15s ease;
}

.bd-baru .bd-aktif .swiper.banner1 .btn-detail:hover {
    background: var(--bd-hijau-lembut);
}

.bd-baru .bd-aktif .swiper.banner1 .banner-dots {
    bottom: 14px;
}

/* ==================================================================
   TOMBOL GANTI TAMPILAN

   Tampil di KEDUA tampilan, jadi gayanya tidak boleh ikut digerbangi
   .bd-baru seperti aturan lain di berkas ini.
   ================================================================== */

.bd-ganti {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);

    /* 110px = bilah navigasi ponsel (84px) + jaraknya dari tepi layar (16px)
       + 10px sela. Diukur, bukan dikira: tanpa itu tombolnya menimpa navigasi
       sedalam 22px. */
    bottom: calc(110px + env(safe-area-inset-bottom, 0px));
    z-index: 9998;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    /* width:max-content wajib. Elemen fixed dengan left:50% dan tanpa right
       hanya boleh selebar sisa ruang di kanannya -- di layar 390px itu 195px,
       dan labelnya membungkus jadi dua baris. */
    width: max-content;
    max-width: calc(100vw - 32px);
    white-space: nowrap;
    padding: 9px 16px;
    border: 1px solid var(--bd-garis);
    border-radius: 999px;
    background: var(--bd-putih);
    color: var(--bd-hijau);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--bd-bayang);
    transition: border-color .15s ease, background .15s ease;
}

.bd-ganti:hover {
    border-color: var(--bd-hijau);
    background: var(--bd-hijau-lembut);
}

/* Saat tampilan baru sedang aktif, tombolnya berbalik jadi isian penuh:
   pembeda yang sama dengan ubin utama, tanpa menambah warna. */
.bd-baru .bd-ganti {
    background: var(--bd-hijau);
    border-color: var(--bd-hijau);
    color: var(--bd-putih);
}

.bd-baru .bd-ganti:hover {
    background: var(--bd-hijau-gelap);
    border-color: var(--bd-hijau-gelap);
}

.bd-ganti__cap {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--bd-hijau-lembut);
    color: var(--bd-hijau-gelap);
}

/* Isian putih penuh, bukan putih tembus. Diukur: putih 22% di atas isian
   tombol menghasilkan rgb(79,158,112), dan teks putih di atasnya cuma 3,24:1 --
   di bawah ambang untuk label 9px. Putih penuh dengan teks hijau tua memberi
   9,29:1, sekaligus membuat lencananya benar-benar terbaca sebagai penanda. */
.bd-baru .bd-ganti__cap {
    background: var(--bd-putih);
    color: var(--bd-hijau-gelap);
}

/* Di layar lebar, bilah navigasi pindah ke sisi kiri (lihat buttom_nav:
   bilah bawah hanya ada di <= 767px), jadi sudut kanan bawah bebas.

   KE KANAN, BUKAN KE KIRI. Sebelumnya tombol ini digeser ke kiri dengan alasan
   menghindari "kartu pantau pesanan yang mengambang di kanan bawah" -- dan
   kartu itu diperiksa: _card_send_order.blade.php TIDAK memakai position
   fixed sama sekali, jadi premisnya tidak berlaku. Yang benar-benar ada di
   sudut kanan bawah sekarang pemberitahuan cookie, dan keduanya ditumpuk:
   tombol ini naik di atasnya lewat aturan body.pc-tampil di partial
   pemberitahuan itu.

   Ambangnya 768px, bukan 1024px, supaya tepi kanannya sama dengan
   pemberitahuan cookie (right: 20px pada >= 768px). Di bawah itu bilah
   navigasi bawah muncul dan tombolnya kembali ke tengah. */
@media (min-width: 768px) {
    .bd-ganti {
        bottom: 20px;
        left: auto;
        right: 20px;
        transform: none;
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bd-ganti {
        transition: none;
    }
}

/* ==================================================================
   EMPAT NIAT
   ================================================================== */

.bd > * + * {
    margin-top: 18px;
}

.bd-niat {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.bd-niat__i {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bd-putih);
    border: 1px solid var(--bd-garis);
    border-radius: var(--bd-lengkung);
    padding: 15px;
    text-decoration: none;
    color: var(--bd-tinta);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.bd-niat__i:hover {
    border-color: var(--bd-hijau);
    transform: translateY(-2px);
    box-shadow: var(--bd-bayang);
    text-decoration: none;
    color: var(--bd-tinta);
}

.bd-niat__ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--bd-hijau-lembut);
    color: var(--bd-hijau);
}

.bd-niat__i b {
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.bd-niat__ket {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--bd-tinta-2);
}

.bd-niat__i em {
    margin-top: auto;
    padding-top: 6px;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bd-hijau);
    font-variant-numeric: tabular-nums;
}

.bd-niat__cap {
    position: absolute;
    top: 13px;
    right: 13px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bd-hijau-lembut);
    color: var(--bd-hijau-gelap);
}

/* Ubin utama dibedakan dengan ISIAN, bukan dengan warna lain. Menandai
   prioritas lewat warna kedua akan memasukkan rona yang tidak dipakai di
   mana pun lagi. */
.bd-niat__i--utama {
    background: var(--bd-hijau-gelap);
    border-color: var(--bd-hijau-gelap);
}

.bd-niat__i--utama:hover {
    border-color: var(--bd-hijau-gelap);
}

.bd-niat__i--utama .bd-niat__ic {
    background: rgba(255, 255, 255, .17);
    color: var(--bd-putih);
}

/* Tanpa opacity: putih 90% di atas hijau tua turun ke bawah ambang untuk
   teks 11,5px. Bedanya dengan judul sudah dibawa tebal huruf. */
.bd-niat__i--utama b,
.bd-niat__i--utama em,
.bd-niat__i--utama .bd-niat__ket,
.bd-niat__i--utama:hover b,
.bd-niat__i--utama:hover em {
    color: var(--bd-putih);
}

.bd-niat__i--utama .bd-niat__cap {
    background: rgba(255, 255, 255, .2);
    color: var(--bd-putih);
}

/* ==================================================================
   BADAN DUA KOLOM
   ================================================================== */

.bd-badan {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.bd-kiri,
.bd-kanan {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Di layar sempit rel kanan hanyalah tumpukan panel berikutnya. Ia baru jadi
   kolom lengket di desktop, tempat daftar di kirinya cukup panjang untuk
   membuat keranjang hilang dari layar saat digulir. */
.bd-kanan {
    position: static;
}

/* ==================================================================
   PANEL
   ================================================================== */

.bd-panel {
    background: var(--bd-putih);
    border: 1px solid var(--bd-garis);
    border-radius: var(--bd-lengkung);
    padding: 16px;
}

.bd-panel__h {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.bd-panel__h h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--bd-tinta);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bd-panel__h p {
    margin: 3px 0 0;
    font-size: 11.5px;
    color: var(--bd-tinta-3);
}

.bd-panel__aksi {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--bd-hijau);
    text-decoration: none;
    white-space: nowrap;
}

.bd-panel__aksi:hover {
    color: var(--bd-hijau-gelap);
    text-decoration: underline;
}

.bd-cap {
    flex: 0 0 auto;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--bd-hijau-lembut);
    color: var(--bd-hijau-gelap);
    white-space: nowrap;
}

.bd-saring {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.bd-saring button {
    border: 1px solid var(--bd-garis);
    background: var(--bd-putih);
    color: var(--bd-tinta-2);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.bd-saring button:hover {
    border-color: var(--bd-hijau);
    color: var(--bd-hijau-gelap);
}

.bd-saring button[aria-pressed="true"] {
    background: var(--bd-hijau);
    border-color: var(--bd-hijau);
    color: var(--bd-putih);
}

/* Panel yang belum punya isi tetap menyebutkan alasannya. Panel kosong
   tanpa kalimat tidak bisa dibedakan dari panel yang gagal memuat. */
.bd-kosong {
    grid-column: 1 / -1;
    margin: 0;
    padding: 18px 2px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--bd-tinta-3);
}

/* ==================================================================
   TOKO
   ================================================================== */

.bd-toko {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
}

.bd-toko__i {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    border: 1px solid var(--bd-garis-tipis);
    border-radius: 12px;
    padding: 11px;
    text-decoration: none;
    color: var(--bd-tinta);
    transition: border-color .15s ease, background .15s ease;
}

.bd-toko__i:hover {
    border-color: var(--bd-hijau);
    background: var(--bd-hijau-tipis);
    text-decoration: none;
    color: var(--bd-tinta);
}

/* Inisial, bukan foto. pic_spl menyimpan base64 puluhan kilobyte per toko,
   dan sebagian barisnya hanya berisi kunci objek tanpa berkas. Huruf
   pertama selalu ada dan selalu benar. */
.bd-toko__im {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--bd-hijau-lembut);
    color: var(--bd-hijau-gelap);
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
}

.bd-toko__t {
    flex: 1;
    min-width: 0;
}

.bd-toko__n {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.bd-toko__n b {
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rating hanya dirender kalau tokonya benar-benar pernah dinilai. Delapan
   dari 31 toko punya nilai; sisanya tidak menampilkan apa pun di sini,
   bukan bintang kosong atau angka bawaan. */
.bd-nilai {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--bd-hijau-gelap);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bd-toko__m,
.bd-toko__j {
    display: block;
    font-size: 10.5px;
    color: var(--bd-tinta-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bd-toko__j {
    margin-top: 1px;
}

.bd-tanda {
    flex: 0 0 auto;
    align-self: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--bd-hijau-lembut);
    color: var(--bd-hijau-gelap);
}

/* Tombol "selebihnya" duduk DI DALAM kisi toko sebagai sel terakhir, bukan di
   bawahnya. Dengan begitu baris terakhirnya selalu penuh: lima kartu + tombol
   di keadaan tertutup, tujuh kartu + tombol saat dibentangkan. */
.bd-lagi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px dashed var(--bd-garis);
    border-radius: 12px;
    padding: 11px;
    background: transparent;
    color: var(--bd-hijau);
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    min-height: 64px;
    transition: border-color .15s ease, background .15s ease;
}

.bd-lagi:hover {
    border-color: var(--bd-hijau);
    background: var(--bd-hijau-tipis);
}

.bd-lagi svg {
    transition: transform .18s ease;
}

.bd-lagi--terbuka svg {
    transform: rotate(180deg);
}

.bd-tanda--tutup {
    background: var(--bd-garis-tipis);
    color: var(--bd-tinta-2);
}

/* ==================================================================
   KATEGORI
   ================================================================== */

/* Barisan chip lama memotong nama panjang jadi "Wisata Eduk...". Kartu di
   sini memberi dua baris, jadi nama terpanjang di basis data pun muat. */
/* Tiga kolom, bukan empat. Diukur: dengan bilah samping aplikasi 260px
   dan kolom kanan 328px, kolom kiri hanya 760px di layar 1440px. Empat
   kolom membuat isi kartu tinggal 121px dan baris "Sayur Gan - Sidomukti"
   terpotong di hampir setiap kartu. */
.bd-kat {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

.bd-kat__i {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--bd-garis-tipis);
    border-radius: 12px;
    padding: 11px 10px;
    text-decoration: none;
    color: var(--bd-tinta);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.bd-kat__i:hover {
    border-color: var(--bd-hijau);
    background: var(--bd-hijau-tipis);
    text-decoration: none;
    color: var(--bd-tinta);
}

.bd-kat__im {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bd-hijau-lembut);
    object-fit: cover;
}

.bd-kat__t {
    flex: 1;
    min-width: 0;
}

.bd-kat__t b {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.25;
}

.bd-kat__t span {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    color: var(--bd-tinta-3);
    font-variant-numeric: tabular-nums;
}

/* ==================================================================
   PRODUK
   ================================================================== */

.bd-produk {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.bd-produk__i {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bd-garis-tipis);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bd-putih);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.bd-produk__i:hover {
    border-color: var(--bd-hijau);
    box-shadow: var(--bd-bayang);
}

.bd-produk__foto {
    position: relative;
    display: block;
    text-decoration: none;
}

.bd-produk__im {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--bd-hijau-lembut);
}

/* Tanda di sudut foto HANYA dipasang kalau tokonya sedang tutup menurut
   jadwalnya. Tidak ada tanda "segar hari ini" atau sejenisnya -- tidak ada
   kolom yang bisa membuktikannya. */
.bd-produk__tutup {
    position: absolute;
    left: 8px;
    top: 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(16, 46, 26, .82);
    background: color-mix(in srgb, var(--bd-tinta) 82%, transparent);
    color: var(--bd-putih);
}

.bd-produk__b {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 11px 8px;
    flex: 1;
}

.bd-produk__b i {
    font-style: normal;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bd-tinta-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bd-produk__n {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bd-tinta);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bd-produk__n:hover {
    color: var(--bd-hijau-gelap);
    text-decoration: underline;
}

.bd-produk__harga {
    margin-top: auto;
    padding-top: 6px;
    font-size: 14px;
    font-weight: 800;
    color: var(--bd-hijau-gelap);
    font-variant-numeric: tabular-nums;
}

.bd-produk__harga small {
    font-size: 10px;
    font-weight: 600;
    color: var(--bd-tinta-3);
}

.bd-produk__k {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 11px 10px;
    border-top: 1px solid var(--bd-garis-tipis);
}

.bd-produk__k span {
    font-size: 10px;
    color: var(--bd-tinta-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bd-tambah {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 9px;
    background: var(--bd-hijau);
    color: var(--bd-putih);
    display: grid;
    place-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease;
}

.bd-tambah:hover {
    background: var(--bd-hijau-gelap);
    color: var(--bd-putih);
}

/* ==================================================================
   KERANJANG
   ================================================================== */

.bd-kj__i {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
}

.bd-kj__i + .bd-kj__i {
    border-top: 1px solid var(--bd-garis-tipis);
}

.bd-kj__t {
    flex: 1;
    min-width: 0;
}

.bd-kj__t b {
    display: block;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bd-kj__t span {
    display: block;
    font-size: 10px;
    color: var(--bd-tinta-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bd-kj__h {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bd-kj__r {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    font-size: 12px;
    color: var(--bd-tinta-2);
}

.bd-kj__r span:last-child {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.bd-kj__garis {
    border: 0;
    border-top: 1px solid var(--bd-garis);
    margin: 9px 0;
}

.bd-kj__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    font-weight: 800;
}

.bd-kj__total span:last-child {
    font-size: 16px;
    color: var(--bd-hijau-gelap);
    font-variant-numeric: tabular-nums;
}

.bd-tombol {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 11px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--bd-hijau);
    color: var(--bd-putih);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}

.bd-tombol:hover {
    background: var(--bd-hijau-gelap);
    color: var(--bd-putih);
    text-decoration: none;
}

/* ==================================================================
   KAKI HALAMAN
   ================================================================== */

.bd-kaki {
    border-top: 1px solid var(--bd-garis);
    margin-top: 28px;
    padding-top: 22px;
}

.bd-kaki__kolom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.bd-kaki h4 {
    margin: 0 0 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bd-tinta-3);
}

.bd-kaki p {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.65;
    color: var(--bd-tinta-2);
    max-width: 42ch;
}

.bd-kaki__merek {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 800;
    color: var(--bd-tinta);
}

.bd-kaki__lambang {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--bd-hijau);
    color: var(--bd-putih);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
}

.bd-kaki__tautan {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bd-kaki__tautan a {
    font-size: 11.5px;
    color: var(--bd-tinta-2);
    text-decoration: none;
}

.bd-kaki__tautan a:hover {
    color: var(--bd-hijau-gelap);
    text-decoration: underline;
}

.bd-kaki__bawah {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--bd-garis-tipis);
    font-size: 11px;
    color: var(--bd-tinta-3);
}



/* ==========================================================================
   >= 1024px

   Yang berubah di sini hanya jumlah kolom, tinggi spanduk, dan rel kanan yang
   menjadi lengket. Warna, garis, jarak dalam kartu, dan tipografi tidak
   diulang -- semuanya sudah benar sejak bentuk dasarnya.
   ========================================================================== */

@media (min-width: 1024px) {

    .bd-niat {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-top: 18px;
    }

    .bd-badan {
        grid-template-columns: minmax(0, 1fr) 328px;
        gap: 16px;
    }

    /* Rel kanan berisi keranjang dan jasa -- keduanya dipakai sambil
       menelusuri daftar di kiri, jadi ia ikut menggulir. */
    .bd-kanan {
        position: sticky;
        top: 88px;
    }

    .bd-toko {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .bd-kat {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .bd-produk {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .bd-kaki__kolom {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 24px;
    }

    .bd-baru .bd-aktif .swiper.banner1 .hero-banner {
        height: 268px;
    }

    .bd-baru .bd-aktif .swiper.banner1 .banner-content {
        gap: 12px;
        padding: 0 44px;
    }

    .bd-baru .bd-aktif .swiper.banner1 .banner-content h3 {
        font-size: 36px;
    }
}

/* ==========================================================================
   < 1024px

   Penyesuaian yang TIDAK cukup diselesaikan dengan menurunkan jumlah kolom.
   ========================================================================== */

@media (max-width: 1023px) {

    .bd-panel {
        padding: 13px;
    }

    .bd-panel__h {
        margin-bottom: 11px;
    }

    /* Sembilan kartu di atas dua kolom menyisakan satu yatim di baris kelima.
       Delapan mengisi empat baris penuh, dan yang dibuang selalu yang paling
       sedikit isinya -- daftarnya menurun sejak dari kueri. */
    .bd-kat__i:nth-child(n+9),
    .bd-produk__i:nth-child(n+9) {
        display: none;
    }

    .bd-kaki {
        margin-top: 20px;
        padding-top: 18px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {

    .bd-niat {
        grid-template-columns: repeat(2, 1fr);
    }

    .bd-badan {
        grid-template-columns: minmax(0, 1fr);
    }


    .bd-kaki__kolom {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}


@media (prefers-reduced-motion: reduce) {
    .bd-niat__i,
    .bd-toko__i,
    .bd-kat__i,
    .bd-produk__i,
    .bd-tambah,
    .bd-tombol {
        transition: none;
    }

    .bd-niat__i:hover {
        transform: none;
    }
}