/* =========================================================
   NEVS Surabaya — Sportswear & Jersey Store
   ========================================================= */
:root{
  --bg:#0a0a0a; --bg-2:#111; --panel:#131313; --card:#171717; --line:#2b2b2b; --line-2:#3a3a3a;
  --lime:#b8f20c; --lime-2:#a3db00; --lime-glow:#c8ff2a;
  --text:#fff; --muted:#a6a6a6; --red:#e3192b; --light:#f3f3f3; --ink:#111;
  --radius:8px; --container:1460px;
  --font:"Barlow",system-ui,-apple-system,sans-serif;
  --head:"Montserrat",sans-serif;
  --display:"Archivo","Arial Black",sans-serif;
  --script:"Kaushan Script",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
ul{list-style:none}
svg.lucide{width:20px;height:20px;stroke-width:1.8}
.container{max-width:var(--container);margin:0 auto;padding:0 40px}
.mobile-only,.mobile-flex,.m-flex,.m-block,.m-inline{display:none!important}
.desk-flex{display:flex}
[hidden]{display:none!important}

/* ---------- Promo bar ---------- */
.promo-bar{background:var(--lime);color:#000;text-align:center;font-weight:700;font-size:14px;padding:7px 16px}

/* ---------- Topbar ---------- */
.topbar{background:#0d0d0d;border-bottom:1px solid #1c1c1c;font-size:14px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:36px}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:14px}
.topbar-right{gap:34px}
.topbar a,.topbar span{display:inline-flex;align-items:center;gap:8px;color:#e8e8e8}
.topbar b{font-weight:500}
.topbar a:hover{color:var(--lime)}
.topbar .sep{width:1px;height:16px;background:#555}
.topbar svg.lucide{width:17px;height:17px}
.wa-ico{width:20px;height:20px;border-radius:50%;background:#25d366;display:grid;place-items:center}
.wa-ico svg.lucide{width:12px!important;height:12px!important;color:#fff;stroke-width:2.4}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:60;background:rgba(10,10,10,.97);backdrop-filter:blur(8px);border-bottom:1px solid #1c1c1c}
.header .container{display:flex;align-items:center;height:66px;gap:56px}
.logo{display:inline-flex;flex-direction:column;align-items:flex-end;position:relative;padding-left:50px;line-height:1;flex-shrink:0;min-width:120px;min-height:44px;justify-content:center}
.logo::before,.logo::after{content:"";position:absolute;top:3px;width:11px;height:44px;background:linear-gradient(to top,var(--lime-2),var(--lime));transform:skewX(-33deg)}
.logo::before{left:12px}.logo::after{left:30px}
.logo.has-img{padding-left:0;min-width:0}
.logo.has-img::before,.logo.has-img::after{display:none}
.logo-img{height:48px;width:auto;max-width:220px;object-fit:contain}
.logo-word{font-family:var(--display);font-style:italic;font-weight:900;font-size:40px;letter-spacing:-1.5px;transform:skewX(-4deg)}
.logo-word sup{font-family:var(--font);font-style:normal;font-size:11px;font-weight:600;vertical-align:top;margin-left:1px;position:relative;top:4px}
.logo-sub{font-size:10px;letter-spacing:4px;font-weight:600;margin:2px 22px 0 0}
.nav{display:flex;gap:38px;font-size:17px;font-weight:500}
.nav a{position:relative;padding:20px 0;display:inline-flex;align-items:center;gap:5px;color:#ececec;transition:color .2s}
.nav a:hover{color:#fff}
.nav a svg.lucide{width:16px;height:16px}
.nav a.active{color:#fff;font-weight:700}
.nav a.active::after{content:"";position:absolute;left:-4px;right:-4px;bottom:13px;height:3px;background:var(--lime);border-radius:2px}
.dd{position:relative}
.dd-menu{position:absolute;top:100%;left:-16px;min-width:210px;background:#141414;border:1px solid var(--line-2);border-radius:8px;padding:8px;display:none;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block}
.dd-menu a{display:block;padding:8px 12px;border-radius:6px;font-size:15px}
.dd-menu a:hover{background:#222;color:var(--lime)}
.dd-menu a::after{display:none}
.search{flex:1;max-width:345px;margin-left:auto;position:relative}
.search input{width:100%;height:38px;border-radius:8px;border:1px solid var(--line-2);background:#111;padding:0 44px 0 16px;font-size:15px;outline:none;transition:border .2s}
.search input:focus{border-color:var(--lime)}
.search input::placeholder{color:#d5d5d5}
.search button{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:grid}
.header-icons{display:flex;gap:28px;align-items:center}
.icon-btn{position:relative;display:grid;place-items:center}
.icon-btn svg.lucide{width:28px;height:28px;stroke-width:1.6}
.icon-btn:hover{color:var(--lime)}
.badge-count{position:absolute;top:-9px;right:-9px;min-width:20px;height:20px;border-radius:10px;background:var(--lime);color:#000;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.mobile-search{display:none;padding:10px 16px;border-top:1px solid #1c1c1c}
.mobile-search.open{display:block}
.mobile-search .search{max-width:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 22px;border-radius:6px;font-weight:700;font-size:15.5px;transition:.2s;white-space:nowrap}
.btn svg.lucide{width:19px;height:19px;stroke-width:2.2}
.btn-sm{height:40px;font-size:15px;padding:0 18px}
.btn-lime{background:var(--lime);color:#0a0a0a}
.btn-lime:hover{background:var(--lime-glow);transform:translateY(-1px);box-shadow:0 8px 24px rgba(184,242,12,.25)}
.btn-outline{border:1.5px solid #fff;color:#fff}
.btn-outline:hover{background:#fff;color:#000}
.btn-outline-dark{border:1.5px solid #111;color:#111;background:#fff}
.btn-outline-dark:hover{background:#111;color:#fff}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(ellipse 55% 70% at 62% 45%,#262626 0%,transparent 70%),
  radial-gradient(ellipse 40% 60% at 15% 40%,#1a1a1a 0%,transparent 70%),#0a0a0a}
.hero-slide{display:none}
.hero-slide.on{display:block;animation:fade .6s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.hero .container{position:relative;display:grid;grid-template-columns:430px 1fr;min-height:450px;padding-bottom:64px}
.brush{position:absolute;background:linear-gradient(160deg,var(--lime-glow),var(--lime-2));transform:skewX(-32deg);z-index:1;
  clip-path:polygon(8% 0,100% 2%,92% 30%,100% 55%,88% 100%,0 98%,10% 70%,0 40%)}
.b1{left:-50px;top:40px;width:70px;height:300px;opacity:.9}
.b2{left:-80px;top:260px;width:60px;height:160px;opacity:.55}
.b3{left:46%;top:-30px;width:110px;height:150px;opacity:.95}
.b4{right:-40px;bottom:60px;width:120px;height:330px;opacity:.9}
.b5{right:30%;top:120px;width:40px;height:70px;opacity:.85}
.hero-copy{position:relative;z-index:3;padding-top:22px}
.eyebrow{letter-spacing:.62em;font-size:13px;font-weight:600;text-transform:uppercase}
.hero h1{font-family:var(--display);font-style:italic;font-weight:900;font-size:66px;line-height:.86;letter-spacing:-2px;text-transform:uppercase;margin:18px 0 18px;text-shadow:0 4px 20px rgba(0,0,0,.6)}
.hero h1 .line{display:block}
.hero h1 .line:nth-child(2){padding-left:10px}
.hero h1 em{color:var(--lime);font-style:inherit}
.hero p{max-width:340px;color:#e4e4e4;font-size:15.5px}
.hero .btns{display:flex;gap:14px;margin-top:20px}
.hero-visual{position:relative;z-index:2;min-height:400px}
.hero-fallback{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-right:18%}
.hero-fallback .j{width:30%;filter:drop-shadow(0 24px 30px rgba(0,0,0,.7));margin:0 -4%}
.hero-fallback .j.mid{width:38%;z-index:2;margin-bottom:-2%}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;z-index:2;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%);mask-image:linear-gradient(90deg,transparent,#000 14%)}
.city-tag{position:absolute;right:20px;bottom:95px;z-index:4;font-family:var(--script);font-size:56px;transform:rotate(-12deg);text-shadow:0 4px 18px rgba(0,0,0,.7)}
.city-tag::after{content:"";display:block;width:70%;height:6px;margin:-6px 0 0 30%;background:var(--lime);border-radius:4px;transform:skewX(-30deg)}
.hero-dots{display:none}

/* ---------- Features ---------- */
.features-wrap{position:relative;z-index:5;margin-top:-62px;background:linear-gradient(transparent 62px,var(--bg) 62px)}
.features{display:grid;grid-template-columns:repeat(5,1fr);background:rgba(20,20,20,.94);border:1px solid var(--line-2);border-radius:8px;padding:14px 0;backdrop-filter:blur(6px)}
.feature{display:flex;align-items:center;gap:14px;padding:4px 22px;border-left:1px solid #343434}
.feature:first-child{border-left:0}
.feature svg.lucide{width:40px;height:40px;stroke-width:1.4;flex-shrink:0}
.feature b{display:block;font-size:14.5px;font-weight:600;white-space:nowrap}
.feature span{font-size:13.5px;color:#dcdcdc}
.feature b span{font-size:inherit;color:inherit}
.desk-inline{display:inline}

/* ---------- Kicker / titles ---------- */
.kicker{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.kicker::before{content:"";width:28px;height:4px;background:var(--lime);border-radius:2px}
.section-title{font-family:var(--head);font-weight:800;font-size:29px;line-height:1.02;margin-top:12px}
.see-all{display:inline-flex;align-items:center;gap:6px;font-size:15px}
.see-all svg.lucide{width:18px;height:18px}

/* ---------- Cabang ---------- */
.branches{padding:26px 0 8px}
.branches .container{display:grid;grid-template-columns:222px 1fr;gap:28px;align-items:center}
.branches-head p{color:#dcdcdc;font-size:15px;margin:12px 0 16px}
.branch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.branch-grid .branch:nth-child(n+5){display:none}
.branch-grid.show-all .branch{display:block}
.branch{border:1.5px solid var(--line-2);border-radius:10px;overflow:hidden;background:#141414;transition:.2s}
.branch:hover,.branch.active{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 0 24px rgba(184,242,12,.12)}
.branch-media{position:relative;height:118px;overflow:hidden;background:#0d0d0d}
.branch-media img{width:100%;height:100%;object-fit:cover}
.branch-body{padding:10px 14px 14px}
.branch-body h3{display:flex;align-items:center;gap:8px;font-family:var(--head);font-size:16px;font-weight:700}
.branch-body h3 svg{width:19px;height:19px}
.branch-body p{display:flex;align-items:center;gap:8px;color:#dcdcdc;font-size:14px;padding-left:27px}
.branch-body p svg{width:16px;height:16px;margin-left:-25px}
.branch-btns{display:flex;gap:8px;margin-top:10px}
.bb{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;border-radius:7px;font-size:13.5px;font-weight:600;white-space:nowrap}
.bb svg.lucide{width:16px;height:16px}
.bb-out{border:1px solid #666}
.bb-out:hover{border-color:#fff}
.bb-lime{background:var(--lime);color:#000}
/* Fasad toko (dipakai kalau belum ada foto) */
.storefront{position:absolute;inset:0;background:linear-gradient(#141414,#060606);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:8%}
.sf-sign{display:flex;align-items:center;gap:6px;font-family:var(--display);font-style:italic;font-weight:900;font-size:30px;line-height:1;color:#fff;text-shadow:0 0 14px rgba(255,255,255,.4)}
.sf-dot{width:18px;height:18px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.sf-glass{margin-top:6%;width:84%;flex:1;border:2px solid var(--lime);border-bottom:0;box-shadow:0 0 18px rgba(184,242,12,.45),inset 0 0 22px rgba(184,242,12,.15);display:flex;align-items:flex-end;justify-content:center;gap:2%;padding:4% 4% 0;background:linear-gradient(#202020,#121212)}
.sf-glass svg{width:12%;height:auto}

/* ---------- Kategori (home) ---------- */
.cats{padding:26px 0 28px}
.cats .container{display:grid;grid-template-columns:222px 1fr;gap:28px;align-items:center}
.arrows{display:flex;gap:12px;margin-top:22px}
.arrow{width:40px;height:40px;border-radius:50%;background:#2a2a2a;display:grid;place-items:center;transition:.2s}
.arrow:hover{background:var(--lime);color:#000}
.cat-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 72px)/7);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.cat-track::-webkit-scrollbar{display:none}
.cat-tile{position:relative;color:#fff;height:120px;border-radius:8px;overflow:hidden;border:1.5px solid var(--line-2);background:linear-gradient(160deg,#2a2a2a,#121212);scroll-snap-align:start;transition:.2s}
.cat-tile:hover,.cat-tile.active{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 0 24px rgba(184,242,12,.15)}
.cat-media{position:absolute;inset:0;display:grid;place-items:center}
.cat-media svg{width:80%;height:auto;margin-top:-4px;transition:transform .3s}
.cat-tile:hover .cat-media svg{transform:scale(1.05)}
.cat-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 8%,transparent 70%);z-index:1}
.cat-label{position:absolute;left:12px;right:6px;bottom:14px;z-index:2;display:flex;align-items:center;gap:8px;font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:-.3px;line-height:1.05}
.cat-label svg,.cat-label svg.lucide{width:24px;height:24px;stroke-width:1.7;flex-shrink:0}

/* ---------- Katalog (home, terang) ---------- */
.catalog{background:var(--light);color:var(--ink);padding:24px 0 44px}
.catalog .container{display:grid;grid-template-columns:260px 1fr;gap:24px}
.catalog .section-title{font-size:37px;line-height:1.05}
.catalog .lead{color:#333;margin:14px 0 18px;font-size:16px;max-width:250px}
.catalog .kicker{margin-top:16px}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;justify-content:center}
.tab{height:30px;padding:0 20px;border-radius:15px;background:#fff;border:1px solid #dcdcdc;font-size:13.5px;color:#222;transition:.2s}
.tab:hover{border-color:#999}
.tab.active{background:var(--lime);border-color:var(--lime);font-weight:700}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}

/* ---------- Kartu produk ---------- */
.card{position:relative;border-radius:8px;overflow:hidden;background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.07);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.14)}
.card-media{position:relative;aspect-ratio:1.3/1;background:#fff;display:grid;place-items:center;overflow:hidden}
.card-media>svg{width:72%;height:auto;margin-top:8%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.18))}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.tag{position:absolute;top:8px;left:8px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:6px;z-index:3;line-height:1.2}
.tag-new{background:var(--lime);color:#000}
.tag-best,.tag-promo{background:var(--red);color:#fff}
.tag-custom{background:#111;color:#fff}
.soldout{position:absolute;inset:auto 0 0 0;background:rgba(0,0,0,.75);color:#fff;font-size:12px;font-weight:700;text-align:center;padding:4px;z-index:3}
.wish{position:absolute;top:8px;right:8px;z-index:3;color:#222;display:grid}
.wish svg.lucide{width:21px;height:21px;transition:.2s}
.wish.on svg.lucide{fill:var(--red);stroke:var(--red)}
.card-body{padding:8px 12px 12px;display:flex;flex-direction:column;flex:1}
.card-name{font-weight:600;font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.card-from{display:block;font-size:12px;color:#555}
.card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;margin-top:auto;padding-top:8px}
.card-foot>div{white-space:nowrap}
.price{font-weight:700;font-size:16.5px}
.price-old{display:block;font-size:12px;color:#8a8a8a;text-decoration:line-through}
.price.sale{color:var(--red)}
.disc{background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:1px 6px;border-radius:9px;margin-left:6px;vertical-align:2px}
.add{width:32px;height:30px;border-radius:5px;background:var(--lime);color:#000;display:grid;place-items:center;flex-shrink:0;transition:.2s}
.add:hover{background:var(--lime-glow);transform:scale(1.06)}
.add:disabled{background:#ccc;pointer-events:none}
.add svg.lucide{width:17px;height:17px;stroke-width:2.3}
.empty{grid-column:1/-1;text-align:center;padding:60px 0;color:#777}

/* ---------- Katalog page ---------- */
.kat-hero{position:relative;overflow:hidden;background:radial-gradient(ellipse 50% 90% at 70% 50%,#1f1f1f,transparent 70%),#0a0a0a}
.kat-hero .container{position:relative;z-index:2;display:grid;grid-template-columns:600px 1fr;min-height:260px}
.kb1{left:36%;top:-20px;width:60px;height:140px;opacity:.95}
.kb2{left:40%;top:-30px;width:26px;height:120px;opacity:.8}
.kb3{right:-30px;bottom:-30px;width:70px;height:220px;opacity:.9}
.kat-copy{padding:28px 0 24px;position:relative;z-index:3}
.kat-copy .kicker{letter-spacing:.45em;font-size:13px}
.kat-copy h1{font-family:var(--display);font-style:italic;font-weight:900;font-size:50px;line-height:.95;letter-spacing:-1.5px;text-transform:uppercase;margin:12px 0 14px}
.kat-copy h1 em{color:var(--lime);font-style:inherit}
.kat-copy p{max-width:440px;color:#e4e4e4;font-size:15.5px}
.kat-feats{gap:0;margin-top:20px}
.kat-feats>div{display:flex;align-items:center;gap:12px;padding:0 22px;border-left:1px solid #3a3a3a;font-size:13px;line-height:1.25;font-weight:600}
.kat-feats>div:first-child{padding-left:0;border-left:0}
.kat-feats svg.lucide{width:36px;height:36px;color:var(--lime);stroke-width:1.5}
.kat-visual{position:relative;margin:18px 0 0;border-radius:4px 4px 0 0;overflow:hidden}
.kat-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%);mask-image:linear-gradient(90deg,transparent,#000 12%)}
.kat-visual .storefront{right:24%;left:4%;padding-top:5%}
.kat-visual .sf-sign{font-size:46px}
.kat-visual .city-tag{bottom:40px;right:30px;font-size:52px}
.crumbs{background:#f4f4f4;color:#222;border-bottom:1px solid #e6e6e6}
.crumbs .container{display:flex;align-items:center;gap:12px;height:44px;font-size:14px}
.crumbs a{display:inline-flex;align-items:center;gap:8px;color:#444}
.crumbs svg.lucide{width:17px;height:17px}
.desk-block{display:block}
.kat-layout{background:#fff;color:var(--ink);display:grid;grid-template-columns:258px 1fr;gap:30px;max-width:var(--container);margin:0 auto;padding:12px 36px 50px;align-items:start}
body[data-page="shop"]{background:#fff}
body[data-page="shop"] .footer{background:#0d0d0d}
.filter{background:#fff;border:1px solid #e3e3e3;border-radius:10px;padding:16px 18px;box-shadow:0 2px 10px rgba(0,0,0,.05);position:sticky;top:82px}
.fgroup{padding:4px 0 16px;border-bottom:1px solid #e9e9e9;margin-bottom:14px}
.fgroup:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:4px}
.fgroup h4{font-family:var(--head);font-weight:700;font-size:16.5px;margin-bottom:10px}
.check{display:flex;align-items:center;gap:12px;font-size:14.5px;padding:3px 0;cursor:pointer;color:#222}
.check input{appearance:none;width:17px;height:17px;border:1.5px solid #bdbdbd;border-radius:3px;display:grid;place-items:center;flex-shrink:0;cursor:pointer;background:#fff}
.check input:checked{background:var(--lime);border-color:var(--lime)}
.check input:checked::after{content:"";width:4px;height:9px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.check .n{margin-left:auto;color:#666;font-size:14px}
.sizes{display:flex;gap:7px;flex-wrap:wrap}
.size{min-width:36px;height:30px;padding:0 8px;border:1px solid #cfcfcf;border-radius:6px;font-size:14px;background:#fff;transition:.2s}
.size.on,.size:hover{border-color:var(--lime);background:var(--lime);color:#000}
.range{position:relative;height:28px;margin:4px 8px 6px}
.range .track{position:absolute;left:0;right:0;top:12px;height:4px;border-radius:2px;background:#e0e0e0}
.range .fill{position:absolute;top:12px;height:4px;background:var(--lime);border-radius:2px}
.range input{position:absolute;left:-8px;width:calc(100% + 16px);top:4px;appearance:none;-webkit-appearance:none;background:none;pointer-events:none;height:20px}
.range input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--lime);cursor:pointer}
.range input::-moz-range-thumb{pointer-events:auto;width:13px;height:13px;border:3px solid var(--lime);border-radius:50%;background:#fff;cursor:pointer}
.range-vals{display:flex;align-items:center;gap:10px}
.range-vals input{width:100%;min-width:0;height:34px;border:1px solid #d6d6d6;border-radius:6px;text-align:center;font-size:14px;outline:none;background:#fff;color:#111}
.range-vals input:focus{border-color:var(--lime)}
.kat-main{min-width:0}
.kat-top{justify-content:space-between;align-items:flex-start;gap:12px;margin:8px 0 14px}
.kat-top h2{font-family:var(--head);font-weight:800;font-size:33px;line-height:1.1}
.kat-top .count{color:#444;font-size:15px;margin-top:2px}
.tools{display:flex;gap:10px;align-items:center}
.view-btn{width:46px;height:38px;border-radius:7px;border:1px solid #dcdcdc;display:grid;place-items:center;transition:.2s;background:#fff}
.view-btn.active{background:var(--lime);border-color:var(--lime);color:#000}
.select-wrap{position:relative}
.select{appearance:none;-webkit-appearance:none;height:38px;background:#fff;border:1px solid #dcdcdc;border-radius:7px;padding:0 44px 0 16px;font-size:15px;min-width:224px;cursor:pointer;outline:none;color:#111}
.select-wrap svg.lucide{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;width:18px;height:18px}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.pill{height:34px;padding:0 clamp(14px,1.3vw,26px);border-radius:17px;border:1px solid #dedede;background:#fff;font-size:14.5px;color:#222;transition:.2s;white-space:nowrap}
.pill:hover{border-color:#999}
.pill.active{background:var(--lime);border-color:var(--lime);font-weight:700}
.kat-grid{gap:14px}
.kat-grid .card{border:1px solid #ececec}
.kat-grid.list-view{grid-template-columns:repeat(2,1fr)}
.list-view .card{flex-direction:row}
.list-view .card-media{width:170px;flex-shrink:0}
.pagination{display:flex;justify-content:center;gap:10px;margin-top:28px;flex-wrap:wrap}
.pg{min-width:36px;height:36px;border-radius:7px;border:1px solid #dcdcdc;background:#fff;display:grid;place-items:center;font-weight:600;padding:0 8px;transition:.2s}
.pg:hover{border-color:#999}
.pg.active{background:var(--lime);color:#000;border-color:var(--lime)}
.pg:disabled{opacity:.4;pointer-events:none}
.pg svg.lucide{width:16px;height:16px}

/* ---------- Footer ---------- */
.footer{background:#0d0d0d;border-top:1px solid #1c1c1c;padding:44px 0 24px;color:#cfcfcf;font-size:14.5px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer h4{color:#fff;font-family:var(--head);font-size:15px;margin-bottom:12px}
.footer li{margin:7px 0}
.footer a:hover{color:var(--lime)}
.footer .logo{margin-bottom:14px}
.footer-bottom{margin-top:30px;padding-top:18px;border-top:1px solid #1c1c1c;font-size:13px;color:#888;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---------- Bottom nav / drawer / panel / modal / toast ---------- */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;color:#111;border-top:1px solid #e6e6e6;border-radius:18px 18px 0 0;display:none;grid-template-columns:repeat(5,1fr);padding:8px 8px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(0,0,0,.12)}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12.5px;height:52px;border-radius:14px}
.bottom-nav a svg.lucide{width:23px;height:23px}
.bottom-nav a.active{background:var(--lime);font-weight:700}
.bottom-nav a.active svg.lucide{fill:#111}
.drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80;opacity:0;pointer-events:none;transition:.25s}
.drawer-bg.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(82vw,320px);background:#111;z-index:90;transform:translateX(-100%);transition:.3s;padding:20px;display:flex;flex-direction:column;gap:6px}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.drawer a.dlink{padding:12px 4px;border-bottom:1px solid #222;font-size:17px;font-weight:500}
.drawer a.dlink.active{color:var(--lime)}
.side-panel{position:fixed;top:0;right:0;bottom:0;width:min(94vw,420px);background:#fff;color:#111;z-index:90;transform:translateX(100%);transition:.3s;display:flex;flex-direction:column}
.side-panel.open{transform:none}
.sp-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid #eee}
.sp-head h3{display:flex;align-items:center;gap:10px;font-family:var(--head);font-size:18px}
.sp-head .icon-btn svg.lucide{width:24px;height:24px}
.sp-body{flex:1;overflow-y:auto;padding:14px 18px 24px}
.sp-empty{text-align:center;padding:60px 10px;display:grid;justify-items:center;gap:14px;color:#444}
.sp-empty>svg.lucide{width:48px;height:48px;color:#999}
.cart-line{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #eee}
.cl-media{position:relative;width:72px;height:72px;border-radius:8px;background:#f2f2f2;display:grid;place-items:center;flex-shrink:0;overflow:hidden}
.cl-media svg{width:84%}
.cl-media img{width:100%;height:100%;object-fit:cover}
.cl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.cl-info b{font-weight:600;line-height:1.2}
.cl-ctrl{display:flex;gap:8px;align-items:center;margin-top:4px}
.cl-size{height:30px;border:1px solid #ddd;border-radius:6px;padding:0 6px;background:#fff}
.qty{display:flex;align-items:center;border:1px solid #ddd;border-radius:6px;height:30px}
.qty button{width:28px;height:28px;display:grid;place-items:center}
.qty button svg.lucide{width:14px;height:14px}
.qty span{min-width:22px;text-align:center;font-weight:600}
.cl-del{margin-left:auto;color:#999}
.cl-del:hover{color:var(--red)}
.cl-del svg.lucide{width:18px;height:18px}
.voucher{display:flex;gap:8px;margin-top:14px}
.voucher input,.checkout input,.checkout select,.checkout textarea,.track-form input{flex:1;min-width:0;height:42px;border:1px solid #ddd;border-radius:7px;padding:0 12px;outline:none;background:#fff;color:#111;width:100%}
.checkout textarea{height:auto;padding:10px 12px;resize:vertical}
.voucher input:focus,.checkout input:focus,.checkout textarea:focus,.track-form input:focus{border-color:var(--lime-2)}
.voucher .btn{height:42px}
.v-note{font-size:13px;color:var(--red);margin-top:6px}
.totals{margin:14px 0;padding:12px 0;border-top:1px solid #eee;border-bottom:1px solid #eee;display:grid;gap:6px;font-size:15px}
.totals div{display:flex;justify-content:space-between}
.totals .green{color:#2f9e44}
.totals .grand{font-size:18px;font-weight:700}
.checkout{display:grid;gap:10px}
.checkout .btn{height:48px;margin-top:4px}
.modal{position:fixed;inset:0;z-index:95;display:none;place-items:center;padding:16px;pointer-events:none}
.modal.open{display:grid}
.modal-box{pointer-events:auto;width:min(100%,460px);max-height:86vh;overflow:auto;background:#fff;color:#111;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.track-form{display:flex;gap:8px;padding:16px 18px 6px}
#trackResult{padding:8px 18px 18px}
.track-h{font-family:var(--head);font-size:15px;margin:6px 0 4px}
.track-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #eee;font-size:14px}
.track-row>div{display:flex;flex-direction:column;gap:2px}
.track-row>div:last-child{align-items:flex-end}
.track-row small{color:#777}
.muted-s{color:#666;font-size:14px;padding:6px 0}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:12px}
.st-proc{background:#fff1c7;color:#9a6a00}.st-pack{background:#dceaff;color:#1f5fd1}.st-ship{background:#ece2ff;color:#6b3fd1}.st-done{background:#dcf7d6;color:#2b8a1f}.st-cancel{background:#ffe1e1;color:#c4161c}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--lime);color:#000;font-weight:700;padding:12px 20px;border-radius:8px;z-index:100;opacity:0;transition:.3s;pointer-events:none;display:flex;gap:8px;align-items:center;max-width:92vw}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1500px){
  .grid{grid-template-columns:repeat(5,1fr)}
  .home-grid .card:nth-child(6){display:none}
}
@media (max-width:1360px){
  .header .container{gap:30px}
  .nav{gap:24px;font-size:16px}
  .grid,.kat-grid{grid-template-columns:repeat(4,1fr)}
  .home-grid .card:nth-child(n+5){display:none}
  .cat-track{grid-auto-columns:170px}
  .feature b{white-space:normal}
  .kat-hero .container{grid-template-columns:520px 1fr}
  .disc{display:none}
}
@media (max-width:1100px){
  .nav,.search.desk,.topbar-left .sep,.topbar-left>span:last-child{display:none}
  .mobile-only{display:inline-flex!important}
  .mobile-flex{display:flex!important}
  .header .container{gap:20px}
  .header-icons{margin-left:auto}
  .hero h1{font-size:54px}
  .hero .container{grid-template-columns:380px 1fr}
  .features{grid-template-columns:repeat(3,1fr);row-gap:14px}
  .feature:nth-child(4){border-left:0}
  .branches .container,.cats .container,.catalog .container{grid-template-columns:1fr}
  .branch-grid{grid-template-columns:repeat(2,1fr)}
  .catalog .lead{max-width:none}
  .tabs{justify-content:flex-start}
  .kat-hero .container{grid-template-columns:1fr}
  .kat-visual{display:none}
  .kat-layout{grid-template-columns:1fr;padding:14px 20px 50px}
  .filter{position:fixed;top:0;bottom:0;left:0;width:min(88vw,330px);z-index:90;border-radius:0;transform:translateX(-100%);transition:.3s;overflow-y:auto}
  .filter.open{transform:none}
  .filter-head{justify-content:space-between;align-items:center;margin-bottom:12px}
  .filter-head h3{font-family:var(--head);font-size:19px}
  .filter-head .icon-btn svg.lucide{width:24px;height:24px}
  .filter-actions{gap:10px;margin-top:16px}
  .filter-actions .btn{flex:1;height:42px}
  .kat-top-m{justify-content:space-between;align-items:center;margin-bottom:12px}
  .kat-top-m.m-flex{display:flex!important}
  .kat-top.desk-flex{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  body{padding-bottom:84px}
  .container{padding:0 16px}
  .topbar,.desk-only,.desk-flex,.desk-block,.desk-inline{display:none!important}
  .m-flex{display:flex!important}.m-block{display:block!important}.m-inline{display:inline!important}
  .header{background:#0a0a0a}
  .header .container{height:64px;gap:14px}
  .header .logo{position:absolute;left:50%;transform:translateX(-50%)}
  .header-icons{gap:20px}
  .icon-btn svg.lucide{width:27px;height:27px}
  .logo{padding-left:40px}
  .logo::before,.logo::after{width:9px;height:36px}
  .logo::before{left:8px}.logo::after{left:22px}
  .logo-word{font-size:33px}
  .logo-sub{font-size:8.5px;letter-spacing:3px;margin-right:18px}
  .logo-img{height:40px;max-width:160px}

  /* hero */
  .hero .container{display:block;min-height:420px;padding-bottom:40px}
  .hero-copy{padding-top:26px;position:relative;z-index:4}
  .eyebrow{font-size:11px;letter-spacing:.55em}
  .hero h1{font-size:44px;margin:14px 0 14px;letter-spacing:-1px}
  .hero h1 .line:nth-child(2){padding-left:0}
  .hero p{max-width:210px;font-size:15px;text-shadow:0 2px 10px #000}
  .hero .btns{gap:10px;margin-top:22px}
  .hero .btn{height:44px;font-size:15px;padding:0 14px}
  .hero .btn-outline{background:rgba(0,0,0,.35)}
  .hero-visual{position:absolute;right:-6px;top:0;bottom:30px;width:62%;min-height:0}
  .hero-fallback{padding-right:0}
  .hero-fallback .j{width:36%}.hero-fallback .j.mid{width:46%}
  .hero-img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
  .city-tag{right:6px;top:120px;bottom:auto;font-size:34px}
  .city-tag::after{height:4px}
  .hero-dots{display:flex;gap:8px;justify-content:center;position:absolute;left:0;right:0;bottom:12px;z-index:4}
  .hero-dots button{width:10px;height:10px;border-radius:50%;background:#ddd;padding:0}
  .hero-dots button.on{background:var(--lime)}
  .b1{width:40px;height:160px;top:0;left:-20px}.b2{display:none}.b3{left:auto;right:12%;top:-10px;width:44px;height:90px}.b4{width:50px;height:150px;bottom:90px;right:-24px}.b5{display:none}

  /* features */
  .features-wrap{margin-top:0;padding-bottom:20px;background:var(--bg)}
  .features{grid-template-columns:repeat(4,1fr);padding:12px 0;border-radius:12px;background:#141414}
  .feature{flex-direction:column;gap:8px;text-align:center;padding:4px 6px}
  .feature.f5{display:none}
  .feature:nth-child(4){border-left:1px solid #343434}
  .feature svg.lucide{width:34px;height:34px}
  .feature b{font-weight:500;font-size:12.5px;line-height:1.25;white-space:normal}
  .feature span{font-size:12.5px;line-height:1.25;color:#eee;white-space:normal;display:block}
  .feature b span{display:inline}

  /* urutan seksi di mobile */
  .home-main{display:flex;flex-direction:column}
  .branches{order:5;padding:22px 0 26px;background:var(--light);color:var(--ink)}
  .branches .container{gap:14px}
  .branches .kicker,.branches-head p,.branches-head .btn{display:none}
  .branches .section-title,.cats .section-title,.catalog .section-title{font-size:22px;margin:0;padding-left:12px;border-left:5px solid var(--lime);line-height:1.1}
  .branch-grid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
  .branch-grid::-webkit-scrollbar{display:none}
  .branch-grid .branch:nth-child(n+5){display:block}
  .branch{scroll-snap-align:start;color:#fff}
  .cats{order:3;background:#fff;color:var(--ink);padding:20px 0 6px}
  .cats .container{display:block}
  .cats-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
  .cats .kicker,.arrows{display:none!important}
  .cat-track{grid-auto-columns:calc((100% - 24px)/3.4);gap:8px}
  .cat-tile{height:auto;aspect-ratio:1.08;border-radius:10px;border-color:#2a2a2a}
  .cat-tile.active{border:2.5px solid var(--lime)}
  .cat-label{left:6px;right:4px;bottom:8px;gap:5px;font-size:13px;font-family:var(--font);font-weight:700}
  .cat-label svg,.cat-label svg.lucide{width:18px;height:18px}
  .catalog{order:4;background:#fff;padding:16px 0 24px}
  .catalog .container{display:block}
  .catalog .kicker,.catalog .lead,.catalog .btn,.tabs{display:none!important}
  .catalog .head-m{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
  .grid.home-grid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 20px)/3);gap:10px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:2px 2px 8px}
  .grid.home-grid::-webkit-scrollbar{display:none}
  .home-grid .card:nth-child(n){display:flex}
  .home-grid .card{scroll-snap-align:start;border:1px solid #e8e8e8;border-radius:12px}
  .card-body{padding:6px 9px 10px}
  .card-name{font-size:13px;min-height:32px}
  .price{font-size:14px}
  .home-grid .add{width:30px;height:30px}
  .tag{font-size:10.5px;padding:2px 7px;border-radius:8px}

  /* katalog */
  .kat-hero .container{min-height:0}
  .kat-copy{padding:22px 0 26px;max-width:72%}
  .kat-copy h1{font-family:var(--head);font-style:normal;font-weight:800;text-transform:none;font-size:30px;letter-spacing:-.5px;margin:4px 0 8px}
  .kat-copy p{font-size:14px}
  .kb1{left:-14px;top:-10px;width:40px;height:70px}.kb2{left:22px;top:-20px;width:18px;height:60px}.kb3{width:44px;height:120px;right:-16px;bottom:-30px}
  .kat-layout{padding:14px 16px 30px}
  .kat-search{position:relative;margin:2px 0 14px}
  .kat-search svg.lucide{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#444}
  .kat-search input{width:100%;height:44px;border-radius:22px;border:1px solid #e0e0e0;background:#f4f4f4;padding:0 16px 0 44px;outline:none;color:#111;font-size:15px}
  .pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px;margin:0 -16px 14px;padding:0 16px}
  .pills::-webkit-scrollbar{display:none}
  .pill{height:36px;padding:0 18px;font-size:14.5px}
  #countM{font-size:17px;color:#333}
  .mini-btn{height:36px;border:1px solid #dcdcdc;border-radius:8px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;font-size:14.5px;background:#fff;color:#111}
  .mini-btn svg.lucide{width:17px;height:17px}
  .select-m{appearance:none;-webkit-appearance:none;padding-right:34px}
  .kat-grid,.kat-grid.list-view{grid-template-columns:repeat(2,1fr);gap:12px}
  .kat-grid .card{border-radius:12px}
  .list-view .card{flex-direction:column}
  .list-view .card-media{width:auto}

  .footer{padding-bottom:30px}
  .footer-grid{grid-template-columns:1fr;gap:20px}
  .bottom-nav{display:grid}
  .toast{bottom:96px}
}
@media (max-width:380px){
  .hero h1{font-size:38px}
  .hero .btn{font-size:14px;padding:0 10px}
  .cat-label{font-size:12px}
}
@media (min-width:769px){.m-only{display:none!important}}

/* =========================================================
   Akun, pembayaran, desainer
   ========================================================= */
body[data-page="akun"],body[data-page="design"]{background:#f4f4f4}
.st-wait{background:#ffe9d6;color:#b35400}
.status svg.lucide{width:15px;height:15px}
.user-dot{width:32px;height:32px;border-radius:50%;background:var(--lime);color:#000;font-weight:800;display:grid;place-items:center;font-size:15px}
.login-cta{margin-top:12px;padding:16px;border:1px dashed #ccc;border-radius:10px;text-align:center;display:grid;gap:10px;justify-items:center;color:#333}
.bank-box{width:100%;background:#f7fbe9;border:1px solid #dcef9f;border-radius:10px;padding:12px 14px;display:grid;gap:8px;text-align:left;color:#222;font-size:14px}
.bank-box>div{display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:baseline}
.bank-box>div span{font-family:var(--head);font-weight:800;font-size:17px;letter-spacing:.5px}
.bank-box>div small{grid-column:1/-1;color:#555}
.bank-box p{color:#444;font-size:13px}
.muted-s svg.lucide{width:16px;height:16px;vertical-align:-3px;margin-right:4px}

/* Akun */
.acc{color:var(--ink);min-height:60vh;padding:28px 0 50px}
.acc-auth{display:grid;place-items:center;padding:10px 16px}
.auth-card{width:min(100%,430px);background:#fff;border:1px solid #e6e6e6;border-radius:16px;padding:26px 24px;box-shadow:0 10px 30px rgba(0,0,0,.06);display:grid;gap:12px}
.auth-card h1{font-family:var(--head);font-weight:800;font-size:26px}
.auth-card>svg.lucide{width:40px;height:40px;color:#7db000}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#f1f1f1;border-radius:10px;padding:4px}
.auth-tabs button{height:38px;border-radius:8px;font-weight:700;color:#555}
.auth-tabs button.on{background:#fff;color:#111;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.auth-form{display:grid;gap:12px}
.auth-form label{display:grid;gap:5px;font-size:14px;font-weight:600}
.auth-form label small{font-weight:400;color:#777}
.auth-form input{height:44px;border:1px solid #dcdcdc;border-radius:8px;padding:0 12px;outline:none;background:#fff;color:#111;font-size:15px}
.auth-form input:focus{border-color:var(--lime-2)}
.auth-form .btn{height:46px}
.auth-form details{border:1px solid #eee;border-radius:8px;padding:10px 12px;display:grid;gap:10px}
.auth-form summary{cursor:pointer;font-weight:600;font-size:14px}
.auth-form details[open] label{margin-top:10px}
.or{display:flex;align-items:center;gap:10px;color:#888;font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:#e3e3e3}
.btn-google{width:100%;height:46px;border:1px solid #dcdcdc;background:#fff;color:#222}
.btn-google:hover{border-color:#999}
.auth-err{color:var(--red);font-size:14px;min-height:18px}
.acc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.acc-head h1{font-family:var(--head);font-weight:800;font-size:30px}
.acc-actions{display:flex;gap:10px;flex-wrap:wrap}
.acc-actions .btn{height:42px}
.acc-grid{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.acc-h{font-family:var(--head);font-weight:800;font-size:20px;margin-bottom:12px}
.acc-side{background:#fff;border:1px solid #e6e6e6;border-radius:14px;padding:18px}
#orderList{display:grid;gap:14px}
#orderList .sp-empty{background:#fff;border-radius:14px}
.ord{background:#fff;border:1px solid #e6e6e6;border-radius:14px;padding:14px 16px;display:grid;gap:12px}
.ord-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ord-top b{font-family:var(--head);font-size:16px;margin-right:10px}
.ord-top small{color:#777}
.ord-body{display:flex;gap:14px;align-items:flex-start}
.ord-jersey{width:90px;flex-shrink:0;background:#f2f2f2;border-radius:10px;padding:6px}
.ord-info{display:grid;gap:4px;font-size:14.5px}
.ord-info small{color:#666}
.ord-total b{font-size:17px}
.ord-total s{color:#999;font-size:13px}
.ord-pay{display:grid;gap:10px}
.ord-btns{display:flex;gap:10px;flex-wrap:wrap}
.ord-btns .btn{height:42px}
.ord-note{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.link-btn{color:#4a7a00;font-weight:700;cursor:pointer;text-decoration:underline}

/* Desainer */
.dz{color:var(--ink);padding:24px 0 50px}
.dz-lock{display:grid;place-items:center;padding:40px 16px}
.dz-head h1{font-family:var(--head);font-weight:800;font-size:32px;margin-top:8px}
.dz-head{margin-bottom:18px}
.dz-grid{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:24px;align-items:start}
.dz-stage{position:sticky;top:84px;background:radial-gradient(ellipse at 50% 40%,#2a2a2a,#0d0d0d 75%);border-radius:18px;padding:18px;display:grid;gap:14px;overflow:hidden}
.dz-views{display:flex;gap:8px;justify-content:center}
.dz-views button,.seg button{height:36px;padding:0 18px;border-radius:18px;border:1px solid #444;color:#ddd;font-weight:600}
.dz-views button.on{background:var(--lime);border-color:var(--lime);color:#000}
.dz-canvas{max-width:520px;width:100%;margin:0 auto}
.dz-canvas svg{width:100%;height:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.6))}
.dz-pair{display:flex;gap:10px;justify-content:center}
.dz-pair>div{width:84px;padding:6px;border-radius:10px;border:1.5px solid #333;cursor:pointer;background:#171717}
.dz-pair>div.on{border-color:var(--lime)}
.dz-pair svg{width:100%;height:auto}
.dz-panel{display:grid;gap:14px}
.dz-step{background:#fff;border:1px solid #e6e6e6;border-radius:14px;padding:16px;display:grid;gap:12px}
.dz-step h3{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:800;font-size:17px}
.dz-step h3 span{width:26px;height:26px;border-radius:50%;background:var(--lime);display:grid;place-items:center;font-size:13px}
.tpl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tpl-grid button{border:1.5px solid #e3e3e3;border-radius:10px;padding:6px 4px 4px;display:grid;gap:2px;font-size:11.5px;font-weight:600;background:#fafafa}
.tpl-grid button.on{border-color:#7db000;box-shadow:0 0 0 2px var(--lime)}
.tpl-grid svg{width:100%;height:auto}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border-color:#ddd;color:#333;height:32px;padding:0 14px;font-size:13.5px}
.seg button.on{background:#111;border-color:#111;color:#fff}
.colors{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.colors label{display:grid;gap:6px;font-size:13px;font-weight:600}
.colors input{width:100%;height:42px;border:1px solid #ddd;border-radius:8px;padding:3px;background:#fff;cursor:pointer}
.presets{display:flex;gap:8px;flex-wrap:wrap}
.presets button{width:34px;height:34px;border-radius:50%;outline:3px solid;outline-offset:-3px;border:2px solid #fff;box-shadow:0 0 0 1px #ddd}
.logo-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.logo-row .btn{height:40px;font-size:14.5px;padding:0 14px;cursor:pointer}
.sliders{display:grid;gap:8px}
.sliders label{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:10px;font-size:13.5px}
.sliders input{accent-color:#7db000}
.presets-pos{display:flex;gap:6px;flex-wrap:wrap}
.presets-pos button{height:30px;padding:0 12px;border:1px solid #ddd;border-radius:15px;font-size:13px}
.presets-pos button:hover{border-color:#999}
.fld-s{display:grid;gap:5px;font-size:13.5px;font-weight:600}
.fld-s input{height:40px;border:1px solid #ddd;border-radius:8px;padding:0 12px;outline:none;background:#fff;color:#111}
.roster-head,.roster-row{display:grid;grid-template-columns:1fr 64px 84px 36px;gap:8px;align-items:center}
.roster-head{font-size:12.5px;font-weight:700;color:#555}
#roster{display:grid;gap:6px}
.roster-row input,.roster-row select{height:38px;border:1px solid #ddd;border-radius:7px;padding:0 10px;outline:none;background:#fff;color:#111;min-width:0;width:100%}
.roster-row.on input{border-color:#9bcf00}
.roster-row .ib{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:#888}
.roster-row .ib:hover{color:var(--red);background:#ffeded}
.roster-row .ib svg.lucide{width:17px;height:17px}
.dz-step .btn-sm{justify-self:start}
.dz-order .totals{margin:0}

@media (max-width:1100px){
  .acc-grid,.dz-grid{grid-template-columns:1fr}
  .dz-stage{position:relative;top:0}
  .dz-canvas{max-width:340px}
}
@media (max-width:768px){
  .acc{padding:18px 0 30px}
  .acc-head h1,.dz-head h1{font-size:24px}
  .dz{padding:16px 0 30px}
  .dz-head .kicker{display:flex}
  .tpl-grid{grid-template-columns:repeat(5,1fr);gap:5px}
  .tpl-grid button{font-size:10px}
  .colors{grid-template-columns:repeat(2,1fr)}
  .sliders label{grid-template-columns:1fr}
}