/* ===========================================================================
   Pemilih varian di halaman produk.

   Dibuat sebagai tombol, bukan dropdown: dengan dropdown pembeli harus membuka
   daftarnya dulu untuk tahu ada pilihan apa saja, dan tidak ada tempat untuk
   menandai mana yang habis.
   ======================================================================== */

.vp{margin:18px 0 4px}

.vp-grup{margin-bottom:14px}
.vp-grup:last-child{margin-bottom:0}
.vp-grup > label{display:block;font-size:12.5px;font-weight:600;color:#4b5563;
  margin-bottom:7px;letter-spacing:.02em}
.vp-grup > label i{font-style:normal;color:#9ca3af;font-weight:400}

.vp-opsi{display:flex;flex-wrap:wrap;gap:8px}
.vp-opsi button{appearance:none;border:1px solid #dde2ea;background:#fff;border-radius:9px;
  padding:9px 14px;font:500 13.5px inherit;cursor:pointer;color:#1f2937;position:relative;
  display:inline-flex;align-items:center;gap:8px;line-height:1.2}
.vp-opsi button:hover:not(.habis){border-color:#1e3a5f}
.vp-opsi button.on{border-color:#1e3a5f;background:#f3f7fc;color:#15467f;font-weight:600;
  box-shadow:0 0 0 2px rgba(30,58,95,.16)}
.vp-opsi button.habis{color:#b6bcc6;border-style:dashed;cursor:not-allowed;background:#fafbfc}
.vp-opsi button.habis::after{content:"";position:absolute;left:10%;right:10%;top:50%;
  height:1px;background:#d4d9e0}
.vp-opsi button:focus-visible{outline:2px solid #1e3a5f;outline-offset:2px}

/* Contoh warna/foto kecil di dalam tombol, kalau opsinya punya foto. */
.vp-opsi .vp-foto{width:22px;height:22px;border-radius:5px;background:#f1f4f9 center/cover;
  border:1px solid rgba(0,0,0,.08);flex:none}

.vp-stok{margin-top:14px;font-size:13.5px;color:#4b5563}
.vp-stok b{color:#1f2937}
.vp-stok.sedikit{color:#8c4a10}
.vp-stok.habis{color:#b4281c;font-weight:600}

/* Di ponsel tombolnya diperbesar jadi minimal 44px: sasaran sentuh 34px
   terlalu kecil dan sering meleset ke tombol sebelahnya. */
@media(max-width:480px){
  .vp-opsi button{padding:12px 14px;font-size:13.5px;min-height:44px}
  .vp-opsi{gap:10px}
}