.foo-root *{margin:0;padding:0;box-sizing:border-box}.foo-root{--primary:#16a34a;--primary-dark:#15803d;--brand:#f5a623;--bg:#f6f7f9;--card:#fff;--text:#1f2937;--muted:#6b7280;--border:#e5e7eb;--radius:14px;--shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}.foo-root .header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--border);padding:14px 16px 12px;box-shadow:var(--shadow)}.foo-root .header-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;max-width:1100px;margin:0 auto}.foo-root .logo{height:66px;width:auto;max-width:90%;-o-object-fit:contain;object-fit:contain}.foo-root .header-text h1{font-size:1.25rem;font-weight:800;line-height:1.2}.foo-root .header-text p{font-size:.9rem;color:var(--muted);margin-top:2px;font-weight:600;display:inline-block;padding:3px 12px;border-radius:20px;background:color-mix(in srgb,var(--brand) 18%,#fff);color:#92600a}.foo-root .search-wrap{max-width:1100px;margin:12px auto 0}.foo-root #search{width:100%;padding:11px 14px;font-size:1rem;border:1px solid var(--border);border-radius:10px;background:#fff;outline:none;transition:border-color .15s}.foo-root #search:focus{border-color:var(--primary)}.foo-root .filter-row{max-width:1100px;margin:10px auto 0;display:flex;gap:8px}.foo-root .filter-btn{flex:0 0 auto;padding:7px 16px;font-size:.88rem;font-weight:700;color:#4b5563;background:#fff;border:1.5px solid var(--border);border-radius:20px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.foo-root .filter-btn:hover{border-color:var(--brand)}.foo-root .filter-btn.aktif{background:var(--brand);border-color:var(--brand);color:#1f2937}.foo-root .main{max-width:1100px;margin:0 auto;padding:16px;min-height:60vh}.foo-root .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media (min-width:560px){.foo-root .grid{grid-template-columns:repeat(3,1fr);gap:16px}}@media (min-width:820px){.foo-root .grid{grid-template-columns:repeat(4,1fr)}}.foo-root .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}.foo-root .card-img-wrap{position:relative;width:100%;aspect-ratio:1/1;background:#eef0f3;cursor:zoom-in;overflow:hidden}.foo-root .card-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease}.foo-root .card-img.loaded{opacity:1}.foo-root .badge-baru{position:absolute;top:8px;left:8px;z-index:2;background:#ef4444;color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.5px;padding:3px 8px;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.3);pointer-events:none}.foo-root .card-body{padding:10px;display:flex;flex-direction:column;gap:8px;flex:1}.foo-root .card-kode{font-size:.82rem;font-weight:600;color:var(--text);word-break:break-word;text-align:center;min-height:1.1em}.foo-root .card-actions{margin-top:auto;display:flex;flex-direction:column;gap:7px}.foo-root .btn-lihat,.foo-root .btn-pesan{width:100%;padding:9px 10px;font-size:.9rem;font-weight:700;border:none;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .15s,filter .15s,transform .05s}.foo-root .btn-pesan{color:#fff;background:var(--primary)}.foo-root .btn-pesan:hover{background:var(--primary-dark)}.foo-root .btn-lihat{color:#1f2937;background:var(--brand)}.foo-root .btn-lihat:hover{filter:brightness(.94)}.foo-root .btn-lihat:active,.foo-root .btn-pesan:active{transform:scale(.97)}.foo-root .btn-lihat svg,.foo-root .btn-pesan svg{width:16px;height:16px}.foo-root .status{text-align:center;padding:60px 20px;color:var(--muted)}.foo-root .status.error{color:#b91c1c}.foo-root .status p{margin-top:12px;font-size:.95rem}.foo-root .spinner{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;margin:0 auto;animation:foo-spin .8s linear infinite}@keyframes foo-spin{to{transform:rotate(1turn)}}.foo-root .footer{text-align:center;padding:24px 16px 40px;color:var(--muted);font-size:.82rem}.foo-root .modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}@media (min-width:560px){.foo-root .modal{align-items:center}}.foo-root .modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}.foo-root .modal-card{position:relative;background:#fff;width:100%;max-width:420px;border-radius:18px 18px 0 0;padding:22px 20px 28px;box-shadow:0 -4px 30px rgba(0,0,0,.2);animation:foo-slideUp .25s ease}@media (min-width:560px){.foo-root .modal-card{border-radius:18px;animation:foo-pop .2s ease}}@keyframes foo-slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes foo-pop{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.foo-root .modal-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:1.8rem;line-height:1;color:var(--muted);cursor:pointer}.foo-root .modal-card h2{font-size:1.15rem}.foo-root .modal-sub{font-size:.9rem;color:var(--muted);margin-top:4px}.foo-root .modal-sub strong{color:var(--text)}.foo-root .modal-hint{font-size:.88rem;color:var(--muted);margin:14px 0 10px}.foo-root .sales-list{display:flex;flex-direction:column;gap:10px}.foo-root .sales-btn{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;cursor:pointer;text-decoration:none;color:var(--text);transition:background .15s,transform .05s}.foo-root .sales-btn:hover{background:#dcfce7}.foo-root .sales-btn:active{transform:scale(.98)}.foo-root .sales-icon{width:40px;height:40px;flex-shrink:0;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center}.foo-root .sales-icon svg{width:22px;height:22px}.foo-root .sales-info{display:flex;flex-direction:column;text-align:left}.foo-root .sales-info .nama{font-weight:600;font-size:.95rem}.foo-root .sales-info .nomor{font-size:.8rem;color:var(--muted)}.foo-root .detail{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;padding:16px}.foo-root .detail-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8)}.foo-root .detail-card{position:relative;background:#fff;width:100%;max-width:460px;max-height:92vh;overflow:auto;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.35);animation:foo-pop .2s ease}.foo-root .detail-img{width:100%;max-height:68vh;-o-object-fit:contain;object-fit:contain;background:#111;display:block;border-radius:16px 16px 0 0}.foo-root .detail-body{padding:16px;display:flex;flex-direction:column;gap:12px}.foo-root .detail-kode{text-align:center;font-weight:800;font-size:1.05rem}.foo-root .detail-body .btn-pesan{font-size:1rem;padding:12px}.foo-root .btn-copy{width:100%;padding:11px;font-size:.95rem;font-weight:700;color:#1f2937;background:#fff;border:2px solid var(--brand);border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:background .15s,border-color .15s,color .15s,transform .05s}.foo-root .btn-copy:hover{background:color-mix(in srgb,var(--brand) 14%,#fff)}.foo-root .btn-copy:active{transform:scale(.98)}.foo-root .btn-copy:disabled{opacity:.75;cursor:default}.foo-root .btn-copy svg{width:18px;height:18px;flex-shrink:0}.foo-root .btn-copy.sukses{background:var(--primary);border-color:var(--primary);color:#fff}.foo-root .btn-copy.gagal{background:#fef2f2;border-color:#fca5a5;color:#b91c1c}.foo-root .detail-close{position:absolute;top:10px;right:12px;z-index:2;background:rgba(0,0,0,.55);color:#fff;border:none;width:34px;height:34px;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer}