:root {
  color-scheme: light;
  --surface: #fff;
  --surface-rgb: 255 255 255;
  --surface-soft: #FFFAF3;
  --text: #210E01;
  --muted: rgba(33,14,1,.62);
  --line: rgba(33,14,1,.12);
  --cream: #FFFAF3;
  --cream-rgb: 255 250 243;
  --orange: #FFA10A;
  --orange-dark: #FB8711;
  --ink: #210E01;
  --ink-rgb: 33 14 1;
  --gold: #FFC74D;
  --crimson: #A30000;
  --maroon: #4E0807;
  --maroon-rgb: 78 8 7;
  --header-h: 72px;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --surface: #2b170d;
  --surface-rgb: 43 23 13;
  --surface-soft: #1c100b;
  --text: #fffaf3;
  --muted: rgba(255,250,243,.74);
  --line: rgba(255,250,243,.16);
  --cream: #1c100b;
  --cream-rgb: 28 16 11;
  --ink: #fffaf3;
  --ink-rgb: 255 250 243;
  --maroon: #ffc74d;
  --maroon-rgb: 255 199 77;
}
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img, svg, video, canvas { max-width: 100%; }
img, video { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-appearance: none; appearance: none; }
a { color: inherit; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
html[data-theme="dark"] body { background: var(--surface-soft) !important; color: var(--text) !important; }
html[data-theme="dark"] .pocatto-card,
html[data-theme="dark"] .sealed-card,
html[data-theme="dark"] .pocatto-panel {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .js-feat-card .pocatto-card,
html[data-theme="dark"] .js-feat-card .pocatto-panel {
  background-color: #2b170d !important;
  color: #fffaf3 !important;
}
html[data-theme="dark"] .js-feat-card a {
  color: inherit;
  background-color: transparent;
}
.pocatto-panel {
  background-color: var(--surface);
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--surface-soft) !important; color: var(--text) !important; border-color: var(--line) !important; }
/* Tailwind CDN used to bake ink=#210E01, so text-ink/70 stayed brown on dark bg. */
html[data-theme="dark"] .text-ink { color: rgb(var(--ink-rgb) / 1) !important; }
html[data-theme="dark"] .text-ink\/80 { color: rgb(var(--ink-rgb) / 0.82) !important; }
html[data-theme="dark"] .text-ink\/75 { color: rgb(var(--ink-rgb) / 0.78) !important; }
html[data-theme="dark"] .text-ink\/70 { color: rgb(var(--ink-rgb) / 0.76) !important; }
html[data-theme="dark"] .text-ink\/60 { color: rgb(var(--ink-rgb) / 0.72) !important; }
html[data-theme="dark"] .text-ink\/55 { color: rgb(var(--ink-rgb) / 0.68) !important; }
html[data-theme="dark"] .text-ink\/50 { color: rgb(var(--ink-rgb) / 0.64) !important; }
html[data-theme="dark"] .text-ink\/45 { color: rgb(var(--ink-rgb) / 0.6) !important; }
html[data-theme="dark"] .hover\:text-ink:hover { color: rgb(var(--ink-rgb) / 1) !important; }
html[data-theme="dark"] .text-maroon { color: rgb(var(--maroon-rgb) / 1) !important; }
html[data-theme="dark"] .text-cream { color: rgb(var(--cream-rgb) / 1) !important; }
html[data-theme="dark"] .bg-cream { background-color: rgb(var(--cream-rgb) / 1) !important; }
html[data-theme="dark"] .bg-orange,
html[data-theme="dark"] .bg-orange.text-ink,
html[data-theme="dark"] .bg-orange .text-ink,
html[data-theme="dark"] a.bg-orange,
html[data-theme="dark"] button.bg-orange { color: #210E01 !important; }
html[data-theme="dark"] body, html[data-theme="dark"] .grain { background-color: var(--surface-soft); color: var(--text); }
html[data-theme="dark"] footer { background-color: var(--surface) !important; color: var(--text); }
html[data-theme="dark"] .bg-ink { background-color: rgb(var(--ink-rgb) / 1) !important; }
html[data-theme="dark"] .bg-ink\/40,
html[data-theme="dark"] .bg-ink\/45 { background-color: rgba(0, 0, 0, 0.55) !important; }
html[data-theme="dark"] .border-ink\/10,
html[data-theme="dark"] .border-ink\/20 { border-color: var(--line) !important; }
html[data-theme="dark"] ::placeholder { color: rgb(var(--ink-rgb) / 0.48); }
html[data-theme="dark"] .pocatto-catnav:not(.is-active),
html[data-theme="dark"] .sealed-search,
html[data-theme="dark"] .sealed-sort select {
  background-color: var(--surface) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .pocatto-catnav.is-active {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--cream) !important;
}
html[data-theme="dark"] .pocatto-card-set,
html[data-theme="dark"] .pocatto-card-language,
html[data-theme="dark"] .pocatto-card-condition,
html[data-theme="dark"] .pocatto-earn-desc,
html[data-theme="dark"] .sealed-status:not(.is-sealed),
html[data-theme="dark"] .sealed-empty,
html[data-theme="dark"] .pocatto-catnav:not(.is-active),
html[data-theme="dark"] .sealed-search i,
html[data-theme="dark"] .pocatto-eye { color: var(--muted) !important; }
html[data-theme="dark"] .text-orange-dark { color: #ffc74d !important; }
.pocatto-theme-logo { display:inline-grid; place-items:center; width:54px; height:54px; }
.pocatto-theme-logo img { width:54px; height:54px; object-fit:contain; }
.pocatto-theme-logo .logo-dark { display:none; }
html[data-theme="dark"] .pocatto-theme-logo .logo-light { display:none; }
html[data-theme="dark"] .pocatto-theme-logo .logo-dark { display:block; }
.theme-toggle { display:grid; place-items:center; min-width:44px; height:44px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text); cursor:pointer; }
.pocatto-panel-title { font-family:DynaPuff,cursive; font-size:1.5rem; font-weight:600; color:var(--text); }
.pocatto-product-title { font-size:2rem; line-height:1.15; font-weight:700; color:var(--text); display:block; overflow:visible; overflow-wrap:anywhere; }
.pocatto-product-price { font-size:1.875rem; }
.pocatto-card-language { font-size:11px; color:var(--muted); }
.fish-amount-icon { display:block; flex:0 0 auto; vertical-align:middle; }
.fish-title .fish-icon,.pocatto-progress-fish .fish-icon { object-position:center; }
body {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
}
.sticker {
  font-family: DynaPuff, cursive;
  color: var(--cream);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--orange-dark);
}

/* Logo Pocatto — emblem gold, hanya terbaca di atas latar gelap.
   Header memakai latar terang, jadi logo diberi chip gelap (maroon) di belakangnya. */
.pocatto-logo {
  display: block;
  object-fit: contain;
}
.pocatto-logo-chip {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--maroon);
  box-shadow: 0 6px 16px rgba(78, 8, 7, 0.28);
  flex-shrink: 0;
}
.pocatto-logo-chip .pocatto-logo {
  width: 34px;
  height: 34px;
}

/* Badge ketersediaan stok.
   Warna fungsional (status), jadi tetap dipakai meski tema situs hangat. */
.pocatto-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pocatto-stock-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}
.pocatto-stock-badge.is-in { background: #E4F6EA; color: #1B6B3A; border-color: #A9DDBD; }
.pocatto-stock-badge.is-low { background: #FEF3D7; color: #8A5A00; border-color: #F0CE85; }
.pocatto-stock-badge.is-out { background: #FBE3E3; color: #9B1C1C; border-color: #EEB4B4; }

/* Titik status stok — dipakai di baris keterangan kartu & halaman detail */
.pocatto-stock-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: 0 0 auto;
  display: inline-block;
}
.pocatto-stock-dot.is-in { color: #15803D; }
.pocatto-stock-dot.is-low { color: #A16207; }
.pocatto-stock-dot.is-out { color: #B91C1C; }
.pocatto-stock-dot.is-none { color: #94A3B8; }

/* Badge kecil di atas gambar kartu produk */
.pocatto-stock-pill {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
@media (min-width: 640px) { .pocatto-stock-pill { left: 8px; top: 8px; font-size: 10px; padding: 3px 10px; } }
.pocatto-stock-pill.is-low { background: #C97A00; }
.pocatto-stock-pill.is-out { background: #9B1C1C; }
.pocatto-stock-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.9;
}

/* Kartu produk habis: gambar diredupkan, tombol tambah dimatikan */
.pocatto-out .pocatto-card-img { filter: grayscale(0.8) brightness(0.92); }
.pocatto-btn-disabled {
  cursor: not-allowed !important;
  opacity: 0.55;
  background: #9A9188 !important;
  color: #fff !important;
}
.sticker-lg {
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 5px 5px 0 var(--orange-dark);
}

/* ---------------------------------------------------------------------------
   Judul pop-out 3D dengan shadow HITAM (brand guideline).
   Dipakai di latar TERANG: "Featured Singles", "Fish Points",
   "How To Earn Fish", "Syarat dan Ketentuan".
   Beda dari .sticker (shadow oranye, dipakai di latar gelap).
   --------------------------------------------------------------------------- */
.sticker-dark {
  font-family: DynaPuff, cursive;
  font-weight: 600;
  color: var(--orange);
  --pop: 2px;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow:
    var(--pop) var(--pop) 0 var(--ink),
    calc(var(--pop) * 2) calc(var(--pop) * 2) 0 var(--ink),
    calc(var(--pop) * 3) calc(var(--pop) * 3) 0 rgba(33, 14, 1, 0.55),
    calc(var(--pop) * 4) calc(var(--pop) * 4) 6px rgba(33, 14, 1, 0.3);
  letter-spacing: 0.01em;
}
@media (min-width: 640px) {
  .sticker-dark {
    --pop: 3px;
    -webkit-text-stroke: 2.5px var(--ink);
  }
}

/* ---------------------------------------------------------------------------
   Pilihan kategori (Singles / Boxes / Packs / Slabs / Bulk).
   Elemen <a> bergaya tombol: dengan JS aktif kategori berganti di tempat
   (handler mencegah navigasi default), tanpa JS tetap bisa diklik.
   --------------------------------------------------------------------------- */
.pocatto-catnav {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(33, 14, 1, 0.12);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--ink-rgb) / 0.7);
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.pocatto-catnav:hover { border-color: var(--orange); color: var(--ink); }
.pocatto-catnav.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  box-shadow: 0 8px 20px rgba(33, 14, 1, 0.22);
}

/* Judul & tombol filter dibuat lebih menonjol */
.pocatto-filter-title { font-family: DynaPuff, cursive; font-size: 24px; font-weight: 600; color: var(--ink); }

/* Chevron select: caret native macOS nempel ~4px dari tepi kanan.
   Hilangkan appearance, taruh panah 14px masuk, padding teks 36px. */
#desktopFilters select,
#mobileFilters select,
.sealed-sort select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23210E01' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
}
html[data-theme="dark"] #desktopFilters select,
html[data-theme="dark"] #mobileFilters select,
html[data-theme="dark"] .sealed-sort select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23FFFAF3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
}
.pocatto-filter-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--ink); color: var(--cream);
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 16px rgba(33, 14, 1, 0.2);
}
.pocatto-grid-title { font-family: DynaPuff, cursive; font-size: 26px; font-weight: 600; }
.pocatto-result-count {
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: rgba(255, 199, 77, 0.35);
  border-radius: 999px; padding: 5px 12px;
}
.pocatto-loadmore {
  min-height: 48px; padding: 0 34px; border-radius: 999px;
  background: var(--ink); color: var(--cream);
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 8px 20px rgba(33, 14, 1, 0.2);
}
.pocatto-loadmore:hover { background: var(--maroon); }
.pocatto-loadmore[disabled] { opacity: 0.5; cursor: wait; }

/* ---------------------------------------------------------------------------
   Rangka produk: Singles + Slabs = grid kartu vertikal (.pocatto-card).
   Slabs mengganti rarity dengan grading+skor (PSA 10). Boxes/Packs/Bulk
   memakai daftar memanjang per bahasa (.sealed-card).
   --------------------------------------------------------------------------- */
/* Jumlah kolom mengikuti LEBAR AREA yang tersedia, bukan lebar layar: di lg
   kolom tengah hanya ~352px (kiri 260 + kanan 300), jadi 3 kolom membuat kartu
   menyusut sampai 108px. Dibuat 2 kolom di rentang itu, lalu 3 kolom begitu
   kolom tengah cukup lebar (xl ke atas). Sisa lebar itu juga dipakai untuk
   memperbesar tinggi kartu, bukan hanya menambah kolom. */
.pocatto-grid.is-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .pocatto-grid.is-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1024px) { .pocatto-grid.is-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .pocatto-grid.is-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Wrapper grid kategori tersegel: hanya wadah section bahasa, bukan grid lagi. */
.pocatto-grid.is-grouped { display: block; }

.pocatto-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; border: 1px solid rgba(33, 14, 1, 0.1);
  background: #fff; box-shadow: 0 10px 28px rgba(33, 14, 1, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pocatto-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(251, 135, 17, 0.22); }
.pocatto-card-media { display: block; position: relative; overflow: hidden; background: var(--cream); padding: 10px; }
.pocatto-card-media img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: contain; }
@media (min-width: 640px) { .pocatto-card-media { padding: 14px; } }
.pocatto-card-body { display: flex; flex-direction: column; flex: 1; padding: 10px; gap: 2px; }
.pocatto-card-title {
  display: flex; align-items: flex-start; gap: 6px; min-width: 0;
}
.pocatto-card-title .pocatto-card-name { flex: 1 1 auto; min-width: 0; }
.pocatto-card-title .pocatto-cond { flex: 0 0 auto; margin-top: 1px; }
.pocatto-card-name {
  font-size: 12px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; line-clamp: 3; overflow-wrap: anywhere;
}
@media (min-width: 640px) {
  .pocatto-card-body { padding: 12px; gap: 3px; }
  .pocatto-card-name { font-size: 14px; -webkit-line-clamp: 2; line-clamp: 2; }
}
.pocatto-card-name a:hover { color: var(--maroon); }
.pocatto-card-set { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pocatto-card-rarity { font-size: 11px; font-weight: 600; }
.pocatto-card-condition { font-size: 11px; font-weight: 600; color: var(--muted); }
.pocatto-cond {
  display: inline-flex; align-items: center;
  border-radius: 999px; padding: 2px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2;
}
.pocatto-card-grade { font-size: 11px; font-weight: 600; color: var(--ink); }
.pocatto-card-price { margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--maroon); }
.pocatto-card-add { margin-top: auto; padding-top: 8px; }
@media (min-width: 640px) {
  .pocatto-card-set, .pocatto-card-rarity, .pocatto-card-condition, .pocatto-card-grade, .pocatto-card-language { font-size: 12px; }
  .pocatto-cond { font-size: 12px; }
  .pocatto-card-price { font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   Fish: ikon, angka, progress bar, kartu How To Earn
   --------------------------------------------------------------------------- */
.fish-icon { display: inline-block; vertical-align: -0.15em; line-height: 1; object-fit: contain; }
.fish-amount { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--maroon); white-space: nowrap; }
/* Baris kurs / reward belanja: vertical-align di inline-block masih
   menaikkan ikan ~4px vs glif. Flex centering sama seperti .fish-title. */
.fish-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.28em;
}
.fish-inline .fish-icon {
  display: block;
  flex: 0 0 auto;
}

/* Ikon diposisikan terhadap REL BAR (bukan isi bar). Kalau ditempel ke isi bar,
   bar 2% di layar sempit hanya selebar ~6px sehingga ikan ikut gepeng dan tak
   terlihat. left dihitung oleh JS dari persentase progress lalu di-clamp dengan
   calc() supaya ikan selalu utuh di dalam bar, berapa pun panjang bar-nya.
   --pct = 0..100, --fish-w = lebar ikan (px). */
.pocatto-progress {
  position: relative; height: 22px; border-radius: 999px; background: rgba(33, 14, 1, 0.1);
  --pct: 0; --fish-w: 40px;
}
.pocatto-progress-fill {
  position: relative; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--gold));
  transition: width 0.4s ease;
}
/* Titik tengah ikan tepat di tepi kanan isi bar — separuh badan di atas bar dan
   separuhnya menjuntai di bawah. min() + max() pada left menjaga ikan tetap
   utuh walau isi bar baru sepanjang 2%. */
.pocatto-progress-fish {
  position: absolute;
  top: 50%;
  left: max(0px, min(calc(var(--pct) * 1% - var(--fish-w) / 2), calc(100% - var(--fish-w))));
  transform: translateY(-50%);
  display: flex; flex: 0 0 auto; align-items: center; line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(33, 14, 1, 0.25));
  transition: left 0.4s ease;
}
.pocatto-progress-fish .fish-icon { display: block; flex: 0 0 auto; width: var(--fish-w); height: var(--fish-w); }

.pocatto-tier-name {
  font-family: DynaPuff, cursive;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
  /* Lebih tebal: outline tipis warna sama (ikut warna tier inline) —
     paint-order menaruh stroke di belakang fill agar glyph tetap bersih. */
  -webkit-text-stroke: 0.8px currentColor;
  paint-order: stroke fill;
}

/* ---------------------------------------------------------------------------
   Judul "Fish Points" — mengikuti brand guideline: DynaPuff semibold, warna
   orange, digaris tepi ink, lalu bayangan bertingkat supaya terlihat menonjol
   keluar (3D popout). Ukuran bayangan di-set lewat --pop supaya bisa diperbesar
   di layar lebar tanpa mengubah proporsi.
   --------------------------------------------------------------------------- */
.fish-title {
  display: inline-flex; align-items: center; gap: 0.38em;
  font-family: DynaPuff, cursive; font-weight: 600;
  color: var(--orange);
  letter-spacing: 0.01em;
  --pop: 2px;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow:
    var(--pop) var(--pop) 0 var(--ink),
    calc(var(--pop) * 2) calc(var(--pop) * 2) 0 var(--ink),
    calc(var(--pop) * 3) calc(var(--pop) * 3) 0 rgba(33, 14, 1, 0.55),
    calc(var(--pop) * 4) calc(var(--pop) * 4) 6px rgba(33, 14, 1, 0.3);
}
/* Ikon ikan ikut menonjol: sama seperti teks, ia digaris tepi dan diberi
   bayangan bertingkat, jadi tidak terlihat "datar" di samping huruf 3D. */
.fish-title .fish-icon {
  display: block; flex: 0 0 auto;
  width: 1.05em; height: 1.05em;
  filter: drop-shadow(var(--pop) var(--pop) 0 var(--ink))
          drop-shadow(calc(var(--pop) * 2) calc(var(--pop) * 2) 0 rgba(33, 14, 1, 0.5));
}
@media (min-width: 640px) {
  .fish-title { --pop: 3px; -webkit-text-stroke: 2.5px var(--ink); }
}

.pocatto-earn { border-radius: 18px; border: 1px solid rgba(33, 14, 1, 0.1); background: var(--cream); padding: 16px; }
.pocatto-earn-title { font-size: 13.5px; font-weight: 700; }
.pocatto-earn-points { margin-top: 6px; font-size: 16px; }
.pocatto-earn-desc { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* Tombol tambah / pengatur jumlah di dalam rangka */
.pocatto-add {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; width: 100%; border-radius: 999px;
  background: var(--orange); color: var(--ink);
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background 0.18s ease;
}
.pocatto-add:hover { background: var(--orange-dark); }
.pocatto-qty {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 36px; border-radius: 999px; background: var(--ink); color: var(--cream);
}
.pocatto-qty button { display: grid; place-items: center; width: 36px; height: 36px; cursor: pointer; }
.pocatto-qty span { font-size: 12px; font-weight: 700; }

/* Detail page: tombol Add / pengatur jumlah & tanya-WA seukuran, full-width,
   nyaman untuk sentuhan di mobile. */
.pocatto-detail-cta .pocatto-add,
.pocatto-detail-cta .pocatto-qty {
  min-height: 52px; border-radius: 999px;
  font-size: 15px;
}
.pocatto-detail-cta .pocatto-qty button { width: 52px; height: 52px; font-size: 18px; }
.pocatto-detail-cta .pocatto-qty span { font-size: 15px; }

/* ---------------------------------------------------------------------------
   Halaman tersegel (Boxes / Packs / Bulk)
   Daftar memanjang kartu PUTIH — senada dengan kartu Singles: satu kartu per
   baris, thumbnail di kiri, harga di kanan atas, tombol "+ Add" selebar kartu.
   --------------------------------------------------------------------------- */
.sealed-wrap { display: block; }

.sealed-section + .sealed-section { margin-top: 34px; }

.sealed-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 14px; margin-bottom: 14px;
}
.sealed-lang {
  font-family: DynaPuff, cursive;
  font-size: 22px; font-weight: 600; line-height: 1.2;
  color: var(--ink);
}

/* Kontrol milik tiap section: search + sort */
.sealed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sealed-search {
  display: flex; align-items: center; gap: 8px;
  min-width: 200px; flex: 1 1 200px; max-width: 300px;
  height: 40px; padding: 0 12px;
  border-radius: 999px; border: 1px solid rgba(33, 14, 1, 0.14);
  background: #fff;
}
.sealed-search i { font-size: 15px; color: var(--muted); }
.sealed-search input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: none; background: transparent;
  font-size: 13px; color: var(--ink);
}
.sealed-search input:focus-visible {
  outline: 2px solid var(--orange-dark);
  outline-offset: 2px;
  border-radius: 999px;
}
.sealed-sort select {
  height: 40px; padding: 0 36px 0 12px;
  border-radius: 999px; border: 1px solid rgba(33, 14, 1, 0.14);
  background-color: #fff; font-size: 13px; color: var(--ink); cursor: pointer;
}

/* Daftar kartu */
.sealed-list { display: flex; flex-direction: column; gap: 10px; }

.sealed-card {
  display: flex; align-items: stretch; gap: 12px;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(33, 14, 1, 0.1);
  box-shadow: 0 10px 28px rgba(33, 14, 1, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sealed-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(251, 135, 17, 0.22); }
.sealed-card.is-out { opacity: 0.62; }

.sealed-thumb {
  flex: 0 0 auto; display: block; overflow: hidden;
  width: 84px; height: 105px; border-radius: 12px;
  background: var(--cream); padding: 6px;
}
.sealed-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }

.sealed-body { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 4px; }

.sealed-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sealed-name {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 14px; font-weight: 600; line-height: 1.35; min-width: 0;
}
.sealed-name a {
  flex: 1 1 auto; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-clamp: 2; overflow-wrap: anywhere;
}
.sealed-name .pocatto-cond { flex: 0 0 auto; margin-top: 1px; }
.sealed-name a { color: var(--ink); }
.sealed-name a:hover { color: var(--maroon); }
.sealed-price {
  flex: 0 0 auto; font-size: 14px; font-weight: 700;
  color: var(--maroon); white-space: nowrap;
}

.sealed-status {
  font-size: 12px; font-weight: 600;
  color: var(--muted);
}
.sealed-status.is-sealed { color: var(--orange); }

.sealed-add { margin-top: auto; padding-top: 8px; }

.sealed-empty {
  margin-top: 12px; padding: 18px;
  border-radius: 16px; border: 1px dashed rgba(33, 14, 1, 0.2);
  text-align: center; font-size: 13px; color: var(--muted);
}

/* Tombol add/qty mengikuti bentuk bawaan (pill ink) — cukup versi ringkas. */
.sealed-card .pocatto-add { min-height: 34px; font-size: 13px; }
.sealed-card .pocatto-qty { min-height: 34px; }
.sealed-card .pocatto-qty button { width: 34px; height: 34px; }

@media (min-width: 640px) {
  .sealed-card { gap: 14px; padding: 12px; }
  .sealed-thumb { width: 96px; height: 120px; border-radius: 14px; }
  .sealed-name { font-size: 15px; }
  .sealed-price { font-size: 15px; }
  .sealed-list { gap: 12px; }
}

/* Desktop: daftar memanjang jadi 3 kolom, sama seperti grid kartu. Kartu di
   kolom yang lebih sempit tidak lagi muat kalau thumbnail & tombol tetap
   seukuran baris penuh, jadi isinya ditata ulang jadi vertikal (foto di atas,
   detail di bawah) — bentuknya jadi sama dengan kartu kategori lain. */
@media (min-width: 1024px) {
  .sealed-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .sealed-search { max-width: none; }
  /* 2 kolom dulu: di lg kolom tengah baru ~352px, 3 kolom di situ membuat
     kartu hanya selebar 108px. */
  .sealed-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
  .sealed-card { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
  .sealed-thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
  .sealed-body { padding: 12px; gap: 3px; }
  .sealed-name { font-size: 14px; }
  .sealed-name a { -webkit-line-clamp: 2; line-clamp: 2; }
  .sealed-price { font-size: 15px; }
}
@media (min-width: 1280px) {
  .sealed-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Logotype di header menggantikan teks nama situs */
.pocatto-logotype { display: block; height: auto; }

/* Tombol mata untuk tampilkan/sembunyikan password */
.pocatto-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
}
.pocatto-eye:hover { color: var(--ink); background: rgba(33, 14, 1, 0.06); }
.pocatto-eye i { font-size: 18px; }

.glass {
  background: rgba(255,250,243,0.92);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass { background: rgba(255,250,243,0.78); }
}
html[data-theme="dark"] .glass { background: rgba(28,16,11,.94); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html[data-theme="dark"] .glass { background: rgba(28,16,11,.88); }
}
.grain {
  background-image:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(255,199,77,0.28), transparent 50%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(255,161,10,0.16), transparent 46%);
}
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
#featuredTrack { cursor: grab; user-select: none; -webkit-user-select: none; -moz-user-select: none; touch-action: pan-x; }
#featuredTrack a { cursor: pointer; }
#featuredTrack.is-dragging,
#featuredTrack.is-dragging a,
#featuredTrack:active { cursor: grabbing; }
#featuredTrack img { -webkit-user-drag: none; user-drag: none; }
.featured-scroll { position: relative; height: 8px; margin-top: 12px; background: rgba(33,14,1,.10); border-radius: 999px; }
.featured-scroll-thumb { position: absolute; top: 0; left: 0; height: 100%; min-width: 48px; background: var(--orange); border-radius: 999px; cursor: grab; }
.featured-scroll-thumb:active { cursor: grabbing; background: var(--orange-dark); }
.featured-scroll.is-idle { display: none; }
html[data-theme="dark"] .featured-scroll { background: rgba(255,250,243,.16); }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
#requestListBtn, #floatWa { touch-action: manipulation; }
@media (max-width: 1023px) {
  main#catalog { padding-bottom: max(9rem, calc(5.5rem + env(safe-area-inset-bottom))); }
}
:focus-visible {
  outline: 2px solid var(--orange-dark);
  outline-offset: 3px;
}
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.admin-table th, .admin-table td { padding: 0.75rem 0.85rem; text-align: left; border-bottom: 1px solid rgba(33,14,1,0.08); vertical-align: middle; }
.admin-table th { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(33,14,1,0.5); }
.admin-thumb { width: 48px; height: 60px; object-fit: cover; border-radius: 10px; background: #FFFAF3; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


html[data-theme="dark"] .pocatto-card-rarity,
html[data-theme="dark"] .pocatto-rarity-text {
  color: var(--rarity-color, #fffaf3);
}
html[data-theme="dark"] .pocatto-tier-name {
  color: var(--tier-color, #fffaf3);
}
@supports (color: color-mix(in srgb, red 42%, white)) {
  html[data-theme="dark"] .pocatto-card-rarity,
  html[data-theme="dark"] .pocatto-rarity-text {
    color: color-mix(in srgb, var(--rarity-color, #fffaf3) 42%, #fffaf3);
  }
  html[data-theme="dark"] .pocatto-tier-name {
    color: color-mix(in srgb, var(--tier-color, #fffaf3) 42%, #fffaf3);
  }
}