@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root{--blue:#82afe0;--deep:#477eb8;--ink:#294765;--muted:#8295aa;--pale:#edf5ff;--line:#e0ebf7;--pink:#f6dce7;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7faff;color:var(--ink);font-family:Nunito,system-ui,sans-serif;overflow-x:hidden}.nav{height:58px;position:sticky;top:0;z-index:10;background:#ffffffed;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.navin{max-width:760px;height:100%;margin:auto;padding:0 15px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:1000;font-size:20px;color:var(--deep);text-decoration:none;letter-spacing:.2px}.brand span{color:#f09bb9}.navlinks{display:flex;gap:13px}.navlinks a{font-size:11px;font-weight:900;color:#6e86a0;text-decoration:none}.navbtn{background:var(--deep);color:white;text-decoration:none;border-radius:20px;padding:8px 12px;font-size:11px;font-weight:900}.wrap{width:min(100% - 24px,720px);margin:auto}.hero{margin:15px auto 18px;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#e7f2ff,#fff7ef);box-shadow:0 8px 24px #9bb9d522}.hero img{display:block;width:100%;height:auto;max-height:210px;object-fit:cover}.herotxt{padding:13px 16px 16px}.herotxt h1{font-size:23px;line-height:1.1;margin:0 0 5px;color:#3d6d9e}.herotxt p{font-size:12px;margin:0;color:#7189a2;font-weight:700}.heroactions{display:flex;gap:8px;margin-top:11px}.pill{border:0;border-radius:30px;padding:9px 13px;background:var(--deep);color:white;text-decoration:none;font:900 11px Nunito}.pill.light{background:#fff;color:var(--deep);border:1px solid var(--line)}.intro{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:22px 0 10px}.intro h2{font-size:20px;margin:0;color:#3c6897}.intro small{font-size:10px;color:var(--muted);font-weight:800}.tools{display:flex;gap:8px;margin:12px 0}.search{min-width:0;flex:1;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff;font:700 12px Nunito;outline:none}.cartopen{border:0;border-radius:12px;background:#e7f1ff;color:var(--deep);padding:0 13px;font:900 12px Nunito;white-space:nowrap}.tabs{display:flex;gap:7px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{flex:none;border:1px solid var(--line);background:#fff;color:#7087a0;border-radius:22px;padding:8px 12px;font:900 10px Nunito}.tab.active{background:var(--deep);border-color:var(--deep);color:#fff}.sectionhead{display:flex;align-items:center;gap:8px;margin:18px 0 9px}.sectionhead img{width:25px;height:25px;object-fit:contain}.sectionhead h3{font-size:14px;margin:0;color:#426f9f}.count{font-size:9px;background:#e9f3ff;color:#668ab3;border-radius:20px;padding:4px 7px;font-weight:900}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:15px;padding:11px;box-shadow:0 4px 14px #b5cce41a;display:flex;flex-direction:column;gap:7px}.cardtop{display:flex;align-items:center;gap:8px}.appicon{width:32px;height:32px;flex:none;border-radius:10px;background:#f2f7fd;display:grid;place-items:center;overflow:hidden}.appicon img{width:23px;height:23px;object-fit:contain}.appicon.logo-fallback:after{content:attr(data-letter);font-size:14px;font-weight:1000;color:#477eb8}.appicon{color:#477eb8}.appicon .fallback{font-size:15px;font-weight:1000;color:var(--deep)}.cardname{font-size:12px;font-weight:1000;line-height:1.2;overflow-wrap:anywhere}.detail{font-size:10px;color:var(--muted);font-weight:700}.price{font-size:14px;color:var(--deep);font-weight:1000;margin-top:auto}.add{width:100%;border:0;border-radius:10px;background:#edf5ff;color:#477db8;padding:8px 5px;font:1000 10px Nunito}.qtyhint{font-size:9px;color:#8a9eb3}.snk{margin:28px 0 22px}.snkbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin-top:10px}.snkbox h3{margin:0 0 8px;color:var(--deep);font-size:14px}.snkbox ol{padding-left:18px;margin:0}.snkbox li{font-size:10px;color:#6f849b;line-height:1.5;padding:3px 0}.contact{background:linear-gradient(120deg,#eaf4ff,#fff5f0);border:1px solid var(--line);border-radius:17px;padding:15px;margin:20px 0}.contact h3{font-size:15px;margin:0 0 5px;color:var(--deep)}.contact p{font-size:11px;color:var(--muted);margin:0 0 10px}.contactlinks{display:grid;grid-template-columns:1fr 1fr;gap:7px}.contactlinks a{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 8px;text-align:center;color:var(--deep);font-size:10px;font-weight:900;text-decoration:none}footer{text-align:center;padding:16px 10px 26px;color:#8ca0b5;font-size:10px}.backdrop{position:fixed;inset:0;background:#172b4055;z-index:19;display:none}.backdrop.show{display:block}.drawer{position:fixed;z-index:20;right:0;top:0;height:100dvh;width:min(92vw,390px);background:#f9fbff;box-shadow:-10px 0 40px #213c5a22;transform:translateX(105%);transition:.25s;display:flex;flex-direction:column}.drawer.show{transform:translateX(0)}.drawhead{padding:16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.drawhead b{font-size:17px;color:var(--deep)}.close{border:0;background:#eaf2fc;border-radius:10px;padding:8px 11px;color:var(--deep);font-weight:900}.cartlist{padding:12px;overflow:auto;flex:1}.cartitem{background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px;margin-bottom:8px;display:grid;grid-template-columns:1fr auto;gap:8px}.cartitem strong{font-size:11px;display:block}.cartitem small{font-size:10px;color:var(--muted)}.counter{display:flex;align-items:center;gap:8px}.counter button{width:26px;height:26px;border:0;border-radius:8px;background:#eaf3ff;color:var(--deep);font-weight:1000}.counter b{font-size:11px}.cartfoot{padding:14px;border-top:1px solid var(--line);background:white}.total{display:flex;justify-content:space-between;font-size:13px;font-weight:1000;margin-bottom:10px}.buyer{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;font:700 11px Nunito}.send{width:100%;border:0;border-radius:11px;background:#477eb8;color:white;padding:12px;font:1000 12px Nunito}.empty{grid-column:1/-1;background:white;border:1px dashed var(--line);border-radius:14px;padding:22px;text-align:center;color:var(--muted);font-size:12px}@media(max-width:380px){.navlinks{gap:8px}.navlinks a{font-size:10px}.navbtn{padding:7px 9px}.grid{gap:7px}.card{padding:9px}.cardname{font-size:11px}.price{font-size:13px}.hero img{max-height:175px}}

/* VYTA dreamy motion theme */
body{overflow-x:hidden}
.sparkle-layer{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:hidden}
.butterfly{position:absolute;display:block;font-size:23px;filter:drop-shadow(0 3px 5px #8bb8e866);animation:butterflyFly 16s ease-in-out infinite;opacity:.82}
.b1{top:18%;left:-8%;animation-delay:-2s}.b2{top:58%;left:-10%;font-size:18px;animation-duration:21s;animation-delay:-9s}.b3{top:78%;left:-10%;font-size:25px;animation-duration:19s;animation-delay:-14s}
.spark{position:absolute;color:#e9b8d0;text-shadow:0 0 8px #fff,0 0 14px #b6d7ff;animation:twinkle 2.4s ease-in-out infinite}
.s1{top:17%;left:8%}.s2{top:39%;right:7%;animation-delay:.6s}.s3{top:69%;left:5%;animation-delay:1.1s}.s4{top:88%;right:9%;animation-delay:1.6s}
25%{transform:translate(28vw,-28px) rotate(12deg)}50%{transform:translate(58vw,16px) rotate(-8deg)}75%{transform:translate(88vw,-22px) rotate(14deg)}100%{transform:translate(115vw,4px) rotate(-10deg)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.65) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(35deg)}}
@keyframes floatSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes glowText{0%,100%{text-shadow:0 0 0 #fff}50%{text-shadow:0 0 10px #b7d9ff}}
.hero,.card,.snkbox,.contact,.sectionhead,.tabs,.tools,.intro,.heroactions,.navbtn{animation:floatSoft 5s ease-in-out infinite}
.card:nth-child(2n){animation-delay:.35s}.card:nth-child(3n){animation-delay:.7s}
.hero h1,.brand,.intro h2,.sectionhead h3{animation:glowText 3.5s ease-in-out infinite}
button,.pill,.contactlinks a{transition:transform .25s ease,box-shadow .25s ease}
button:hover,.pill:hover,.contactlinks a:hover{transform:translateY(-3px) scale(1.025);box-shadow:0 7px 18px #9bbfe855}
.card{transition:box-shadow .3s ease,border-color .3s ease}.card:hover{box-shadow:0 12px 26px #9bbfe844;border-color:#b6d2f0}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}}

/* VYTA STORE: gerakan lembut di seluruh elemen, tanpa kupu-kupu */
body :where(*){animation:vytaAllMove 4.8s ease-in-out infinite;}
body :where(*):nth-child(2n){animation-delay:.18s}
body :where(*):nth-child(3n){animation-delay:.36s}
body :where(*):nth-child(4n){animation-delay:.54s}
@keyframes vytaAllMove{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(0,-1.5px,0)}50%{transform:translate3d(0,1px,0)}75%{transform:translate3d(0,-1px,0)}}
/* Aksen kilau tetap bergerak */
.spark{animation:twinkle 2.4s ease-in-out infinite;}
button,.pill,.contactlinks a{transition:transform .25s ease,box-shadow .25s ease}
@media(prefers-reduced-motion:reduce){body :where(*){animation:none!important;transition:none!important}}

/* FIX: drawer keranjang harus tersembunyi saat awal dan tombol tutup selalu berfungsi. Animasi global tidak boleh menimpa transform drawer. */
#drawer.drawer{animation:none!important;transform:translateX(105%)!important;visibility:hidden;pointer-events:none;transition:transform .28s ease,visibility .28s ease!important;z-index:30}
#drawer.drawer.show{transform:translateX(0)!important;visibility:visible;pointer-events:auto}
#backdrop.backdrop{animation:none!important;transform:none!important;z-index:29}
#closeCart{position:relative;z-index:31;pointer-events:auto;cursor:pointer}

.payment-label{display:block;font-size:11px;font-weight:900;color:var(--deep);margin:2px 0 5px}.payment-select{background:#fff;color:var(--ink)}.payment-note{font-size:9px;color:var(--muted);margin:-3px 0 9px}.payment-info{margin:16px 0;padding:13px;background:#fff;border:1px solid var(--line);border-radius:15px}.payment-info h3{font-size:13px;color:var(--deep);margin:0 0 9px}.payment-chips{display:flex;gap:7px;flex-wrap:wrap}.payment-chips span{background:#edf5ff;color:#477eb8;border:1px solid #dceafa;border-radius:20px;padding:7px 11px;font-size:10px;font-weight:1000}