/* Kartu produk toko (dipakai halaman Produk dan Rak Beranda) */
.pdk{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;color:var(--text);text-decoration:none;min-width:0;position:relative;transition:transform .2s,box-shadow .2s,border-color .2s}.pdk:active{transform:scale(.985)}@media(hover:hover){.pdk:hover{border-color:var(--utama);transform:translateY(-3px);box-shadow:0 12px 26px rgba(15,23,42,.14)}.pdk:hover .im img{transform:scale(1.06)}.pdk:hover .ar{transform:translateX(3px)}}
.pdk .im{aspect-ratio:1/1;background:linear-gradient(135deg,color-mix(in srgb,var(--utama) 24%,var(--soft)),color-mix(in srgb,var(--utama) 6%,var(--soft)));display:grid;place-items:center;position:relative;overflow:hidden}.pdk .im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}.pdk .im .mono{font-size:34px;font-weight:900;color:var(--utama);opacity:.85;font-family:'Lexend Deca',sans-serif}
.pdk .sale{position:absolute;right:9px;top:0;z-index:2;width:34px;padding:6px 0 11px;background:#e53935;color:#fff;font-size:10.5px;font-weight:900;text-align:center;line-height:1.05;clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%)}.pdk .sale small{display:block;font-size:7.5px;font-weight:800;opacity:.9;letter-spacing:.3px}.pdk .sale.fl{background:#ff6d00}
.pdk .hb{position:absolute;inset:0;z-index:3;background:rgba(15,23,42,.62);color:#fff;display:grid;place-items:center;font-weight:900;font-size:12px;letter-spacing:1px}
.pdk .bd{padding:10px 11px 11px;display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}.pdk .ct{font-size:9.5px;font-weight:800;color:var(--faint);text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdk .nm{font-size:13px;font-weight:800;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pdk .ds{display:none;font-size:12px;color:var(--muted);line-height:1.45;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pdk .ch{display:flex;gap:5px;flex-wrap:nowrap;overflow:hidden}.pdk .ch span{white-space:nowrap}.pdk .ch span{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;line-height:1;padding:4px 7px 4px 5px;border-radius:7px;background:color-mix(in srgb,var(--c,#64748b) 12%,transparent);color:var(--c,#64748b)}.pdk .ch span i{font-size:9px;width:15px;height:15px;border-radius:5px;display:grid;place-items:center;background:var(--c,#64748b);color:#fff}.pdk .ch .in{--c:#16a34a}.pdk .ch .un{--c:#2563eb}.pdk .ch .mn{--c:#78716c}.pdk .ch .lw{--c:#e53935}.pdk .sd{font-size:10.5px;font-weight:800;color:#ea580c}.pdk.t1 .sd{color:#ffab40}
.pdk .ft{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding-top:4px}.pdk .pr{display:flex;flex-direction:column;min-width:0}.pdk .pr s{font-size:10.5px;color:var(--faint);line-height:1.1}.pdk .pr b{font-size:15px;font-weight:900;color:var(--utama);letter-spacing:-.3px;line-height:1.2}.pdk .pr .mb{font-size:9px;font-weight:900;color:#b45309;margin-left:4px}.pdk .ar{flex:none;width:32px;height:32px;border-radius:11px;background:var(--utama);color:#fff;display:grid;place-items:center;font-size:12px;transition:transform .2s}.pdk.hbs .ar{background:var(--soft);color:var(--faint)}
/* Populer: pita diagonal di sudut gambar + garis ungu di bawah kartu */
.pdk.t2{border-color:#cdbdff;box-shadow:0 6px 16px rgba(124,77,255,.14)}.pdk.t2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#7c4dff,#536dfe)}.pdk .cor{position:absolute;left:-30px;top:12px;z-index:2;width:110px;transform:rotate(-45deg);background:linear-gradient(90deg,#7c4dff,#536dfe);color:#fff;font-size:8.5px;font-weight:900;letter-spacing:.8px;text-align:center;padding:3px 0;box-shadow:0 3px 8px rgba(83,109,254,.45)}
/* Terlaris: kartu gelap emas, bingkai emas di dalam gambar, medali mahkota, tombol emas bulat panjang, kilau bergerak */
.pdk.t1{border:0;background:linear-gradient(160deg,#241706,#4a2a05);color:#fff;box-shadow:0 10px 24px rgba(255,143,0,.32)}.pdk.t1::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,214,102,.22) 50%,transparent 65%);transform:translateX(-120%);animation:pdkShine 3.8s ease-in-out infinite}@keyframes pdkShine{55%,100%{transform:translateX(120%)}}
.pdk.t1 .im{margin:7px 7px 0;border-radius:11px;outline:2px solid #ffc400;outline-offset:0}.pdk .bd{position:relative}.pdk .tl{position:absolute;left:46px;top:-11px;font-size:9.5px;font-weight:900;letter-spacing:1px;color:#ffd54f;background:#241706;padding:2px 8px;border-radius:99px;border:1px solid #ffc400}.pdk .med{position:absolute;left:10px;top:-15px;z-index:3;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#ffe082,#ff8f00);color:#3b2400;display:grid;place-items:center;font-size:13px;border:2px solid #4a2a05}
.pdk.t1 .bd{padding:18px 11px 11px}.pdk.t1 .ct{color:#ffcc80}.pdk.t1 .sd{color:#ffab40}.pdk.t1 .pr s{color:rgba(255,255,255,.5)}.pdk.t1 .pr b{color:#ffd54f}.pdk.t1 .ar{background:linear-gradient(135deg,#ffc400,#ff8f00);color:#2b1700;width:auto;padding:0 12px;border-radius:99px;font-weight:900;font-size:11px;gap:5px;display:inline-flex;align-items:center}.pdk.t1 .ch span{background:rgba(255,255,255,.1);color:#fff}.pdk.t1 .ch span i{background:rgba(255,255,255,.2)}.pdk.t1 .ch .in i{background:#22c55e}
/* bintang ulasan dan baris info */
.pdk .mt{display:flex;gap:9px;flex-wrap:wrap;align-items:center;line-height:1}.pdk .rt{font-size:10.5px;font-weight:800;color:#f59e0b}.pdk .rt small{color:var(--faint);font-weight:700;font-size:10px}.pdk.t1 .rt small{color:rgba(255,255,255,.6)}
.pdk .tier{display:none}
/* mode daftar: satu produk per baris, desain tingkat tetap beda */
.pk-list{display:flex;flex-direction:column;gap:10px}
.pdk.lst{flex-direction:row;align-items:stretch;border-radius:16px}.pdk.lst .im{width:104px;flex:none;aspect-ratio:auto;min-height:104px}.pdk.lst .bd{padding:10px 12px;gap:4px;justify-content:center}.pdk.lst .nm{-webkit-line-clamp:2;font-size:13.5px}.pdk.lst .ft{margin-top:2px;padding-top:2px;align-items:center}.pdk.lst .ar{width:auto;padding:0 14px;height:34px;border-radius:99px;font-size:12px;font-weight:800;gap:6px;display:inline-flex;align-items:center}.pdk.lst .sale{right:auto;left:6px;width:30px;font-size:9.5px}.pdk.lst .cor{display:none}.pdk.lst .med,.pdk.lst .tl{display:none}.pdk.lst .tier{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:99px;font-size:9px;font-weight:900;letter-spacing:.5px;text-transform:uppercase}.pdk.lst .tier.t1{background:linear-gradient(135deg,#ffc400,#ff8f00);color:#2b1700}.pdk.lst .tier.t2{background:#7c4dff;color:#fff}
.pdk.lst.t2{border-left:5px solid #7c4dff}.pdk.lst.t2::after{display:none}.pdk.lst.t1 .im{margin:6px 0 6px 6px;min-height:92px;border-radius:12px}
@media(max-width:380px){.pdk.lst .im{width:88px}.pdk.lst .ar{padding:0 11px}}
@media(min-width:900px){.pk-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Rak Beranda: deretan geser */
.rak-geser{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 12px;margin:0 -2px;scrollbar-width:none}.rak-geser::-webkit-scrollbar{display:none}.rak-geser .pdk{flex:0 0 172px;scroll-snap-align:start}@media(min-width:700px){.rak-geser .pdk{flex-basis:190px}}
.pk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}@media(min-width:640px){.pk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:1000px){.pk-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Rak gaya Ubin ikon: sama dengan ubin Kategori dan Isi ulang */
.rak-ubin{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px}@media(max-width:560px){.rak-ubin{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
.ubn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--text) 3%,var(--card));color:var(--text);text-decoration:none;text-align:center;min-width:0;transition:transform .15s,border-color .15s,box-shadow .15s}@media(hover:hover){.ubn:hover{transform:translateY(-3px);border-color:var(--utama);box-shadow:0 8px 18px rgba(15,23,42,.12)}}.ubn:active{transform:scale(.97)}
.ubn .ig{position:relative;width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--utama) 26%,var(--soft)),color-mix(in srgb,var(--utama) 8%,var(--soft)));display:grid;place-items:center;box-shadow:0 6px 14px color-mix(in srgb,var(--utama) 22%,transparent)}.ubn .ig img{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}.ubn .ig em{font-style:normal;font-size:24px;font-weight:900;color:var(--utama);font-family:'Lexend Deca',sans-serif}
.ubn .ig .pc{position:absolute;right:-6px;top:-6px;background:#e53935;color:#fff;font-style:normal;font-size:9px;font-weight:900;padding:2px 6px;border-radius:99px;box-shadow:0 2px 6px rgba(229,57,53,.4)}.ubn .ig .cr{position:absolute;left:-6px;bottom:-6px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#ffe082,#ff8f00);color:#3b2400;font-style:normal;display:grid;place-items:center;font-size:10px;border:2px solid var(--card)}
.ubn b{font-size:11.5px;font-weight:800;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}.ubn small{font-size:11px;font-weight:900;color:var(--utama)}.ubn.t1{border-color:#ffc400;background:linear-gradient(180deg,rgba(255,196,0,.14),transparent 70%)}.ubn.t1 small{color:#e65100}.ubn.hbs{opacity:.55}