/* Khancheto — neon gaming theme (loads after shop.css)
   deep violet night · glass panels · violet → cyan gradient · pill shapes · soft glow */
:root{
  --bg:#0B0716;
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.075); --glass-3:rgba(255,255,255,.11);
  --line:rgba(167,139,250,.16); --line-2:rgba(167,139,250,.32);
  --ink:#F5F3FF; --ink-2:#A9A3CC; --ink-3:#6F6994;
  --acc:#A78BFA; --acc-2:#22D3EE; --on-acc:#FFFFFF;
  --ag:rgba(167,139,250,.12); --ab:rgba(167,139,250,.38);
  --grad:linear-gradient(100deg,#7C3AED 0%,#6366F1 45%,#06B6D4 100%);
  --grad-t:linear-gradient(100deg,#C4B5FD 0%,#818CF8 45%,#22D3EE 100%);
  --r:16px; --r-sm:12px; --r-lg:22px;
  --glow:0 18px 50px -18px rgba(124,58,237,.65);
}
body::before{background:radial-gradient(48vw 40vh at 82% 6%,rgba(124,58,237,.30),transparent 70%),radial-gradient(40vw 36vh at 6% 30%,rgba(6,182,212,.14),transparent 70%),radial-gradient(50vw 40vh at 50% 110%,rgba(124,58,237,.12),transparent 70%);filter:none}
::selection{background:rgba(124,58,237,.45);color:#fff}
:focus-visible{outline-color:var(--acc-2)}

/* header */
.top{background:rgba(11,7,22,.66);border-bottom:1px solid var(--line)}
.top .wrap{height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em}
.logo b{font-weight:800;background:var(--grad-t);-webkit-background-clip:text;background-clip:text;color:transparent}
.kmark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--grad);box-shadow:0 8px 22px -8px rgba(124,58,237,.8),inset 0 1px 0 rgba(255,255,255,.25);flex-shrink:0}
.kmark svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;color:#fff}
.tnav a{border-radius:999px;padding:6px 12px}
.tnav a:hover{background:var(--glass-2);color:var(--ink)}
.acct-btn,.cart-btn,.cur-btn,.langsw>summary{border-radius:999px!important;border-color:var(--line)!important;background:var(--glass)!important}
.cart-btn b{background:var(--grad)!important;color:#fff!important;border-radius:999px}

/* buttons */
.btn{border-radius:999px;background:var(--grad);color:#fff;border:0;font-weight:700;letter-spacing:.01em;box-shadow:var(--glow)}
.btn:hover{background:var(--grad);filter:brightness(1.12);box-shadow:0 20px 50px -14px rgba(6,182,212,.55)}
.btn.ghost,.btn.tg{background:var(--glass);color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
.btn.ghost:hover,.btn.tg:hover{background:var(--glass-2);border-color:var(--acc);filter:none;box-shadow:none}
.in,input.in,select.in,textarea.in{border-radius:var(--r-sm);border-color:var(--line);background:rgba(255,255,255,.04)}
.in:focus{border-color:var(--acc);box-shadow:0 0 0 4px rgba(167,139,250,.16)}

/* hero */
.nhero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:64px 0 34px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:999px;background:var(--ag);border:1px solid var(--ab);color:#DDD6FE;font-size:13px;font-weight:600;letter-spacing:.02em}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--acc-2);box-shadow:0 0 12px var(--acc-2)}
.nh-h{font-size:clamp(40px,5.8vw,68px);line-height:1.02;font-weight:800;letter-spacing:-.045em;margin:20px 0 16px}
.nh-h em{font-style:normal;background:var(--grad-t);-webkit-background-clip:text;background-clip:text;color:transparent}
.nh-sub{color:var(--ink-2);font-size:17px;max-width:560px}
.nh-search{display:flex;align-items:center;gap:10px;max-width:580px;height:62px;margin-top:28px;padding:0 8px 0 20px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);box-shadow:0 0 0 6px rgba(124,58,237,.08),var(--glow);transition:border-color var(--t),box-shadow var(--t)}
.nh-search:focus-within{border-color:var(--acc);box-shadow:0 0 0 6px rgba(124,58,237,.18),var(--glow)}
.nh-search .ic{width:20px;height:20px;color:var(--ink-2);flex-shrink:0}
.nh-search input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--ink);font:500 16px var(--font);outline:none}
.nh-search input::placeholder{color:var(--ink-3)}
.nh-search .btn{height:46px;padding:0 22px;white-space:nowrap}
.nh-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;color:var(--ink-2);font-size:14px}
.nh-trust span,.nh-trust a{display:inline-flex;align-items:center;gap:7px}
.nh-trust a:hover{color:var(--ink)}
.nh-trust .ic{width:16px;height:16px;color:var(--acc)}
.nh-stack{position:relative;height:440px}
.fc{position:absolute;width:250px;border-radius:22px;overflow:hidden;background:rgba(20,13,38,.86);border:1px solid var(--line-2);box-shadow:0 30px 70px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:float 7s ease-in-out infinite}
.fc-art{aspect-ratio:4/3;display:grid;place-items:center;background:radial-gradient(70% 70% at 50% 45%,rgba(124,58,237,.35),transparent 70%),#120B24}
.fc-art img{width:100%;height:100%;object-fit:cover}
.fc-art .ic{width:54px;height:54px;color:var(--acc)}
.fc-b{padding:12px 16px 14px}.fc-b b{display:block;font-size:15px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-b span{font-size:13px;color:var(--ink-2)}.fc-b em{font-style:normal;color:var(--ink);font-weight:700}
.fc1{right:150px;top:20px;transform:rotate(-7deg);z-index:2}
.fc2{right:0;top:110px;transform:rotate(6deg);z-index:3;animation-delay:-2.3s}
.fc3{right:210px;top:230px;transform:rotate(3deg);z-index:1;animation-delay:-4.6s;opacity:.92}
.orb{position:absolute;border-radius:50%;filter:blur(40px);z-index:0}
.o1{width:220px;height:220px;right:90px;top:80px;background:rgba(124,58,237,.45)}.o2{width:160px;height:160px;right:10px;top:260px;background:rgba(6,182,212,.30)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@media (prefers-reduced-motion:reduce){.fc{animation:none}}

/* chips + sections */
.rackbar{margin-top:8px}
.chip{border-radius:999px;height:38px;padding:0 15px;background:var(--glass);border-color:var(--line)}
.chip:hover{border-color:var(--line-2)}
.chip.on{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 10px 26px -12px rgba(124,58,237,.8)}
.cat-h h2{font-size:22px;letter-spacing:-.02em}
.cat-h h2 .ic{color:var(--acc)}
.seeall{color:var(--ink-2)}.seeall:hover{color:var(--acc-2)}

/* product cards */
.pcard{border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid var(--line);transition:transform var(--t),border-color var(--t),box-shadow var(--t)}
.pcard:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 26px 60px -28px rgba(124,58,237,.75)}
.pcard::after{background:radial-gradient(60% 50% at 50% 0%,rgba(124,58,237,.18),transparent 70%)}
.pimg{background:radial-gradient(70% 70% at 50% 45%,rgba(124,58,237,.26),transparent 72%),#120B24;border-bottom:1px solid var(--line)}
.pbody h3{font-size:16px}
.price{font-weight:800}
.badge-tag{border-radius:999px!important}
.b-sale,.b-bestseller,.b-hot{background:var(--grad)!important;color:#fff!important;border:0!important}
.gtag{border-radius:999px!important;background:rgba(11,7,22,.72)!important;border:1px solid var(--line-2)!important;color:#DDD6FE!important}
.rowtags span{border-radius:999px}

/* steps, faq, panels */
.how .step,.steps>div,.box,.panel,.sumbox,.paybox{border-radius:var(--r-lg)!important;border-color:var(--line)!important}
details{border-color:var(--line)!important}
details[open]>summary{color:#DDD6FE}

/* footer */
.foot{border-top:0;position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--grad);opacity:.6}

/* announcement bar */
.annbar{background:linear-gradient(90deg,rgba(124,58,237,.28),rgba(6,182,212,.18))!important;border-bottom:1px solid var(--line)!important}

@media (max-width:900px){
  .nhero{grid-template-columns:1fr;padding:40px 0 18px}
  .nh-stack{height:300px;margin-top:6px}
  .fc{width:190px}.fc1{left:4%;right:auto;top:16px}.fc2{right:4%;top:60px}.fc3{display:none}
  .o1{right:30%;top:40px}.o2{right:4%;top:150px}
}
@media (max-width:520px){
  .nh-search{height:56px;padding-left:16px}.nh-search .btn{padding:0 16px}
  .nh-h{font-size:40px}
  .fc{width:160px}.nh-stack{height:250px}
}
