/*
 * Nuansa halaman produk — spanduk per kategori/sub-produk + pita kartu.
 * Satu berkas untuk 25 template; isi & warna dari config/tema-produk.php.
 * --nz-a = aksen toko, --nz-h = warna nuansa/kelompok; --nz-b = keduanya
 * dicampur supaya tiap toko tetap terasa tokonya sendiri.
 * Spanduk berlatar gelap sendiri → teks putih terbaca di tema terang & gelap.
 */
:root{--nz-b:color-mix(in srgb,var(--nz-h,#6366f1) 68%,var(--nz-a,#6366f1));--nz-c:color-mix(in srgb,var(--nz-b) 22%,#fff);--nz-d:color-mix(in srgb,var(--nz-b) 28%,#0b0d16)}
.nz{--nz-b:color-mix(in srgb,var(--nz-h,#6366f1) 68%,var(--nz-a,#6366f1));--nz-c:color-mix(in srgb,var(--nz-b) 22%,#fff);--nz-d:color-mix(in srgb,var(--nz-b) 28%,#0b0d16);
 position:relative;display:grid;grid-template-columns:minmax(0,1fr) 116px;align-items:center;gap:6px;
 margin:12px 0 14px;padding:14px 8px 14px 16px;min-height:150px;border-radius:16px;overflow:hidden;isolation:isolate;
 color:#fff;text-align:left;box-sizing:border-box;
 background:var(--nz-pola,none),radial-gradient(circle at 88% 45%,color-mix(in srgb,var(--nz-b) 60%,transparent) 0,transparent 58%),
 linear-gradient(135deg,color-mix(in srgb,var(--nz-a,#6366f1) 38%,#0b0d16) 0%,color-mix(in srgb,var(--nz-b) 42%,#0b0d16) 100%);
 border:1px solid color-mix(in srgb,var(--nz-b) 45%,transparent);
 box-shadow:0 8px 24px -14px color-mix(in srgb,var(--nz-b) 70%,transparent);transition:border-color .3s,box-shadow .3s}
.nz *{box-sizing:border-box}
.nz-isi{min-width:0;position:relative;z-index:1}
.nz p{margin:0;color:inherit}
.nz-alis{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 9px 3px 4px;border-radius:10px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;
 background:color-mix(in srgb,var(--nz-b) 30%,rgba(255,255,255,.08));color:var(--nz-c)}
.nz .nz-alis{margin-bottom:7px}
.nz-ik{display:block;width:18px;height:18px;padding:2px;border-radius:50%;background:#fff;color:var(--nz-d);flex:none}
.nz-judul{font-size:16px;font-weight:800;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.nz .nz-teks{margin-top:4px;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.82)}
.nz-poin{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 0;padding:0;list-style:none}
.nz-poin li{margin:0;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.5;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.14)}
.nz-poin li::before{content:"\2713\00a0";color:var(--nz-c)}
.nz-gbr{display:block;width:116px;height:87px;justify-self:end;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.nz.is-ganti .nz-isi,.nz.is-ganti .nz-gbr{animation:nz-masuk .35s ease-out}
@keyframes nz-masuk{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nz,.nz.is-ganti .nz-isi,.nz.is-ganti .nz-gbr{animation:none;transition:none}}
@media (min-width:640px){.nz{min-height:160px;grid-template-columns:minmax(0,1fr) 150px;padding:18px 14px 18px 22px}.nz-gbr{width:150px;height:112px}.nz-judul{font-size:19px}.nz .nz-teks{font-size:13.5px}}
@media (max-width:359px){.nz{grid-template-columns:minmax(0,1fr) 84px}.nz-gbr{width:84px;height:63px}.nz-poin{display:none}}
/* Pulsa, tagihan, e-wallet: spanduk ringkas — yang penting nomornya, bukan hiasan. */
.nz[data-kartu="ringkas"]{min-height:112px;padding-top:11px;padding-bottom:11px;grid-template-columns:minmax(0,1fr) 92px}
.nz[data-kartu="ringkas"] .nz-gbr{width:92px;height:69px}
.nz[data-kartu="ringkas"] .nz-judul{font-size:15px}
/* Ikon di tab kelompok (disisipkan nuansa.js). */
.nz-chip-ik{display:inline-block;width:14px;height:14px;margin:-2px 5px 0 0;vertical-align:middle;flex:none}
/* Gambar sub-produk di kartu nominal (partials/ikon-nominal). */
svg.nz-nom-gbr{overflow:visible;object-fit:contain}
/* Pita tipis di kartu: kelompok khusus (pass/promo/gift/bundel) terlihat sekilas di tab "Semua". */
label:has(> .nz-hias){position:relative}
.nz-hias{position:absolute;top:0;left:14px;right:14px;height:3px;border-radius:0 0 4px 4px;pointer-events:none;
 background:color-mix(in srgb,var(--nz-hk,transparent) 80%,var(--nz-a,#6366f1));z-index:1}
.nz-hias[data-k="utama"]{display:none}
/* Kartu hadiah (voucher, game PC): sudut terlipat seperti kartu hadiah fisik. */
html:has(.nz[data-kartu="hadiah"]) .nz-hias[data-k="utama"]{display:block;left:auto;right:0;width:22px;height:22px;border-radius:0 0 0 4px;border-top-right-radius:inherit;
 background:linear-gradient(225deg,var(--nz-b) 0 48%,transparent 52%);opacity:.9}
/* Petunjuk operator di bawah kolom nomor HP. */
.nz-op{margin:6px 0 0;font-size:12.5px;font-weight:600;color:var(--nz-b)}
.nz-op:empty{display:none}
.nz-op[data-s="beda"]{color:#d97706}
.nz[data-pola="hex"]{--nz-pola:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='40' viewBox='0 0 23 40'%3E%3Cpath d='M11.5 0L23 6.7V20L11.5 26.7L0 20V6.7ZM11.5 26.7V40' fill='none' stroke='%23fff' stroke-opacity='.1' stroke-width='1.2'/%3E%3C/svg%3E")}
.nz[data-pola="bidik"]{--nz-pola:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.1' stroke-width='1.2'%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3Cpath d='M16 6v5M16 21v5M6 16h5M21 16h5'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='1.2' fill='%23fff' fill-opacity='.12'/%3E%3Ccircle cx='0' cy='0' r='1.2' fill='%23fff' fill-opacity='.1'/%3E%3Ccircle cx='32' cy='32' r='1.2' fill='%23fff' fill-opacity='.1'/%3E%3C/svg%3E")}
.nz[data-pola="bintang"]{--nz-pola:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='%23fff' fill-opacity='.1'%3E%3Cpath d='M9 3Q10 8 15 9Q10 10 9 15Q8 10 3 9Q8 8 9 3Z'/%3E%3Cpath d='M27 21Q27.6 24.4 31 25Q27.6 25.6 27 29Q26.4 25.6 23 25Q26.4 24.4 27 21Z'/%3E%3Ccircle cx='28' cy='8' r='1.2'/%3E%3Ccircle cx='8' cy='28' r='1'/%3E%3C/g%3E%3C/svg%3E")}
.nz[data-pola="diagonal"]{--nz-pola:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M-6 6L6 -6M0 24L24 0M18 30L30 18' stroke='%23fff' stroke-opacity='.08' stroke-width='5'/%3E%3C/svg%3E")}
.nz[data-pola="sinyal"]{--nz-pola:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24'%3E%3Cpath d='M0 8Q10 2 20 8T40 8M0 18Q10 12 20 18T40 18' fill='none' stroke='%23fff' stroke-opacity='.1' stroke-width='1.4'/%3E%3C/svg%3E")}
.nz[data-pola="piksel"]{--nz-pola:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23fff'%3E%3Crect x='2' y='2' width='6' height='6' fill-opacity='.1'/%3E%3Crect x='18' y='10' width='4' height='4' fill-opacity='.08'/%3E%3Crect x='10' y='20' width='4' height='4' fill-opacity='.12'/%3E%3Crect x='24' y='24' width='6' height='6' fill-opacity='.07'/%3E%3C/g%3E%3C/svg%3E")}
/* Penyesuaian per template (QA 390px, 14 Nov 2026). */
.m14-nom .ff-nom-gbr ~ .m14-nom-ikon{display:none}
.x15-nom .ff-nom-gbr ~ .x15-nom-spr{display:none}
.x15-nom .nz-hias[data-k="utama"],.x19-nom .nz-hias[data-k="utama"],.k24-nom .nz-hias[data-k="utama"]{display:none}
.s25-bant:has(.nz-nom-gbr){display:grid}
.s25-bant>.nz-hias,.e17-gems>.nz-hias,.k18-nom-gem>.nz-hias{display:none}
.b21-nom>.nz-hias{position:absolute}
.x19-nom .nz-hias{right:96px}
.g16-langkah-b>.nz{margin-bottom:24px}
.g16-nom .nz-hias{left:96px}
.t2-nom-group+.t2-nom-group{margin-top:10px}
html:has(.b3-step) .nz,html:has(.l12-chip) .nz,html:has(.x19-nom) .nz{border-radius:0}
.nz-op[data-s="ok"]{color:color-mix(in srgb,var(--nz-b) 55%,currentColor)}
@media (max-width:479px){.nz-poin li:nth-child(n+3){display:none}.nz[data-kartu="ringkas"] .nz-poin{display:none}}
/* T1: tab sudah punya ikon permata bawaan untuk SEMUA kelompok — diganti ikon kelompoknya. */
.gm-chip > .nz-chip-ik ~ .gm-chip-icon{display:none}
.gm-chip > .nz-chip-ik{box-sizing:border-box;width:24px;height:24px;padding:5px;margin:0;border-radius:7px;background:color-mix(in srgb,var(--chip-accent) 14%,transparent);color:var(--chip-accent)}
.gm-chip.is-active > .nz-chip-ik{background:color-mix(in srgb,var(--chip-accent) 28%,transparent);color:#fff}
@media (max-width:420px){.gm-chip > .nz-chip-ik{width:22px;height:22px;border-radius:6px}}