/* DZTFIX Store — standalone storefront (black + orange, matches homepage v2) */
:root{--bg:#0d0b09;--bg2:#15110d;--card:#1b1611;--line:rgba(255,154,46,.14);--line2:rgba(255,154,46,.28);--orange:#ff7a00;--amber:#ff9a2e;--gold:#ffad1f;--text:#f6efe8;--muted:#b9a593;--radius:16px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Cairo',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;line-height:1.7}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
.st-shell{width:min(1240px,100% - 32px);margin-inline:auto}
.st-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* top bar */
.st-top{position:sticky;top:0;z-index:50;background:rgba(13,11,9,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.st-top-inner{display:flex;align-items:center;gap:24px;height:70px}
.st-logo img{width:150px;height:auto}
.st-nav{display:flex;gap:6px;margin-inline-start:auto}
.st-nav a{padding:8px 14px;border-radius:10px;color:var(--muted);font-weight:700;font-size:14px;transition:.2s}
.st-nav a:hover{color:var(--text);background:rgba(255,154,46,.06)}
.st-nav a.is-active{color:var(--gold);background:rgba(255,154,46,.1)}
.st-actions{display:flex;align-items:center;gap:8px}
.st-coins,.st-account,.st-wish-btn,.st-burger{display:flex;align-items:center;gap:7px;height:40px;padding:0 13px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);font-weight:700;font-size:13px;cursor:pointer;transition:.2s}
.st-coins span{color:var(--gold)}
.st-account img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.st-coins:hover,.st-account:hover,.st-wish-btn:hover{border-color:var(--line2)}
.st-wish-btn{color:#ff6b6b}
.st-wish-btn b{color:var(--text)}
.st-burger{display:none}

/* hero */
.st-hero{position:relative;overflow:hidden;padding:72px 0 56px;border-bottom:1px solid var(--line)}
.st-hero-art{position:absolute;inset:0;background:url('../images/anime-market-world-pro.webp') center/cover no-repeat;filter:hue-rotate(148deg) saturate(1.15) brightness(.55);opacity:.55}
.st-hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,var(--bg) 8%,rgba(13,11,9,.75) 48%,rgba(13,11,9,.35)),linear-gradient(0deg,var(--bg),transparent 40%)}
.st-hero-inner{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:end}
.st-kicker{display:inline-block;font:700 11px 'Space Grotesk',sans-serif;letter-spacing:2px;color:var(--amber);margin-bottom:12px}
.st-hero h1{font-size:clamp(40px,6vw,76px);line-height:1.08;font-weight:800;letter-spacing:-1px}
.st-hero h1 em{font-style:normal;color:transparent;background:linear-gradient(100deg,var(--gold),var(--amber) 60%,#ff621f);-webkit-background-clip:text;background-clip:text}
.st-hero p{max-width:540px;margin:18px 0 26px;color:var(--muted);font-size:16px}
.st-search{display:flex;align-items:center;gap:10px;max-width:540px;height:56px;padding:0 18px;border:1px solid var(--line2);border-radius:14px;background:rgba(13,11,9,.75)}
.st-search span{color:var(--amber);font-size:20px}
.st-search input{flex:1;border:0;background:none;outline:0;font-size:15px}
.st-search:focus-within{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,122,0,.12)}
.st-hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-hero-stats div{padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(21,17,13,.78)}
.st-hero-stats b{display:block;font:700 28px 'Space Grotesk',sans-serif;color:var(--gold)}
.st-hero-stats small{color:var(--muted);font-weight:600}

/* catalog */
.st-catalog{padding:36px 0 30px}
.st-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.st-tabs button{flex:none;padding:10px 18px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font-weight:700;cursor:pointer;transition:.2s}
.st-tabs button:hover{color:var(--text)}
.st-tabs button.is-active{color:var(--gold);border-bottom-color:var(--orange)}
.st-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px}
.st-chips{display:flex;flex-wrap:wrap;gap:8px}
.st-chips button{padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:transparent;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:.2s}
.st-chips button:hover{border-color:var(--line2);color:var(--text)}
.st-chips button.is-active{border-color:var(--orange);background:rgba(255,122,0,.12);color:var(--gold)}
.st-controls{display:flex;align-items:center;gap:8px}
.st-controls select{height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);font-size:13px;cursor:pointer}
.st-count{font:600 12px 'Space Grotesk',sans-serif;color:var(--amber);white-space:nowrap}

.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.st-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s;cursor:pointer}
.st-card:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(255,122,0,.08)}
.st-cover{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#221a12,#120e0a);overflow:hidden}
.st-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.st-card:hover .st-cover img{transform:scale(1.05)}
.st-cover.no-img:after{content:"DZTFIX";position:absolute;inset:0;display:grid;place-items:center;font:700 22px 'Space Grotesk';color:rgba(255,154,46,.25)}
.st-tag{display:inline-block;padding:3px 10px;border-radius:999px;background:rgba(13,11,9,.82);border:1px solid var(--line2);color:var(--gold);font-size:11px;font-weight:700}
.st-cover .st-tag{position:absolute;top:10px;inset-inline-start:10px}
.st-heart{position:absolute;top:10px;inset-inline-end:10px;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(13,11,9,.8);color:#fff;cursor:pointer;font-size:15px;transition:.2s}
.st-heart:hover{transform:scale(1.1)}
.st-heart.is-on{color:#ff5c5c;border-color:rgba(255,92,92,.5)}
.st-free{position:absolute;bottom:10px;inset-inline-start:10px;padding:2px 9px;border-radius:6px;background:#1fbf6a;color:#04140a;font-size:11px;font-weight:800}
.st-body{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px}
.st-pub{font-size:12px;color:var(--muted)}
.st-body h3{margin:4px 0 12px;font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.st-price b{font:700 17px 'Space Grotesk','Cairo',sans-serif;color:var(--gold)}
.st-price small{display:block;color:var(--muted);font-size:11px}
.st-view{font-size:13px;font-weight:700;color:var(--amber)}
.st-skel{aspect-ratio:4/4.2;border-radius:var(--radius);background:linear-gradient(90deg,#17120e 25%,#211912 50%,#17120e 75%);background-size:200% 100%;animation:stSkel 1.2s infinite}
@keyframes stSkel{to{background-position:-200% 0}}
.st-empty{grid-column:1/-1;padding:60px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line2);border-radius:var(--radius)}
.st-more{display:block;margin:28px auto 0;padding:12px 32px;border:1px solid var(--line2);border-radius:12px;background:transparent;font-weight:700;color:var(--gold);cursor:pointer}
.st-more:hover{background:rgba(255,122,0,.08)}

.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border:0;border-radius:12px;background:linear-gradient(100deg,var(--gold),var(--orange));color:#1a0d00;font-weight:800;cursor:pointer;transition:filter .2s,transform .2s;white-space:nowrap}
.st-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.st-ghost{height:46px;padding:0 18px;border:1px solid var(--line2);border-radius:12px;background:transparent;font-weight:700;cursor:pointer}
.st-ghost.is-on{color:#ff5c5c;border-color:rgba(255,92,92,.5)}

.st-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-block:30px 60px;padding:32px;border:1px solid var(--line2);border-radius:20px;background:radial-gradient(circle at 10% 50%,rgba(255,122,0,.16),transparent 60%),var(--bg2)}
.st-cta h2{font-size:26px}
.st-cta p{color:var(--muted);max-width:560px}

/* modal */
.st-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.st-modal[hidden]{display:none}
.st-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.st-modal-card{position:relative;display:grid;grid-template-columns:1.1fr 1fr;width:min(920px,100%);max-height:calc(100vh - 32px);overflow:auto;border:1px solid var(--line2);border-radius:20px;background:var(--bg2);animation:stPop .22s ease-out}
@keyframes stPop{from{opacity:0;transform:translateY(12px) scale(.98)}}
.st-modal-close{position:absolute;top:10px;inset-inline-end:10px;z-index:2;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:rgba(13,11,9,.85);font-size:22px;cursor:pointer}
.st-modal-cover{min-height:280px;background:#120e0a}
.st-modal-cover img{width:100%;height:100%;object-fit:cover}
.st-modal-body{display:flex;flex-direction:column;padding:26px}
.st-modal-body h3{margin:10px 0 6px;font-size:22px;line-height:1.4}
.st-modal-meta{color:var(--amber);font-size:13px;font-weight:600}
.st-modal-desc{margin:14px 0 20px;color:var(--muted);font-size:14px;white-space:pre-line}
.st-modal-foot{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.st-modal-actions{display:flex;gap:10px;flex-wrap:wrap}

.st-footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:13px}
.st-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.st-footer nav{display:flex;gap:18px}
.st-footer a:hover{color:var(--gold)}

@media(max-width:960px){
  .st-hero-inner{grid-template-columns:1fr}
  .st-hero-stats{grid-template-columns:repeat(4,1fr)}
  .st-nav{display:none;position:absolute;top:70px;inset-inline:0;flex-direction:column;padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--line)}
  .st-nav.is-open{display:flex}
  .st-burger{display:flex}
  .st-actions{margin-inline-start:auto}
  .st-modal-card{grid-template-columns:1fr}
  .st-modal-cover{min-height:200px;max-height:260px}
}
@media(max-width:600px){
  .st-top-inner{gap:10px}
  .st-logo img{width:110px}
  .st-account span,.st-coins{display:none}
  .st-hero{padding:44px 0 36px}
  .st-hero-stats{grid-template-columns:1fr 1fr}
  .st-controls{width:100%}
  .st-controls select{flex:1}
  .st-grid{grid-template-columns:1fr 1fr;gap:12px}
  .st-body{padding:10px 12px 12px}
  .st-body h3{font-size:13px}
  .st-view{display:none}
  .st-cta{flex-direction:column;align-items:flex-start;padding:22px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}