/* =====================================================================
   Tampilan ala e-commerce (desain "Blox Catalog — UI HP, Tablet & PC", 19 Okt 2026)
   HP < 760 px · tablet 760–1099 px · PC ≥ 1100 px
   ===================================================================== */
.bc{background:var(--tile)}
.bc .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:1100px){.bc .wrap{padding-left:32px;padding-right:32px}}

/* ---------- header ---------- */
.hdr2{background:var(--putih);border-bottom:1.5px solid var(--garis);position:sticky;top:0;z-index:40}
.hdr-atas{background:var(--tinta);color:#fff;font-size:12.5px}
.hdr-atas a{color:#fff;text-decoration:none}.hdr-atas a:hover{color:var(--kuning)}
.hdr-utama{display:flex;align-items:center;gap:20px;height:64px}
.hdr-logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex:none}
.hdr-logo img{width:36px;height:36px;object-fit:contain}
.hdr-logo b{font-size:20px;font-weight:800;letter-spacing:.5px;white-space:nowrap}
.hdr-kat{flex:none;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 12px;border-radius:10px;text-decoration:none;font-size:15px;font-weight:800}
.hdr-kat:hover{background:var(--tile);color:var(--tinta)}
.hdr-cari{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:44px;padding:0 5px 0 14px;border:2px solid var(--tinta);border-radius:10px;background:#fff}
.bc .hdr-cari input[type=search]{flex:1;min-width:0;border:0 !important;outline:0;min-height:0 !important;height:38px;padding:0 !important;font-size:15px;background:transparent}
.hdr-cari button{height:32px;padding:0 14px;border-radius:7px;border:0;background:var(--tinta);color:#fff;font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.hdr-cari:focus-within{outline:3px solid var(--biru);outline-offset:2px}
.hdr-krj{position:relative;flex:none}
.badge-n{position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--merah);color:#fff;font-size:11.5px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff}
.hdr-pisah{width:1.5px;height:28px;background:var(--garis);flex:none}
.hdr-akun{flex:none;display:flex;align-items:center;gap:8px;text-decoration:none;font-size:14.5px;font-weight:800}
.ava-bulat{width:34px;height:34px;border-radius:50%;border:2px solid var(--tinta);background:var(--kuning);display:inline-flex;align-items:center;justify-content:center;font-family:"Titan One",system-ui,sans-serif;font-weight:400;flex:none}
.hdr-gaya{display:flex;align-items:center;gap:22px;height:36px;font-size:13.5px;font-weight:700;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.hdr-gaya::-webkit-scrollbar{display:none}
.hdr-gaya a{color:var(--redup);text-decoration:none;display:inline-flex;align-items:center;gap:5px;height:100%;border-bottom:3px solid transparent}
.hdr-gaya a:hover{color:var(--tinta)}
.hdr-gaya a.on{color:var(--tinta);border-bottom-color:var(--oranye)}
@media (max-width:1099px){
  .hdr-atas,.hdr-kat,.hdr-pisah{display:none}
  .hdr-utama{gap:10px;height:60px}
  .hdr-logo b{display:none}
  .hdr-cari{height:42px}
  .hdr-cari button{display:none}
  .hdr-gaya{gap:18px;font-size:14.5px;font-weight:800}
}
@media (max-width:759px){
  .hdr-akun,.hdr-masuk{display:none}
  .hdr-logo img{width:32px;height:32px}
}

/* ---------- panel bawah (HP & tablet) ---------- */
@media (max-width:1099px){.bc>footer.foot{display:none}}
.nav-bawah{display:none}
@media (max-width:1099px){
  .ada-nav-bawah{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .nav-bawah{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:45;height:calc(68px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:#fff;border-top:2px solid var(--tinta);font-size:11.5px;font-weight:800}
  .nav-bawah a{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--redup)}
  .nav-bawah a[aria-current=page]{color:var(--tinta)}
  .nb-jual{width:52px;height:36px;border-radius:12px;background:var(--kuning);border:2px solid var(--tinta);box-shadow:0 3px 0 var(--tinta);display:inline-flex;align-items:center;justify-content:center;color:var(--tinta)}
}

/* ---------- bar beli / aksi menempel di bawah (detail, checkout) ---------- */
.bar-bawah{position:sticky;bottom:0;z-index:35;background:#fff;border-top:2px solid var(--tinta);padding:10px max(12px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:8px}

/* ---------- kotak putih ---------- */
.kotak{background:#fff;border-radius:16px}
.kotak-p{background:#fff;border-radius:16px;padding:18px 22px}
@media (max-width:759px){.kotak-p{padding:14px;border-radius:14px}}
.judul-bag{margin:0;font-size:20px;font-weight:900}
.tautan-biru{font-size:14px;font-weight:800;color:var(--biru);text-decoration:none}
.tautan-biru:hover{color:var(--biru);text-decoration:underline}

/* ---------- kartu outfit (grid) ---------- */
.grid-produk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.grid-produk.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1099px){.grid-produk,.grid-produk.k4{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media (max-width:759px){.grid-produk,.grid-produk.k4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.produk{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--garis);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--tinta);transition:border-color .12s,box-shadow .12s}
.produk:hover{color:var(--tinta);border-color:var(--tinta);box-shadow:0 4px 0 var(--tinta)}
.produk .gb{position:relative;aspect-ratio:1;background:var(--biru-muda);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.produk .gb img{width:100%;height:100%;object-fit:cover}
.produk .p-diskon{position:absolute;top:0;right:0;background:var(--merah);color:#fff;font-size:13px;font-weight:900;padding:4px 9px;border-radius:0 0 0 10px}
.produk .p-label{position:absolute;left:8px;bottom:8px;display:flex;gap:4px;flex-wrap:wrap}
.produk .p-label span{font-size:11px;font-weight:900;letter-spacing:.4px;padding:3px 7px;border-radius:5px;background:var(--tinta);color:#fff}
.produk .p-label .pt{background:var(--kuning);color:var(--tinta)}
.produk .p-label .hb{background:#fff;color:var(--tinta);border:1.5px solid var(--tinta)}
.produk .inf{text-align:left;align-items:stretch;justify-content:flex-start;padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;border:0;background:#fff;border-radius:0}
.produk .p-judul{font-size:14.5px;font-weight:700;line-height:19px;min-height:38px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.produk .p-judul img{width:16px;height:16px;vertical-align:-3px;margin-right:3px}
.produk .p-harga{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.produk .p-harga b{font-size:18px;font-weight:900}
.produk .p-harga s{font-size:12.5px;color:var(--redup)}
.produk .p-toko{font-size:12.5px;color:var(--redup);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden}
.produk .p-toko img{width:14px;height:14px;flex:none}
.produk .p-toko span{overflow:hidden;text-overflow:ellipsis}
@media (max-width:759px){
  .produk{border:0}
  .produk .inf{padding:8px 10px 10px;gap:3px}
  .produk .p-judul{font-size:14px;line-height:18px;min-height:36px}
  .produk .p-harga b{font-size:17px}
  .produk .p-toko{font-size:12px}
}

/* ---------- muat otomatis (scroll tanpa henti) ---------- */
.muat{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.muat-kerangka{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;opacity:.7}
.muat-kerangka span{aspect-ratio:.78;border-radius:12px;background:linear-gradient(#E4E4E0 0 62%,#fff 62%);animation:kedip 1.2s ease-in-out infinite alternate}
@media (max-width:1099px){.muat-kerangka{grid-template-columns:repeat(3,minmax(0,1fr))}.muat-kerangka span:nth-child(n+4){display:none}}
@media (max-width:759px){.muat-kerangka{grid-template-columns:repeat(2,minmax(0,1fr))}.muat-kerangka span:nth-child(n+3){display:none}}
.muat-teks{align-self:center;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:var(--redup)}
.muat-teks svg{animation:putar .9s linear infinite}
.muat[data-selesai] .muat-kerangka,.muat[data-selesai] .muat-teks svg{display:none}
@keyframes kedip{to{opacity:.45}}
@keyframes putar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.muat-kerangka span,.muat-teks svg{animation:none}}

/* ---------- strip cara jual ---------- */
.strip-jual{position:relative;display:flex;align-items:center;background:#fff;border:2px solid var(--tinta);border-radius:14px;overflow:hidden}
.strip-jual[hidden]{display:none}
.sj-utama{flex:1;min-width:0;display:flex;align-items:center;gap:14px;height:60px;padding:0 4px 0 8px;text-decoration:none;color:var(--tinta)}
.sj-utama:hover{color:var(--tinta)}
.sj-gb{width:44px;height:44px;border-radius:10px;background:var(--oranye);border:2px solid var(--tinta);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;flex:none}
.sj-gb img{height:94%;width:auto}
.sj-teks{display:flex;flex-direction:column;line-height:1.15;flex:none}
.sj-teks b{font-size:16px;font-weight:900;white-space:nowrap}
.sj-hp{display:none;font-size:12px;color:var(--redup)}
.sj-langkah{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:#3A3A3A;white-space:nowrap;overflow:hidden}
.sj-langkah span{display:inline-flex;align-items:center;gap:6px}
.sj-langkah b{width:22px;height:22px;border-radius:50%;background:var(--kuning);border:1.5px solid var(--tinta);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}
.sj-langkah i{font-style:normal;color:#BDBDB8}
.sj-btn{height:40px;padding:0 16px;border-radius:9px;background:var(--tinta);color:#fff;display:inline-flex;align-items:center;font-size:14px;font-weight:900;white-space:nowrap;flex:none}
.sj-btn-hp{display:none;font-size:13px;font-weight:900;color:var(--biru);white-space:nowrap}
.sj-x{width:40px;height:40px;border:0;background:transparent;font-size:22px;color:var(--redup);cursor:pointer;flex:none}
@media (max-width:1099px){
  .strip-jual{background:#FFF8E1;border-radius:12px}
  .sj-utama{height:52px;gap:10px;padding-left:6px}
  .sj-gb{width:38px;height:38px;border-width:1.5px;border-radius:9px}
  .sj-teks{flex:1;min-width:0}
  .sj-teks b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis}
  .sj-hp{display:block}
  .sj-langkah,.sj-btn{display:none}
  .sj-btn-hp{display:inline}
  .sj-x{width:34px}
}

/* ---------- popup cara jual ---------- */
dialog.cj{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:min(880px,calc(100% - 32px));overflow:visible;font-family:"Outfit",system-ui,sans-serif;color:var(--tinta);font-weight:600}
dialog.cj::backdrop{background:rgba(18,18,18,.55)}
.cj-isi{background:#fff;border:2px solid var(--tinta);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:16px;max-height:calc(100dvh - 40px);overflow:auto}
.cj-tarik{display:none}
.cj-kecil{font-size:12px;font-weight:900;letter-spacing:.6px;color:#C2410C}
.cj-judul{margin:0;font-size:26px}
.cj-tutup{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--garis);background:#fff;font-size:20px;cursor:pointer;color:var(--tinta)}
.cj-langkah{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cj-langkah li{display:flex;flex-direction:column;gap:10px}
.cj-gb{aspect-ratio:16/10;border-radius:14px;border:2px solid var(--tinta);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.cj-logo{width:56px;height:56px;object-fit:contain}
.cj-main{height:38px;padding:0 14px;border-radius:10px;background:var(--hijau);color:#fff;border:2px solid var(--tinta);display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:900}
.cj-ava{height:96%;width:auto}
.cj-slot{position:absolute;top:10px;left:10px;display:flex;gap:5px}
.cj-slot i{width:26px;height:26px;border-radius:7px;background:#fff;border:2px solid var(--tinta)}
.cj-unggah{width:96px;height:100px;border-radius:12px;background:#fff;border:2px solid var(--tinta);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.cj-unggah span{width:46px;height:46px;border-radius:50%;background:var(--tinta);display:inline-flex;align-items:center;justify-content:center}
.cj-unggah b{font-size:11px;font-weight:900;letter-spacing:.4px}
.cj-kartu{width:104px;border-radius:10px;background:#fff;border:2px solid var(--tinta);overflow:hidden;display:flex;flex-direction:column;transform:rotate(-4deg)}
.cj-kf{height:64px;background:var(--biru-muda);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.cj-kf img{height:92%;width:auto}
.cj-kh{padding:5px 7px;display:flex;flex-direction:column;gap:3px}
.cj-kh b{font-size:12px;font-weight:900}
.cj-kh i{align-self:flex-start;font-style:normal;background:var(--hijau);color:#fff;font-size:9.5px;font-weight:900;padding:2px 5px;border-radius:4px}
.cj-tk{display:flex;gap:10px;align-items:flex-start}
.cj-tk>span{display:flex;flex-direction:column;gap:2px}
.cj-tk>span b{font-size:15.5px;font-weight:900}
.cj-tk>span span{font-size:13px;color:var(--redup);line-height:18px}
.cj-no{width:28px;height:28px;border-radius:50%;background:var(--kuning);border:2px solid var(--tinta);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;flex:none}
.cj-aksi{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cj-cek{flex:1;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--redup);cursor:pointer;min-width:180px}
.cj-cek input{width:18px;height:18px;accent-color:var(--tinta)}
@media (max-width:1099px){.cj-langkah{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:759px){
  dialog.cj{width:100%;margin:auto 0 0;}
  dialog.cj[open]{display:block}
  .cj-isi{border-radius:20px 20px 0 0;border-bottom:0;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));max-height:90dvh}
  .cj-tarik{display:block;align-self:center;width:44px;height:5px;border-radius:3px;background:#BDBDB8}
  .cj-judul{font-size:22px}
  .cj-langkah{gap:10px}
  .cj-gb{aspect-ratio:16/11}
  .cj-logo{width:40px;height:40px}.cj-main{height:30px;padding:0 9px;font-size:12.5px}
  .cj-unggah{width:70px;height:72px}.cj-unggah span{width:32px;height:32px}.cj-unggah svg{width:18px;height:18px}.cj-unggah b{font-size:8.5px}
  .cj-kartu{width:72px}.cj-kf{height:42px}.cj-kh b{font-size:10px}.cj-kh i{font-size:8px}
  .cj-slot i{width:18px;height:18px;border-radius:5px}
  .cj-tk>span b{font-size:14px}.cj-tk>span span{font-size:12px;line-height:16px}
  .cj-no{width:22px;height:22px;font-size:12px}
  .cj-aksi .btn-o,.cj-aksi .btn-h{flex:1}
}

/* ---------- tab garis bawah (Untukmu / toko) ---------- */
.tab-garis{display:flex;align-items:center;gap:20px;border-bottom:1.5px solid var(--garis);overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.tab-garis a,.tab-garis button{padding:10px 0;border:0;border-bottom:3px solid transparent;background:transparent;font:inherit;font-size:15.5px;font-weight:800;color:var(--redup);text-decoration:none;cursor:pointer;margin-bottom:-1.5px}
.tab-garis .on,.tab-garis [aria-current=page],.tab-garis [aria-selected=true]{color:var(--tinta);border-bottom-color:var(--oranye)}
.tab-garis h2{font-size:20px;font-weight:900;padding-bottom:10px;border-bottom:3px solid var(--oranye);margin:0 0 -1.5px}

/* ---------- lembar bawah (filter HP) ---------- */
dialog.lembar{border:0;padding:0;background:transparent;width:100%;max-width:520px;max-height:none;margin:auto 0 0;font-family:"Outfit",system-ui,sans-serif;color:var(--tinta);font-weight:600}
@media (min-width:760px){dialog.lembar{margin:auto}}
dialog.lembar::backdrop{background:rgba(18,18,18,.55)}
.lembar-isi{background:#fff;border:2px solid var(--tinta);border-radius:20px 20px 0 0;border-bottom:0;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;max-height:88dvh;overflow:auto}
@media (min-width:760px){.lembar-isi{border-radius:20px;border-bottom:2px solid var(--tinta)}}

/* ---------- pil pilihan ---------- */
.pil{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;border:1.5px solid var(--tinta);background:#fff;font:inherit;font-size:14px;font-weight:800;color:var(--tinta);text-decoration:none;white-space:nowrap;cursor:pointer}
.pil:hover{color:var(--tinta)}
.pil.on,.pil[aria-pressed=true]{background:var(--tinta);color:#fff;border-width:2px}
.pil-kotak{border-radius:9px}

/* ---------- footer ---------- */
.bc>footer.foot{background:var(--tinta);color:#fff;border-top:0}
.bc>footer.foot a{color:#fff}
.bc>footer.foot .ket,.bc>footer.foot span[style*="redup"]{color:#BDBDB8 !important}