/* /explore marketplace page */
.xpage{overflow-x:clip}
.btn-xs{padding:9px 14px;font-size:13px;gap:7px}
.btn-xs svg{width:15px;height:15px}
/* hero */
@font-face{font-family:"PatrickHand";src:url(/fonts/PatrickHand-400.woff2) format("woff2");font-weight:400;font-display:swap}
/* header, explore page: mockup metrics */
/* hero */
.xh{position:relative;overflow-x:clip;background:radial-gradient(60% 70% at 8% 62%,rgba(238,229,255,.55),rgba(255,255,255,0) 70%),radial-gradient(40% 50% at 30% 0%,rgba(244,240,255,.6),rgba(255,255,255,0) 70%),#fff}
.xh-in{position:relative;max-width:1440px;margin:0 auto;min-height:calc(500 * var(--u));padding:0 0 calc(56 * var(--u))}
.xd{position:absolute;left:0;top:0;width:calc(1440 * var(--u));height:calc(600 * var(--u));pointer-events:none;overflow:visible}
.xh-hand{position:absolute;left:calc(36 * var(--u));top:calc(110 * var(--u));font-family:"PatrickHand","Caveat",cursive;font-size:calc(33 * var(--u));line-height:calc(37 * var(--u));letter-spacing:.06em;color:#0B0B12;transform:rotate(-10deg);transform-origin:0 0;white-space:nowrap}
.xh-hand span{display:block}.xh-hand span:nth-child(1){margin-left:calc(12 * var(--u))}.xh-hand span:nth-child(3){margin-left:calc(30 * var(--u))}
.xh-l{position:relative;z-index:2;padding:calc(76 * var(--u)) 0 0 calc(222 * var(--u));max-width:calc(1060 * var(--u))}
.xh h1{font-size:calc(80 * var(--u));line-height:1.12;letter-spacing:-.022em;font-weight:800;color:#03031F;-webkit-text-stroke:calc(1.2 * var(--u)) currentColor;white-space:nowrap}
.xh-t{color:#6004F8}
.xh-sub{margin-top:calc(10 * var(--u));font-size:calc(19.5 * var(--u));line-height:calc(32 * var(--u));color:#555A86;max-width:calc(700 * var(--u));font-weight:500}
.xs{margin-top:calc(24 * var(--u));display:flex;align-items:center;gap:calc(14 * var(--u));width:calc(785 * var(--u));height:calc(76 * var(--u));background:#fff;border:1px solid #E6E3F5;border-radius:calc(18 * var(--u));padding:0 calc(9 * var(--u)) 0 calc(28 * var(--u));box-shadow:0 14px 34px -18px rgba(60,40,140,.22)}
.xs>svg{width:calc(23 * var(--u));height:calc(23 * var(--u));color:#3A3F66;flex:none;stroke-width:2.2}
.xs input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:calc(17 * var(--u));color:#0B0B26;background:transparent;padding:10px 0 10px calc(4 * var(--u))}
.xs input::placeholder{color:#8A8FAD}
.xs input::-webkit-search-cancel-button{opacity:.6}
.xs:focus-within{box-shadow:0 14px 34px -18px rgba(60,40,140,.22),0 0 0 3px #E9D5FF}
.xs-b{flex:none;width:calc(137 * var(--u));height:calc(53 * var(--u));border:0;border-radius:calc(12 * var(--u));background:#6D32FD;color:#fff;font:inherit;font-size:calc(17 * var(--u));font-weight:600;cursor:pointer;box-shadow:0 8px 18px -10px rgba(109,50,253,.8);transition:background .15s}
.xs-b:hover{background:#5B21E6}
.ps{display:flex;flex-wrap:nowrap;white-space:nowrap;align-items:center;gap:calc(10 * var(--u));margin-top:calc(25 * var(--u));font-size:calc(15.5 * var(--u))}
.ps>span{color:#5D6285;margin-right:calc(4 * var(--u));font-weight:500}
.pq{font:inherit;font-size:calc(14.5 * var(--u));font-weight:500;color:#10102C;background:#F6F4FE;border:1px solid #E3E0FA;border-radius:999px;height:calc(34 * var(--u));padding:0 calc(17 * var(--u));cursor:pointer;transition:background .15s,border-color .15s}
.pq:hover{background:#EFEAFE;border-color:#D6CCFA}
.xh-col{position:absolute;left:calc(1008 * var(--u));top:calc(-15 * var(--u));width:calc(432 * var(--u));height:auto;z-index:1;pointer-events:none}
/* body */
.xb{padding:30px 0 20px;scroll-margin-top:72px}
.xb-g{display:grid;grid-template-columns:252px minmax(0,1fr);gap:32px;align-items:start}
.xf{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 18px 10px;}
.xf-h{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px}
.xf-h h2{font-size:18px;font-weight:800;letter-spacing:-.02em}
.clear{font:inherit;font-size:13px;font-weight:700;color:var(--violet-d);background:none;border:0;cursor:pointer}
.xf-x,.xf-go,.xf-ov{display:none}
.fg{border-top:1px solid var(--line);padding:12px 0}
.fg summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.fg summary::-webkit-details-marker{display:none}
.fg summary svg{width:15px;height:15px;color:var(--muted);transition:transform .2s}
.fg[open] summary svg{transform:rotate(180deg)}
.fg-b{display:grid;gap:2px;margin-top:8px}
.opt{position:relative;display:flex;align-items:center;gap:10px;padding:5px 4px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink2);cursor:pointer}
.opt:hover{background:#FAF7FF}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .box{flex:none;width:18px;height:18px;border-radius:5px;border:1.6px solid #CFC4E6;background:#fff;display:grid;place-items:center;transition:background .15s,border-color .15s}
.opt .box.rd{border-radius:50%}
.opt input:checked+.box{background:var(--violet);border-color:var(--violet)}
.opt input:checked+.box::after{content:"";width:9px;height:5px;border:2.4px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.opt input:checked+.box.rd::after{width:6px;height:6px;border:0;border-radius:50%;background:#fff;transform:none}
.opt input:focus-visible+.box{box-shadow:0 0 0 3px #E9D5FF}
.opt small{margin-left:auto;font-size:12px;color:var(--muted);font-weight:700}
.opt.zero .t{color:var(--muted)}
.opt.more{display:none}
.fg.all .opt.more{display:flex}
.show-more{font:inherit;font-size:13px;font-weight:700;color:var(--violet-d);background:none;border:0;cursor:pointer;text-align:left;padding:6px 4px 2px}
/* chips */
.chips-w{position:relative}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 52px 4px 2px;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.cchip{flex:none;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:700;color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 14px 5px 5px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;scroll-snap-align:start}
.cchip .ci{width:30px;height:30px;border-radius:50%}
.cchip em{margin-left:2px}
.cchip:hover{border-color:#DDD0FB}
.cchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cchip.on .ci{background:rgba(255,255,255,.14);color:#fff}
.chips-arr{position:absolute;right:0;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;box-shadow:-14px 0 16px 4px var(--bg),var(--shadow);cursor:pointer;color:var(--ink2)}
.chips-arr svg{width:18px;height:18px}
.chips-arr.hide{display:none}
.rh{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:22px 0 18px;flex-wrap:wrap}
.rc{font-size:15px;color:var(--muted)}
.rc b{color:var(--ink);font-weight:800}
.rh-r{display:flex;align-items:center;gap:10px}
.xf-btn{display:none}
.sortw{white-space:nowrap;position:relative;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 34px 0 14px;height:40px;font-size:13.5px;font-weight:600;color:var(--muted)}
.sortw select{appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;font:inherit;font-weight:800;color:var(--ink);cursor:pointer;padding:8px 0}
.sortw>svg{position:absolute;right:12px;width:14px;height:14px;pointer-events:none;color:var(--ink2)}
.vt{display:flex;background:#fff;border:1px solid var(--line);border-radius:12px;padding:3px}
.vt button{width:34px;height:32px;border:0;border-radius:9px;background:none;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.vt button svg{width:16px;height:16px}
.vt button.on{background:#F3EAFF;color:var(--violet-d)}
/* cards */
.xg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 20px}
.xc{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.xc[hidden]{display:none}
.xc:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.xc-img{display:block}
.ph{border-radius:11px;overflow:hidden;aspect-ratio:1.6;background:#F4F1F8;position:relative}
.ph>img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.xc:hover .ph>img{transform:scale(1.04)}
.bundle-ph{background:radial-gradient(100% 90% at 100% 0%,#C026D3 0%,transparent 60%),linear-gradient(150deg,#6D28D9,#4C1D95)}
.bundle-ph .bt{position:absolute;width:46%;aspect-ratio:1.6;object-fit:cover;object-position:top;border-radius:7px;box-shadow:0 10px 20px -8px rgba(0,0,0,.5);border:2px solid #fff}
.bundle-ph .bt0{left:7%;top:16%;transform:rotate(-7deg)}
.bundle-ph .bt1{left:30%;top:34%;transform:rotate(3deg);z-index:2}
.bundle-ph .bt2{right:6%;top:12%;transform:rotate(8deg)}
.bundle-ph .bp{position:absolute;right:-4%;bottom:-10%;width:34%;z-index:3;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))}
.fav{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.94);display:grid;place-items:center;cursor:pointer;color:var(--ink2);box-shadow:0 4px 12px -4px rgba(0,0,0,.3);transition:transform .15s,color .15s;z-index:4}
.fav svg{width:17px;height:17px}
.fav:hover{transform:scale(1.08)}
.fav.on{color:#EC4899}
.fav.on svg{fill:currentColor}
.xc-b{padding:12px 6px 4px;display:flex;flex-direction:column;flex:1}
.tb{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.03em;color:var(--violet-d);background:#F3EAFF;border-radius:6px;padding:3px 8px}
.is-bundle .tb{background:#FFE8F1;color:#BE185D}
.xc h3{font-size:15.5px;line-height:1.25;font-weight:800;letter-spacing:-.02em;margin-top:9px}
.xc h3 a:hover{color:var(--violet-d)}
.by{font-size:13px;color:var(--muted);margin-top:4px}
.by b{color:var(--ink2);font-weight:700}
.ds{display:none;font-size:14px;color:var(--muted);margin-top:8px}
.xc-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:14px}
.pr{font-size:12.5px;font-weight:800;color:var(--ink2);background:#F6F3FA;border-radius:999px;padding:6px 11px;white-space:nowrap}
.pr-b{background:var(--ink);color:#fff;font-size:13.5px}
/* list view */
.xg.list{grid-template-columns:1fr;gap:14px}
.xg.list .xc{flex-direction:row;gap:18px;align-items:stretch}
.xg.list .xc-img{width:300px;flex:none}
.xg.list .xc-b{padding:8px 8px 6px 0}
.xg.list .ds{display:block}
.xg.list .fav{left:262px;right:auto}
/* empty */
.xe{border:1.5px dashed #D9C8FA;border-radius:24px;background:repeating-linear-gradient(135deg,#FDFBFF 0 14px,#F8F3FF 14px 28px);text-align:center;padding:42px 24px 46px}
.xe img{width:150px;margin:0 auto 8px}
.xe h3{font-size:26px;font-weight:800;letter-spacing:-.03em}
.xe p{color:var(--muted);max-width:520px;margin:8px auto 0}
/* collections */
.xcol{padding:56px 0 30px}
.xcol-h{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.h2s{font-size:clamp(26px,2.4vw,34px);font-weight:800;letter-spacing:-.035em}
.xcol-h .hand{font-size:26px;color:var(--violet-d);transform:rotate(-5deg)}
.xcol-g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.col{position:relative;display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;transition:transform .2s,box-shadow .2s}
a.col:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.col-m{position:relative;flex:none;width:132px;height:96px;border-radius:12px;background:var(--t);overflow:hidden;display:grid;place-items:center}
.col-m img{position:absolute;width:62%;aspect-ratio:1.6;object-fit:cover;object-position:top;border-radius:6px;border:2px solid #fff;box-shadow:0 6px 14px -6px rgba(46,16,101,.5)}
.col-m .m0{left:6%;top:10%;transform:rotate(-6deg)}
.col-m .m1{right:5%;top:8%;transform:rotate(6deg)}
.col-m .m2{left:20%;bottom:6%;z-index:2}
.col-b h3{font-size:16px;font-weight:800;letter-spacing:-.02em}
.col-b p{font-size:13px;color:var(--muted);margin-top:3px}
.col-go{margin-left:auto;width:34px;height:34px;flex:none;border-radius:50%;background:#F3EAFF;color:var(--violet-d);display:grid;place-items:center}
.col-go svg{width:16px;height:16px}
.col.soon{border-style:dashed;border-color:#D9C8FA;background:#FDFBFF}
.col.soon .col-m{background:repeating-linear-gradient(135deg,var(--t) 0 10px,#fff 10px 20px)}
.col.soon h3{color:var(--ink2)}
/* band tweaks */
.xband .xm{position:absolute;left:clamp(18px,3.4vw,48px);bottom:-18px;width:250px}
.xband .xm .m{position:relative;left:0;bottom:0;width:100%}
.xcrown{position:absolute;right:-4px;top:-2px;width:58px;transform:rotate(18deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.25))}
/* responsive */
@media (max-width:1280px){.xg{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1020px){
 .xh{--u:1px}
 .xh-in{padding:0 clamp(18px,3.4vw,48px) 40px;min-height:0}
 .xd{display:none}
 .xh-hand{position:relative;left:auto;top:auto;transform:rotate(-6deg);font-size:24px;line-height:26px;margin:26px 0 0;display:flex;gap:8px;white-space:normal}
 .xh-hand span{display:inline;margin:0!important}
 .xh-l{padding:14px 0 0;max-width:none}
 .xh h1{white-space:normal;font-size:clamp(46px,8vw,76px);line-height:1.05}
 .xh-sub{font-size:17.5px;line-height:1.6;max-width:640px;margin-top:14px}
 .xs{width:100%;max-width:785px;height:68px}
 .xs input{font-size:16px}.xs>svg{width:21px;height:21px}
 .xs-b{width:auto;padding:0 24px;height:50px;font-size:16px}
 .ps{font-size:14.5px;flex-wrap:wrap;white-space:normal}.pq{font-size:14px;height:34px}
 .xh-col{position:relative;display:block;left:auto;top:auto;width:min(432px,92%);margin:22px auto 0}
 .xb-g{grid-template-columns:minmax(0,1fr)}
 .xf{position:fixed;left:0;top:0;bottom:0;z-index:80;overflow-y:auto;overscroll-behavior:contain;width:min(340px,88vw);max-height:none;border-radius:0 22px 22px 0;transform:translateX(-102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);padding:18px 20px 90px}
 .xf-ov{display:block;position:fixed;inset:0;background:rgba(15,11,30,.45);z-index:79;opacity:0;pointer-events:none;transition:opacity .25s}
 body.xf-open{overflow:hidden}body.xf-open .xf{transform:none}body.xf-open .xf-ov{opacity:1;pointer-events:auto}
 .xf-x{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;background:#F3EAFF;color:var(--violet-d);font-size:22px;line-height:1;cursor:pointer;margin-left:10px}
 .xf-h .clear{margin-left:auto}
 .xf-go{display:flex;position:fixed;left:20px;bottom:18px;width:calc(min(340px,88vw) - 40px)}
 .xf-btn{display:inline-flex}
 .xg{grid-template-columns:repeat(2,minmax(0,1fr))}
 .xcol-g{grid-template-columns:1fr}
 .xband .xm{left:auto;right:20px;top:4px;bottom:auto;width:190px}
}
@media (max-width:640px){
 .xh-hand{margin-top:18px;font-size:22px}
 .xh h1{font-size:44px}.xh-sub{font-size:16px}
 .xs{height:60px;padding-left:16px;border-radius:16px}.xs-b{padding:0 16px;height:46px;font-size:15px}.xs input{font-size:15px}
 .rh{margin:16px 0 14px}.rh-r{width:100%}.sortw{flex:1}.sortw select{flex:1}
 .xg{grid-template-columns:1fr;gap:16px}
 .xg.list .xc{flex-direction:column}.xg.list .xc-img{width:auto}.xg.list .fav{left:auto;right:16px}
 .col-m{width:110px;height:84px}
 .xband .xm{width:160px;right:10px}
}