/* ===========================================================================
   ZALLIXOR MART — base
   Light, dense marketplace surface carrying Zallixor's violet/cyan identity.
   =========================================================================== */

:root{
  /* brand */
  --zx-violet:#6D3BF5;
  --zx-violet-dark:#5327D6;
  --zx-violet-wash:#F1ECFE;
  --zx-cyan:#12BDD8;
  --zx-cyan-wash:#E4F8FB;

  /* marketplace signals */
  --zx-deal:#EA3B25;          /* price + discount */
  --zx-deal-wash:#FEEDEA;
  --zx-star:#F5A623;
  --zx-good:#12875A;
  --zx-good-wash:#E6F4EE;
  --zx-warn:#B4680B;
  --zx-warn-wash:#FDF2E0;

  /* neutrals */
  --zx-ink:#16151D;
  --zx-body:#3D3B4A;
  --zx-mute:#6E6B80;
  --zx-faint:#9B98AC;
  --zx-line:#E5E3ED;
  --zx-line-soft:#F0EFF5;
  --zx-bg:#F5F4F9;
  --zx-surface:#FFFFFF;

  /* shape */
  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --r-pill:999px;

  --shadow-1:0 1px 2px rgba(22,21,29,.06);
  --shadow-2:0 4px 16px rgba(22,21,29,.09);
  --shadow-3:0 12px 40px rgba(22,21,29,.16);

  --header-h:60px;
  --max:1440px;
}

*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,ul,ol,li,figure,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--zx-bg);
  color:var(--zx-ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;padding:0;cursor:pointer}

:focus-visible{outline:2px solid var(--zx-violet);outline-offset:2px;border-radius:3px}

h1{font-size:26px;line-height:1.2;letter-spacing:-.02em;font-weight:700}
h2{font-size:19px;line-height:1.25;letter-spacing:-.015em;font-weight:700}
h3{font-size:15px;line-height:1.3;font-weight:600}

.shell{max-width:var(--max);margin:0 auto;padding:0 14px}
@media(min-width:900px){ .shell{padding:0 24px} }

.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.push{margin-left:auto}
.hide{display:none !important}
.mute{color:var(--zx-mute)}
.faint{color:var(--zx-faint)}
.small{font-size:12.5px}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:var(--zx-violet);
  color:#fff;
}
.hdr-main{display:flex;align-items:center;gap:12px;height:var(--header-h)}

.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;letter-spacing:-.02em;flex:none}
.logo em{font-style:normal;font-weight:500;opacity:.72}
.logo img{display:block;border-radius:8px}

.hdr-search{flex:1;position:relative;min-width:0;display:none}
.hdr-search input{
  width:100%;height:38px;border:none;border-radius:var(--r-pill);
  padding:0 44px 0 16px;background:#fff;color:var(--zx-ink);font-size:14px;
}
.hdr-search input::placeholder{color:var(--zx-faint)}
.hdr-search button{
  position:absolute;right:4px;top:4px;width:32px;height:30px;
  border-radius:var(--r-pill);display:grid;place-items:center;color:var(--zx-violet);
}
@media(min-width:760px){ .hdr-search{display:block} }

.hdr-acts{display:flex;align-items:center;gap:4px;margin-left:auto;flex:none}
.hdr-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:5px 9px;border-radius:var(--r-md);color:#fff;
  font-size:10.5px;font-weight:500;position:relative;
}
.hdr-btn:hover{background:rgba(255,255,255,.14)}
.hdr-btn svg{width:20px;height:20px}
.hdr-btn span{display:none}
@media(min-width:600px){ .hdr-btn span{display:block} }

.badge-n{
  position:absolute;top:1px;right:3px;min-width:16px;height:16px;padding:0 4px;
  background:var(--zx-deal);color:#fff;border-radius:var(--r-pill);
  font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1;
}
.badge-n:empty,.badge-n[data-n="0"]{display:none}

/* mobile search sits under the bar */
.hdr-search-m{padding:0 14px 10px;display:block}
.hdr-search-m .hdr-search{display:block}
@media(min-width:760px){ .hdr-search-m{display:none} }

/* category strip */
.catbar{background:var(--zx-violet-dark);color:#fff}
.catbar-in{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.catbar-in::-webkit-scrollbar{display:none}
.catbar a{
  padding:9px 12px;font-size:13px;white-space:nowrap;opacity:.86;
  border-bottom:2px solid transparent;
}
.catbar a:hover{opacity:1}
.catbar a[aria-current="page"]{opacity:1;border-bottom-color:var(--zx-cyan);font-weight:600}

/* ---------- bottom nav (mobile) ---------- */
.botnav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--zx-surface);border-top:1px solid var(--zx-line);
  display:flex;padding-bottom:env(safe-area-inset-bottom);
}
.botnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 0 8px;font-size:10.5px;color:var(--zx-mute);position:relative;
}
.botnav a svg{width:21px;height:21px}
.botnav a[aria-current="page"]{color:var(--zx-violet);font-weight:600}
body.has-botnav{padding-bottom:66px}
@media(min-width:760px){
  .botnav{display:none}
  body.has-botnav{padding-bottom:0}
}

/* ---------- footer ---------- */
.ftr{background:#17161F;color:#B9B6C8;margin-top:48px;padding:36px 0 30px;font-size:13px}
.ftr-cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ftr h4{color:#fff;font-size:13px;font-weight:600;margin-bottom:10px}
.ftr a{display:block;padding:3px 0;color:#B9B6C8}
.ftr a:hover{color:#fff}
.ftr-base{
  border-top:1px solid #2A2836;margin-top:26px;padding-top:18px;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12.5px;color:#8D8AA0;
}

/* ---------- section headings ---------- */
.sec{margin-top:22px}
.sec-hd{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.sec-hd a{color:var(--zx-violet);font-size:13px;font-weight:600;margin-left:auto;flex:none}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}