/* ================= TOP-GADGET — тема для OpenCart 3 (тёмний неон) ================= */
:root{
  --bg:#07071a; --bg-2:#0b0b24; --panel:#111233; --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07);
  --line:rgba(140,150,255,.14); --line-2:rgba(160,170,255,.26);
  --ink:#f2f3ff; --ink-dim:#b7bce6; --ink-mute:#9096c8;
  --neon:#b5f23c; --neon-2:#c9ff5c; --violet:#7c3aed; --blue:#3b82f6;
  --grad:linear-gradient(120deg,var(--violet),var(--blue) 55%,#22d3ee);
  --grad-neon:linear-gradient(120deg,var(--neon),#5be0a0);
  --radius:16px; --f-head:'Unbounded',system-ui,sans-serif; --f-body:'Onest','Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{background:
  radial-gradient(1100px 620px at 82% -8%, rgba(124,58,237,.28), transparent 60%),
  radial-gradient(900px 560px at 4% 8%, rgba(59,130,246,.18), transparent 58%),
  var(--bg) !important; color:var(--ink) !important; font-family:var(--f-body) !important; -webkit-font-smoothing:antialiased;}
a{color:var(--neon-2);}a:hover{color:var(--neon);}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;color:var(--ink);letter-spacing:-.01em}
.container{max-width:1300px}
p,li,td,span,label,div{color:inherit}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-n{background:var(--grad-neon);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- TOPBAR ---- */
.tg-topbar{background:rgba(7,7,20,.75);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-dim)}
.tg-topbar .container{display:flex;justify-content:space-between;align-items:center;height:38px;gap:16px;flex-wrap:wrap;overflow:hidden}
.tg-topbar b{color:var(--neon-2)}
.tg-topbar .star{color:var(--neon);font-weight:800;cursor:help;position:relative}
.tg-topbar .star:hover .pop{opacity:1;visibility:visible;transform:none}
.tg-topbar .pop{position:absolute;top:22px;left:-8px;z-index:200;width:320px;max-width:86vw;background:rgba(13,13,36,.98);border:1px solid var(--line-2);border-radius:14px;padding:15px;font-size:12.5px;color:var(--ink-dim);line-height:1.55;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.25s;box-shadow:0 26px 60px -20px rgba(0,0,0,.85);text-transform:none;font-weight:400}
.tg-topbar .pop b{color:var(--neon-2)}
.tg-topbar .r{display:flex;gap:18px}
@media(max-width:768px){.tg-topbar .r{display:none}}

/* ---- HEADER ---- */
header{background:rgba(9,9,26,.85) !important;backdrop-filter:blur(14px);border-bottom:1px solid var(--line) !important;position:sticky;top:0;z-index:100}
header .container{padding-top:14px;padding-bottom:14px}
#logo{margin:0}
#logo a{font-family:var(--f-body);font-weight:800;font-size:30px;letter-spacing:-.025em;color:var(--ink);display:inline-flex;align-items:center;gap:12px;text-decoration:none;line-height:1}
#logo a::before{content:"";width:52px;height:52px;border-radius:15px;background:var(--grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 26px -8px rgba(124,58,237,.8),0 0 22px -4px rgba(181,242,60,.25);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");background-clip:padding-box}
#logo a img{display:none}
#logo .wm i{font-style:normal;background:var(--grad-neon);-webkit-background-clip:text;background-clip:text;color:transparent}
/* молния-иконка внутри mark */
#logo a::before{position:relative}
.tg-mark{width:52px;height:52px;border-radius:15px;background:var(--grad);display:inline-grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 26px -8px rgba(124,58,237,.8),0 0 22px -4px rgba(181,242,60,.25)}
#logo a::before{display:none}

/* поиск */
#search{margin-bottom:0}
#search .form-control{background:var(--glass) !important;border:1px solid var(--line-2) !important;color:var(--ink) !important;height:46px;border-radius:12px 0 0 12px}
#search .form-control::placeholder{color:var(--ink-mute)}
#search .btn{background:var(--grad-neon) !important;border:none !important;color:#07071a !important;border-radius:0 12px 12px 0;height:46px}
#search .btn i{color:#07071a}

/* корзина */
#cart{margin-top:0}
#cart>.btn{background:var(--glass-2) !important;border:1px solid var(--line-2) !important;color:var(--ink) !important;border-radius:12px;height:46px;font-weight:600}
#cart .dropdown-menu{background:var(--panel);border:1px solid var(--line-2);color:var(--ink)}
#cart .dropdown-menu td,#cart .dropdown-menu a{color:var(--ink-dim)}

/* меню категорий */
.navbar{background:transparent !important;border:none !important;margin-bottom:0}
#menu{background:rgba(7,7,20,.4) !important;border:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;min-height:50px}
#menu .nav>li>a{color:var(--ink-dim) !important;font-weight:600;font-size:15px;padding:14px 16px;background:transparent !important}
#menu .nav>li>a:hover,#menu .nav>li.open>a{color:var(--neon-2) !important}
#menu .dropdown-menu{background:var(--panel) !important;border:1px solid var(--line-2)}
#menu .dropdown-inner a{color:var(--ink-dim) !important}
#menu .dropdown-inner a:hover{color:var(--neon-2) !important}
#menu .see-all{color:var(--neon-2) !important}
.dropdown-menu{background:var(--panel);border:1px solid var(--line-2)}
.dropdown-menu>li>a{color:var(--ink-dim)}
.dropdown-menu>li>a:hover{background:var(--glass-2);color:var(--neon-2)}

/* ---- BREADCRUMB / headings ---- */
.breadcrumb{background:transparent;border:1px solid var(--line);border-radius:12px;padding:12px 18px}
.breadcrumb>li a{color:var(--ink-mute)}
h1,h2{color:var(--ink)}

/* ---- КНОПКИ ---- */
.btn-primary,.btn-default.btn-primary{background:var(--grad-neon) !important;border:none !important;color:#07071a !important;font-weight:700;border-radius:12px;padding:11px 20px;box-shadow:0 8px 26px -8px rgba(181,242,60,.5)}
.btn-primary:hover{filter:brightness(1.05);box-shadow:0 10px 40px -6px rgba(181,242,60,.8)}
.btn-default{background:var(--glass-2) !important;border:1px solid var(--line-2) !important;color:var(--ink) !important;border-radius:12px}
.btn-default:hover{border-color:var(--neon);color:var(--neon-2) !important}
button,.btn{font-family:var(--f-body)}

/* ---- КАРТОЧКИ ТОВАРОВ ---- */
.product-thumb{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--glass);transition:.3s;margin-bottom:20px;position:relative}
.product-thumb:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 26px 55px -26px rgba(0,0,0,.75),0 0 40px -14px rgba(124,58,237,.5)}
.product-thumb::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-neon);opacity:0;transition:.3s;z-index:3}
.product-thumb:hover::before{opacity:1}
.product-thumb .image{background:radial-gradient(circle at 50% 40%,#fff,#e9ebf5);position:relative}
.product-thumb .image img{mix-blend-mode:normal;padding:12px;width:100%;object-fit:contain;transition:transform .5s}
.product-thumb:hover .image img{transform:scale(1.06)}
.product-thumb .caption{padding:14px 15px;min-height:0}
.product-thumb .caption h4{font-family:var(--f-body);font-size:14px;font-weight:600;line-height:1.35}
.product-thumb .caption h4 a{color:var(--ink)}
.product-thumb .caption h4 a:hover{color:var(--neon-2)}
.product-thumb .description{display:none}
.product-thumb .price{color:var(--ink);font-family:var(--f-head);font-weight:700;font-size:19px;font-variant-numeric:tabular-nums}
.product-thumb .price-new{color:var(--neon-2)}
.product-thumb .price-old{color:var(--ink-mute);text-decoration:line-through;font-size:13px}
.product-thumb .price-tax{display:none}
.product-thumb .button-group{border-top:1px solid var(--line);background:transparent}
.product-thumb .button-group button{background:var(--glass-2);color:var(--ink);border:none;font-weight:600;height:46px}
.product-thumb .button-group button:hover{background:var(--grad-neon);color:#07071a}
.product-thumb .button-group button.tg-buy{width:60%}

/* сетка/панели */
.panel{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius)}
.panel-heading,.panel-title{color:var(--ink)}
.panel-default>.panel-heading{background:var(--glass-2);border-color:var(--line);color:var(--ink)}
.well,.list-group-item{background:var(--glass);border-color:var(--line);color:var(--ink-dim)}
.list-group-item a{color:var(--ink-dim)}
.list-group-item.active,.list-group-item:hover{background:var(--glass-2)}
.nav-tabs{border-color:var(--line)}
.nav-tabs>li>a{color:var(--ink-dim)}
.nav-tabs>li.active>a{background:var(--panel);border-color:var(--line);color:var(--neon-2)}
.tab-content{background:var(--glass);border:1px solid var(--line);border-top:0;padding:20px;border-radius:0 0 12px 12px}
table.table{color:var(--ink-dim)}
table td,table th{border-color:var(--line) !important}
.form-control{background:var(--glass) !important;border:1px solid var(--line-2) !important;color:var(--ink) !important;border-radius:10px}
.input-group-btn .btn{border-radius:10px}
.alert{border-radius:12px}
.rating .fa-stack .fa-star.fa-stack-2x{color:var(--line-2)}
.rating .fa-star{color:var(--neon)}

/* товарная страница */
#product .price{color:var(--neon-2);font-family:var(--f-head);font-weight:700}
.thumbnails img{border:1px solid var(--line);border-radius:12px;background:#fff}

/* ---- ФУТЕР ---- */
footer{background:rgba(5,5,16,.85) !important;border-top:1px solid var(--line);color:var(--ink-mute);margin-top:40px}
footer h5{font-family:var(--f-head);color:var(--ink);font-size:15px;text-transform:none}
footer a{color:var(--ink-dim)}footer a:hover{color:var(--neon-2)}
footer .list-unstyled a{padding:5px 0;display:inline-block}
.tg-foot-bottom{border-top:1px solid var(--line);padding:18px 0;font-size:12.5px;color:var(--ink-mute);text-align:center}
.tg-foot-bottom a{color:var(--neon-2)}

/* ================= BENTO HERO (главная) ================= */
.tg-hero{padding:18px 0 30px;position:relative}
.tg-hero::before{content:"";position:absolute;inset:-30px 0 0;z-index:0;pointer-events:none;
  background:radial-gradient(38% 48% at 80% 14%,rgba(124,58,237,.30),transparent 62%),radial-gradient(34% 42% at 6% 94%,rgba(59,130,246,.20),transparent 62%)}
.tg-bento{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto minmax(140px,1fr);gap:15px;min-height:520px;
  grid-template-areas:"head head feat feat" "offer stat feat feat"}
.tg-tile{position:relative;border-radius:22px;overflow:hidden;border:1px solid transparent;
  background:linear-gradient(#101226,#0d0f20) padding-box,linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 44%) border-box;
  box-shadow:0 2px 8px rgba(0,0,0,.3),0 30px 60px -34px rgba(0,0,0,.7);transition:transform .4s,box-shadow .4s}
.tg-tile:hover{transform:translateY(-4px);box-shadow:0 42px 82px -30px rgba(0,0,0,.78),0 0 44px -14px rgba(124,58,237,.5)}
.tg-head{grid-area:head;display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,2vw,34px)}
.tg-head .kick{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--neon-2);font-weight:700;margin-bottom:12px;display:inline-flex;align-items:center;gap:9px}
.tg-head .kick::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon)}
.tg-head h1{font-size:clamp(24px,2.5vw,42px);line-height:1.0;margin:0 0 14px;font-weight:800}
.tg-head p{color:var(--ink-dim);font-size:15px;margin-bottom:20px;max-width:44ch}
.tg-head .cta{display:flex;gap:12px;flex-wrap:wrap}
.tg-head .cta a{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;font-weight:700;text-decoration:none}
.tg-head .cta .p{background:var(--grad-neon);color:#07071a;box-shadow:0 8px 26px -8px rgba(181,242,60,.5)}
.tg-head .cta .g{border:1px solid var(--line-2);color:var(--ink)}
.tg-feat{grid-area:feat;overflow:hidden}
.tg-feat .track{display:flex;height:100%;transition:transform .6s cubic-bezier(.66,0,.2,1)}
.tg-slide{flex:0 0 100%;height:100%;position:relative;min-height:340px}
.tg-stage{position:absolute;inset:7% 7% 24%;border-radius:24px;overflow:hidden;background:radial-gradient(84% 66% at 50% 16%,#fff,#eef0f7 60%,#e1e4f0);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 40px 84px -30px rgba(0,0,0,.66)}
.tg-stage::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 130px 40px rgba(193,198,214,.5)}
.tg-stage img{position:absolute;inset:0;margin:auto;max-width:82%;max-height:82%;object-fit:contain}
.tg-slide .tag{position:absolute;top:18px;left:18px;z-index:4;display:inline-flex;align-items:center;gap:8px;background:rgba(9,9,26,.7);border:1px solid var(--line-2);border-radius:30px;padding:8px 14px;font-size:12px;font-weight:600}
.tg-slide .tag b{color:var(--neon-2);font-family:var(--f-head);text-transform:uppercase;font-size:11px}
.tg-slide .info{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:22px;background:linear-gradient(0deg,rgba(7,7,20,.98) 22%,transparent)}
.tg-slide .info .nm{font-family:var(--f-head);font-weight:600;font-size:17px;color:#fff;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tg-slide .info .bot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tg-slide .info .price{font-family:var(--f-head);font-weight:700;font-size:26px;color:var(--neon-2);font-variant-numeric:tabular-nums}
.tg-slide .info .buy{background:var(--neon);color:#07071a;font-weight:700;padding:11px 18px;border-radius:12px;text-decoration:none}
.tg-dots{position:absolute;top:18px;right:18px;z-index:5;display:flex;gap:7px}
.tg-dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);border:none;cursor:pointer;padding:0;transition:.25s}
.tg-dots button.on{background:var(--neon);width:22px;border-radius:5px}
.tg-arrow{position:absolute;top:40%;z-index:5;width:44px;height:44px;border-radius:50%;background:rgba(9,9,26,.5);border:1px solid var(--line-2);color:#fff;cursor:pointer}
.tg-arrow.prev{left:14px}.tg-arrow.next{right:14px}
.tg-offer{grid-area:offer;padding:22px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(120% 120% at 0% 0%,rgba(181,242,60,.16),transparent 54%),linear-gradient(#12142a,#0d0f20)}
.tg-offer .ic{font-size:25px;margin-bottom:9px}
.tg-offer .t{font-family:var(--f-head);font-weight:600;font-size:15.5px;line-height:1.3}
.tg-offer .t span{color:var(--neon-2)}
.tg-offer .d{font-size:12.5px;color:var(--ink-dim);margin-top:8px;line-height:1.5}
.tg-stat{grid-area:stat;padding:22px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(120% 120% at 100% 100%,rgba(59,130,246,.18),transparent 58%),linear-gradient(#101226,#0d0f20)}
.tg-stat .num{font-family:var(--f-head);font-weight:700;font-size:clamp(30px,3.4vw,42px);line-height:1;font-variant-numeric:tabular-nums}
.tg-stat .lbl{font-size:12px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.tg-stat .row2{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--ink-dim)}

/* секции главной */
.tg-sec{padding:44px 0 10px}
.tg-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}
.tg-sec-head .kick{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--neon-2);font-weight:700}
.tg-sec-head h2{font-size:clamp(24px,3vw,38px);margin:8px 0 0}
.tg-sec-head a{font-size:14px;color:var(--ink-dim)}
.tg-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.tg-cat{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;aspect-ratio:16/12;display:block;text-decoration:none}
.tg-cat.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.tg-cat .ph{position:absolute;inset:0;background:radial-gradient(76% 62% at 50% 32%,#fff,#e7e9f4 72%,#d9ddeb)}
.tg-cat .ph img{width:100%;height:100%;object-fit:contain;padding:10% 13% 30%;transition:transform .6s}
.tg-cat:hover .ph img{transform:scale(1.07)}
.tg-cat::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,20,.96) 6%,rgba(6,6,20,.35) 42%,transparent);z-index:2}
.tg-cat .meta{position:absolute;left:0;bottom:0;z-index:3;padding:18px}
.tg-cat .cnt{font-size:11px;color:var(--neon-2);text-transform:uppercase;font-weight:700}
.tg-cat h3{font-size:17px;color:#fff;margin:5px 0 0}
.tg-cat.big h3{font-size:26px}

/* ticker */
.tg-ticker{background:rgba(255,255,255,.02);border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink-mute);overflow:hidden;white-space:nowrap;margin-top:26px}
.tg-ticker .track{display:inline-flex;padding:14px 0;animation:tgtk 52s linear infinite;font-family:var(--f-head);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.tg-ticker .track span::after{content:"✦";color:var(--neon);margin:0 30px;font-size:8px}
@keyframes tgtk{to{transform:translateX(-50%)}}

/* плавающие ассистенты */
.tg-assist{position:fixed;right:20px;bottom:20px;z-index:300;display:flex;flex-direction:column;gap:10px}
.tg-assist a{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;text-decoration:none;box-shadow:0 12px 30px -8px rgba(0,0,0,.6)}
.tg-assist .voice{background:var(--grad-neon);color:#07071a}
.tg-assist .chat{background:var(--panel);color:var(--neon-2);border:1px solid var(--line-2)}

@media(max-width:991px){
  .tg-bento{grid-template-columns:repeat(2,1fr);grid-template-rows:auto;min-height:0;grid-template-areas:"head head" "feat feat" "offer stat"}
  .tg-slide{min-height:320px}
  .tg-cats{grid-template-columns:repeat(2,1fr)}
  .tg-cat.big{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
}
@media(max-width:600px){
  .tg-bento{grid-template-columns:1fr;grid-template-areas:"head" "feat" "offer" "stat"}
  #logo a{font-size:23px}#logo a .tg-mark,.tg-mark{width:42px;height:42px}
}

/* ---- сайдбар категорий / фильтры (тёмный) ---- */
#column-left,#column-right{}
#column-left .list-group,#column-left .panel,#column-right .panel{background:var(--glass);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:16px}
#column-left .list-group-item,#column-right .list-group-item{background:transparent;border-color:var(--line);color:var(--ink-dim);padding:11px 15px}
#column-left .list-group-item:hover,#column-left .list-group-item.active{background:var(--glass-2);color:var(--neon-2)}
#column-left a,#column-right a{color:var(--ink-dim)}
.panel-heading{background:var(--glass-2) !important;color:var(--ink) !important;border-bottom:1px solid var(--line)}
/* сортировка / показ / компаре бар */
#product-category .row,#product-search .row{color:var(--ink-dim)}
.form-group label.control-label,.text-right,.pagination>li>a{color:var(--ink-dim)}
.pagination>li>a{background:var(--glass);border-color:var(--line)}
.pagination>li.active>span{background:var(--grad-neon) !important;border-color:transparent;color:#07071a !important}
.buttons,.btn-group>.btn{color:var(--ink)}
#grid-view,#list-view{background:var(--glass);border:1px solid var(--line-2);color:var(--ink-dim)}
#grid-view:hover,#list-view:hover{color:var(--neon-2)}
select.form-control option{background:#111233;color:var(--ink)}
h2,h3{color:var(--ink)}
.product-compare a{color:var(--neon-2)}
.tg-badges{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.tg-badges li{font-size:12.5px;color:var(--ink-dim);background:var(--glass);border:1px solid var(--line-2);border-radius:10px;padding:7px 12px;line-height:1}
.tg-badges li::before{content:"✔";color:var(--neon-2);font-weight:800;margin-right:6px}
@media(max-width:600px){
  .tg-topbar .container{height:auto;padding:7px 0;font-size:11px;overflow:visible}
  .tg-topbar .container>div:first-child{white-space:normal;line-height:1.35}
}