.pos-page-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--pos-background-image) center/cover no-repeat; opacity: 0.1; z-index: -999; pointer-events: none; }
    .pos-hero-section { background-color: #0d6efd; background: linear-gradient(rgba(13, 110, 253, 0.85), rgba(10, 88, 202, 0.85)), var(--pos-background-image) center/cover no-repeat; color: white; border-radius: 0 0 2rem 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.1); position: relative; z-index: 2; padding: 2rem; margin-bottom: 1.5rem; }

    /* ===== Redesain gaya "NexaPOS" (kategori pill, kartu produk, cart, modal bayar) ===== */
    .pos-pill-kat { border: 1px solid #e2e8f0; background: #fff; color: #334155; border-radius: 999px; padding: 7px 16px; font-weight: 700; font-size: 12.5px; cursor: pointer; transition: .12s; white-space: nowrap; flex-shrink: 0; }
    .pos-kategori-pills[id^="kategoriPills"]::-webkit-scrollbar { height: 5px; }
    .pos-kategori-pills[id^="kategoriPills"]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
    .pos-kategori-pills[id^="kategoriPills"]::-webkit-scrollbar-track { background: transparent; }
    .pos-pill-kat:hover { border-color: #0d6efd; }
    .pos-pill-kat.active { background: #0d6efd; border-color: #0d6efd; color: #fff; box-shadow: 0 4px 10px rgba(13,110,253,.3); }
    .pos-prod-card { background: #fff; border: 1px solid #eef2f7; border-radius: 16px; overflow: hidden; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; height: 100%; }
    .pos-prod-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(15,23,42,.12); border-color: #bfdbfe; }
    .pos-prod-thumb { position: relative; width: 100%; height: 96px; background: rgba(13,110,253,.07); color: #0d6efd; display: flex; align-items: center; justify-content: center; font-size: 30px; overflow: hidden; }
    .pos-prod-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .pos-prod-badge-diskon { position: absolute; top: 6px; left: 6px; background: #dc3545; color: #fff; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; z-index: 2; }
    .pos-prod-body { padding: 10px 10px 12px; }
    .pos-prod-nm { font-weight: 700; font-size: 12.5px; color: #0f172a; min-height: 32px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .pos-prod-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
    .pos-prod-pr { font-weight: 800; color: #0d6efd; font-size: 13.5px; }
    .pos-prod-pr-wrap { display: flex; flex-direction: column; line-height: 1.15; }
    .pos-prod-pr-coret { font-size: 10.5px; color: #94a3b8; text-decoration: line-through; font-weight: 600; }
    .pos-prod-pr-promo { font-weight: 800; color: #dc3545; font-size: 13.5px; }
    .pos-prod-add { width: 26px; height: 26px; border-radius: 8px; background: #0d6efd; color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 4px 10px rgba(13,110,253,.35); flex-shrink: 0; }
    .pos-prod-card:hover .pos-prod-add { background: #0b5ed7; }

    .pos-cart-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
    .pos-cart-item:last-child { border-bottom: none; }
    .pos-cart-thumb { width: 40px; height: 40px; border-radius: 10px; background: rgba(13,110,253,.08); color: #0d6efd; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
    .pos-qty-pill { display: flex; align-items: center; gap: 6px; background: #f1f5f9; border-radius: 999px; padding: 3px; }
    .pos-qty-btn { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid #e2e8f0; font-weight: 800; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; line-height: 1; }
    .pos-qty-btn:hover { background: #0d6efd; color: #fff; border-color: #0d6efd; }

    .pos-paymethod-card { position: relative; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px; cursor: pointer; transition: .12s; background: #fff; height: 100%; }
    .pos-paymethod-card:hover { border-color: #0d6efd; box-shadow: 0 4px 12px rgba(13,110,253,.12); }
    .pos-paymethod-card.sel { border-color: #0d6efd; background: rgba(13,110,253,.06); box-shadow: 0 0 0 2px rgba(13,110,253,.2) inset; }
    .pos-paymethod-card.split-sel { border-color: #198754; box-shadow: 0 0 0 2px rgba(25,135,84,.25) inset; }
    .pos-paymethod-ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(13,110,253,.1); color: #0d6efd; display: flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 8px; }
    .pos-paymethod-split-chk { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #cbd5e1; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; }
    .pos-paymethod-split-chk:hover { border-color: #198754; }
    .pos-paymethod-split-chk.checked { background: #198754; border-color: #198754; color: #fff; }

    /* ===== Responsif ponsel: kartu produk lebih rapat, teks/khusus komponen dikecilkan sedikit ===== */
    @media (max-width: 576px) {
        .pos-prod-thumb { height: 76px; font-size: 24px; }
        .pos-prod-nm { font-size: 11.5px; min-height: 28px; }
        .pos-prod-pr { font-size: 12px; }
        .pos-pill-kat { padding: 6px 12px; font-size: 11.5px; }
        .pos-cart-thumb { width: 34px; height: 34px; font-size: 13px; }
        .pos-paymethod-card { padding: 10px; }
    }