/* Кольори й будова — за secur.ua (рішення Антона 14.11): шапка #10204b, основний синій #0093ee, тло #fbfbfb, текст #101010, шрифт Inter. */
:root{--bg:#fbfbfb;--card:#fff;--line:#e4e6ea;--t1:#101010;--t2:#676767;--t3:#9a9a9a;--navy:#10204b;--navy2:#1b2f66;
--blue:#0093ee;--blue-d:#0079c4;--blue-bg:#e8f4fd;--orange:#fd7900;--ok:#1a8a3c;--wait:#a15c00;--err:#c0262d;--r:6px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--t1);font:15px/1.5 Inter,"Segoe UI",Roboto,Arial,sans-serif}
a{color:inherit}img{max-width:100%}h1{font-size:30px;font-weight:500;line-height:1.2;margin:0 0 8px}h2{font-size:22px;font-weight:600;margin:30px 0 14px}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}
.top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:center;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none;font:800 24px/1 Inter,Arial,sans-serif;letter-spacing:.06em;color:#fff}
.logo img{display:block}.logo i{font-style:normal;font-weight:500;letter-spacing:0;color:var(--blue);font-size:.8em}
.catm{position:relative;flex:none}
.catm summary{list-style:none;display:flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:5px;background:var(--blue);color:#fff;font-weight:500;cursor:pointer;user-select:none}
.catm summary::-webkit-details-marker{display:none}
.catm summary:before{content:"";width:16px;height:12px;background:linear-gradient(#fff 0 0) top/100% 2px no-repeat,linear-gradient(#fff 0 0) center/100% 2px no-repeat,linear-gradient(#fff 0 0) bottom/100% 2px no-repeat}
.catm summary:hover{background:var(--blue-d)}.catm summary:focus-visible{outline:3px solid #fff}
.catl{position:absolute;left:0;top:48px;z-index:30;min-width:300px;padding:6px;background:var(--card);border-radius:6px;box-shadow:0 12px 32px rgba(0,0,0,.2)}
.catl a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:5px;color:var(--t1);text-decoration:none;font-size:14px}
.catl a:hover,.catl a:focus-visible{background:var(--blue-bg);color:var(--blue-d)}
.search{flex:1;position:relative;display:flex;max-width:620px}
.search input{flex:1;min-width:0;height:40px;border:0;border-radius:5px 0 0 5px;padding:0 14px;font-size:14px;background:#fff;color:var(--t1)}
.search button{height:40px;border:0;border-radius:0 5px 5px 0;background:var(--blue);color:#fff;padding:0 16px;font-weight:500;cursor:pointer}
.search button:hover{background:var(--blue-d)}.search input:focus{outline:2px solid var(--blue)}
.sr{position:absolute;left:0;right:0;top:46px;background:var(--card);color:var(--t1);border-radius:6px;box-shadow:0 12px 32px rgba(0,0,0,.2);max-height:70vh;overflow:auto}
.sr a{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:8px 12px;text-decoration:none;border-bottom:1px solid var(--line);font-size:14px}
.sr a:hover{background:var(--blue-bg)}.sr img,.sr a>span:first-child{width:44px;height:44px;object-fit:contain;background:#fff}.sr .none{padding:12px;margin:0;color:var(--t2)}
.sr .all{display:block;text-align:center;color:var(--blue-d);font-weight:500}
.tel{flex:none;display:flex;align-items:center;gap:6px;color:#fff;text-decoration:none;font-weight:500;white-space:nowrap}.tel svg{width:18px;height:18px}.tel:hover{color:var(--blue)}
.cartlink{flex:none;position:relative;display:flex;align-items:center;color:#fff;text-decoration:none;padding:6px}.cartlink svg{width:26px;height:26px}
.cartlink b{position:absolute;top:-2px;right:-6px;background:var(--orange);color:#fff;border-radius:9px;padding:0 6px;font-size:12px;line-height:18px}
.crumbs{padding-top:16px;margin-bottom:10px;font-size:13px;color:var(--t2)}.crumbs a{color:var(--t2);text-decoration:none}.crumbs a:hover{color:var(--blue)}
/* головна: меню розділів ліворуч, як на secur.ua */
.home{display:grid;grid-template-columns:270px 1fr;gap:20px;padding-top:20px}
.side{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:6px;align-self:start}
.side a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:5px;text-decoration:none;font-size:14px}
.side a i{margin-left:auto;font-style:normal;color:var(--t3);font-size:12px}.side a:hover{background:var(--blue-bg);color:var(--blue-d)}
.hero{background:linear-gradient(120deg,var(--navy),var(--navy2) 60%,#0d5b94);color:#fff;border-radius:var(--r);padding:34px 32px}
.hero h1{font-size:32px;font-weight:700}.hero p{max-width:640px;color:#d6e1f5;margin:0 0 18px}
.hero-b{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;border-radius:5px;padding:10px 18px;font-weight:500}.btn:hover{background:var(--blue-d)}
.btn.ghost{background:transparent;border:1px solid #fff}.btn.ghost:hover{background:rgba(255,255,255,.12)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:14px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;text-decoration:none;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center}
.tile span{grid-row:span 2;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:8px;background:var(--blue-bg);color:var(--blue)}.tile .ic{width:24px;height:24px}.tile b{font-size:14px;font-weight:600}.tile i{font-style:normal;color:var(--t2);font-size:13px}
.tile:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(0,147,238,.12)}
.brands{display:flex;flex-wrap:wrap;gap:10px}.brands a{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 22px;text-decoration:none;font-weight:700;letter-spacing:.03em;color:var(--navy)}
.brands a:hover{border-color:var(--blue);color:var(--blue-d)}
.steps ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:0;list-style:none;counter-reset:s}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;color:var(--t2);font-size:14px;counter-increment:s}
.steps li b{display:block;color:var(--t1);font-size:15px;margin-bottom:4px}.steps li b:before{content:counter(s) ". ";color:var(--blue)}
/* каталог: фільтри ліворуч */
.catalog{display:grid;grid-template-columns:270px 1fr;gap:24px;align-items:start;padding-bottom:40px}
.lead{color:var(--t2);margin:0 0 14px;max-width:860px}
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;position:sticky;top:80px;max-height:calc(100vh - 92px);overflow:auto}
.fhead{display:flex;align-items:center;gap:8px;margin-bottom:6px}.fhead b{flex:1;font-size:18px;font-weight:700;text-transform:uppercase}
fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:12px 0}legend{font-weight:600;font-size:14px;padding:0;margin-bottom:8px}
fieldset label{display:flex;align-items:center;gap:8px;font-size:14px;padding:3px 0;cursor:pointer}fieldset label i{color:var(--t3);font-style:normal;font-size:12px;margin-left:auto}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue)}
.rng{display:flex;gap:6px}.rng input{width:50%;height:34px;border:1px solid var(--line);border-radius:5px;padding:0 8px;font-size:14px}
.tools{display:flex;align-items:center;gap:10px;margin-bottom:14px}#found{flex:1;color:var(--t2);font-size:14px}
select{height:38px;border:1px solid var(--line);border-radius:5px;padding:0 10px;background:var(--card);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card{position:relative;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .15s}
.card:hover{box-shadow:0 6px 20px rgba(16,32,75,.1)}.card[hidden]{display:none}
.cc{font-size:11px;color:var(--t3);text-align:right}
.pic{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#fff;overflow:hidden}.pic img{width:100%;height:100%;object-fit:contain}
img.noph{width:72px!important;height:72px!important;opacity:.3}
.st{font-size:12px;font-weight:500}.st.ok{color:var(--ok)}.st.few{color:var(--orange)}.st.wait{color:var(--wait)}
.card h3{font-size:14px;font-weight:400;line-height:1.4;margin:0;flex:1;overflow-wrap:anywhere}.card h3 a{text-decoration:none}.card h3 a:hover{color:var(--blue-d)}
.buy{display:flex;align-items:center;justify-content:space-between;gap:8px}.price{font-size:22px;font-weight:700;white-space:nowrap}.price.big{font-size:32px}
.btn-cart{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;border:0;border-radius:5px;width:40px;height:40px;cursor:pointer}
.btn-cart svg{width:22px;height:22px}.btn-cart:hover{background:var(--blue-d)}
.btn-cart.big{width:auto;height:48px;padding:0 26px;font-size:16px;font-weight:600}.btn-cart:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{background:var(--card);border:1px solid var(--line);border-radius:5px;padding:9px 16px;font-size:14px;cursor:pointer}.btn-ghost:hover{border-color:var(--blue)}
.more{display:block;margin:18px auto 0}.link{background:none;border:0;color:var(--blue-d);cursor:pointer;font-size:13px;padding:0;text-decoration:underline}
.only-m{display:none}
/* товар */
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;padding-bottom:40px}
.ppic{background:#fff;border:1px solid var(--line);border-radius:var(--r);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:sticky;top:84px;padding:20px}
.ppic img{max-height:100%;object-fit:contain}
.pinfo h1{font-size:26px}.meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.meta .cc{text-align:left}
.pbuy{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:16px 0}
.howto{background:var(--blue-bg);border-radius:var(--r);padding:12px 14px 12px 32px;color:var(--t1);font-size:14px;margin:0}
.spec{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);font-size:14px}
.spec th,.spec td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.spec th{width:42%;color:var(--t2);font-weight:400}
.desc p{color:var(--t2);white-space:pre-line}
.about{max-width:880px;padding-bottom:40px}.about p{color:var(--t2)}
/* кошик */
.cartp{max-width:880px;padding-bottom:40px}
.ci{display:grid;grid-template-columns:56px 1fr auto auto auto;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px;margin-bottom:8px;font-size:14px}
.ci img,.ci>span{width:56px;height:56px;object-fit:contain;background:#fff}.ci a{text-decoration:none}
.qty{display:flex;align-items:center;gap:8px}.qty button{width:30px;height:30px;border:1px solid var(--line);background:var(--card);border-radius:5px;font-size:16px;cursor:pointer}
.total{text-align:right;font-size:20px;margin:12px 0}.minw{text-align:right;margin:0 0 12px;color:var(--wait);font-weight:500}
.order{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:12px}
.order h2{margin:0}.order label{display:grid;gap:4px;font-size:14px;color:var(--t2)}
.order input,.order textarea{border:1px solid var(--line);border-radius:5px;padding:10px;font:inherit;color:var(--t1)}.order input:focus,.order textarea:focus{outline:2px solid var(--blue);border-color:transparent}
.pay{display:grid;gap:2px;background:var(--blue-bg);border-left:3px solid var(--blue);border-radius:5px;padding:10px 12px;font-size:14px}.pay span{color:var(--t2)}
.order input,.order textarea,.search input,.rng input,select,button{font-family:inherit}
.hp{position:absolute;left:-9999px}.small{font-size:12px;color:var(--t3);margin:0}.err{color:var(--err);margin:0}
.done{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}.done b{color:var(--ok)}
/* підвал */
.foot{background:var(--navy);color:#c6d0e6;margin-top:36px;padding:30px 0;font-size:14px}.foot .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:20px}
.foot b{display:block;color:#fff;margin-bottom:8px}.foot a{display:block;color:#c6d0e6;text-decoration:none;padding:2px 0}.foot a:hover{color:#fff}.foot span{display:block}
.foot .logo{display:inline-flex;padding:0}.foot p{margin:10px 0 0}
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,30px);opacity:0;background:var(--navy);color:#fff;padding:11px 16px;border-radius:6px;font-size:14px;transition:.2s;z-index:50;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}.toast a{color:var(--blue)}
@media (max-width:960px){.home{grid-template-columns:1fr}.side{display:none}.foot .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
 .catalog{grid-template-columns:1fr}.only-m{display:inline-block}
 .filters{position:fixed;inset:0;z-index:40;border-radius:0;max-height:none;top:0;display:none}.filters.open{display:block}
 .product{grid-template-columns:1fr;gap:14px}.ppic{position:static}
 .bar{flex-wrap:wrap;height:auto;padding:10px 16px;gap:10px}.catm{order:3}.search{order:4;flex:1 1 150px;max-width:none}
 .tel{width:40px;height:40px;justify-content:center;background:var(--navy2);border-radius:5px}.tel span{display:none}
 .logo{flex:1;font-size:21px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.card{padding:10px}.price{font-size:18px}
 .ci{grid-template-columns:48px 1fr}.ci .qty,.ci .sum,.ci .link{grid-column:2}
 h1{font-size:24px}.hero{padding:24px 18px}.hero h1{font-size:25px}
}
@media (max-width:480px){.foot .wrap{grid-template-columns:1fr}.catm summary{padding:0 12px}}
.ic{width:20px;height:20px;flex:none;color:var(--blue)}
.catl a span,.side a span{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;background:var(--blue-bg)}
.catl a:hover span,.side a:hover span{background:#fff}
.ppic{flex-direction:column;gap:10px}.ppic>img{flex:1;min-height:0}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.thumbs button{width:58px;height:58px;padding:3px;border:1px solid var(--line);border-radius:5px;background:#fff;cursor:pointer}
.thumbs button img{width:100%;height:100%;object-fit:contain}.thumbs button.on,.thumbs button:hover{border-color:var(--blue)}
.msg{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:14px;font-weight:500;border-radius:5px;padding:6px 10px;color:#fff}
.msg svg{width:18px;height:18px}.msg.vb{background:#7360f2}.msg.tg{background:#229ed9}.msg:hover{filter:brightness(1.08)}
.msg.hm{padding:0;width:34px;height:34px;justify-content:center;flex:none}.msg.hm span{display:none}
.msgs{display:flex;gap:8px;margin-top:8px}.foot .msgs a{display:inline-flex;color:#fff;padding:6px 10px}
.ask{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;font-size:14px;color:var(--t2)}