/* Toko Rakitronik (beranda, produk, keranjang, status pesanan). Mode terang saja; warna dari kerangka.css. */
main:has(.tb) { max-width: none; padding: 0; }
.tb { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tb h1, .tb h2, .tb h3 { color: var(--k-teks); }
.tb-judul-bagian { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 44px 0 16px; }
.tb-judul-bagian h2 { margin: 0; font-size: 24px; }
.tb-judul-bagian a { font-weight: 700; font-size: 14.5px; color: var(--k-hijau); text-decoration: none; }

/* tombol */
.tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 12px;
  font-weight: 700; font-size: 15px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; margin: 0; }
.tb-btn.utama { background: var(--k-hijau); color: #FFFFFF; border-color: var(--k-hijau); } .tb-btn.utama:hover { background: var(--k-hijau-tua); border-color: var(--k-hijau-tua); }
.tb-btn.garis { background: var(--k-putih); color: var(--k-hijau); border-color: var(--k-hijau); } .tb-btn.garis:hover { background: var(--k-hijau-muda); }
.tb-btn.lebar { width: 100%; }
.tb-btn:disabled { opacity: .6; cursor: default; }

/* hero */
.tb-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; background: var(--k-putih);
  border: 1px solid var(--k-garis); border-radius: 20px; padding: 40px 44px; margin-top: 24px; overflow: hidden; }
.tb-hero-label { display: inline-block; font-size: 13px; font-weight: 800; color: var(--k-hijau); background: var(--k-hijau-muda);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.tb-hero h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 14px; }
.tb-hero p { color: var(--k-teks-2); font-size: 17px; max-width: 52ch; margin: 0 0 24px; }
.tb-hero-aksi { display: flex; gap: 10px; flex-wrap: wrap; }
.tb-kolase { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tb-kolase a { display: block; border-radius: 14px; overflow: hidden; background: var(--k-latar); aspect-ratio: 1; }
.tb-kolase img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.tb-kolase a:hover img { transform: scale(1.03); }

/* jaminan */
.tb-jaminan { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tb-jaminan li { display: flex; gap: 12px; align-items: center; background: var(--k-putih); border: 1px solid var(--k-garis); border-radius: 14px; padding: 14px 16px; }
.tb-jaminan svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--k-hijau-muda); stroke: var(--k-hijau);
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-jaminan b { display: block; font-size: 14.5px; color: var(--k-teks); }
.tb-jaminan span { font-size: 13px; color: var(--k-teks-2); }

/* kategori */
.tb-kategori { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tb-kategori a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; background: var(--k-putih);
  border: 1px solid var(--k-garis); border-radius: 14px; padding: 14px 10px; text-decoration: none; color: var(--k-teks); transition: border-color .15s, box-shadow .15s; }
.tb-kategori a:hover { border-color: var(--k-hijau); box-shadow: var(--k-bayang); }
.tb-kategori img { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; }
.tb-kategori b { font-size: 14px; line-height: 1.25; } .tb-kategori span { font-size: 12.5px; color: var(--k-teks-2); }

/* katalog: saringan samping + grid */
.tb-katalog { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.tb-saring { position: sticky; top: 172px; background: var(--k-putih); border: 1px solid var(--k-garis); border-radius: 14px; padding: 16px; }
.tb-saring h3 { font-size: 14px; margin: 0 0 8px; }
.tb-saring h3 + * { margin-bottom: 18px; }
.tb-saring ul { list-style: none; padding: 0; margin: 0; }
.tb-saring button.tb-kat { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; width: 100%; padding: 7px 10px; border-radius: 8px;
  font-size: 14px; color: var(--k-teks-2); cursor: pointer; }
.tb-saring button.tb-kat:hover { background: var(--k-latar); color: var(--k-teks); }
.tb-saring button.tb-kat.aktif { background: var(--k-hijau-muda); color: var(--k-hijau); font-weight: 700; }
.tb-saring button.tb-kat span { color: var(--k-teks-2); font-weight: 500; }
.tb-saring label { display: flex; gap: 10px; align-items: center; margin: 6px 0; font-weight: 500; font-size: 14px; color: var(--k-teks-2); }
.tb-saring input[type=checkbox] { accent-color: var(--k-hijau); width: 18px; height: 18px; }
.tb-alat { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.tb-alat p { margin: 0; color: var(--k-teks-2); font-size: 14px; }
.tb-alat select { margin: 0; min-height: 40px; border-radius: 10px; font-size: 14px; padding: 0 10px; width: auto; }
.tb-pil-hp { display: none; }

.tb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.tb-kartu { position: relative; display: flex; flex-direction: column; background: var(--k-putih); border: 1px solid var(--k-garis); border-radius: 14px;
  overflow: hidden; transition: box-shadow .18s, border-color .18s; }
.tb-kartu:hover { box-shadow: var(--k-bayang); border-color: #D3D8D3; }
.tb-kartu[hidden] { display: none; }
.tb-kartu > a { color: inherit; text-decoration: none; display: flex; flex-direction: column; flex: 1; }
.tb-kartu-foto { aspect-ratio: 1; background: var(--k-latar); overflow: hidden; }
.tb-kartu-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.tb-kartu:hover .tb-kartu-foto img { transform: scale(1.03); }
.tb-kartu-isi { padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tb-kartu-kat { font-size: 12px; color: var(--k-teks-2); }
.tb-kartu-nama { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--k-teks); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.tb-kartu-harga { font-size: 17px; font-weight: 800; color: var(--k-teks); margin-top: 4px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tb-tersedia { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--k-teks-2); }
.tb-tersedia::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #C77A2F; flex: none; }
.tb-tersedia.backorder::before { background: #4A5BC7; } .tb-tersedia.siap::before { background: var(--k-hijau); }
.tb-kartu-tambah { margin: 4px 14px 14px; min-height: 38px; border-radius: 10px; border: 1.5px solid var(--k-hijau); background: var(--k-putih);
  color: var(--k-hijau); font-weight: 700; font-size: 14px; cursor: pointer; }
.tb-kartu-tambah:hover { background: var(--k-hijau); color: #FFFFFF; }
.tb-label-awas { position: absolute; top: 10px; left: 10px; background: #B42318; color: #FFFFFF; font-size: 11.5px; font-weight: 800;
  padding: 3px 8px; border-radius: 6px; z-index: 1; }
.tb-kosong { background: var(--k-putih); border: 1px dashed var(--k-garis); border-radius: 14px; padding: 28px; text-align: center; color: var(--k-teks-2); }
.tb-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; background: var(--k-teks); color: #FFFFFF;
  padding: 12px 18px; border-radius: 12px; font-size: 14.5px; font-weight: 600; transition: opacity .2s, transform .2s; z-index: 50; pointer-events: none; }
.tb-toast.tampil { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.tb-toast a { color: #9FE3BE; margin-left: 10px; }

/* pita jasa PCB, cara pesan */
.tb-pita { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; background: var(--k-hijau);
  color: #E9F3EE; border-radius: 20px; padding: 32px 40px; }
.tb-pita h2 { color: #FFFFFF !important; margin: 0 0 6px; font-size: 24px; } .tb-pita p { margin: 0; max-width: 62ch; }
.tb-pita .tb-btn.utama { background: #FFFFFF; color: var(--k-hijau); } .tb-pita .tb-btn.utama:hover { background: var(--k-hijau-muda); }
.tb-pita .tb-btn.garis { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.6); }
.tb-pita-aksi { display: flex; gap: 10px; flex-wrap: wrap; }
.tb-cara { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: c; }
.tb-cara li { counter-increment: c; background: var(--k-putih); border: 1px solid var(--k-garis); border-radius: 14px; padding: 20px; color: var(--k-teks-2); font-size: 14.5px; }
.tb-cara li::before { content: counter(c); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--k-hijau-muda);
  color: var(--k-hijau); font-weight: 800; margin-bottom: 12px; }
.tb-cara b { display: block; color: var(--k-teks); font-size: 15.5px; margin-bottom: 4px; }

/* halaman produk */
.tb-jejak { font-size: 13.5px; color: var(--k-teks-2); padding: 18px 0 14px; }
.tb-jejak a { color: var(--k-teks-2); text-decoration: none; } .tb-jejak a:hover { color: var(--k-hijau); }
.tb-produk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; background: var(--k-putih);
  border: 1px solid var(--k-garis); border-radius: 20px; padding: 28px; }
.tb-galeri-utama { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--k-latar); display: block; }
.tb-galeri-kecil { display: flex; gap: 8px; margin-top: 10px; }
.tb-galeri-kecil button { all: unset; cursor: pointer; width: 68px; height: 68px; border-radius: 10px; overflow: hidden; border: 2px solid var(--k-garis); }
.tb-galeri-kecil button.aktif { border-color: var(--k-hijau); }
.tb-galeri-kecil img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-info-kat { font-size: 13.5px; font-weight: 700; color: var(--k-hijau); text-decoration: none; }
.tb-info h1 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -0.02em; margin: 8px 0 6px; }
.tb-sku { font-size: 13px; color: var(--k-teks-2); margin: 0 0 16px; }
.tb-harga { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 16px; font-variant-numeric: tabular-nums; color: var(--k-teks); }
.tb-ketersediaan { display: flex; gap: 12px; align-items: flex-start; background: var(--k-latar); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; color: var(--k-teks-2); }
.tb-ketersediaan b { display: block; color: var(--k-teks); font-size: 14.5px; }
.tb-ketersediaan svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--k-hijau); stroke-width: 2; stroke-linecap: round; margin-top: 2px; }
.tb-awas { background: #FDECEA; color: #7A1A12; border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-bottom: 16px; }
.tb-beli { display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; align-items: center; }
.tb-beli .tb-btn { width: 100%; }
.tb-jumlah { display: inline-flex; align-items: center; border: 1.5px solid var(--k-garis); border-radius: 12px; overflow: hidden; background: var(--k-putih); height: 46px; }
.tb-jumlah button { all: unset; cursor: pointer; width: 40px; height: 100%; display: grid; place-items: center; font-size: 18px; color: var(--k-teks); }
.tb-jumlah button:hover { background: var(--k-latar); }
.tb-jumlah input { width: 46px; height: 100%; text-align: center; border: 0; padding: 0; margin: 0; font-weight: 700; -moz-appearance: textfield; background: transparent; min-height: 0; }
.tb-jumlah input:focus { outline: none; }
.tb-jumlah input::-webkit-outer-spin-button, .tb-jumlah input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tb-masuk { grid-column: 1 / -1; margin: 2px 0 0; font-size: 14px; color: var(--k-hijau); font-weight: 600; }
.tb-layanan { list-style: none; padding: 16px 0 0; margin: 18px 0 0; border-top: 1px solid var(--k-garis); display: grid; gap: 10px; font-size: 14px; color: var(--k-teks-2); }
.tb-layanan li { display: flex; gap: 10px; align-items: center; }
.tb-layanan svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--k-hijau); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-tab { margin-top: 20px; background: var(--k-putih); border: 1px solid var(--k-garis); border-radius: 20px; overflow: hidden; }
.tb-tab-kepala { display: flex; gap: 4px; border-bottom: 1px solid var(--k-garis); padding: 0 16px; overflow-x: auto; }
.tb-tab-kepala button { all: unset; cursor: pointer; padding: 16px 14px; font-weight: 700; font-size: 15px; color: var(--k-teks-2); border-bottom: 2.5px solid transparent; white-space: nowrap; }
.tb-tab-kepala button[aria-selected="true"] { color: var(--k-hijau); border-bottom-color: var(--k-hijau); }
.tb-tab-isi { padding: 24px 28px; font-size: 15px; color: var(--k-teks); }
.tb-tab-isi[hidden] { display: none; }
.tb-tab-isi ul { padding-left: 20px; margin: 0 0 12px; } .tb-tab-isi li { margin-bottom: 6px; }
.tb-tab-isi h3 { font-size: 16px; margin: 18px 0 8px; } .tb-tab-isi h3:first-child { margin-top: 0; }
.tb-tab-isi p { max-width: 75ch; }
.tb-spek { width: 100%; max-width: 720px; border-collapse: collapse; font-size: 14.5px; }
.tb-spek th, .tb-spek td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--k-garis); vertical-align: top; }
.tb-spek tr:nth-child(odd) { background: var(--k-latar); }
.tb-spek th { font-weight: 600; color: var(--k-teks-2); width: 38%; }

/* keranjang + checkout */
.tb-langkah { list-style: none; display: flex; gap: 8px; padding: 0; margin: 20px 0; font-size: 14px; font-weight: 700; color: var(--k-teks-2); }
.tb-langkah li { display: flex; align-items: center; gap: 8px; }
.tb-langkah li + li::before { content: ""; width: 28px; height: 1.5px; background: var(--k-garis); }
.tb-langkah span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--k-garis); color: var(--k-teks-2); font-size: 13px; }
.tb-langkah li.aktif { color: var(--k-teks); } .tb-langkah li.aktif span { background: var(--k-hijau); color: #FFFFFF; }
.tb-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.tb-panel { background: var(--k-putih); border: 1px solid var(--k-garis); border-radius: 16px; padding: 20px 22px; }
.tb-panel h2 { font-size: 18px; margin: 0 0 14px; }
.tb-baris { display: grid; grid-template-columns: 22px 80px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--k-garis); }
.tb-baris:last-child { border-bottom: 0; }
.tb-baris img { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; background: var(--k-latar); display: block; }
.tb-baris-nama { font-weight: 600; color: var(--k-teks); text-decoration: none; line-height: 1.35; }
.tb-baris-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13.5px; color: var(--k-teks-2); }
.tb-baris-kanan { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tb-baris-harga { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--k-teks); }
.tb-hapus { all: unset; cursor: pointer; font-size: 13px; color: #B42318; font-weight: 600; }
.tb-hapus:hover { text-decoration: underline; }
.tb-ringkas { position: sticky; top: 172px; }
.tb-ringkas dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px 0; font-size: 14.5px; }
.tb-ringkas dd { padding-left: 12px; }
.tb-ringkas dt { color: var(--k-teks-2); } .tb-ringkas dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.tb-ringkas .total { border-top: 1px solid var(--k-garis); padding-top: 12px; margin-top: 2px; font-size: 17px; font-weight: 800; color: var(--k-teks); }
.tb-ringkas .tb-btn { margin-top: 16px; }
.tb-catatan-kecil { font-size: 13px; color: var(--k-teks-2); margin: 12px 0 0; }
.tb-info-bo { background: #EEF0FB; color: #2C3680; border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-top: 14px; }
.tb-form label { display: block; margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--k-teks); }
.tb-form label small { font-weight: 500; color: var(--k-teks-2); }
.tb-form input, .tb-form textarea { width: 100%; margin-top: 6px; border-radius: 10px; }
.tb-form .dua { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.tb-galat { background: #FDECEA; color: #7A1A12; border-radius: 10px; padding: 10px 12px; font-size: 14px; }

/* status pesanan */
.tb-pesanan { max-width: 860px; margin: 0 auto; padding-top: 28px; }
.tb-pesanan h1 { font-size: 28px; margin: 4px 0 18px; }
.tb-tahap { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0; margin: 0 0 20px; }
.tb-tahap li { position: relative; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--k-teks-2); padding-top: 30px; }
.tb-tahap li::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%;
  background: var(--k-putih); border: 2px solid var(--k-garis); z-index: 1; box-sizing: border-box; }
.tb-tahap li::after { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--k-garis); }
.tb-tahap li:first-child::after { display: none; }
.tb-tahap li.lewat::before, .tb-tahap li.kini::before { background: var(--k-hijau); border-color: var(--k-hijau); }
.tb-tahap li.lewat::after, .tb-tahap li.kini::after { background: var(--k-hijau); }
.tb-tahap li.kini { color: var(--k-teks); }
.tb-pesanan .tb-panel { margin-bottom: 16px; }
.tb-total-bayar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.tb-total-bayar strong { font-size: 28px; font-variant-numeric: tabular-nums; display: block; color: var(--k-teks); }
.tb-info-hijau { background: var(--k-hijau-muda); color: #14432D; border-radius: 12px; padding: 14px 16px; font-size: 14.5px; margin-bottom: 16px; }

@media (max-width: 1000px) {
  .tb-katalog { grid-template-columns: minmax(0, 1fr); }  /* minmax(0,…): baris pil kategori boleh bergulir sendiri, bukan melebarkan halaman */
  .tb-saring { display: none; }
  .tb-pil-hp { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
  .tb-pil-hp button { flex: none; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--k-garis); background: var(--k-putih);
    font-weight: 600; font-size: 14px; color: var(--k-teks-2); margin: 0; }
  .tb-pil-hp button.aktif { background: var(--k-hijau); border-color: var(--k-hijau); color: #FFFFFF; }
  .tb-checkout { grid-template-columns: 1fr; } .tb-ringkas { position: static; }
  .tb-jaminan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .tb-hero { grid-template-columns: 1fr; padding: 28px 22px; }
  .tb-produk { grid-template-columns: 1fr; padding: 16px; gap: 20px; }
  .tb-pita { grid-template-columns: 1fr; padding: 26px 22px; }
  .tb-cara { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tb { padding: 0 12px; }
  .tb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tb-kartu-isi { padding: 10px 10px 6px; } .tb-kartu-nama { font-size: 13.5px; } .tb-kartu-harga { font-size: 15.5px; }
  .tb-kartu-tambah { margin: 4px 10px 10px; min-height: 36px; font-size: 13px; }
  .tb-jaminan { grid-template-columns: 1fr; }
  .tb-kolase { display: none; }
  .tb-hero { padding: 24px 18px; }
  .tb-beli { grid-template-columns: auto 1fr; } .tb-beli .tb-btn.garis { grid-column: 1 / -1; }
  .tb-baris { grid-template-columns: 22px 64px minmax(0, 1fr); } .tb-baris img { width: 64px; height: 64px; }
  .tb-baris .tb-jumlah, .tb-baris-kanan { grid-column: 2 / -1; } .tb-baris-kanan { flex-direction: row; justify-content: space-between; align-items: center; }
  .tb-form .dua { grid-template-columns: 1fr; }
  .tb-tab-isi { padding: 18px; }
  .tb-tahap li { font-size: 0; } .tb-tahap li.kini { font-size: 12px; }
}

/* halaman katalog */
.tb-halaman { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 24px 0 0; }
.tb-halaman button { min-width: 42px; min-height: 42px; padding: 0 14px; margin: 0; border-radius: 10px; border: 1.5px solid var(--k-garis);
  background: var(--k-putih); color: var(--k-teks); font-weight: 700; font-size: 14px; cursor: pointer; }
.tb-halaman button:hover:not(:disabled) { border-color: var(--k-hijau); color: var(--k-hijau); }
.tb-halaman button.aktif { background: var(--k-hijau); border-color: var(--k-hijau); color: #FFFFFF; }
.tb-halaman button:disabled { opacity: .45; cursor: default; }
.tb-wilayah { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.tb-form select { width: 100%; margin-top: 6px; border-radius: 10px; min-height: 44px; }
.tb-form select:disabled { opacity: .6; }
.tb-cek { display: flex !important; gap: 12px; align-items: flex-start; background: var(--k-latar); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.tb-cek input { width: 20px !important; height: 20px; margin: 2px 0 0 !important; accent-color: var(--k-hijau); flex: none; }
.tb-cek span { font-weight: 500; color: var(--k-teks-2); } .tb-cek b { display: block; color: var(--k-teks); }
@media (max-width: 640px) { .tb-wilayah { grid-template-columns: 1fr; } }

/* pilih barang yang dibayar */
.tb-pilih, .tb-pilih-semua input { width: 20px; height: 20px; margin: 0; accent-color: var(--k-hijau); cursor: pointer; }
.tb-pilih-semua { display: flex; align-items: center; gap: 10px; padding: 6px 0 12px; border-bottom: 1px solid var(--k-garis); font-weight: 600; cursor: pointer; }
.tb-pilih-semua small { font-weight: 400; color: var(--k-teks-2); }
.tb-tak-dipilih img, .tb-tak-dipilih .tb-baris-info, .tb-tak-dipilih .tb-baris-harga { opacity: .5; }
/* alamat tersimpan di checkout */
.tb-alamat-pilih { display: grid; gap: 8px; margin-bottom: 12px; }
.tb-alamat-pilih label { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--k-garis); border-radius: 12px; padding: 10px 14px; cursor: pointer; line-height: 1.45; }
.tb-alamat-pilih label.aktif { border-color: var(--k-hijau); background: var(--k-hijau-muda); }
.tb-form .tb-alamat-pilih input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; accent-color: var(--k-hijau); }  /* menimpa .tb-form input { width: 100% } */
.tb-alamat-pilih span { min-width: 0; overflow-wrap: anywhere; }
.tb-alamat-pilih em { font-style: normal; color: var(--k-hijau); font-weight: 700; }
.tb-alamat-pilih small { color: var(--k-teks-2); }