:root{--bg:#1a1a1a;--panel:#242424;--panel-2:#2c2c2c;--line:#333;--text:#e8e8e8;--muted:#8a8a8a;--accent:#f26a2e;--green:#25d366}*{box-sizing:border-box;margin:0}body{background:var(--bg);color:var(--text);font-family:Rajdhani,system-ui,sans-serif;font-size:15px}button,input,select{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0}ul{padding:0;list-style:none}.container{width:min(1200px,100% - 32px);margin-inline:auto}.muted{color:var(--muted)}.accent{color:var(--accent)}.header{border-bottom:1px solid var(--line);z-index:20;background:#111;position:sticky;top:0}.header-inner{align-items:center;gap:24px;height:64px;display:flex}.logo{color:var(--accent);letter-spacing:1px;align-items:center;gap:8px;font-size:24px;font-weight:700;text-decoration:none;display:flex}.search{background:var(--panel);border:1px solid var(--line);border-radius:4px;align-items:center;gap:8px;margin-left:auto;padding:6px 12px;display:flex}.search input{background:0 0;border:0;outline:0;width:200px}.cart-btn{align-items:center;gap:6px;font-weight:600;display:flex}.banner{background:linear-gradient(90deg,#111 0%,#2a1a12 60%,#111 100%);align-items:center;height:80px;display:flex}.banner-inner{justify-content:space-between;align-items:center;display:flex}.banner h1{font-size:28px}.crumbs{color:var(--muted);font-size:13px}.crumbs b{color:var(--text);font-weight:500}.layout{grid-template-columns:220px 1fr;align-items:start;gap:28px;padding:32px 0 56px;display:grid}.filters{background:var(--panel);border:1px solid var(--line);gap:8px;padding:16px;display:grid}.filters h3{border-bottom:1px solid var(--line);padding-bottom:10px;font-size:15px}.filters h4{margin-top:12px;font-size:14px}.cat-list button{color:var(--muted);padding:4px 0;font-size:14px}.cat-list button:hover,.cat-list button.active{color:var(--accent)}.check{color:var(--muted);cursor:pointer;align-items:center;gap:8px;font-size:14px;display:flex}.check input{accent-color:var(--accent)}.price-range{gap:8px;display:flex}.price-range input{background:var(--bg);border:1px solid var(--line);width:100%;min-width:0;padding:6px}.toolbar{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.toolbar select{background:var(--panel);border:1px solid var(--line);padding:8px 12px}.grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px;display:grid}.card{text-align:center;justify-items:center;gap:6px;display:grid}.card-image{aspect-ratio:1;background:var(--panel-2);width:100%;position:relative;overflow:hidden}.card-image img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.card-image:hover img{transform:scale(1.06)}.card h2{margin-top:6px;font-size:15px;font-weight:600}.badge{z-index:1;color:#111;background:#eee;padding:2px 8px;font-size:12px;font-weight:700;position:absolute;top:8px;left:0}.badge.out{color:#fff;background:#555}.stars{color:#f5a623;letter-spacing:2px;font-size:13px}.stars .off{color:#555}.price b{color:var(--accent)}.price s{color:var(--muted);margin-left:8px;font-size:13px}.empty{color:var(--muted);grid-column:1/-1;padding:24px 0}.btn{background:var(--accent);color:#fff;border-radius:3px;justify-content:center;align-items:center;gap:6px;margin-top:4px;padding:8px 16px;font-weight:600;display:inline-flex}.btn:hover:not(:disabled){filter:brightness(1.1)}.btn:disabled{color:#888;cursor:not-allowed;background:#444}.btn.ghost{border:1px solid var(--line);background:0 0;margin-top:12px}.btn.wa{background:var(--green);color:#052;width:100%;padding:12px;font-size:16px}.icon-btn{color:var(--muted);padding:6px}.icon-btn:hover{color:#fff}.overlay{z-index:50;background:#000000b3;place-items:center;padding:16px;animation:.2s ease-out fade;display:grid;position:fixed;inset:0}.modal{background:var(--panel);border:1px solid var(--line);grid-template-columns:1fr 1fr;width:min(760px,100%);animation:.3s cubic-bezier(.2,.9,.3,1.2) pop;display:grid;position:relative;overflow:hidden}.modal img{object-fit:cover;width:100%;height:100%;min-height:320px}.modal-body{align-content:start;gap:10px;padding:28px 24px;display:grid}.modal-body h2{font-size:24px}.modal .close{z-index:1;background:#00000080;border-radius:50%;position:absolute;top:8px;right:8px}.in-stock{color:var(--green)}.out-stock{color:#e5484d}.modal-actions{align-items:center;gap:12px;margin-top:8px;display:flex}.qty{border:1px solid var(--line);align-items:center;display:inline-flex}.qty button{width:30px;height:32px;font-size:18px}.qty span{text-align:center;min-width:28px}.qty.small button{width:24px;height:24px;font-size:15px}.qty.small{margin-top:4px}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:translateY(24px)scale(.9)}}.scrim{opacity:0;pointer-events:none;z-index:40;background:#0009;transition:opacity .25s;position:fixed;inset:0}.scrim.show{opacity:1;pointer-events:auto}.drawer{background:var(--panel);border-left:1px solid var(--line);z-index:41;flex-direction:column;width:min(380px,100%);transition:transform .3s;display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%)}.drawer.open{transform:none}.drawer-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:16px;display:flex}.drawer-items{flex:1;padding:8px 16px;overflow-y:auto}.cart-row{border-bottom:1px solid var(--line);grid-template-columns:64px 1fr auto;align-items:start;gap:12px;padding:12px 0;display:grid}.cart-row img{object-fit:cover;width:64px;height:64px}.cart-name{font-weight:600}.drawer-foot{border-top:1px solid var(--line);gap:12px;padding:16px;display:grid}.total{justify-content:space-between;font-size:18px;display:flex}.footer{border-top:1px solid var(--line);text-align:center;background:#111;gap:4px;padding:32px 0;display:grid}@media (width<=760px){.layout{grid-template-columns:1fr}.modal{grid-template-columns:1fr;max-height:92vh;overflow-y:auto}.modal img{min-height:200px;max-height:240px}.search input{width:110px}}
