/* =========================================================
   NUSARASA — Template E-commerce Produk UMKM (Vosss)
   Gaya "stiker": garis tebal, bayangan tegas, warna ceria.
   Ganti warna brand cukup di :root
   ========================================================= */
:root{
  --cream:#fff7e8; --cream-2:#ffefd2; --paper:#fffdf8;
  --ink:#1f1a17; --ink-2:#4a423c; --muted:#7c726a;
  --mustard:#ffc93c; --tomato:#ff6b4a; --leaf:#2e9e6b; --sky:#4aa3ff; --pink:#ff8fb1; --grape:#8b6cff;
  --b:2px solid var(--ink); --sh:4px 4px 0 var(--ink); --sh-lg:7px 7px 0 var(--ink);
  --r:18px; --r-sm:12px; --wrap:1280px;
  --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.22,1,.36,1);
  --display:'Fredoka','Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --font:'Nunito','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--cream);color:var(--ink-2);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(rgba(31,26,23,.07) 1.2px,transparent 1.2px);background-size:22px 22px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:700;line-height:1.05;letter-spacing:-.01em}
.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}
.sec{padding:90px 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:38px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(34px,4.4vw,56px)}
.sec-head p{color:var(--muted);max-width:520px;margin-top:10px;font-size:17px}
.hl{position:relative;display:inline-block;z-index:0;white-space:nowrap}
.hl::after{content:"";position:absolute;left:-4px;right:-4px;bottom:.08em;height:.42em;background:var(--mustard);border-radius:8px;z-index:-1;transform:rotate(-1.5deg) scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .3s}
.hl.t::after{background:var(--pink)}.hl.g::after{background:#9be3c0}
.go .hl::after,.in .hl::after,.hl.in::after{transform:rotate(-1.5deg) scaleX(1)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:var(--b);border-radius:999px;background:#fff;font-weight:800;font-size:12.5px;color:var(--ink)}
.tag.y{background:var(--mustard)}.tag.r{background:var(--tomato);color:#fff}.tag.g{background:var(--leaf);color:#fff}.tag.p{background:var(--pink)}.tag.s{background:var(--sky);color:#fff}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border:var(--b);border-radius:14px;font-family:var(--display);font-weight:600;font-size:17px;background:#fff;color:var(--ink);box-shadow:var(--sh);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s;white-space:nowrap}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn svg{width:20px;height:20px}
.btn-y{background:var(--mustard)}.btn-r{background:var(--tomato);color:#fff}.btn-g{background:var(--leaf);color:#fff}.btn-ink{background:var(--ink);color:#fff}
.btn-sm{height:42px;padding:0 16px;font-size:15px;border-radius:11px;box-shadow:3px 3px 0 var(--ink)}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* Ribbon */
.ribbon{background:var(--ink);color:#fff;overflow:hidden;height:40px;display:flex;align-items:center;font-weight:700;font-size:14px}
.ribbon .tr{display:flex;width:max-content;animation:marq 35s linear infinite}
.ribbon span{display:inline-flex;align-items:center;gap:14px;padding-right:40px;white-space:nowrap}
.ribbon span::after{content:"✺";color:var(--mustard)}
@keyframes marq{to{transform:translateX(-50%)}}

/* Header */
.header{position:sticky;top:0;z-index:60;background:rgba(255,247,232,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:var(--b)}
.header .wrap{display:flex;align-items:center;gap:22px;height:78px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:28px;color:var(--ink);letter-spacing:-.02em;flex:0 0 auto}
.logo .mark{width:44px;height:44px;border:var(--b);border-radius:14px;background:var(--tomato);display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink);transform:rotate(-6deg);transition:transform .5s var(--spring)}
.logo:hover .mark{transform:rotate(8deg) scale(1.06)}
.logo .mark svg{width:26px;height:26px}
.logo b{color:var(--tomato)}
.search{position:relative;flex:1;max-width:520px}
.search input{width:100%;height:50px;border:var(--b);border-radius:14px;background:#fff;padding:0 50px 0 18px;font-weight:600;box-shadow:3px 3px 0 var(--ink);outline:none}
.search input:focus{box-shadow:5px 5px 0 var(--ink)}
.search>svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;pointer-events:none}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 10px);background:#fff;border:var(--b);border-radius:16px;box-shadow:var(--sh-lg);padding:8px;display:none;z-index:5;max-height:420px;overflow:auto}
.suggest.show{display:block;animation:popIn .35s var(--spring)}
@keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.97)}}
.suggest a{display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;padding:8px;border-radius:10px}
.suggest a:hover,.suggest a.on{background:var(--cream-2)}
.suggest img{width:46px;height:46px;border-radius:10px;object-fit:cover;border:1.5px solid var(--ink)}
.suggest b{display:block;font-size:14.5px;color:var(--ink);line-height:1.3}
.suggest small{color:var(--muted);font-size:12.5px}
.suggest .pr{font-weight:800;color:var(--ink);font-size:14px}
.suggest .h{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px 8px 4px}
.suggest .none{padding:14px;color:var(--muted)}
.nav{display:flex;gap:4px}
.nav a{padding:10px 14px;border-radius:12px;font-weight:800;font-size:15px;transition:background .2s}
.nav a:hover{background:var(--cream-2)}
.nav a.active{background:var(--mustard);border:var(--b);padding:8px 12px}
.tools{display:flex;gap:10px;margin-left:auto}
.ibtn{position:relative;width:48px;height:48px;border:var(--b);border-radius:14px;background:#fff;display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink);transition:transform .2s,box-shadow .2s}
.ibtn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.ibtn svg{width:22px;height:22px}
.ibtn .n{position:absolute;top:-9px;right:-9px;min-width:24px;height:24px;padding:0 6px;border:var(--b);border-radius:999px;background:var(--tomato);color:#fff;font-size:12px;font-weight:900;display:grid;place-items:center;transform:scale(0);transition:transform .4s var(--spring)}
.ibtn .n.show{transform:scale(1)}
.ibtn.wiggle{animation:wiggle .6s var(--ease)}
@keyframes wiggle{20%{transform:rotate(-12deg) scale(1.1)}40%{transform:rotate(10deg) scale(1.1)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
.burger{display:none}
.mnav{position:fixed;inset:0;z-index:90;background:var(--mustard);padding:100px 26px 30px;display:flex;flex-direction:column;gap:10px;transform:translateY(-100%);transition:transform .6s var(--ease)}
body.menu-open .mnav{transform:none}
.mnav a{font-family:var(--display);font-weight:700;font-size:44px;color:var(--ink)}
.mnav .x{position:absolute;top:18px;right:18px}

/* Hero */
.hero{padding:60px 0 80px;position:relative}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center}
.hero h1{font-size:clamp(46px,6.4vw,92px);line-height:.98}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(40px) rotate(4deg);transition:opacity .6s var(--ease),transform .9s var(--spring)}
.hero.go h1 .w{opacity:1;transform:none}
.hero .lead{font-size:18.5px;max-width:520px;margin:26px 0 30px}
.hero .pop{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease) .6s,transform .7s var(--spring) .6s}
.hero.go .pop{opacity:1;transform:none}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.hero .proof{display:flex;align-items:center;gap:16px;margin-top:34px}
.hero .faces{display:flex}
.hero .faces i{width:40px;height:40px;border:var(--b);border-radius:50%;margin-left:-10px;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:13px;color:#fff}
.hero .faces i:first-child{margin-left:0}
.hero .proof b{display:block;font-family:var(--display);font-size:22px;color:var(--ink);line-height:1}
.hero .proof span{font-size:14px;color:var(--muted)}
.collage{position:relative;height:560px}
.stk{position:absolute;border:var(--b);border-radius:22px;overflow:hidden;background:var(--cream-2);box-shadow:var(--sh-lg);opacity:0;transform:scale(.6) rotate(var(--r0,0deg));transition:opacity .5s,transform .9s var(--spring)}
.hero.go .stk{opacity:1;transform:rotate(var(--r0,0deg))}
.stk img{width:100%;height:100%;object-fit:cover}
.stk .lbl{position:absolute;left:10px;bottom:10px;right:10px;background:#fff;border:var(--b);border-radius:12px;padding:6px 10px;font-weight:800;font-size:13px;color:var(--ink);display:flex;justify-content:space-between;gap:8px}
.stk .lbl em{font-style:normal;color:var(--tomato)}
.stk.a{left:4%;top:4%;width:46%;height:52%;--r0:-5deg;transition-delay:.2s}
.stk.b{right:2%;top:0;width:40%;height:40%;--r0:6deg;transition-delay:.35s;background:var(--mustard)}
.stk.c{right:8%;bottom:2%;width:46%;height:50%;--r0:-3deg;transition-delay:.5s}
.stk.d{left:10%;bottom:4%;width:34%;height:34%;--r0:7deg;transition-delay:.65s;background:var(--sky)}
.collage .float{animation:bob 6s ease-in-out infinite}
.collage .float.b2{animation-delay:-2s}.collage .float.c2{animation-delay:-4s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
.seal{position:absolute;left:45%;top:-4%;width:128px;height:128px;z-index:3;opacity:0;transition:opacity .6s .9s}
.hero.go .seal{opacity:1}
.seal svg{width:100%;height:100%;animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.seal b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:28px;color:var(--ink)}
.blob{position:absolute;border-radius:50%;filter:blur(0);z-index:-1}
.hero .blob.one{width:260px;height:260px;background:var(--pink);right:30%;top:10%;opacity:.35}
.hero .blob.two{width:180px;height:180px;background:#9be3c0;right:0;bottom:6%;opacity:.5}

/* Categories */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.catb{border:var(--b);border-radius:var(--r);padding:22px 16px;text-align:center;box-shadow:var(--sh);transition:transform .35s var(--spring),box-shadow .35s;background:#fff;display:block}
.catb:hover{transform:translateY(-6px) rotate(-2deg);box-shadow:var(--sh-lg)}
.catb .em{font-size:44px;line-height:1;display:block;margin-bottom:12px;transition:transform .5s var(--spring)}
.catb:hover .em{transform:scale(1.2) rotate(8deg)}
.catb b{display:block;font-family:var(--display);font-size:19px;color:var(--ink)}
.catb small{color:var(--ink-2);font-weight:700;font-size:13px}
.catb:nth-child(1){background:#ffe3a3}.catb:nth-child(2){background:#ffd2c7}.catb:nth-child(3){background:#cdeede}.catb:nth-child(4){background:#d7e9ff}.catb:nth-child(5){background:#ffdbe6}.catb:nth-child(6){background:#e5ddff}

/* Product card */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{position:relative;background:#fff;border:var(--b);border-radius:var(--r);box-shadow:var(--sh);display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s}
.card:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-lg)}
.card.hide{display:none}
.card .ph{position:relative;aspect-ratio:1/1;border-bottom:var(--b);border-radius:16px 16px 0 0;overflow:hidden;background:var(--cream-2)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.card:hover .ph img{transform:scale(1.07) rotate(1deg)}
.card .badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap;z-index:1}
.card .wish{position:absolute;top:10px;right:10px;z-index:1;width:38px;height:38px;border:var(--b);border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .3s var(--spring)}
.card .wish:hover{transform:scale(1.12)}
.card .wish svg{width:18px;height:18px}
.card .wish.on{background:var(--pink)}
.card .wish.on svg{fill:var(--ink)}
.card .b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .seller{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--leaf)}
.card .seller svg{width:14px;height:14px}
.card h3{font-family:var(--font);font-weight:800;font-size:16px;line-height:1.35;color:var(--ink)}
.card .meta{display:flex;gap:10px;font-size:12.5px;color:var(--muted);font-weight:700}
.card .meta .st{color:#e09a00}
.card .foot{display:flex;justify-content:space-between;align-items:end;gap:10px;margin-top:auto;padding-top:8px}
.card .price{font-family:var(--display);font-weight:700;font-size:21px;color:var(--ink);line-height:1.1}
.card .price s{display:block;font-family:var(--font);font-size:12.5px;color:var(--muted);font-weight:700}
.card .add{width:46px;height:46px;border:var(--b);border-radius:13px;background:var(--mustard);display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s,background .2s;flex:0 0 auto}
.card .add:hover{background:var(--tomato);color:#fff;transform:translate(-1px,-1px) rotate(-8deg)}
.card .add:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.card .add svg{width:22px;height:22px}
.card .stock{height:8px;border:1.5px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--cream-2);margin-top:4px}
.card .stock i{display:block;height:100%;background:var(--tomato)}
.card .stock-t{font-size:12px;font-weight:800;color:var(--tomato)}

/* Rail */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 72px)/4);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 8px 14px 2px;margin:-6px -8px -14px -2px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.rnav{display:flex;gap:10px}

/* Flash sale */
.flash{background:var(--tomato);border:var(--b);border-radius:28px;box-shadow:var(--sh-lg);padding:40px;position:relative;overflow:hidden}
.flash::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 20px,transparent 20px 40px);pointer-events:none}
.flash .sec-head{position:relative}
.flash h2{color:#fff}
.flash .sec-head p{color:#ffe6df}
.cd{display:flex;gap:8px;align-items:center}
.cd .u{min-width:64px;background:#fff;border:var(--b);border-radius:12px;box-shadow:3px 3px 0 var(--ink);text-align:center;padding:6px 8px;overflow:hidden}
.cd .u b{display:block;font-family:var(--display);font-size:30px;color:var(--ink);line-height:1.1}
.cd .u b.tick{animation:tick .45s var(--spring)}
@keyframes tick{from{transform:translateY(-60%);opacity:0}}
.cd .u small{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase}
.cd .sep{font-family:var(--display);font-size:28px;color:#fff}
.flash .rail{position:relative}

/* Bundle builder */
.bundle{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;align-items:start}
.bundle .box{background:#fff;border:var(--b);border-radius:26px;box-shadow:var(--sh-lg);padding:30px;position:sticky;top:100px}
.bundle .box h3{font-size:32px}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}
.slot{aspect-ratio:1/1;border:2px dashed var(--ink-2);border-radius:18px;display:grid;place-items:center;position:relative;background:var(--cream);overflow:hidden;transition:background .3s}
.slot span{font-family:var(--display);font-size:40px;color:var(--muted)}
.slot.full{border-style:solid;background:#fff;animation:drop .6s var(--spring)}
@keyframes drop{from{transform:scale(.6) rotate(-10deg)}}
.slot img{width:100%;height:100%;object-fit:cover}
.slot button{position:absolute;top:6px;right:6px;width:28px;height:28px;border:var(--b);border-radius:50%;background:#fff;font-weight:900;line-height:1}
.bsum{display:grid;gap:6px;padding:16px 0;border-top:2px dashed var(--line,rgba(31,26,23,.2));margin-bottom:16px;font-weight:700}
.bsum div{display:flex;justify-content:space-between}
.bsum .save{color:var(--leaf)}
.bsum .tot b{font-family:var(--display);font-size:28px;color:var(--ink)}
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pick{border:var(--b);border-radius:16px;background:#fff;overflow:hidden;text-align:left;padding:0;transition:transform .3s var(--spring),box-shadow .3s;box-shadow:3px 3px 0 var(--ink)}
.pick:hover{transform:translateY(-4px) rotate(-1deg)}
.pick.on{background:var(--mustard)}
.pick img{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:var(--b)}
.pick div{padding:10px 12px}
.pick b{display:block;font-size:14px;color:var(--ink);line-height:1.3}
.pick small{font-weight:800;font-size:13px}

/* Story */
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.story .ph{position:relative;border:var(--b);border-radius:30px;overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/5;transform:rotate(-2deg);background:var(--cream-2)}
.story .ph img{width:100%;height:100%;object-fit:cover}
.story .ph .tag{position:absolute;left:18px;top:18px}
.story blockquote{font-family:var(--display);font-size:clamp(28px,3vw,42px);line-height:1.2;color:var(--ink);margin:18px 0 24px}
.story .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 30px}
.story .facts div{border:var(--b);border-radius:16px;background:#fff;padding:16px;box-shadow:3px 3px 0 var(--ink)}
.story .facts b{display:block;font-family:var(--display);font-size:30px;color:var(--ink);line-height:1}
.story .facts span{font-size:13px;font-weight:700;color:var(--muted)}

/* Sellers */
.sellers{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.seller-c{background:#fff;border:var(--b);border-radius:var(--r);box-shadow:var(--sh);padding:22px;display:flex;flex-direction:column;gap:12px;transition:transform .3s var(--spring),box-shadow .3s}
.seller-c:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:var(--sh-lg)}
.seller-c.hide{display:none}
.seller-c .top{display:flex;gap:14px;align-items:center}
.seller-c .av{width:58px;height:58px;border:var(--b);border-radius:18px;display:grid;place-items:center;font-family:var(--display);font-size:24px;color:var(--ink);flex:0 0 auto}
.seller-c h3{font-size:20px}
.seller-c small{display:flex;align-items:center;gap:4px;font-weight:700;color:var(--muted);font-size:13px}
.seller-c small svg{width:14px;height:14px}
.seller-c p{font-size:14.5px}
.seller-c .row{display:flex;gap:8px;flex-wrap:wrap}
.seller-c .stats{display:flex;justify-content:space-between;border-top:2px dashed rgba(31,26,23,.18);padding-top:12px;font-size:13px;font-weight:800}
.seller-c .stats b{display:block;font-family:var(--display);font-size:20px;color:var(--ink)}

/* Testimonials / trust */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust div{border:var(--b);border-radius:18px;background:#fff;padding:20px;display:flex;gap:14px;align-items:center;box-shadow:3px 3px 0 var(--ink)}
.trust .ic{width:48px;height:48px;border:var(--b);border-radius:14px;display:grid;place-items:center;flex:0 0 auto}
.trust .ic svg{width:24px;height:24px}
.trust b{display:block;color:var(--ink);font-size:15px}
.trust span{font-size:13px;color:var(--muted);font-weight:600}
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testi{background:#fff;border:var(--b);border-radius:22px;padding:26px;box-shadow:var(--sh);position:relative}
.testi:nth-child(1){transform:rotate(-1.5deg)}.testi:nth-child(3){transform:rotate(1.5deg)}
.testi .st{color:#e09a00;font-size:18px;letter-spacing:2px}
.testi p{font-size:16.5px;color:var(--ink);margin:12px 0 18px;font-weight:600}
.testi .who{display:flex;gap:12px;align-items:center}
.testi .who i{width:42px;height:42px;border:var(--b);border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:900;color:#fff;background:var(--leaf)}
.testi .who b{display:block;color:var(--ink)}
.testi .who small{color:var(--muted);font-weight:700}

/* CTA join */
.join{background:var(--leaf);border:var(--b);border-radius:30px;box-shadow:var(--sh-lg);padding:54px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;color:#e6fff3;position:relative;overflow:hidden}
.join h2{color:#fff;font-size:clamp(34px,4vw,54px)}
.join p{font-size:17.5px;margin:14px 0 26px}
.join .big{font-family:var(--display);font-size:clamp(90px,12vw,170px);color:var(--mustard);line-height:.8;text-align:center;-webkit-text-stroke:2px var(--ink);text-shadow:6px 6px 0 var(--ink)}
.join .big small{display:block;font-size:22px;color:#fff;-webkit-text-stroke:0;text-shadow:none;margin-top:14px}

/* Page head */
.phead{padding:54px 0 30px}
.crumb{display:flex;gap:8px;font-weight:700;font-size:14px;color:var(--muted);margin-bottom:14px}
.crumb a:hover{color:var(--ink)}
.phead h1{font-size:clamp(44px,6vw,80px)}
.phead p{max-width:600px;font-size:17.5px;margin-top:14px}

/* Shop */
.shop{display:grid;grid-template-columns:270px 1fr;gap:34px;padding-bottom:100px}
.side{position:sticky;top:100px;align-self:start;background:#fff;border:var(--b);border-radius:22px;box-shadow:var(--sh);padding:22px;display:grid;gap:22px}
.side h4{font-size:18px;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 14px;border:var(--b);border-radius:999px;background:#fff;font-weight:800;font-size:14px;transition:background .2s,transform .2s var(--spring)}
.chip:hover{transform:translateY(-2px)}
.chip.on{background:var(--mustard)}
.side select,.bar select{width:100%;height:46px;border:var(--b);border-radius:12px;background:#fff;padding:0 12px;font-weight:700}
.side input[type=range]{width:100%;accent-color:var(--tomato)}
.side .rv-v{display:flex;justify-content:space-between;font-size:13px;font-weight:800;color:var(--muted)}
.toggle{display:flex;align-items:center;gap:10px;font-weight:800;cursor:pointer}
.toggle input{width:20px;height:20px;accent-color:var(--leaf)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.bar .count{font-weight:800}
.bar select{width:auto}
.bar .ftog{display:none}
.shop .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.empty{display:none;text-align:center;padding:60px 20px;border:2px dashed var(--ink-2);border-radius:22px}
.empty.show{display:block}
.empty b{display:block;font-family:var(--display);font-size:28px;color:var(--ink)}

/* PDP */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:20px 0 90px}
.gal{position:sticky;top:100px;align-self:start}
.gal .main{border:var(--b);border-radius:26px;overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:1/1;background:var(--cream-2);position:relative}
.gal .main img{width:100%;height:100%;object-fit:cover;transition:opacity .35s,transform .5s var(--ease)}
.gal .main:hover img{transform:scale(1.05)}
.gal .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.gal .thumbs button{border:var(--b);border-radius:14px;overflow:hidden;padding:0;aspect-ratio:1/1;background:var(--cream-2);opacity:.6;transition:opacity .2s,transform .3s var(--spring)}
.gal .thumbs button.on{opacity:1;transform:rotate(-3deg);box-shadow:3px 3px 0 var(--ink)}
.gal .thumbs img{width:100%;height:100%;object-fit:cover}
.info .seller-line{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:var(--b);border-radius:999px;background:#fff;font-weight:800;margin-bottom:18px}
.info .seller-line i{width:32px;height:32px;border:var(--b);border-radius:50%;display:grid;place-items:center;font-style:normal;background:var(--mustard)}
.info h1{font-size:clamp(34px,4vw,52px)}
.info .rate{display:flex;gap:14px;align-items:center;margin:12px 0;font-weight:800;color:var(--muted);font-size:14.5px}
.info .rate .st{color:#e09a00}
.info .price{display:flex;align-items:baseline;gap:12px;margin:14px 0 20px}
.info .price b{font-family:var(--display);font-size:44px;color:var(--ink)}
.info .price s{font-weight:800;color:var(--muted)}
.info .desc{font-size:16.5px;margin-bottom:24px}
.opt{margin-bottom:22px}
.opt h4{font-family:var(--font);font-weight:900;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.vars{display:flex;flex-wrap:wrap;gap:8px}
.vars button{padding:10px 16px;border:var(--b);border-radius:12px;background:#fff;font-weight:800;transition:background .2s,transform .2s var(--spring)}
.vars button:hover{transform:translateY(-2px)}
.vars button.on{background:var(--ink);color:#fff}
.buy{display:flex;gap:12px;align-items:center;margin:26px 0}
.qty{display:inline-flex;align-items:center;border:var(--b);border-radius:14px;background:#fff;height:54px;box-shadow:3px 3px 0 var(--ink)}
.qty button{width:44px;height:100%;border:0;background:none;font-weight:900;font-size:20px}
.qty input{width:44px;text-align:center;border:0;background:none;font-weight:900;font-size:17px;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.buy .btn{flex:1}
.perk{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.perk div{border:var(--b);border-radius:14px;padding:12px;background:#fff;font-size:13px;font-weight:800;display:flex;gap:8px;align-items:center}
.perk svg{width:20px;height:20px;flex:0 0 auto}
.tabs{border:var(--b);border-radius:18px;background:#fff;overflow:hidden}
.tabs nav{display:flex;border-bottom:var(--b)}
.tabs nav button{flex:1;padding:14px;border:0;background:none;font-weight:900;border-right:var(--b)}
.tabs nav button:last-child{border-right:0}
.tabs nav button.on{background:var(--mustard)}
.tabs .pane{display:none;padding:20px;font-size:15px}
.tabs .pane.on{display:block;animation:popIn .4s var(--ease)}
.tabs ul{padding-left:18px;display:grid;gap:4px}

/* Cart page */
.cartp{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;padding-bottom:100px}
.group{background:#fff;border:var(--b);border-radius:22px;box-shadow:var(--sh);margin-bottom:22px;overflow:hidden;animation:popIn .5s var(--ease)}
.group header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;background:var(--cream-2);border-bottom:var(--b)}
.group header b{display:flex;gap:10px;align-items:center;font-family:var(--display);font-size:19px;color:var(--ink)}
.group header b i{width:32px;height:32px;border:var(--b);border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:14px}
.group header small{font-weight:800;color:var(--muted)}
.line{display:grid;grid-template-columns:78px 1fr auto;gap:16px;align-items:center;padding:16px 20px;border-bottom:2px dashed rgba(31,26,23,.14)}
.line:last-of-type{border-bottom:0}
.line img{width:78px;height:78px;border:var(--b);border-radius:14px;object-fit:cover}
.line h4{font-family:var(--font);font-weight:800;font-size:15.5px;color:var(--ink);line-height:1.3}
.line small{display:block;color:var(--muted);font-weight:700;font-size:13px;margin:2px 0 8px}
.line .qty{height:40px;box-shadow:2px 2px 0 var(--ink);border-radius:11px}
.line .qty button{width:34px;font-size:17px}
.line .qty input{width:30px;font-size:15px}
.line .r{text-align:right;display:grid;gap:8px;justify-items:end}
.line .r b{font-family:var(--display);font-size:19px;color:var(--ink)}
.line .rm{border:0;background:none;font-weight:800;font-size:13px;color:var(--tomato);text-decoration:underline}
.line .bund{display:inline-block;background:var(--pink);border:1.5px solid var(--ink);border-radius:6px;padding:0 6px;font-size:11px;font-weight:900;color:var(--ink);margin-left:6px;vertical-align:middle}
.group .gfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 20px;background:var(--cream);border-top:var(--b);font-weight:800;font-size:14px}
.group .gfoot .ok{color:var(--leaf)}
.summary{position:sticky;top:100px;align-self:start;background:#fff;border:var(--b);border-radius:24px;box-shadow:var(--sh-lg);padding:26px}
.summary h3{font-size:30px;margin-bottom:14px}
.f{display:grid;gap:6px;margin-bottom:12px}
.f label{font-weight:900;font-size:13.5px;color:var(--ink)}
.f input,.f select,.f textarea{height:48px;border:var(--b);border-radius:12px;background:var(--paper);padding:0 14px;font-weight:600;outline:none;width:100%}
.f textarea{height:84px;padding:12px 14px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{box-shadow:3px 3px 0 var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pay{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.pay label{border:var(--b);border-radius:12px;padding:10px;text-align:center;font-weight:900;font-size:13.5px;cursor:pointer;background:#fff;transition:background .2s}
.pay input{position:absolute;opacity:0}
.pay label:has(input:checked){background:var(--mustard);box-shadow:3px 3px 0 var(--ink)}
.voucher{display:flex;gap:8px;margin:6px 0 4px}
.voucher input{flex:1;min-width:0;height:46px;border:var(--b);border-radius:12px;padding:0 12px;font-weight:800;text-transform:uppercase;background:var(--paper)}
.vmsg{font-size:13px;font-weight:800;min-height:20px;margin-bottom:8px}
.vmsg.ok{color:var(--leaf)}.vmsg.bad{color:var(--tomato)}
.lines2{display:grid;gap:8px;padding:14px 0;border-top:2px dashed rgba(31,26,23,.2);border-bottom:2px dashed rgba(31,26,23,.2);margin-bottom:14px;font-weight:700}
.lines2 div{display:flex;justify-content:space-between}
.lines2 .g{color:var(--leaf)}
.grand{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.grand b{font-family:var(--display);font-size:36px;color:var(--ink)}
.empty-cart{background:#fff;border:var(--b);border-radius:24px;padding:60px 30px;text-align:center;box-shadow:var(--sh)}
.empty-cart .em{font-size:70px;display:block;animation:bob 3s ease-in-out infinite}
.empty-cart h3{font-size:34px;margin:10px 0}

/* Join page */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:#fff;border:var(--b);border-radius:20px;padding:24px;box-shadow:var(--sh);position:relative}
.step .no{position:absolute;top:-18px;left:20px;width:40px;height:40px;border:var(--b);border-radius:12px;background:var(--mustard);display:grid;place-items:center;font-family:var(--display);font-size:20px;color:var(--ink)}
.step h3{font-size:22px;margin:14px 0 8px}
.step p{font-size:14.5px}
.joinform{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.formcard{background:#fff;border:var(--b);border-radius:26px;box-shadow:var(--sh-lg);padding:30px}
.formcard h3{font-size:30px;margin-bottom:16px}
.checks{list-style:none;display:grid;gap:12px;margin-top:20px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-weight:700}
.checks li i{width:26px;height:26px;border:var(--b);border-radius:8px;background:#9be3c0;display:grid;place-items:center;font-style:normal;font-size:14px;flex:0 0 auto}
.provs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}

/* Footer */
.footer{margin-top:40px;background:var(--ink);color:#d9d0c7;padding:70px 0 30px;border-top:var(--b)}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.footer .logo{color:#fff}
.footer p{margin-top:16px;max-width:320px;font-size:15px}
.footer h4{color:var(--mustard);font-size:18px;margin-bottom:14px}
.footer ul{list-style:none;display:grid;gap:8px;font-size:15px}
.footer a:hover{color:#fff}
.footer .pays{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.footer .pays span{background:#fff;color:var(--ink);border-radius:8px;padding:3px 10px;font-weight:900;font-size:12px}
.footer .bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:50px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:13.5px}

/* Fly-to-cart & toast */
.fly{position:fixed;z-index:200;width:70px;height:70px;border:var(--b);border-radius:16px;object-fit:cover;pointer-events:none;box-shadow:var(--sh)}
.toast{position:fixed;left:50%;bottom:24px;z-index:150;transform:translate(-50%,calc(100% + 40px));visibility:hidden;background:var(--ink);color:#fff;border:var(--b);border-radius:16px;padding:12px 18px;display:flex;gap:12px;align-items:center;font-weight:800;box-shadow:4px 4px 0 var(--mustard);transition:transform .5s var(--spring),visibility 0s .5s}
.toast.show{transform:translate(-50%,0);visibility:visible;transition:transform .5s var(--spring)}
.toast a{color:var(--mustard);text-decoration:underline}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:210}

/* Reveal */
.js .rv{opacity:0;transform:translateY(30px) scale(.97);transition:opacity .7s var(--ease),transform .8s var(--spring)}
.js .rv.in{opacity:1;transform:none}
[data-stagger]>.rv:nth-child(2){transition-delay:.06s}[data-stagger]>.rv:nth-child(3){transition-delay:.12s}[data-stagger]>.rv:nth-child(4){transition-delay:.18s}[data-stagger]>.rv:nth-child(5){transition-delay:.24s}[data-stagger]>.rv:nth-child(6){transition-delay:.3s}

/* Responsive */
@media (max-width:1150px){
  .nav{display:none}.burger{display:grid}
  .cats{grid-template-columns:repeat(3,1fr)}
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .rail{grid-auto-columns:calc((100% - 48px)/3)}
  .sellers,.trust{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:34px}
  .shop{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;z-index:95;width:min(330px,88vw);border-radius:0 22px 22px 0;overflow:auto;transform:translateX(-110%);transition:transform .5s var(--ease)}
  body.filters-open .side{transform:none}
  .bar .ftog{display:inline-flex}
  .footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .sec{padding:70px 0}
  .hero .wrap,.bundle,.story,.pdp,.cartp,.joinform,.join{grid-template-columns:1fr}
  .collage{height:440px}
  .bundle .box,.gal,.summary{position:static}
  .testis{grid-template-columns:1fr}
  .testi{transform:none!important}
  .join{padding:34px}
  .search{display:none}
  .header .search.m{display:block}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 32px)}
  .header .wrap{height:68px;gap:12px}
  .logo{font-size:23px}.logo .mark{width:38px;height:38px}
  .ibtn{width:44px;height:44px}
  .ibtn.hide-sm{display:none}
  .hero{padding:34px 0 50px}
  .hero .lead{font-size:16.5px}
  .collage{height:360px}
  .seal{width:92px;height:92px}.seal b{font-size:20px}
  .cats{grid-template-columns:repeat(2,1fr);gap:12px}
  .pgrid,.shop .pgrid{grid-template-columns:repeat(2,1fr);gap:14px}
  .card .b{padding:10px 11px 12px}
  .card h3{font-size:14.5px}
  .card .price{font-size:18px}
  .card .add{width:40px;height:40px;border-radius:11px}
  .card .meta{flex-wrap:wrap;gap:2px 8px}
  .rail{grid-auto-columns:70%}
  .flash{padding:24px 18px;border-radius:22px}
  .cd .u{min-width:52px}.cd .u b{font-size:24px}
  .sellers,.trust,.steps{grid-template-columns:1fr}
  .picks{grid-template-columns:repeat(2,1fr)}
  .story .facts{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .story .facts div{padding:10px}.story .facts b{font-size:22px}
  .perk{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .line{grid-template-columns:64px 1fr;gap:12px}
  .line img{width:64px;height:64px}
  .line .r{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
  .footer .cols{grid-template-columns:1fr}
  .join .big{font-size:90px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.hero h1 .w,.hero .pop,.stk,.seal{opacity:1!important;transform:rotate(var(--r0,0deg))!important}
  .hl::after{transform:rotate(-1.5deg) scaleX(1)!important}
}

/* Extra: kontrol mobile */
.m-only{display:none}
.side .x{display:none;justify-self:end}
.scrim{position:fixed;inset:0;z-index:94;background:rgba(31,26,23,.4);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
@media (max-width:1150px){.side .x{display:grid}body.filters-open .scrim{opacity:1;visibility:visible;transition:opacity .3s}}
@media (max-width:900px){.m-only{display:grid}}
.pl{position:absolute;inset:0;pointer-events:none;will-change:transform}
.pl>*{pointer-events:auto}
[hidden]{display:none!important}
.hero .wrap>*,.bundle>*,.story>*,.pdp>*,.shop>*,.cartp>*,.joinform>*,.join>*{min-width:0}
@media (max-width:640px){.bar select{max-width:170px}.picks .pick b{font-size:13px}}
.pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1150px){.pgrid,.shop .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.pgrid,.shop .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.info .price{flex-wrap:wrap}
.buy .btn{min-width:0;white-space:normal;line-height:1.15;padding:0 16px}
.hero h1{font-size:clamp(44px,5.6vw,84px)}
.seller-c .btn{margin-top:auto}
.btn-block{white-space:normal;line-height:1.15;text-align:center}
@media (max-width:640px){.stk .lbl{font-size:11px;padding:4px 8px;left:6px;right:6px;bottom:6px}.stk .lbl em{display:none}}
.stk .lbl{white-space:nowrap}
.stk .lbl em{overflow:hidden;text-overflow:ellipsis;min-width:0}