@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Serhat Bilgisayar theme for OpenCart 3.0.5.1. Tokens mirror Figma "Serhat / Renkler". */
:root{
  --primary:#0066CC;--primary-dark:#0052A3;--primary-50:#E6F0FA;
  --navy:#0B1F3A;--navy-2:#132B4D;--navy-line:#24406A;
  --ink:#14202E;--muted:#5B6675;--line:#E3E8EF;--bg:#F3F5F8;--surface:#fff;
  --success:#15803D;--success-50:#DCFCE7;--deal:#E8590C;--on-dark:#AFC0D6;--wa:#25D366;
  --r-sm:8px;--r:12px;--r-lg:16px;
  --c:1280px;
  --shadow:0 10px 30px -12px rgba(11,31,58,.22);
  --f:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f);font-size:15px;line-height:1.5;color:var(--ink);background:var(--bg)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--c);margin:0 auto;padding:0 24px}
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- top bar ---------- */
.topbar{background:var(--navy);color:var(--on-dark);font-size:12px;font-weight:500}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:36px;gap:20px}
.topbar .l{display:flex;gap:8px;align-items:center}
.topbar nav{display:flex;gap:22px;align-items:center}
.topbar nav a:hover{color:#fff}
.topbar .tel{display:flex;gap:6px;align-items:center;color:#fff;font-weight:700;white-space:nowrap}
.topbar .short{display:none}
.topbar .ic{width:14px;height:14px}
.wa-pill{display:inline-flex;gap:6px;align-items:center;background:var(--wa);color:#fff;font-weight:700;border-radius:6px;padding:4px 10px}

/* ---------- header ---------- */
.header{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 var(--line)}
.header .row{display:flex;align-items:center;gap:36px;height:88px}
.logo img{height:44px;width:auto}
.search{flex:1;display:flex;height:50px;border:2px solid var(--primary);border-radius:10px;overflow:hidden;position:relative;background:#fff}
.search .ic{position:absolute;left:16px;top:13px;color:var(--muted)}
.search input{flex:1;border:0;outline:0;padding:0 16px 0 46px;font-size:15px}
.search input::placeholder{color:var(--muted)}
.search button{background:var(--primary);color:#fff;font-weight:700;padding:0 28px}
.search button:hover{background:var(--primary-dark)}
.acts{display:flex;gap:26px;align-items:center}
.act{display:flex;gap:10px;align-items:center}
.act .ic{width:26px;height:26px}
.act small{display:block;font-size:12px;color:var(--muted);font-weight:500;line-height:1.2}
.act b{font-size:14px;line-height:1.2}
.act:hover b{color:var(--primary)}
.cartw{position:relative}
.badge-n{position:absolute;right:-8px;top:-6px;background:var(--deal);color:#fff;font-size:11px;font-weight:800;border-radius:10px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px;transition:transform .15s}
.badge-n.pop{transform:scale(1.35)}
.burger,.m-only{display:none}

/* ---------- category nav ---------- */
.catnav{background:#fff;border-top:1px solid var(--line)}
.catnav .wrap{display:flex;align-items:center;gap:4px;height:54px;position:relative}
.allcats{display:flex;gap:10px;align-items:center;background:var(--primary);color:#fff;font-weight:700;font-size:14px;padding:10px 18px 10px 16px;border-radius:var(--r-sm);margin-right:10px}
.allcats:hover{background:var(--primary-dark)}
.catnav .item{font-size:14px;font-weight:600;padding:8px 11px;border-radius:6px}
.catnav .item:hover{background:var(--bg);color:var(--primary)}
.catnav .grow{flex:1}
.deals{display:flex;gap:8px;align-items:center;color:var(--deal);font-weight:800;font-size:14px}
.mega{position:absolute;left:24px;right:24px;top:54px;background:#fff;border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);box-shadow:var(--shadow);display:none;grid-template-columns:repeat(4,1fr);gap:28px;padding:28px 32px;z-index:60}
.mega.open{display:grid}
.mega h4{font-size:15px;margin-bottom:10px}
.mega a{display:flex;justify-content:space-between;font-size:14px;color:#33415a;padding:4px 0}
.mega a:hover{color:var(--primary)}
.mega a span{color:var(--muted);font-size:13px}

/* ---------- common blocks ---------- */
.sec{padding-top:48px}
.sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:16px}
.sec-head h2{font-size:24px;font-weight:800;letter-spacing:-.01em}
.more{display:flex;gap:4px;align-items:center;color:var(--primary);font-weight:700;font-size:14px}
.more .ic{width:16px;height:16px}
.arrows{display:flex;gap:8px}
.arrows button{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.arrows button:hover{border-color:var(--primary);color:var(--primary)}
.arrows .ic{width:18px;height:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;font-weight:700;font-size:14px;border-radius:var(--r-sm);padding:11px 18px;transition:background .15s}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}
.btn-wa{background:var(--wa);color:#fff}.btn-wa:hover{background:#1ebe5b}
.btn-line{border:1.5px solid var(--primary);color:var(--primary);background:#fff}.btn-line:hover{background:var(--primary-50)}
.btn .ic{width:18px;height:18px}
.tag{display:inline-block;font-size:11px;font-weight:800;border-radius:4px;padding:3px 8px}
.tag-deal{background:var(--deal);color:#fff}
.tag-ok{background:var(--success-50);color:var(--success)}

/* ---------- product card (Figma: Ürün Kartı) ---------- */
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s,border-color .2s;position:relative}
.pcard:hover{box-shadow:var(--shadow);border-color:#cfd8e3}
.pcard .im{height:180px;display:grid;place-items:center;border-radius:var(--r-sm);background:#fff}
.pcard .im img{max-height:180px;object-fit:contain}
.pcard .brand{font-size:12px;font-weight:600;color:var(--muted)}
.pcard h3{font-size:14px;font-weight:500;line-height:20px;height:40px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pcard h3 a:hover{color:var(--primary)}
.pcard .price{font-size:22px;font-weight:800;letter-spacing:-.01em}
.pcard .old{font-size:13px;color:var(--muted);text-decoration:line-through;margin-left:6px;font-weight:500}
.pcard .btn{width:100%}
.pcard .fav{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
.pcard .fav:hover{color:var(--deal);border-color:var(--deal)}
.pcard .fav .ic{width:17px;height:17px}

/* ---------- hero ---------- */
.hero{padding-top:24px;display:grid;grid-template-columns:940fr 324fr;gap:16px}
.slider{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/1;background:#e8ecf2}
.slides{display:flex;height:100%;transition:transform .45s ease}
.slides img{width:100%;height:100%;object-fit:cover;flex:none}
.sl-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 4px 12px rgba(11,31,58,.18);display:grid;place-items:center}
.sl-btn.prev{left:16px}.sl-btn.next{right:16px}
.dots{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:6px;background:rgba(11,31,58,.55);padding:6px 10px;border-radius:20px}
.dots button{width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.5);transition:width .25s}
.dots button.on{width:22px;background:#fff}
.side{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.weekly{display:flex;gap:12px;align-items:center;padding:16px 16px 16px 20px}
.weekly h3{font-size:15px;font-weight:700;line-height:1.3;margin-top:6px}
.weekly p{font-size:12px;color:var(--muted);font-weight:500}
.weekly .price{font-size:20px;font-weight:800;color:var(--primary);margin-top:4px}
.weekly img{width:120px;flex:none}
.corp-tile{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:18px 20px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.corp-tile small{color:var(--on-dark);font-weight:600;font-size:13px}
.corp-tile b{font-size:17px;font-weight:800;line-height:1.35}
.corp-tile .btn{align-self:flex-start;padding:8px 14px;font-size:13px}

/* ---------- trust ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:20px 28px;margin-top:20px}
.trust div{display:flex;gap:14px;align-items:center}
.trust .ib{width:46px;height:46px;border-radius:12px;background:var(--primary-50);color:var(--primary);display:grid;place-items:center;flex:none}
.trust .ib .ic{width:24px;height:24px}
.trust b{display:block;font-size:15px}
.trust span{font-size:13px;color:var(--muted)}

/* ---------- categories ---------- */
.cats{display:grid;grid-template-columns:repeat(8,1fr);gap:16px}
.cat{background:#fff;border:1px solid var(--line);border-radius:14px;height:168px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-weight:600;font-size:14px;text-align:center;transition:border-color .2s,transform .2s}
.cat:hover{border-color:var(--primary);color:var(--primary)}
.cat .ci{width:96px;height:96px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.cat .ci img{width:84px;height:84px;object-fit:contain}

/* ---------- banners ---------- */
.banners{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:40px}
.banners a{border-radius:var(--r-lg);overflow:hidden;display:block;aspect-ratio:3/1}
.banners img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.banners a:hover img{transform:scale(1.02)}

/* ---------- corporate band ---------- */
.corp{background:var(--navy);color:#fff;margin-top:64px;padding:64px 0}
.corp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px}
.eyebrow{color:#5AA9FF;font-weight:700;font-size:14px}
.corp h2{font-size:34px;font-weight:800;letter-spacing:-.015em;margin:6px 0 10px}
.corp-head p{color:var(--on-dark);max-width:560px;font-size:16px}
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sol{background:var(--navy-2);border:1px solid var(--navy-line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s,transform .2s}
.sol:hover{border-color:#3d6aa5;transform:translateY(-2px)}
.sol .ib{width:48px;height:48px;border-radius:12px;background:rgba(0,102,204,.22);color:#5AA9FF;display:grid;place-items:center}
.sol .ib .ic{width:24px;height:24px}
.sol b{font-size:18px}
.sol span{color:var(--on-dark);font-size:14px;line-height:1.5}

/* ---------- references ---------- */
.refs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ref{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s}
.ref:hover{box-shadow:var(--shadow)}
.ref img{aspect-ratio:16/10;object-fit:cover;object-position:top;border-bottom:1px solid var(--line)}
.ref .b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.ref b{font-size:17px;font-weight:800}
.ref p{font-size:13px;color:var(--muted);line-height:1.45;flex:1}
.ref .meta{display:flex;justify-content:space-between;font-size:12px;gap:8px}
.ref .meta span:first-child{color:var(--primary);font-weight:600}
.ref .meta span:last-child{color:var(--muted);display:flex;gap:4px;align-items:center}
.ref .ic{width:12px;height:12px}

/* ---------- marketplaces ---------- */
.market{display:flex;align-items:center;gap:16px;padding:24px 32px}
.market .t{flex:1}
.market h3{font-size:20px;font-weight:800}
.market p{color:var(--muted);font-size:14px}
.mp{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px 18px;transition:border-color .2s}
.mp:hover{border-color:var(--primary)}
.mp i{width:10px;height:10px;border-radius:50%}
.mp b{display:block;font-size:15px;font-weight:800;line-height:1.2}
.mp small{color:var(--muted);font-size:12px}
.mp .ic{width:16px;height:16px;color:var(--muted)}

/* ---------- about + store ---------- */
.about-store{display:grid;grid-template-columns:1fr 520px;gap:24px;padding:64px 0}
.about{padding:36px;display:flex;flex-direction:column;justify-content:center}
.about h2{font-size:30px;font-weight:800;margin:6px 0 14px;letter-spacing:-.01em}
.about p{color:var(--muted);font-size:15px;line-height:1.65;max-width:600px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chips span{background:var(--primary-50);color:var(--primary);font-weight:700;font-size:12px;border-radius:20px;padding:6px 12px}
.store{overflow:hidden}
.map{height:170px;position:relative;display:block;background:
 linear-gradient(-8deg,transparent 46%,#fff 46% 50%,transparent 50%),
 linear-gradient(4deg,transparent 62%,#fff 62% 65%,transparent 65%),
 linear-gradient(78deg,transparent 30%,#fff 30% 32%,transparent 32%),
 linear-gradient(102deg,transparent 64%,#fff 64% 66%,transparent 66%),
 radial-gradient(circle at 86% 22%,#d2ebd6 0 40px,transparent 41px),#e4eaf1}
.map .pin{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 8px rgba(0,102,204,.18)}
.store .info{padding:22px 28px 26px;display:flex;flex-direction:column;gap:12px}
.store h3{font-size:20px;font-weight:800}
.store .line{display:flex;gap:10px;font-size:14px;font-weight:500}
.store .line .ic{color:var(--primary);width:18px;height:18px;margin-top:1px}
.store .btns{display:flex;gap:10px;margin-top:4px}

/* ---------- footer ---------- */
.footer{background:var(--navy);color:var(--on-dark);padding:56px 0 28px;font-size:13px}
.fcols{display:grid;grid-template-columns:340px repeat(4,1fr);gap:48px}
.flogo{background:#fff;border-radius:10px;padding:10px 12px;display:inline-block;margin-bottom:14px}
.flogo img{height:41px}
.fcols h4{color:#fff;font-size:15px;margin-bottom:12px}
.fcols ul{list-style:none;display:grid;gap:9px}
.fcols a:hover{color:#fff}
.fcols address{font-style:normal;line-height:1.6}
.fcols .strong{color:#fff;font-weight:600;margin-top:10px}
.fbot{border-top:1px solid var(--navy-line);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.pays{display:flex;gap:8px}
.pays span{background:var(--navy-2);color:#fff;font-weight:700;font-size:11px;border-radius:6px;padding:5px 10px}
.f-acc summary{list-style:none}

/* ---------- toast ---------- */
.toast{position:fixed;right:24px;top:110px;z-index:90;width:360px;background:#fff;border-radius:var(--r);box-shadow:0 24px 48px -16px rgba(11,31,58,.4);border:1px solid var(--line);padding:16px;display:none;gap:14px}
.toast.on{display:flex;animation:pop .18s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.toast img{width:64px;height:64px;object-fit:contain;border:1px solid var(--line);border-radius:8px}
.toast b{display:flex;gap:6px;align-items:center;color:var(--success);font-size:14px}
.toast p{font-size:13px;margin:4px 0 10px}
.toast .tb{display:flex;gap:8px}
.toast .btn{padding:8px 12px;font-size:13px}

/* ---------- breadcrumb / page head ---------- */
.crumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);padding:18px 0}
.crumb a:hover{color:var(--primary)}
.crumb .ic{width:14px;height:14px}

/* ---------- category page ---------- */
.listing{display:grid;grid-template-columns:270px 1fr;gap:24px;padding-bottom:64px}
.filters{align-self:start;position:sticky;top:160px}
.fbox{padding:18px 20px;border-bottom:1px solid var(--line)}
.fbox:last-child{border-bottom:0}
.fbox h4{font-size:14px;margin-bottom:10px;display:flex;justify-content:space-between}
.chk{display:flex;gap:10px;align-items:center;font-size:14px;padding:5px 0;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--primary)}
.chk span{color:var(--muted);margin-left:auto;font-size:13px}
.range{display:flex;gap:8px}
.range input{width:100%;border:1px solid #c9d3df;border-radius:8px;padding:8px 10px;font-size:14px}
.lhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:16px}
.lhead h1{font-size:26px;font-weight:800}
.lhead h1 span{font-size:15px;color:var(--muted);font-weight:500;margin-left:6px}
.sort{display:flex;gap:10px;align-items:center;font-size:14px}
.sort select{border:1px solid #c9d3df;border-radius:8px;padding:9px 12px;background:#fff}
.active-f{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.active-f span{display:flex;gap:6px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:13px;font-weight:600}
.pager{display:flex;gap:6px;justify-content:center;margin-top:32px}
.pager a{min-width:40px;height:40px;border-radius:8px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.pager a.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.cat-intro{padding:20px 24px;margin-bottom:16px;display:flex;gap:20px;align-items:center}
.cat-intro p{color:var(--muted);font-size:14px}

/* ---------- product page ---------- */
.pp{display:grid;grid-template-columns:1fr 1fr 340px;gap:24px;padding-bottom:32px;align-items:start}
.gal{padding:24px}
.gal .main{aspect-ratio:1/1;display:grid;place-items:center}
.gal .main img{max-height:100%;object-fit:contain}
.thumbs{display:flex;gap:10px;margin-top:14px}
.thumbs button{width:72px;height:72px;border:1px solid var(--line);border-radius:10px;padding:6px;background:#fff}
.thumbs button.on{border:2px solid var(--primary)}
.pinfo h1{font-size:24px;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.pinfo .sub{display:flex;gap:16px;align-items:center;font-size:13px;color:var(--muted);margin:10px 0 18px;flex-wrap:wrap}
.pinfo .sub b{color:var(--ink)}
.specs{list-style:none;display:grid;gap:8px;font-size:14px}
.specs li{display:flex;gap:10px}
.specs li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);margin-top:8px;flex:none}
.buybox{padding:24px;position:sticky;top:160px;display:flex;flex-direction:column;gap:14px}
.buybox .price{font-size:32px;font-weight:800;letter-spacing:-.015em}
.buybox .vat{font-size:13px;color:var(--muted)}
.stockline{display:flex;gap:8px;align-items:center;color:var(--success);font-weight:700;font-size:14px}
.stockline i{width:8px;height:8px;border-radius:50%;background:currentColor}
.qty{display:flex;gap:10px}
.stepper{display:flex;border:1px solid #c9d3df;border-radius:var(--r-sm);overflow:hidden}
.stepper button{width:40px;font-size:18px;font-weight:700}
.stepper input{width:44px;text-align:center;border:0;outline:0;font-weight:700}
.qty .btn{flex:1;padding:14px 18px;font-size:15px}
.perks{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:10px}
.perks div{display:flex;gap:10px;font-size:13px;align-items:flex-start}
.perks .ic{color:var(--primary);width:18px;height:18px}
.perks b{display:block;font-size:13px}
.perks span{color:var(--muted)}
.tabs{margin-top:8px}
.tabbar{display:flex;gap:6px;border-bottom:1px solid var(--line);padding:0 24px}
.tabbar button{padding:16px 14px;font-weight:700;font-size:15px;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.tabbar button[aria-selected=true]{color:var(--primary);border-color:var(--primary)}
.tabpane{padding:28px 32px;max-width:900px}
.tabpane h3{font-size:18px;margin:18px 0 6px}
.tabpane h3:first-child{margin-top:0}
.tabpane p{color:#3b4a5e;line-height:1.7}
.spec-table{width:100%;border-collapse:collapse;font-size:14px}
.spec-table th,.spec-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
.spec-table th{width:240px;color:var(--muted);font-weight:600;background:#fafbfc}

/* ---------- corporate page ---------- */
.c-hero{background:var(--navy);color:#fff;padding:56px 0 64px;position:relative;overflow:hidden}
.c-hero::after{content:"";position:absolute;right:-120px;top:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(0,102,204,.35),transparent 65%)}
.c-hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;position:relative;z-index:1}
.c-hero h1{font-size:44px;font-weight:800;line-height:1.12;letter-spacing:-.02em;margin:10px 0 16px}
.c-hero p{color:var(--on-dark);font-size:17px;max-width:560px}
.c-hero .btns{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.c-hero .btn{padding:14px 22px;font-size:15px}
.btn-ghost{border:1.5px solid rgba(255,255,255,.35);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.08)}
.brands-box{background:var(--navy-2);border:1px solid var(--navy-line);border-radius:var(--r-lg);padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.brands-box div{background:#fff;color:var(--navy);border-radius:12px;height:84px;display:grid;place-items:center;font-weight:800;font-size:22px;letter-spacing:-.01em}
.brands-box small{grid-column:1/-1;color:var(--on-dark);font-size:13px;text-align:center}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc .card{padding:24px}
.svc .ib{width:48px;height:48px;border-radius:12px;background:var(--primary-50);color:var(--primary);display:grid;place-items:center;margin-bottom:14px}
.svc b{font-size:17px;display:block;margin-bottom:6px}
.svc p{color:var(--muted);font-size:14px}
.qcard .price{font-size:16px;color:var(--muted);font-weight:600}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.steps .card{padding:24px;position:relative}
.steps .card::before{counter-increment:s;content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;font-weight:800;display:grid;place-items:center;margin-bottom:14px}
.steps b{display:block;font-size:16px;margin-bottom:4px}
.steps p{color:var(--muted);font-size:14px}
.cta-band{margin:64px 0;background:linear-gradient(120deg,var(--primary),#0a4ea0);color:#fff;border-radius:20px;padding:40px 44px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.cta-band h2{font-size:28px;font-weight:800}
.cta-band p{opacity:.85}
.cta-band .btn{background:#fff;color:var(--primary);padding:14px 22px;font-size:15px}

/* ---------- mobile bottom bar ---------- */
.tabnav,.wa-float{display:none}

/* ================= responsive ================= */
@media (max-width:1200px){
  .grid-5{grid-template-columns:repeat(4,1fr)}.grid-5>*:nth-child(5){display:none}
  .cats{grid-template-columns:repeat(4,1fr)}
  .refs{grid-template-columns:repeat(2,1fr)}
  .catnav .item:nth-child(n+7){display:none}
  .pp{grid-template-columns:1fr 1fr}.buybox{grid-column:1/-1;position:static}
}
@media (max-width:900px){
  body{font-size:14px;padding-bottom:72px}
  .wrap{padding:0 16px}
  .topbar nav a:not(.tel){display:none}.topbar .wa-pill{display:none}
  .topbar .wrap{height:32px}.topbar .long{display:none}.topbar .short{display:inline;font-size:11px;white-space:nowrap}
  .header .row{height:auto;flex-wrap:wrap;gap:12px;padding:12px 0}
  .burger{display:block}.burger .ic{width:26px;height:26px}
  .logo img{height:32px}
  .acts{margin-left:auto;gap:16px}.act small,.act b{display:none}.act .ic{width:24px;height:24px}
  .acts .fav-act{display:none}
  .search{order:3;flex-basis:100%;height:46px;border-width:1px;border-color:var(--line);background:var(--bg)}
  .search input{background:transparent}
  .search button{display:none}
  .catnav{display:none}
  .catnav.open{display:block;position:fixed;inset:0;z-index:100;overflow:auto}
  .catnav.open .wrap{flex-direction:column;align-items:stretch;height:auto;padding:16px}
  .catnav.open .item{padding:14px 4px;border-bottom:1px solid var(--line)}
  .catnav.open .mega{display:grid;position:static;grid-template-columns:1fr 1fr;box-shadow:none;border:0;padding:12px 0}
  .m-only{display:block}
  .hero{grid-template-columns:1fr;padding-top:14px}
  .slider{border-radius:12px}.sl-btn{display:none}.dots{bottom:8px}
  .side{grid-template-rows:auto}.corp-tile{display:none}
  .weekly{padding:12px 14px}.weekly img{width:96px}
  .trust{grid-template-columns:1fr 1fr;padding:0;border:0;background:none;gap:8px;margin-top:12px}
  .trust div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;gap:10px}
  .trust .ib{width:32px;height:32px;border-radius:8px}.trust .ib .ic{width:18px;height:18px}
  .trust b{font-size:12px}.trust span{font-size:11px}
  .sec{padding-top:28px}.sec-head h2{font-size:18px}.arrows{display:none}
  .cats{display:flex;overflow-x:auto;gap:14px;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .cat{flex:none;width:76px;height:auto;background:none;border:0;gap:6px;font-size:12px}
  .cat .ci{width:64px;height:64px}.cat .ci img{width:54px;height:54px}
  .grid-5,.grid-4{grid-template-columns:1fr 1fr;gap:10px}.grid-5>*:nth-child(5){display:flex}
  .pcard{padding:12px;gap:8px}.pcard .im{height:130px}.pcard .im img{max-height:130px}
  .pcard .price{font-size:18px}.pcard h3{font-size:13px;line-height:18px;height:36px}
  .pcard .btn{padding:9px 10px;font-size:13px}.pcard .fav{width:30px;height:30px;right:10px;top:10px}
  .banners{grid-template-columns:1fr;padding-top:24px;gap:10px}
  .banners a{border-radius:12px}
  .corp{margin-top:32px;padding:28px 0}
  .corp-head{flex-direction:column;align-items:stretch;margin-bottom:16px}
  .corp h2{font-size:22px}.corp-head p{font-size:14px}.corp-head .btn{justify-content:center}
  .sol-grid{grid-template-columns:1fr;gap:0;background:var(--navy-2);border-radius:12px;overflow:hidden}
  .sol{flex-direction:row;align-items:center;border:0;border-bottom:1px solid var(--navy-line);border-radius:0;padding:13px 14px;gap:12px}
  .sol:hover{transform:none}.sol span{display:none}.sol b{font-size:14px}.sol .ib{width:34px;height:34px;border-radius:8px}.sol .ib .ic{width:18px;height:18px}
  .refs{display:flex;overflow-x:auto;gap:12px;margin:0 -16px;padding:0 16px;scrollbar-width:none}.ref{flex:none;width:260px}
  .market{flex-direction:column;align-items:stretch;padding:18px}.mp{justify-content:space-between}
  .about-store{grid-template-columns:1fr;padding:28px 0}.about{padding:22px}.about h2{font-size:22px}
  .fcols{grid-template-columns:1fr;gap:0}.fcols>div:first-child{margin-bottom:12px}
  .f-acc{border-bottom:1px solid var(--navy-line)}
  .f-acc summary{display:flex;justify-content:space-between;padding:15px 0;color:#fff;font-weight:700;font-size:15px;cursor:pointer}
  .f-acc h4{display:none}.f-acc ul{padding-bottom:14px}
  .fbot{flex-direction:column;align-items:flex-start}
  .tabnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid var(--line);justify-content:space-around;padding:8px 6px 12px}
  .tabnav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--muted);position:relative}
  .tabnav a.on{color:var(--primary);font-weight:700}
  .tabnav .ic{width:22px;height:22px}
  .wa-float{display:grid;position:fixed;right:16px;bottom:84px;z-index:80;width:52px;height:52px;border-radius:50%;background:var(--wa);color:#fff;place-items:center;box-shadow:0 6px 14px rgba(0,0,0,.22)}
  .wa-float .ic{width:26px;height:26px}
  .toast{left:12px;right:12px;width:auto;top:auto;bottom:84px}
  .listing{grid-template-columns:1fr}.filters{display:none}.filters.open{display:block;position:fixed;inset:0;z-index:100;overflow:auto;border-radius:0}
  .lhead{flex-wrap:wrap}.lhead h1{font-size:20px}
  .m-filter{display:flex!important;gap:8px;align-items:center}
  .cat-intro{display:none}
  .pp{grid-template-columns:1fr;gap:14px}.gal{padding:12px}.pinfo h1{font-size:19px}
  .buybox .price{font-size:26px}
  .tabbar{overflow-x:auto;padding:0 8px}.tabpane{padding:20px 16px}.spec-table th{width:120px}
  .c-hero{padding:32px 0 40px}.c-hero .wrap{grid-template-columns:1fr;gap:24px}.c-hero h1{font-size:28px}.c-hero p{font-size:15px}
  .svc,.steps{grid-template-columns:1fr}
  .cta-band{flex-direction:column;align-items:flex-start;padding:24px;margin:32px 0}.cta-band h2{font-size:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ===== Bootstrap 3 coexistence (default-theme fallback pages still use Bootstrap markup) ===== */
a:hover,a:focus{color:inherit;text-decoration:none}
.header h1,.header h2,.header h3,.header h4,.hero h1,.hero h2,.hero h3,.sec h1,.sec h2,.sec h3,.sec h4,.corp h1,.corp h2,.corp h3,
.about-store h2,.about-store h3,.footer h4,.pcard h3,.listing h1,.listing h3,.listing h4,.pp h1,.pp h3,.tabs h3,.c-hero h1,.trust b,
.market h3,.refs b,.mega h4,.weekly h3,.toast b,.cta-band h2{margin:0;font-family:var(--f);line-height:1.25}
.header p,.hero p,.sec p,.corp p,.footer p,.pcard p,.about p,.market p,.ref p,.store p,.toast p{margin:0}
.footer ul,.mega ul,.fcols ul{margin:0;padding:0}
.btn{border:0;line-height:1.3;white-space:nowrap;text-transform:none;box-shadow:none}
.btn-primary{border-color:var(--primary)}.btn-primary:focus,.btn-primary:active{background:var(--primary-dark);color:#fff}
body .container{max-width:var(--c);width:auto;padding:0 24px}
#content{min-height:300px}
.sb-legacy{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin:20px 0 48px}
.breadcrumb{background:none;padding:18px 0;margin:0;font-size:13px}
.breadcrumb>li+li:before{content:"›";color:var(--muted);padding:0 8px}
.alert{border-radius:var(--r-sm)}
.form-control{border-radius:var(--r-sm);border-color:#c9d3df;height:42px;box-shadow:none}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-50)}
textarea.form-control{height:auto}

/* ===== product rows (scrollable, arrows) ===== */
.prow{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 64px)/5);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.prow::-webkit-scrollbar{display:none}
.prow>.pcard{scroll-snap-align:start}
.arrows button{font-size:22px;line-height:1;font-weight:700;color:var(--ink)}
@media (max-width:1200px){.prow{grid-auto-columns:calc((100% - 48px)/4)}}
@media (max-width:900px){.prow{grid-auto-columns:46%;gap:10px;margin:0 -16px;padding:0 16px 4px}.prow-sec .arrows{display:none}}

/* menu: single line, overflow hidden (mega menu lists everything) */
.catnav .items{display:flex;gap:2px;flex:1;min-width:0;overflow:hidden;height:54px;align-items:center;flex-wrap:wrap}
.catnav .item{white-space:nowrap;line-height:38px}
.allcats{white-space:nowrap;flex:none}
.deals{white-space:nowrap;flex:none;margin-left:12px}
@media (max-width:900px){.catnav.open .items{flex-direction:column;height:auto;flex-wrap:nowrap;overflow:visible;align-items:stretch}}

/* ===== listing pages (category / search / special / manufacturer) ===== */
.listing.no-side{grid-template-columns:1fr}
.listing .grid-4{grid-template-columns:repeat(4,1fr)}
.listing.no-side .grid-4{grid-template-columns:repeat(5,1fr)}
.sublist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sublist a{display:block;padding:7px 10px;border-radius:6px;font-size:14px;font-weight:500}
.sublist a:hover{background:var(--bg);color:var(--primary)}
.side-mods .panel,.side-mods .list-group{border:0;box-shadow:none;margin:0;background:none}
.side-mods .panel-heading{background:none;border:0;padding:0 0 10px;font-weight:700;font-size:14px}
.side-mods .list-group-item{border:0;padding:6px 10px;border-radius:6px;font-size:14px;background:none}
.side-mods .list-group-item.active,.side-mods .list-group-item:hover{background:var(--primary-50);color:var(--primary)}
.side-mods .panel-footer{background:none;border:0;padding:12px 0 0}
.pager-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:32px}
.pagination{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:center}
.pagination>li>a,.pagination>li>span{min-width:40px;height:40px;padding:0 10px;border-radius:8px!important;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--ink);margin:0}
.pagination>li>a:hover{border-color:var(--primary);color:var(--primary);background:#fff}
.pagination>.active>span,.pagination>.active>span:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.results{font-size:13px;color:var(--muted)}
.empty{padding:48px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.empty>.ic{width:40px;height:40px;color:var(--muted)}
.empty .btns{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;justify-content:center}
.muted{color:var(--muted)}
.cat-desc{margin-top:32px;padding:28px 32px;display:flex;gap:24px;align-items:flex-start}
.cat-desc img{width:160px;flex:none;border-radius:var(--r-sm)}
.rte{color:#3b4a5e;line-height:1.7;font-size:15px}
.rte h1,.rte h2,.rte h3{color:var(--ink);font-family:var(--f);font-weight:800;line-height:1.3;margin:18px 0 8px}
.rte h1{font-size:22px}.rte h2{font-size:20px}.rte h3{font-size:17px}
.rte p,.rte ul,.rte ol{margin:0 0 12px}.rte ul,.rte ol{padding-left:22px}
.rte img{max-width:100%;height:auto!important;display:inline-block}
.rte table{max-width:100%;border-collapse:collapse}.rte td,.rte th{border:1px solid var(--line);padding:6px 10px}
.rte a{color:var(--primary);text-decoration:underline}
.ssearch{display:flex;gap:10px;padding:14px;margin-bottom:20px;align-items:center;flex-wrap:wrap}
.ssearch input[type=search]{flex:1 1 280px;height:44px;border:1px solid #c9d3df;border-radius:8px;padding:0 14px}
.ssearch select{height:44px;border:1px solid #c9d3df;border-radius:8px;padding:0 10px;background:#fff;max-width:240px}
.ssearch .chk{font-size:13px}

/* ===== product page extras ===== */
.pinfo .sub a:hover b{color:var(--primary)}
.stars{color:#f59e0b;letter-spacing:1px}.stars a{color:var(--muted);letter-spacing:0;margin-left:4px}
.help{display:flex;gap:14px;align-items:center;padding:16px 18px;margin-top:24px}
.help>.ic{width:28px;height:28px;color:var(--wa)}
.help b{display:block;font-size:14px}.help span{font-size:13px;color:var(--muted)}
.help .btn{margin-left:auto;padding:9px 16px}
.buybox .old{font-size:16px;color:var(--muted);text-decoration:line-through;font-weight:500;margin-left:6px}
.buybox .btn-lg{padding:14px 18px;font-size:15px;width:100%}
.buybox>.btn-line{width:100%}
.stockline.out{color:var(--deal)}
.discounts{list-style:none;margin:0;padding:10px 12px;background:var(--bg);border-radius:8px;font-size:13px;display:grid;gap:4px}
.opts .form-group{margin-bottom:12px}.opts .control-label{font-weight:700;font-size:13px;margin-bottom:6px;display:block}
.has-error .form-control{border-color:#dc2626}.text-danger{color:#dc2626;font-size:13px;margin-top:4px}
.tabs{margin-bottom:8px}
.tabpane[hidden]{display:none}
.spec-table .grp{background:var(--primary-50);color:var(--primary);font-weight:800}
.review-form{margin-top:24px;max-width:620px;display:grid;gap:4px}
.review-form h3{font-size:17px;margin:0 0 8px}
.review-form .control-label{font-weight:700;font-size:13px;display:block;margin-bottom:6px}
.rate{display:flex;gap:14px}
#review table{width:100%;margin-bottom:14px;border:1px solid var(--line);border-radius:8px}
#review td{padding:8px 12px;font-size:14px}

@media (max-width:1200px){.listing .grid-4,.listing.no-side .grid-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .listing .grid-4,.listing.no-side .grid-4{grid-template-columns:1fr 1fr}
  .sort{width:100%}.sort select{flex:1;min-width:0}
  .cat-desc{padding:18px;flex-direction:column}.cat-desc img{width:120px}
  .help{flex-wrap:wrap}.help .btn{margin-left:0}
  .ssearch select{max-width:none;flex:1}
}
.rte{overflow-wrap:anywhere;overflow-x:auto}.rte *{max-width:100%!important;box-sizing:border-box}.rte picture,.rte img{height:auto!important}

/* ===== information + contact ===== */
.info-page{display:grid;grid-template-columns:1fr 300px;gap:24px;padding-bottom:64px;align-items:start}
.info-body{padding:32px 40px}
.info-body h1{font-size:28px;font-weight:800;margin:0 0 18px;letter-spacing:-.01em}
.info-side{padding:22px;display:flex;flex-direction:column;gap:10px;position:sticky;top:160px}
.info-side b{font-size:16px}.info-side p{margin:0;font-size:14px;color:var(--muted)}
.contact-head{padding:8px 0 20px}.contact-head h1{font-size:30px;font-weight:800;margin:0 0 6px}.contact-head p{color:var(--muted);margin:0}
.contact-grid{display:grid;grid-template-columns:420px 1fr;gap:24px}
.contact-info{padding:28px;display:flex;flex-direction:column;gap:18px}
.contact-info .line{display:flex;gap:14px}
.contact-info .line>.ic{width:22px;height:22px;color:var(--primary);margin-top:2px}
.contact-info b{display:block;font-size:14px;margin-bottom:2px}
.contact-info address{font-style:normal;margin:0;line-height:1.55}
.contact-info a:hover{color:var(--primary)}
.contact-info .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.contact-map{overflow:hidden;min-height:360px}.contact-map iframe{width:100%;height:100%;min-height:360px;border:0;display:block}
.contact-form{padding:28px 32px;margin:24px 0 64px;max-width:880px}
.contact-form h2{font-size:22px;font-weight:800;margin:0 0 4px}
.contact-form form{margin-top:18px;display:grid;gap:4px}
.contact-form .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form .control-label{font-weight:700;font-size:13px;display:block;margin-bottom:6px}
.contact-form .btn{justify-self:start;padding:12px 28px}
@media (max-width:900px){
  .info-page,.contact-grid{grid-template-columns:1fr}.info-body{padding:22px}.info-body h1{font-size:22px}.info-side{position:static}
  .contact-form{padding:20px}.contact-form .fgrid{grid-template-columns:1fr;gap:0}.contact-head h1{font-size:24px}
}
/* polish: breadcrumbs on one line, clean 2-line product titles */
.crumb{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.crumb>*{flex:none}.crumb>[aria-current]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pcard h3{height:auto;min-height:40px;max-height:40px}
@media (max-width:900px){.pcard h3{min-height:36px;max-height:36px}}

/* ===== v4 fixes: mega menu masonry, hero side height ===== */
.mega.open{display:block;columns:4;column-gap:32px}
.mega .mcol{break-inside:avoid;margin-bottom:22px}
.mega h4{font-size:15px;font-weight:800;margin:0 0 8px}
.mega h4 a{display:block;color:var(--ink);font-weight:800}
.mega h4 a:hover{color:var(--primary)}
.hero{align-items:stretch}
.side{contain:size;min-height:0;grid-template-rows:1fr 1fr}
.side>*{min-height:0;overflow:hidden}
.corp-tile{padding:16px 20px;gap:6px}
.weekly{padding:12px 16px 12px 18px}
.weekly h3{font-size:14px;margin-top:4px}
@media (max-width:1200px){
  .hero{grid-template-columns:1fr}
  .side{contain:none;grid-template-rows:auto;grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .mega.open,.catnav.open .mega{columns:2;display:block}
  .side{grid-template-columns:1fr}
}
.weekly{padding:10px 14px 10px 18px}.weekly img{width:100px}.weekly p{line-height:1.35}
.pcard h3{line-height:20px!important}
@media (max-width:900px){.pcard h3{line-height:18px!important}}