/* ========================================================================= Wavez Creatives — Marketplace styles (reusable across all listing pages) Approved palette. Filters left on desktop, drawer on mobile. ========================================================================= */ .wz-mk-head{max-width:1180px;margin:0 auto;padding:40px 24px 10px;} .wz-mk-title{font-family:Montserrat,sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,38px);margin:0 0 8px;letter-spacing:-0.02em;} .wz-mk-sub{color:#A9B1BA;font-size:15px;margin:0 0 22px;} .wz-mk-searchbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .wz-mk-searchbar .field{flex:1;min-width:220px;position:relative;} .wz-mk-searchbar input[type=search]{width:100%;background:#151A1F;border:1px solid #2b333b;border-radius:11px;padding:13px 14px 13px 40px;color:#fff;font-family:inherit;font-size:14.5px;outline:none;} .wz-mk-searchbar input:focus{border-color:#0D7A5F;} .wz-mk-searchbar .field i{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#5f6b75;} .wz-mk-body{max-width:1180px;margin:0 auto;padding:18px 24px 50px;display:grid;grid-template-columns:248px 1fr;gap:24px;} .wz-mk-aside{align-self:start;position:sticky;top:84px;} .wz-mk-filter{background:#151A1F;border:1px solid #232A31;border-radius:14px;padding:18px;} .wz-mk-filter h4{font-family:Montserrat,sans-serif;font-weight:700;font-size:14px;margin:0 0 14px;} .wz-mk-fg{margin-bottom:16px;} .wz-mk-fg label{display:block;font-size:12.5px;font-weight:600;color:#cdd3da;margin-bottom:6px;} .wz-mk-fg select,.wz-mk-fg input{width:100%;background:#0f1418;border:1px solid #2b333b;border-radius:9px;padding:9px 11px;color:#fff;font-family:inherit;font-size:13px;outline:none;} .wz-mk-fg select:focus,.wz-mk-fg input:focus{border-color:#0D7A5F;} .wz-mk-apply{width:100%;background:#0D7A5F;color:#fff;border:none;font-family:inherit;font-weight:700;font-size:13.5px;padding:11px;border-radius:10px;cursor:pointer;} .wz-mk-clear{display:block;text-align:center;color:#7d8893;font-size:12.5px;margin-top:10px;text-decoration:none;} .wz-mk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;} .wz-mk-count{color:#7d8893;font-size:13.5px;} .wz-mk-sort{display:flex;align-items:center;gap:8px;} .wz-mk-sort select{background:#151A1F;border:1px solid #2b333b;border-radius:9px;padding:9px 11px;color:#fff;font-family:inherit;font-size:13px;} .wz-mk-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;} .wz-mk-chip{display:inline-flex;align-items:center;gap:6px;background:#1c232a;border:1px solid #283139;border-radius:20px;padding:5px 12px;font-size:12px;color:#cdd3da;} .wz-mk-chip a{color:#7d8893;text-decoration:none;display:inline-flex;} .wz-mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;} .wz-mk-grid.cols-2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));} @media (max-width:480px){ .wz-mk-grid,.wz-mk-grid.cols-2{grid-template-columns:1fr 1fr;gap:10px;} } @media (max-width:380px){ .wz-mk-grid.cols-2{grid-template-columns:1fr;} } .wz-mk-empty{background:#151A1F;border:1px dashed #2b333b;border-radius:16px;padding:48px 24px;text-align:center;color:#7d8893;} .wz-mk-skel{background:#151A1F;border:1px solid #232A31;border-radius:16px;height:220px;position:relative;overflow:hidden;} .wz-mk-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.04),transparent);animation:wz-shimmer 1.3s infinite;} @keyframes wz-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}} .wz-mk-pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:28px;flex-wrap:wrap;} .wz-mk-pager a,.wz-mk-pager span{min-width:38px;height:38px;border-radius:10px;border:1px solid #2b333b;background:#151A1F;color:#cdd3da;display:flex;align-items:center;justify-content:center;font-size:13.5px;text-decoration:none;padding:0 10px;} .wz-mk-pager a:hover{border-color:#0D7A5F;} .wz-mk-pager .active{background:rgba(13,122,95,0.18);border-color:#0D7A5F;color:#fff;font-weight:700;} .wz-mk-pager .disabled{opacity:.4;pointer-events:none;} .wz-mk-filterbtn{display:none;background:#151A1F;border:1px solid #2b333b;color:#fff;font-family:inherit;font-weight:600;font-size:13.5px;padding:11px 16px;border-radius:10px;cursor:pointer;align-items:center;gap:8px;} @media (max-width:860px){ .wz-mk-body{grid-template-columns:1fr;} .wz-mk-filterbtn{display:inline-flex;} .wz-mk-aside{position:fixed;left:0;top:0;bottom:0;width:300px;max-width:88%;background:#0b0f12;z-index:70;transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto;padding:18px;border-right:1px solid #1a2128;} .wz-mk-aside.open{transform:translateX(0);} .wz-mk-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:65;} .wz-mk-backdrop.open{display:block;} .wz-mk-searchbar input[type=search],.wz-mk-sort select,.wz-mk-filterbtn{min-height:var(--wz-touch,44px);} } /* ---- Mobile bottom tab bar (public layout) ---- */ .wz-tabbar{display:none;} @media (max-width:640px){ .wz-tabbar{ display:flex;align-items:center;justify-content:space-around; position:fixed;left:0;right:0;bottom:0;z-index:80;height:64px; background:rgba(11,15,18,0.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-top:1px solid var(--wz-border,#232A31); padding:0 6px calc(6px + env(safe-area-inset-bottom, 0px)); height:calc(64px + env(safe-area-inset-bottom, 0px)); } .wz-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:1;min-width:0;padding:8px 6px;color:var(--wz-text-dim,#5f6b75);text-decoration:none;font-size:9.5px;font-weight:500;} .wz-tab.active{color:var(--wz-green-bright,#22C55E);font-weight:700;} .wz-mk-head,.wz-mk-body{padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px));} /* The layout's own