/* =========================================================
   PUTIFY — Tema "Y2K Glitter Jelly"
   Sumber kebenaran visual: mockup-y2k (4).html — token, bentuk,
   shadow & keyframes dipindahkan dari sana.
   SEMUA rule di-scope html[data-mood="y2k"] — tema default tidak
   tersentuh sedikit pun saat tema ini nonaktif (file pun tak dimuat).
   ========================================================= */

/* ---------- token ---------- */
html[data-mood="y2k"]{
  --y2k-base:#FFF8FC;
  --y2k-base-2:#FFEFF7;
  --y2k-pink:#FF5FA2;
  --y2k-pink-deep:#E8408A;
  --y2k-pink-soft:#FFD3E8;
  --y2k-lilac:#C9A6FF;
  --y2k-cyan:#7FE7FF;
  --y2k-ink:#4A2E45;
  --y2k-ink-soft:#8C6E85;
  --y2k-line:#FFD9EE;
  --y2k-shadow:rgba(255,95,162,.18);
  --y2k-shadow-deep:rgba(201,90,150,.28);
  --y2k-radius:28px;
  --y2k-shine:rgba(255,255,255,.75);
  --y2k-ease:cubic-bezier(.34,1.56,.64,1);

  /* override token putify — elemen lama ikut berubah tanpa nulis ulang rule */
  --blush:#FFF4FA;
  --blush-deep:#FFE4F1;
  --plum:var(--y2k-ink);
  --plum-soft:var(--y2k-ink-soft);
  --rose:var(--y2k-pink-deep);
  --rose-light:#FF8FC0;
  --cream:#FFFFFF;
  --line:var(--y2k-line);
  --shadow:rgba(255,95,162,.14);
  --shadow-deep:var(--y2k-shadow-deep);
  --radius:26px;
  /* --gold / --gold-deep sengaja TIDAK diubah: elemen trust (Vault, badge
     lelang, Founding) tetap emas supaya rasa terpercayanya utuh */
}

/* ---------- reduced motion: semua motion tema mati, tampilan tetap utuh ---------- */
@media (prefers-reduced-motion:reduce){
  html[data-mood="y2k"] *,
  html[data-mood="y2k"] *::before,
  html[data-mood="y2k"] *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---------- background dim + hiasan pasif (elemen di-inject theme-y2k.js) ---------- */
html[data-mood="y2k"] body{
  background:linear-gradient(160deg,#FBE9F2 0%,#EFE4F7 42%,#E4EEF7 100%) fixed;
  color:var(--y2k-ink);
}
html[data-mood="y2k"] .y2k-bg-wash{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:linear-gradient(160deg,#FBE9F2 0%,#EFE4F7 42%,#E4EEF7 100%)}
html[data-mood="y2k"] .y2k-bg-blob{position:fixed;border-radius:50%;filter:blur(70px);opacity:.5;z-index:-2;pointer-events:none;animation:y2kDrift 22s ease-in-out infinite}
html[data-mood="y2k"] .y2k-bg-blob.g1{width:520px;height:520px;top:-120px;left:-80px;background:radial-gradient(circle,#FFC3E1,transparent 70%)}
html[data-mood="y2k"] .y2k-bg-blob.g2{width:460px;height:460px;top:30%;right:-140px;background:radial-gradient(circle,#C9A6FF,transparent 70%);animation-delay:-7s}
html[data-mood="y2k"] .y2k-bg-blob.g3{width:420px;height:420px;bottom:-100px;left:25%;background:radial-gradient(circle,#9FE0F5,transparent 70%);animation-delay:-14s}
html[data-mood="y2k"] .y2k-bg-stars{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background-image:radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 1.6px);
  background-size:46px 46px}
@keyframes y2kDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,25px) scale(.95)}}

/* ---------- nav ---------- */
html[data-mood="y2k"] header.nav{background:rgba(251,233,242,.78)}
html[data-mood="y2k"] .logo .gem{background:radial-gradient(circle at 30% 30%,#fff,var(--y2k-pink));border-radius:50%;transform:none;box-shadow:0 0 6px var(--y2k-pink)}

/* ---------- tombol jelly (dibangun DI ATAS .btn eksisting) ---------- */
html[data-mood="y2k"] .btn{position:relative;overflow:hidden;font-weight:700;
  transition:transform .3s var(--y2k-ease),box-shadow .3s var(--y2k-ease)}
html[data-mood="y2k"] .btn::before{content:'';position:absolute;top:2px;left:10%;right:10%;height:40%;
  background:linear-gradient(180deg,var(--y2k-shine),transparent);
  border-radius:100px 100px 60% 60%/100% 100% 100% 100%;pointer-events:none}
html[data-mood="y2k"] .btn:active{transform:scale(.95)}
html[data-mood="y2k"] .btn-primary{
  background:linear-gradient(120deg,var(--y2k-pink),#FF8FC0 55%,var(--y2k-lilac));
  background-size:200% 200%;color:#fff;box-shadow:0 8px 20px var(--y2k-shadow-deep)}
  /* animasi flowGrad bawaan putify tetap jalan (tidak di-override) */
html[data-mood="y2k"] .btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 28px var(--y2k-shadow-deep)}
html[data-mood="y2k"] .btn-ghost{background:#fff;color:var(--y2k-pink-deep);border:1.5px solid var(--y2k-line)}
html[data-mood="y2k"] .btn-ghost:hover{border-color:var(--y2k-pink);color:var(--y2k-pink-deep);transform:translateY(-2px)}

/* ---------- hero: headline chrome/shimmer (Fredoka) ---------- */
html[data-mood="y2k"] h1.hero-title{font-family:'Fredoka','Fraunces',sans-serif;font-weight:600;letter-spacing:-.5px}
html[data-mood="y2k"] h1.hero-title em{font-style:normal;color:var(--y2k-pink-deep)}
html[data-mood="y2k"] h1.hero-title .shine{
  background:linear-gradient(100deg,var(--y2k-ink) 0%,#fff 15%,var(--y2k-pink) 30%,var(--y2k-lilac) 50%,var(--y2k-cyan) 65%,#fff 80%,var(--y2k-ink) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:y2kShimmer 5s ease-in-out infinite}
@keyframes y2kShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
html[data-mood="y2k"] .petal{background:radial-gradient(circle at 30% 30%,#fff,var(--y2k-pink-soft));border-radius:50%;filter:blur(.5px)}

/* ---------- hero 3D: stage tilt + bubble + pcard (elemen stage/bubble via JS) ---------- */
html[data-mood="y2k"] .hero-visual{perspective:1200px;transform-style:preserve-3d}
html[data-mood="y2k"] .y2k-hero-stage{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .3s ease-out}
html[data-mood="y2k"] .y2k-bubble{
  position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.98), rgba(255,255,255,.3) 30%, transparent 42%),
    radial-gradient(circle at 68% 72%, var(--bc2,var(--y2k-cyan)), transparent 55%),
    radial-gradient(circle at 42% 58%, var(--bc1,var(--y2k-pink)), var(--y2k-lilac) 78%);
  box-shadow:inset 0 -14px 26px rgba(180,90,160,.35), inset 0 8px 16px rgba(255,255,255,.6), 0 16px 34px rgba(201,90,150,.28);
  animation:y2kBob 9s ease-in-out infinite}
html[data-mood="y2k"] .y2k-bubble.b1{width:150px;height:150px;top:-10px;right:16px;--bc1:var(--y2k-pink);--bc2:var(--y2k-cyan);animation-duration:10s}
html[data-mood="y2k"] .y2k-bubble.b2{width:90px;height:90px;bottom:44px;left:-4px;--bc1:var(--y2k-lilac);--bc2:var(--y2k-pink);animation-duration:8s;animation-delay:1.2s}
html[data-mood="y2k"] .y2k-bubble.b3{width:60px;height:60px;top:120px;left:56px;--bc1:var(--y2k-cyan);--bc2:var(--y2k-lilac);animation-duration:7s;animation-delay:.6s}
@keyframes y2kBob{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-24px) translateX(12px)}}
html[data-mood="y2k"] .pcard{border:none;border-radius:24px;box-shadow:0 20px 44px rgba(201,90,150,.3), 0 4px 10px rgba(201,90,150,.2)}
html[data-mood="y2k"] .pcard::after{content:'';position:absolute;inset:0;border-radius:24px;padding:2px;
  background:linear-gradient(150deg,var(--y2k-pink),var(--y2k-cyan));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
html[data-mood="y2k"] .pcard:hover{box-shadow:0 26px 60px var(--y2k-shadow-deep)}
html[data-mood="y2k"] .pcard .pr{color:var(--y2k-pink-deep)}

/* ---------- marquee → pita kado ---------- */
html[data-mood="y2k"] .marquee{background:linear-gradient(90deg,rgba(255,211,232,.55),rgba(201,166,255,.4) 50%,rgba(127,231,255,.45));color:var(--y2k-pink-deep)}
html[data-mood="y2k"] .marquee span{color:var(--y2k-pink-deep)}
html[data-mood="y2k"] .marquee span::after{content:none} /* pemisah ✦ diganti bow SVG (via JS) */
html[data-mood="y2k"] .marquee-track{gap:30px;align-items:center}
/* kecepatan scroll bawaan (26s) TIDAK diubah — pelajaran dari revisi Futura */
html[data-mood="y2k"] .marquee .y2k-bow{width:34px;height:24px;flex-shrink:0;display:inline-block}

/* ---------- kartu kategori: blob y2k + wobble (bentuk blob sudah ada, warnanya dipindah) ---------- */
html[data-mood="y2k"] .cat:nth-child(6n+1){background:radial-gradient(circle at 30% 25%,#fff,#FFC3E1 88%)}
html[data-mood="y2k"] .cat:nth-child(6n+2){background:radial-gradient(circle at 30% 25%,#fff,#D9BFFF 88%)}
html[data-mood="y2k"] .cat:nth-child(6n+3){background:radial-gradient(circle at 30% 25%,#fff,#FFB8D8 88%)}
html[data-mood="y2k"] .cat:nth-child(6n+4){background:radial-gradient(circle at 30% 25%,#fff,#B9E7F7 88%)}
html[data-mood="y2k"] .cat:nth-child(6n+5){background:radial-gradient(circle at 30% 25%,#fff,#E3C4FF 88%)}
html[data-mood="y2k"] .cat:nth-child(6n+6){background:radial-gradient(circle at 30% 25%,#fff,#FFCEE6 88%)}
html[data-mood="y2k"] .cat{box-shadow:0 8px 18px var(--y2k-shadow),inset 0 -8px 14px rgba(255,95,162,.14),inset 0 5px 8px rgba(255,255,255,.65);
  transition:transform .4s var(--y2k-ease),box-shadow .4s var(--y2k-ease)}
html[data-mood="y2k"] .cat:hover{transform:translateY(-8px) scale(1.06) rotate(-3deg)}

/* ---------- kartu produk: BENTUK kartu dipotong jadi lelehan (CSS mask) ----------
   .prod diberi padding bawah 38px sebagai zona lelehan, lalu SELURUH kartu
   (background, ring, isi) di-mask mengikuti siluet tetesan → tetesan adalah
   badan kartu itu sendiri, bukan elemen tempelan.
   Shadow dipindah ke wrapper .y2k-shell (di-inject JS) karena mask ikut
   memotong box-shadow bila di elemen yang sama. */
html[data-mood="y2k"] .y2k-shell{
  filter:drop-shadow(0 12px 14px rgba(201,90,150,.30));
  transition:transform .4s var(--y2k-ease),filter .4s var(--y2k-ease)}
html[data-mood="y2k"] .y2k-shell:hover{
  transform:translateY(-9px) scale(1.02);
  filter:drop-shadow(0 20px 24px rgba(201,90,150,.38))}
/* filter tab menyembunyikan .prod → shell-nya ikut hilang supaya grid tak bolong */
html[data-mood="y2k"] .y2k-shell:has(> .prod[style*="none"]){display:none}
html[data-mood="y2k"] .prod{
  border:none;overflow:visible;box-shadow:none;background:#FFF7FB;
  padding-bottom:38px;
  border-radius:42px 42px 0 0/48px 48px 0 0;
  -webkit-mask-image:linear-gradient(#fff,#fff),url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%2048'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20H400%20V12%20C392,12%20390,26%20382,26%20C374,26%20374,14%20364,14%20C354,14%20354,38%20341,38%20C329,38%20329,15%20317,15%20C305,15%20305,28%20293,28%20C283,28%20281,13%20269,13%20C257,13%20257,42%20243,42%20C229,42%20231,15%20219,15%20C207,15%20207,32%20195,32%20C185,32%20183,13%20171,13%20C159,13%20159,36%20145,36%20C131,36%20133,15%20121,15%20C109,15%20109,26%2097,26%20C87,26%2085,13%2073,13%20C61,13%2061,32%2047,32%20C35,32%2035,14%2023,14%20C13,14%2011,11%200,11%20Z'%20fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size:100% calc(100% - 47px),100% 48px;
  -webkit-mask-position:top,bottom;-webkit-mask-repeat:no-repeat;
  mask-image:linear-gradient(#fff,#fff),url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%2048'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20H400%20V12%20C392,12%20390,26%20382,26%20C374,26%20374,14%20364,14%20C354,14%20354,38%20341,38%20C329,38%20329,15%20317,15%20C305,15%20305,28%20293,28%20C283,28%20281,13%20269,13%20C257,13%20257,42%20243,42%20C229,42%20231,15%20219,15%20C207,15%20207,32%20195,32%20C185,32%20183,13%20171,13%20C159,13%20159,36%20145,36%20C131,36%20133,15%20121,15%20C109,15%20109,26%2097,26%20C87,26%2085,13%2073,13%20C61,13%2061,32%2047,32%20C35,32%2035,14%2023,14%20C13,14%2011,11%200,11%20Z'%20fill='white'/%3E%3C/svg%3E");
  mask-size:100% calc(100% - 47px),100% 48px;
  mask-position:top,bottom;mask-repeat:no-repeat}
html[data-mood="y2k"] .y2k-shell:nth-child(2n) .prod{
  border-radius:38px 38px 0 0/34px 34px 0 0;
  -webkit-mask-image:linear-gradient(#fff,#fff),url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%2048'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20H400%20V13%20C390,13%20388,28%20378,28%20C368,28%20368,13%20356,13%20C344,13%20344,40%20330,40%20C316,40%20318,14%20306,14%20C294,14%20294,25%20282,25%20C272,25%20270,12%20258,12%20C246,12%20246,34%20232,34%20C218,34%20220,13%20208,13%20C196,13%20196,30%20184,30%20C174,30%20172,12%20160,12%20C148,12%20148,43%20133,43%20C119,43%20121,14%20109,14%20C97,14%2097,25%2085,25%20C75,25%2073,12%2061,12%20C49,12%2049,30%2035,30%20C23,30%2023,13%2013,13%20C7,13%205,12%200,12%20Z'%20fill='white'/%3E%3C/svg%3E");
  mask-image:linear-gradient(#fff,#fff),url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%2048'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20H400%20V13%20C390,13%20388,28%20378,28%20C368,28%20368,13%20356,13%20C344,13%20344,40%20330,40%20C316,40%20318,14%20306,14%20C294,14%20294,25%20282,25%20C272,25%20270,12%20258,12%20C246,12%20246,34%20232,34%20C218,34%20220,13%20208,13%20C196,13%20196,30%20184,30%20C174,30%20172,12%20160,12%20C148,12%20148,43%20133,43%20C119,43%20121,14%20109,14%20C97,14%2097,25%2085,25%20C75,25%2073,12%2061,12%20C49,12%2049,30%2035,30%20C23,30%2023,13%2013,13%20C7,13%205,12%200,12%20Z'%20fill='white'/%3E%3C/svg%3E")}
/* transform & shadow pindah ke shell */
html[data-mood="y2k"] .prod:hover{transform:none;box-shadow:none}
/* "bungkus permen": ring gradient pink-lilac-cyan lewat mask, tanpa ubah DOM */
html[data-mood="y2k"] .prod::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:3px;z-index:4;
  background:linear-gradient(155deg,var(--y2k-pink),var(--y2k-lilac) 50%,var(--y2k-cyan));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
/* warna jelly di ujung tetesan: gradient di zona bawah kartu, ikut terpotong mask
   → warna mengikuti bentuk tetesan persis; atasnya transparan (menyatu ke putih) */
html[data-mood="y2k"] .prod::after{content:'';position:absolute;left:0;right:0;bottom:0;height:52px;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 9px 12px at 61% 84%,rgba(255,255,255,.6),transparent 62%),
    radial-gradient(ellipse 7px 10px at 36% 74%,rgba(255,255,255,.5),transparent 62%),
    radial-gradient(ellipse 6px 9px at 85% 78%,rgba(255,255,255,.45),transparent 62%),
    linear-gradient(90deg,var(--md1,#FF8FC0),var(--md2,#C9A6FF) 50%,var(--md3,#7FE7FF));
  -webkit-mask:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.9) 62%,#000 100%);
  mask:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.9) 62%,#000 100%)}
/* variasi warna lelehan per kartu */
html[data-mood="y2k"] .y2k-shell:nth-child(4n+2) .prod::after{--md1:#C9A6FF;--md2:#FFAEDD;--md3:#7FE7FF}
html[data-mood="y2k"] .y2k-shell:nth-child(4n+3) .prod::after{--md1:#7FE7FF;--md2:#C9A6FF;--md3:#FF8FC0}
html[data-mood="y2k"] .y2k-shell:nth-child(4n+4) .prod::after{--md1:#FFAEDD;--md2:#E6D4FF;--md3:#9BD9FF}
/* frame foto: sudut atas ikut blob kartu; foto tetap prioritas */
html[data-mood="y2k"] .prod .img{border-radius:40px 40px 0 0/46px 46px 0 0;overflow:hidden}
html[data-mood="y2k"] .y2k-shell:nth-child(2n) .prod .img{border-radius:36px 36px 0 0/32px 32px 0 0}
/* tepi awan putih: batas foto → body — dangkal & rendah supaya area foto luas */
html[data-mood="y2k"] .prod .y2k-cloud{position:absolute;left:0;right:0;bottom:-1px;height:10px;z-index:2;pointer-events:none}
html[data-mood="y2k"] .prod .y2k-cloud svg{width:100%;height:100%;display:block}
/* sparkle kelap-kelip di dalam frame */
html[data-mood="y2k"] .prod .y2k-spark{position:absolute;font-size:13px;color:#fff;opacity:.9;animation:y2kTwinkle 2.4s ease-in-out infinite;z-index:3;pointer-events:none;text-shadow:0 1px 4px rgba(0,0,0,.25)}
@keyframes y2kTwinkle{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
/* emoji pop-out: HANYA fallback produk tanpa foto (foto asli tidak diganggu) */
html[data-mood="y2k"] .prod .y2k-emo-jelly{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:5;
  width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 32% 24%,#fff,rgba(255,255,255,.18) 44%,rgba(255,255,255,0) 56%),linear-gradient(160deg,#FFD3E8,#FF8FC0);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 22px rgba(0,0,0,.2),inset 0 -9px 14px rgba(0,0,0,.1),inset 0 5px 7px rgba(255,255,255,.75)}
html[data-mood="y2k"] .prod .y2k-emo-jelly img.emoji{width:44px;height:44px}
html[data-mood="y2k"] .prod:hover .y2k-emo-jelly{animation:y2kJiggle .6s var(--y2k-ease)}
@keyframes y2kJiggle{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-50%) rotate(-9deg) scale(1.06)}75%{transform:translateX(-50%) rotate(9deg) scale(1.06)}}
/* grid diberi ruang atas untuk bubble yang menonjol keluar */
html[data-mood="y2k"] .prod-grid{padding-top:30px;row-gap:30px}
/* badge → hangtag / label kado (bukan pil): nempel dari sisi kiri + lubang tali */
html[data-mood="y2k"] .prod .badge{
  left:0;top:16px;border-radius:0 20px 20px 0;padding:6px 14px 6px 20px;
  text-transform:none;letter-spacing:0;font-size:11px;
  box-shadow:0 5px 12px rgba(0,0,0,.16)}
html[data-mood="y2k"] .prod .badge::before{content:'';position:absolute;left:9px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--y2k-pink);box-shadow:0 0 0 2px #fff}
html[data-mood="y2k"] .prod .badge.preloved{background:linear-gradient(135deg,#fff,#FFEAF4);color:var(--y2k-pink-deep);border:none}
html[data-mood="y2k"] .prod .badge.baru{background:linear-gradient(135deg,var(--y2k-pink),var(--y2k-pink-deep));color:#fff}
html[data-mood="y2k"] .prod .badge.lelang::before{background:var(--gold)} /* lelang tetap emas (trust) */
html[data-mood="y2k"] .prod .heart{background:#fff;color:var(--y2k-pink);box-shadow:0 4px 10px rgba(0,0,0,.14);transition:transform .3s var(--y2k-ease)}
html[data-mood="y2k"] .prod .heart:hover{transform:scale(1.25) rotate(-12deg)}
/* harga: pil gradient pink glossy */
html[data-mood="y2k"] .price-bubble{
  background:linear-gradient(135deg,var(--y2k-pink),var(--y2k-pink-deep));color:#fff;
  box-shadow:0 6px 14px var(--y2k-shadow-deep),inset 0 2px 3px rgba(255,255,255,.45)}
html[data-mood="y2k"] .price-bubble.auc{background:linear-gradient(120deg,var(--gold),var(--gold-deep));box-shadow:0 4px 12px rgba(184,137,90,.35),inset 0 2px 3px rgba(255,255,255,.4)}
html[data-mood="y2k"] .meta-pill.stok{color:var(--y2k-pink-deep);border-color:#FF8FC0}
/* pil "Sisa 1 loh sis": teks putih di gradient pink tua supaya kontras jelas */
html[data-mood="y2k"] .meta-pill.stok.sisa1{
  color:#fff;background:linear-gradient(120deg,var(--y2k-pink-deep),var(--y2k-pink));
  border:1.5px solid #fff;box-shadow:0 4px 10px var(--y2k-shadow-deep);
  text-shadow:0 1px 2px rgba(0,0,0,.18)}

/* ---------- kartu toko: blob + strip aksen + ava jelly + badge hangtag ---------- */
html[data-mood="y2k"] .shop-card{
  position:relative;overflow:hidden;border-radius:32px 32px 28px 28px/36px 36px 24px 24px;
  background:#fff;box-shadow:0 12px 28px var(--y2k-shadow);
  transition:transform .35s var(--y2k-ease),box-shadow .35s var(--y2k-ease)}
/* hiasan background: gradient pastel lembut, warna mengikuti aksen kartu (teks tetap kontras) */
html[data-mood="y2k"] .shop-card:nth-child(3n+1){--sc:var(--y2k-pink);
  background:linear-gradient(168deg,#fff 30%,#FFF1F8 70%,#FFE7F3 100%)}
html[data-mood="y2k"] .shop-card:nth-child(3n+2){--sc:var(--y2k-lilac);border-radius:28px 28px 34px 34px/24px 24px 40px 40px;
  background:linear-gradient(168deg,#fff 30%,#F6F0FF 70%,#EEE3FF 100%)}
html[data-mood="y2k"] .shop-card:nth-child(3n+3){--sc:var(--y2k-cyan);
  background:linear-gradient(168deg,#fff 30%,#EFFAFF 70%,#E2F5FD 100%)}
html[data-mood="y2k"] .shop-card::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--sc,var(--y2k-pink)),var(--y2k-cyan));z-index:1}
html[data-mood="y2k"] .shop-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 18px 38px var(--y2k-shadow-deep)}
html[data-mood="y2k"] .shop-card .ava{
  border-radius:58% 42% 50% 50%/50% 50% 42% 58%;overflow:hidden;
  background:radial-gradient(circle at 32% 24%,#fff,rgba(255,255,255,.15) 44%,rgba(255,255,255,0) 56%),linear-gradient(160deg,var(--sc,var(--y2k-pink)),var(--y2k-lilac));
  box-shadow:0 10px 18px rgba(0,0,0,.16),inset 0 -8px 12px rgba(0,0,0,.12),inset 0 5px 6px rgba(255,255,255,.7);
  animation:y2kWobble 7s ease-in-out infinite}
@keyframes y2kWobble{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-6px) rotate(3deg)}}
html[data-mood="y2k"] .shop-card .ava img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* badge Verified/Founding → hangtag (gaya sama dengan badge produk) */
html[data-mood="y2k"] .badge-founding,
html[data-mood="y2k"] .badge-verif{
  border-radius:0 13px 13px 0;padding:5px 12px 5px 16px;position:relative;
  box-shadow:0 3px 7px rgba(0,0,0,.14);border:none}
html[data-mood="y2k"] .badge-founding::before,
html[data-mood="y2k"] .badge-verif::before{content:'';position:absolute;left:7px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.15)}
html[data-mood="y2k"] .badge-founding{background:linear-gradient(135deg,#FFE7B0,#FFCF6E);color:#8A5A16}
html[data-mood="y2k"] .badge-verif{background:linear-gradient(135deg,var(--y2k-pink),var(--y2k-pink-deep));color:#fff}

/* ---------- hottest & trust ---------- */
html[data-mood="y2k"] .hot-item{border:none;border-radius:24px 24px 20px 20px/28px 28px 18px 18px;box-shadow:0 8px 20px var(--y2k-shadow);transition:transform .3s var(--y2k-ease),box-shadow .3s var(--y2k-ease)}
html[data-mood="y2k"] .trust-card{border:none;border-radius:30px 30px 26px 26px/34px 34px 22px 22px;box-shadow:0 8px 20px var(--y2k-shadow);background:#fff}
html[data-mood="y2k"] .trust-card:hover{background:#fff;transform:translateY(-5px)}
html[data-mood="y2k"] .sec-title em{color:var(--y2k-pink-deep)}

/* ---------- reveal: pakai sistem .reveal/.show eksisting, cuma easing-nya di-jelly-kan ---------- */
html[data-mood="y2k"] .reveal{transition:opacity .7s var(--y2k-ease),transform .7s var(--y2k-ease)}

/* ---------- trust-critical: dosis playful dikurangi (keputusan sadar) ----------
   Halaman checkout/bayar/sertifikat diberi class .y2k-calm oleh theme-y2k.js:
   palet & radius tetap Y2K, tapi tanpa shimmer/jiggle/drip/sparkle. */
html[data-mood="y2k"] body.y2k-calm .y2k-bg-blob,
html[data-mood="y2k"] body.y2k-calm .y2k-bg-stars{display:none}
html[data-mood="y2k"] body.y2k-calm .price-bubble{box-shadow:0 3px 8px var(--y2k-shadow)}
html[data-mood="y2k"] body.y2k-calm .btn::before{content:none}
html[data-mood="y2k"] body.y2k-calm *{animation-duration:0s !important}

/* ---------- responsif (breakpoint mengikuti mockup & grid eksisting) ---------- */
@media(max-width:860px){
  html[data-mood="y2k"] .prod-grid{row-gap:38px}
  html[data-mood="y2k"] .y2k-bubble.b1{width:110px;height:110px}
}
@media(max-width:520px){
  html[data-mood="y2k"] .prod .y2k-emo-jelly{width:64px;height:64px;top:-20px}
  html[data-mood="y2k"] .prod .y2k-emo-jelly img.emoji{width:32px;height:32px}
  html[data-mood="y2k"] .prod-grid{padding-top:24px;row-gap:32px}
  html[data-mood="y2k"] .prod{border-radius:30px 30px 26px 26px/34px 34px 24px 24px}
  html[data-mood="y2k"] .prod:nth-child(2n){border-radius:26px 26px 32px 32px/24px 24px 36px 36px}
  html[data-mood="y2k"] .prod .img{border-radius:28px 28px 0 0/32px 32px 0 0}
  html[data-mood="y2k"] .prod:nth-child(2n) .img{border-radius:24px 24px 0 0/22px 22px 0 0}
}